strong-mr

As a frontend developer, implement the LandingHero section for the Landing page. Build a full-viewport hero using `@react-three/fiber` Canvas with a procedural 3D flower scene. Implement the `Flower` component with `useRef`, `useMemo` for 6-petal geometry (sphereGeometry args [0.14,14,12]), cylinderGeometry stem, and leaf mesh. Use `gsap.to(bloom)` with `elastic.out(1, 0.55)` ease for the bloom animation triggered by `bloomDelay` prop. Implement `useScrollProgress` hook with passive scroll listener to derive parallax progress (0..1 over viewport height). In `useFrame`, apply sway (`Math.sin(t*0.8)*0.06`), y-oscillation, and z-drift based on scroll progress. Include `motion.div` hero text with Leaf, ArrowRight, PlayCircle lucide icons, framer-motion entrance animations, and a CTA button linking to `/Register`.

As a frontend developer, implement the LandingGutJourneyMap section for the Landing page. Build an interactive 5-stage journey map using `@react-three/fiber` Canvas with `OrbitControls` and `Line` from `@react-three/drei`, plus THREE.js primitives. Render the `STAGES` array (awareness, assessment, action, achievement, maintenance) each with unique color/glow tokens (e.g. `#66CDAA`, `#2E8B57`, `#FFD700`, `#FFA500`, `#FF6347`). Implement GSAP-driven transitions between stages with `AnimatePresence` for panel content (title, tagline, body text, bullet points). Each stage card includes a `linkLabel` CTA linking to pages like `/Education`, `/HealthTracker`, `/Recommendations`, `/Reports`, `/Dashboard`. Use `useMemo` and `useFrame` for 3D path/node rendering, and `motion` variants for staggered panel entrance.

As a frontend developer, implement the LandingFeatures section for the Landing page. Render four `FeatureCard` components from the `features` array (tracking, recommendations, education, analytics) using `motion.a` with `initial={{ opacity: 0, y: 28 }}` and `whileInView` reveal triggered via `useInView` with `once: true, amount: 0.4`. Each card displays a lucide icon (Activity, Sparkles, BookOpen, BarChart3), `CountUp` animated stat (e.g. 2500+, 98%, 320+, 14k), stat label, description, and an ArrowRight CTA link. Include decorative `PlantSVG` (inline SVG with stem, leaves, and gold circle) and `ButterflySVG` (two-wing path with FFA500/FF6347 fills) components positioned as section accents.

As a frontend developer, implement the LandingRecommendations section for the Landing page. Build a horizontally-scrolling card carousel using `useMotionValue` and `animate` from framer-motion. Implement `goTo(index)` with spring animation (`stiffness: 320, damping: 34`) applied to `x` motion value. Use `CARD_WIDTH_MOBILE = 360+20` and `CARD_WIDTH_DESKTOP = 380+20` with a resize listener to switch step size at `window.innerWidth >= 1024`. Render 4 recommendation cards from the `recommendations` array, each showing badge with lucide icon (Apple, Leaf, Droplet), rationale text, benefit string with BenefitIcon (TrendingUp, Sparkles), and avatar initials circles. Include ChevronLeft/ChevronRight navigation buttons with active index state clamped to `[0, recommendations.length-1]`.

As a frontend developer, implement the LandingEducationPreview section for the Landing page. Render 4 article preview cards from the `articles` array (Microbiome 101, Nutrition, Wellness, Tracking Guide) using `motion` variants with staggered container (`staggerChildren: 0.15, delayChildren: 0.1`) and `cardVariants` spring animation (`stiffness: 100, damping: 16, y: 24 → 0`). Each card includes an `ArticleThumb` component that generates SVG placeholder images via `makeThumb(hue, hue2, label, blur)` as data URIs — blurred low-res version shown first then swapped to full 640×360 SVG with gradient and white-opacity circle accents. Display category badge, Clock icon with readTime string, article title, excerpt, and an ArrowRight CTA. Use `useInView` for scroll-triggered reveal. Include BookOpen and Leaf lucide icons as section decorations.

