shadow-health

As a frontend developer, implement the HomeHero section. Uses useRef for rootRef, headlineRef, badgeRef, subRef, ctaRef, gradientRef, barRef, scrollHintRef and useState for gradProgress. On mount, a GSAP timeline sequences entrance animations: badge (opacity/y/scale), headline (opacity/y), subtitle (opacity/y), CTA (opacity/y), scrollHint (opacity). A scroll event listener computes gradProgress (0–1 based on scrollY vs heroHeight*0.5) and dynamically interpolates two RGB color stops (red-toned → green-toned) to build a CSS linear-gradient string applied as inline background. Also applies parallax offset to headlineRef via gsap.to y and fades scrollHintRef opacity. barWidth is derived from gradProgress for a progress bar element. All refs cleaned up on unmount.

As a frontend developer, implement the JourneyPathTimeline section. Registers gsap ScrollTrigger plugin. Defines a CHECKPOINTS array of 9 items across three zones: unhealthy (junk-food, sedentary, poor-sleep), transition (awareness, small-steps), healthy (hydration, exercise, nutrition, plus implied final). Each checkpoint has id, zone, icon, title, desc, tip, tipIcon, zoneLabel, and saturation fields. Uses useState and useRef with useCallback for interaction handling, and AnimatePresence from framer-motion for checkpoint detail panel transitions. ScrollTrigger drives timeline progress and checkpoint activation as user scrolls. Renders a visual path with zone-colored nodes; clicking/hovering a node opens an AnimatePresence-animated detail panel showing tip and tipIcon.

As a frontend developer, implement the WhyHealthy section. Defines a benefits array of 4 items (energy 87%, longevity 12yrs, clarity 64%, productivity 3x) each with id, icon, title, stat, statSuffix, desc, and highlightWord. Implements a custom useCountUp hook using requestAnimationFrame with cubic-ease-out that counts from 0 to target when shouldStart is true. BenefitStat sub-component renders the animated counter. renderDesc helper wraps highlightWord in a wh-benefit-highlight span. WhyHealthy uses IntersectionObserver via sectionRef to set inView state, triggering count-up animations. Also uses GSAP to animate wh-benefit-highlight spans once in view (hasAnimatedHighlights ref guards one-shot). An imageRef is used for a parallax or entrance image animation.

As a frontend developer, implement the WhyUnhealthy section. Defines riskPoints array of 4 items (Chronic Fatigue, Heart Disease Risk, Mental Health Impact, Reduced Lifespan) each with title, accentWord, desc, and an inline SVG icon element. Uses useRef arrays for risksRef, ripplesRef, accentsRef plus vignetteRef and a hasTriggered ref. IntersectionObserver at threshold 0.15 fires three GSAP animations once: animateRiskItems (staggered opacity/x slide-in on each risk card), startRipplePulses (looping scale/opacity on ripple elements), startAccentFlashes (flashing the accentWord spans). All GSAP tweens are cleaned up on unmount.

As a frontend developer, implement the HealthBenefits section. Defines a benefits array of 6 items (Stronger Heart, Better Sleep, Mental Clarity, Longer Lifespan, Stronger Immunity, Elevated Mood) each with title, description, and inline SVG icon. Uses framer-motion cardVariants with hidden (opacity:0, y:40) and visible (opacity:1, y:0) states — custom prop i drives staggered delay of i*0.1s. Cards use whileInView with once:true and viewport margin. Renders a parallax background layer (hb-deco-bg with hb-deco-gradient and two hb-deco-orb divs) and a midground parallax layer (hb-deco-mid), both using CSS variable --scroll for translateY offsets. Cards displayed in a responsive grid.

As a frontend developer, implement the UnhealthyRisks section. Defines riskData array of 6 items (Heart Disease, Poor Sleep Quality, Brain Fog, Shortened Lifespan, Chronic Fatigue, Weakened Immunity) each with title, severity string, description, warning, and a lucide-react Icon component (Heart, Moon, Brain, Clock, Zap, AlertTriangle). Uses framer-motion cardVariants with hidden (opacity:0, x:40) and visible (opacity:1, x:0) with stagger via custom prop. Each RiskCard sub-component uses motion.div with whileInView (once, margin -40px) and a whileHover shakeHover variant that animates x shake array, boxShadow to red glow, and borderColor. A useInView hook is used on the section ref.

As a frontend developer, implement the TipsPreview section. Defines a tips array of 3 items (Start Your Morning with Water, Walk 10,000 Steps Daily, Prioritize Quality Sleep) each with number, headline, snippet, and detail. Uses useState for flippedCard (null or index) and useRef + framer-motion useInView on sectionRef (once:true, margin -80px). handleCardHover sets flippedCard index, handleCardLeave resets to null, handleCardTap toggles (toggle off if same index). Renders a parallax background layer (tp-deco-bg with tp-deco-gradient, tp-deco-blob-1, tp-deco-blob-2) and midground layer (tp-deco-mid with tp-deco-line and three tp-deco-diamond divs). Section header animates via framer-motion on isInView. Cards flip to reveal detail text on hover/tap using AnimatePresence.

As a frontend developer, implement the TransformationCTA section. Uses useRef for meshRef, btnRef, rootRef. A GSAP timeline (repeat:-1, yoyo:true, ease:sine.inOut) animates 6 CSS custom properties (--tcta-g1x/y, --tcta-g2x/y, --tcta-g3x/y) on meshRef through two keyframes over 6s each, creating a living gradient mesh background. Implements a magnetic button effect via handleMouseMove useCallback: computes distance from cursor to btnRef center; within maxDist 180px applies a pull factor (0.2 * (1 - dist/maxDist)) via gsap.to x/y; outside maxDist snaps back with elastic.out ease. handleMouseLeave resets button position. Both listeners attached to rootRef element. framer-motion motion components used for entrance animation on CTA content.

As a frontend developer, implement the Footer section. Defines four link arrays: navigateLinks (4 items to Home/About/HealthyLife/DailyTips), healthTipLinks (4 items), aboutLinks (4 items), legalLinks (4 items). socialLinks array uses lucide-react icons: Facebook, Twitter, Instagram, Youtube. Renders an ftr-deco div with an inline SVG two-path decorative leaf shape. Brand column shows Heart lucide icon logo, brand description text, and social icon links (ftr-social-link, target=_blank). Remaining columns render the 4 link groups. Footer bottom row shows Heart icon with 'Made with' text and dynamic currentYear via new Date().getFullYear(). Note: a Footer component may already exist from other pages — check for reuse before building fresh.

