zinc-web

As a frontend developer, implement the HomeHero section for the Home page. Build `hh-root` section with two decorative blob divs (`hh-blob-a`, `hh-blob-b`) and an SVG motif layer containing two wave `<path>` elements with semi-transparent fills and four floating plant icons (`GiSprout`, `GiPlantSeed`, `GiFlowerPot`) as `hh-sprout` spans. Manage `offset` state (`{x, y}`) and `bursts` state array via `useState`; use `useRef` for `btnRef` and `burstId` counter. Implement `handleMouseMove` with magnetic pull logic (0.35 factor, ±16px cap) updating offset. Implement `handleClick` generating 7 burst particles at evenly-spaced angles using `PARTICLE_COLORS` array, stored in `bursts` state and auto-cleared after 750ms. Animate headline elements with `motion` staggered entrance (`delay: 0.05–0.35`). Render the CTA button with `FiPlus` icon wired to `handleMouseMove`, `handleMouseLeave`, and `handleClick`. Use `AnimatePresence` to animate burst particle elements. Apply `HomeHero.css`.

As a frontend developer, implement the TaskGarden section for the Home page. Define `GROWTH_STAGES` array (Seed/Sprout/Growing/Blooming) each with a `GiPlantSeed`/`GiSprout`/`GiPlantRoots`/`GiFlowerPot` icon and stage CSS class. Seed `INITIAL_TASKS` array of 6 tasks with `id`, `title`, `desc`, `stage` (0–3), `due`, `created`, and `done` fields. Use `useState` for reorderable task list. Implement `PlantCard` sub-component as a `Reorder.Item` with `whileHover` (scale 1.04, box-shadow) and `whileDrag` (scale 1.07, cursor grabbing) spring transitions (`stiffness: 300, damping: 20`). Inside `PlantCard` use `AnimatePresence` to mount a `motion.span` checkmark (`FiCheck`) with rotate spring animation when `task.done` is true. Show `FiMove` drag handle, stage icon, task title, description, `FiClock` due date, `FiCalendar` created label, `FiArrowUpRight` detail link, and `FiCircle`/`FiCheck` toggle button. Wrap the list in `Reorder.Group` for drag-to-reorder. Apply `TaskGarden.css`.

As a frontend developer, implement the HomeTaskActions section for the Home page. Manage three state values via `useState`: `taskCount` (init 5), `view` (init 'garden'), and `sort` (init 'recent'). Render `hta-root` section with a `motion.div` bar that enters via `whileInView` (`opacity: 0→1, y: 20→0`, delay 0.15, cubic ease). In the lead row show an `hta-counter` with an animated `motion.span` badge: on `taskCount` key change animate `scale [1, 1.18, 1]` and radial box-shadow pulse using `rgba(233,78,119,...)`. Render an 'Add Task' `motion.button` with `FiPlus`, `whileHover` scale 1.04, `whileTap` scale 0.96, spring (`stiffness: 380, damping: 22`) calling `handleAdd`. In the tools row render a view segmented control mapping `VIEW_OPTIONS` (`FiGrid` Garden / `FiList` List) and a sort segmented control mapping `SORT_OPTIONS` (`FiClock` Recent / `FiFlag` Priority / `FiCheckCircle` Completed), both toggling active state via `data-active`. Apply `HomeTaskActions.css`.

As a frontend developer, implement the HomeEmptyState section for the Home page. Render `hes-root` section with `aria-label='Empty task garden'` containing two decorative blob divs (`hes-blob-1`, `hes-blob-2`). Inside `hes-inner` render a stage div with `hes-halo` pulse background. Animate a `motion.svg` (viewBox 0 0 120 120) that enters with `y: 100→0, opacity: 0→1` via `growthSpring` (`stiffness: 150, damping: 25`, delay 0.1). Inside the SVG animate: a `motion.path` stem (`pathLength: 0→1`, duration 1s, cubic ease, delay 0.25); a left-leaf `motion.path` (scale+opacity spring, delay 0.7); a right-leaf `motion.path` (spring, delay 0.85); a `motion.circle` bud at cx=60 cy=40 r=11 (spring, delay 1.05); a star-burst sparkle `motion.path` (scale+opacity keyframes, delay 1.3); and a `motion.circle` sparkle dot (delay 1.45). Below the SVG render a soil line, empty-state headline, subtitle text, and a `FiPlus`+`GiPlantSeed` CTA button. Apply `HomeEmptyState.css`.

As a frontend developer, implement the Footer section for the Home page. Render `ftr-root` footer with a decorative `ftr-vine` div. Inside `ftr-inner` render `ftr-top` with a brand block containing a `GiPlantSeed` (size 20) sprout logo, 'zinc-web' brand name, and tagline paragraph. Render a `ftr-links` nav (`aria-label='Footer navigation'`) mapping `navLinks` array (`/Home`, `/TaskForm`, `/TaskDetail`) to anchor tags. In `ftr-bottom` render a copyright paragraph using `new Date().getFullYear()` and a 'Built with' attribution row mapping `techStack` array (`['React', 'FastAPI', 'MariaDB', 'Docker']`) to `ftr-chip` spans. Apply `Footer.css`. Note: this Footer component may already exist from another page and can be reused directly.