As a frontend developer, implement the LandingTestimonials section for the Landing page. Build an auto-playing testimonial carousel with `AUTOPLAY_MS = 5000` using `setInterval` in a `useEffect` that clears when `paused` is true. Manage `activeIndex`, `direction` (1 or -1), and `paused` state. Implement `goTo(next, dir)` with modular index wrapping `((next % count) + count) % count`. Use `AnimatePresence` with direction-aware slide variants for enter/exit transitions. Render 5 testimonials (Priya Nair, Arjun Mehta, Sneha Kulkarni, Rohan Das, Ananya Iyer) each with gradient avatar (`color` prop as CSS background), initials, metric badge, star rating row using Star lucide icon, and quote text. Include ChevronLeft/ChevronRight nav buttons and dot indicators. Pause autoplay on hover/focus interactions.

As a frontend developer, implement the LandingCTA section for the Landing page. Build a magnetic CTA button using `useMotionValue` and `useSpring` (`stiffness: 220, damping: 16, mass: 0.3`) for `rawX`/`rawY` values that respond to `mousemove` on `magnetRef`. On `handleMove`, compute `dx/dy` from button center and clamp to `±12px` with `0.4` multiplier. On `handleEnter`, call `makeParticles()` to generate 12 particles with randomized angle, distance (60–130px), and `PARTICLE_COLORS` (`#FFD700`, `#66CDAA`, `#2E8B57`, `#FFA500`), then clear after 1000ms. Render particles with `AnimatePresence`. Include `lcta-decor` layers with `.lcta-bloom` and `.lcta-leaf` spans for parallax scroll decoration. Display eyebrow label, headline, and 3 trust items (ShieldCheck, Clock, Heart lucide icons) with labels. CTA button links to `/Register` with Sprout and ArrowRight icons.

As a frontend developer, implement the Footer section for the Landing page. Build the site-wide footer with `staggerContainer` and `columnVariant` framer-motion variants (`staggerChildren: 0.1, delayChildren: 0.2`, `y: 20 → 0, duration: 0.5`) triggered by `whileInView`. Render 4 `linkColumns` (Product, Resources, Company, Legal) each with their respective href links to /HealthTracker, /Recommendations, /Dashboard, /Profile, /Education, /Reports, /Register, /Login, /Landing, /AdminDashboard, /UserManagement, /SystemSettings, /Privacy, /Terms. Include 5 social icon links (Twitter, Instagram, Facebook, Linkedin, Youtube from lucide-react). Implement newsletter email form with `email` and `focused` state, `handleSubmit` validation (checks for `@` in email), and `note` state for success/error feedback message. Add `ftr-decor` layer with 3 `.ftr-leaf` span accents. Note: This component may already exist from a previous page implementation.

As a Backend Developer, implement user profile management API endpoints using FastAPI. Include GET /api/users/me, PUT /api/users/me, DELETE /api/users/me for the authenticated user. Also include admin endpoints: GET /api/users, GET /api/users/{id}, PUT /api/users/{id}, DELETE /api/users/{id} for the UserManagement page. Implement role-based access control (user vs admin). These endpoints support the Profile and UserManagement frontend pages.

As a Backend Developer, implement gut health metrics tracking API endpoints using FastAPI. Include POST /api/metrics, GET /api/metrics (with pagination and date range filters), GET /api/metrics/{id}, PUT /api/metrics/{id}, DELETE /api/metrics/{id}. Define the GutMetric model with fields: user_id, metric_type, value, unit, recorded_at, notes. These endpoints support the HealthTracker and Dashboard frontend pages.

As a Backend Developer, implement educational resources API endpoints using FastAPI. Include GET /api/education/articles (with pagination, category filter), GET /api/education/articles/{id}, POST /api/education/articles (admin only), PUT /api/education/articles/{id} (admin only), DELETE /api/education/articles/{id} (admin only). Article model includes: title, excerpt, content, category, read_time, author, published_at, thumbnail_hue. These endpoints support the Education and Landing page LandingEducationPreview section.

As a Backend Developer, implement system settings management API endpoints using FastAPI. Include GET /api/settings (admin only), PUT /api/settings (admin only) for updating configurable system parameters such as feature flags, maintenance mode, and notification settings. These endpoints support the SystemSettings admin frontend page.

