TenantAtlas/specs/218-homepage-hero/quickstart.md
ahmido cebd5ee1b0
Some checks failed
Main Confidence / confidence (push) Failing after 50s
Agent: commit workspace changes (217-homepage-hero-session-1776809852) (#259)
Automated commit by agent: commits workspace changes for feature 217-homepage-hero. Please review and merge into `dev`.

Co-authored-by: Ahmed Darrazi <ahmed.darrazi@live.de>
Reviewed-on: #259
2026-04-21 22:24:29 +00:00

3.1 KiB

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:

corepack pnpm dev:website

Alternative, inside the website app:

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:

corepack pnpm build:website

Focused browser smoke proof

Run the homepage-focused smoke file:

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:

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.