# Quickstart: Website Homepage Hero

## Goal

Verify that the homepage hero in `apps/website` follows the Spec 218 contract: clear category context, precise copy, one CTA pair, product-near visual truth, bounded trust cues, and stable mobile meaning order.

## 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 in the homepage hero

Check the hero in this order:

1. A clear category context or positioning cue appears above or adjacent to the main headline.
2. The main headline explains the product category, problem space, or intended outcome without generic startup language.
3. Supporting copy makes the headline easier to understand instead of repeating it.
4. Exactly one dominant primary CTA is visible, plus one lower-emphasis secondary CTA.
5. The hero includes a product-near visual that looks derived from real product structure rather than a generic dashboard placeholder.
6. Any trust subclaims remain concise, factual, and secondary to the product explanation.
7. The hero still routes cleanly into maintained downstream pages such as `/product`, `/trust`, `/changelog`, and `/contact`.

## Mobile verification

On a narrow viewport, verify:

1. Headline and supporting copy remain first in the reading flow.
2. CTA pair remains clearly visible without being pushed below decorative content.
3. Product-near visual still appears when it is a key credibility signal.
4. Optional trust cues stay visible only if they do not bury the main message.

## Build proof

From the repository root:

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

## Focused browser smoke proof

Run the homepage-focused smoke file:

```bash
cd apps/website
corepack pnpm exec playwright test tests/smoke/home-product.spec.ts
```

## Optional broader browser proof

If shared smoke helpers or route behavior changed more broadly, run the full website smoke suite:

```bash
cd apps/website
corepack pnpm exec playwright test
```

## Expected proof points

- Hero required elements are all visible.
- One dominant primary CTA and one secondary CTA remain clearly differentiated.
- Product-near visual remains visible and believable.
- Trust subclaims stay bounded and concise.
- Homepage still routes cleanly into deeper informational and action surfaces.
- Mobile layout preserves the intended meaning order without hiding CTA or product reality.

## Feature Close-out

- Validated on 2026-04-19 with `corepack pnpm build:website` from the repository root.
- Validated on 2026-04-19 with `cd apps/website && corepack pnpm exec playwright test tests/smoke/home-product.spec.ts`.
- Homepage smoke coverage now checks the hero semantic structure, CTA pair, product-near visual alt text, bounded trust cues, and narrow-screen meaning order.
- Mobile proof keeps the CTA pair above the fold and verifies the product visual remains present within the hero in the correct sequence.