Landing page number four, built from scratch again
Every new page starts with raw markup. The hero gets copy-pasted from the last page, tweaked a little, and now you have four heroes that almost match. Here, every page composes the same sections.
Ship every weekUI and contentmarketing-ui
Marketing pages
Build your landing page from ready-made pieces that match your app.
Your landing, pricing, and content pages snap together from 45 ready-made sections. They share your app's design system, so the marketing site never looks like a different product. You write the words; the sections handle the layout.
- 45 ready-made page sections
- 9 kinds of sections, hero to building block
- 0 words hardcoded inside components
3 of 6 in Ship every week
How it works
The mechanism end to end, as implemented in the repository.
- 1
Pick the section for the story
A catalog maps each layout to its job: five heroes, four CTAs, five feature layouts, plus pricing, social proof, content cards, and wrappers.
- 2
Import everything from one place
All 45 sections come from a single import, so a page composes a hero, features, and an FAQ without digging through folders.
- 3
Pass your content as props
Sections take structured props: headline, plans, questions. Fields accept plain strings or full JSX, so the page file owns every word on screen.
- 4
Spacing and links stay consistent
A shared wrapper applies the same widths and padding everywhere, and smart links resolve to the reader's current language.
Interactive example
See it working
This walkthrough demonstrates the implemented backend contract without using an account, credentials, or provider calls.
Interactive example
Explore the implemented decisions
Five compositions
Deterministic sample data only. No account, provider, or network connection is used by the interaction.
The problem this solves
Without a shared foundation, every team rebuilds these edge cases — differently.
The site that doesn't look like the app
The marketing site got built on a separate stack. Fonts drift, spacing drifts, colors drift. The page promises one product and the sign-in reveals another. These sections share the app's design system, so that gap never opens.
One sentence change, one component edit
The headline lives inside a component, so marketing files a ticket to change a word. And translating the page means forking every component. Here, all the words live in the page file.
Highlights
Why it matters
45 sections, one import
Heroes, pricing grids, FAQs, CTAs and more, all imported from one place, with a guide that says which one to use where.
Your words stay yours
No text is baked into the components. Every headline and paragraph is passed in from your page, so changing copy never means editing a component.
Links follow the language
Internal links and page copy automatically follow the reader's language, so a Dutch visitor stays on Dutch pages.
Engineering guarantees
What this does and does not promise
Safety boundary
These are building blocks, not claims. Sections render exactly the proof you pass them and ship with zero invented customers, quotes, metrics, or pricing.
Implementation evidence
The boundary above is code, not a claim. These files carry the contract:
src/components/marketing/index.tsdocs/MARKETING-COMPONENTS.mdsrc/components/marketing/pages/useLocalizedMarketingPage.ts
Questions
Frequently asked questions
Related capabilities
These capabilities share contracts and boundaries with this one.
Build on the marketing pages foundation
The docs describe the same contracts this page demonstrates.