fiery-todo

As a frontend developer, implement the HomeHeader section for the Home page. Uses framer-motion useSpring (stiffness:300, damping:28) and useTransform for animated dark mode toggle thumb — thumbX animates from 2px to 26px, thumbBg from #F5A623 to #6aadff. Uses gsap.context() for entrance animation (y:-20, opacity:0, duration:0.7, power3.out). GSAP logo scale+rotation bounce on theme toggle (scale:1.12, back.out(1.7) then elastic.out). GSAP title scale pulse on toggle (scale:1.04, elastic.out). useState for isDark, mobileOpen, scrolled. Scroll detection via window.addEventListener sets hh-scrolled class. Refs: headerRef, logoRef, titleRef. AnimatePresence for mobile drawer. Root classes: hh-header, hh-scrolled, hh-dark-mode. NAV_LINKS array with single Home link. Uses hh- CSS prefix.

As a frontend developer, implement the HomeHero section for the Home page. Uses gsap.timeline() to animate CSS gradient background via a proxy object approach — parses hex colors with parseHex(), tweens r/g/b channel values over 8s (power2.inOut) and updates el.style.background on each frame. gradientStops object maps four time periods (morning/afternoon/evening/night) to start/mid/end hex color triples plus label and icon emoji. getTimePeriod() reads new Date().getHours() to select the current period. After initial 8s, cycles to next period with secondary gsap tween. Refs: gradientRef, contentRef, badgeRef, headlineRef, subRef, quoteRef, ctaRef, pinsRef (array). GSAP staggered entrance animations for badge, headline, subheadline, quote, CTA elements. Uses hh-hero CSS prefix (separate from HomeHeader hh- prefix — ensure no CSS class collision).

As a frontend developer, implement the HomeInputSection for the Home page. useState for task (string), isFocused (bool), particles (array), validation ({type, message}), justSubmitted (bool). useRef for inputRef. MAX_LENGTH=120 enforced in handleChange. generateParticles(count) creates radial burst — angle=(2π*i/count)+random offset, distance=40-70px, colors from 6-item palette including #50E3C2, #F5A623, #F8E71C. handleSubmit validates minimum 3 chars, spawns 10 particles via burst array, clears after 800ms setTimeout, shows success validation for 2000ms. ringVariants (spring stiffness:300, damping:25) animate focus ring scale and opacity. particleVariants use custom(p) for x/y/scale/opacity with staggered delays. AnimatePresence wraps validation message and particles. his- CSS prefix.

As a frontend developer, implement the HomeTaskBoard section for the Home page. INITIAL_TASKS array of 6 items with id, title, priority (high/medium/low), date, completed fields. useState for tasks, filter ('All'/'Active'/'Completed'), draggedId, dragOverIndex. sectionRef and cardRefs (object keyed by task id). GSAP scroll-triggered reveal on .htb-card-wrapper elements (gsap.set then ScrollTrigger or fromTo). SVG icon components: CheckIcon (polyline checkmark), EditIcon (edit pen path), DeleteIcon (trash path), CalendarIcon (rect+path). framer-motion AnimatePresence for task enter/exit animations. Drag-and-drop reorder via HTML5 drag events (draggedId/dragOverIndex state). Filter tabs render subset of tasks. Complete/delete/edit handlers update tasks state. GSAP card flip animation on completion (rotateY 180). htb- CSS prefix.

As a frontend developer, implement the HomeEmptyState section for the Home page. framer-motion section with whileHover boxShadow glow (rgba(74,144,226,0.12)). SVG illustration (200x200 viewBox) featuring: corkboard background rect (breathe animation: scale 1→1.1→1, 4.5s infinite, delay 0), notebook lines group (floatY: y 0→-6→0, 5s infinite, delay 0.2), push pin group (breathe delay 0.3, transformOrigin 150px 42px — ellipse shadow, circle head, line needle), pencil group (floatY delay 0.4, rotated rect body and polygon tip). breathe() and floatY() helper functions return motion animate config objects with delay parameter. fadeInUp variants with custom(i) for staggered text reveal (duration 0.6, i*0.15 delay). whileInView with once:true, amount:0.3 viewport. hes- CSS prefix.

As a frontend developer, implement the HomeTaskStats section for the Home page. STATS_DATA array of 4 stat objects: total(24/30), completed(18/24), remaining(6/24), percentage(75/100 with '%' suffix) — each with key, label, desc, value, max, icon SVG, variant string. AnimatedCounter sub-component uses framer-motion useMotionValue(0), useTransform(rounded), and animate() to count from 0 to value over 1.2s (cubic-bezier ease) when inView. useInView hook triggers animations on scroll into view. AnimatedRing sub-component renders SVG circle with animated strokeDashoffset using framer-motion useMotionValue(circumference) and useTransform — radius=28, circumference=2πr. GSAP used for card entrance stagger. useRef for section. useState for display value in counter. 4 stat cards in CSS grid. hts- CSS prefix.

As a frontend developer, implement the HomeFooter section for the Home page. AnimatedLink sub-component uses framer-motion motion.span with initial='rest' whileHover='hover' — link color transitions from #888888 to #4A90E2 (duration 0.3), underline span scaleX spring (stiffness:300, damping:25). footerLinks array: Home (/Home), Privacy (/Privacy), Terms (/Terms). Brand section shows 'fiery-todo' with hf-logo-dot styled dash separator. Description paragraph about minimalist task manager. hf-divider hr element. Copyright line with pulsing heart (motion.span: scale [1,1.2,1], duration:1.5, repeat:Infinity, repeatDelay:3). Dynamic currentYear via new Date().getFullYear(). hf- CSS prefix.

As a Backend Developer, define the SQLAlchemy Task model and create Alembic migration for the fiery-todo application. Table: tasks (id UUID primary key, title VARCHAR(500) NOT NULL, completed BOOLEAN DEFAULT FALSE, priority ENUM('high','medium','low') DEFAULT 'medium', order_index INTEGER NOT NULL DEFAULT 0, created_at DATETIME DEFAULT NOW, updated_at DATETIME ON UPDATE NOW). Run alembic revision --autogenerate and alembic upgrade head. Add seed data with 6 example tasks for local development matching the INITIAL_TASKS pattern used in HomeTaskBoard.