epic-page

As a frontend developer, implement the HomeHero section for the Home page. Build the `HomeHero` component using `@react-three/fiber` Canvas with `OrbitControls` from `@react-three/drei`. Implement the `TaskSphere` sub-component with `useRef`, `useState` for `hovered`, and a `useFrame` animation loop that oscillates sphere Y position using `Math.sin` and lerps scale via `THREE.Vector3`. Each sphere maps to a `TASK_CATEGORIES` entry (12 categories with name, count, color). Implement `meshStandardMaterial` with emissive glow and hover opacity changes, plus cursor pointer toggling. Implement `ConnectionLines` sub-component using `useMemo` to build line geometry connecting nearby spheres with a distance threshold. Wire `useScroll`/`useTransform` from framer-motion for parallax effects on the overlay text. Handle sphere click with `useCallback` that projects 3D point to screen coordinates for tooltip positioning. Integrate `AnimatePresence` for tooltip/modal overlay on sphere click. Apply `HomeHero.css` styles.

As a frontend developer, implement the ValueProposition section for the Home page. Build the `ValueProposition` component rendering three `MagneticCard` sub-components sourced from the `features` array (Quick Task Creation with `Zap`, Smart Organization with `FolderKanban`, Real-Time Sync with `RefreshCw`). Implement `MagneticCard` with `useMotionValue` for `cardX`, `cardY`, `rotateX`, `rotateY`, and a `handleFrameUpdate` callback that computes magnetic displacement based on mouse distance from card center using a `MAGNETIC_STRENGTH` of 8 and `maxDist` of 500px with eased falloff. Track `expandedId` state in the parent for accordion-style expand/collapse toggling. Render expandable detail panels with `AnimatePresence` showing `detailTitle`, `detailText`, and tag pills. Apply `colorClass` variants (`vp-icon-wrap--create`, `vp-icon-wrap--organize`, `vp-icon-wrap--sync`) per card. Wire global mouse tracking via `useMotionValue` passed down to cards. Apply `ValueProposition.css` styles.

As a frontend developer, implement the TaskListContainer section for the Home page. Build the `TaskListContainer` component with `useState` for `tasks` (8 pre-seeded items with id, title, status, priority, date, category), `filter` ('all'/'completed'/'pending'), `editingId`, `editValue`, and `currentPage`. Implement `useInView` from framer-motion on `listRef` with `once: true` and `-60px` margin to trigger staggered list entrance. Implement `containerVariants` with `staggerChildren: 0.08` and `itemVariants` with spring animation (`stiffness: 260`, `damping: 24`, x: -24 → 0). Build `toggleComplete` handler that flips task status between 'completed' and 'pending'. Build `startEdit`/`saveEdit`/`cancelEdit` handlers for inline title editing with a controlled input. Implement client-side pagination with `ITEMS_PER_PAGE = 5` and `ChevronLeft`/`ChevronRight` controls. Render filter tabs using `Check`, `Calendar`, `Tag` icons from lucide-react. Apply `AnimatePresence` for task item enter/exit. Apply `TaskListContainer.css` styles.

As a frontend developer, implement the AddTaskSection section for the Home page. Build the `AddTaskSection` component with `useState` for `taskValue`, `isFocused`, `particles`, `submitted`, and `focusOrigin`. Implement `generateParticles()` utility that produces 8 particles distributed at angles around a circle (radius 30–50px) with colors from `['#6366f1','#818cf8','#ec4899','#f59e0b','#a78bfa']`. On input focus (`handleFocus`), increment `particleKeyRef` and generate a fresh particle batch; animate particles outward using `AnimatePresence`. On form submit (`handleSubmit`), set `submitted: true`, show a success state for 1200ms via `setTimeout`, then reset. Render three helper chips (`Zap` Quick capture, `Clock` Auto-scheduled, `Tag` Smart tagging). Render two parallax decorative layers (`ats-deco-bg` at -0.25x scroll, `ats-deco-mid` at -0.45x scroll) with blob and ring divs. Apply `AddTaskSection.css` styles.

As a frontend developer, implement the TaskActions section for the Home page. Build the `TaskActions` component rendering 5 pre-seeded task cards (with id, title, tag, due, priority, completed fields). Implement `RadialMenu` sub-component that renders 3 action buttons (`CheckCircle` complete, `Pencil` edit, `Trash2` delete) positioned radially at angles `[-60, 0, 60]` degrees with `RADIAL_RADIUS = 56px` using `getRadialPosition()` trig helper. Each radial button animates from `scale: 0.3, rotate: -180` to full with spring (`stiffness: 380, damping: 22`) and staggered `delay: i * 0.07`. Implement `hoveredBtn` state within `RadialMenu` to show tooltip labels via `AnimatePresence`. In the parent, track `openMenuId` to show/hide the radial menu per card, and handle `onAction` dispatching for complete/edit/delete operations. Wire `MoreHorizontal` trigger button and `X` close button per card. Apply priority badge color variants and `AlertTriangle` icon. Apply `TaskActions.css` styles.

