rustic-page

As a frontend developer, implement the HomeHero section for the Home page. Uses useState, useCallback, useMemo, useRef and useInView from framer-motion. generateParticles(count) creates particle objects with type (leaf/petal/glow), x, delay, duration, size, drift, rotate fields rendered as floating animated elements. GardenSVG sub-component renders a 1200×400 SVG scene with ground ellipses, grass tufts (Q-curve paths), and multiple layered flowers (stem paths, leaf ellipses, petal circles in #FF6F61/#FFD700/#FF8A80 palette). Hero text animates in via useInView with staggered motion variants.

As a frontend developer, implement the TaskGarden section for the Home page. Uses useState, useRef, useCallback and useInView/AnimatePresence from framer-motion. INITIAL_TASKS array has 6 tasks with id, title, dueDate, priority, and state from GROWTH_STATES enum (seed/sprouting/blooming/wilted/harvested). PRIORITY_COLORS and STATE_COLORS maps drive SVG fill colors. Four plant SVG sub-components: SeedPlant (animated ellipse + crack path with pathLength), SproutingPlant (animated stem path + spring-scaled leaf paths), BloomingPlant, WiltedPlant — each using motion.g with spring/easeInOut transitions. Task cards render plant SVGs in an SVG viewBox='0 0 100 150', title, dueDate, priority badge, and growth state selector buttons.

As a frontend developer, implement the TaskList section for the Home page. Uses useState and useRef with useInView/AnimatePresence from framer-motion. initialTasks has 8 tasks with id, title, category, priority (high/medium/low), dueDate, and completed boolean. containerVariants stagger children 0.05s; rowVariants animate x:-20→0 on enter and collapse height/padding/scale on exit. filterVariants animate y:-10→0. CheckIcon, CalendarIcon, TrashIcon are inline SVG sub-components. Renders filterable task rows with animated checkbox toggle (completed state), category badge, priority color indicator, formatted dueDate with CalendarIcon, and delete button with TrashIcon triggering AnimatePresence exit animation.

As a frontend developer, implement the QuickStats section for the Home page. Uses useState, useRef, useCallback with useInView/AnimatePresence from framer-motion and CountUp from react-countup. STATS_INITIAL has 4 entries: Total Tasks (24), Completed (16), In Progress (5), Overdue (3) using FiLayers, FiCheckCircle, FiLoader, FiAlertTriangle from react-icons/fi. containerVariants stagger 0.12s; cardVariants animate y:40→0 with rotateY:-8→0. StatCard sub-component uses useInView on iconRef for icon spin animation (rotate:0→360, scale:0.5→1 over 0.8s). isFlashing prop triggers rotateY bounce and gold box-shadow animation. CountUp animates from prevValue to stat.value over 0.6s with preserveValue. qs-card-shimmer decorative layer per card.

As a frontend developer, implement the TaskForm section for the Home page. Uses useState for formData (title, description, category, priority:'medium', dueDate), focusedField, and form errors; useRef for sectionRef with useInView. FloatingField sub-component wraps inputs with animated motion.label that translates y:-8 and shrinks to 11px fontSize when focused or hasValue; tf-underline span animates scaleX:0→1 on focus; error state triggers x-shake animation [-8,8,-6,6,-3,3,0]. categories array has 6 options; priorities array has high/medium/low with className and color. AnimatePresence shows tf-error-text with SVG error icon on validation failure. Submit button triggers success particle burst animation.

As a frontend developer, implement the CallToAction section for the Home page. Uses useState for magnetic offset {x,y}, useRef for sectionRef and sproutRefs array, useInView with margin:'-60px', and useEffect for GSAP sprouting animations. sprouts config array has 7 entries with left%, delay, height, color (#66BB6A/#81C784/#4CAF50/#A5D6A7). useMagneticHover(radius=50) custom hook tracks mousemove distance from button center and applies dx*strength*0.35 offset via useState; resets on mouseleave. GSAP animates each sprout ref: scaleY:0→1→0.3→1 in repeating cycle with power2.out/power1.inOut easing. Motion section uses useInView for entrance animation. CTA button applies magnetic offset as x/y transform.

As a frontend developer, implement the Footer section for the Home page. Uses useRef with useInView(once:true, margin:'-40px') from framer-motion. navLinks array has Home/Privacy/Terms hrefs; socialLinks has FaGithub, FaTwitter, FaLinkedin from react-icons/fa. containerVariants stagger children 0.08s; itemVariants animate y:20→0. FooterLink sub-component uses motion.a with rest/hover variants animating ftr-underline scaleX:0→1 from left origin over 0.3s. SocialIcon sub-component uses motion.a with whileHover rotate:15 scale:1.2 spring(stiffness:400,damping:15). ftr-decor-layer renders 5 ftr-decor-leaf divs with CSS var(--scroll)*-0.2px parallax translateY. Brand renders 'rustic-page' with ftr-logo-accent span.

As a backend developer, implement the FastAPI task management endpoints to support the frontend Home page sections (TaskForm, TaskList, QuickStats). Create the following REST endpoints: POST /api/tasks (create task with title, description, category, priority, dueDate), GET /api/tasks (list all tasks with optional filter by category, priority, completed status), PATCH /api/tasks/{id} (update task fields including completed toggle), DELETE /api/tasks/{id} (delete a task by ID). Each task document stored in MongoDB with fields: id, title, description, category, priority, dueDate, completed, createdAt, updatedAt. Use Motor (async MongoDB driver) for all DB operations. Return standardized JSON responses. Note: TaskForm, TaskList, QuickStats, and TaskGarden frontend sections depend on these endpoints.

As a frontend developer, implement a centralized API service module (src/services/api.js or src/services/taskService.js) for the rustic-page React app. Create async functions: createTask(taskData), getTasks(filters), updateTask(id, updates), deleteTask(id) — each using fetch or axios against the FastAPI backend base URL (configurable via REACT_APP_API_URL env var). Handle error responses gracefully and return typed task objects. This service will be consumed by TaskForm (createTask), TaskList (getTasks, deleteTask, updateTask for complete toggle), and QuickStats (getTasks for counts). Also implement a simple localStorage fallback for offline resilience as specified in the SRD Non-Functional Requirements. Note: depends on backend CRUD API being available (backend_tasks_api_1).