96 lines
4.7 KiB
Markdown
96 lines
4.7 KiB
Markdown
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.
|