strong-design

As a frontend developer, implement the HomeHero section for the Home page. This section renders a full hero area with a per-letter staggered headline animation using `splitIntoLetters` helper that splits the HEADLINE constant into individual `motion.span` characters with `staggerChildren: 0.04` and spring letterVariants (`stiffness:300, damping:24`). Uses `useInView` with `once:false, amount:0.3` so animations replay on scroll. An accent line scales in via `scaleX` with a cubic-bezier ease after letter animation completes (`totalLetterDuration * 0.5` delay). Subheadline fades up at `totalLetterDuration * 0.7` delay. Three decorative blurred circles (`.hh-decor-circle--1/2/3`) provide background atmosphere. Apply HomeHero.css styles.

As a frontend developer, implement the TaskCanvas section for the Home page. This is the core interactive kanban board with three columns (todo, inprogress, completed) driven by `INITIAL_TASKS` state. Key sub-components: `DragHandle` (6-dot 2x3 grid), `CelebrationBurst` (8 particles using framer-motion with randomized angles/distances and 5-color palette), and `TaskCard` (with checkbox complete action, delete button, drag handle, priority badge, `isCompleted` strikethrough state). Task cards use `AnimatePresence` for mount/unmount. D3 is imported for potential visualizations within the canvas. Drag-and-drop is implemented with `onDragStart`/`onDragEnd` callbacks and `springTransition`/`bounceTransition` spring configs. `CelebrationBurst` fires on checkbox click using `cardRef.getBoundingClientRect()` for position. Apply TaskCanvas.css styles.

As a frontend developer, implement the TaskInput section for the Home page. This section renders a task creation form with `useState` hooks for `taskText`, `isFocused`, `showSuccess`, and `isSubmitting`. A D3 micro-visualization renders a circular progress arc in an SVG ref (`arcRef`) that updates on every `taskText` change — it draws a background track circle and a filled arc path whose color transitions through `#2E3A59` → `#F4A261` → `#E76F51` based on character usage thresholds (60% and 85% of `maxChars=120`). On submit (Enter key or button click), a 300ms simulated delay fires before resetting state and showing a `showSuccess` toast via `AnimatePresence` for 2s. Border color and box-shadow interpolate between focused/unfocused states via inline styles. The `ti-label` fades in from y:8 at delay 0.1s. Apply TaskInput.css styles.

As a frontend developer, implement the TaskStats section for the Home page. This section displays three animated stat cards (Total Tasks, Completed, Remaining) using `statsConfig` array with Lucide icons (`ListTodo`, `CheckCircle`, `Clock`). The `AnimatedCount` sub-component uses `useMotionValue` + `useTransform` with framer-motion `animate()` to tween numeric values, displaying via a `rounded.on('change')` subscription; each count change also triggers a scale-pop via `motion.span key={value}` with `spring stiffness:400`. Cards stagger in via `containerVariants`/`cardVariants` (y:24, scale:0.96 → visible) triggered by `useInView` with `once:true, margin:'-60px'`. Three interactive buttons (`addTask`, `completeTask`, `resetStats`) mutate the `counts` and `updateKey` state to demo live counter updates. Apply TaskStats.css styles.

As a frontend developer, implement the HomeFeatures section for the Home page. This section renders three feature cards using the `features` array with Lucide icons (`Move`, `CheckCircle`, `Sparkles`) and per-icon color class variants (`hf-icon-wrap--drag/check/clean`). Cards animate in with `containerVariants` stagger (`delayChildren:0.2, staggerChildren:0.15`) and `cardVariants` slide-in from x:-40. Icons use a spring overshoot (`iconVariants` with `ease:[0.34,1.56,0.64,1]`) scaling from scale:0/rotate:-30. A `pulseVariants` accent bar uses an infinite `opacity` keyframe loop combined with a one-time `scaleX` reveal. All animations trigger on `useInView` with `once:true, margin:'-80px'`. Section heading block fades up independently. Includes `.hf-bg-dots` decorative background pattern. Apply HomeFeatures.css styles.

As a frontend developer, implement the HomeCTA section for the Home page. This section renders a call-to-action with a D3-animated decorative SVG background (`svgRef`) that draws 5 concentric arc rings using `d3.arc()` with staggered `transition().delay(i*300).duration(1400)` reveal via `attrTween` interpolating `endAngle`, plus 3 pulsing dot circles with `easeElasticOut` entrance. The primary CTA button (`btnRef`) implements magnetic cursor tracking via `handleMouseMove` that calculates offset from button center and applies it as `magnetOffset` state to a framer-motion `x/y` transform. Click ripple effects are managed via a `ripples` state array rendered through `AnimatePresence`. Section content (heading, subheading, button) animates in via `useInView` with `once:true, margin:'-80px'`. Apply HomeCTA.css styles.

As a Tech Lead, verify the end-to-end integration between the TaskCanvas frontend implementation and the Tasks CRUD backend API. Ensure drag-and-drop status changes (todo/inprogress/completed) trigger PATCH /tasks/{id} correctly, task deletions call DELETE /tasks/{id}, and the initial board state is loaded from GET /tasks. Confirm API responses are handled properly in the UI, error states are gracefully shown, and optimistic UI updates are consistent with server state.

As a Tech Lead, verify the end-to-end integration between the TaskInput frontend section and the POST /tasks backend API. Ensure that submitting the task creation form calls POST /tasks with the correct payload, the new task appears in global state and is reflected across TaskCanvas and TaskStats, and error/success states are handled properly. Confirm the 300ms submit delay and success toast work correctly with real API latency.

As a Tech Lead, verify the end-to-end integration between the TaskStats frontend section and the Tasks CRUD backend API. Ensure the stat counters (Total Tasks, Completed, Remaining) reflect real data from GET /tasks rather than local demo state. Confirm the animated count transitions work correctly as backend data changes, and that interactive demo buttons are replaced or supplemented by live API-driven updates.