ahmido
f884b16061
Some checks failed
Main Confidence / confidence (push) Failing after 40s
## Summary - implement the website-only visual foundation for apps/website - formalize semantic tokens, typography, spacing, surfaces, and shared CTA/navigation primitives - align landing, trust/legal, and content-heavy routes plus Playwright smoke coverage with the new foundation ## Validation - corepack pnpm build:website - corepack pnpm --filter @tenantatlas/website exec playwright test ## Scope - website-only change set for spec 214 - no apps/platform runtime coupling introduced Co-authored-by: Ahmed Darrazi <ahmed.darrazi@live.de> Reviewed-on: #251
76 lines
2.6 KiB
Markdown
76 lines
2.6 KiB
Markdown
# Quickstart: Website Visual Foundation
|
|
|
|
## Purpose
|
|
|
|
This quickstart describes the local workflow for implementing the website-only visual foundation in `apps/website`.
|
|
|
|
## Prerequisites
|
|
|
|
- Node 20+ available through the repo workspace tooling
|
|
- Corepack-enabled pnpm
|
|
- Repo root at `wt-website`
|
|
|
|
## Local Development
|
|
|
|
Start the website from the repo root:
|
|
|
|
```bash
|
|
corepack pnpm dev:website
|
|
```
|
|
|
|
The website must continue to honor the existing `WEBSITE_PORT` contract.
|
|
|
|
## Expected Implementation Order
|
|
|
|
Implement the feature in this order:
|
|
|
|
1. Audit the current token and foundation layer in `apps/website/src/styles/tokens.css` and `apps/website/src/styles/global.css`.
|
|
2. Formalize semantic token roles for color, typography, spacing, surfaces, radius, borders, and shadows.
|
|
3. Update the current Astro primitives so shared rules are enforced through component APIs rather than page-local class decisions.
|
|
4. Apply the foundation across representative page families: landing/product, trust/legal, and content-heavy routes.
|
|
5. Encode `shadcn/ui` usage constraints through local primitives and implementation review rules, without introducing a new required React runtime.
|
|
6. Re-run build and smoke validation.
|
|
|
|
## Working Constraints
|
|
|
|
The implementation must preserve all existing website working-contract guarantees:
|
|
|
|
- keep `@tenantatlas/website` unchanged
|
|
- keep `WEBSITE_PORT` unchanged
|
|
- keep root `dev:website` and `build:website` workflows working
|
|
- keep all changes local to `apps/website` unless a deliberate new contract is explicitly introduced
|
|
- do not introduce platform runtime coupling, shared auth, or shared DTO/API assumptions
|
|
|
|
## Required Validation
|
|
|
|
Run the website build proof from the repo root:
|
|
|
|
```bash
|
|
corepack pnpm build:website
|
|
```
|
|
|
|
Run the browser smoke suite from the website app:
|
|
|
|
```bash
|
|
cd apps/website
|
|
corepack pnpm exec playwright test
|
|
```
|
|
|
|
## What Reviewers Should Verify
|
|
|
|
Reviewers should confirm that:
|
|
|
|
- representative landing, trust/legal, and content-heavy routes still load correctly
|
|
- heading hierarchy, section rhythm, and CTA weight are visibly consistent across those page families
|
|
- navigation and footer links remain reachable
|
|
- focus states and mobile readability remain intact
|
|
- no uncontrolled local override bypasses the shared token and primitive model
|
|
- no React, Radix, or platform coupling is introduced without a separate explicit decision
|
|
|
|
## Out of Scope for This Feature
|
|
|
|
- Filament theming or `apps/platform` styling
|
|
- shared website-platform design system work
|
|
- API-backed contact handling or a website backend
|
|
- CMS introduction
|
|
- visual regression infrastructure beyond the current lightweight smoke path |