As a frontend developer, implement the Navbar section for the About page. This is the same Navbar component used across all pages (may already exist from Home page task beae3bf8-92f9-40ed-a80c-cf0ebfc536d7). It uses useState for `scrolled`, `mobileOpen`, and `activePath` state. useEffect hooks handle scroll-based class toggling (`nb-scrolled`), body overflow lock when mobile menu is open, and active path detection via `window.location.pathname`. Renders a Heart icon logo, desktop nav links mapped from NAV_PAGES array (About, Healthy Life, Unhealthy Life, Daily Tips), a desktop CTA arrow button, and a hamburger button with three `.nb-hamburger-line` spans. Includes a mobile overlay div and slide-in mobile menu. All from Navbar.css styles.

As a frontend developer, implement the Navbar section for the HealthyLife page. This is the same shared Navbar component used across all pages — it may already exist from the Home or About page implementations. The component uses useState for scrolled, mobileOpen, and activePath state, useEffect for scroll event listener (passive) that toggles nb-scrolled class at 12px scroll depth, and a second useEffect that locks document.body.style.overflow when mobile menu is open. Renders Heart icon (lucide-react) in logo, NAV_PAGES array mapped to desktop links with nb-active class for current path, ArrowRight icon in desktop CTA button linking to /DailyTips, hamburger button with three nb-hamburger-line spans toggling nb-open class, mobile overlay div with click-to-close, and animated mobile menu drawer. Imports Navbar.css.

As a frontend developer, implement the shared Navbar component for the UnhealthyLife page. This component is likely already created from the About and HealthyLife pages — reuse if available. The Navbar uses useState for `scrolled`, `mobileOpen`, and `activePath`. It renders NAV_PAGES array with links to About, HealthyLife, UnhealthyLife, DailyTips. Includes scroll listener that adds `nb-scrolled` class after 12px, a hamburger button toggling `nb-open` and `nb-visible` classes on mobile overlay/menu, body overflow lock when mobile menu is open, a logo with Heart icon from lucide-react, desktop CTA linking to /DailyTips with ArrowRight icon, and active link highlighting via `nb-active` class matched against window.location.pathname.

As a backend developer, implement FastAPI endpoints for health tips content. Create GET /api/tips endpoint returning daily tips list, GET /api/tips/{id} for individual tip detail, and GET /api/tips/categories for tip categories. These endpoints support the DailyTips page sections (DailyTipsIntro, MorningRoutineSection, HydrationSection, NutritionSection, ExerciseSection, SleepHygieneSection, MentalWellnessSection). Include pagination, filtering by category, and response caching headers.

As a backend developer, implement FastAPI endpoints for healthy and unhealthy lifestyle content. Create GET /api/habits/healthy and GET /api/habits/unhealthy endpoints returning habit data with titles, descriptions, statistics, and image references. Also create GET /api/stats/health for platform statistics (users, tips count, communities). These endpoints support HealthyHabitsShowcase, UnhealthyHabitsCards, StatisticsSection, and ImpactMetrics components. Note: frontend section tasks for these pages depend on this API.

As a backend developer, implement FastAPI endpoints for static platform content and mission/about data. Create GET /api/about/mission, GET /api/about/values, GET /api/about/milestones returning structured content for the About page sections (MissionStatement, CoreValues, JourneyHighlight, WhyShadowHealth, CommunityCall). Also create GET /api/home/hero and GET /api/home/stats for homepage content. Includes CORS middleware configuration to allow frontend origin.

As a frontend developer, install and configure the animation libraries specified in the SRD. Install gsap (with ScrollTrigger, ScrollToPlugin plugins), framer-motion, and d3 packages. Create a gsap-config.js file that registers ScrollTrigger and ScrollToPlugin globally. Set up framer-motion LazyMotion provider in the React app root for bundle optimization. Add d3 type declarations if using TypeScript. Verify GSAP license (Club GreenSock or standard) is appropriate. This setup is a prerequisite for all section components using GSAP ScrollTrigger, framer-motion, or D3 visualizations.

As a frontend developer, configure React Router v6 for the shadow-health SPA. Create route definitions for: / (Home), /About, /HealthyLife, /UnhealthyLife, /DailyTips. Set up a top-level App.jsx with BrowserRouter, Routes, and Route components. Create page-level components (HomePage, AboutPage, HealthyLifePage, UnhealthyLifePage, DailyTipsPage) that compose their respective section components. Add smooth scroll-to-top behavior on route change. Configure 404 fallback route. This is a prerequisite for all Navbar implementations that use window.location.pathname for active link detection.

As a UI/UX designer, conduct a responsive design audit across all 5 pages (Home, About, HealthyLife, UnhealthyLife, DailyTips) to ensure compliance with SRD Section 8 requirement for mobile, tablet, and desktop optimization. Define and document breakpoints: mobile (≤768px), tablet (769px–1024px), desktop (≥1025px). Review and fix: Navbar hamburger menu behavior on mobile, all section grid layouts collapsing correctly, GSAP/D3 visualizations scaling responsively (use containerRef.clientWidth for SVG sizing), touch event support for interactive components (HydrationSection glass tracker, WeeklyChallenge day tracker), and animation performance on lower-powered mobile devices.

As a data engineer, create seed data scripts for the shadow-health MySQL database. Populate HealthTip table with 50+ daily health tips across 6 categories (hydration, nutrition, exercise, sleep, mental wellness, morning routine) reflecting the Pakistan-relevant content from the SRD. Populate HealthHabit table with healthy habits (fresh vegetables, daily walk, 8 glasses water, 7-8 hours sleep) and unhealthy habits (junk food, sedentary lifestyle, high sugar, poor sleep). Populate PlatformStat table with platform metrics. Populate Milestone table with 8 journey milestones (4 unhealthy, 4 healthy) as specified in JourneyHighlight component. Create a seeds/ directory with individual seed files and a master run_seeds.py script.

As a frontend developer, implement the HomeHero section for the Home page. The component uses multiple refs (rootRef, headlineRef, badgeRef, subRef, ctaRef, gradientRef, barRef, scrollHintRef) and useState for gradProgress. On mount, a GSAP timeline sequences entrance animations: badge (opacity 0→1, y 20→0, scale 0.9→1, 0.6s), headline (y 40→0, 0.8s), sub (y 30→0, 0.6s), cta (y 20→0, 0.5s), scrollHint (opacity→0.5, 0.8s). A passive scroll listener computes progress = scrollY / (heroHeight * 0.5) and calls setGradProgress; also applies gsap.to headlineRef for a parallax float (y: -scrollY*0.06) and fades scrollHint. Gradient background color is computed from gradProgress interpolating r1/g1/b1 (red 198,40,40 → green 102,187,106) and r2/g2/b2, injected as inline style. barWidth is derived from gradProgress. Uses framer-motion and gsap. Imports HomeHero.css.

