rapid-wireframes

As a user I want to experience the full Landing page based on the existing JSX design (Landing v1). Implement all sections in order: NavBar (sticky, coral CTA, mobile hamburger drawer), Hero (two-column, phone mockup bob animation, micro-trust stats), TrustBar (partner logos marquee), FeedMockup (social feed card with 3 posts), CommunityMap (interactive SVG node network, pulse animations, hover tooltips, click modal, mobile bottom sheet), WellnessFeatures (6-card grid, coral icon accents), SocialFeatures (alternating two-column layout for Groups & Challenges and Share Progress), Testimonials (snap-scroll carousel with 4 cards, coral arrows, dot indicators), JoinCommunityCTA (coral gradient, wave SVG dividers, social proof), AppDownload (phone mockup, App Store/Google Play badges, QR code), Footer (4-column layout, accordion on mobile). Page flows to: Download page via CTA buttons. Follows user flows for Casual Explorer, Community Seeker, and Wellness Enthusiast personas.

As a user I want to access the Download page after clicking any 'Get App' or 'Download the App' CTA from the Landing page. Implement a dedicated Download page with App Store badge, Google Play badge, QR code placeholder, and a short value-proposition headline. The page should follow the same warm cream theme and link back to Landing. Referenced in all three user flow diagrams as the final destination (Download: Get App).

As a user I want the backend API service to be ready to support future dynamic data for the landing page (e.g. community stats, testimonials, member counts). Set up FastAPI project structure with router modules, Alembic migration setup for MySQL/MariaDB, CORS configuration for the React frontend, and a health-check endpoint. Establish base models for Community, User, and Testimonial entities.

As a user I want to interact with the Community Map centerpiece on the Landing page. Implement the animated SVG/canvas node network: ~12 coral and peach nodes with pulsating scale animation (1→1.08, 2s loop), connecting gray lines, hover tooltip cards (group name, member count avatars, shared goal tag, Join button), click-to-expand full-screen modal (coral header, group feed preview, close X button). On mobile: nodes become 44px tap targets and tooltip becomes a bottom-sheet overlay. On tablet: hover becomes tap interaction. This is the signature design concept of the project.

As a user I want to see real community statistics (member count, active challenges, app rating) on the Landing page Hero and JoinCommunityCTA sections. Implement a FastAPI endpoint GET /api/community/stats returning member count, challenge count, and rating. Integrate the endpoint into the Landing page frontend to replace hardcoded micro-trust stat values.

As a user I want to see dynamic, real testimonials on the Landing page Testimonials carousel. Implement FastAPI endpoint GET /api/testimonials returning a list of testimonial objects (text, author name, location, star rating, avatar initials). Integrate with the Testimonials section frontend component to replace static hardcoded testimonial data.

As a user I want all pages to be fully responsive and accessible on mobile, tablet, and desktop. Audit and fix: mobile-first CSS breakpoints (768px, 1024px), stacking layouts on mobile, touch targets minimum 44x44px, no horizontal scroll overflow, WCAG 2.1 compliance (color contrast ratios, aria-labels on interactive elements, keyboard navigation for carousel arrows and map nodes, focus states). Covers Landing page and Download page.