# Big Breath — Execution Phases

Last screenshot: concept-v3.png (black base, blue accent, Joe in correct position)
Status: Wireframe concept approved in direction, not yet production-ready.

---

## Phase 1 — Foundation & Structure (next session)

Goal: Homepage HTML complete, all sections present, correct order, no placeholders.

Tasks:
1. Extract partner logos from pitch deck PDF using pdfimages → save to src/assets/images/logos/
2. Convert HEIC headshots to JPG using heif-convert → src/assets/images/headshots/
3. Copy Big Joe JPGs to src/assets/images/joe/
4. Rebuild index.html from scratch using concept.html as reference — clean semantic HTML, no inline styles
5. Add the 4 missing sections:
   - Section A: "The Science" (stress, cortisol, HRV — cite HBR per Jermaine's note)
   - Section B: "In the Room" (group photo gallery — horizontal scroll)
   - Section C: "Upcoming Sessions" (event cards)
   - Section D: "The Practice, Anywhere" (app/digital membership)
6. Correct section order:
   Hero → USP Bridge → Philosophy → The Science → Meet Big Joe → In the Room → Services → Logo Bar → Testimonials → Global Reach → Upcoming Sessions → CTA Close

Agent: AC-Build-AGENT (Sonnet)
Verify: Playwright full-page screenshot after each section added

---

## Phase 2 — Motion & Parallax (after Phase 1 approved)

Goal: The page moves. Visitor feels breath in the scroll.

Tasks:
1. Wire GSAP ScrollTrigger to all section reveals (already in concept, needs production port)
2. Ghost word parallax — "BREATH" at 0.1x scroll rate spanning hero → philosophy
3. Joe photo card rises at 1.15x scroll rate (comes toward viewer)
4. Particle system: grid-distributed, zoom/disperse on scroll (done in concept, port to production)
5. Background gradient shifts blue glow position as user scrolls (GSAP scrub on radial-gradient position via CSS custom property)
6. Stat counters animate on enter (15K+, 143K, 15+)
7. Logo marquee — Swiper.js autoplay infinite, pause on hover
8. Nav: transparent on hero, frosted glass (#080808 at 85% opacity + backdrop-filter) when scrolled

Agent: AC-Build-AGENT (Sonnet)
Verify: Manual scroll test + Playwright scroll-to screenshots at 25%, 50%, 75%, 100%

---

## Phase 3 — Assets, Polish & Pre-Launch (after Phase 2 approved)

Goal: Real photos, real logos, performance optimized, ready for Docker deploy.

Tasks:
1. Replace all placeholder copy with approved copy from pitch deck PDFs
2. Place real Joe headshots in Meet Big Joe section (clothed shots only — Jermaine's note)
3. Place real group session photos in "In the Room" gallery
4. Wire partner logos (PNG extracted from PDF) into logo marquee
5. Add contact form to /contact/ page (POST to src/api/contact.php)
6. SEO: meta descriptions, OG tags, canonical URLs all set to bigbreathe.co
7. Performance: compress all images (convert to WebP), defer non-critical JS
8. Deploy via Docker + nginx (Dockerfile already in place)
9. Run verify-protection.sh audit (per MEMORY: am-webdesign-sops/tools/verify-protection.sh)
10. Test on mobile (375px, 390px, 430px viewports)

Agent: AC-Build-AGENT (Sonnet) + AC-QC-AGENT (Haiku verify)
Verify: Lighthouse score >90 performance, all links resolve, mobile screenshots pass

---

## Agent Dispatch Plan (Phase 1)

Spawn in parallel after compact:
- Agent A: pdfimages extraction + heif-convert batch (Haiku)
- Agent B: index.html rebuild sections 1-4 (Sonnet)
- Agent C: index.html rebuild sections 5-8 (Sonnet)

Gate: Both B and C screenshot via Playwright before proceeding to Phase 2.
