66 lines
1.9 KiB
Markdown
66 lines
1.9 KiB
Markdown
# 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. |