zinc-baby

As a frontend developer, implement the LandingHero section for the Landing page. Build the hero using GSAP and framer-motion with: (1) GSAP timeline (gsap.context + tl) animating .lh-badge, .lh-word (stagger 0.08s), .lh-subheadline, .lh-cta (stagger 0.12s), .lh-social-proof in sequence, guarded by hasAnimated ref; (2) Three parallax layers — lh-bg-layer (clouds, speed 0.2), lh-mid-layer (floating toys, speed 0.3), foreground content; (3) Eight floating toys array (🧸🧩🍼⭐🦆🌙💕🎀) each with individual bobDuration and bobRange, animated via framer-motion; (4) headlineWords array ['Parenting','Made','Smarter','with','AI'] rendered as individual .lh-word spans; (5) Four avatar initials (S, M, A, J) in overlapping .lh-avatar stack for social proof. Import LandingHero.css. Scroll value injected via CSS custom property --scroll.

As a frontend developer, implement the LandingTrustBadges section for the Landing page. Build three badge cards (BADGES array: AI-Powered Recommendations, Privacy Focused, 24/7 Support) with: (1) AnimatedCounter component using framer-motion useMotionValue + animate() to count from 0 to target (10M+, 256-bit, 99.9%) with isDecimal detection for .toFixed(1) formatting, triggered by isActive prop; (2) useInView hook to detect when cards enter viewport and activate counters; (3) Custom inline SVG icons per badge (lightbulb, shield-check, chat-bubble); (4) colorClass variants (primary, secondary, accent) for per-card theming; (5) Hover tilt/lift effect using useMotionValue for 3D card perspective. Import LandingTrustBadges.css with GSAP for entrance animations.

As a frontend developer, implement the LandingFeatures section for the Landing page. Build an interactive tabbed feature showcase with: (1) FEATURES array (meal, sleep, vaccine ids) each with title, desc, detail, highlights array, href, colorClass, and inline SVG icon; (2) useState activeFeature for tab switching with AnimatePresence slide transitions between feature panels; (3) GSAP entrance animation on section scroll-into-view targeting feature tab buttons and content panel; (4) Detail panel showing 4 highlight bullet points per feature with staggered framer-motion reveal; (5) CTA link per feature (href: /MealPlanner, /SleepTracker, /Vaccines) with lf-icon-wrap color variants (secondary, primary, accent). Import LandingFeatures.css.

As a frontend developer, implement the LandingNurseryRoom 3D interactive section for the Landing page. Build using @react-three/fiber Canvas + @react-three/drei with: (1) Full 3D nursery room scene — RoomFloor (planeGeometry 12x8, color shifts day/night), RoomWall, WindowFrame with animated glowRef opacity via useFrame; (2) Three HOTSPOTS (crib→SleepTracker, chair→MealPlanner, shelf→GrowthChart) with 3D positions, color-coded glows (blue, orange, pink), and Html overlays from drei; (3) getTimeState() reading current hour to toggle isNight/isDusk lighting states; (4) OrbitControls with limits, RoundedBox and Sphere geometries, THREE.js materials with roughness/metalness; (5) Suspense fallback loader; (6) Framer-motion AnimatePresence hotspot info cards on click with desc and href CTA; (7) GSAP for 2D overlay entrance animations. Wrap Canvas in lnr-canvas-container. Import LandingNurseryRoom.css.

As a frontend developer, implement the LandingBenefits section for the Landing page. Build an alternating left/right benefit card list with: (1) benefits array (5 items: insights, time, peace, expert, community) each with id, title, description, Lucide icon component (Lightbulb, Clock, ShieldCheck, GraduationCap, Users), iconClass variant, and align ('left'|'right'); (2) BenefitCard component using useRef + useInView (once: true, amount: 0.2) + useAnimation to trigger cardVariants (opacity 0→1, y 30→0), iconVariants (x -30→0), textVariants (opacity 0→1) with index-based delays; (3) containerVariants with staggerChildren 0.1s on the wrapper; (4) GSAP gsap.context used for section-level entrance; (5) alignClass toggling CSS for alternating layout. Import LandingBenefits.css.

As a frontend developer, implement the LandingPersonas section for the Landing page. Build a two-persona showcase with: (1) personas array (new-parent: Sarah, caregiver: James) each with name, role, description, needs array (4 items), variant (primary|secondary), and cta object; (2) AnimatedCheckmark component using useRef pathRef to get SVG path length, then GSAP strokeDasharray/strokeDashoffset animation triggered by inView prop with per-item delay; (3) PersonaAvatar SVG components — primary variant renders female avatar SVG with circle/ellipse shapes, secondary renders male avatar; (4) GSAP section entrance animation; (5) framer-motion AnimatePresence for card reveal with slide-up; (6) CTA buttons linking to /MealPlanner and /GrowthChart. Import LandingPersonas.css.

As a frontend developer, implement the LandingUserFlow section for the Landing page. Build a sequentially animated user journey diagram with: (1) MAIN_STEPS array (landing/Discover, signup/Sign Up, profile/Add Child, dashboard/Dashboard) with Lucide icons (Globe, UserPlus, Baby, LayoutDashboard); (2) SUB_FEATURES array (sleep/Moon, meals/Utensils, vaccines/Syringe, growth/TrendingUp, chat/MessageCircle) with per-feature colors; (3) useState for revealedSteps, revealedConnectors, showSubs — driven by useEffect with cascading setTimeout timers (400ms base, alternating connector+step reveals at 500ms+350ms intervals) triggered by useInView (once: true, amount: 0.25); (4) Connector lines between steps that animate in after each step; (5) Sub-features fan out below Dashboard node after all main steps revealed; (6) Two parallax decorative layers (luf-parallax-bg at 0.2, luf-parallax-mid at 0.4). Import LandingUserFlow.css and DesktopFlowSVG.css.

As a frontend developer, implement the LandingTestimonials section for the Landing page. Build an auto-advancing testimonial carousel with: (1) TESTIMONIALS array (4 items: Sarah M., James T., Priya K., David & Lin R.) each with quote, name, role, stars count, initials; (2) AUTO_ADVANCE_MS = 5000ms interval with useEffect for automatic slide progression; (3) CharRevealQuote component that splits quote text into individual chars and animates each with framer-motion opacity 0→1 using CHAR_DELAY = 0.018s per char delay, keyed by slideKey to re-trigger on slide change; (4) AnimatedStars component rendering star SVGs with spring animation (stiffness 400, damping 15) staggered by STAR_STAGGER = 0.1s; (5) slideVariants with AnimatePresence for slide enter/exit transitions; (6) Dot navigation indicators and prev/next controls via useCallback. Import LandingTestimonials.css.

As a frontend developer, implement the LandingPricing section for the Landing page. Build a three-tier pricing grid with: (1) tiers array (free/Pro/Family) each with monthlyPrice, yearlyPrice, features array, cta label, href (/Signup), and recommended flag; (2) useState for billing toggle (monthly|yearly) driving price display; (3) AnimatePresence price number swap animation when toggling billing cycle; (4) tierIcons object with inline SVGs (user/person for free, star polygon for pro, group for family); (5) CheckIcon component with CSS strokeDasharray/strokeDashoffset draw animation (lpr-check-draw keyframe, 0.4s); (6) ShieldIcon for money-back guarantee badge; (7) Recommended badge on Pro tier with highlighted border; (8) framer-motion card entrance with stagger on scroll-into-view via useRef/useInView. Import LandingPricing.css.

As a frontend developer, implement the LandingFAQ section for the Landing page. Build an accordion FAQ with GSAP-powered expand/collapse with: (1) FAQ_DATA array of 8 Q&A items covering personalization, data privacy (COPPA/GDPR), offline mode, AI chatbot, multi-caregiver access, age range (newborn–5), growth chart accuracy (WHO/CDC), and free plan; (2) useState for openIndex tracking which item is expanded; (3) GSAP animation on accordion panel height using useRef per item — gsap.to with height auto expand and opacity transitions; (4) useCallback for toggle handler to avoid re-renders; (5) useEffect to animate chevron/arrow rotation on open/close; (6) Keyboard accessibility (Enter/Space) for accordion items. Import LandingFAQ.css.