As a frontend developer, implement the JourneyPathTimeline section for the Home page. Registers gsap ScrollTrigger plugin. Defines CHECKPOINTS array of 9 objects with fields: id, zone (unhealthy/transition/healthy), icon (emoji), title, desc, tip, tipIcon, zoneLabel, saturation. Uses useState, useRef, useCallback, useEffect. ScrollTrigger animates the SVG path timeline line drawing on scroll. AnimatePresence from framer-motion handles checkpoint card enter/exit. Each checkpoint card shows zone label, icon, title, desc, and a collapsible tip panel toggled by clicking. Active checkpoint state drives saturation CSS filter on the background. gsap.registerPlugin(ScrollTrigger) is called at module level. Imports JourneyPathTimeline.css.

As a frontend developer, implement the WhyHealthy section for the Home page. Defines a benefits array of 4 items (energy 87%, longevity 12yrs, clarity 64%, productivity 3x) each with id, icon, title, stat, statSuffix, desc, highlightWord. Implements a custom useCountUp hook using requestAnimationFrame with cubic ease-out, triggered by shouldStart boolean. BenefitStat component renders the animated count with suffix. renderDesc utility wraps highlightWord in a wh-benefit-highlight span. WhyHealthy uses useState(inView), sectionRef, imageRef, highlightRefs array, and hasAnimatedHighlights ref. IntersectionObserver triggers GSAP animations on section enter: image parallax via gsap and highlight text underline animations via highlightRefs. Uses framer-motion for card entrance. Imports WhyHealthy.css.

As a frontend developer, implement the WhyUnhealthy section for the Home page. Defines riskPoints array of 4 items (Chronic Fatigue, Heart Disease Risk, Mental Health Impact, Reduced Lifespan) each with title, accentWord, desc, and inline SVG icon. Uses sectionRef, risksRef array, ripplesRef array, accentsRef array, vignetteRef, and hasTriggered ref. IntersectionObserver at threshold 0.15 fires once, calling: animateRiskItems (gsap.to each risk item opacity:1, x:0 with staggered delay 0.15s per item), startRipplePulses (repeating GSAP ripple animation on ripplesRef elements), startAccentFlashes (GSAP color flash animation on accentsRef accent words). Pure GSAP, no framer-motion. Imports WhyUnhealthy.css.

As a frontend developer, implement the HealthBenefits section for the Home page. Defines a benefits array of 6 items (Stronger Heart, Better Sleep, Mental Clarity, Longer Lifespan, Stronger Immunity, Elevated Mood) each with title, description, and inline SVG icon. cardVariants defines framer-motion hidden (opacity:0, y:40) to visible with staggered delay (i*0.1s, 0.6s duration, cubic ease). Section has a three-layer parallax structure: hb-deco-bg (translateY calc(--scroll * -0.2px)) with hb-deco-gradient and two hb-deco-orb divs, hb-deco-mid (translateY calc(--scroll * -0.4px)), and natural-scroll content layer. Cards rendered with motion.div using custom={i} and whileInView trigger. Imports HealthBenefits.css.

As a frontend developer, implement the UnhealthyRisks section for the Home page. Defines riskData array of 6 items (Heart Disease, Poor Sleep Quality, Brain Fog, Shortened Lifespan, Chronic Fatigue, Weakened Immunity) each with title, severity string, description, warning, and lucide Icon (Heart, Moon, Brain, Clock, Zap, AlertTriangle). cardVariants animates hidden (opacity:0, x:40) to visible with custom stagger delay (i*0.1s). shakeHover defines whileHover: x shake keyframes [-3,3,-3,3,0], boxShadow red glow, borderColor red. RiskCard sub-component renders ur-icon-wrap with Icon, title group, severity badge, description, and warning text. Parent section uses useRef + useInView from framer-motion. Imports UnhealthyRisks.css.

As a frontend developer, implement the TipsPreview section for the Home page. Defines tips array of 3 items (Start Your Morning with Water, Walk 10,000 Steps Daily, Prioritize Quality Sleep) each with number, headline, snippet, and detail. Uses sectionRef with framer-motion useInView (once:true, margin:'-80px'), and useState(flippedCard). handleCardHover sets flippedCard index, handleCardLeave resets to null, handleCardTap toggles (prev===index ? null : index) for mobile support. Section has three-layer structure: tp-deco-bg (translateY --scroll*-0.2px) with gradient+blobs, tp-deco-mid (translateY --scroll*-0.4px) with line+diamonds, and tp-content with AnimatePresence for card flip reveal of detail text. Header animates in with framer-motion when isInView. Imports TipsPreview.css.

As a frontend developer, implement the TransformationCTA section for the Home page. Uses meshRef, btnRef, rootRef. First useEffect animates a GSAP gradient mesh: defines proxy object {g1x,g1y,g2x,g2y,g3x,g3y}, creates a repeating yoyo timeline with two .to() calls (6s each) that update CSS custom properties --tcta-g1x/y, --tcta-g2x/y, --tcta-g3x/y on meshRef via el.style.setProperty. Second useEffect binds mousemove and mouseleave on rootRef for a magnetic button effect: computes distance from cursor to btnRef center, if distance < 180px applies gsap.to(btn, {x: distX*pull, y: distY*pull}) with pull=0.2*(1-dist/maxDist), else snaps back with elastic.out(1,0.5). handleMouseLeave resets btn position with elastic.out(1,0.4). Uses framer-motion for text entrance. Imports TransformationCTA.css.

As a frontend developer, implement the Footer section for the Home page. Defines four link arrays: navigateLinks (Home, About Us, Healthy Life, Daily Tips), healthTipLinks (Balanced Nutrition, Exercise Routines, Hydration Guide, Sleep Hygiene), aboutLinks (Our Mission, Our Story, Community, Contact), legalLinks (Privacy Policy, Terms of Service, Cookie Policy, Disclaimer). socialLinks maps lucide icons (Facebook, Twitter, Instagram, Youtube). Footer renders: ftr-deco with decorative SVG leaf (two path elements with opacity:0.5 second path), ftr-inner with ftr-top grid containing ftr-brand-col (logo with lucide Heart, brand description, social links row with ftr-social-link anchors), and four navigation column groups. currentYear from new Date().getFullYear(). Uses lucide-react Leaf icon decoratively. Imports Footer.css. Note: this component likely appears on all pages — reuse if already created.

As a backend developer, configure FastAPI CORS middleware in main.py to allow requests from the React frontend origin (localhost:3000 for dev, production domain for prod). Add CORSMiddleware with allow_origins from config, allow_credentials=True, allow_methods=['*'], allow_headers=['*']. Add request logging middleware for debugging. Add global exception handler returning structured JSON error responses. Add response caching headers (Cache-Control, ETag) on content endpoints that serve static data. This is a prerequisite for all frontend API calls to succeed. Note: depends on tmp-fastapi-structure (dbda35bb).

