Every page starting from raw markup
A new page begins by copying the last one, tweaking a little, and now there are four nearly matching heroes that drift apart. Composing the same sections keeps them one thing.
Het fundament eronderUI and contentmarketing-ui
Bouwblokken voor pagina’s
Deze site is gebouwd uit 45 secties die bij de werkruimte passen.
De pagina’s die Growth-OS aan het team uitleggen, zijn samengesteld uit 45 gedeelde secties: hero’s, functie-indelingen, prijsrasters, vragenlijsten, oproepen tot actie. Ze gebruiken hetzelfde ontwerpsysteem als de app, zodat de site en de werkruimte niet op twee verschillende producten lijken. Er staan geen woorden in een component; elke zin komt uit het paginabestand.
- 45 ready-made page sections
- 9 families, hero to section primitive
- 0 words hardcoded inside components
18 van 22 in Het fundament eronder
Hoe het werkt
Het mechanisme van begin tot eind, zoals het in de repository is geïmplementeerd.
- 1
Pick the section for the point
A catalog maps each layout to its job: five heroes, four calls to action, five feature layouts, plus pricing, proof, content cards and wrappers.
- 2
Import from one place
All 45 sections come from a single barrel, so a page composes a hero, a feature section and an FAQ without hunting through folders.
- 3
Pass the content as props
Sections take structured props, and every text field accepts a plain string 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 links resolve against the reader’s active language.
Interactief voorbeeld
Bekijk het in werking
Deze rondleiding toont het geïmplementeerde backendcontract zonder account, credentials of providercalls.
Interactief voorbeeld
Explore the decisions this makes
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.
A site that does not look like the app
Built on a separate stack, the fonts, spacing and colors drift until the page promises one product and signing in reveals another. Sharing the design system closes that gap by construction.
A one-word change that needs a code review of a component
When a headline lives inside a component, editing a sentence means editing layout, and translating a page means forking it. Here all the words sit in the page file.
Kernpunten
Waarom dit belangrijk is
45 sections, one import
Heroes, feature layouts, FAQs, calls to action and more, imported from one place, with a catalog that says which one belongs where.
The words stay in the page
No copy is baked into a component. Every heading and paragraph is passed in, so changing a sentence never means editing a layout.
Links follow the language
Internal links resolve against the reader’s current language, so someone reading in Dutch stays on Dutch pages.
Technische garanties
Wat dit wel en niet belooft
Veiligheidsgrens
Dit zijn opmaakblokken, geen beweringen. Een sectie toont precies het bewijs dat ze krijgt, en geen enkele draagt eigen verzonnen getallen, citaten of logo’s.
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
Hiernaast gebruikt
Deze functies delen contracten en grenzen met deze pagina.
Waar Bouwblokken voor pagina’s op rust
De documentatie beschrijft dezelfde contracten die deze pagina demonstreert.