Why does an internal site need this at all?

Because the site is how a colleague decides whether to open Growth-OS tomorrow. Composing it from the app’s own design system means the explanation and the workspace look like the same product, and writing a new page is a copy exercise rather than a frontend project.

Do the components ship invented numbers or quotes?

No. Sections such as the stats hero, the testimonial grid and the logo wall render whatever they are given. None of them carry sample customers, quotes or metrics of their own.

How do I build a new page?

Add a route under src/routes/_public and compose sections imported from the marketing barrel. docs/MARKETING-COMPONENTS.md has a full example page in one file.

Which hero or call to action belongs where?

docs/MARKETING-COMPONENTS.md has a when-to-use table per family, down to which hero suits a product page and which suits a secondary one.

What is under the hood?

All 45 components re-export from src/components/marketing/index.ts, grouped into 9 families. Every text and media field is a node prop, a shared wrapper applies one max width and padding, links resolve against the active locale, and useLocalizedMarketingPage keeps static page copy in the reader’s language.

The foundation under itUI and contentmarketing-ui

Page building blocks

This site is built from 45 sections that match the workspace.

The pages explaining Growth-OS to the team are composed from 45 shared sections: heroes, feature layouts, pricing grids, FAQs, calls to action. They use the same design system as the app, so the site and the workspace do not look like two different products. No words live inside a component; every sentence comes from the page file.

45 ready-made page sections
9 families, hero to section primitive
0 words hardcoded inside components

Open Growth-OS See it working

18 of 22 in The foundation under it

How it works

The mechanism end to end, as implemented in the repository.

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.

Interactive example

See it working

This walkthrough demonstrates the implemented backend contract without using an account, credentials, or provider calls.

Interactive example

Explore the decisions this makes

Choose a sample state

HeroFeaturesPricing

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.

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.

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.

Highlights

Why it matters

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.

Engineering guarantees

What this does and does not promise

Safety boundary

These are layout blocks, not claims. A section renders exactly the proof it is given, and none of them carry invented numbers, quotes or logos of their own.

Implementation evidence

The boundary above is code, not a claim. These files carry the contract:

src/components/marketing/index.ts
docs/MARKETING-COMPONENTS.md
src/components/marketing/pages/useLocalizedMarketingPage.ts

Questions

Frequently asked questions

Used alongside this

These capabilities share contracts and boundaries with this one.

The guides

A written guide for every part of the workspace.

The blog

Where we write down how we work, and what we decided not to do.

English and Dutch

The workspace reads in your language from the first paint.

What page building blocks rests on

The docs describe the same contracts this page demonstrates.

Read the docs See the whole directory