As a frontend developer, implement the TaskDetailHeader section for the TaskDetail page. This section renders a `<header className="tdh-root">` with: (1) a `motion.div` decorative accent bar that animates `scaleX` from 0→1 on mount with a 0.6s ease transition; (2) a staggered `motion.div` container using `containerVariants` (staggerChildren: 0.1, delayChildren: 0.08) and `itemVariants` (opacity+y: 10→0, 0.45s cubic-bezier); (3) a breadcrumb `<nav>` with an anchor to `/Home`; (4) a garden stage indicator showing a dynamic icon from `gardenStageConfig` (GiPlantSeed, GiSprout, GiFlowerPot, GiPlantWatering from react-icons/gi) with `whileHover` scale+rotate spring animation; (5) a progress bar segment reflecting `stageInfo.progress` (0/33/66/100); (6) status badge with pulsing dot for `pending` state; (7) priority badge; and (8) created/due date metadata. All animation variants, color tokens (--primary, --primary-light, --secondary, --accent), and icon sizing (28px) must match the JSX exactly. Component may already exist if TaskDetail page was partially scaffolded.

As a frontend developer, implement the TaskFormContainer section for the TaskForm page. This section renders a full-page task creation form with a nature/garden theme. Key implementation details from the JSX: (1) State management with 5 useState hooks: `title` (string, max 80 chars via MAX_TITLE), `description` (string, max 250 chars via MAX_DESC), `priority` (string defaulting to 'medium'), `submitting` (boolean), and `feedback` (null or {type, message} object). (2) A decorative `tfc-backdrop` div with three glow spans (tfc-backdrop-glow-top, tfc-backdrop-glow-bottom, tfc-backdrop-glow-left) for ambient background effects. (3) A `motion.div` card with spring animation (initial opacity:0, y:32, scale:0.97 → animated to opacity:1, y:0, scale:1; stiffness:180, damping:22, mass:0.9). (4) Decorative icons GiSprout (size 48) and GiPlantSeed (size 42) positioned as tfc-leaf-decor top-left and bottom-right corners. (5) Animated header with `motion.h1` ('Plant a New Task') and `motion.p` subtitle, each with staggered spring/fade-in transitions (delays 0.05 and 0.15). (6) Priority selector using `priorityOptions` array with three entries (low/medium/high), each with a colored dot class (tfc-priority-dot--low/medium/high) and option class. (7) `handleSubmit` validates title is non-empty, sets submitting=true, then uses setTimeout(900ms) to simulate async submission — resets form fields and sets success feedback on completion; sets error feedback if title is empty. (8) `handleCancel` calls resetForm() clearing all fields and feedback. (9) `dismissFeedback` clears feedback state. (10) AnimatePresence from framer-motion for feedback banners with FiCheckCircle (success), FiAlertCircle (error), and FiLoader (submitting state) icons from react-icons/fi. Wire up the Navbar component (already exists from Home page task 9a4fc7b5-23f8-4195-995e-abdac2332a10) as a layout wrapper. Apply TaskFormContainer.css (8998 chars of styles covering tfc-root, tfc-card, tfc-backdrop glows, tfc-header, tfc-priority-dot color variants, and responsive layout).

As a Backend Developer, implement the FastAPI REST API for task management. Create the following endpoints: POST /tasks (create task with title, description, priority, status), GET /tasks (list all tasks with optional filters for status/priority), GET /tasks/{task_id} (get single task detail), PUT /tasks/{task_id} (update task fields including title, description, priority, status, completed flag), PATCH /tasks/{task_id}/complete (toggle task completion status), DELETE /tasks/{task_id} (delete task). Return appropriate HTTP status codes and JSON responses. Include request/response Pydantic models. Note: frontend tasks 32592edb, 489808d1, 9399ff9c, 5b205c5b, a3b06170, 46cc1e72, 9a4fc7b5 depend on this API.

As a Frontend Developer, configure React Router (v6) for the zinc-web application. Set up routes for: / and /Home (Home page with TaskGarden, HomeHero, HomeTaskActions, HomeEmptyState, Navbar, Footer), /TaskForm (TaskForm page with TaskFormContainer and Navbar), /TaskDetail and /TaskDetail/:id (TaskDetail page with TaskDetailHeader, TaskDetailContent, TaskDetailActions and Navbar). Implement a 404 fallback route. Ensure navigation links in Navbar (task 9a4fc7b5) and Footer (task c92bb08e) resolve correctly to these routes.

