Add animated 5-screen CSS phone mockup showcase section

[syed-reza98]

$(cat <<'EOF'

Summary

• Adds a new <!-- ── APP MOCKUP ── --> section between the Social Proof Strip and Testimonials, featuring a dark navy (#0F0F1E) background with radial peach and blue glows
• Left column includes eyebrow chip, headline, subtext, and 5 clickable vertical screen-selector tabs (Home, Match, Nutrition, Market, Social)
• Right column renders a pure-CSS phone frame (260px, dark navy bezel, pill-shaped dynamic island notch) containing 5 fully detailed app screens that fade/slide in and out
• Screens faithfully replicate: Home (streaks, stats, tasks), Match (swipe card + dock), Nutrition (SVG weight chart + smart kcal card + log history), Market (search, shops, subscription banner, product cards), Social (posts with actions + FAB)
• Auto-advances every 3.8s via a self-contained JS IIFE; clicking a tab resets the timer
• Responsive: stacks at ≤960px, phone narrows to 230px at ≤600px
• All existing JS functions, IDs, and config constants (SUPABASE_URL, WAITLIST_API, firstName, email, petType, petCount, form-state, success-state, counter, spot-number) are fully preserved

Test plan

• Load the page and verify the dark navy mockup section appears between the proof strip and testimonials
• Confirm all 5 tab buttons are visible and clickable on desktop
• Verify the phone frame renders correctly (rounded corners, dark bezel, pill notch)
• Check each screen transitions with fade+slide on auto-advance (every 3.8s)
• Click each tab manually and confirm the correct screen appears and the auto-timer resets
• Resize to ≤960px — left text should stack above phone
• Resize to ≤600px — phone should narrow to 230px
• Confirm the waitlist form still submits correctly (all IDs intact)
• Check no JS console errors appear on load

https://claude.ai/code/session_0116rKa7kc65vJnjW7L7WyPp
EOF
)

---

Generated by Claude Code

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
petfolio-waitlist	Ready	Preview, Comment	May 19, 2026 0:52am