91 lines
3.1 KiB
Markdown
91 lines
3.1 KiB
Markdown
# 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. |