Quickstart: Website Homepage Structure & Section Model

Goal

Verify that the homepage in apps/website follows the Spec 216 section contract and routes visitors clearly into Product, Trust, Changelog, and Contact.

Prerequisites

Node.js 20+
Corepack enabled
Repo dependencies installed with corepack pnpm install

Run the website locally

From the repository root:

corepack pnpm dev:website

Alternative, inside the website app:

cd apps/website
corepack pnpm dev

Default local URL: http://127.0.0.1:4321/

What to verify on the homepage

Check the homepage in this order:

Header and global navigation expose Product, Trust, Changelog, and Contact, with no prominent links to unsubstantial optional routes.
Hero shows one dominant primary CTA, one secondary deepening CTA, and a product-near visual.
Outcome framing explains why the product matters in buyer language rather than route or feature-admin language.
Capability section groups the product model instead of listing a flat feature wall.
Trust block appears before the final CTA and routes to /trust.
Progress block shows visible dated product movement and routes to /changelog.
Final CTA offers one clear next step, currently /contact.
Footer keeps Product, Trust, Changelog, Contact, Privacy, and Imprint reachable.

Build proof

From the repository root:

corepack pnpm build:website

Browser smoke proof

Run the website smoke suite:

cd apps/website
corepack pnpm exec playwright test

Expected proof points

Homepage required blocks are visible in the intended order.
The hero CTA hierarchy remains clear and non-competing.
/product, /trust, /changelog, and /contact are reachable from the homepage.
Optional unpublished routes are not surfaced prominently.
The homepage remains readable on desktop and mobile widths.

1.9 KiB Raw Blame History