Lead capture
Offer-specific pages and forms that qualify on the way in.
Design reference
Section gallery — every reusable section shape, in one place.
The marketing site is built from a small set of reusable section shapes over one shared
stylesheet (public/styles.css). Each specimen below is the real section — same
markup, same classes — so this page can't drift from what ships. Shapes specialized to a
single page (pricing table, tools grid, step lists, and the rest) are cross-linked at the
bottom instead of duplicated here. It's the sibling of the
footer gallery, header variants,
and the hero sections gallery (which covers all ten hero templates).
- Real markup, not mockups. Each sample draws the real block. The top block and the slider come from the same shared parts the live pages use. So these shapes can never drift from what ships.
- Demo copy, live enhancement. The words are stand-ins. The movement and buttons (fade in on scroll, slider snap and arrows) are the site's real add-on layer from
public/app.js. - Reusable here, specialized elsewhere. Every reusable shape is rendered on this page; single-page shapes are listed in Documented elsewhere with links to the page that ships them.
- 1 Home hero
hero-band - 2 Interior hero
interior-hero - 3 Content band + card grid
content-band · service-grid - 4 Split band
content-band split-band - 5 Process rail
process-rail - 6 Proof grid
proof-grid · proof-card - 7 Compatibility logo strip
content-band niche-logos · logo-strip - 8 Assurance row
assurance-row - 9 FAQ accordion
faq-accordion (FaqSection) - 10 CTA band (base)
cta-band - 11 Feature CTA band
cta-band cta-band--feature - 12 Fallback band
content-band fallback-band - 13 Checkout band
content-band checkout-band - 14 Media carousel
content-band media-carousel
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.
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.
Services
Start with the leak, not the loudest tool.
Four connected systems, run as one funnel — so effort compounds instead of scattering.
Forms sort people on the way in, ads go out on a plan, follow-up keeps leads warm, and reports tell your money where to go.
Content band + card grid
The body block we use most. A heading, then a grid of cards that reflows. This is the go-to way any page lays out a set of points.
What you get
Four systems, one connected funnel.
Each card is one system — capture, campaigns, lifecycle, and measurement — working off the same audit.
Campaign operations
A launch cadence so the funnel ships on a schedule, not a whim.
Lifecycle automation
Follow-up and nurture that keep leads warm between touches.
Measurement
Pipeline and attribution reporting so spend follows results.
Split band
A two-column band. Heading and words on one side, a list of cards on the other. For when the words and the proof need to sit together.
How we work
Owned by you, run with you.
You keep the accounts, the data, and the pages. We bring the operating system.
Everything is built in your accounts and handed back documented, so nothing walks out the door if the engagement ends.
Built in place
Pages, campaigns, and automations live in your own tools from day one.
Reviewed, not set-and-forget
A standing review adjusts the path against real funnel signal every week.
Nothing walks out
Handoff docs mean the system keeps running with or without us.
Process rail
Numbered operating cadence with a connecting spine. Turns “how it works” into an ordered, scannable path.
How an engagement runs
Audit, build, launch — then review.
Every engagement opens with a funnel audit, then runs on a weekly operating cadence.
- 1
Audit
Map your audience, offer, channels, and budget to find where the funnel actually leaks.
- 2
Build
Ship the fix for the leak that's costing most — pages, campaigns, automations, or reporting.
- 3
Launch
Take it live with launch checks, then route and follow up on every new lead.
- 4
Review
A weekly review adjusts the path against real funnel signal, not guesses.
Proof grid
Quote cards, three across. The site's testimonial/proof shape — real attributions only, no invented numbers.
Proof
Real words from real engagements.
Quotes appear only when a real source exists — 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.
Placeholder attribution — real quote pending
One system instead of five tools nobody owned. The weekly review is the part that stuck.
Placeholder attribution — real quote pending
We kept every account and page. Nothing walked out when the sprint ended.
Placeholder attribution — real quote pending
Compatibility logo strip
The “works with what you already run” row — brand names as pills, centred, with a qualifying note beneath. Promoted from a page-scoped style into the shared sheet so it is genuinely reusable.
Works with what you install
- Enphase
- SolarEdge
- Tesla Powerwall
- SunPower
- Qcells
Shown for context — the funnel is configured to your equipment lines and local utility at setup.
Assurance row
An icon, a heading, and a line of trust marks, laid out in a row. The honest stand-in for a stats bar when the numbers are not yours to claim.
What you can hold us to
Three boundaries, in writing.
Real numbers only
Case studies and figures appear only when real source proof exists, with the source named.
You own everything
Accounts, data, and pages stay yours — built in place and handed back documented.
Clear scope
Every engagement is a defined scope with a named leak — no open-ended retainers.
FAQ accordion
The one shared block that is a real part. It uses built-in <details>, so it works with a keyboard and a screen reader with no script. The first item starts open.
FAQ
How this page works.
The only section shape shipped as a real component — rendered live below.
Is this a real section or a mock?
Real. Every sample below uses the same code and shared styles the live pages use, so this page can never drift from what ships.
How do I add a new section shape here?
Add a sample to src/pages/section-gallery.astro and a row to the list, copying the standard code a page uses for that shape.
Why are these classes and not components?
These blocks are style patterns over one shared sheet. Only the questions block is a real part (FaqSection). The rest are built from headings, bands, grids, and cards.
CTA band (base)
The plain closing ask. Same words-plus-button shape as the raised band below, without the lift. We use this one more. Reach for the raised one only when the close needs extra weight.
Lead Caravan
Want your story to be one of the first here?
Every job starts with a free look at your leads. We map who buys, what you sell, where you post, and what you spend. From there, we track everything from day one.
Feature CTA band
The closing ask every sales page ends on. A small label, a heading, and one main button, in a raised band.
Ready when you are
Let's find the leak that's costing you most.
Send a short inquiry and we'll open with a funnel audit — no obligation.
Fallback band
The nothing-here shape. A tall band, centred, that gives a dead end somewhere to go. A heading, a short why, one main button, and a line of other ways out.
404
This page took a wrong turn.
The link you followed does not lead anywhere here. Head back home to see how the whole marketing system fits together.
Or send an inquiry to start a funnel audit, or pick up onboarding where you left off.
Checkout band
The shape for pages that ask you to act. A column that sticks as you scroll (label, heading, button, trust line) beside the panel that does the work. A payment form, a list of choices, or a next-step set. Every payment and after-paymention page is built on it.
You're booked
Your call is confirmed.
Your time is saved. Here's what to expect on the call.
Need to add context before we meet? Email hello@leadcaravan.com and we'll sort it out.
Media carousel
A horizontal image set with a coverflow depth cue that is scrubbed by your own scroll, not played at you. Three layers, each degrading to the one below: a CSS scroll-snap track (works with no JS at all), buttons and dot jumps once app.js loads, and the scroll-driven depth/progress motion where the browser supports it.
The work, illustrated
Six offers, one track.
Drag it, flick it, or use the arrow keys. The depth comes from where you have scrolled, so it can never fall out of step with what you see.
-
Funnel audit
The engagement opener — a funnel under a magnifier, leak found.
-
Growth engagement
The ongoing engagement — a trend panel climbing left to right, no fabricated figures.
-
Caravan Launch Kit
The $1 instant-access kit — package, launch bolt, and the one honest number on the page.
-
Book a call
The scheduler funnel — a calendar with one confirmed slot and a clock.
-
On-demand training
The recorded-training funnels — a player window mid-playback.
-
Tools & estimators
The free quizzes and estimators — input sliders feeding a score dial.
Documented elsewhere
Page-specific shapes, cross-linked.
Some blocks are built for one page only, not shared. Copying them here would cause the very drift this page exists to stop. So instead, here is every shape we know of that is not rendered above, linking to the live page that ships it.
See SECTION-INDEX.md for the full catalogue.
Class Role Live page