# 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:

```bash
corepack pnpm dev:website
```

Alternative, inside the website app:

```bash
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:

1. Header and global navigation expose Product, Trust, Changelog, and Contact, with no prominent links to unsubstantial optional routes.
2. Hero shows one dominant primary anchor, one dominant primary CTA, one secondary deepening CTA, and a product-near visual.
3. Hero typography, spacing, and surface contrast feel deliberate rather than generic or washed out.
4. Hero visual reads as governance-, review-, restore-, drift-, or evidence-oriented product truth rather than generic dashboard wallpaper.
5. Supporting copy and secondary CTA clearly serve the primary anchor instead of competing with it.
6. Accent use supports hierarchy and product truth rather than behaving like decorative garnish.
7. Outcome framing explains why the product matters in buyer language rather than route or feature-admin language.
8. Capability section groups the product model instead of listing a flat feature wall.
9. Trust block appears before the final CTA and routes to `/trust`.
10. Progress block shows visible dated product movement and routes to `/changelog`.
11. Final CTA offers one clear next step, currently `/contact`.
12. 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:

```bash
corepack pnpm build:website
```

## Browser smoke proof

Run the website smoke suite:

```bash
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.