As a frontend developer, implement the EmptyState section for the Home page. Build the `EmptyState` component with `useState` for `ripples` array. Implement `handleCtaClick` with `useCallback` that captures click coordinates relative to the button, pushes a new ripple object `{ id: Date.now(), x, y }` into state, and removes it after 700ms via `setTimeout`. Render an orbit animation container with a `motion.div` (`es-orbit-ring`) animating `rotate: 360` on infinite linear 12s loop, containing four `es-orbit-dot` divs at cardinal positions. Render a central `motion.div` (`es-center-icon`) pulsing `scale: [1, 1.1, 1]` every 2s with `easeInOut`. Render two parallax decorative layers (`es-deco-bg` at -0.3x scroll, `es-deco-mid` at -0.5x scroll) with blob and ring divs. Render the `ClipboardList` icon (size 48, strokeWidth 1.5), headline 'No tasks yet', subtext, and a CTA button with `AnimatePresence`-driven ripple spans. Apply `EmptyState.css` styles.

As a frontend developer, implement the QuickFeatures section for the Home page. Build the `QuickFeatures` component using `useRef` for `carouselRef` and `wrapRef`. Implement `checkScroll` with `useCallback` that reads `scrollLeft`, `scrollWidth`, and `clientWidth` to set `canScrollLeft`/`canScrollRight` boolean states. Wire scroll and resize event listeners in `useEffect`. Implement `scrollBy` handler that reads the first `.qf-card` element's `offsetWidth` plus 24px gap to compute scroll distance, then calls `el.scrollBy()` with smooth behavior for left/right chevron buttons (`ChevronLeft`, `ChevronRight`). Integrate `useScroll` with `container: carouselRef` and `useTransform` mapping `scrollXProgress [0,1]` to `scaleX [0,1]` for a horizontal progress bar indicator. Render 4 feature cards from the `features` array (`Calendar` Due Dates, `Flag` Priority Levels, `Tag` Custom Tags, `Bell` Smart Reminders) each with `iconClass` and `dotClass` color variants. Apply `QuickFeatures.css` styles.

As a frontend developer, implement the GetStartedCTA section for the Home page. Build the `GetStartedCTA` component with `useState` for `primaryHovered`, `secondaryHovered`, and `isVisible`. Use `useRef` on `sectionRef` and `useAnimation` for `gradientControls`. In `useEffect`, create an `IntersectionObserver` with `threshold: 0.2` that sets `isVisible: true` on entry. In a second `useEffect`, call `gradientControls.start()` with `backgroundPosition` keyframes `['0% 50%', '100% 50%', '0% 50%']` on a 4s linear infinite loop to animate the headline gradient. Render an animated gradient `motion.h2` with inline `background: linear-gradient(90deg, #818cf8, #ec4899, #f59e0b, ...)`, `backgroundSize: '200% 100%'`, and `WebkitBackgroundClip: text`. When `isVisible`, wrap headline text in a `motion.span` with `opacity: 0→1, y: 20→0` entrance. Render three parallax decorative layers with orbs, lines, and diamond divs. Render primary and secondary CTA buttons with hover state tracking. Apply `GetStartedCTA.css` styles.

As a frontend developer, implement the Footer section for the Home page. Build the `Footer` component rendering a `SocialIcon` sub-component for each of 4 social links (`FaGithub`, `FaTwitter`, `FaDiscord`, `FaLinkedin` from react-icons/fa). Implement `SocialIcon` with `useState` for `trails` array and a `handleMouseMove` callback that appends trail particles using a module-level `trailIdCounter`, trims the array to the last 4 entries, and removes each trail after 600ms via `setTimeout`. Render trail particles as `motion.span` elements with `AnimatePresence`, animating from `opacity: 0.9, y: 0, scale: 1` to `opacity: 0, y: 10, scale: 0.3`. Apply `whileHover={{ scale: 1.2, color }}` and `whileTap={{ scale: 0.9 }}` on the anchor with spring `stiffness: 400, damping: 17`. Render `docLinks` (API Reference, Getting Started, Authentication, User Management) and `resourceLinks` (Health Checks, Integration Guide, Deployment, Security) nav columns. Render a slow parallax deco layer at -0.15x scroll. Apply `Footer.css` styles. This component is shared and may already exist from another page — reuse if available.

As a Tech Lead, verify the end-to-end integration between the task management frontend implementation and the Tasks CRUD backend API. Ensure data flows correctly from AddTaskSection (POST), TaskListContainer (GET with pagination and filter), TaskActions (PATCH complete, DELETE), and EmptyState (reactive on empty list). Confirm API responses are handled properly in the UI, loading/error states display correctly, and all CRUD interactions work as expected end-to-end. Note: this task depends on the backend Tasks CRUD API (temp_backend_tasks_api), the global task state setup (temp_global_state), and the existing frontend section tasks for AddTaskSection (38112679), TaskListContainer (560fd7e4), TaskActions (ac527026), and EmptyState (00110879).