As a frontend developer, implement the AboutHero section for the About page. Uses useRef (`statsRef`) and useEffect with GSAP counter animations that tween `.ah-stat-value` elements for four stats (10K+ Lives Inspired, 5+ Years Journey, 200+ Health Articles, 98% Positive Impact) with staggered delays (0.9 + i*0.12s) and power2.out easing. Features decorative background with three absolutely-positioned circles, six floating icon orbs (Leaf, Sun, Apple, Droplets, Heart, Activity with per-icon colors). Main content uses Framer Motion for badge ('Our Story' with dot), h1 headline with `.ah-headline-accent` span, and subheadline — all with `initial opacity:0/y-offset` and staggered animate-in. Stats row references `statsRef`. All styled via AboutHero.css.

As a frontend developer, implement the MissionStatement section for the About page. Includes a D3.js `ArcProgress` sub-component that uses `useRef(svgRef)` and renders a background track arc and an animated fill arc using `d3.arc()`, a `linearGradient` def (#2E7D32 to #66BB6A), tick marks via `d3.range(0,12)`, and a `d3.interpolate` tweened `attrTween` transition (1400ms, 400ms delay) triggered when `revealed` prop is true. The main `MissionStatement` component uses `useInView` from Framer Motion (once, -80px margin) to trigger reveal, and `useRef`/`useState` for satellite tooltip state. Renders four satellite nodes (Apple/Nutrition top, Dumbbell/Fitness right, Droplets/Hydration bottom, Heart/Wellness left) around a central orb. Stats row shows 10K+ Lives Inspired, 500+ Daily Tips, 98% Satisfaction. Also uses GSAP for additional entrance animations. Styled via MissionStatement.css.

As a frontend developer, implement the CoreValues section for the About page. Uses `useInView` from Framer Motion (once, '-80px 0px' margin) attached to `sectionRef`. Section header animates with `headerVariants` (opacity:0/y:20 → visible with staggered custom delays). Three value cards (Simplicity/Layers icon, Inspiration/Zap icon, Clarity/Eye icon) are mapped from the VALUES array and animated with `cardVariants` (opacity:0/y:36 → visible, spring ease [0.22,1,0.36,1], staggered by index). Each card includes an icon wrapper with per-value CSS modifier class (`cv-icon-wrap--simplicity`, etc.), title, description paragraph, and a tag badge. All triggered by `isInView` toggling between 'hidden' and 'visible' animation states. Styled via CoreValues.css.

As a frontend developer, implement the WhyShadowHealth section for the About page. Features a reusable `D3BarChart` sub-component that uses `useRef(svgRef)`, `useRef(containerRef)`, and `useInView` (once, '-60px' margin). On inView, renders a D3 horizontal bar chart: xScale linear 0–100, background rounded rect tracks, animated fill bars (`transition().duration(900).delay(i*150).ease(d3.easeCubicOut)`) colored per data item, and percentage labels via `svg.append('text')`. Two chart instances render: `problemStats` (chronic disease 42% red, physical inactivity 67% #e57373, poor diet 58% #EF9A9A) and `solutionStats` (progress 89% green, engagement 76% #66BB6A, retention 63% #A5D6A7). Problem side lists four `problemPoints` with AlertTriangle icons; solution side lists four `solutionPoints` with CheckCircle icons. Uses Framer Motion `animate` and `useInView` for section reveal. Styled via WhyShadowHealth.css.

As a frontend developer, implement the TeamSection for the About page. Maps a TEAM array of 6 members (Aisha Khan/CEO, Usman Farooq/Nutrition, Sara Rizvi/Wellness, Hamza Baig/Engineering, Nida Akhtar/Content, Zara Qureshi/Community) each with initials, gradient background, bio, tags array, and social links (Linkedin, Twitter, Globe icons from lucide-react). Cards use `cardVariants` with Framer Motion (opacity:0/y:36/scale:0.96 → visible, spring ease [0.34,1.56,0.64,1], staggered by index). Each card renders a gradient avatar circle with initials, member name, role, bio text, tag badges, and social icon links. Uses GSAP for additional card entrance effects and D3 for a supplementary data visualization sub-component within the section. Styled via TeamSection.css.

As a frontend developer, implement the ImpactMetrics section for the About page. Features a custom `useCountUp(target, duration, active)` hook using `requestAnimationFrame`, `useRef(rafRef/startRef)`, cubic ease-out (`1 - (1-progress)^3`), and `useState(count)`. Four `StatCard` sub-components each use `useCountUp` for animated number display (48K+ Users, 1200+ Tips, 34 Communities, 92% Satisfaction). Each StatCard uses `useRef(sparkRef/cardRef)`, `useState(sparkActive)`, GSAP `fromTo` entrance (y:36/opacity:0/scale:0.95 → visible, delay: index*0.1+0.05), and a D3 sparkline rendered in an SVG showing the `growth` array data. `sparkRef` CSS width animates to `stat.sparkWidth`% on `sparkActive`. Section-level `useInView` from Framer Motion (once) triggers all card animations. Icons: Users, Lightbulb, Globe, Heart from lucide-react. Styled via ImpactMetrics.css.

As a frontend developer, implement the JourneyHighlight section for the About page. Registers GSAP `ScrollTrigger` plugin at module level. Renders 8 MILESTONES alternating left/right sides (unhealthy: Skipping Breakfast, Processed Food, Sedentary Lifestyle, Poor Sleep; healthy: Morning Walk, Balanced Nutrition, Daily Hydration, and one more). Each milestone card has an emoji icon, label badge, title, desc, tooltip, barWidth (55–92%), side ('left'/'right'), and year grouping (Year 1–4). Uses `useRef` and `useState` for tooltip visibility and scroll-triggered entrance animations via GSAP ScrollTrigger. D3 is used to render a connecting timeline path/line between milestones. Cards animate in based on scroll position with staggered GSAP tweens. Tooltip content shows on hover. Year labels group milestones. Styled via JourneyHighlight.css.

As a frontend developer, implement the CommunityCall section for the About page. Uses `useRef(sectionRef)` and `useState(visible)` with an `IntersectionObserver` (threshold: 0.2) that sets `visible=true` and disconnects on first intersection. Visibility drives CSS class toggling (`cc-visible`) on badge, h2 headline, `.cc-headline-accent` span, subtext paragraph, stats row, and buttons — enabling CSS transition-based reveal animations. Stats row shows 12K+ Members, 94% Feel Healthier, 50+ Daily Tips with `cc-stat-divider` separators between items. Four trust avatars rendered with initials (AK, SR, MH, FZ). Two CTA buttons: primary 'Start Your Journey' linking to /HealthyLife with ArrowRight icon, and secondary linking to /About with BookOpen icon. Decorative background has grid, three circles. Styled via CommunityCall.css.

As a frontend developer, implement the Footer section for the About page. This is the same Footer component used across all pages (may already exist from Home page task fa6ee083-b874-47f3-8e2b-6f47ca7c56ce). Renders a decorative SVG leaf with two overlapping paths (opacity 1 and 0.5). Brand column includes Heart icon logo, brand description paragraph, and four social icon links (Facebook, Twitter, Instagram, Youtube) with `target='_blank'`. Four link columns: Navigate (Home, About Us, Healthy Life, Daily Tips), Health Tips (Balanced Nutrition, Exercise Routines, Hydration Guide, Sleep Hygiene), About (Our Mission, Our Story, Community, Contact), Legal (Privacy Policy, Terms of Service, Cookie Policy, Disclaimer). Bottom bar shows `new Date().getFullYear()` for dynamic year and a Leaf icon credit line. Styled via Footer.css.

As a frontend developer, implement the HealthyLifeHero section for the HealthyLife page. Uses useRef for heroRef, bgRef, iconsRef, ctaRef, and iconItemsRef array, plus framer-motion useAnimation controls. On mount, controls.start('visible') triggers word entrance animations. GSAP ScrollTrigger timeline scrubs background scale to 1.1 (zoom-in parallax), icon layer scale to 0.85 with opacity 0.4, and CTA glow fade as user scrolls. Renders 8 floating ICONS (Droplets, Apple, Dumbbell, Heart, Salad, Bike, Sun, Flame from lucide-react) with per-icon color and CSS class positioning. Animates two headline rows using wordVariants (accent words animate to #FFCA28, delay i*0.12, duration 0.6) and normalWordVariants (delay i*0.08) via framer-motion motion.span with custom prop. STATS array (10K+ Lives Changed, 30+ Healthy Habits, 95% Success Rate) rendered as stat pills. Imports HealthyLifeHero.css, gsap, ScrollTrigger, framer-motion.

As a frontend developer, implement the HabitCategories section for the HealthyLife page. Uses useRef for sectionRef, bgLayerRef, iconsLayerRef, cardRefs array, and flashRefs array. GSAP ScrollTrigger stagger reveal animates cards from y:50, opacity:0, rotation (even:-2, odd:2) to y:0, opacity:1, rotation:0 with power3.out easing, stagger 0.1, triggered at 'top 75%'. handleMouseEnter calculates card center vs viewport center to apply directional GSAP tilt/lift effects. CATEGORIES array has 4 entries (Nutrition/Utensils, Fitness/Dumbbell, Hydration/Droplets, Sleep/Moon from lucide-react), each with gradient stripe, CTA button linking to #he-slot-healthyhabitsshowcase anchor, and rotationStart value. Uses gsap ScrollToPlugin for smooth scroll-to-section on CTA click. Imports HabitCategories.css, gsap ScrollToPlugin and ScrollTrigger.

As a frontend developer, implement the HealthyHabitsShowcase section for the HealthyLife page. This is the anchor target (#he-slot-healthyhabitsshowcase) linked from HabitCategories CTAs. Renders HABITS array with 4+ entries (hydration, nutrition, exercise, sleep) each containing number, label, title, desc, tip (with em HTML tags rendered via dangerouslySetInnerHTML), icon emoji, gradient, iconBg, iconColor, stat, statLabel, bigIcon, and orbColor fields. Uses useRef for scroll containers and GSAP ScrollTrigger for scroll-driven reveal animations per habit card. Each card features a large decorative bigIcon orb with orbColor radial glow, gradient-bordered icon badge, stat display, and rich description. Imports HealthyHabitsShowcase.css and gsap ScrollTrigger.

As a frontend developer, implement the UnhealthyComparison section for the HealthyLife page. Uses useRef for sectionRef, unhealthyColRef, healthyColRef, bgLayerRef, decoLayerRef. GSAP ScrollTrigger fades the unhealthy column and boosts the healthy column on scroll. Renders two columns: unhealthyHabits array (4 items: Junk Food Bingeing/🍔 badge:High Risk, Sedentary Lifestyle/🛋️ badge:Dangerous, Chronic Dehydration/💧 badge:Harmful, Poor Sleep Habits/😴 badge:Damaging) and healthyHabits array (4 items: Whole-Food Nutrition/🥗 badge:Vital, Daily Movement/🏃 badge:Essential, Optimal Hydration/🥤 badge:Life-giving, Restorative Sleep/🌙 badge:Healing). summaryPills array with red/green dot indicators rendered at bottom. decoIcons array of 8 emoji floaters positioned absolutely around section edges with framer-motion animations. Imports UnhealthyComparison.css, framer-motion motion, gsap ScrollTrigger.

As a frontend developer, implement the BenefitsTimeline section for the HealthyLife page. Uses framer-motion useInView with once:true and margin:'-80px' for scroll-triggered animations. GSAP ScrollTrigger drives timeline line drawing animation. CHECKPOINTS array has 4 entries (Day 1/💧 type:milestone side:right, Week 1/⚡ type:milestone side:left, Month 1/💪 type:achievement side:right badge:'Milestone Reached', Month 3/🌱 type:achievement side:left badge:'Life Changed') rendered in alternating left/right layout. cardVariants animate opacity/y with cubic bezier easing. dotVariants use custom prop for type (achievement gets #FFCA28 glow, milestone gets #2E7D32 glow) with spring bounce scale sequence [0.4,1.25,1]. badgeVariants use spring stiffness:300 damping:18 with 0.35s delay. CheckIcon SVG component renders checkmark for benefit bullets. Each card shows timeframe, title, icon, badge (conditional), and benefits list. Imports BenefitsTimeline.css, framer-motion motion/useInView/AnimatePresence equivalent, gsap ScrollTrigger.

As a frontend developer, implement the ActionableSteps section for the HealthyLife page. Uses useRef, useEffect with GSAP ScrollTrigger, framer-motion motion and useInView. STEPS array has 6 phase cards (Day 1/Rocket, Week 1/Flame, Week 2/CalendarDays, Week 3-4/TrendingUp, Month 1/Shield, Month 2+/Star — all lucide-react icons) each with phase label, title, and 5 bullet strings. CheckmarkSVG component renders a decorative SVG divider (as-check-divider class) between bullet items. useState tracks which step is active/expanded. Cards animate in via framer-motion useInView with stagger. GSAP ScrollTrigger handles scroll-based progress indicator or step highlighting. Each card renders the lucide icon, phase badge, title, and bulleted action list. Imports ActionableSteps.css, framer-motion, gsap ScrollTrigger, lucide-react icons.

As a frontend developer, implement the SuccessStories section for the HealthyLife page. Uses useState for active story index, useRef, framer-motion motion/useInView/AnimatePresence, and ChevronLeft/ChevronRight/ArrowRight lucide-react icons. STORIES array has 4 entries (Sara Ahmed ss-avatar-1, Usman Malik ss-avatar-2, Aisha Khan ss-avatar-3, Bilal Raza ss-avatar-4) each with initials, avatarClass, name, location, quote string, emphasis substring for bold highlighting, metric string, metricIcon emoji, stars count (all 5), and href. StarRating sub-component renders ★ spans in ss-stars container. StoryCard sub-component uses useInView (once:true, margin:'-80px') for entrance animation (opacity:0→1, y:40→0, duration:0.55, stagger by index*0.1) and whileHover (y:-8, rotateY:3, rotateX:-2) 3D tilt effect. AnimatePresence handles card transition on prev/next navigation. Imports SuccessStories.css, framer-motion.

As a frontend developer, implement the CallToActionBanner section for the HealthyLife page. Uses useRef for rootRef, bgRef, iconsLayerRef, iconRefs array, btnWrapperRef, gsapCtx, orbitTl. useState for particles array with useRef particleId counter for particle burst effect on CTA click (useCallback). GSAP animated gradient background on bgRef cycles between two linear-gradient values with yoyo:true repeat:-1 duration:2. ORBIT_ICONS array has 8 icons (Leaf, Droplets, Dumbbell, Heart, Apple, Sun, Wind, Zap from lucide-react) at angles 0/45/90/135/180/225/270/315 with radius 0.36-0.43. GSAP orbit timeline runs 18s repeat:-1 — onUpdate calculates elliptical path (rx=width*0.42, ry=height*0.45) from center, offset by progress*Math.PI*2, repositions each iconRef. BENEFITS array (4 strings) rendered as checklist. AnimatePresence manages particle burst animations on button click. Imports CallToActionBanner.css, framer-motion motion/useAnimation/AnimatePresence, gsap, lucide-react.

As a frontend developer, implement the Footer section for the HealthyLife page. This is the same shared Footer component used across all pages — it may already exist from the Home or About page implementations. Renders a decorative SVG leaf (two overlapping path elements with opacity:0.5 on second) in ftr-deco div. Four link columns: navigateLinks (Home, About Us, Healthy Life, Daily Tips), healthTipLinks (Balanced Nutrition, Exercise Routines, Hydration Guide, Sleep Hygiene all linking to /DailyTips or /HealthyLife), aboutLinks (Our Mission, Our Story, Community, Contact all to /About), legalLinks (Privacy Policy, Terms of Service, Cookie Policy, Disclaimer). Brand column has Heart icon (lucide-react, strokeWidth:2.5) logo with 'ShadowHealth' text, brand description paragraph, and socialLinks row (Facebook, Twitter, Instagram, Youtube icons from lucide-react, target:_blank). currentYear computed via new Date().getFullYear(). Imports Footer.css.

As a frontend developer, implement the UnhealthyLifeHero section. Uses a `bgRef` with GSAP Ken Burns effect (scale 1→1.08, 18s, yoyo repeat). Renders a `ulh-warning-bar` animated warning stripe, background image div, red gradient overlay, vignette, noise texture, and 3 decorative rings. Content includes a pulsing tag badge with dot, h1 headline with `ulh-headline-accent` span, subheadline paragraph, and a `riskBadges` array (6 items: Processed Foods, Sedentary Lifestyle, Tobacco, Sugary Beverages, Sleep Deprivation, Screen Addiction) rendered as role='list'. Also renders a stats row with 4 stat items (80% diseases preventable, 17yrs life lost, 3x disease risk, 1in4 adults affected). `handleScrollDown` scrolls to `.un-slot-riskintroduction` or window.innerHeight.

As a frontend developer, implement the RiskIntroduction section using GSAP, framer-motion, and D3.js. Renders 8 `RISK_CHIPS` (Heart Disease, Type 2 Diabetes, Mental Decline, etc.) as animated chip badges with icons. Contains a `RiskMeter` sub-component that uses D3 to draw an SVG bar chart for 5 `RISK_BARS` (Sedentary Lifestyle 87%, Poor Nutrition 92%, Sleep Deprivation 74%, Chronic Stress 81%, Tobacco & Alcohol 95%) with animated fill transitions (900ms, staggered 120ms delay per bar, easeCubicOut). Uses a `hasRun` ref to prevent double-animation. The `animate` prop is passed from a `useInView` hook in the parent. Percentage labels are colored by each bar's accent color (#C62828 to #B71C1C range). SVG is responsive using container clientWidth.

As a frontend developer, implement the UnhealthyHabitsCards section using framer-motion and GSAP. Renders a `habits` array of 4+ cards (Poor Diet, Sedentary Lifestyle, and additional habits) each with: title, desc, stat badge, risk badge label, an icon SVG, and an inline decorative visual SVG. Each card uses framer-motion `whileInView` for entrance animation and `whileHover` scale. Uses `useInView` from framer-motion and GSAP for any additional micro-animations. Cards display a colored `badge` label (e.g. 'High Risk', 'Dangerous'), a stat string (e.g. '80% higher heart-disease risk'), and detailed descriptions referencing Pakistan-specific health statistics. Grid layout collapses responsively.

As a frontend developer, implement the HealthConsequences section using framer-motion, GSAP, and D3.js. Renders 3 `CONSEQUENCES` entries (heart/cardiovascular, obesity/metabolic, mental health) each with: a `reversed` layout flag, `bgWhite` background toggle, tag with icon, title + titleDanger headline, body text, 3 detail bullet points with innerHTML (strong tags), a badge with stat+label, a D3 bar chart (chartTitle + chartData array of 3 bars), and an image with Unsplash src. Uses `useInView` for scroll-triggered entrance. The D3 chart animates bar widths on reveal. `useCallback` is used for chart rendering. Layout alternates left/right image+text based on `reversed` flag. Pakistan-specific statistics embedded in body copy (e.g. 30% of deaths from heart disease).

As a frontend developer, implement the StatisticsSection using GSAP and D3.js. Renders 4 `STATS` cards (17.9M cardiovascular deaths, 39% obesity, 8M tobacco deaths, 422M diabetes). Each `StatCard` uses a custom `useCountUp` hook (rAF-based, 1600ms duration, cubic ease-out, handles decimal values) that activates when `isVisible` is true. Each card also has a `barRef` animated via GSAP `fromTo` (0% → barPercent%, 1.4s, staggered by index * 0.12s, power3.out). Cards display icon emoji, animated number + suffix, label, description text, and source attribution. `accent` prop ('red', 'orange', 'yellow') drives color theming per card.

As a frontend developer, implement the TransitionCTA section using framer-motion and GSAP. Uses `useInView` with `once: true, margin: '-80px'` to trigger visibility. `isInView` drives a `tcta-visible` CSS class and a GSAP shimmer effect on `btnRef` (boxShadow from rgba(0,0,0,0.18) → rgba(255,202,40,0.45), yoyo repeat, 0.9s delay). `counted` state prevents re-triggering. Renders: 3 decorative background orbs, a wave-top SVG divider with two layered paths, a star badge with text 'Your Transformation Starts Now', h2 headline with id='tcta-headline', 3 `TRUST_ITEMS` (Free to Start, No Equipment Needed, Science-Backed Tips), a primary CTA button with btnRef, and a 3-item stats row (10K+ Lives Changed, 85% Feel Better in 30 Days, 200+ Daily Tips). LEAF_PATHS array defined but used decoratively.

As a frontend developer, implement the FAQSection using framer-motion AnimatePresence and GSAP. Renders 5 `FAQ_ITEMS` as an accordion: each item has id, question string, and JSX answer content (paragraphs with strong tags, anchor links to /HealthyLife, and colored `faq-tag` spans in red/green variants). State tracks `openId` for the active accordion item. AnimatePresence wraps the answer body for enter/exit animation. GSAP may be used for icon rotation on open/close. `useCallback` used for toggle handler. Questions cover: habit timeline effects, reversibility of damage, occasional junk food risk, sedentary vs smoking comparison, and a 5th item. Answer content includes specific statistics (30–40% higher CVD risk, 91% diabetes risk increase).

As a frontend developer, implement the shared Footer component for the UnhealthyLife page. This component likely already exists from About and HealthyLife pages — reuse if available. Renders a decorative SVG leaf (two overlapping path elements, second at 0.5 opacity) via `ftr-deco`. Brand column includes Heart icon from lucide-react, 'ShadowHealth' logo text, brand description paragraph, and 4 social links (Facebook, Twitter, Instagram, YouTube) using lucide-react icons. Four link columns: navigateLinks (Home, About Us, Healthy Life, Daily Tips), healthTipLinks (Balanced Nutrition, Exercise Routines, Hydration Guide, Sleep Hygiene), aboutLinks (Mission, Story, Community, Contact), legalLinks (Privacy, Terms, Cookie, Disclaimer). Bottom bar shows dynamic `currentYear` via `new Date().getFullYear()`.

As a frontend developer, implement the Navbar component for the DailyTips page. This component already exists from the HealthyLife page — verify it renders correctly in this page context. The Navbar uses useState for scrolled (window.scrollY > 12 triggers nb-scrolled class) and mobileOpen state, with a useEffect that sets activePath from window.location.pathname and attaches a passive scroll listener. The NAV_PAGES array includes About, HealthyLife, UnhealthyLife, and DailyTips routes. Features include a Heart icon logo, desktop nav links with nb-active class on current path, a desktop CTA linking to /DailyTips, and a hamburger button toggling nb-mobile-menu and nb-mobile-overlay. The mobileOpen state also controls document.body.style.overflow to prevent background scroll. Uses lucide-react Heart and ArrowRight icons.

As a frontend developer, configure a centralized API client for the React frontend. Set up axios or fetch-based API service with base URL from environment variable (REACT_APP_API_URL), request/response interceptors for error handling, and typed response interfaces for all API resources (HealthTip, HealthHabit, PlatformStat, Milestone). Create custom React hooks: useHealthTips(), useHealthHabits(), usePlatformStats() with loading/error states. This is a prerequisite for all frontend section components that fetch dynamic data from the FastAPI backend.

As a frontend developer, implement global smooth scrolling behavior required by SRD Section 3 ('smooth scrolling for professional feel') and Section 7 (parallax interaction model). Add scroll-behavior: smooth to the CSS html element. Register GSAP ScrollToPlugin globally in gsap-config.js. Implement a custom useScrollToSection hook that wraps gsap.to(window, {scrollTo: target, duration: 0.8, ease: 'power2.inOut'}) for programmatic scroll. Add scroll-to-top behavior on React Router route changes via a ScrollToTop component in App.jsx that calls window.scrollTo(0,0) on pathname change. This supports Navbar anchor links and HabitCategories CTA scroll-to-section behavior. Note: depends on c58b46a8 (GSAP setup) and 8d78edaf (React Router setup).

As a frontend developer, implement the DailyTipsHero section. It uses framer-motion useAnimation and a gsap timeline for entrance animations on the hero card, headline, stats row, and floating icons. STATS array shows '50+ Daily Tips', '6 Health Areas', '10 min Daily Commitment'. ICONS array defines 6 floating health icons (water droplet, apple, dumbbell, heart, leaf, sun SVGs) each with a distinct dth-icon-- variant class for positioning and color. The section renders a hero card with a badge, large headline, subtitle, a stats row, and the floating icon cluster. GSAP animates card opacity/y on mount; framer-motion handles staggered stat counter reveals. CSS includes dth-icon-- positional classes and keyframe float animations.

As a frontend developer, implement the DailyTipsIntro section. Uses gsap with ScrollTrigger plugin (registered at module level) and d3 for a mini bar chart. STAT_CARDS array has 3 cards: '30 days to Habit Formation', '1% Daily Improvement', '5 min Small Changes'. Each card has a stat value, suffix, title, desc, barWidth percentage, and iconPath SVG. State includes textVisible (boolean), cardVisible (array of 3 booleans) driven by ScrollTrigger.create on textRef and each cardRef. d3 sets CSS custom property --d3-h on each .dti-d3-bar element based on d3.interpolate(0.3, 1) across D3_BAR_COUNT=10 bars. GSAP count-up animation fires on each card becoming visible. ScrollTrigger triggers start at 'top 85%' and 'top 88%' respectively.

As a frontend developer, implement the MorningRoutineSection. Uses framer-motion useInView, gsap with ScrollTrigger, and d3. TIPS array has 4 items (water, sunrise, stretch, mindful) each with icon emoji, iconVariant, stripeVariant, badge, badgeVariant, title, desc, time, and benefit fields. State tracks progressAnimated, headerVisible, ctaVisible, and visibleCards array. GSAP ScrollTrigger fires on headerRef (top 85%), progressBarRef for a d3-driven circular/linear progress SVG animation, and ctaRef. progressSvgRef uses d3 to draw animated arc progress. Each tip card has a ClockIcon SVG component showing time, a color-coded left stripe, and benefit chip. Cards reveal via ScrollTrigger stagger into visibleCards state array. The header contains an eyebrow label, h2 title, and subtitle.

As a frontend developer, implement the NutritionSection. Uses gsap with ScrollTrigger and d3 for three chart types. NUTRITION_TIPS array has 3 tip objects (balanced-meals, hydration, portion-control), each with checks array (4 bullet points), badge object, chartType ('donut'|'bar'|'area'), and reverse boolean for alternating layout. Three separate d3 chart components are defined inline: DonutChart renders a d3 pie/arc chart (220x220 viewBox) with 4 segments (Vegs 50%, Protein 25%, Grains 15%, Fats 10%) using d3.pie and d3.arc with animated stroke-dashoffset reveal; BarChart renders a horizontal bar chart; AreaChart renders an area sparkline. Each tip section alternates layout direction based on the reverse flag. ScrollTrigger triggers staggered card reveals. Checks render as a checklist with animated bar widths.

As a frontend developer, implement the HydrationSection. Uses useState for glasses tracking (TOTAL_GLASSES=8, ML_PER_GLASS=250), framer-motion useInView, gsap with ScrollTrigger, and d3. TIP_DATA array has 4 hydration tips (meals, lemon, coconut, herbal) each with icon, iconClass for colored wrapper (hs-tip-icon-wrap--meals/lemon/coconut/herbal), badge, badgeClass, name, desc, and benefit. The interactive glass tracker renders 8 GlassIcon SVG components; clicking a glass fills it (useState filled count). GlassIcon is a custom SVG (52x68 viewBox) rendering a trapezoidal glass shape with conditional water fill path, wave effect, and shimmer highlight lines. A d3 arc or progress ring shows ml consumed vs target. ScrollTrigger stagger reveals tip cards. GSAP animates glass fill transition on click.

As a frontend developer, implement the ExerciseSection. Uses d3 for ArcMeter components and gsap with ScrollTrigger. EXERCISE_CARDS array has 6 cards (morning run, yoga, cycling, strength training, HIIT, 10k steps) each with icon emoji, iconColor class (es-green/orange/yellow/red), title, desc, difficulty string, badgeClass (es-badge-easy/medium/hard), and duration. ARC_DATA array has 4 metrics (Cardio Benefits 82%, Flexibility 68%, Strength Gain 75%, Mental Boost 90%) for the ArcMeter visualization. ArcMeter is a d3 component that renders two concentric arcs (background track + animated fill arc) in a given size=88 SVG; stroke-dashoffset animates to the value percentage on ScrollTrigger reveal. Exercise cards display in a responsive grid with difficulty badges. GSAP ScrollTrigger stagger-reveals cards from y:40.

As a frontend developer, implement the MentalWellnessSection. Uses gsap with ScrollTrigger, framer-motion, and d3. WELLNESS_TIPS array has 4 cards: meditation, gratitude journaling, breathing exercises (4-7-8 technique), and social connection — each with id, title, desc, tags array (3 strings), colorClass for icon wrapper (mw-card-icon-wrap--meditation/gratitude/breathing/social), inline SVG icon element, and d3Color hex. Each card renders tags as pill badges. A d3 visualization (likely a radial or bar chart using d3Colors) is rendered in a side panel or behind/within cards. GSAP ScrollTrigger stagger-reveals cards; framer-motion handles individual card hover or entrance animations. A breathing exercise card may include an interactive animated circle that pulses on the 4-7-8 rhythm using gsap timeline.

As a frontend developer, implement the SleepHygieneSection. Uses framer-motion useInView, gsap with ScrollTrigger, and d3 for a sleep phase chart. SLEEP_TIPS array has 5 tips (consistent schedule, dark room, no screens, cool temperature, wind-down) each with icon emoji, title, desc, timing string, and fact string. SLEEP_PHASES array has 7 phase segments (Awake 0.5h, Light 2h, Deep 1.5h, REM 1.5h, Light 1h, Deep 1h, REM 1.5h) with phase name, hours, color, and opacity for d3 stacked bar/area chart. State tracks chartVisible boolean. svgRef holds the d3 sleep phase chart rendered as a horizontal stacked bar with phase labels. scoreRef animates a sleep quality score number via GSAP count-up. tipRefs array drives ScrollTrigger stagger card reveals. ctaRef animates a CTA button on scroll. headerRef animates the section title on enter.

As a frontend developer, implement the WeeklyChallenge section. Uses useState for day completion tracking, framer-motion useInView, gsap with ScrollTrigger, and d3 for a streak sparkline. DAYS array has 7 day objects (short + label). CHALLENGE object defines the 'No Processed Food Challenge' with title, description, benefit, difficulty 'Medium', and 3 steps array. LEADERBOARD array has 5 entries (name, streak string, score, emoji, rank). STREAK_DATA is a 14-point array for d3 line chart. Interactive day tracker renders 7 clickable circles (one per DAYS entry) that toggle checked state, showing a CheckIcon SVG polyline on completion. GSAP ScrollTrigger stagger-reveals leaderboard rows. d3 renders a streak line chart from STREAK_DATA. TrophyIcon and FlameIcon are custom SVG components. CHALLENGE steps render as a numbered checklist below the day tracker.

As a frontend developer, implement the CTASection. Uses framer-motion useInView, gsap, and d3. DECO_ICONS array has 8 lucide-react icons (Apple, Droplets, Heart, Dumbbell, Moon, Wind, Sun, Zap) rendered as decorative floating elements around the CTA card. STATS array shows '10+ Daily Tips', '5 Health Pillars', '100% Free Access'. A D3 concentric rings visualization is drawn on ringsRef SVG (500x500 viewBox, cx/cy=250) with 5 radii [60,100,145,195,240] and arcs at fractional fills; alternate rings use #2E7D32 and #66BB6A fill. GSAP animates the rings SVG: fromTo rotation(-30→0), opacity(0→1), scale(0.85→1) on isInView, then continuous rotation(360deg, 80s, repeat:-1). headlineAccentRef gets a cta-underline-visible class added on scroll reveal. Download and ArrowRight lucide icons used in CTA buttons. CheckCircle icons mark 3 benefit bullet points.

As a frontend developer, implement the Footer component for the DailyTips page. This component may already exist from previous pages (About, HealthyLife, UnhealthyLife) — verify reuse before reimplementing. The Footer renders a ftr-footer element with a decorative SVG leaf (two path elements in a 320x320 viewBox). navigateLinks, healthTipLinks, aboutLinks, and legalLinks arrays each contain 4 link objects routing to /HealthyLife, /About, and /DailyTips. socialLinks array has 4 entries (Facebook, Twitter, Instagram, YouTube) using lucide-react icons rendered as ftr-social-link anchors. The brand column contains the ShadowHealth Heart-icon logo, a brand description paragraph, and the social links row. currentYear is computed via new Date().getFullYear(). No animation state — purely static render.

As a frontend developer, implement performance optimizations to meet the SRD requirement of loading within 3 seconds on 4G. Apply React.lazy() and Suspense for code-splitting all page-level components and heavy section components. Configure image lazy loading with IntersectionObserver for all stock images. Add loading skeleton components for sections that fetch API data. Implement React.memo() on pure section components to prevent unnecessary re-renders. Audit and tree-shake d3 imports (import specific d3 submodules instead of full d3 bundle). Add resource hints (preconnect for Google Fonts, preload for critical CSS). Note: depends on all section implementations being in place.