space-landing

As a frontend developer, implement the `LandingHero` section for the Landing page. Use `useRef` for `rootRef`, `headlineRef`, `badgeRef`, `subRef`, `ctaRef`, `statsRef`, `scrollHintRef`, and `statValueRefs` array. Use `useState` for `countersStarted`. Register `gsap` and `ScrollTrigger` plugin. On mount, build a `gsap.timeline` with delay 0.2 that sequences opacity/y entrance animations for badge, headline, sub, cta, stats (with overlapping `-=` offsets), and scroll hint — triggering `animateCounter` for each of the 3 `STATS` items (`{ value: 10000, suffix: '+' }`, `{ value: 99.9, suffix: '%', decimals: 1 }`, `{ value: 50, suffix: '%' }`) using a `gsap.to` counter object with `power2.out` ease. Create a `ScrollTrigger` on `rootRef` that scrubs headline scale (1→0.75) and opacity (1→0.15) as user scrolls past the hero. Add a scroll hint fade-out trigger. Import `../styles/LandingHero.css`, `gsap`, and `gsap/ScrollTrigger`.

As a frontend developer, implement the `TrustBadges` section for the Landing page. Define 4 `BADGES` items: `users` (target 50000, suffix '+'), `compliance` (target 100, suffix '%'), `gdpr` (target 0, displayText 'GDPR'), and `cert` (target 99.9, suffix '%', `isDecimal: true`), each with a colored stroke SVG icon and `colorClass`. Implement the `useAnimatedCounter` custom hook using `useState`, `useRef`, and `useEffect` with `requestAnimationFrame` loop, cubic ease-out (`1 - Math.pow(1-progress, 3)`), and `cancelAnimationFrame` cleanup. Build a `BadgeCounter` sub-component that consumes the hook and renders the animated value with prefix/suffix or `displayText` override. Trigger animation via an `IntersectionObserver` (`shouldAnimate` state) on each badge element. Import `../styles/TrustBadges.css`.

As a frontend developer, implement the `CustomerJourneyMap` section for the Landing page. Define `STAGES` array with 4 items: Lead (Stage 01, color `#2A9D8F`), Prospect (Stage 02, color `#F4A261`), Customer (Stage 03, color `#E76F51`), and a 4th stage — each with `stats` array (4 stat objects with value/label), `activities` string array, SVG icon, subtitle, and description. Use `useState` for `activeStage` and `useRef` for scroll/container refs. Integrate `framer-motion`'s `motion` and `AnimatePresence` for panel transitions between stages. Render a horizontal stage selector with clickable stage tabs that update `activeStage`; animate the active indicator underline. Render the active stage detail panel with `AnimatePresence` exit/enter transitions showing stats grid, activities checklist, and description. Import `../styles/CustomerJourneyMap.css`, `react`, `framer-motion`.

As a frontend developer, implement the `CoreFeatures` section for the Landing page. Define `FEATURES` array with 4 items: `contacts` (Contact Management), `tasks` (Task Scheduling), `sales` (Sales Tracking), and a 4th feature — each with `id`, SVG `icon`, `title`, `teaser`, `backTitle`, `description`, `checklist` array of 5 strings, and `variant` string. Use `useState` for `hoveredId` (or flipped card id). Integrate `framer-motion`'s `motion` component to animate card flip between front face (icon + title + teaser) and back face (backTitle + description + checklist with checkmark bullets) on hover/tap. Apply `variant`-specific CSS class for per-card accent color. Import `../styles/CoreFeatures.css`, `react`, `framer-motion`.

As a frontend developer, implement the `HowItWorks` section for the Landing page. Define `STEPS` array with 4 items: 'Create Your Account', 'Configure Permissions', 'Invite Your Team', 'Monitor & Scale' — each with `number`, `title`, `description`, SVG `icon`, and `iconBadgeClass` (`hiw-icon-badge--1` through `--4`). Use `useState` for `visibleCards` (a `Set`), `visibleConnectors` (a `Set`), and `pulseHidden` boolean. Use `useRef` arrays for `cardRefs` and `connectorRefs`. Set up `IntersectionObserver` via `useCallback` handler (`handleCardIntersection`) that adds card index to `visibleCards` set and sets `pulseHidden` to true for indices > 0; similarly observe connector elements. Render step cards with staggered reveal CSS classes based on set membership, and connector lines between cards that animate in when their connector index becomes visible. Import `../styles/HowItWorks.css`.

As a frontend developer, implement the `Benefits` section for the Landing page. Define `BENEFITS` array with 6 items using lucide-react icons: `Shield` (Enterprise-Grade Security), `Zap` (Lightning-Fast Setup), `Users` (Effortless User Management), `BarChart3` (Real-Time Health Insights), `Lock` (Secure by Default), `Clock` (Zero-Downtime Deploys). Define `PARTICLE_COLORS` array cycling through 4 CSS classes (`bn-particle--primary/secondary/accent/highlight`). Build `BenefitTile` sub-component with `useRef` for `tileRef`, `particlesRef`, `timelineRef`; `useState` for `tapped`; `useRef` for `isMobile`. Implement `spawnParticles` using `useCallback` that kills existing GSAP timeline, removes old particles from `bn-particle-container`, creates new particle DOM elements with random colors from `PARTICLE_COLORS`, and builds a `gsap.timeline` animating tile background/border/shadow to `var(--primary_light)` and animating particle burst. Wire `spawnParticles` to `onMouseEnter` on desktop and `onClick` (with `tapped` toggle) on mobile. Import `../styles/Benefits.css`, `gsap`, `lucide-react`.

