Design reference
Hero sections — every above-the-fold template, in one place.
Ten hero shapes: the two shipped heroes plus eight templates any page can adopt. Each
specimen below is the real markup and the shared classes from public/styles.css,
so this page can't drift from what ships. It's the hero-focused sibling of the
section gallery, footer gallery,
and header variants.
- CSS-only. No scripts, images, or canvas required above the fold — visuals are markup, gradients, and inline SVG.
- The headline paints first. One
h1per page, plain text, and never behind a reveal animation — it's the LCP element. - Decoration is decoration. Supporting panels are
aria-hiddenwhere they add nothing for readers, and nothing shifts layout as it loads. - Motion never gates the message. Panels drift, fade in, follow the mouse, and shift as you scroll. But only the trim moves. The headline, the sub-line, and the buttons all show the moment the page paints, and
prefers-reduced-motionstills everything.
Home hero
The main top block. A column of words plus a floating stack of art, over a 3D backdrop (left out here). Two columns on a big screen, stacked on a phone.
The heaviest one. The 3D layer loads behind the words and the art is hidden from screen readers, so the headline still draws first. Save it for the home page.
One connected system
One marketing system for service teams.
Get leads, run ads, follow up, and report. That turns scattered looks into real sales talks.
Every engagement opens with a funnel audit, then runs on a weekly cadence against real signal.
Interior hero
The inner-page hero. Copy column paired with a framed “flow” panel that summarises the offer, so deep pages open with the same weight as home.
CSS + inline SVG only. The panel carries the ambient glow drift and staggers in on scroll; the headline never waits on it.
Services
Start with the leak, not the loudest tool.
Four connected systems, run as one funnel — so effort compounds instead of scattering.
Capture qualifies on the way in, campaigns ship on a schedule, lifecycle keeps leads warm, and measurement tells spend where to go.
Centered hero
Words only, in the middle, with nothing beside them. A small label, a headline, a sub-line, buttons, and one calming line. The go-to for pages where one next step is the whole point.
The lightest top block there is. Just text, nothing beside it, so the first thing to draw is the headline itself. The bright phrase is only paint, with no fade and no wait.
Free training
Watch the capture-to-booked-call system in 20 minutes.
The exact funnel we build for service teams — pages, follow-up, and the weekly review — shown end to end.
Free to watch. No card, no obligation — bring one funnel you want to fix.
Capture hero
Words beside a name-and-email box, so the thing you want them to do sits up top, not a scroll away. Real pages wire the form exactly like the webinar lead-form.
Form renders as static HTML; the submit script can load deferred without touching first paint.
Start with an audit
Tell us where the funnel leaks. We'll find where it's costing you.
Send a short inquiry and we open with a funnel audit — audience, offer, channels, and budget reality.
First reply within one business day, with the first review scheduled from real calendar availability.
Frame hero
Copy beside a CSS-drawn browser window sketching a report or page preview — the “show the product” hero without a screenshot.
It swaps a product screen shot for real code. No picture to load up top, it switches to dark mode for free, and the rows come in one by one like live data.
Measurement
Every lead, every touch, one report.
Capture, follow-up, and attribution roll into a single weekly view — so spend follows results, not guesses.
The same report drives the weekly review on every engagement.
Checklist hero
Copy beside a slim deliverables card — for offer pages where “exactly what you get” is the hook that earns the scroll.
Text and inline check icons only; the card paints with the headline in one pass.
Caravan Launch Kit
Everything you need to launch your first funnel, in one kit.
The templates, checklists, and launch sequence we use on real engagements — yours for a dollar.
Stats hero
Full-width words with a strip of fact chips under the buttons. Real facts about the offer, like how often we meet, who owns what, and how big the job is. Never made-up results.
Single-column flow, no side panel to lay out — fast and stable (no layout shift) on every viewport.
Pricing
One engagement. Four systems. A weekly cadence.
Every tier is a defined scope with a named leak — no open-ended retainers, no surprise line items.
Proof hero
Copy beside one featured quote card. Same policy as the proof grid: real attributions only, or a labelled placeholder until one exists.
A quote is just text — proof above the fold at zero asset cost.
Case studies
Proof, with the source named.
Outcomes appear here only when a real engagement backs them — no invented numbers, no borrowed logos.
The audit alone paid for the first month — it found the leak we'd been funding for a year.
Compact hero
A short banner. A headline, one line, and a small row of facts. On design pages, the win is giving the top block LESS room so the real content starts higher.
Smallest fold footprint in the family; the page's actual content becomes part of the first paint.
Docs
Lead Caravan documentation.
How the system is set up, run, and handed back — kept current with every engagement.
Tags hero
Words plus a row of topic buttons, so hub pages send folks straight where they want to go without scrolling to a grid.
Pills are plain links — navigable before any script loads, and the row wraps without layout shift.