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.
Lever elke weekUI and contentmarketing-ui
Marketingpagina’s klaar
Bouw landingspagina’s uit kant-en-klare blokken in de stijl van je app.
Bouw landingspagina’s uit kant-en-klare blokken in de stijl van je app.
- 45 ready-made page sections
- 9 kinds of sections, hero to building block
- 0 words hardcoded inside components
3 van 6 in Lever elke week
Hoe het werkt
Het mechanisme van begin tot eind, zoals het in de repository is geïmplementeerd.
- 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.
Interactief voorbeeld
Bekijk het in werking
Deze rondleiding toont het geïmplementeerde backendcontract zonder account, credentials of providercalls.
Interactief voorbeeld
Explore the implemented decisions
Five compositions
Alleen deterministische voorbeelddata. De interactie gebruikt geen account-, provider- of netwerkverbinding.
Het probleem dat dit oplost
Zonder een gedeelde basis bouwt elk team deze randgevallen opnieuw — en anders.
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.
Kernpunten
Waarom dit belangrijk is
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.
Technische garanties
Wat dit wel en niet belooft
Veiligheidsgrens
Achter de schermen houden autorisatie, tenantgrenzen en foutafhandeling één duidelijke eigenaar. Zo blijft de snelle ervaring voor gebruikers gekoppeld aan veilig herstel als het misgaat.
Implementatiebewijs
De grens hierboven is geen claim maar code. Deze bestanden dragen het contract:
src/components/marketing/index.tsdocs/MARKETING-COMPONENTS.mdsrc/components/marketing/pages/useLocalizedMarketingPage.ts
Vragen
Veelgestelde vragen
Verwante functies
Deze functies delen contracten en grenzen met deze pagina.
Bouw verder op Marketingpagina’s klaar
De documentatie beschrijft dezelfde contracten die deze pagina demonstreert.