super-todo

As a frontend developer, implement the HomeHeader section for the Home page. This section renders an animated header using `framer-motion` with a character-by-character staggered entrance animation for the title 'super-todo'. Each character is wrapped in a `motion.span` using `charVariants` with a custom `delay: i * 0.06` and cubic-bezier easing `[0.22, 1, 0.36, 1]`. A subtitle 'Your tasks, simplified' fades in via `subtitleVariants` after the title completes, and a decorative `hh-accent-line` span scales in horizontally using `lineVariants`. The component uses `initial='hidden'` and `animate='visible'` on all motion elements. Apply `HomeHeader.css` for layout and styling using the `hh-root`, `hh-content`, `hh-title`, `hh-title-char`, `hh-subtitle`, and `hh-accent-line` class names.

As a frontend developer, implement the HomeTaskCarousel section for the Home page. This section renders a horizontally scrollable carousel of `TaskCard` components using `framer-motion` `useMotionValue` and `useTransform` for drag-based scrolling, plus `animate` for programmatic snap transitions. Card width is responsive: `CARD_WIDTH_MOBILE=280` on screens <768px and `CARD_WIDTH_DESKTOP=320` otherwise, with `GAP=20` between cards. Each `TaskCard` supports a 3D flip interaction (toggled via `flipped` state), but flipping is suppressed when clicking the `.htc-checkbox` or `.htc-delete-btn` elements. Cards animate `scale` (1.04 for active, 0.96 for inactive) and `opacity` via spring physics (`stiffness:300, damping:30`). Navigation uses `ChevronLeft`/`ChevronRight` icons from `lucide-react`, and deleted tasks can be restored via a `RotateCcw` undo action. Priority badge classes (`htc-priority-high`, `htc-priority-medium`, `htc-priority-low`) and a `Trash2` delete icon are included. Seven hardcoded demo tasks are seeded in `TASKS`. Apply `HomeTaskCarousel.css` with `htc-*` class names.

As a frontend developer, implement the HomeTaskInput section for the Home page. This section provides a controlled task creation form using `useState` hooks for `taskText`, `priority`, `isFocused`, and `showSuccess`. The `PRIORITIES` array defines three options (`high`, `medium`, `low`) each with pip, active, and dot CSS class mappings (`hti-pip-high`, `hti-priority-active-high`, `hti-dot-high`, etc.). The text input (`hti-input`) is managed via `inputRef` and submits on Enter via `handleKeyDown`. On submit, `handleSubmit` clears `taskText` and `priority`, shows a success state for 1800ms, then resets. The input wrapper (`hti-input-wrapper`) uses `motion.div` with animated `boxShadow` transitioning between focused and unfocused states. An `AnimatePresence` block renders success feedback. The form label animates in with `initial={{ opacity:0, y:8 }}`. Apply `HomeTaskInput.css` with `hti-*` class names.

As a frontend developer, implement the HomeTaskList section for the Home page. This section manages a task list via `useState` initialized with 8 hardcoded `initialTasks` (each with `id`, `name`, `date`, `priority`, and `completed` fields). `toggleTask` flips the `completed` flag and `deleteTask` filters the task out. `hoveredId` state drives hover highlight styling. Task rows animate in via `rowVariants` with staggered `delay: i * 0.05` using `AnimatePresence` and `motion.li` with `layoutId`-based exit animations (`x:30, height:0`). Inline SVG components `CheckIcon` and `TrashIcon` are defined locally. The `PriorityBadge` component conditionally renders `htl-priority--high`, `htl-priority--medium`, or `htl-priority--low` spans. An active task count (`activeCount`) is displayed in the section heading. Apply `HomeTaskList.css` with `htl-*` class names.

As a frontend developer, implement the HomeTaskFilters section for the Home page. This section manages `activeFilter` (default `'all'`) and `searchValue` state. The `FILTERS` array defines three options: `all` (12), `active` (8), `completed` (4). On desktop/tablet, filter options render as pill buttons (`htf-pill`, `htf-pill--active`) inside `htf-row`. The active pill gets a `motion.div` underline using `layoutId='active-underline'` with spring animation (`stiffness:500, damping:35`). A search input with a `Search` icon from `lucide-react` sits inline in `htf-search-wrap`. On mobile (<480px), a `htf-mobile-select` dropdown using a native `<select>` replaces the pills, alongside a search input in `htf-mobile-row`. Apply `HomeTaskFilters.css` with `htf-*` class names.