As a Frontend Developer, implement the Register page for new user account creation. Build a form with fields: full name, email, password, confirm password. Include real-time validation, password strength indicator, and error messaging. On submit, call POST /api/auth/register. On success, redirect to Login. Use the brand color palette and framer-motion entrance animations consistent with the design system. Note: depends on temp_backend_auth for API integration.

As a Frontend Developer, implement the Login page for user authentication. Build a form with email and password fields, remember-me checkbox, and forgot-password link. Include validation and error handling for invalid credentials. On submit, call POST /api/auth/login. On success, redirect to Dashboard (regular user) or AdminDashboard (admin). Use brand colors and framer-motion animations. Note: depends on temp_backend_auth for API integration.

As a Frontend Developer, implement the Dashboard page showing the authenticated user's gut health overview. Display summary cards with recent metric readings, active recommendations count, learning streak, and progress chart. Fetch data from GET /api/dashboard/summary. Include quick-action links to HealthTracker, Recommendations, and Education pages. Use framer-motion card entrance animations and the static interaction model for internal pages. Note: depends on temp_backend_dashboard for API integration.

As a Frontend Developer, implement the HealthTracker page for logging and viewing gut health metrics. Build a metric logging form (metric type dropdown, value input, unit, date picker, notes). Display metrics history as a paginated table and a line/bar chart (using recharts or similar). Support date range filtering. Fetch from GET /api/metrics, submit to POST /api/metrics. Note: depends on temp_backend_metrics for API integration.

As a Frontend Developer, implement the full Recommendations page (distinct from the landing preview section). Display personalized recommendation cards fetched from GET /api/recommendations. Each card shows category badge, rationale, benefit, and an 'Apply' button that calls POST /api/recommendations/{id}/apply. Include filtering by category and applied/pending status. Use framer-motion stagger animations. Note: depends on temp_backend_recommendations for API integration.

As a Frontend Developer, implement the Education page for browsing and reading gut health articles. Display article cards in a grid with category filters (Microbiome, Nutrition, Wellness, Tracking). Clicking a card opens a full article detail view. Fetch articles from GET /api/education/articles and GET /api/education/articles/{id}. Use thumbnail SVG placeholders matching the LandingEducationPreview style. Include useInView scroll animations. Note: depends on temp_backend_education for API integration.

As a Frontend Developer, implement the Profile page for authenticated users to view and update their account settings. Include editable fields: full name, email, password change section, and notification preferences. Fetch current data from GET /api/users/me, submit updates to PUT /api/users/me. Add account deletion option with confirmation dialog. Use framer-motion form animations. Note: depends on temp_backend_user for API integration.

As a Frontend Developer, implement the AdminDashboard page for admin users. Display key metrics: total users, active users today, total metrics logged, reports generated. Include quick-nav links to UserManagement, SystemSettings, and Reports pages. Fetch summary data from GET /api/dashboard/summary with admin scope. Use chart components for trend visualization. Note: depends on temp_backend_dashboard for API integration.

As a Frontend Developer, implement the UserManagement page for admins. Display a paginated table of all users with columns: name, email, role, created_at, status. Support search by name/email. Implement Edit User modal (name, email, role fields) and Delete User confirmation dialog. Fetch from GET /api/users, update with PUT /api/users/{id}, delete with DELETE /api/users/{id}. Note: depends on temp_backend_user for API integration.

As a Frontend Developer, implement the SystemSettings page for admins to configure application parameters. Display settings grouped by category (General, Notifications, Feature Flags, Maintenance). Each setting has an editable input or toggle. Fetch from GET /api/settings, submit updates to PUT /api/settings. Include success/error toast feedback. Note: depends on temp_backend_settings for API integration.

As a Frontend Developer, implement the Reports page for admins. Provide a report generation form with date range picker, metric type selector, and user scope (all users or specific user). On submit, call POST /api/reports/generate. Display generated reports in a list with export buttons (CSV/PDF) that call GET /api/reports/{id}/export. Note: depends on temp_backend_reports for API integration.

