Quickstart: Website Homepage Structure & Section Model

Goal

Verify that the homepage in apps/website follows the Spec 217 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 anchor, one dominant primary CTA, one secondary deepening CTA, and a product-near visual.
Hero typography, spacing, and surface contrast feel deliberate rather than generic or washed out.
Hero visual reads as governance-, review-, restore-, drift-, or evidence-oriented product truth rather than generic dashboard wallpaper.
Supporting copy and secondary CTA clearly serve the primary anchor instead of competing with it.
Accent use supports hierarchy and product truth rather than behaving like decorative garnish.
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.

Addendum review note

The hero-direction checks above remain the manual review rubric for overall quality, but they are no longer manual-only. Phase 7 now adds automated smoke proof for the explicit primary anchor, supporting-copy subordination, CTA-anchor reinforcement, governance-specific visual semantics, and desktop/mobile hierarchy.

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.
The hero exposes one explicit primary anchor and keeps supporting copy visually subordinate to it.
The hero has one obvious focal point and does not flatten into neutral mush.
The hero visual conveys TenantAtlas-specific governance truth rather than generic admin or analytics UI.
The hero desktop layout keeps copy and product surface in one split composition instead of stacking them into unrelated blocks.
Supporting copy and the secondary CTA reinforce the focal point instead of competing with it.
Hero hierarchy remains legible on both desktop and mobile widths.
/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.

3.2 KiB Raw Blame History