As a frontend developer, implement the HomeStats section for the Home page. This section uses two internal animated counter components: `AnimatedCounter` and `AnimatedPercentage`, both built with `framer-motion` `useMotionValue`, `useTransform`, and `animate`. Each counter uses `useInView` with `{ once: true, margin: '-40px' }` to trigger counting only when scrolled into view. The section computes `totalTasks=24`, `completedTasks=17`, `remainingTasks=7`, and `completionPct=71%`. Three stat cards are rendered from the `stats` array, each with an icon class (`hs-card-icon--total`, `hs-card-icon--completed`), a number class (`hs-card-number`, `hs-card-number--completed`), and inline SVG icons. A progress bar section renders an `AnimatedPercentage` alongside a visual fill bar. The section root uses `useInView` on `sectionRef` for entrance gating. Apply `HomeStats.css` with `hs-*` class names.

As a Backend Developer, implement the FastAPI endpoints for task management: POST /tasks (create task with title, priority, completed=false), GET /tasks (list all tasks with optional filter by status/search), PATCH /tasks/{id} (update task fields: completed, title, priority), DELETE /tasks/{id} (delete task). Use SQLAlchemy ORM models with Alembic migrations for the Task table (id, title, priority, completed, created_at, updated_at). Return consistent JSON response schemas. Enable CORS for frontend origin.

As a Backend Developer, configure Alembic for database migrations. Create the initial migration for the Task model (columns: id INT PK AUTO_INCREMENT, title VARCHAR(500) NOT NULL, priority ENUM('high','medium','low') DEFAULT 'medium', completed BOOLEAN DEFAULT FALSE, created_at DATETIME, updated_at DATETIME). Configure alembic.ini and env.py to connect to the MySQL/MariaDB database using environment variables. Add a seed script with sample tasks for development.

As a Frontend Developer, configure the global design system and theme for the super-todo app. Create a CSS variables file or theme config with the full color palette: primary (#2C3E50), primary_light (#34495E), secondary (#E74C3C), accent (#F39C12), highlight (#F1C40F), bg (#ECF0F1), surface (rgba(236,240,241,0.8)), text (#2C3E50), text_muted (#95A5A6), border (rgba(44,62,80,0.2)). Set up global reset/base styles, typography, and responsive breakpoints. Install and configure framer-motion and lucide-react dependencies.

As a Tech Lead, verify the end-to-end integration between the HomeTaskInput frontend implementation and the Tasks CRUD backend API. Ensure the task creation form (POST /tasks) submits correctly with title and priority, handles API responses (success/error states), and the newly created task appears in the task list. Note: HomeTaskInput task (id: 6d92d070-fbf0-4621-ba94-5bcf9ade791c) should depend on the Tasks CRUD API task (temp_backend_tasks_api).

As a Tech Lead, verify the end-to-end integration between the HomeTaskList frontend implementation and the Tasks CRUD backend API. Ensure the task list fetches real tasks from GET /tasks, toggleTask calls PATCH /tasks/{id} to update completed status, and deleteTask calls DELETE /tasks/{id}. Confirm data persistence across page reloads. Note: HomeTaskList task (id: 99e50f74-7126-4e0e-a5a7-a2023d856a56) should depend on the Tasks CRUD API task (temp_backend_tasks_api).

As a Tech Lead, verify the end-to-end integration between the HomeTaskFilters frontend implementation and the Tasks CRUD backend API. Ensure filter pill buttons (all/active/completed) pass the correct query parameters to GET /tasks, search input triggers filtered API calls with debounce, and task counts in filter labels reflect real data from the backend. Note: HomeTaskFilters task (id: 08fb7693-865c-41b8-b989-26c6a514833c) should depend on the Tasks CRUD API task (temp_backend_tasks_api).

As a Tech Lead, verify the end-to-end integration between the HomeTaskCarousel frontend implementation and the Tasks CRUD backend API. Ensure the carousel fetches real tasks from GET /tasks instead of hardcoded demo data, checkbox interactions call PATCH /tasks/{id} to toggle completion, and delete button calls DELETE /tasks/{id} with undo support. Confirm carousel renders correctly with varying numbers of real tasks. Note: HomeTaskCarousel task (id: 17baa66c-daf7-4611-a5ce-3902e3ba4a32) should depend on the Tasks CRUD API task (temp_backend_tasks_api).