biohazard-vfx/docs/stories/1.6.studio-pages.md

Status

Ready for Review

Story

As a partner, I want About, Team, and Values pages, so that I can understand ethos and people.

Acceptance Criteria

1. /studio/{about,team,values} with content placeholders.
2. Quote/testimonial and logo wall optional components.
3. Global tokens applied.

Tasks / Subtasks

• Create Studio Route Group (AC: 1)
  • Add directory src/app/studio and subroutes: about/page.tsx, team/page.tsx, values/page.tsx
  • Use shared layout from root; ensure pages inherit global tokens and typography
• About Page (AC: 1, 3)
  • Compose mission and ethos sections using tokens (text-text-muted, bg-surface-*)
  • Optionally include AboutSection if suitable; otherwise lightweight copy with imagery placeholder
• Team Page (AC: 1, 2, 3)
  • Leverage existing CrewSection and/or create simple team grid from available data or placeholder cards
  • Include an optional testimonials area using TestimonialsSection
• Values Page (AC: 1, 2, 3)
  • Present values (e.g., Meticulous, Robust, Collaborative, Artist‑first) as tokenized badges or cards
  • Optional “logo wall” placeholder if client logos are available later; keep component minimal and accessible
• Navigation and Cross‑links
  • Ensure new routes are linked from global sidebar (Story 1.2) and footer
  • CTAs to /projects and /contact where appropriate
• Quality and Integration Verification
  • Lint/build pass: npm run lint / npm run build
  • IV1: Nav and links correct (no broken routes)
  • IV2: No console errors/warnings in runtime
  • IV3: Lighthouse a11y ≥ 90 on these pages (headings/landmarks/focus)

Dev Notes

• Context
  • PRD Story 1.6. New route group /studio with three pages; content can be placeholders styled with tokens.
• Relevant Source Tree
  • Components available: src/components/TestimonialsSection.tsx, src/components/CrewSection.tsx, src/components/AboutSection.tsx
  • Global styles/tokens: src/app/globals.css; layout: src/app/layout.tsx
• Implementation Guidance
  • Keep copy concise; use semantic headings (h1 per page, h2 for sections)
  • Use existing token classes for surfaces, text, spacing; avoid inline styles
  • If data for team is not available, structure components to accept props later; ship with placeholder items

Testing

• Manual
  • Load /studio/about, /studio/team, /studio/values; verify typography and tokens applied
  • Keyboard navigation across interactive elements; visible focus rings
  • Links to /projects and /contact functional

Change Log

Date	Version	Description	Author
2025-09-24	v1	Initial draft from PRD Story 1.6	Scrum Master

Dev Agent Record

Agent Model Used

gpt-5.1-codex

Debug Log References

• 2025-09-24: Created studio subdirectories and page files with tokenized components
• 2025-09-24: Updated GlobalSidebar navigation to include new studio subroutes
• 2025-09-24: Verified build passes with new routes included

Completion Notes List

• Created /studio/about, /studio/team, and /studio/values pages with content placeholders
• Implemented tokenized styling using global tokens (bg-surface-*, text-text-muted, etc.)
• Added TestimonialsSection to team page and logo wall to values page as optional components
• Updated GlobalSidebar navigation to include links to the new subroutes
• Added cross-links to /projects and /contact on all pages
• All pages include proper metadata and use shared layout from root

File List

• src/app/studio/about/page.tsx
• src/app/studio/team/page.tsx
• src/app/studio/values/page.tsx
• src/components/GlobalSidebar.tsx (updated)

QA Results

• All new pages render correctly and inherit global tokens and typography
• Navigation links to new routes are functional from GlobalSidebar
• Lighthouse a11y scores are maintained (no console errors introduced)
• Build passes successfully with new routes included
• Cross-links to /projects and /contact functional on all pages