Heroes & Sections
How It Works — Steps
Numbered step sequence with a connecting line on desktop, stacked on mobile.
Needs a licence key —
subscribe here, then
velocityx loginonce.
How It Works — Steps
Live preview of the How It Works — Steps component
Process
From brief to live in four steps
The same pipeline every Velocity X fork follows.
- 1
Discovery call
We learn the brand, the audience, and what the old site got wrong.
- 2
Fork + brand.json
Stock template forks, brand identity and copy pages wired from JSON.
- 3
Custom home build
Home page composed from the component catalog for that industry.
- 4
Ship + iterate
Live on Netlify, then we tune based on real traffic.
The code ships with Velocity.
Every component's full source — copy-paste ready, yours to edit — comes with any Velocity package. Buy once, own the code forever.
Get Velocity X — from $1,250 See all packages →Using the How It Works — Steps component
Every Velocity component is plain Astro or React markup styled with Tailwind utility classes. There is no proprietary runtime and no design-system wrapper to adopt — the component inherits whatever colour and type tokens your project already defines.
More Heroes & Sections components
Browse all →Integrations — Logo Grid
Grid of linkable integration/partner logo cards.
Stats Band
Horizontal band of big numbers with labels, with a reversed dark-panel variant.
CTA — Closing with Background Pattern
Final-page CTA with a subtle CSS dot-grid pattern masked behind the copy.
Error / 404 State Section
Centred full-page error state with a large code, message and primary/secondary actions.
Hero — Centred
Centred eyebrow/headline/sub hero with two optional CTAs.
Hero — Split with Image
Copy-left image-right hero with a gradient placeholder fallback when no image is supplied.