As a frontend developer, implement the TaskDetailContent section for the TaskDetail page. This section renders a `<section className="tdc-root">` with rich interactive state. State hooks include: `description` (multi-paragraph string), `isEditing` (bool), `editValue` (string mirror of description), `tags` (array, initial: ['personal','morning-routine','weekly']), `showTagInput` (bool), `newTag` (string). Refs: `tagInputRef` and `textareaRef` are focused via `useEffect` when `showTagInput`/`isEditing` become true. Interactions: (1) inline description editing via Edit3 icon (lucide-react) toggling a `<textarea ref={textareaRef}>` with Save/cancel (Check, X icons) and `handleSave`/`handleCancel` handlers; (2) tag management — tags rendered with `AnimatePresence` and per-tag X remove buttons calling `handleRemoveTag`; a Plus icon reveals an inline tag input with Enter/Escape key handlers (`handleTagKeyDown`) and `handleAddTag` normalizing to lowercase-hyphenated; (3) a decorative `GiOakLeaf` (64px, react-icons/gi) accent div; (4) metadata footer showing `createdDate` ('2026-06-10') and `updatedDate` ('2026-06-14') formatted via `formatDate` using `toLocaleDateString`. Also imports Calendar, Clock, FileText, Tag, Save from lucide-react. Cards use `motion.div` with `whileInView` opacity+y animations (viewport once, margin '-60px 0px'). All state, refs, and interaction logic must be fully wired.

As a frontend developer, implement the TaskDetailActions section for the TaskDetail page. This section renders a `<div className="taa-root">` containing the primary task action controls. State hooks: `completed` (bool, initial false), `showDeleteModal` (bool), `showCompleteModal` (bool), `deleting` (bool), `mousePos` ({x:50,y:50}). Key interactions: (1) Complete/Undo button (`taa-btn--complete` / `taa-btn--undo`) — clicking when not completed triggers `setShowCompleteModal(true)`; when already completed calls `setCompleted(false)`; `handleMouseMove` callback tracks cursor % position within the button via `getBoundingClientRect` for CSS radial gradient effect; (2) Edit button (Pencil icon from lucide-react) — navigates to edit view; (3) Delete button (Trash2 icon) — triggers `setShowDeleteModal(true)`; (4) Two `AnimatePresence`-wrapped modals with `overlayVariants` (opacity fade) and `cardVariants` (spring scale+y: stiffness 450, damping 28, mass 0.9) — a confirm-complete modal and a confirm-delete modal with `Loader2` spinner during `deleting` state (simulated 600ms timeout via `handleDelete`); (5) garden hint bar with `GiSprout` (16px) showing dynamic text based on `completed` state; (6) `springTransition` config (stiffness 500, damping 30, mass 0.8) applied to button press animations. All `useCallback` memoization, modal exit animations, and AlertTriangle/Check/Undo2 lucide icons must be implemented as specified.

As a Frontend Developer, create a centralized API client module (e.g. src/api/tasks.js or src/services/taskService.js) that wraps all HTTP calls to the FastAPI backend. Implement functions: createTask(data), getTasks(filters), getTask(id), updateTask(id, data), completeTask(id), deleteTask(id). Use fetch or axios with a configurable base URL (from env variable REACT_APP_API_URL defaulting to http://localhost:8000). Handle error responses and expose loading/error state patterns. This client should be used by TaskGarden, HomeTaskActions, TaskFormContainer, and TaskDetailActions components to replace mock/static data.

As a Backend Developer, configure FastAPI CORS middleware to allow requests from the React frontend (http://localhost:3000 in development, and the production domain). Add CORSMiddleware with appropriate allowed origins, methods (GET, POST, PUT, PATCH, DELETE, OPTIONS), and headers. Also configure global exception handlers for 404 and 422 validation errors to return consistent JSON error shapes. Set up environment-based configuration using pydantic-settings for DATABASE_URL, CORS_ORIGINS, and APP_ENV variables.

As a Tech Lead, verify the end-to-end integration between the Home page frontend implementation and the Tasks backend API. Ensure TaskGarden loads real tasks from GET /tasks, HomeTaskActions triggers task creation and deletion via the API client, task completion toggle calls PATCH /tasks/{id}/complete, drag-to-reorder persists or gracefully degrades, HomeEmptyState renders correctly when the API returns an empty list, and all interactions work as expected with live data replacing the INITIAL_TASKS mock data.

As a Tech Lead, verify the end-to-end integration between the TaskForm frontend and the Tasks backend API. Ensure TaskFormContainer submits form data to POST /tasks via the API client (replacing the setTimeout simulation), handles API success and error responses in the feedback banner, and redirects or updates the UI correctly after successful task creation. Verify validation messages align with backend validation errors.

As a Tech Lead, verify the end-to-end integration between the TaskDetail frontend and the Tasks backend API. Ensure TaskDetailHeader, TaskDetailContent, and TaskDetailActions load real task data from GET /tasks/{task_id} via the API client (replacing hardcoded mock dates and state). Verify that inline description edits call PUT /tasks/{id}, tag changes persist if stored, the complete action calls PATCH /tasks/{id}/complete, and the delete action calls DELETE /tasks/{id} and navigates back to Home. Confirm garden stage and progress bar reflect actual task data.