jade-page

As a frontend developer, implement the HeroIntro section for the Home page. Uses `useRef` for `sectionRef` and `framer-motion`'s `useInView` (once, -80px margin) to trigger animations. The headline 'Focus on what matters' is split into words then characters via `splitIntoWords`/`splitIntoChars` helpers; each `<motion.span>` has `hi-headline-char` class and staggers in at 0.05s per character index with y:24→0 and opacity:0→1. A `<Feather>` icon from lucide-react fades/scales in. The subheadline paragraph uses a delayed fade-in after all characters complete. Two decorative parallax layers (`hi-deco-bg`, `hi-deco-mid`) use inline `translateY(calc(var(--scroll, 0) * -0.2px))` and `-0.4px` respectively.

As a frontend developer, implement the TaskInput section for the Home page. Manages `taskText`, `isFocused`, and `particleBursts` state via `useState`. `generateParticles` (memoized with `useCallback`) creates 8 particles with randomized angle, distance (30–60px), and size (5–10px). On `handleAddTask`, a burst object is pushed to `particleBursts` then cleared after 800ms via `setTimeout`; task text is reset. The `<motion.input>` animates `borderColor` and `boxShadow` on focus using framer-motion `animate`. `AnimatePresence` renders particle bursts as `<motion.div>` elements that animate out. Two parallax layers (`ti-bg-layer` with orbs, `ti-mid-layer` with dots) use CSS `var(--scroll)` translateY at -0.25px and -0.4px. Enter key triggers `handleAddTask` via `handleKeyDown`.

As a frontend developer, implement the Footer section for the Home page. Uses `useRef` for `separatorRef` and triggers a GSAP `backgroundPosition` animation on the separator element (100% 0, duration 3s, repeat -1, yoyo, power1.inOut) to create an animated gradient separator line. Three `<motion.p>` elements — `ftr-app-info`, `ftr-version`, and `ftr-copyright` — each have a `whileHover` transition that changes `color` to #4A90E2 and increases `letterSpacing` to 0.1em over 0.3s. Displays app name 'jade-page', version '1.0.0', and copyright '© 2026 jade-page'.

As a Frontend Developer, implement a global state management solution for the task list that is shared across section components (TaskInput, TaskList, EmptyState). Use React Context + useReducer (or a lightweight store like Zustand) to manage the canonical task array. Expose actions: ADD_TASK, EDIT_TASK, DELETE_TASK, TOGGLE_TASK, REORDER_TASKS. Wire the state to the localStorage data layer (tmp-localstorage-layer) so every state change is automatically persisted. TaskInput should dispatch ADD_TASK; TaskList should dispatch EDIT_TASK, DELETE_TASK, TOGGLE_TASK, REORDER_TASKS; EmptyState should render only when task array is empty.

As a frontend developer, implement the TaskList section for the Home page. Initializes with 6 hardcoded `INITIAL_TASKS` objects (id, text, completed). Uses `framer-motion`'s `Reorder.Group`/`Reorder.Item` for drag-to-reorder, `useMotionValue` for y-value tracking, and `useAnimationFrame` for live updates. Each `TaskCard` subcomponent manages local `isEditing`/`editText` state, a `cardRef`, and a GSAP floating sway animation (staggered by `index * 0.2`, 3s duration, y:0→8→0, yoyo repeat). Includes `CheckIcon`, `EditIcon`, `SaveIcon`, `DeleteIcon`, and `DragHandle` SVG subcomponents. Callbacks `onToggle`, `onEdit`, `onDelete`, `onSaveEdit`, `onHover`, `onHoverEnd` are passed per card. Cards support inline editing via a text input that replaces the display text.

As a frontend developer, implement the EmptyState section for the Home page. Renders when the task list is empty. Contains a decorative parallax background layer (`es-parallax-bg`) with inline `translateY(calc(var(--scroll, 0) * -0.25px))`. The icon wrapper holds a `<motion.div>` glow ring that loops a `boxShadow` keyframe animation (amber rgba(245,166,35) at 0%, 18%, 6%, 0% opacity over 2s infinite). A breathing `<motion.div>` icon animates `scale: [1, 1.15, 1]` on 2s infinite loop. The SVG clipboard icon includes a body rect, clip rect, and three `<line>` elements for empty rows. Two `<motion.p>` elements — `es-message` and `es-encouragement` — fade in with y:10→0 at delays of 0.4s and 0.9s respectively.

As a Tech Lead, verify the end-to-end integration of the Home page by composing all implemented sections (Header, HeroIntro, TaskInput, TaskList, EmptyState, Footer) into the root App component. Ensure: (1) global task state (tmp-global-state) is correctly passed to TaskInput, TaskList, and EmptyState; (2) the parallax --scroll CSS variable is updated via a single root-level scroll listener and consumed correctly by all sections; (3) GSAP and framer-motion animations do not conflict; (4) EmptyState shows/hides reactively as tasks are added/removed; (5) the app is responsive on desktop and mobile; (6) tasks persist across page reloads via localStorage. Note: depends on all section tasks (17de06d0, 75fcde4d, 8589bb15, 9fc3e25b, aecd3afd, d7482cac) and cross-cutting tasks.