As a frontend developer, implement the LandingCTA section for the Landing page. Build a conversion CTA section with: (1) ParticleBurst component — generateParticles(14) creates particles with angle/distance math, PARTICLE_COLORS array (#E94E77, #F5A623, #4A90E2, #F8E71C, #A6C8F0), each particle animated via framer-motion (x/y/opacity/scale) with onAnimationComplete on idx===0; (2) useState for burst active state toggled on primary CTA button click; (3) useMemo to memoize generated particles; (4) Decorative parallax toy SVG layer — TeddySvg, BlockSvg, StarSvg, RattleSvg inline SVG components with semi-transparent fills; (5) useScroll + useTransform for parallax offset on decorative layer; (6) useMotionValue for magnetic CTA button effect. Import LandingCTA.css.

As a frontend developer, implement the LandingFooter section for the Landing page. Build a responsive footer with: (1) footerColumns array (4 columns: Product, Company, Resources, Legal) each with title and links array — Product links to /MealPlanner, /SleepTracker, /Vaccines, /GrowthChart, /AIChat; (2) socialLinks array (Twitter, Instagram, Facebook) with inline SVG icons using lftr-social-icon class; (3) useState expandedCols for mobile accordion — toggleCol handler that no-ops on desktop (isDesktop check); (4) useEffect with window.matchMedia('(min-width: 768px)') listener updating isDesktop state and cleaning up on unmount; (5) framer-motion AnimatePresence for mobile column expand/collapse transitions; (6) Copyright line and brand logo. Note: this component may be shared across pages and could already exist from a previous page. Import LandingFooter.css.

As a frontend developer, implement the LoginNavbar section for the Login page using the shared Navbar component (may already exist from LandingNavbar). The component uses `useState` for `menuOpen` and `scrolled`, and `useEffect` to attach a passive scroll listener that toggles the `nb-scrolled` class on `nav.nb-root`. A second `useEffect` locks `document.body.style.overflow` to `hidden` when the mobile menu is open. Desktop nav renders `navPages` array (Dashboard, Meal Planner, Sleep, Vaccines, Growth, AI Chat, Settings) as anchor links with lucide-react icons. Mobile nav renders the extended `mobilePages` array (9 items including Profile and Onboarding) with per-item background/color tokens. Auth CTAs render LogIn and UserPlus lucide icons as sign-in/sign-up buttons. Import from `../styles/Navbar.css`.

As a frontend developer, implement the SignupNavbar section for the Signup page. This reuses the shared Navbar component (may already exist from Landing/Login pages) with `useState` for `menuOpen` and `scrolled` state. Implements a `useEffect` scroll listener using `window.addEventListener('scroll', onScroll, { passive: true })` that toggles the `nb-scrolled` CSS class. A second `useEffect` locks `document.body.style.overflow` to `hidden` when the mobile menu is open. Renders desktop nav links from `navPages` array (Dashboard, Meal Planner, Sleep, Vaccines, Growth, AI Chat, Settings) and mobile nav from `mobilePages` array with per-item background/color tokens. Logo uses `Baby` icon from lucide-react linking to `/Dashboard`. Auth CTAs render `LogIn` and `UserPlus` lucide icons. Imports `../styles/Navbar.css`.

As a backend developer, implement FastAPI endpoints under /api/v1/children: POST /children (create child profile with name, birthdate, gender, blood_type, allergies, sleep_routine, dietary_preferences, notes, photo_url), GET /children (list all children for authenticated user), GET /children/{child_id} (get single profile), PUT /children/{child_id} (update profile fields), DELETE /children/{child_id} (soft-delete). Include sub-resources: PUT /children/{child_id}/avatar (upload photo to object storage), GET /children/{child_id}/age (computed age in months/years). Note: ChildProfileCard (3cd5ad29), BasicInfoSection (76a97eed), SettingsChildProfiles (1188eed7), OnboardingChildDetails (243dd58a), ProfileHero (460b281c) all depend on this API.

As a backend developer, implement FastAPI endpoints under /api/v1/sync: POST /sync/push (accepts batched offline mutations — array of {entity_type, entity_id, operation: create|update|delete, payload, client_timestamp}; applies in order with conflict resolution using server_timestamp wins strategy), GET /sync/pull?last_sync_at (returns all records modified after last_sync_at for the authenticated user's children across all entity types), GET /sync/status (returns pending_count, last_synced_at, storage_used_bytes). Use ETag or vector clock for conflict detection. Note: SyncStatus (fa1d45d4), SettingsDataSync (c5479646), OnboardingOfflineSync (e42a4fbc) depend on this API; also feeds the offline-first PWA service worker strategy.

As a backend developer, implement FastAPI endpoints under /api/v1/users: GET /users/me (current user profile: name, email, join_date, plan, timezone, avatar_url), PUT /users/me (update name, email, timezone), POST /users/me/avatar (upload avatar image), PUT /users/me/password (change password with current_password verification), GET /users/me/sessions (list active JWT sessions with device/ip/last_active), DELETE /users/me/sessions/{session_id} (revoke session), GET /users/me/login-history (last 20 auth events), POST /users/me/export (generate JSON export of all user data), DELETE /users/me (account deletion with confirmation token). Also: GET /users/me/2fa, PUT /users/me/2fa (configure TOTP/SMS/email 2FA). Note: SettingsProfileSection (84e5b8bb), SettingsAccountSecurity (8de33695), ActionButtonsSection (dc085d3f) depend on this.

As an AI engineer, configure and integrate LiteLLM as the LLM routing layer for all AI features. Tasks: (1) Set up LiteLLM proxy config (config.yaml) with GPT model routing, fallback models, and rate limiting; (2) Implement a ChildContextBuilder service that fetches child profile + last 7 days sleep/meal/growth data and formats it as a structured system prompt for personalized AI responses; (3) Implement streaming response handler for chat (SSE endpoint); (4) Create MealRecommendationEngine that calls LiteLLM with child age/allergies/dietary prefs to generate weekly meal suggestions; (5) Create GrowthInsightGenerator that produces narrative insights from percentile data; (6) Create SleepInsightGenerator for bedtime consistency analysis. Add prompt templates for each use case. Implement token usage logging per user. Note: backend_ai_chat_api and backend_meal_planner_api depend on this being configured first.

As a backend developer, scaffold the FastAPI backend project structure. Tasks: (1) Create directory layout: app/api/v1/routes/, app/models/, app/schemas/, app/services/, app/core/ (config, security, database); (2) Configure SQLAlchemy async engine with aiomysql for MySQL/MariaDB, connection pooling; (3) Set up Alembic with env.py pointing to async engine; (4) Implement JWT middleware in app/core/security.py (get_current_user dependency, token validation); (5) Configure CORS middleware for React frontend origin; (6) Add rate limiting middleware (slowapi) on auth endpoints; (7) Set up environment config via pydantic-settings (.env: DATABASE_URL, JWT_SECRET, LITELLM_API_KEY, SMTP config); (8) Add request logging middleware; (9) Wire up all route modules in main.py; (10) Health check endpoint GET /health. This is a prerequisite for all backend API tasks.

As a frontend developer, implement the LoginHero section for the Login page. Renders a `section.lh-root` with `aria-label='Welcome back'` containing a decorative inline SVG baby face icon inside `div.lh-icon-wrap` (aria-hidden). The SVG uses `currentColor` and includes: a filled+stroked circle head, two eye circles, a quadratic-bezier smile path, two cheek dot circles with 0.4 opacity, and a star sparkle path at top-right with 0.5 opacity. Below the icon: `h1.lh-headline` ('Welcome Back'), `div.lh-accent-bar` decorative divider (aria-hidden), and `p.lh-subheadline` describing personalized insights. Import from `../styles/LoginHero.css`. This section is independent and can be built in parallel with LoginForm.

As a frontend developer, implement the LoginForm section for the Login page. Uses six `useState` hooks: `email`, `password`, `rememberMe`, `showPassword`, `isLoading`, and `error`. Renders `section.lf-root` containing a card (`div.lf-card`) with: a header area featuring a `div.lf-brand-icon` (Baby lucide icon, size 26, white), `h1.lf-card-title`, and subtitle. The `form.lf-form` includes a conditional `div.lf-error-banner` (role='alert', AlertCircle icon) for validation errors. Email field uses `div.lf-input-wrap` with Mail lucide icon and controlled input (autoComplete='email'). Password field uses Lock icon plus an Eye/EyeOff toggle button that flips `showPassword` state. A remember-me checkbox, a forgot-password anchor link, a submit button with ArrowRight lucide icon that shows a loading spinner state via `isLoading`, and a sign-up redirect link at the bottom. `handleSubmit` validates empty fields, sets `isLoading` for 1400ms (simulated), then sets an error state. Import from `../styles/LoginForm.css`. This section is independent and can be built in parallel with LoginHero.

As a frontend developer, implement the LoginFooter section for the Login page using the shared Footer component (may already exist from LandingFooter). Renders `footer.ftr-root` with a brand block containing a logo link to `/Dashboard` (ftr-logo-icon 'zb' + ftr-logo-text 'zinc-baby') and a tagline paragraph. Two nav columns rendered from static arrays: `featureLinks` (Dashboard, Meal Planner, Sleep Tracker, Vaccines, Growth Chart, AI Chat mapped to their routes) and `accountLinks` (Profile, Settings, Sign Up, Log In). Bottom bar uses `new Date().getFullYear()` for dynamic copyright year, plus three legal anchor links (Privacy Policy, Terms of Service, Cookie Policy) separated by `ftr-legal-separator` spans. Import from `../styles/Footer.css`.

As a frontend developer, implement the SignupHero section for the Signup page. Uses `useRef` for `canvasRef`, `headlineRef`, and `subRef`. Implements a canvas-based floating particle system via `drawParticles(canvas)` — spawns 28 particles with randomized positions, velocities, alpha, and colors (`74,144,226` blue or `233,78,119` pink), looping via `requestAnimationFrame`. A `ResizeObserver` on the canvas parent restarts the particle system on resize. GSAP animates the headline (`headlineRef`) with `fromTo` y:24→0 opacity:0→1 (power3.out, 0.9s, delay 0.15s) and subtitle (`subRef`) y:18→0 (power2.out, 0.8s, delay 0.38s), followed by a breathing yoyo loop (`y: -3`, 3.5s, sine.inOut, repeat -1). Renders `featurePills` array (Meal Planner, Sleep Tracker, Vaccine Alerts, Growth Charts, AI Assistant) and `nurseryIcons` array as decorative elements. Imports `gsap` and `../styles/SignupHero.css`.

As a frontend developer, implement the SignupFormContainer section for the Signup page. This is the most complex section — a multi-field signup form using `useState` and `useCallback`. Includes custom inline SVG icon components: `EyeIcon` (open/closed toggle), `CheckIcon`, `MailIcon`, `LockIcon`, `UserIcon`, `GlobeIcon`, and `GoogleIcon` (Google brand SVG paths with #4285F4/#34A853 fills). Form fields include email, password (with show/hide toggle via `EyeIcon`), name, and country selector populated from a `COUNTRIES` array (24 countries + Other). Renders a Google OAuth sign-in button with `GoogleIcon`. Includes client-side validation state, password strength indicator, and a terms/privacy checkbox. On submission renders a success state with `CheckIcon`. Imports `../styles/SignupFormContainer.css`.

As a frontend developer, implement the SignupSocialProof section for the Signup page. Uses `useRef` for `rootRef` and `useState` for `isVisible`, `cardsVisible` (array of 3 booleans), `testimonialVisible`, and `avatarGroupVisible`. An `IntersectionObserver` on `rootRef` triggers visibility state changes on scroll-into-view. Renders 3 animated stat cards from `STATS` array: 24800+ families, 4.9 rating, 1.2M+ meals — each using a `CountUpStat` child component that runs a GSAP tween (`gsap.to(obj, { val: stat.target, duration: 2.2, ease: 'power2.out' })`) with `onUpdate` updating `displayVal` via `useState`. `formatNumber` utility formats values as `M+`, localized integers, or decimals. `StarRating` component staggers 5 stars visible via `setTimeout` (300ms + i*120ms). `AVATARS` array renders 6 avatar initials with brand colors. Imports `gsap` and `../styles/SignupSocialProof.css`.

As a frontend developer, implement the SignupFooter section for the Signup page. Reuses the shared Footer component (may already exist from Landing/Login pages). Renders brand logo (`ftr-logo`) with `zb` icon and `zinc-baby` text linking to `/Dashboard`, plus a tagline paragraph. Two nav columns: `featureLinks` (Dashboard, Meal Planner, Sleep Tracker, Vaccines, Growth Chart, AI Chat) and `accountLinks` (Profile, Settings, Sign Up, Log In). Bottom bar renders dynamic copyright year via `new Date().getFullYear()` and legal links for Privacy Policy, Terms of Service, and Cookie Policy with `ftr-legal-separator` dots. Imports `../styles/Footer.css`.

As a frontend developer, implement the OnboardingHeader section for the Onboarding page. This component renders a sticky top bar with: (1) a back button using window.history.back() or fallback to '/Onboarding', (2) a centered logo ('🍼 zinc-baby' linking to '/Landing') with a step indicator showing 'Step 2/8' abbreviated and 'Step 2 of 8 — Your Profile' in full, (3) an exit/menu button with a three-dot SVG icon that toggles a dropdown menu with backdrop overlay. GSAP animates the progress fill bar from 0% to progressPct% (power2.out, 0.9s, 0.3s delay) using progressFillRef. State includes menuOpen (useState), refs for progressFillRef and rootRef. CSS classes use 'oh-' prefix. Note: this is the first section of the Onboarding page and should depend on SignupNavbar task to chain page flow.

As a backend developer, implement FastAPI endpoints under /api/v1/meals: POST /meals/plans (generate or create meal plan for a child_id and date), GET /meals/plans (list plans with date range filter), GET /meals/plans/{plan_id}, PUT /meals/plans/{plan_id}, DELETE /meals/plans/{plan_id}. Sub-endpoints: GET /meals/recommendations?child_id&date (AI-driven age-appropriate meal suggestions via LiteLLM/GPT), POST /meals/templates (save meal as template), GET /meals/templates, DELETE /meals/templates/{id}. Each meal record stores: meal_type, name, ingredients, portion, prep_time, allergy_warnings, nutrition macros (protein, fat, carbs, fiber, iron, calcium, vitamin_d). Note: MealPlannerGrid (3c05e6af), MealPlannerNutrition (a0e7e15e), ChildProfileBar (a100d9cb) depend on this.

As a backend developer, implement FastAPI endpoints under /api/v1/sleep: POST /sleep/entries (log sleep with child_id, bedtime, wake_time, quality, notes, tags array), GET /sleep/entries?child_id&start_date&end_date (paginated list), GET /sleep/entries/{entry_id}, PUT /sleep/entries/{entry_id}, DELETE /sleep/entries/{entry_id}. Analytics endpoints: GET /sleep/insights/{child_id} (returns AI-generated insights: best_night, consistency_score, streak, recommendations via LiteLLM), GET /sleep/stats/{child_id}?range=7d|30d (aggregated avg duration, quality scores, weekly data array). Note: SleepTrackerLogEntry (1e76e440), SleepTrackerHistory (2e9c77a2), SleepTrackerInsights (5e92e683), SleepTrackerChart (90abbb90) depend on this.

As a backend developer, implement FastAPI endpoints under /api/v1/vaccines: GET /vaccines/schedule/{child_id} (returns full CDC-based schedule computed from child's birthdate: upcoming, completed, overdue), POST /vaccines/completed (record administered vaccine with child_id, vaccine_id, date, provider, dosage, cert_url), GET /vaccines/completed/{child_id}, PUT /vaccines/completed/{record_id}, GET /vaccines/upcoming/{child_id} (next due vaccines with urgency flags), POST /vaccines/reminders (set reminder channels/timing preferences), GET /vaccines/reminders/{child_id}, PUT /vaccines/reminders/{child_id}. Vaccine master data seeded from CDC schedule (HepB, DTaP, PCV15, MMR, Varicella, HepA, etc.). Note: UpcomingVaccines (04593736), CompletedVaccines (35a97d92), VaccineTimeline (bb7fc545), VaccinesHeader (5d7f5c05) depend on this.

As a backend developer, implement FastAPI endpoints under /api/v1/growth: POST /growth/measurements (record weight/height/head_circumference with child_id, date, type, value, unit, notes), GET /growth/measurements/{child_id}?metric=weight|height|head&range=3m|6m|12m|all (filtered time-series), PUT /growth/measurements/{record_id}, DELETE /growth/measurements/{record_id}. Computed endpoints: GET /growth/percentiles/{child_id} (calculates P3/P50/P97 WHO reference bands against child's data by age), GET /growth/milestones/{child_id} (detected milestones: doubled birth weight, percentile crossings), GET /growth/insights/{child_id} (AI narrative insights via LiteLLM referencing specific values). Note: GrowthChartMain (974f5a62), GrowthChartMetricsSummary (d67f3538), GrowthChartMilestones (deb646ca), GrowthChartInsights (29b8d66a) depend on this.

As a backend developer, implement FastAPI endpoints under /api/v1/chat: POST /chat/messages (accepts child_id, message text, attachments; routes to LiteLLM with GPT; streams or returns AI response with context about child's profile, allergies, age, recent sleep/meal/growth data injected as system prompt), GET /chat/history?child_id&limit&offset (paginated message history), DELETE /chat/history/{child_id} (clear conversation). System prompt builder pulls child profile + recent health data to provide personalized responses. POST /chat/recommendations (save AI recommendation to child record). Implement token streaming via SSE or WebSocket for real-time typing indicator. Note: AIChatConversationArea (ad1c89ac), AIChatInputBar (7a8ac536), AIChatHeader (d4f4ca1e) depend on this.

As a frontend developer, implement the OnboardingWelcome section for the Onboarding page. This section renders a full Three.js/React Three Fiber scene via @react-three/fiber Canvas containing a ParentBabyScene group. The scene includes: a parent figure (torso CylinderGeometry, head SphereGeometry, hair half-sphere, arms as CapsuleGeometry raised to hold baby), a baby figure (smaller sphere head, swaddle cylinder, bonnet) all animated via useFrame with sinusoidal position/rotation offsets (parent floats at 0.8Hz, baby at 1.2Hz). Floating heart meshes (3 instances) and star meshes animate position.y and opacity in useFrame loops with per-instance phase offsets. A ground shadow uses EllipseGeometry with opacity 0.12. GSAP animates the text/CTA overlay entrance (opacity 0 to 1, y 30 to 0). The welcome copy and a 'Get Started' CTA sit outside the Canvas in a CSS overlay.

As a frontend developer, implement the OnboardingProfileForm section for the Onboarding page. This form section includes: (1) a full name field with validateName() (min 2 chars, required), (2) an email field with validateEmail() (regex pattern), (3) a relationship selector grid showing 6 emoji-labeled options (Parent, Mother, Father, Grandparent, Nanny, Guardian) with single-select state. State: name, email, relationship, nameTouched, emailTouched, relTouched (all useState). Inline SVG icon components — IconUser, IconMail, IconCheck (green stroke), IconAlert, IconInfo, IconLock (blue) — render as field prefix/suffix indicators. Validation errors appear on blur (touched state). A privacy note uses IconLock icon with blue accent. CSS classes use 'opf-' prefix. The form should show real-time validation feedback and a submit button that is disabled until all fields are valid.

As a frontend developer, implement the OnboardingChildDetails section for the Onboarding page. This section includes a fully custom BirthdateCalendar sub-component built without any date-picker library: getDaysInMonth/getFirstDayOfMonth/buildCalendarCells helpers generate a 7-column grid with null-padded empty cells. Calendar has prev/next month navigation (ChevronLeft/ChevronRight from lucide-react), highlights isSelected() and isToday() days with distinct CSS classes ('ocd-cal-day-selected', 'ocd-cal-empty'). Main form state (useCallback/useState): selectedDate object {year, month, day}, plus child name text input, gender radio buttons, blood type selector, photo upload (Camera icon trigger), and an optional notes textarea. formatDate() formats the selected date as 'Month DD, YYYY'. CSS classes use 'ocd-' prefix. The Baby, Calendar, User, Camera, Check, X icons are imported from lucide-react.

As a frontend developer, implement the OnboardingAllergiesPreferences section for the Onboarding page. This section renders two toggle grids: (1) ALLERGENS array (9 items: dairy, nuts, peanuts, gluten, shellfish, eggs, soy, fish, sesame) each with emoji, name, and a warn boolean that triggers a warning indicator; (2) DIETS array (6 items: vegetarian, vegan, halal, kosher, low_sugar, organic) each with emoji, name, and desc subtitle. State: selectedAllergens[], selectedDiets[], customInput string, customAllergens[] (all useState). toggleAllergen() and toggleDiet() functions use filter/spread pattern. A custom allergen input supports Enter key (handleInputKeyDown) and add/remove (addCustomAllergen/removeCustomAllergen). A selected allergens summary row (selectedAllergenObjects + customAllergens) with remove-X buttons renders when hasAnySelected is true. Step badge shows 'Step 3 of 8'. CSS classes use 'oap-' prefix.

As a frontend developer, implement the OnboardingSleepRoutine section for the Onboarding page. This section features: (1) two native time inputs for bedtime (default '19:30') and wakeTime (default '06:30') with computeSleepDuration() helper that calculates overnight hours/minutes crossing midnight; (2) NAP_COUNTS pill selector ('0','1','2','3','4+') and NAP_DURATIONS pill selector (7 options from '15 min' to '2+ hours'); (3) SLEEP_PREFERENCES toggle cards (5 items: cosleeping, whitenoise, nightlight, swaddling, pacifier) each with emoji, name, hint, and defaultOn state managed in a prefs map (useState with initializer). GSAP animates preference cards via cardRefs.current array with staggered fromTo (opacity 0→1, y 20→0, stagger 0.12, delay 0.3). Decorative stars array (7 items with top/left/size/delay) render as absolute-positioned CSS animated elements. CSS classes use 'osr-' prefix.

As a frontend developer, implement the OnboardingNotificationPreferences section for the Onboarding page. This section renders 4 notification cards from the NOTIFICATIONS array (vaccine, meal, sleep, ai) each with: icon emoji, iconClass for color theming, title, desc, frequencies string array, defaultFreq, and defaultEnabled. State: enabled map (id→boolean) and frequencies map (id→string), both initialized from NOTIFICATIONS defaults using useState initializers. A master toggle row computes allEnabled (every notification enabled) and handleMasterToggle() sets all to !allEnabled. Individual toggleItem(id) flips single items. Each card shows a frequency pill selector (setFreq) that is disabled when the notification is off. Step badge shows 'Step 5 of 8'. CSS classes use 'onp-' prefix with modifier classes like 'onp-icon-wrap--vaccine', 'onp-icon-wrap--meal', etc.

As a frontend developer, implement the OnboardingOfflineSync section for the Onboarding page. This section includes: (1) a TOGGLES array (4 items: auto_sync, local_storage, analytics, backup) each with label, desc, optional tag ('Recommended'/'Privacy'), tagType, and defaultOn; state managed as a toggles map initialized from defaults; (2) a SyncFlowDiagram inline SVG (viewBox='0 0 480 160') showing Device→Offline Storage→Sync Engine→Cloud nodes connected by dashed/solid arrows with CSS keyframe animation 'oos-node-glow' on circle elements, with an isOnline prop controlling arrow colors; (3) GSAP entrance animations applied to section elements via useEffect with refs; (4) lucide-react icons: Shield, RefreshCw, Database, Lock, ChevronRight, Wifi, WifiOff, CheckCircle used in feature description rows. CSS classes use 'oos-' prefix.

As a frontend developer, implement the OnboardingFooter section for the Onboarding page. This is a sticky bottom action bar accepting props: currentStep (0-based), totalSteps (default 7), onNext, onBack, onSkip, nextLabel (auto-resolves to 'Finish Setup' on last step via isLastStep check, else 'Next'), backLabel, skipLabel, loading (boolean — shows spinner and disables CTA), disabled, feedback ({type: 'success'|'error'|'loading', message: string}|null). Renders: (1) a floating obf-feedback toast with obf-feedback-spinner for loading type, '✓' icon for success, '!' for error, conditionally visible via 'obf-feedback--visible' class; (2) left side with Back button (hidden on step 0 or if onBack missing) and Skip link (hidden if onSkip missing); (3) center dot-progress indicator — dots array maps to 'obf-dot', 'obf-dot--active', 'obf-dot--completed' classes; (4) right CTA button with loading spinner. CSS classes use 'obf-' prefix.

As a frontend developer, implement the TopBar (Navbar) section for the Dashboard page. This reuses the shared Navbar component (may already exist from Login/Signup/Onboarding pages). The component uses useState for menuOpen and scrolled states, useEffect for scroll listener (sets nb-scrolled class when scrollY > 8) and body overflow lock when mobile menu is open. Renders nb-root nav with nb-inner containing: logo link with Baby icon and 'zincbaby' brand text, desktop nav ul (nb-nav) iterating navPages array (Dashboard, Meal Planner, Sleep, Vaccines, Growth, AI Chat, Settings with lucide icons), and mobile drawer with mobilePages array (9 items with individual bg/color tokens). Imports from '../styles/Navbar.css' with 6423 chars of styles.

As a backend developer, implement FastAPI endpoints under /api/v1/notifications: GET /notifications?user_id (list all active notifications), POST /notifications/mark-read/{id}, DELETE /notifications/{id}, DELETE /notifications/clear-all. Preferences: GET /notifications/preferences/{user_id}, PUT /notifications/preferences/{user_id} (stores channels: email/sms/in-app, quiet_hours start/end, notify_days_before, per-type toggles for vaccine/meal/sleep/ai). Background job (APScheduler or Celery) that daily evaluates upcoming vaccines and scheduled meals to generate notification records. Note: VaccineNotifications (3d11aa4a), SettingsNotifications (d79bc64a), RemindersSettings (03b36231), UpcomingReminders (bbaf1890) depend on this.

As a frontend developer, implement the OnboardingReviewSummary section for the Onboarding page. This section renders collapsible SummaryCard sub-components (each with cardRef using GSAP fromTo opacity 0→1, y 20→0 on mount) displaying: PARENT_INFO (name, email, phone, relationship, timezone), CHILD_PROFILE (name, birthdate, age, gender, bloodType, notes), ALLERGIES (allergies[] and dietary[] arrays), SLEEP (bedtime, wakeTime, napCount, napDuration, routine), NOTIFICATIONS (5 items with emoji and enabled boolean), and SYNC_ITEMS (4 items with emoji and enabled boolean). Each SummaryCard has open/setOpen state for collapse/expand, a CollapseIcon SVG that rotates (ors-open/ors-closed classes), an EditIcon SVG, and an edit link pointing to '/Onboarding'. An EditIcon and CollapseIcon are inline SVG functional components. CSS classes use 'ors-' prefix.

As a frontend developer, implement the SidebarNav section for the Dashboard page. Uses useState for collapsed, mobileOpen, and activePath states; useEffect reads window.location.pathname to set initial active route. Renders: mobile hamburger trigger (sb-mobile-trigger with Menu icon), overlay div (sb-overlay with sb-overlay-visible class toggle), and aside element with dynamic classes (sb-sidebar, sb-collapsed, sb-mobile-open). Sidebar contains sb-brand with 'zb' logo and 'zinc-baby / Parenting Assistant' text, ChevronLeft collapse toggle button, and nav with 3 navGroups (Overview: Dashboard+Child Profiles; Tracking: Sleep/Meal/Vaccines/Growth with Vaccines having badge '2'; Support: AI Chat+Settings). handleNavClick sets activePath and closes mobile menu. Imports from '../styles/Sidebar.css' with 7612 chars of styles.

As a frontend developer, implement the DashboardWelcomeBanner section for the Dashboard page. Uses useState and useEffect with a 60-second setInterval to reactively update greeting (getTimeGreeting) and timeIcon (getTimeIcon) based on current hour brackets (morning/afternoon/evening/night). Renders section.dwb-root with two decorative bg-circle divs, dwb-inner containing: dwb-time-badge with animated dwb-time-dot and time emoji, h1.dwb-greeting with hardcoded 'Sarah!' in dwb-greeting-name span, dynamic motivational message paragraph (dwb-motivational-highlight span for key phrases), 3 stat pills (dwb-stat-accent/primary/pink variants) showing Meals Today/Last Sleep/Upcoming counts, and a CTA button. Imports from '../styles/DashboardWelcomeBanner.css'.

As a frontend developer, implement the ChildProfileCard section for the Dashboard page. Uses useState for selectedId (default 'mia'), dropdown open/close state, and useRef for outside-click detection. Contains childProfiles array (Mia/Leo/Zoe Thompson) with dob, gender, allergies, sleepRoutine, avatarGradient fields. Implements utility functions: calcAge/calcAgeFull (converts DOB to yrs/mo/wk display), formatDOB (locale string), nextBirthday (counts days to next birthday with urgency labels). Renders a profile selector dropdown showing initials avatars, and an expanded card view with avatar gradient, age badge, DOB, gender pill, allergy tags (AlertTriangle icon for allergen warnings), sleep routine (Clock icon), and birthday countdown (Calendar icon). Edit2 icon triggers edit action. Imports from '../styles/ChildProfileCard.css' with 8050 chars of styles.

As a frontend developer, implement the QuickStatsOverview section for the Dashboard page. Uses useState for spinning (refresh animation) and stats (built from buildStats() factory). Stats array contains 6 cards: sleep (7h 42m / Moon icon / qso-card--primary), meal (2h ago / UtensilsCrossed / qso-card--secondary), vaccine (12 days / Syringe / qso-card--critical with warn badge), growth (72.4 cm / Ruler / qso-card--success), chat (14 interactions / MessageCircle), and sync (Wifi / isSync:true). Each card has colorClass, valueClass, href, linkLabel, progress bar (value + color), and badge type (ok/warn/alert/info). handleRefresh triggers 800ms spinning state on RefreshCw icon. badgeClass() maps badge types to CSS modifier classes. Imports from '../styles/QuickStatsOverview.css' with 6483 chars.

As a frontend developer, implement the RecentActivityFeed section for the Dashboard page. Uses useState for activeFilter (default 'all'). ALL_ACTIVITIES array contains 7 entries across types: sleep (Moon icon), meal (UtensilsCrossed), vaccine (Syringe), growth (TrendingUp), ai (MessageCircle), profile (Baby). FILTER_OPTIONS array (all/sleep/meal/vaccine/growth) drives pill-style filter buttons. Filtered list is derived by type match. Renders section.raf-root with raf-inner containing: header with Activity icon, title 'Recent Activity', subtitle, and 'View all' ArrowRight link; filter pill row; activity list where each item shows icon, description, timestamp, tag chip, and ChevronRight detail link. Imports from '../styles/RecentActivityFeed.css' with 6984 chars.

As a frontend developer, implement the UpcomingReminders section for the Dashboard page. Uses useState for reminders (INITIAL_REMINDERS: 4 items — vaccine/meal/sleep/checkup), dismissed map, toastMsg, and toastVisible. useCallback for showToast (2800ms auto-hide), handleDismiss (animates out via dismissed state then removes after 380ms), and handleSnooze (dismisses + shows '1 hour' toast). INITIAL_REMINDERS each have stripeColor, iconBg, iconColor, priority (urgent/moderate/routine). ReminderIcon sub-component maps icon type strings to Syringe/Utensils/Moon/Calendar/Bell lucide icons. badgeLabels/badgeClasses maps urgency to ur-badge CSS variants. Renders cards with left color stripe, icon with bg tint, title, date/time (Calendar+Clock icons), note text, priority badge, dismiss (×) and snooze (Bell) action buttons, and toast notification overlay. Imports from '../styles/UpcomingReminders.css' with 7458 chars.

As a frontend developer, implement the QuickActionButtons section for the Dashboard page. Uses useRef for btnRefs map keyed by action id. Actions array contains 4 items: Log Sleep Entry (Moon, variant='sleep', pulse=true), Add Meal (UtensilsCrossed, variant='meal'), Check Vaccines (Syringe, variant='vaccines'), View Growth Chart (TrendingUp, variant='growth', icon color '#1e3a5f'). handleRipple creates a span.qab-ripple element positioned at click coordinates relative to button bounds, appends to button, and removes after 520ms. Pulse items render qab-pulse-dot and qab-pulse-ring spans. Each action renders as an anchor (qab-btn qab-btn--{variant}) with icon wrap, label/sublabel content div, and ArrowUpRight arrow span. Imports from '../styles/QuickActionButtons.css' with 5869 chars.

As a frontend developer, implement the SyncStatus section for the Dashboard page. Uses useState for syncState (default 'synced'), lastSync (Date), and pendingCount. useEffect watches syncState: when 'syncing', sets 3500ms timeout to auto-transition to 'synced' and update lastSync. STATE_CONFIG maps 3 states (synced/syncing/offline) to label, subLabel, and stateClass CSS modifier. SyncStatusIcon sub-component renders CheckCircle2 for synced, spinning RefreshCw (ss-spin wrapper) for syncing, WifiOff for offline. formatTimestamp formats Date to '12:34 PM' string for 'Last sync: ...' display. handleStateChange updates state and sets pendingCount (3 for syncing, 5 for offline, 0 for synced). Renders div.ss-root with ss-toast div (role=status, aria-live=polite), icon wrap, ss-pulse-dot, ss-divider, text group (status + sub-text), optional ss-pending-badge, and dev ss-controls for state simulation. Imports from '../styles/SyncStatus.css' with 4439 chars.

As a frontend developer, implement the BottomBar (Footer) section for the Dashboard page. This reuses the shared Footer component (may already exist from Login/Signup/Onboarding pages). Renders footer.ftr-root with ftr-inner containing: brand block (ftr-logo with 'zb' icon + 'zinc-baby' text, ftr-tagline paragraph), link columns group with two nav elements — featureLinks (Dashboard/MealPlanner/SleepTracker/Vaccines/GrowthChart/AIChat) and accountLinks (Profile/Settings/Sign Up/Log In), and ftr-bottom bar with dynamic year copyright and ftr-legal links (Privacy Policy, Terms of Service, Cookie Policy) separated by ftr-legal-separator spans. Imports from '../styles/Footer.css' with 3000 chars.

As a frontend developer, implement the ProfileNavbar section for the Profile page. This reuses the shared Navbar component (likely already built for Dashboard/Onboarding pages). The component uses useState for menuOpen and scrolled, useEffect to attach a passive scroll listener that toggles the nb-scrolled class when window.scrollY > 8, and a second useEffect to lock document.body.style.overflow when the mobile menu is open. Desktop nav renders navPages (Dashboard, Meal Planner, Sleep, Vaccines, Growth, AI Chat, Settings) as anchor links with lucide-react icons. Mobile nav renders mobilePages with per-item bg/color tokens. Imports Navbar.css. Depends on Dashboard TopBar task to establish page-level chain.

As a frontend developer, implement the Navbar section for the SleepTracker page. This component may already exist from the Dashboard or Profile pages. It uses `useState` for `menuOpen` and `scrolled`, `useEffect` for scroll listener (`window.scrollY > 8` triggers `nb-scrolled` class) and body overflow lock when mobile menu opens. Renders `navPages` array (7 items: Dashboard, Meal Planner, Sleep, Vaccines, Growth, AI Chat, Settings) as desktop nav links, and `mobilePages` array (9 items with bg/color tokens) as a mobile overlay menu. Uses Lucide icons: Baby (logo), LayoutDashboard, UtensilsCrossed, Moon, Syringe, TrendingUp, MessageCircle, Settings, LogIn, UserPlus, BookOpen. Imports `Navbar.css`. Verify the Sleep nav link highlights as active when on `/SleepTracker`.

As a frontend developer, implement the shared Navbar section for the MealPlanner page. This component (Navbar.css) is shared across pages and may already exist from SleepTracker or Profile pages — verify before duplicating. The navbar uses useState for menuOpen and scrolled, useEffect for scroll listener (window.scrollY > 8 triggers nb-scrolled class) and body overflow lock when mobile menu opens. Desktop nav renders navPages array (7 items: Dashboard, Meal Planner, Sleep, Vaccines, Growth, AI Chat, Settings) with lucide-react icons. Mobile menu renders mobilePages array (9 items) with colored icon backgrounds. Logo links to /Dashboard with Baby icon and 'zincbaby' brand text. Hamburger button toggles menuOpen state for the mobile drawer overlay.

As a frontend developer, implement the shared Navbar section for the GrowthChart page. This component (Navbar.jsx) uses useState for menuOpen and scrolled states, useEffect to attach a passive scroll listener that sets nb-scrolled class when scrollY > 8, and a second useEffect to lock body scroll when mobile menu is open. Desktop nav renders navPages array (Dashboard, Meal Planner, Sleep, Vaccines, Growth, AI Chat, Settings) with lucide-react icons. Mobile drawer renders mobilePages array with colored icon backgrounds. Logo links to /Dashboard with Baby icon from lucide-react. Note: this Navbar component likely already exists from SleepTracker and MealPlanner pages — reuse or verify the existing component at styles/Navbar.css.

As a frontend developer, implement the Navbar section for the Vaccines page. This component (Navbar.css) is likely already created from prior pages — verify and reuse if available. It uses useState for menuOpen and scrolled, useEffect for scroll listener (window.scrollY > 8 toggles nb-scrolled class) and body overflow lock when mobile menu is open. Renders nb-root nav with nb-inner containing: Baby icon logo linking to /Dashboard with nb-logo-icon and nb-logo-text, desktop ul.nb-nav mapping navPages (Dashboard, Meal Planner, Sleep, Vaccines, Growth, AI Chat, Settings) each as nb-nav-link anchors, and a mobile hamburger toggling a full-screen overlay with mobilePages grid (9 items with individual bg/color tokens per item including Profile, Onboarding). Lucide icons: Baby, LayoutDashboard, User, UtensilsCrossed, Moon, Syringe, TrendingUp, MessageCircle, Settings, LogIn, UserPlus, BookOpen.

As a frontend developer, implement the shared Navbar section for the AIChat page. Note: this component likely already exists from previous pages (GrowthChart, Vaccines). Build the Navbar with: (1) navPages array (7 items: Dashboard, Meal Planner, Sleep, Vaccines, Growth, AI Chat, Settings) with Lucide icons rendered as desktop nav links; (2) mobilePages array (9 items) with per-item bg/color theming for the mobile drawer; (3) useState for menuOpen and scrolled; (4) useEffect scroll listener (passive) setting scrolled when window.scrollY > 8 to toggle nb-scrolled class; (5) useEffect locking document.body.style.overflow='hidden' when menuOpen; (6) Baby icon logo linking to /Dashboard; (7) Mobile hamburger toggling full-screen overlay drawer. Import Navbar.css.

As a frontend developer, implement the SettingsNavbar section for the Settings page using the shared Navbar component (may already exist from previous pages). Uses `useState` for `menuOpen` and `scrolled`, and two `useEffect` hooks: one attaches a passive scroll listener toggling `nb-scrolled` class on `nav.nb-root` when `window.scrollY > 8`, the other locks `document.body.style.overflow` to `hidden` when mobile menu is open. Desktop nav renders `navPages` array (7 items: Dashboard through Settings) as anchor links. Mobile nav renders `mobilePages` array (9 items including Profile and Onboarding) with per-item `bg` and `color` tokens. Auth CTAs use LogIn and UserPlus lucide icons. Import from `../styles/Navbar.css`. Component may already exist from Landing/Login pages.

As a frontend developer, implement the OnboardingSuccessConfirmation section for the Onboarding page. This section has two visual layers: (1) a React Three Fiber Canvas rendering BabyOrb — a Sphere (args=[0.72,64,64]) with MeshDistortMaterial (color='#A6C8F0', emissive='#4A90E2', distort=0.35, speed=2.5, opacity=0.88) animated via useFrame with sinusoidal position.y (0.8Hz) and continuous rotation.y, using Sphere and MeshDistortMaterial from @react-three/drei; (2) a 2D HTML5 Canvas confetti system via useConfetti(canvasRef) hook — creates 110 PIECES with random x/y/w/h/color/vx/vy/angle/spin/opacity, animates via requestAnimationFrame for DURATION=5000ms with fade-out via globalAlpha * (1 - elapsed/DURATION), colors include 7 hex values. GSAP animates the success heading, subtext, and CTA buttons entrance. CSS classes use 'osc-' prefix.

As a frontend developer, implement the ProfileHero section for the Profile page. The component renders a hero section with three decorative CSS background blobs (ph-bg-blob-1/2/3). It displays a static childProfile object (name: 'Mia Johnson', dob, ageMonths: 26, height, weight, vaccines: 8, bloodType: 'A+'). The avatar area uses ph-avatar-ring/inner with a baby emoji and a Camera icon button (ph-avatar-badge) for photo upload affordance. A quickStats array drives four ph-stat-card elements (Height, Weight, Vaccines, Blood) rendered as a role='list'. Uses useState for editHovered to animate the Pencil icon Edit Profile button. Imports lucide-react Camera and Pencil. Imports ProfileHero.css.

As a frontend developer, implement the BasicInfoSection for the Profile page. The component manages a form via useState(initialForm) with fields: name ('Lily Chen'), dob ('2023-03-15'), gender ('Female'), bloodType ('O+'). Uses useRef for toastTimer to debounce save toast lifecycle. handleSave triggers a bi-toast success notification that auto-hides after 3s with a toastHiding fade-out animation 400ms before unmount. handleCancel resets form to initialForm and clears toast state. The bi-form-grid renders: a full-width text input for Full Name, a date input for DOB, a gender select from GENDERS array, and a blood type select from BLOOD_TYPES array. Header displays User icon, 'Basic Information' heading, and an Edit3 badge. Imports BasicInfoSection.css.

As a frontend developer, implement the HealthAllergySection for the Profile page. State includes: selectedPresets (['dairy','nuts']), customInput, customTags (['Penicillin']), severity ('moderate'), healthNotes (textarea, MAX_NOTES=500), doctorName, doctorPhone, doctorClinic, alertDismissed, and saved. ALLERGY_PRESETS (10 items with emoji) render as toggleable chips via togglePreset(). SEVERITY_OPTIONS (mild/moderate/severe/critical) render as radio-style selectors with severity-specific CSS classes (has-sev-mild etc.). A dismissible ShieldAlert banner appears when hasCriticalAllergy && !alertDismissed. Custom allergy tags are added via Enter key (handleCustomKeyDown) or Plus button, removed via X button (removeTag). Doctor info fields (name, phone, clinic) use controlled inputs. handleSave triggers a 2200ms saved toast. handleCancel resets all state to initial values. Imports AlertTriangle, ShieldAlert, X, Plus, Check, Heart, Stethoscope from lucide-react. Imports HealthAllergySection.css.

As a frontend developer, implement the SleepRoutineSection for the Profile page. State includes: bedtime ('20:00'), wakeTime ('07:00'), naps array (two entries with id/start/end), notes textarea, activeTags (['White noise machine','Blackout curtains','Cool room (68-72°F)']), saving, and saved. calcDuration() computes overnight sleep span handling midnight crossover. getDurationNote() returns an age-appropriate guidance string for <10h, 10-14h, or >14h. A global napIdCounter ensures unique nap IDs. addNap/removeNap/updateNap use useCallback. ENV_TAGS (8 items with emoji) render as toggleable environment chips via toggleTag(). Nap entries render with start/end time inputs and X remove buttons. The save flow sets saving=true for a simulated async delay then saved=true. Imports Moon, Sun, Clock, Plus, X, Info, Check, Loader2, Star from lucide-react. Imports SleepRoutineSection.css.

As a frontend developer, implement the DietaryPreferencesSection for the Profile page. State includes: dietType ('omnivore'), feedingSchedule ('breast'), favoriteTags (['Mashed banana','Sweet potato','Avocado']), avoidTags (['Peanuts','Shellfish']), favoriteInput, avoidInput, showToast. dietTypes (6 options with emoji/name/note) render as a card grid with active highlight on dietType selection. scheduleOptions (breast/bottle/solids with icons) render as toggleable cards for feedingSchedule. Two tag-input areas (favorites/avoid) support Enter or comma key to add tags, Backspace to remove last tag, and X buttons per tag. favoriteSuggestions and avoidSuggestions render as clickable chips that append to their respective lists. useRef for favoriteInputRef/avoidInputRef. Save triggers showToast for confirmation. Imports Utensils, Heart, AlertTriangle, Clock, X, Plus, Check from lucide-react. Imports DietaryPreferencesSection.css.

As a frontend developer, implement the MedicalHistorySection for the Profile page. State includes: pastIllnesses (multi-line textarea with two initial entries), vaccinationNotes (textarea), medications array (initialMedications: Vitamin D3 Drops + Iron Supplement with id/name/dosage), newMedName input, showToast, nextId counter. handleAddMedication (useCallback) trims newMedName, appends to medications with incrementing nextId, clears input. handleRemoveMedication (useCallback) filters by id with a Trash2 icon button. Enter key in the new-med input triggers add via handleKeyDown. immunizationSummary (5 items: BCG/Hepatitis B/DTaP done; MMR/Varicella upcoming) renders with CheckCircle (done) and Clock (upcoming) status icons. handleSave triggers a 3s showToast. handleCancel resets all state to initial values. Imports ClipboardList, Pill, Syringe, CheckCircle, Clock, Plus, Trash2, Save, X, ChevronRight, FileText from lucide-react. Imports MedicalHistorySection.css.

As a frontend developer, implement the EmergencyContactSection for the Profile page. State includes: primaryContact ({name, relationship, phone, email} all empty), secondaryContact (same shape), showSecondary (false), saved. RELATIONSHIP_OPTIONS (10 values including parent/grandparent/nanny/pediatrician) populate a select dropdown. handlePrimaryChange and handleSecondaryChange update nested contact fields and clear saved state on edit. handleAddSecondary sets showSecondary=true; handleRemoveSecondary sets it false and clears secondaryContact. handleSave sets saved=true with a 3s timeout reset. handleCancel resets both contacts and showSecondary to initial state. The primary card has a 'Required' badge; secondary card is conditionally rendered with a Minus remove button. Both cards render a 2x2 form grid (name, relationship select, phone, email). Save/Cancel buttons at bottom. Imports Phone, UserCheck, Plus, Minus, CheckCircle, Save, X from lucide-react. Imports EmergencyContactSection.css.

As a frontend developer, implement the ProfileFooter section for the Profile page. This reuses the shared Footer component (likely already built for Dashboard/Onboarding pages). The component is a static functional component with no state. It renders a ftr-root footer with: a brand column containing the 'zb' logo icon, 'zinc-baby' text, and a tagline about AI-powered parenting. Two nav columns — featureLinks (Dashboard, Meal Planner, Sleep Tracker, Vaccines, Growth Chart, AI Chat) and accountLinks (Profile, Settings, Sign Up, Log In) — rendered as anchor lists. A ftr-bottom bar with dynamic copyright year via new Date().getFullYear() and legal links (Privacy Policy, Terms of Service, Cookie Policy). Imports Footer.css.

As a frontend developer, implement the SleepTrackerHeader section for the SleepTracker page. Uses `useState` for `selectedChild` (default `'liam'`), `useRef` for `rootRef`, and a GSAP entrance animation (`gsap.fromTo` on `.sth-animate-in` elements: opacity 0→1, y 12→0, stagger 0.08, ease power2.out). Renders a breadcrumb nav (Home icon → Dashboard link → ChevronRight → 'Sleep Tracker' current), a heading group with Moon icon and `<h1>Sleep <span>Tracker</span></h1>`, a subtitle referencing `activeChild.name`, and a child selector control displaying the active child's emoji, name, and age. Children array has three entries: Liam (8 months), Sophie (2 years), Noah (4 years). Also shows a formatted date via `getFormattedDate()` using `toLocaleDateString`. Imports `SleepTrackerHeader.css` and Lucide icons Moon, ChevronRight, Home, Calendar.

As a frontend developer, implement the SleepTrackerQuickStats section for the SleepTracker page. Displays four stat cards in a `.qs-grid`: (1) Sleep Duration (9h 24m, animated progress bar via `barDurationRef` GSAP fromTo width 0%→DURATION_PCT%), (2) Quality Score (4.2/5 rendered via `renderStars()` with full/half/empty ★ spans), (3) Weekly Average (8h 45m, animated bar via `barAvgRef`), and (4) Trend card with directional arrow config (up/down/flat via `TREND_CONFIG`). Also renders a sparkline using 7 bar elements whose heights animate from `4px` to `${SPARKLINE_DATA[i]}%` via staggered GSAP (delay 0.5 + i*0.06). Uses `useRef` for `barDurationRef`, `barAvgRef`, `sparkRefs`. GSAP context cleanup via `ctx.revert()`. Imports Lucide icons Moon, Star, BarChart2, TrendingUp. Imports `SleepTrackerQuickStats.css`.

As a frontend developer, implement the SleepTrackerLogEntry section for the SleepTracker page. Manages a form via `useState` with fields: `bedtime` (default '20:00'), `wakeTime` (default '06:30'), `quality` (default 'happy'), `notes` (string), `tags` (array). Computes live sleep duration via `calcDuration()` which handles overnight wrap-around (adds 24*60 if wake <= bed). Renders three quality toggle buttons from `QUALITY_OPTIONS` (happy/neutral/tired with emoji: 😊/😐/😴) and four tag chips from `TAG_OPTIONS` (teething 🦷, sick 🤒, travel ✈️, growth_spurt 📈) with toggle selection. Includes form validation (`validate()`) setting `errors` state for missing bedtime/wakeTime. On submit shows a `submitted` success state for 3500ms. Also implements a `handleQuickLog` that auto-fills bedtime as 8 hours before current time. Uses `useCallback` for all handlers. Imports Lucide icons Moon, Sun, Clock, Smile, Meh, Frown, Tag, FileText, PlusCircle, Zap, RotateCcw, CheckCircle. Imports `SleepTrackerLogEntry.css`.

As a frontend developer, implement the SleepTrackerHistory section for the SleepTracker page. Renders 14 hardcoded sleep log entries from `INITIAL_ENTRIES` (dates May 6–19 2026) using `useState`. Each entry displays: day name, date, bedtime, wake time, `formatDuration()` output (hours/minutes formatted), a quality badge from `QUALITY_META` (excellent/good/fair/poor with icons Star, CheckCircle2, TrendingDown, AlertTriangle), an animated duration bar with percentage fill (`duration / MAX_DURATION * 100`), and optional notes text. Supports inline edit (Pencil icon → editable row state) and delete (Trash2 icon with confirmation). Quality bar fill classes: `sth-duration-bar-fill--excellent`, `--good`, `--fair`, `--poor`. Uses `useState` for entries list and edit state. Imports Lucide icons Moon, Clock, Sunrise, Pencil, Trash2, History, AlertTriangle, CheckCircle2, Star, TrendingDown. Imports `SleepTrackerHistory.css`.

As a frontend developer, implement the SleepTrackerChart section for the SleepTracker page. Renders a fully custom SVG line chart (no chart library) with 30 days of generated sleep data (May 2026, base array of 30 hourly values). Uses `useState` for `tooltip`, `activeIndex`, and `chartSize` (initial 800×300). Uses `useRef` for `containerRef`, `svgRef`, `lineRef`, `areaRef`, `hasAnimated`. Implements a `ResizeObserver` to update `chartSize` responsively. Computes `xScale` and `yScale` via `useCallback` with margin config (top:16, right:16, bottom:48, left:44) and Y range 5–12. Builds SVG `<path>` strings via `buildLinePath()` and `buildAreaPath()` (area closes to Y_MIN baseline). Draws a dashed horizontal target line at `TARGET_HOURS = 9`. Renders interactive dot overlays that set `tooltip` and `activeIndex` on hover. GSAP animates the SVG line path stroke-dashoffset on mount. Imports Lucide icons TrendingUp, Moon. Imports `SleepTrackerChart.css`.

As a frontend developer, implement the SleepTrackerInsights section for the SleepTracker page. Uses `useState` for `insights` (starts with `initialInsights`), `isRefreshing`, `refreshCount`, `timestamp`, and `cardsRefreshing`. The `handleRefresh` callback (via `useCallback`) triggers a two-phase animation: sets `cardsRefreshing` true for 600ms (fade/shimmer effect), then after a second timeout swaps insights by toggling between `initialInsights` and `refreshedInsights` based on `refreshCount % 2`, updates `timestamp` to current time string, and clears `isRefreshing`. Renders four insight cards: (1) Best Night card (date, hours, sleepScore as a percentage bar, note text), (2) Bedtime Consistency card (avgTime, consistency %, streak counter with flame/star badge), (3) Wake Frequency card with a 7-bar mini chart from `weeklyData` array highlighting `bestNight` day, (4) Recommendations list (3 string items). Imports `SleepTrackerInsights.css`.

As a frontend developer, implement the SleepTrackerTips section for the SleepTracker page. Uses `useState` for the selected age group tab (default `'infant'`). Renders four tab buttons from `AGE_GROUPS` array: Newborn (0–3m), Infant (4–12m), Toddler (1–3y), Preschool (3–5y). Each tab maps to `TIPS_BY_AGE[selectedId]` — an array of tip card objects with fields: `accent` (CSS class e.g. `stt-accent-secondary`), `icon` (emoji), `category` label, `title`, `body` (detailed paragraph), `highlight` (callout string), optional `barWidth` (CSS % string for a progress indicator bar) and `barLabel`. Infant tab has 3 cards covering sleep duration, bedtime routine, and drowsy-but-awake technique. Other age groups (newborn, toddler, preschool) have similarly structured 3-card sets. Imports `SleepTrackerTips.css`.

As a frontend developer, implement the SleepTrackerActions section for the SleepTracker page. Renders three action cards from `actionCards` array (export, share, reminder) each with a modifier class (e.g. `sta-card--export`), Lucide icon, title, description, badge (with `badgeIcon`), and a primary action button. Uses `useState` for `toast` ({visible, message, icon}), `modalOpen`, `reminderTime` (default '20:00'), `reminderFreq` (default 'daily'). Uses `useRef` for `cardsRef`, `summaryRef`, `toastTimerRef`. On mount, GSAP animates `.sta-card` elements (opacity 0→1, y 24→0, stagger 0.12), `.sta-summary` (opacity 0→1, y 16→0, delay 0.45), and `.sta-header` (opacity 0→1, y -12→0). The `showToast` callback (via `useCallback`) sets toast visible and auto-dismisses after `TOAST_DURATION = 3000ms` via `toastTimerRef`. Export and Share buttons trigger toast confirmations. Reminder button opens a modal with a time picker, frequency dropdown from `reminderFrequencies` (daily/weekdays/weekends/custom), and save/cancel controls. GSAP ctx cleanup via `ctx.revert()`. Imports Lucide: Download, Share2, Bell, Moon, CheckCircle, FileText, Clock. Imports `SleepTrackerActions.css`.

As a frontend developer, implement the Footer section for the SleepTracker page. This component may already exist from Dashboard or Profile pages. Renders a `<footer class='ftr-root'>` with three regions: (1) Brand block — logo link to `/Dashboard` with `zb` icon span and `zinc-baby` text, plus a tagline paragraph describing the app's AI-powered features; (2) Links group — two `<nav>` columns: Features (6 links: Dashboard, Meal Planner, Sleep Tracker, Vaccines, Growth Chart, AI Chat) and Account (4 links: Profile, Settings, Sign Up, Log In); (3) Bottom bar — dynamic copyright year via `new Date().getFullYear()` and three legal links (Privacy Policy, Terms of Service, Cookie Policy) separated by `ftr-legal-separator` spans. Fully static, no state or effects. Imports `Footer.css`.

As a frontend developer, implement the MealPlannerHeader section (MealPlannerHeader.css). Renders a <header className='mph-root'> with: (1) breadcrumb nav showing Dashboard › Meal Planner links, (2) top row with title group containing UtensilsCrossed icon (size 22) + h1 'Meal Planner' + tagline paragraph with Info icon (size 14) and emphasis span, plus a CTA group with an mph-add-btn anchor linking to /MealPlanner with Plus icon, (3) a quick stats strip using role='list' with three mph-stat-chip items: Calendar 'Today's Plan', Star '4 meals scheduled', Clock 'Next meal in 45 min' separated by mph-stat-sep spans. Static component — no state or animations.

As a frontend developer, implement the ChildProfileBar section (ChildProfileBar.css) with GSAP animations. Uses useState for activeId (default 'mia'), useRef for avatarRef, badgesRef, nameRef. Renders data from a 3-child array (Mia 14mo, Leo 3yr, Zoe 6mo) each with avatarBg gradients, initials, allergies (label+type), and dietary tags. On mount, gsap.fromTo animates '.cpb-root' with opacity 0→1 y -12→0. handleSwitch triggers a gsap.timeline that fades out [avatarRef, nameRef, badgesRef] with opacity 0 x -10 then calls setActiveId and fades back in. Active profile shows cpb-avatar-circle with inline background style, cpb-avatar-online indicator dot, name/age row, allergy badges (AlertTriangle, Leaf, Wheat icons), and dietary preference chips. Child selector tabs at bottom highlight the active child.

As a frontend developer, implement the MealPlannerSidebar section (MealPlannerSidebar.css) with GSAP animations. State: calYear, calMonth, selectedDay (default today), activeFilters array (all 4 meal types), searchQuery string, collapsed bool, mobileOpen bool. Includes buildCalendarDays(year, month) utility that calculates 42-cell grid with prev/next month overflow days. Mini calendar renders WEEK_DAYS header + day cells with current/other-month styling, ChevronLeft/Right navigation buttons changing calMonth/calYear. MEAL_FILTERS section (4 filter chips: Breakfast 🌅, Lunch ☀️, Dinner 🌙, Snacks 🍎) toggle activeFilters with set inclusion/exclusion. Search input with Search icon filters RECIPE_SUGGESTIONS (5 items: Sweet Potato Puree, Avocado Banana Mash, Pea & Mint Puree, Lentil Soup Blend, Apple Oat Porridge) each with emoji, name, and colored nutrient tags (mps-tag-iron, mps-tag-protein etc.). SAVED_TEMPLATES section (4 templates with colored dots) with Plus/Star icons. Collapse toggle using ChevronLeft/ChevronRight. GSAP entrance animation on sidebar mount.

As a frontend developer, implement the MealPlannerTimeline section (MealPlannerTimeline.css) with real-time clock and GSAP animations. State: currentHour (from getCurrentHour() = hours + minutes/60), activeSlot string. setInterval every 60000ms updates currentHour. MEALS array has 5 entries (Breakfast 8am, Snack 10:30am, Lunch 12pm, PM Snack 3pm, Dinner 6pm) each with hour, icon, items count, anchor. HOUR_TICKS array [7..19] renders tick marks. hourToPercent() maps hour to 0-100% position along horizontal track (DAY_START=7, DAY_END=19, DAY_SPAN=12). nowPercent drives the 'now' indicator line position. getMealStatus() returns 'active'|'past'|'upcoming' based on ±0.5hr threshold. GSAP entrance: slotsRef.current array staggered fromTo opacity/y with 0.08s stagger delay. nowRef animates scale 0.6→1 with back.out easing. handleSlotClick sets activeSlot and runs gsap.fromTo scale 0.93→1 on the clicked slot element. Date label rendered via toLocaleDateString with weekday/month/day format.

As a frontend developer, implement the MealPlannerGrid section (MealPlannerGrid.css). State: meals array (3 initial entries: Oatmeal Breakfast, Apple Snack with tree-nut allergyWarn, Soft Chicken Lunch), toast string. MEAL_TYPE_COLORS and MEAL_TYPE_BG maps provide per-type gradient backgrounds and accent colors. showToast sets toast and useEffect auto-clears after 2200ms. Action handlers: handleEdit shows toast, handleDuplicate clones meal with Date.now() id and '(Copy)' suffix appended, handleSaveTemplate shows toast, handleRemove filters meal by id. EMPTY_SLOTS array ['Afternoon Snack', 'Dinner'] renders add-meal placeholder cards. Each meal card shows: mealType header with color accent, emoji, name, ingredients list, portion, prepTime (Clock icon), allergyWarn banner (AlertTriangle icon), status badge (CheckCircle), action buttons row (Edit2, Copy, BookmarkPlus, Trash2). mpg-add-btn in header triggers toast. Toast overlay appears/disappears with transition.

As a frontend developer, implement the MealPlannerNutrition section (MealPlannerNutrition.css) with GSAP-animated progress bars. Uses gsap import for bar fill animations on mount. macros array (4 items: Protein 28/35g #E94E77, Total Fat 42/55g #F5A623, Carbs 95/130g #4A90E2, Fiber 11/19g #2E8B57) each with icon component (Beef, Droplets, Wheat, Activity), iconBg rgba color, tooltip text referencing DRI standards. micros array (3 items: Iron 8.2/11mg, Calcium 620/700mg, Vitamin D 280/600IU) with emoji, barColor, ref string, and tooltip. TooltipIcon sub-component renders 'i' badge with mpn-tooltip-box hover panel. ProgressBar sub-component renders mpn-bar-track + mpn-bar-fill div with inline width style clamped to 100%. MicroProgressBar similar but with mpn-micro-bar-track class. Zap icon for total calories display. Star icon for daily goal indicator. AlertCircle for deficiency warnings. Info icon for section context. Activity icon for summary metrics.

As a frontend developer, implement the MealPlannerNotes section (MealPlannerNotes.css). State: notes string (textarea value), aiEnabled bool (toggle), tipsOpen bool (accordion), saved bool, showToast bool. handleSave sets saved+showToast true then clears both after 2200ms via setTimeout. feedingTips array (5 age-range entries: 4–6mo, 6–8mo, 8–10mo, 10–12mo, 12+mo) each with badge and descriptive text, rendered in collapsible accordion toggled by tipsOpen with ChevronDown icon rotating. mealReminders array (3 strings) rendered as reminder list with Bell icon. aiSuggestionText string and aiSuggestionTags array (4 tags: High Iron, Vitamin C Boost, Age-Appropriate, Easy Prep) displayed in AI panel when aiEnabled is true (toggle with Sparkles icon). Save button shows Check icon when saved=true, Save icon otherwise. FileText icon in section header. Apple icon for nutrition context. Lightbulb icon for tips section. Textarea bound to notes state via onChange.

As a frontend developer, implement the MealPlannerActions section (MealPlannerActions.css). State: saved bool, saving bool. handleSave: guards against saving/saved, sets saving true, after 800ms setTimeout sets saving false + saved true, after additional 3000ms clears saved. Button label cycles: 'Save Meal Plan' → 'Saving...' → 'Plan Saved!' with Save/CheckCircle2 icon swap. handleShare: uses navigator.share({ title, url }) if available, falls back to navigator.clipboard.writeText(window.location.href). handlePrint: calls window.print(). handleGenerate and handleExportPDF and handleAddCalendar are stub callbacks. Primary row buttons: mpa-btn-save, mpa-btn-generate (Sparkles icon), mpa-btn-share (Share2 icon), mpa-btn-print (Printer icon). Secondary utility row: mpa-btn-export (FileDown icon 'Export PDF'), mpa-btn-calendar (CalendarPlus icon 'Add to Calendar'). Auto-save indicator div mpa-autosave with pulsing dot. All useCallback wrapped.

As a frontend developer, implement the shared Footer section (Footer.css) for the MealPlanner page. This component may already exist from SleepTracker or Profile pages — verify before recreating. Static component with no state. Renders ftr-root > ftr-inner containing: (1) ftr-brand div with 'zb' logo icon linking to /Dashboard and tagline paragraph about AI-powered parenting, (2) ftr-links-group with two <nav> columns — Features (6 links: Dashboard, Meal Planner, Sleep Tracker, Vaccines, Growth Chart, AI Chat) and Account (4 links: Profile, Settings, Sign Up, Log In) rendered from arrays as ftr-col-list, (3) ftr-bottom bar with copyright using new Date().getFullYear() and ftr-legal links for Privacy Policy, Terms of Service, Cookie Policy separated by ftr-legal-separator spans.

As a frontend developer, implement the GrowthChartHeader section. Uses useState for activeTab ('weight' default), useRef for rootRef/tabBarRef/titleRef, and GSAP context animations on mount: staggered fromTo on .gch-breadcrumb, .gch-header-row, .gch-tab-btn (stagger 0.08s), and .gch-percentile-pill. handleTabChange triggers gsap.fromTo scale pop (0.93→1, back.out(2)) on the clicked tab element before updating state. Renders METRIC_TABS array (weight 8.2kg, height 71.4cm, head 44.2cm) as tab buttons with emoji icons and subLabels. PERCENTILE_DATA object drives the percentile pill display per tab (e.g. '65th percentile, WHO standard'). Breadcrumb nav links back to /Dashboard. Accepts externalTab and onTabChange props for parent coordination.

As a frontend developer, implement the GrowthChartMetricsSummary section. Uses useState for visible ([false,false,false]) and fillWidths ([0,0,0]) arrays, and cardRefs useRef array. Three IntersectionObserver instances (threshold 0.15) watch each card; on intersection setVisible[idx]=true and setTimeout with staggered delay (idx*90+120ms) sets fillWidths[idx] to metric.percentileValue to animate the percentile bar. Renders metrics array: Weight (8.4kg, 55th pct, up +0.3kg), Height (71.2cm, 47th pct, stable), Head Circumference (44.8cm, 62nd pct, up +0.5cm). Each card shows TrendIcon component (TrendingUp/TrendingDown/Minus from lucide-react), background emoji icon, lastMeasured date 'May 14, 2026', and animated CSS width transition on percentile fill bar. Cards have gms-card--weight/height/head modifier classes and gms-visible class on intersection.

As a frontend developer, implement the GrowthChartMain section — the primary interactive SVG chart. Uses useState for active metric (weight/height/head), active range (3m/6m/12m/all), hover tooltip state, and selected data point. CHILD_DATA object holds 13-month arrays for weight (3.4→9.3kg), height (50→76cm), head (34→46cm). WHO_REF provides P3/P50/P97 reference band arrays for each metric. METRICS array defines color tokens (#4A90E2 weight, #E94E77 height, #F5A623 head). RANGES array drives time-range filter buttons. Chart is rendered as inline SVG with: shaded P3–P97 band (fill opacity), P50 dashed median line, smooth bezier child data line, interactive data point circles with hover tooltip showing date/value/age. GSAP animates path strokeDashoffset on metric/range change. Metric toggle buttons and range pill buttons update chart state.

As a frontend developer, implement the GrowthChartComparison section. Uses useState for activeMetric ('weight'), compareMode ('previous'/'sibling'/'cohort'), barsAnimated, and refs sectionRef/cardPrevRef/cardCurrRef/changeStripRef. METRIC_DATA object holds prev/curr measurement pairs, percentile values, cohortAvg, siblingVal, and barMax for all three metrics. COMPARE_MODES array drives toggle pills. On compareMode/activeMetric change, GSAP animates cardPrevRef and cardCurrRef with fromTo (x offset, opacity) and changeStripRef with scaleX. Renders: two measurement cards (prev date/value vs curr date/value), computed absChange and pctChange with getChangeColor class (gcc-change-positive/negative/neutral), a velocity bar animating to velocityPct width, and a percentile bar with getStatusClass/getBarClass helpers (above/average/below). Cohort/sibling modes swap comparison values accordingly.

As a frontend developer, implement the GrowthChartMilestones section. Uses GSAP with ScrollTrigger for staggered timeline card entrance animations. ALL_MILESTONES array contains 6 milestone objects with fields: id, type (weight/height/milestone/head), nodeClass (gcm-node-new/height/milestone/head/weight), cardClass, metricClass, fillClass (gcm-fill-secondary/accent/green), icon (Scale/Ruler/Star/Circle from lucide-react), description, date, ageLabel, metric value, progressLabel, progressPct (0–1.0), progressValue, badge ('new'/'catchup'/'achieved'), badgeLabel. Renders a vertical timeline with connector line; each entry has a colored timeline node, badge pill (Just Achieved/Catch-Up Growth/Milestone Met/Consistent/Recovered), metric chip, animated progress bar filling to progressPct*100%, and date/age label. Notable entries: doubled birth weight at 6mo (2× bar), 75th percentile weight at 9mo.

As a frontend developer, implement the GrowthChartDataInput section. Uses useState for mobileOpen (collapsible panel on mobile), form state ({date: getTodayISO(), type:'weight', value:'', unit:'kg', notes:''}), errors object, submitting boolean, and success boolean. MEASUREMENT_TYPES array (weight/height/head with emoji icons and units arrays). UNIT_MAP drives unit reset when type changes via useEffect. GSAP entrance: fromTo on .gcdi-field and .gcdi-submit-row elements (y:16→0, opacity, stagger 0.07s). handleSubmit runs validate(): checks required fields, positive number, type-specific max values (weight max 200kg/440lb, height/head max 250cm/100in); on error gsap.fromTo btnRef x:-6→0 shake animation; on success sets submitting→true, setTimeout 1200ms→success=true with gsap scale pop on btnRef. Form fields: date input, type select (MEASUREMENT_TYPES), numeric value input, unit toggle buttons, optional notes textarea.

As a frontend developer, implement the GrowthChartInsights section. Registers gsap.registerPlugin(ScrollTrigger) at module level. insights array contains 4 AI-generated insight objects: growth-rate (52nd pct, #4A90E2, On Track), weight-trend (68% of target range, #F5A623, Monitor), height-velocity (78% above median, #27AE60, Excellent), nutrition-link (87% daily needs, #4A90E2, Insight). Each insight has: category, title, description with real child data ('Emma', specific kg/cm values), icon (TrendingUp/Scale/Ruler/Utensils from lucide-react), status ('good'/'watch'/'info'), accentColor/accentLight/iconBg tokens, progressLabel, progressValue string, progressPct (0–1), and action {label, href}. GSAP ScrollTrigger animates each insight card on scroll entry. Status icons use CheckCircle (good), AlertCircle (watch), Info (info). Action links navigate to /GrowthChart and /MealPlanner.

As a frontend developer, implement the GrowthChartActions section. Uses useState for toastMsg string and toastVisible boolean, toastTimer useRef, and buttonsRef array ref. GSAP entrance on mount: fromTo on buttonsRef.current (opacity:0,y:22 → opacity:1,y:0, stagger 0.09s, back.out(1.4), delay 0.1s). actions array has 5 items: export-pdf (FileText icon, primary, 'PDF report downloading…'), export-csv (Table2, primary, 'CSV data exported'), share (Share2, secondary, 'Share link copied'), goal (Target, outline-goal, 'Growth goal panel opened'), reminder (BellRing, outline, badge:'Recommended', 'Reminder set for 4 weeks'). handleAction sets toastMsg+toastVisible=true, clears previous timer, setTimeout 2800ms→toastVisible=false. getBtnClass maps variant strings to CSS classes (gca-btn-primary/secondary/outline/outline+goal). Toast notification appears/disappears with CSS transition.

As a frontend developer, implement the shared Footer section for the GrowthChart page. Footer.jsx renders a ftr-root footer with: brand block (ftr-logo linking to /Dashboard with 'zb' icon and 'zinc-baby' text, ftr-tagline describing AI-powered parenting features), two nav columns — featureLinks (Dashboard, Meal Planner, Sleep Tracker, Vaccines, Growth Chart, AI Chat) and accountLinks (Profile, Settings, Sign Up, Log In) — and a bottom bar with dynamic copyright year via new Date().getFullYear() and legal links (Privacy Policy, Terms of Service, Cookie Policy). Note: this Footer component likely already exists from SleepTracker and MealPlanner pages — reuse or verify existing component at styles/Footer.css.

As a frontend developer, implement the VaccinesHeader section for the Vaccines page. Uses useState for selectedChild (default 'emma'), exporting, and showTooltip. Renders vh-root header with vh-inner containing: breadcrumb nav (Dashboard / Vaccines), vh-main row with vh-title-block (Syringe icon, h1 'Vaccine Schedule & Reminders', subtitle with Info icon button that toggles vh-tooltip showing CDC guideline text on hover/focus), and vh-controls with a child selector dropdown (maps children array: emma/liam/add — selecting 'add' redirects to /Onboarding via window.location.href) with ChevronDown and User icons, plus an export button that sets exporting=true for 800ms with Printer icon. Stats bar shows activeChild's upcoming/completed/overdue counts using CheckCircle, Clock, AlertCircle icons.

As a frontend developer, implement the VaccineScheduleOverview section for the Vaccines page. Uses useRef for cardRefs array and useEffect to run a GSAP fromTo animation (opacity 0→1, y 22→0, duration 0.55, power2.out easing, stagger 0.1, delay 0.15) adding vso-card--visible class onStart. Renders vso-root section with vso-inner containing a section label (vso-label-text + vso-label-line) and a vso-grid with 4 summary cards mapped from stats array: Total Scheduled (Syringe, blue, '18'), Completed (CheckCircle, green, '11' with progress bar extra), Next Vaccine (CalendarClock, pink, 'Jun 4' with CTA extra), Days Until Next (Clock, orange, '16' with pill extra). Each card has vso-card-corner decorative bubble, icon badge, meta label, and primary value. Card modifiers: vso-card--default, vso-card--complete, vso-card--accent, vso-card--days.

As a frontend developer, implement the VaccineTimeline section for the Vaccines page. Uses useState to manage expanded milestone state. Renders a vertical timeline of CDC-schedule milestones: At Birth (HepB dose 1, completed), 2 Months (DTaP/Hib/IPV/PCV15/RV doses 1, completed), 4 Months (all dose 2 boosters, completed), 6 Months (DTaP/HepB/PCV15 dose 3, active/upcoming), and additional future milestones. Each milestone node shows ageLabel, ageNum+ageUnit badge, status indicator (completed/active), collapsible vaccine list with abbr badges, vaccine name, desc, and done checkmarks. The 6-month active node is visually highlighted. Milestone notes appear per age group. Toggle expand/collapse per milestone via useState. Vaccine abbr badges styled per status (done=green, pending=grey/pink).

As a frontend developer, implement the UpcomingVaccines section for the Vaccines page. Uses useState for reminders (object keyed by vaccine id, toggled true/false) and toast ({visible, message} auto-dismissed after 3000ms). Maps upcomingVaccinesData (5 entries: DTaP dose 4 urgent, PCV15 dose 4 urgent, MMR dose 1 soon, Varicella dose 1 soon, HepA dose 2 scheduled) each rendered as a card with urgency color border from urgencyColors map, urgency label badge from urgencyLabels, vaccine name/fullName, recommendedDate (Calendar icon), recommendedAge (Baby icon), doseLabel, doctorNotes (FileText icon, collapsed by default with expand toggle), and a Bell/BellOff reminder toggle button that fires showToast. Header shows urgentCount badge. Toast notification renders conditionally with CheckCircle icon.

As a frontend developer, implement the CompletedVaccines section for the Vaccines page. Uses useState for isOpen (default false) controlling the collapsible panel (aria-expanded, aria-controls='cv-body-panel'). Toggle button (cv-toggle-btn) shows CheckCircle2 icon, title 'Completed Vaccines' with count badge, certCount summary, and ChevronDown icon that rotates when open. When expanded, renders a list of 8 completedVaccines entries each with: vaccine name/abbr, date (Building2 provider icon), dosage, provider clinic name, and conditional Download button linking to certHref PDF if certAvailable=true (FileCheck icon), or a disabled 'No cert' state. Section header also shows Building2 and Download icons for the bulk download CTA. Syringe icon used in the summary area.

As a frontend developer, implement the VaccineDetails section for the Vaccines page. Uses useState to track which vaccine accordion is expanded (id string). Maps vaccines array (dtap, mmr, varicella, and more) each rendered as an accordion card with: icon emoji + iconClass color, vaccine name/fullName, status badge (statusLabel: Completed/Due Soon/Scheduled), ChevronDown toggle rotating on expand. Expanded panel shows four sub-sections: Protection (ShieldCheck icon, lists protection[].term + desc), Side Effects (Activity icon, bulleted sideEffects[]), Contraindications (AlertTriangle icon, bulleted contraindications[]), and Schedule/Links (Info icon, schedule string, nextDue, WHO/CDC external links with ExternalLink icon). Guideline citation shown at bottom of each expanded card. Status colors differentiated: completed=green, upcoming=pink, scheduled=blue.

As a frontend developer, implement the RemindersSettings section for the Vaccines page. Uses useState for: channels ({email:true, sms:false, in-app:true}), notifyDays ('14'), quietStart ('22:00'), quietEnd ('08:00'), toastState (null|'success'|'error'|'sending'), and saved (bool). Renders rs-root section with rs-card containing: (1) Notification channels row — toggles for email/SMS/in-app using CHANNEL_OPTIONS with Mail/MessageSquare/Smartphone icons, activeChannelCount displayed; (2) Notify days row — select from DAYS_OPTIONS (7/14/30 days before) with Calendar icon; (3) Quiet hours row — two time inputs (quietStart/quietEnd) with Moon/Clock icons; (4) Test notification button triggers 1200ms delay then random success/error toast (Send icon, CheckCircle/AlertCircle); (5) Save button sets saved=true with Save icon. Each change sets saved=false. Toast renders conditionally based on toastState.

As a frontend developer, implement the VaccineNotifications section for the Vaccines page. Uses useState for notifications (initialNotifications array of 6 items) and dismissingIds (array of ids being animated out). handleDismiss adds id to dismissingIds, then after 320ms removes from both arrays (CSS exit animation window). handleClearAll dismisses all simultaneously with same 320ms delay. Each notification card maps type to: typeIconMap (AlertTriangle/Bell/Info/CheckCircle), typeBadgeClass (vn-badge-urgent/warning/info/success), typeTagClass, typeCardClass for styling. Card shows: icon badge, tag pill, title, desc, timestamp, sent indicator (Send icon if sent=true), and X dismiss button. Header shows Bell icon, total count badge, BellOff 'Clear All' button, and unread count. Empty state renders BellOff icon when notifications array is empty.

As a frontend developer, implement the VaccineResources section for the Vaccines page. Renders a static grid of 6 resource cards mapped from resources array: WHO Immunization Guidelines (Globe, blue #4A90E2), National Immunization Program (Shield, green #2E8B57), AAP Vaccine Recommendations (Stethoscope, pink #E94E77), CDC Vaccine Safety Information (BookOpen, orange #F5A623), ECDC Childhood Vaccination Portal (Hospital, purple #6A5ACD), and CHOP Vaccine Education Center. Each card shows: label (small category text), title, desc, tags array as pills, accent-colored icon in iconBg container (hover uses iconBgHover), and ExternalLink icon on the CTA link opening href in new tab. Info icon used in section header. No state — purely presentational with CSS hover transitions on iconBg.

As a frontend developer, implement the Footer section for the Vaccines page. This component (Footer.css) is likely already created from prior pages (MealPlanner, GrowthChart) — verify and reuse if available. Renders ftr-root footer with ftr-inner containing: ftr-brand block with 'zb' logo icon linking to /Dashboard, tagline text about AI-powered parenting assistant; ftr-links-group with two nav columns — Features (Dashboard, Meal Planner, Sleep Tracker, Vaccines, Growth Chart, AI Chat as ftr-col-list) and Account (Profile, Settings, Sign Up, Log In); ftr-bottom bar with dynamic copyright year via new Date().getFullYear() and ftr-legal links (Privacy Policy, Terms of Service, Cookie Policy) separated by ftr-legal-separator spans.

As a frontend developer, implement the AIChatHeader section for the AIChat page. Build with: (1) childProfiles array (Emma/8mo, Liam/14mo, Sophia/2yr) with id, name, initials, age fields; (2) topicPills array (Feeding Guidance/🍼, Sleep Tips/🌙, Parenting Advice/💛, Growth & Development/📈) each with modifier for BEM CSS variant; (3) useState selectedChild defaulting to 'emma' — activeProfile derived via .find(); (4) Controlled native <select> (ach-profile-dropdown) with onChange updating selectedChild, displaying initials avatar alongside ChevronDown icon from lucide-react; (5) Dynamic description paragraph interpolating activeProfile.name; (6) Static 'AI Online' status badge with animated ach-status-dot pulse; (7) Topic pills rendered as span elements with ach-topic-pill--{modifier} BEM classes. Import AIChatHeader.css.

As a frontend developer, implement the AIChatConversationArea section for the AIChat page. Build with: (1) INITIAL_MESSAGES array (5 messages: ai/user alternating) each with id, role, text, timestamp, recs array, optional dateLabel; (2) MessageBubble component accepting msg and animDelay — renders isUser (role==='user') vs AI bubble styles; (3) renderText() parser splitting text on '\n' and bold markdown (**text**) into React.Fragment lines with <strong> spans; (4) AI message rec links array rendered as clickable chips (🍽️/Open Meal Planner→/MealPlanner, 📈/Growth Milestones→/GrowthChart, etc.); (5) useState messages, useRef for scroll container with useEffect auto-scrolling to bottom on messages change; (6) useCallback for addMessage; (7) dateLabel divider rendered above first message of a day group; (8) CSS entrance animation via animDelay prop. Import AIChatConversationArea.css.

As a frontend developer, implement the AIChatInputBar section for the AIChat page. Build with: (1) useState for message (string), isThinking (bool), isMicActive (bool), isSending (bool), attachments (array max 5); (2) useRef for textareaRef (auto-resize via useEffect: el.style.height='auto' then Math.min(scrollHeight,120)+'px'), fileInputRef, thinkingTimerRef; (3) Derived state: charCount, isOverLimit (>MAX_CHARS=1000), isNearLimit (>85%), canSend; (4) handleSend useCallback — sets isSending true (400ms reset), sets isThinking true then clears after 2800ms via thinkingTimerRef, clears message/attachments, refocuses textarea; (5) handleKeyDown — Enter without Shift triggers handleSend; (6) handleMicToggle toggling isMicActive; (7) handleAttachClick triggering hidden fileInputRef; (8) handleFileChange mapping File objects to {id, name} attachment objects (truncating names >20 chars); (9) removeAttachment filtering by id; (10) Thinking indicator div with three aib-thinking-dot spans (role=status, aria-live=polite); (11) Character counter with aib-counter-warn/aib-counter-over classes; (12) Lucide icons: Send, Mic, Paperclip, X, FileText. Import AIChatInputBar.css.

As a frontend developer, implement the AIChatQuickActions section for the AIChat page. Build with: (1) suggestionGroups array (4 groups: Sleep/qa-pill--accent with 4 pills, Feeding/default with 4 pills, Health/qa-pill--secondary with 4 pills, Development/default with 4 pills) — each pill has icon emoji and text string; (2) Props: onSelectSuggestion callback and visible boolean (returns null when false); (3) useState mounted with useEffect 50ms setTimeout to set true for CSS mount transition; (4) handlePillClick calling onSelectSuggestion(text) to populate parent input; (5) Rendered as grouped pill buttons with qa-pill + group.variant BEM classes, role='list'/role='listitem' accessibility, aria-label='Ask: '+pill.text; (6) Group label spans and qa-hint paragraph. Import AIChatQuickActions.css.

As a frontend developer, implement the shared Footer section for the AIChat page. Note: this component likely already exists from previous pages (GrowthChart, Vaccines). Build with: (1) featureLinks array (6 items: Dashboard, Meal Planner, Sleep Tracker, Vaccines, Growth Chart, AI Chat) and accountLinks array (4 items: Profile, Settings, Sign Up, Log In); (2) Dynamic year via new Date().getFullYear(); (3) Brand section with ftr-logo (zb initials icon + zinc-baby text linking to /Dashboard) and tagline paragraph; (4) Two-column nav (Features + Account) using <nav> with aria-label, <ul> ftr-col-list; (5) Bottom bar with copyright span and legal links (Privacy Policy, Terms of Service, Cookie Policy) separated by ftr-legal-separator spans. Import Footer.css.

As a frontend developer, implement the SettingsSidebar section for the Settings page. Uses `useState` for `activeId` (default `'profile'`) and `drawerOpen`. Renders `aside.ssb-root` with a mobile bar containing a hamburger button (3 `span.ssb-hamburger-line` elements) that toggles `drawerOpen` and applies `ssb-open` class. The `nav.ssb-nav` toggles between `ssb-nav-open` and `ssb-nav-closed` classes. Navigation groups are rendered from `navGroups` array (3 groups: Account with profile/account-security/notifications, Children with child-profiles, Data & Privacy with data-sync/privacy-compliance). Each group separated by `div.ssb-divider`. A separate `dangerItem` (AlertTriangle icon, `danger: true`) is rendered outside the groups. `handleItemClick` sets `activeId`, closes drawer, and calls `document.querySelector(href).scrollIntoView({ behavior: 'smooth', block: 'start' })`. Import from `../styles/SettingsSidebar.css`.

As a frontend developer, implement the SettingsHeader section for the Settings page. Renders a static `header.sh-root` containing `div.sh-inner` with a `div.sh-icon-wrap` (aria-hidden, wrapping Settings lucide icon size 22 strokeWidth 2) and `div.sh-text` holding `h1.sh-title` ('Settings') and `p.sh-description` ('Manage your account, preferences, and child profiles'). A `div.sh-divider` is rendered below the inner container as a decorative separator. No state or interactivity. Import from `../styles/SettingsHeader.css`. This section is independent and can be built in parallel with SettingsSidebar.

As a frontend developer, implement the SettingsFooter section for the Settings page using the shared Footer component (may already exist from Landing, Login, GrowthChart, Vaccines, and AIChat pages). Renders `footer.ftr-root` with brand block (ftr-logo-icon 'zb' + ftr-logo-text 'zinc-baby', tagline paragraph). Two nav columns: `featureLinks` array (Dashboard, Meal Planner, Sleep Tracker, Vaccines, Growth Chart, AI Chat) and `accountLinks` array (Profile, Settings, Sign Up, Log In). Bottom bar uses `new Date().getFullYear()` for dynamic copyright year plus three legal links (Privacy Policy, Terms, Cookies) separated by `ftr-legal-separator` spans. Import from `../styles/Footer.css`.

As a frontend developer, implement the ActionButtonsSection for the Profile page. State includes: saveState ('idle' | 'saving' | 'saved') and activeModal (null | 'delete' | 'export'). handleSave simulates a 1400ms saving delay then transitions to saved for 2200ms before returning to idle; disabled during non-idle states. handleExportConfirm creates a Blob with JSON profile data, triggers a programmatic anchor download of 'zinc-baby-profile-export.json', then revokes the object URL. handleDeleteConfirm closes the modal and redirects to '/Dashboard' via window.location.href. Two confirmation modals (delete/export) are conditionally rendered based on activeModal. The save button uses dynamic className (abs-btn-saving/abs-btn-saved) and swaps between spinner, CheckCircle, and Save icons. A delete button (Trash2) and export button (Download) open their respective modals. Imports Save, Trash2, Download, CheckCircle, AlertTriangle, X from lucide-react. Imports ActionButtonsSection.css.

As a frontend developer, implement the SettingsProfileSection for the Settings page. Uses `useState` for `profile` (INITIAL_PROFILE object with firstName, lastName, email, joinDate, plan, children, timezone, avatarInitials, avatarUrl), `modalOpen`, `avatarModalOpen`, `editForm` (firstName/lastName/email/timezone), `previewUrl`, `saved`; and `useRef` for `fileInputRef` and `avatarFileRef`. Edit modal (`modalOpen`) renders a form with four controlled inputs for firstName, lastName, email, timezone; `handleSave` derives initials from name, updates `profile` state, sets `saved` for 900ms then closes. Avatar modal (`avatarModalOpen`) includes a clickable upload area that triggers `avatarFileRef.current.click()`, reads file via `FileReader.readAsDataURL`, sets `previewUrl` for preview, then `handleAvatarSave` writes `avatarUrl` to profile. Profile card shows avatar (image if `avatarUrl` else initials), displayName, plan/children/timezone meta badges with Shield/User/Mail/Calendar lucide icons. Import from `../styles/SettingsProfileSection.css`.

As a frontend developer, implement the SettingsAccountSecurity section for the Settings page. Uses `useState` for: `currentPw`, `newPw`, `confirmPw`, `showCurrent`, `showNew`, `showConfirm`, `pwSaved`; 2FA toggles `twoFactorApp` (true), `twoFactorSMS` (false), `twoFactorEmail` (true); `sessions` (from `initialSessions` array of 3 items with id/name/device/icon/location/lastActive/ip/current fields); and login history display state. Password change form uses Eye/EyeOff lucide toggle buttons for each field and calls `getPasswordStrength(pw)` — a scoring function checking length ≥8/12, uppercase, digits, special chars — returning `{ level, label, width }` for a visual strength bar. `DeviceIcon` sub-component renders Smartphone/Tablet/Monitor based on type string. Sessions list shows active badge for `current: true` session, with LogOut buttons to revoke non-current sessions via `setSessions`. `loginHistory` array (5 entries) renders with `status: 'failed'` styled differently. Import from `../styles/SettingsAccountSecurity.css`. Independent of other content sections.

As a frontend developer, implement the SettingsNotifications section for the Settings page. Uses `useState` for: `toggles` (initialized from `notificationGroups` array's `defaultOn` values — sleep_reminder/vaccine_reminder/growth_milestone default true, meal_plan/ai_chat default false), `frequency` (default `'immediately'`), `quietStart` (default `'22:00'`), `quietEnd` (default `'07:00'`), `saved`, `isDirty`. Renders three notification groups from `notificationGroups`: Health & Wellness (Moon/Syringe/TrendingUp icons with per-item `iconBg` and `iconColor`), Feeding & Nutrition (UtensilsCrossed), AI & Support (MessageCircle). Each item has a custom toggle switch that calls `handleToggle(id)` setting `isDirty=true`. Frequency selector renders `frequencyOptions` array (4 options). Quiet hours uses two `<input type='time'>` inputs bound to `quietStart`/`quietEnd`. Save button shows Check icon + 'Saved!' for 3 seconds via `setSaved(true)` then `setTimeout`. Import from `../styles/SettingsNotifications.css`. Independent of other content sections.

As a frontend developer, implement the SettingsChildProfiles section for the Settings page. Uses `useState` for: `profiles` (initialProfiles array: Lily Chen birthdate 2023-03-15 colorIdx 0 allergies Peanuts, Noah Chen birthdate 2021-08-22 colorIdx 2), `modalMode` (`'add'|'edit'|'remove'|null`), `editTarget`, `removeTarget`, `form` (EMPTY_FORM: name/birthdate/allergies/sleepRoutine/status), `nextId` (starts at 3). Helper `calcAge(birthdate)` computes months/years from today; `formatDate(dateStr)` formats to en-US locale. `avatarColors` array of 5 linear-gradient strings used for profile avatar backgrounds. Add/Edit modal renders controlled inputs for name, birthdate, allergies, sleepRoutine, status; `handleSave` derives initials from name split/map/join and assigns `avatarColors[nextId % 5]`. Remove modal shows `removeTarget.name` and calls `setProfiles(prev => prev.filter(...))`. Each profile card shows gradient avatar, age via `calcAge`, formatted birthdate via `formatDate`, edit (Edit2) and delete (Trash2) buttons. ExternalLink icon links to `/Profile` page. Import from `../styles/SettingsChildProfiles.css`. Independent of other content sections.

As a frontend developer, implement the SettingsDataSync section for the Settings page. Uses `useState` for: `offlineMode`, `autoSync` (true), `wifiOnly` (true), `syncStatus` (default `'synced'`), `lastSynced` ('Today at 10:42 AM'), `isSyncing`, `feedback`, `usedMB` (29.4). Uses `useEffect` and `useCallback`. `getStatusInfo(status)` returns label/dotClass/labelClass for synced/pending/warning/syncing states. `usedPercent` computed as `Math.min(100, Math.round((usedMB / 128) * 100))`. `STORAGE_BREAKDOWN` array (4 items: Child Profiles/Meal Plans/Sleep Records/Growth Charts with size/color) renders a storage bar visualization. `SYNC_HISTORY` array (4 events) renders with `HistoryIcon` sub-component that switches between CheckCircle/AlertTriangle/RefreshCw based on type. Manual sync button sets `isSyncing`, animates RefreshCw icon, updates `lastSynced` and `syncStatus`. Three toggle switches for offlineMode/autoSync/wifiOnly. Wifi/WifiOff icons reflect online status. Import from `../styles/SettingsDataSync.css`. Independent of other content sections.

As a frontend developer, implement the SettingsPrivacyCompliance section for the Settings page. Uses `useState` for: `retention` (default `'1yr'`), `showDeleteConfirm`, `exportSuccess`, `deleteSuccess`. `RETENTION_OPTIONS` array (5 options from '6mo' to 'indefinite') populates a `<select id='spc-retention'>` wrapped in `spc-select-wrap` with ChevronDown icon. `REGULATIONS` array (GDPR/COPPA/CCPA/HIPAA Aligned — 4 items) renders compliance badges. Header shows Shield icon, title, subtitle, and a `spc-badge` with green dot + 'Compliant' + '· 4 regulations met'. `spc-notice` banner renders AlertTriangle warning about sensitive child health data and billing cycle note. `handleExport` sets `exportSuccess=true` for 4 seconds (Download icon, FileText). `handleDeleteConfirm` sets `deleteSuccess=true` for 4 seconds (Trash2). `showDeleteConfirm` toggle reveals a confirmation UI before `handleDeleteConfirm`. External links use ExternalLink lucide icon. Info icon used for tooltip hints. Import from `../styles/SettingsPrivacyCompliance.css`. Independent of other content sections.

As a frontend developer, implement the SettingsDangerZone section for the Settings page. Uses `useState` for `activeModal` (null | `'delete'` | `'reset'` | `'logout'`) and `confirmText`. Renders `section.sdz-root` with `aria-labelledby='sdz-title'`. Header uses ShieldAlert lucide icon. `sdz-warning-banner` (role='alert') uses AlertTriangle. Three action rows in `sdz-actions`: Sign Out All Sessions (LogOut icon, `MODAL_LOGOUT`) with simple confirmation modal; Reset All Data (RefreshCw icon, `MODAL_RESET`) requiring typed 'RESET' confirmation via `canConfirmReset = confirmText === 'RESET'`; Delete Account (Trash2 icon, `MODAL_DELETE`) requiring typed 'DELETE' via `canConfirmDelete = confirmText === 'DELETE'`. `openModal(type)` resets `confirmText` then sets `activeModal`. Each destructive modal has an X close button, AlertCircle/Info icons, descriptive consequence text, and a disabled-until-confirmed primary button. `handleDeleteConfirm`/`handleResetConfirm` check string match before calling `closeModal` (production would call delete/reset API). Import from `../styles/SettingsDangerZone.css`. Independent of other content sections.