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

```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 CTA, one secondary deepening CTA, and a product-near visual.
3. Outcome framing explains why the product matters in buyer language rather than route or feature-admin language.
4. Capability section groups the product model instead of listing a flat feature wall.
5. Trust block appears before the final CTA and routes to `/trust`.
6. Progress block shows visible dated product movement and routes to `/changelog`.
7. Final CTA offers one clear next step, currently `/contact`.
8. Footer keeps Product, Trust, Changelog, Contact, Privacy, and Imprint reachable.

## 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.
- `/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.