sky-page

As a frontend developer, implement the HomeHero section for the Home page. Render a full-width hh-hero section with five animated CSS cloud divs (hh-cloud--1 through hh-cloud--5) drifting via CSS keyframes. Use two framer-motion variant sets: springUp (staggered y:40→0, opacity, spring stiffness 80 damping 14) for the badge, h1 tagline with hh-tagline-accent span, subtitle paragraph, and CTA row; and stickySpring (y:60→0, scale 0.85→1, delay 0.5 + i*0.15) for three hardcoded stickyNotes preview cards (yellow/blue/pink with Pending/In-progress labels). Include hh-cta-primary button (whileHover scale 1.04, whileTap scale 0.96) with inline SVG plus icon, and hh-cta-secondary button. Apply HomeHero.css gradient sky background.

As a frontend developer, implement the HomeTaskInput section for the Home page. Manage state: task (string), isFocused, validationState ('idle'|'error-whitespace'|'error-length'|'hint'|'valid'), showSuccess, scrambledLabel, hasScrambled. Use useMotionValue/useSpring/useTransform from framer-motion for magnetic button effect (btnX/btnY springs stiffness 150 damping 15) and animated underline width (underlineWidth spring 0→100% on focus). Implement kinetic typography scramble effect on first focus using SCRAMBLE_CHARS interval (30ms, iterating LABEL_TEXT.length steps). Wire getValidation callback for real-time char validation (MAX_CHARS=120, min trim 2). handleSubmit clears input and triggers showSuccess for 1200ms with AnimatePresence success overlay. Import Plus, Check, AlertCircle, Sparkles from lucide-react. Apply HomeTaskInput.css.

As a frontend developer, implement the HomeTaskList section for the Home page. Manage tasks state initialised with 6 INITIAL_TASKS objects (id, text, time). Render an htl-grid motion.div with layout prop wrapping AnimatePresence (mode='popLayout'). Each task maps to a motion.div with noteEntrance variants (hidden: opacity 0, y -60, scale 0.85, rotate -4; visible: spring stiffness 260 damping 22, delay i*0.08; exit: x 120, y -30, scale 0.7, rotate 12). Apply hoverSpring (scale 1.035, y -6, boxShadow) and tapSpring (scale 0.97) motion props. Color each note via getColorForIndex (NOTE_COLORS: yellow/blue/green/pink/orange/lavender) and data-tilt attribute via getTilt. Include delete button calling handleDelete(id) via useCallback. Show htl-heading with task count badge. Apply HomeTaskList.css responsive grid (2-3 columns desktop, 1 column mobile).

As a frontend developer, implement the HomeFooter section for the Home page. Render a motion.footer with whileInView opacity 0→1 trigger (viewport once:true, margin '-20px', duration 0.5 easeOut). Inside hf-inner: hf-brand div with a motion.span hf-logo-dot that pulses via animate scale [1,1.3,1] on a 3s infinite easeInOut loop, plus hf-brand-name 'sky-page' text. Render an hr.hf-divider, then hf-info row with tagline 'Simple task management, beautifully done.', hf-info-sep, and dynamic copyright using new Date().getFullYear() with hf-heart span for the ♥ character. Include hf-links with a /Home anchor. Apply HomeFooter.css with text_muted #7F8C8D, translucent white background, and top border rgba(0,0,0,0.1).

Implement FastAPI backend endpoints for task management: GET /api/tasks (list all tasks), POST /api/tasks (create task with text and timestamp), DELETE /api/tasks/{task_id} (remove task). Include Pydantic request/response models (TaskCreate, TaskResponse). Add CORS middleware configured for frontend origin. Note: frontend section tasks (HomeTaskList, HomeTaskInput) depend on these endpoints for persistence layer integration.

As a frontend developer, implement the HomeEmptyState section for the Home page. Manage hoveredLetter state for per-letter hover interaction on the title text. Use containerVariants (staggerChildren 0.08, delayChildren 0.3) and itemVariants (y:20→0, spring stiffness 120 damping 14) on the hes-container motion.div. Render three sticky note divs: hes-note--back-left (noteFloatAlt: y [0,-4,0], rotate [0,-2,0], 4s loop), hes-note--back-right (noteFloat: y [0,-6,0], rotate [0,1.5,0], 3.5s loop), hes-note--front (y [0,-8,0], 3s loop, whileHover scale 1.08 with mint shadow). Animate title letters individually via letterVariants (rotateX -90→0, spring stiffness 150 damping 12, delay 1.0 + i*0.03). Render encouragingPhrase text and three decorative dots via dotVariants (scale 0→1, delay 0.8 + i*0.12). Apply HomeEmptyState.css with text_muted #7F8C8D and accent #50E3C2.