zen-page

As a frontend developer, implement the HomeHero section for the Home page. Renders a full-viewport hero with three parallax layers: a background layer (translateY * -0.3) with three decorative hh-deco-circle elements, a midground layer (translateY * -0.2) with lines, dots, and an SVG zen enso circle using var(--primary) stroke, and a foreground content layer. The headline uses staggered word reveal via containerVariants (staggerChildren: 0.12, delayChildren: 0.3) with wordVariants (opacity/y fade-up per word); accent words receive hh-word--accent class. A subheadline and CTA fade in using fadeUpVariants with custom delay props. Responsive: stacks vertically on mobile.

As a frontend developer, implement the ZenGarden section for the Home page. This is the most complex section — a @react-three/fiber Canvas scene where each task in the TASKS array (9 tasks with id, name, status, x/z positions) is rendered as a 3D plant. Plants vary by status: 'completed' → fully bloomed FlowerHead component with 6 petal sphereGeometry arranged by angle, 'new' → growing Stem (cylinderGeometry) + Leaf (sphereGeometry) components, 'deleted' → withered/faded state. Uses getTimeOfDay() to determine LIGHT_CONFIG (morning/afternoon/evening/night) adjusting ambient and directional light colors and intensity. OrbitControls and Float from @react-three/drei handle camera and plant floating animation. AnimatePresence manages a 2D tooltip overlay when a plant is clicked/hovered, showing task name and status. useMemo optimizes petal position calculations.

As a frontend developer, implement the TaskInput section for the Home page. Manages useState for task text, isFocused, ripples array, and particles array. On submit (Enter key via handleKeyDown or button click via handleSubmit), triggers: a ripple effect (rippleId pushed to ripples state, cleared after 700ms), 8 particle burst animations (angle-distributed with random distance 30-50px, cycling through 5 colors: #2A9D8F, #A8DADC, #F4A261, #E76F51, #FFB703, varying size 3-7px, cleared after 700ms), then resets task state and refocuses inputRef. The input wrapper animates its background gradient between a flat border and a 135deg gradient (primary→primary_light→accent→secondary) on focus, with an animated boxShadow glow. Two parallax deco layers (bg at -0.2, mid at -0.4) with orbs and lines. Label and input wrapper use whileInView fade-up reveals.

As a frontend developer, implement the TaskFilters section for the Home page. Renders three filter pill buttons (All Tasks/12, Active/7, Completed/5) with useState for active filter id and popKey counter. Each pill is a motion.button with spring-animated backgroundColor (#2A9D8F active, transparent inactive), color (#ffffff active, #2A9D8F inactive), and borderColor transitions (stiffness 200, damping 15). Active pill wrapper animates scale [1, 1.08, 1] on selection. Inactive pills scale 1.04 on whileHover, all pills scale 0.96 on whileTap. Two parallax deco layers (orbs at -0.2, lines at -0.4). Uses role='radiogroup' and aria-checked for accessibility.

As a frontend developer, implement the TaskList section for the Home page. Manages initialTasks array (6 tasks with id, title, done boolean) via useState. toggleTask flips done state by id; deleteTask filters the task out. Tracks activeCount = tasks.filter(t => !t.done).length displayed in tl-heading__count span. AnimatePresence with mode='popLayout' wraps task items for exit animations; empty state (tl-empty) fades in when tasks array is empty. Task rows have a checkbox-style done toggle, task title with line-through when done, and a delete button. Three parallax SVG leaf decorations in midground layer (two var(--primary), one var(--accent) fill). Heading animates in with opacity/y fade-up (0.5s easeOut). Mobile: single column card layout.

As a frontend developer, implement the TaskStats section for the Home page. Renders three StatCard components (Total Tasks/24, Completed/17, Remaining/7) each with a Lucide icon (ListChecks, CircleCheckBig, Clock). Uses a custom useCountUp hook that drives a requestAnimationFrame loop with cubic ease-out (1 - (1-t)^3) to animate numbers from 0 to target over 1500ms. An IntersectionObserver on the section ref (threshold 0.25) sets inView state, which triggers the count-up animation only once on scroll-into-view via observer.disconnect(). containerVariants staggers card entrances (staggerChildren: 0.15); cardVariants fade cards up (opacity/y 20→0, 0.5s); iconVariants do a rotateY 90→0 flip (0.6s). When animStarted, ts-number-glow class applies a CSS glow pulse.

As a frontend developer, implement the HomeInspiration section for the Home page. Uses getTimeOfDay() (hour-based: morning 5-12, afternoon 12-17, evening 17-21, night otherwise) to select one of four quote arrays (morningQuotes, afternoonQuotes, eveningQuotes, nightQuotes, each with 4 entries) and a matching tips string. Quotes contain *asterisk-wrapped* words that render as accent-colored spans. useState tracks current quote index; a rotating interval (or manual next/prev) advances quotes with AnimatePresence fade transitions. getTimeLabel() returns a greeting string ('Good Morning', etc.). The section shows: time-of-day greeting, current quote with formatted accent words, quote attribution, a mindfulness tip block, and optional navigation dots/arrows. Two parallax deco layers maintain zen aesthetic consistency.

As a frontend developer, implement the Footer section for the Home page. This is a minimal footer (701 chars JSX) — a motion.footer that fades in with initial opacity 0, animating to 1 with a 0.8s delay over 1s (easeOut). Contains a ftr-content div with: ftr-brand span ('zen-page'), a decorative ftr-divider, copyright paragraph using new Date().getFullYear() for dynamic year, and a ftr-tagline paragraph ('A calm space for mindful productivity.'). CSS is 1249 chars — straightforward centered layout. Note: this is a page-specific minimal footer distinct from any multi-column shared Footer on other pages.

As a Backend Developer, implement the FastAPI CRUD endpoints for tasks: POST /tasks (create), GET /tasks (list all with optional filter: all/active/completed), GET /tasks/{id}, PATCH /tasks/{id} (update title or done status), DELETE /tasks/{id}. Include Pydantic request/response schemas (TaskCreate, TaskUpdate, TaskOut). All endpoints return appropriate HTTP status codes and error messages. Note: frontend tasks TaskInput, TaskList, TaskFilters, and TaskStats depend on these endpoints.

As a Tech Lead, verify end-to-end integration between the Home page frontend task sections (TaskInput, TaskList, TaskFilters, TaskStats, ZenGarden) and the FastAPI CRUD backend via the global task state layer. Ensure: new tasks POSTed via TaskInput appear in TaskList and ZenGarden; toggling done via TaskList triggers PATCH and updates stats; deleting via TaskList triggers DELETE and fades the 3D plant; TaskFilters correctly filters via GET /tasks?filter=; TaskStats counts reflect real backend data. Verify loading and error states are handled gracefully across all sections.