biohazard-vfx/docs/prd/07-epic-stories.md

Epic and Story Structure

Epic Structure Decision: Single epic focused on UX/UI unification with sequenced, low‑risk increments. [Confirmed]

Epic 1: UX/UI Unification and Core Pages

• Epic Goal: Unify design system and IA, implement reusable patterns, and elevate core pages while preserving existing functionality.
• Integration Requirements: Each story verifies non‑regression on existing routes and key interactions; redirects for IA changes; accessibility and performance checks included.

Story 1.1 Design Tokens and Typography As a visitor, I want a cohesive visual language so that the site feels premium and consistent.

• Acceptance Criteria
  1. Global CSS variables for color, spacing, radii, shadows, and motion exist and are documented.
  2. Headline font and body font applied globally; extraneous fonts removed.
  3. Tailwind config consumes tokens; shadcn primitives reflect tokens.
• Integration Verification
  • IV1: No layout regressions in /projects, /faq, /contact.
  • IV2: Admin pages remain functional and readable.
  • IV3: Performance: no >10% increase in CSS/JS bundle.

Story 1.2 Global Layout, Sidebar Nav, Command Palette As a user, I want clear navigation so that I can find Projects, Process, Studio, and Contact quickly.

• Acceptance Criteria
  1. Sidebar navigation (persistent 240px; not collapsible) groups routes as defined.
  2. Command palette opens via Cmd/Ctrl+K with navigation to key routes.
  3. Footer includes minimal links; responsive behavior verified.
• Integration Verification
  • IV1: Deep links to existing /projects/[id] still resolve.
  • IV2: Keyboard navigation and focus order preserved.
  • IV3: No layout shift >0.1 CLS on nav open/close.

Story 1.3 Sticky Split Pattern Library As a storyteller, I want a sticky split component so that narrative and media synchronize during scroll.

• Acceptance Criteria
  1. <StickySplit.Section/Sticky/Track/Panel> components implemented with docs.
  2. Reduced‑motion mode disables heavy animations gracefully.
  3. Mobile layout stacks content; performance budget respected.
• Integration Verification
  • IV1: No scroll‑jacking; passive listeners only.
  • IV2: A11y tree/focus unaffected.
  • IV3: Frame budget within 16ms on mid‑range devices.

Story 1.4 Projects Section Revamp As a prospect, I want a Reel and clear Case Studies so that I can assess capability fast.

• Acceptance Criteria
  1. /projects index offers Reel + Case Studies tabs with filters.
  2. Case Study detail template with hero, problem, approach, pipeline, results, credits, CTA.
  3. Media player wrapper standardized.
• Integration Verification
  • IV1: Existing project data remains valid.
  • IV2: SEO: titles/descriptions preserved or migrated.
  • IV3: Page renders within current TTFB/LCP budgets.

Story 1.5 Process Pages As a technical stakeholder, I want pipeline/tools/infrastructure pages so that I understand reliability and stack.

• Acceptance Criteria
  1. /process/{pipeline,tools,infrastructure} pages implemented with sticky split or light reveals.
  2. Badge and icon components for stack and capabilities.
  3. Cross‑links to Projects and Contact.
• Integration Verification
  • IV1: No regressions to other routes.
  • IV2: A11y checks pass.
  • IV3: Bundle size growth <10% vs prior story.

Story 1.6 Studio Pages As a partner, I want About, Team, and Values 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.
• Integration Verification
  • IV1: Nav and links correct.
  • IV2: No console errors.
  • IV3: Lighthouse a11y ≥ 90.

Story 1.7 Contact Smart Form As an inquirer, I want a guided contact form so that I can convey project essentials quickly.

• Acceptance Criteria
  1. Fields: project type, timeline, budget range, references/links; validation via zod.
  2. Success page with next steps/SLA.
  3. Optional route to persist submissions (or email integration) without breaking existing auth.
• Integration Verification
  • IV1: Rate limiting or basic abuse mitigation.
  • IV2: Error states accessible and clear.
  • IV3: No PII leakage in logs.

Story 1.8 Hardening: Performance, Accessibility, SEO As a steward, I want the site to be fast and accessible so that it reflects professional standards.

• Acceptance Criteria
  1. CLS < 0.1; LCP within target for hero pages; images lazy‑loaded.
  2. Keyboard navigation across all interactive elements; visible focus rings.
  3. Sentry breadcrumbs for nav/CTA; basic event tracking for key flows.
• Integration Verification
  • IV1: Compare metrics to pre‑enhancement baselines.
  • IV2: No new 4xx/5xx in Sentry after launch.
  • IV3: Sitemap/robots updated if IA changed.