ahmido/TenantAtlas
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects 1 Releases Wiki Activity
website-dev
TenantAtlas/specs/400-tenantial-homepage-visual-rebuild/tasks.md
ahmido be314c577f Spec 400: rebuild Tenantial homepage visuals (#387) 
## Summary
- rebuild the public Tenantial homepage around an evidence-first Microsoft tenant governance narrative
- replace the old hero visual with a new static dashboard preview and add dedicated Trust Bar and Feature Pillars sections
- update the shared public shell, navigation, footer, dark design tokens, assets, and homepage content to match the new brand direction
- align website smoke coverage and Spec 400 artifacts with the rebuilt homepage

## Testing
- not run in this pass
- updated website smoke specs under apps/website/tests/smoke

## Note
- `website-dev` was pushed to `origin` so the requested PR base exists remotely
- the remote `website-dev` branch is an ancestor of `origin/dev`, so this PR may also show upstream `dev` history relative to that base

Co-authored-by: Ahmed Darrazi <ahmed.darrazi@live.de>
Reviewed-on: #387
2026-05-18 14:38:11 +00:00

21 KiB
Raw Permalink Blame History

Tasks: Tenantial Homepage Visual Rebuild

Input: Design documents from /Users/ahmeddarrazi/Documents/projects/wt-website/specs/400-tenantial-homepage-visual-rebuild/
Prerequisites: plan.md, spec.md, research.md, data-model.md, contracts/public-homepage.yaml, quickstart.md

Tests: Required. Spec 400 changes public website runtime behavior and requires browser smoke coverage. Test tasks use Playwright only; no Pest/Laravel/Filament tests are needed because no platform behavior changes.

Organization: Tasks are grouped by user story so each story can be implemented and verified as an independent increment after shared setup/foundation.

Phase 1: Setup (Shared Infrastructure)

Purpose: Confirm the existing website structure, route inventory, test files, and styling baseline before editing.

  • T001 Review Spec 400 planning inputs in /Users/ahmeddarrazi/Documents/projects/wt-website/specs/400-tenantial-homepage-visual-rebuild/spec.md, /Users/ahmeddarrazi/Documents/projects/wt-website/specs/400-tenantial-homepage-visual-rebuild/plan.md, /Users/ahmeddarrazi/Documents/projects/wt-website/specs/400-tenantial-homepage-visual-rebuild/data-model.md, and /Users/ahmeddarrazi/Documents/projects/wt-website/specs/400-tenantial-homepage-visual-rebuild/contracts/public-homepage.yaml
  • T002 Verify current homepage assembly and content sources in /Users/ahmeddarrazi/Documents/projects/wt-website/apps/website/src/pages/index.astro, /Users/ahmeddarrazi/Documents/projects/wt-website/apps/website/src/content/pages/home.ts, and /Users/ahmeddarrazi/Documents/projects/wt-website/apps/website/src/lib/site.ts
  • T003 [P] Verify current homepage smoke and IA assertions in /Users/ahmeddarrazi/Documents/projects/wt-website/apps/website/tests/smoke/home-product.spec.ts, /Users/ahmeddarrazi/Documents/projects/wt-website/apps/website/tests/smoke/smoke-helpers.ts, /Users/ahmeddarrazi/Documents/projects/wt-website/apps/website/tests/smoke/visual-foundation-guardrails.spec.ts, and /Users/ahmeddarrazi/Documents/projects/wt-website/apps/website/tests/smoke/changelog-core-ia.spec.ts
  • T004 [P] Verify Tailwind v4 CSS-first styling constraints in /Users/ahmeddarrazi/Documents/projects/wt-website/apps/website/src/styles/tokens.css, /Users/ahmeddarrazi/Documents/projects/wt-website/apps/website/src/styles/global.css, and /Users/ahmeddarrazi/Documents/projects/wt-website/apps/website/package.json

Phase 2: Foundational (Blocking Prerequisites)

Purpose: Establish shared Tenantial brand, dark shell, route intent, and smoke-test helpers used by all user stories.

Critical: No user story implementation should begin until this phase is complete.

  • T005 Update public site metadata, primary navigation seeds, footer group seeds, and route intent for Tenantial in /Users/ahmeddarrazi/Documents/projects/wt-website/apps/website/src/lib/site.ts
  • T006 Update homepage smoke helper constants and shared assertions for Tenantial labels, footer labels, forbidden old brands, metadata checks, and route targets in /Users/ahmeddarrazi/Documents/projects/wt-website/apps/website/tests/smoke/smoke-helpers.ts
  • T007 Update global Tenantial homepage SEO defaults and old-brand cleanup assumptions in /Users/ahmeddarrazi/Documents/projects/wt-website/apps/website/src/content/pages/home.ts
  • T008 [P] Replace the light TenantAtlas color foundation with website-local dark Tenantial design tokens using Tailwind v4 CSS-first @theme in /Users/ahmeddarrazi/Documents/projects/wt-website/apps/website/src/styles/tokens.css
  • T009 [P] Update body background, shell surfaces, focus-visible styling, reduced-motion behavior, and horizontal-overflow safeguards in /Users/ahmeddarrazi/Documents/projects/wt-website/apps/website/src/styles/global.css
  • T010 Update shared public shell styling and Tenantial brand presentation in /Users/ahmeddarrazi/Documents/projects/wt-website/apps/website/src/components/layout/PageShell.astro, /Users/ahmeddarrazi/Documents/projects/wt-website/apps/website/src/components/layout/Navbar.astro, and /Users/ahmeddarrazi/Documents/projects/wt-website/apps/website/src/components/layout/Footer.astro

Checkpoint: Shared Tenantial brand shell, route intent, dark tokens, and test helpers are ready.

Phase 3: User Story 1 - Understand Tenantial Immediately (Priority: P1) - MVP

Goal: A first-time visitor opens / and immediately understands Tenantial as an evidence-first governance platform for Microsoft tenants with clear primary and secondary CTAs.

Independent Test: Open / and verify Tenantial branding, the headline "Evidence-first governance for Microsoft tenants.", Microsoft tenant context, Book a demo, Explore the platform, and exactly one primary page heading.

Tests for User Story 1

  • T011 [US1] Update homepage hero smoke assertions for Tenantial brand, headline, supporting copy, CTA hierarchy, one H1, and /contact plus /product route targets in /Users/ahmeddarrazi/Documents/projects/wt-website/apps/website/tests/smoke/home-product.spec.ts

Implementation for User Story 1

  • T012 [US1] Replace homepage hero copy, trust bullets, CTA labels, CTA destinations, and SEO metadata with Tenantial first-read content in /Users/ahmeddarrazi/Documents/projects/wt-website/apps/website/src/content/pages/home.ts
  • T013 [US1] Adapt the homepage hero layout, heading scale, eyebrow treatment, CTA pair, and first-viewport composition in /Users/ahmeddarrazi/Documents/projects/wt-website/apps/website/src/components/sections/PageHero.astro
  • T014 [US1] Update homepage section ordering so the hero and first-read CTA story appear before supporting sections in /Users/ahmeddarrazi/Documents/projects/wt-website/apps/website/src/pages/index.astro
  • T015 [US1] Implement desktop and mobile header behavior for Platform -> /product, Solutions -> /solutions, Book a demo -> /contact, and explicit non-dead handling for Resources, Pricing, Company, and Sign in in /Users/ahmeddarrazi/Documents/projects/wt-website/apps/website/src/components/layout/Navbar.astro
  • T016 [US1] Run the User Story 1 smoke subset from /Users/ahmeddarrazi/Documents/projects/wt-website/apps/website/tests/smoke/home-product.spec.ts and confirm it fails before implementation and passes after implementation

Checkpoint: User Story 1 is independently testable as the homepage MVP.

Phase 4: User Story 2 - Evaluate Trust Without False Proof (Priority: P2)

Goal: An IT, MSP, security, or compliance stakeholder sees credible trust positioning, neutral claims, and the required capability pillars without fake proof.

Independent Test: Review / and confirm neutral trust statements, no unverified customer/certification/uptime claims, and visible Backup, Restore, Drift Detection, Evidence, Audit Trail, and Governance Reviews pillars.

Tests for User Story 2

  • T017 [US2] Add homepage smoke assertions for TrustBar statements, required FeaturePillars, and absence of SOC 2, ISO, uptime, trusted-by, and real-customer-logo claims in /Users/ahmeddarrazi/Documents/projects/wt-website/apps/website/tests/smoke/home-product.spec.ts

Implementation for User Story 2

  • T018 [P] [US2] Create the static trust bar section with neutral credibility statements in /Users/ahmeddarrazi/Documents/projects/wt-website/apps/website/src/components/sections/TrustBar.astro
  • T019 [P] [US2] Create the six required feature pillar cards with accessible icon treatment in /Users/ahmeddarrazi/Documents/projects/wt-website/apps/website/src/components/sections/FeaturePillars.astro
  • T020 [US2] Add TrustBar and FeaturePillars content data for Backup, Restore, Drift Detection, Evidence, Audit Trail, and Governance Reviews in /Users/ahmeddarrazi/Documents/projects/wt-website/apps/website/src/content/pages/home.ts
  • T021 [US2] Wire TrustBar and FeaturePillars into the homepage after the hero section using a stable placeholder position that does not depend on the final DashboardPreview implementation in /Users/ahmeddarrazi/Documents/projects/wt-website/apps/website/src/pages/index.astro
  • T022 [US2] Remove or replace old trust, logo-strip, and capability copy that conflicts with Tenantial's no-fake-proof boundary in /Users/ahmeddarrazi/Documents/projects/wt-website/apps/website/src/pages/index.astro
  • T023 [US2] Run the User Story 2 smoke subset from /Users/ahmeddarrazi/Documents/projects/wt-website/apps/website/tests/smoke/home-product.spec.ts and confirm trust/capability assertions pass

Checkpoint: User Story 2 is independently testable after shared shell and homepage assembly are available.

Phase 5: User Story 3 - Inspect A Product-Near Preview (Priority: P3)

Goal: A visitor sees a static product-near dashboard preview with posture, findings, drift, evidence, backup status, reviews, and recent activity that remains responsive and clearly non-live.

Independent Test: Open /, inspect the preview, and verify static demo values 92%, 14, 7, 1,248, 98%, supporting panels, text-based status meaning, no live/realtime claim, and no body-level horizontal overflow on mobile.

Tests for User Story 3

  • T024 [US3] Add homepage smoke assertions for static dashboard metrics, supporting panels, non-live wording, and status text labels in /Users/ahmeddarrazi/Documents/projects/wt-website/apps/website/tests/smoke/home-product.spec.ts
  • T025 [P] [US3] Add a reusable mobile body-overflow assertion for homepage smoke tests in /Users/ahmeddarrazi/Documents/projects/wt-website/apps/website/tests/smoke/smoke-helpers.ts

Implementation for User Story 3

  • T026 [US3] Create the static HTML/CSS dashboard preview with metrics, recent findings, drift timeline, backups and restores, reviews, and evidence spotlight in /Users/ahmeddarrazi/Documents/projects/wt-website/apps/website/src/components/content/DashboardPreview.astro
  • T027 [US3] Replace the old hero visual usage with DashboardPreview in /Users/ahmeddarrazi/Documents/projects/wt-website/apps/website/src/components/sections/PageHero.astro
  • T028 [US3] Add dashboard-specific responsive layout, status label, and overflow containment styling in /Users/ahmeddarrazi/Documents/projects/wt-website/apps/website/src/styles/global.css
  • T029 [US3] Remove stale hero screenshot references from homepage content so the static dashboard preview is the only homepage product visual in /Users/ahmeddarrazi/Documents/projects/wt-website/apps/website/src/content/pages/home.ts
  • T030 [US3] Run the User Story 3 smoke subset from /Users/ahmeddarrazi/Documents/projects/wt-website/apps/website/tests/smoke/home-product.spec.ts with desktop and 390px mobile viewport coverage

Checkpoint: User Story 3 is independently testable as a static, responsive, non-live product preview.

Phase 6: User Story 4 - Verify Public Launch Readiness (Priority: P4)

Goal: A website owner can verify that old template residue, wrong brand names, unsupported promises, broken CTAs, and mobile layout issues are absent before launch.

Independent Test: Run the homepage smoke suite and manually review desktop/mobile / for forbidden copy, metadata cleanup, intentional links, footer completeness, no clipping, and no body overflow.

Tests for User Story 4

  • T031 [US4] Add forbidden visible-copy and metadata assertions for AstroDeck, Open Source, MIT Licensed, TenantCTRL, TenantPilot, and TenantAtlas in /Users/ahmeddarrazi/Documents/projects/wt-website/apps/website/tests/smoke/home-product.spec.ts
  • T032 [P] [US4] Update core IA route and hidden-label assertions for Tenantial header/footer expectations in /Users/ahmeddarrazi/Documents/projects/wt-website/apps/website/tests/smoke/changelog-core-ia.spec.ts
  • T033 [P] [US4] Update visual foundation guardrail smoke expectations for Tenantial brand, CTA text, and dark surface semantics in /Users/ahmeddarrazi/Documents/projects/wt-website/apps/website/tests/smoke/visual-foundation-guardrails.spec.ts

Implementation for User Story 4

  • T034 [US4] Update final CTA copy and homepage CTA section wiring to "Build tenant governance on evidence, not assumptions." with Book a demo and Explore the platform in /Users/ahmeddarrazi/Documents/projects/wt-website/apps/website/src/components/sections/CTASection.astro and /Users/ahmeddarrazi/Documents/projects/wt-website/apps/website/src/content/pages/home.ts
  • T035 [US4] Update footer copy, footer group labels, copyright text, and old-template cleanup in /Users/ahmeddarrazi/Documents/projects/wt-website/apps/website/src/components/layout/Footer.astro
  • T036 [P] [US4] Update the public Tenantial favicon or simple local mark in /Users/ahmeddarrazi/Documents/projects/wt-website/apps/website/public/favicon.svg
  • T037 [US4] Remove the unused old product-visual asset in /Users/ahmeddarrazi/Documents/projects/wt-website/apps/website/public/images/hero-product-visual.svg and replace old visual references in /Users/ahmeddarrazi/Documents/projects/wt-website/apps/website/src/content/pages/home.ts
  • T038 [US4] Run a forbidden-copy scrub across /Users/ahmeddarrazi/Documents/projects/wt-website/apps/website/src and update homepage-visible and globally reachable public brand residue found in the affected source files

Checkpoint: User Story 4 is independently testable as launch-readiness cleanup and smoke validation.

Phase 7: Polish & Cross-Cutting Concerns

Purpose: Validate the complete feature, record test governance, and ensure no scope drift into platform/admin behavior.

  • T039 Run corepack pnpm build:website from /Users/ahmeddarrazi/Documents/projects/wt-website/package.json and fix any build failures in /Users/ahmeddarrazi/Documents/projects/wt-website/apps/website
  • T040 Run WEBSITE_PORT=4321 corepack pnpm --filter @tenantatlas/website test:smoke from /Users/ahmeddarrazi/Documents/projects/wt-website/apps/website/package.json and fix any smoke failures in /Users/ahmeddarrazi/Documents/projects/wt-website/apps/website/tests/smoke
  • T041 Use browser review for mobile, tablet, desktop, and wide desktop / viewports, including keyboard focus order for header navigation, mobile menu, and CTAs, against /Users/ahmeddarrazi/Documents/projects/wt-website/specs/400-tenantial-homepage-visual-rebuild/quickstart.md
  • T042 [P] Verify no Laravel, Filament, Livewire, Microsoft Graph, database, auth, OperationRun, or platform coupling was introduced under /Users/ahmeddarrazi/Documents/projects/wt-website/apps/website
  • T043 [P] Verify Tailwind v4 compliance by checking no deprecated v3 utilities or tailwind.config.js assumptions were introduced under /Users/ahmeddarrazi/Documents/projects/wt-website/apps/website/src/styles and /Users/ahmeddarrazi/Documents/projects/wt-website/apps/website/src/components
  • T044 Record final Smoke Coverage close-out notes and any residual browser-review caveats in /Users/ahmeddarrazi/Documents/projects/wt-website/specs/400-tenantial-homepage-visual-rebuild/tasks.md

Smoke Coverage Close-Out

  • Build: corepack pnpm build:website passed on 2026-05-18. Astro emitted non-failing content-loader warnings for missing src/content/articles/ and src/content/resources/ directories.
  • Browser smoke: WEBSITE_PORT=4321 corepack pnpm --filter @tenantatlas/website test:smoke passed with 19/19 tests on 2026-05-18.
  • Diff hygiene: git diff --check passed on 2026-05-18.
  • Responsive/browser coverage: homepage smoke includes 390px mobile overflow checks, CTA hierarchy, metadata residue checks, static dashboard preview checks, header/mobile navigation, TrustBar, FeaturePillars, and footer reachability.
  • Screenshots: no screenshot artifacts are committed for this branch. Earlier local-only screenshot paths were removed from this close-out so review remains repo-reproducible; use the quickstart manual review steps when fresh screenshots are needed.
  • Scope/coupling: no Laravel, Filament, Livewire, database, auth, OperationRun, queue, or platform runtime behavior was introduced. Remaining Microsoft Graph and database search hits are pre-existing supporting-page/integration content, not new homepage coupling.
  • Tailwind: no deprecated v3 utility patterns or tailwind.config.js assumptions were introduced in the checked website styles/components.
  • Brand cleanup: existing public pages reachable from header/footer use Tenantial public brand copy while internal workspace names such as @tenantatlas/website remain unchanged.
  • Spec 227: no specs/227-* artifact exists in the current checkout; no phantom spec was created.

Dependencies & Execution Order

Phase Dependencies

  • Phase 1 Setup: No dependencies.
  • Phase 2 Foundational: Depends on Phase 1 and blocks all user stories.
  • Phase 3 US1: Depends on Phase 2 and is the MVP.
  • Phase 4 US2: Depends on Phase 2; component creation and homepage wiring can proceed independently of US3 by using a stable post-hero section position.
  • Phase 5 US3: Depends on Phase 2; dashboard component creation can begin after foundation, but final hero integration should account for US1 edits to PageHero.astro.
  • Phase 6 US4: Depends on US1, US2, and US3 because it verifies final launch readiness across copy, metadata, navigation, footer, and visual behavior.
  • Phase 7 Polish: Depends on all desired user stories being complete.

User Story Dependencies

  • US1 (P1): Independent MVP after foundation.
  • US2 (P2): Independently testable after foundation; integrates with homepage assembly.
  • US3 (P3): Independently testable after foundation; integrates with hero/dashboard visual.
  • US4 (P4): Final readiness story; depends on the implemented homepage surface from US1-US3.

Within Each User Story

  • Write or update Playwright assertions first and confirm they fail before implementing the story.
  • Update content/data before page wiring when both are needed.
  • Create new components before importing them into index.astro or PageHero.astro.
  • Run the story-specific smoke subset before proceeding to the next story.

Parallel Execution Examples

User Story 1

Sequential because US1 edits shared homepage and hero files:
T011 -> T012 -> T013 -> T014 -> T015 -> T016

User Story 2

Parallel component work after T017:
Task T018: Create TrustBar.astro
Task T019: Create FeaturePillars.astro

Then:
T020 -> T021 -> T022 -> T023

User Story 3

Parallel test helper and component work:
Task T025: Add mobile overflow helper
Task T026: Create DashboardPreview.astro

Then:
T027 -> T028 -> T029 -> T030

User Story 4

Parallel readiness assertions after US1-US3:
Task T032: Update changelog-core-ia.spec.ts
Task T033: Update visual-foundation-guardrails.spec.ts
Task T036: Update favicon.svg

Then:
T031 -> T034 -> T035 -> T037 -> T038

Implementation Strategy

MVP First (User Story 1 Only)

  1. Complete Phase 1 Setup.
  2. Complete Phase 2 Foundational tasks.
  3. Complete Phase 3 User Story 1.
  4. Stop and validate / as a Tenantial first-read homepage MVP.
  5. Continue only after the hero, brand, headline, CTA hierarchy, and basic navigation behavior pass.

Incremental Delivery

  1. US1: Tenantial first-read homepage and CTA hierarchy.
  2. US2: Trust bar and feature pillars without false proof.
  3. US3: Static product-near dashboard preview.
  4. US4: Launch-readiness cleanup, metadata, footer, forbidden-copy checks, and mobile review.

Parallel Team Strategy

  1. Complete Setup and Foundation together.
  2. Split US2 TrustBar and FeaturePillars work while US3 DashboardPreview work proceeds in a separate file.
  3. Serialize edits to shared files: index.astro, home.ts, PageHero.astro, global.css, and smoke specs.
  4. Reserve US4 for final cleanup after all homepage sections exist.

Notes

  • [P] tasks are safe to start in parallel because they touch different files or do not depend on incomplete same-file edits.
  • Story labels map to the four user stories in spec.md.
  • Do not introduce platform, auth, database, Microsoft Graph, Laravel, Filament, Livewire, queue, or OperationRun behavior.
  • Do not rename root packages or existing workspace scripts from @tenantatlas/website or the current pnpm script names.