ahmido
cebd5ee1b0
Some checks failed
Main Confidence / confidence (push) Failing after 50s
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
80 lines
3.2 KiB
Markdown
80 lines
3.2 KiB
Markdown
# Quickstart: Website Homepage Structure & Section Model
|
|
|
|
## Goal
|
|
|
|
Verify that the homepage in `apps/website` follows the Spec 217 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 anchor, one dominant primary CTA, one secondary deepening CTA, and a product-near visual.
|
|
3. Hero typography, spacing, and surface contrast feel deliberate rather than generic or washed out.
|
|
4. Hero visual reads as governance-, review-, restore-, drift-, or evidence-oriented product truth rather than generic dashboard wallpaper.
|
|
5. Supporting copy and secondary CTA clearly serve the primary anchor instead of competing with it.
|
|
6. Accent use supports hierarchy and product truth rather than behaving like decorative garnish.
|
|
7. Outcome framing explains why the product matters in buyer language rather than route or feature-admin language.
|
|
8. Capability section groups the product model instead of listing a flat feature wall.
|
|
9. Trust block appears before the final CTA and routes to `/trust`.
|
|
10. Progress block shows visible dated product movement and routes to `/changelog`.
|
|
11. Final CTA offers one clear next step, currently `/contact`.
|
|
12. Footer keeps Product, Trust, Changelog, Contact, Privacy, and Imprint reachable.
|
|
|
|
## Addendum review note
|
|
|
|
The hero-direction checks above remain the manual review rubric for overall quality, but they are no longer manual-only. Phase 7 now adds automated smoke proof for the explicit primary anchor, supporting-copy subordination, CTA-anchor reinforcement, governance-specific visual semantics, and desktop/mobile hierarchy.
|
|
|
|
## 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.
|
|
- The hero exposes one explicit primary anchor and keeps supporting copy visually subordinate to it.
|
|
- The hero has one obvious focal point and does not flatten into neutral mush.
|
|
- The hero visual conveys TenantAtlas-specific governance truth rather than generic admin or analytics UI.
|
|
- The hero desktop layout keeps copy and product surface in one split composition instead of stacking them into unrelated blocks.
|
|
- Supporting copy and the secondary CTA reinforce the focal point instead of competing with it.
|
|
- Hero hierarchy remains legible on both desktop and mobile widths.
|
|
- `/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. |