Use case · Marketing
A landing page that earns the click.
Marketing surfaces that match the production code: same primitives, same tokens, no drift between Figma and prod. The four structural blocks a B2B landing page needs are wired into the template before your first commit.
What's in the box
The four structural blocks every landing page needs.
The same blocks the marketing site you are reading ships with. Add or remove as your story needs.
Hero & promise
The first 50px above the fold. Earn the click in five seconds or lose the visitor for the day.
Headline + sub-line
The hero carries one declarative promise, one sentence of context, and one primary CTA. Eyebrow + lead + dual CTA is the recipe. No carousel, no stock imagery, no slider.
Specificity beats superlatives
Concrete promises outperform adjectives. 'Ship a B2B SaaS with auth, billing, and a working dashboard on day one' outperforms 'the best platform for your business needs'.
Two doors, one hero
Self-serve + engagement, side by side. Different buyers, same page. Both visible above the fold; the page never forces a single funnel.
hero-and-promise
preview unavailable
Surface grid
Show what the registry covers, not what the product is. Surfaces over templates: SaaS, AI, mobile, desktop, CLIs, APIs, blogs, e-commerce.
Surface tiles, not product tour
The grid lists categories of work the visitor can ship with the registry. Eight tiles in two rows reads as a portfolio, not a feature dump.
Tabbed deep-dive
Selecting a tile reveals what the registry ships for that surface — a few paragraphs of selling copy, a working mockup, an install hint. The same tabbed pattern on the homepage.
Self-referential surfaces
Each surface tile points at a use-case page that documents the surface in detail. The landing page IS the registry's overview — clicking a tile never leaves the marketing site.
surface-grid
preview unavailable
Authority
Earn trust without testimonials. Manifesto + KB docs + public changelog. Evidence that the team ships, on the same domain.
Manifesto link
The page points at a manifesto that explains why the work exists. Buyers read the manifesto before they read the pricing; the manifesto carries the conviction the rest of the page inherits.
Knowledge base link
A live docs surface, not a screenshot of one. The KB articles the visitor can search are the same articles they will live with after they buy.
Public changelog
A versioned changelog is the receipt that the team ships. The presence of one is more convincing than any testimonial.
authority
preview unavailable
Process & CTA
From interest to commitment. Numbered steps the visitor can mentally complete in one read, then a final CTA that asks for the close.
Numbered steps, not marketing prose
Three to five steps the visitor can rephrase back to a colleague. The numbered cadence reads as 'this is how shipping works' rather than 'this is what we want you to believe'.
Stack block
The names of the technologies the page ships with — Next.js, Better Auth, Drizzle, Stripe, Resend. Senior visitors scan the stack before they read the copy.
Two-door CTA
Self-serve side by side with engagement. No single funnel forced on every visitor; no contact form the visitor must fill to see pricing.
process-and-cta
preview unavailable
Stack
What runs on day one.
Astro
Tailwind
shadcn blocks
Process
How a landing page ships.
- Step 01
Scaffold the page
The landing template ships with the same hero, surface grid, process, and FAQ recipe that ships on the marketing site you're reading.
- Step 02
Drop in your content
Replace the placeholder copy with your product, your surfaces, your social proof. The conversion-tested structure stays.
- Step 03
Ship and measure
Lighthouse score ships green by default. Static output, no hydration cost on the parts you don't need.
Built on this
Four templates, each on its own surface.
Production-ready starter templates, each deployed at its own URL. Used as the reference set for what the registry can ship.
Explore
Related use cases.
Two doors
Use it yourself, or have us ship it for you.
Self-serve gives you the registry and the templates. Engagement gives you the team that built it. Pick the door that fits the timeline.