As a frontend developer, implement the `UseCases` section for the Landing page. Define `PERSONAS` object with two keys: `admin` (title 'Admin Dashboard', badge 'Administrator', 5-item workflow array, gear SVG icon, ctaLabel 'Explore Admin Tools') and `user` (title 'User Experience', badge 'End User', 5-item workflow array, person SVG icon, ctaLabel 'See User Flow'). Use `useState` for `activePersona` (default `'admin'`). Use `useRef` for panel ref. Integrate `framer-motion`'s `motion` and `AnimatePresence` for panel slide/fade transitions when switching persona. Render a two-button persona switcher toggling `activePersona`; animate selected indicator. In the active panel, render: badge chip, title, description, CTA link (`ctaHref: '/Landing'`), and a numbered workflow list where each step has `title` and `desc`. Import `../styles/UseCases.css`, `framer-motion`.

As a frontend developer, implement the `Testimonials` section for the Landing page. Define `testimonials` array with 6 items (Sarah Chen/CTO Meridian SaaS, Marcus Rivera/Forge Labs, Priya Kapoor/Luminary Health, Daniel Okoye/NovaPay, Emily Larsson/CloudScale, Tomás Gutierrez/Petal Commerce) each with `name`, `role`, `initials`, `avatarIdx`, and `quote`. Define `cardVariants` framer-motion variants with `enter` (x: ±300 based on direction, opacity 0, scale 0.95), `center` (x:0, opacity 1, scale 1), and `exit` states. Use `useState` for `currentIndex` and `direction`. Use `useRef` for autoplay interval ref. Use `useEffect` for 5-second autoplay cycling `currentIndex`. Implement `useCallback` handlers for `handlePrev`/`handleNext` updating both `direction` and `currentIndex`. Render `AnimatePresence` with `custom={direction}` wrapping a `motion.div` card showing `QuoteIcon` SVG, 5 `StarIcon` SVGs, quote text, avatar circle with initials, name, and role. Render prev/next arrow buttons and dot pagination. Import `../styles/Testimonials.css`, `framer-motion`.

As a frontend developer, implement the `Pricing` section for the Landing page. Define `TIERS` array with 3 items: Starter (price '$0', free forever, 5 features, `ctaStyle: 'outline'`), Professional (price '$29/month', `popular: true`, 7 features, `ctaStyle: 'filled'`), Enterprise (price '$99/month', 7 features, `ctaStyle: 'outline'`, 'Contact Sales' CTA). Render a `<section className='pr-root'>` with two parallax background layers (`pr-bg-layer` at -0.25x scroll and `pr-mid-layer` at -0.45x scroll) containing blob and shape divs. Render 3 pricing cards; the Professional card receives a 'Most Popular' badge. Each card shows: name, description, price + period, billingNote, feature list with `CheckIcon` SVGs, and a CTA button styled per `ctaStyle`. Render a `ShieldIcon` guarantee banner below cards. Import `../styles/Pricing.css`.

As a frontend developer, implement the `LandingCTA` section for the Landing page. Use `useRef` for `sectionRef`, `accentRef`, `btnRef`, `arrowRef`, `ring1Ref`, `ring2Ref`, `ring3Ref`. Use `useState` for `visible` (controls headline accent slide-up via CSS class). Wire an `IntersectionObserver` (threshold 0.3) on `sectionRef` that sets `visible` to true on first intersection and unobserves. On mount, create a looping GSAP timeline (`repeat: -1, yoyo: true`) pulsing the 3 ring refs with staggered scale/opacity cycles (ring1: scale 1.08, 3s; ring2: scale 1.05, 3.5s offset 0.3; ring3: scale 1.1, 4s offset 0.6). Implement `handleBtnEnter` (`useCallback`) that animates `btnRef` box-shadow to `rgba(42,157,143,0.45)`, `fromTo` animates `arrowRef` from `{x:-10, opacity:0.4}` to `{x:0, opacity:1}` with `elastic.out(1.2, 0.5)`, and scales all 3 rings to 1.15/1.18/1.21. Implement `handleBtnLeave` that resets box-shadow, arrow, and ring scales. Bind handlers to CTA button via `onMouseEnter`/`onMouseLeave`. Import `../styles/LandingCTA.css`, `gsap`.

As a frontend developer, implement the `Footer` section for the Landing page. Define `linkColumns` array with 3 columns: Product (5 links: Features, Pricing, Integrations, Changelog, API Docs), Company (5 links: About Us, Careers, Blog, Press Kit, Contact), Legal (4 links: Privacy Policy, Terms of Service, Cookie Policy, GDPR) — all `href: '/Landing'`. Define `socialIcons` array with 4 items: Twitter (X logo SVG with path fill), LinkedIn (path fill SVG), GitHub (complex path fill SVG), YouTube (partial SVG). Use `useState` for newsletter email input value and submission state. Render footer with logo + tagline, the 3 link columns, a newsletter signup form (`<input>` + submit button), social icon row, and a bottom bar with copyright text and legal links. Import `../styles/Footer.css`. Note: this component may already exist from a previous page if shared.