Design your sections around your story
A page section can have its own markup and layout while declaring the words and structured information it needs. Wildo checks that contract without prescribing a stock landing-page design.
Example — A hero with its own voice
A product team creates a headline, an introduction and a call to action in its own composition. The section declares the translation keys it expects, so its words can be checked alongside the page.
For engineers
Every new website starts with this hero, in website/src/sections/landing.sections.tsx; HeroBody and landingKey are defined in the same file:
export const LANDING_HERO_SECTION = defineWebsiteSection({
sectionRef: 'landing-hero',
category: WebsiteSectionCategory.HERO,
expectedLabelKeys: [
landingKey('landing-hero', 'eyebrow'),
landingKey('landing-hero', 'headline'),
landingKey('landing-hero', 'subheadline'),
landingKey('landing-hero', 'cta.primary'),
],
Component: HeroBody,
});
defineWebsiteSection and WebsiteSectionCategory are public root exports of @wildo-ai/saas-website. The factory parses the declaration at module load and refuses, at compile time, a component that requires props: the page renders each section as <Component />, so the hero reads its words through useWebsiteLabel rather than receiving them. It does not supply the hero markup.
The page renders its sections in order, from the same list it registers:
return <WebsitePageSections pageRef="landing" sections={LANDING_SECTIONS} />;
WebsitePageSections mounts each section inside its own WebsiteSection, which supplies the context useWebsiteLabel reads. Keep the section in the page’s sections list and in the site’s section registry; the language packs must carry the declared absolute keys. The label validator checks coverage; it cannot judge whether the writing communicates the product well. The page component chooses order, spacing and narrative.