golden-application

As a frontend developer, implement the `HomeHero` section for the Home page. Build a full-screen hero with a `@react-three/fiber` `Canvas` and `OrbitControls` from `@react-three/drei` rendering a 3D galaxy scene using `THREE` particle geometry driven by `useMemo` and `useFrame`. Integrate a `motion` + `AnimatePresence` task card carousel cycling through a 15-item `TASKS` array (each with `name`, `desc`, `badge`, `urgent`, `tags` fields) with `useState` for `activeIndex` and `useRef` for canvas. Include `useCallback` for interaction handlers and `useThree` for camera access. Render badge variants ('In Progress', 'Urgent', 'Planned') and tag chips per task. Style with `HomeHero.css`.

As a frontend developer, implement the `HomeTaskQuickAdd` section for the Home page. Build a form card with `useState` hooks for `value`, `isFocused`, `submitted`, `showSuccess`, `particles`, and `glowPos`. Implement `handleMouseMove` with `useCallback` tracking cursor position relative to `.htqa-input-wrapper` via `getBoundingClientRect` to drive a CSS glow effect. Implement `spawnParticles` spawning 8 particles with angles spread across 360° using `PARTICLE_COLORS` (`#f97316`, `#f59e0b`, `#fbbf24`, `#3b82f6`, `#f1f5f9`) cleared after 600ms. On submit, trigger particles and show success state for 1800ms then reset. Animate the card with `motion.div` `whileInView` slide-up. Include parallax `.htqa-deco-bg` and `.htqa-deco-mid` layers. A `.htqa-card-label` with a star SVG icon and 'Quick Add' label. Style with `HomeTaskQuickAdd.css`.

As a frontend developer, implement the `HomeTaskOverview` section for the Home page. Build the section with `useInView` from `framer-motion` (once, margin '-60px') and a `window.matchMedia('(min-width: 768px)')` listener via `useState` and `useEffect` to toggle between `accentBarVerticalVariant` (desktop, `scaleY`) and `accentBarVariant` (mobile, `scaleX`). Animate the `.hto-accent-bar` with the responsive variant. Render a staggered title using `titleWords` array `['Your', 'Tasks,', 'Your', 'Universe']` with `wordVariant` (blur+fade+translateY per word). Animate `.hto-label` with `labelVariant` (letterSpacing from '0.6em' to '0.25em'). Animate subtitle with `subtitleVariant`. Include parallax `.hto-deco-bg` and `.hto-deco-mid` layers. Style with `HomeTaskOverview.css`.

As a frontend developer, implement the `HomeTaskGrid` section for the Home page. Build a task card grid where each card renders a `@react-three/fiber` `Canvas` (via `IconCanvas`) inside `Suspense` displaying one of six rotating 3D geometries: `RotatingCube` (boxGeometry 1.1³), `RotatingPyramid` (coneGeometry 4-sided), `RotatingSphere` (icosahedronGeometry wireframe), `RotatingTorus` (torusGeometry), `RotatingOctahedron`, `RotatingDodecahedron` — each using `useFrame` for continuous rotation on y/x/z axes with metalness 0.55–0.7 materials. `geometryIndex` cycles via modulo. Use `useState` for selected card, `useRef` for canvas refs, `AnimatePresence` for card detail panel transitions. Canvas configured with `alpha: true`, `dpr={[1,2]}`, `camera fov=40`. Style with `HomeTaskGrid.css`.

As a frontend developer, implement the `HomeTaskStats` section for the Home page. Build the section with a custom `useCounter(target, duration, start)` hook using `requestAnimationFrame` with cubic ease-out (`1 - Math.pow(1 - progress, 3)`) counting up to `TASK_COUNT = 24` over 1200ms when `isInView` triggers (via `useInView` once, margin '-80px'). Render `.hts-orbit-ring` and `.hts-orbit-ring-inner` decorative rings plus `.hts-glow` behind the animated count number. Render two orbiting emoji elements: primary `🌟` on a 6s infinite linear rotation, secondary on 8s starting at 180°. Animate count number with spring `scale: 0.6→1` on view entry. Include parallax `.hts-deco-bg` and `.hts-deco-mid` layers. Style with `HomeTaskStats.css`.

As a frontend developer, implement the `HomeEmptyState` section for the Home page. Build the component with `useState` for `isEmpty` (static true) wrapped in `AnimatePresence` with an `exit` fade. Render a `motion.section` with opacity 0→1 over 0.8s. Include parallax `.hes-deco-bg` and `.hes-deco-mid` layers plus a `.hes-starfield` overlay animating to `opacity: 0.15` over 2s with 0.3s delay. Render an `.hes-icon-wrap` with spring scale animation (stiffness 200, damping 18) containing `.hes-icon-ring`, `.hes-icon-ring-outer` pulsing rings and an SVG globe/grid icon (circle, latitude/longitude path arcs). Animate headline 'Explore empty space' with accent span, subtext paragraph, and a CTA button each with staggered y+opacity transitions. Include a `.hes-top-line` accent. Style with `HomeEmptyState.css`.

As a frontend developer, implement the `HomeCTA` section for the Home page. Build the component with `useScroll` (target `sectionRef`, offset `['start end', 'end start']`) and `useTransform` mapping `scrollYProgress` [0,1] to `gradientPos` ['0%','100%'] for a scrolling gradient `backgroundPosition` on the headline. Implement `spawnParticles` with `useCallback` spawning 14 particles in a full circle from button center using `getBoundingClientRect`, random angle jitter ±0.5, distance 60–160px, size 6–14px, from `PARTICLE_COLORS` 12-color array; cleared after 800ms rendered via `AnimatePresence`. Render `.hcta-top-line` accent, parallax `.hcta-deco-bg`/`.hcta-deco-mid`, headline with `whileInView` slide-up, subheading, and button row with `btnRef`. Style with `HomeCTA.css`.

As a frontend developer, implement the `Footer` section for the Home page. Note: this component may already exist from a previous page — reuse if available. Build the `Footer` with three link columns defined in `columns` array ('Product', 'Company', 'Resources', each with 5 links to '/Home'). Use `motion.div` with `containerVariants` (staggerChildren 0.12, delayChildren 0.1) and `whileInView` trigger (once, margin '-40px'). Animate each column via `columnVariants` (y: 30→0, opacity). Render social icons `FaGithub`, `FaTwitter`, `FaLinkedin`, `FaDiscord` from `react-icons/fa` in a `motion.div` with `socialContainerVariants` (staggerChildren 0.08) and individual `socialItemVariants` (spring stiffness 300, damping 20, scale 0.8→1). Include `.ftr-brand` with logo SVG star polygon and `.ftr-tagline`. Add parallax `.ftr-deco-bg`. Style with `Footer.css`.

As a Tech Lead, verify the end-to-end integration between the HomeTaskQuickAdd frontend section and the Tasks CRUD backend API. Ensure the quick add form submits a POST /api/tasks request, the response is handled correctly, the new task appears in the global state and HomeTaskGrid, task count in HomeTaskStats updates, and HomeEmptyState hides when tasks exist. Confirm error states and loading indicators are handled gracefully.

As a Tech Lead, verify the end-to-end integration between the HomeTaskGrid frontend section and the Tasks CRUD backend API. Ensure tasks are fetched via GET /api/tasks on page load and rendered in the grid, mark-complete triggers PUT /api/tasks/:id and updates the UI, delete triggers DELETE /api/tasks/:id and removes the card, and edit/update flow triggers PUT /api/tasks/:id with updated fields. Verify the HomeTaskStats count reflects real task data.