As a Frontend Developer, set up global state management for the Strong-MR React application. Implement an AuthContext providing current user, login/logout actions, and role-based access control (isAdmin, isAuthenticated). Set up React Query (TanStack Query) for server state management, caching API responses, and handling loading/error states globally. Create protected route components that redirect unauthenticated users to Login and non-admin users away from admin pages. Configure axios or fetch interceptor for attaching JWT tokens to requests and handling 401 refresh.

As a Backend Developer, implement personalized recommendations API endpoints using FastAPI. Include GET /api/recommendations (returns personalized tips for the authenticated user based on their metrics), GET /api/recommendations/{id}, POST /api/recommendations/{id}/apply (mark a recommendation as applied). Recommendations are generated based on user's gut health metrics history. These endpoints support the Recommendations and Landing page preview sections.

As a Backend Developer, implement reports generation and export API endpoints using FastAPI. Include GET /api/reports (list reports for admin), POST /api/reports/generate (generate a report for a date range and metric type), GET /api/reports/{id}/export (export report as CSV or PDF). These endpoints support the admin Reports frontend page.

As a Tech Lead, verify the end-to-end integration between the Register/Login frontend pages and the Auth backend API. Ensure JWT tokens are correctly stored and attached to subsequent requests, protected routes redirect unauthenticated users, role-based routing directs admins to AdminDashboard and regular users to Dashboard, and logout clears auth state. Validate error handling for invalid credentials and duplicate registration.

As a Tech Lead, verify the end-to-end integration between the HealthTracker frontend page and the Gut Metrics backend API. Ensure metric logging form correctly submits to POST /api/metrics, metric history loads and paginates from GET /api/metrics, date range filters are applied server-side, charts render correctly with real data, and edit/delete operations reflect immediately in the UI.

As a Tech Lead, verify the end-to-end integration between the Education frontend page and the Education Content backend API. Ensure articles load and paginate from GET /api/education/articles, category filters work correctly, article detail view fetches and renders full content from GET /api/education/articles/{id}, and the LandingEducationPreview section shows real article data.

As a Tech Lead, verify the end-to-end integration between the UserManagement frontend page and the User Profile backend API admin endpoints. Ensure user list loads and paginates from GET /api/users, search filters work server-side, Edit User modal correctly fetches and submits to PUT /api/users/{id}, and Delete User action calls DELETE /api/users/{id} with confirmation and reflects in the list.

As a Tech Lead, verify the end-to-end integration between the SystemSettings frontend page and the System Settings backend API. Ensure settings load from GET /api/settings, updates are correctly persisted via PUT /api/settings, only admin-authenticated users can access the page, and success/error toast feedback reflects the actual API response.

As a Tech Lead, verify the end-to-end integration between the Profile frontend page and the User Profile backend API. Ensure user data loads from GET /api/users/me, profile updates persist via PUT /api/users/me, password change is validated and hashed server-side, and account deletion with confirmation calls DELETE /api/users/me and clears auth state.

As a Backend Developer, implement the dashboard summary API endpoint using FastAPI. Include GET /api/dashboard/summary which returns aggregated metrics for the authenticated user: recent metric readings, recommendation count, streak data, and progress indicators. This endpoint supports the Dashboard frontend page overview section.

As a Tech Lead, verify the end-to-end integration between the Recommendations frontend page and the Recommendations backend API. Ensure personalized recommendations load correctly for the authenticated user from GET /api/recommendations, the Apply action correctly calls POST /api/recommendations/{id}/apply and updates UI state, category filtering works, and the LandingRecommendations preview section displays representative data.

As a Tech Lead, verify the end-to-end integration between the Reports frontend page and the Reports backend API. Ensure report generation form correctly calls POST /api/reports/generate, generated reports appear in the list from GET /api/reports, export functionality triggers the correct file download from GET /api/reports/{id}/export, and access is restricted to admin users.

As a Tech Lead, verify the end-to-end integration between the Dashboard frontend page and the Dashboard Summary backend API. Ensure summary cards display accurate aggregated data from GET /api/dashboard/summary, charts render correctly with real metric data, quick-action links navigate to correct pages, and the AdminDashboard variant shows admin-scoped metrics correctly.