deep-design

As a frontend developer, implement the LandingHero section for the Landing page. Use `useRef` for `sectionRef` and `useScroll`/`useTransform` from framer-motion to drive parallax effects: `bgY` (0 to -120px), `midY` (0 to -220px), `gridOpacity` (0.08→0.04→0.01), and `gridScale` (1→1.08) keyed to scroll progress. Render a full-viewport `.lh-root` section with a parallax blueprint grid SVG background using nested `<pattern>` elements (`lh-bp-grid-sm` 40x40, `lh-bp-grid-lg` 200x200) with `#2C3E50` strokes. Animate headline with `headlineVariants` (y:40→0, delay 0.15s), subheadline with `subheadlineVariants` (delay 0.35s), badge with `badgeVariants` (scale 0.95→1, delay 0.05s), CTA buttons with `ctaVariants` (delay 0.5s), scroll hint with `scrollHintVariants` (delay 1.2s), and an SVG underline path with `underlinePathVariants` (pathLength draw, delay 0.9s).

As a frontend developer, implement the LandingFeatureHighlight section for the Landing page. Render three flip-card-style feature cards from the `FEATURES` array (Task Creation, Categorization, Completion Tracking), each with a front icon and a back icon defined as inline SVGs. Use `useState` to manage which card is flipped/active. Implement `sectionVariants` (staggerChildren: 0.15, delayChildren: 0.1) and `cardVariants` (opacity 0→1, y 30→0, duration 0.6s) for scroll-triggered entrance animations. Apply `headerVariants` (opacity 0→1, y 20→0) for the section heading. Each card transitions between front and back faces revealing title, description, and dual SVG icons on hover/click.

As a frontend developer, implement the LandingBlueprintConcept section for the Landing page. This section uses `@react-three/fiber` (`Canvas`, `useFrame`, `useThree`) and `@react-three/drei` (`Grid`, `Text`, `RoundedBox`) to render a 3D interactive blueprint canvas. Implement the `DraggableBlock` component with `useState` for `hovered`, `dragging`, and `pos` state, `useRef` for drag plane (`THREE.Plane`) and drag offset, and `useFrame` for physics-based smooth lerp with `velocity` ref. Six `TASK_BLOCKS` are rendered (Design UI, API Routes, Auth Flow, Categories, Database, Testing) with `GRID_SNAP = 2.0` snapping via `snapToGrid`. Each block has colored `emissive` materials using `THREE.Color`. Use `useState`/`useRef`/`useCallback`/`useMemo` for selection state and block position management. Surround the Canvas with framer-motion `AnimatePresence` for the detail panel overlay showing block `desc`, `priority`, `due`, `category`, and `status` fields.

As a frontend developer, implement the LandingTaskManagement section for the Landing page. Render four workflow steps from the `STEPS` array (Create Tasks, Filter & Organize, Mark Complete, Clean Up) using lucide-react icons (`Plus`, `Filter`, `CheckCircle2`, `Trash2`, `ArrowDown`). Use `useRef` for `sectionRef` and `stepsRef`, `useInView` (once: true, amount: 0.25) for entrance trigger, and `useState` for `hoveredStep`, `progressWidth`, and `lineProgress` (array of 3 values). Implement a `scroll` event listener in `useEffect` that calculates section scroll ratio to drive `progressWidth` (0–100%) and `lineProgress` array values for sequential connector line drawing. Animate step cards with `containerVariants` (staggerChildren: 0.18) and `stepVariants` (x: -30→0, scale: 0.95→1). Animate step numbers with `numberVariants` (scale: 0.4→1, rotate: -30→0) and icons with `iconVariants` (y: 16→0).

As a frontend developer, implement the LandingCategories section for the Landing page. Render three category cards from the `CATEGORIES` array (Work/Deep Blue, Personal/Coral Red, Shopping/Amber) using lucide-react icons (`Briefcase`, `User`, `ShoppingCart`). Build the `AnimatedCounter` sub-component using `useState` and `useEffect` with `setInterval` to count up from 0 to each category's `taskCount` when `isVisible` is true. Build the `FlipCard` sub-component using `useState` for `isFlipped`, triggered by `onMouseEnter`/`onMouseLeave` (desktop) and `onTouchStart` (mobile toggle). Apply `motion.div` with `animate={{ rotateY: isFlipped ? 180 : 0 }}` and spring transition (stiffness: 260, damping: 26, mass: 0.8). Front face shows icon ring styled with `category.color`, name, animated count, and 'Hover to explore' hint. Back face (rotateY 180deg) shows color swatch, colorName, and description. Use `useInView` to trigger counter animation.

As a frontend developer, implement the LandingCTA section for the Landing page. Use `useState` for `magnetOffset` ({x,y}), `showParticles` (boolean), `btnText` (string), and `isHovered`. Use `useRef` for `btnRef` and `particleKey` (incrementing key to re-trigger particle animation). Implement `handleMouseMove` to compute clamped magnetic offset (±10px) from button center using bounding rect. Implement `handleClick` to increment `particleKey.current`, set `showParticles` true, change `btnText` to 'Redirecting…', then reset particles after 800ms via `setTimeout`. Generate 8 confetti particles via `generateParticles(8)` — each with randomized `xEnd`/`yEnd` (60–140px radius), `size` (6–14px), color from `['#F39C12','#F1C40F','#E74C3C','#E67E22']`, and staggered `delay`. Animate particles with `AnimatePresence`. Apply section entrance animations: heading (`headingVariants`, y:30→0), subtitle (`subVariants`, delay 0.15s), badge (`badgeVariants`, scale 0.8→1), button (`btnVariants`, spring stiffness:200 damping:18), and divider (`dividerVariants`, scaleX:0→1).

As a frontend developer, implement the LandingFAQ section for the Landing page. Use `useState` for `openId` (tracks which accordion item is expanded; null when all closed). Implement `handleToggle(id)` that sets `openId` to the clicked id or null if already open (single-open accordion). Render 4 FAQ items from the `faqItems` array (what-is, categories, data-safe, delete-tasks) using `AnimatePresence` for mount/unmount transitions. Animate answer panels with `answerVariants` (height: 0→auto, opacity: 0→1 via `collapsed`/`expanded` variants using cubic-bezier [0.4,0,0.2,1]). Animate the active border indicator with `borderVariants` (scaleX: 0.3→1). Apply scroll-triggered item entrance using `itemRevealVariants` with custom `i * 0.1s` delay per item. Include two parallax decorative layers: `.fq-parallax-bg` (diagonal hatching, translateY at -0.2x scroll) and `.fq-parallax-mid` (geometric shapes) driven by CSS custom property `--scroll`.

As a frontend developer, implement the Footer section for the Landing page. Note: this component may already exist from a prior page. Render a `<footer className='ftr-root'>` with two parallax decorative layers: `.ftr-parallax-bg` (blueprint grid, translateY at -0.15x scroll) and `.ftr-parallax-mid` (three `.ftr-mid-dot` elements at -0.35x scroll), both driven by CSS custom property `--scroll`. Render `.ftr-brand` with logo text 'deep-design' and tagline. Render `.ftr-columns` as a `motion.div` with `containerVariants` (staggerChildren: 0.15, delayChildren: 0.1) using `whileInView` (once: true). Map over `linkColumns` array (Product, Company, Resources, Legal — 4 links each) rendering each as a `motion.div` with `colFadeVariants` (y:20→0, opacity 0→1). Inside each column, map links with `columnVariants`/`linkVariants` stagger (staggerChildren: 0.08, y:12→0). Include copyright line in `.ftr-bottom`.

As a frontend developer, implement the Navbar section for the Dashboard page. This component may already exist from the Landing page (task 634d4943-9688-4ad1-954b-a7999895ba80). The Navbar uses useState for userOpen and mobileOpen toggles, useRef for dropdown outside-click detection via mousedown event listener, and useEffect to prevent body scroll when mobile menu is open. It renders NAV_PAGES array with active link detection via window.location.pathname, a user dropdown with chevron animation (nb-chevron--open class toggle), and a mobile hamburger menu. Import from '../styles/Navbar.css'.

Create Alembic migration scripts for initial schema: tasks and categories tables with all columns, indexes, and foreign key constraints. Include a seed migration for default categories. Ensure migrations are reversible (downgrade support).

Set up global state management (React Context + useReducer or Zustand) for tasks and categories. Define stores for: tasks list, categories list, loading states, and error states. Expose actions for all CRUD operations. Wrap the app in the provider so all pages share state without prop drilling.

As a frontend developer, implement the DashboardHeader section for the Dashboard page. Uses framer-motion for three staggered entrance animations: dh-title-group fades in from y:-8 (duration 0.3), dh-breadcrumb fades in with 0.1s delay, and dh-meta-row slides in from y:4 with 0.15s delay. Renders a TASK_STATS array of 4 pill badges (total, active, today, overdue) each with dh-pill-dot color indicator and variant classes dh-pill--total/active/today/overdue. Includes breadcrumb nav linking to /Landing with aria-label. Import from '../styles/DashboardHeader.css'.

As a frontend developer, implement the DashboardSidebar section for the Dashboard page. Uses useState for activeCategory (default 'all') and mobileOpen toggle. Renders a CATEGORIES array of 6 items (Work, Personal, Urgent, Shopping, Health, Learning) each with color dot, name, and count badge as motion.a elements with whileHover x:2 spring animation. AnimatePresence wraps the active indicator. Computes totalCount via reduce. Includes dsb-mobile-bar button with chevron rotation (dsb-mobile-chevron--open) and dsb-body--collapsed class toggle for mobile. Import from '../styles/DashboardSidebar.css'.

As a frontend developer, implement the DashboardWelcomeBanner section for the Dashboard page. Uses useState and useEffect to compute time-aware greeting via getGreeting() (morning/afternoon/evening based on hours) and formatted date via getFormattedDate() with weekday/month/day locale options. Renders TASK_DATA (userName: Alex, totalToday: 5, completedToday: 2) with remaining task count logic. Motion wrapper animates from opacity:0/y:-8 on the dwb-inner container. Includes decorative dwb-accent-strip, dwb-blueprint-bg grid, and dwb-glow radial overlay. dwb-task-pill animates with scale:0.92→1 at 0.15s delay. CTA links to /TaskForm. Import from '../styles/DashboardWelcomeBanner.css'.

As a frontend developer, implement the DashboardTaskStats section for the Dashboard page. Renders a STATS array of 4 stat cards (total:24, completed:14, pending:7, overdue:3) using framer-motion containerVariants with staggerChildren:0.08 and cardVariants animating from opacity:0/y:12. Each card has variant classes dts-card--total/completed/pending/overdue, an icon SVG in dts-icon-wrap with matching color variant, a numeric value display, a badge with variants dts-badge--muted/green/yellow/orange, and a sub-label. The overdue card uses dts-value--overdue for red text emphasis. Import from '../styles/DashboardTaskStats.css'.

As a frontend developer, implement the DashboardTaskFilters section for the Dashboard page. Uses useState for activeFilter (default 'all'), selectedCategory (default 'all-cats'), and dropdownOpen. useRef + mousedown listener closes category dropdown on outside click. Renders FILTERS array (all:24, today:5, overdue:3, completed:11) as motion.button pills with whileTap scale:0.95 spring; overdue pill gets dtf-overdue-dot indicator and dtf-pill--overdue-active class. Category dropdown renders CATEGORIES array with color swatches using AnimatePresence for open/close animation. hasActiveFilters drives a clear-filters button visibility. getFilteredCount() and getCategoryLabel() derive display values. Import from '../styles/DashboardTaskFilters.css'.

As a frontend developer, implement the DashboardTaskList section for the Dashboard page. Uses useState with INITIAL_TASKS array of 7 tasks (fields: id, title, category, categoryKey, dueDate, priority, completed). Implements toggle-complete, delete, and expand interactions. formatDueDate() computes overdue/today/tomorrow/normal labels relative to 2026-05-20. Renders CheckIcon, EditIcon, TrashIcon, CalendarIcon SVG sub-components. Uses framer-motion AnimatePresence for task row enter/exit animations. Tasks display priority badges (high/medium/low), category color chips keyed by categoryKey, due date labels with type-based coloring (overdue red, today amber), and a strikethrough style for completed items. Import from '../styles/DashboardTaskList.css'.

As a frontend developer, implement the DashboardQuickActions section for the Dashboard page. Renders a dqa-bar containing two framer-motion anchor elements: a primary CTA linking to /TaskForm (Create New Task, plus-icon SVG, animates from opacity:0/y:8, whileTap scale:0.97) and a secondary CTA linking to /Categories (Manage Categories, folder-icon SVG, same animation with 0.07s delay). A dqa-divider separates them. A dqa-hint span shows keyboard shortcut hint 'Press C to create a task'. Import from '../styles/DashboardQuickActions.css'.

As a frontend developer, implement the Footer section for the Dashboard page. This component may already exist from the Landing page (task bb0eb27d-d4a9-4a28-9e96-aec2e3eda640). Renders ftr-inner with ftr-top containing ftr-brand (deep-design name + tagline), two ftr-col nav lists: appPages (Dashboard, Task List, New Task, Categories) and resourceLinks (Task Detail, API Docs, Status). ftr-bottom shows dynamic year via new Date().getFullYear() and an ftr-status indicator with ftr-status-dot green pulse. Includes decorative ftr-blueprint-line at bottom. Import from '../styles/Footer.css'.

As a frontend developer, implement the Navbar section for the TaskForm page. This component is shared across pages and may already exist from Landing and Dashboard pages. It uses useState for userOpen and mobileOpen toggles, useRef (dropRef) for outside-click detection, and useEffect hooks to close dropdown on outside mousedown and to lock body scroll when the mobile menu is open. Renders NAV_PAGES array (Dashboard, Task Form, Task List, Task Detail, Categories) as desktop nav links with active state derived from window.location.pathname. Includes a user dropdown button with avatar, username, and animated chevron SVG. Reuse existing nb-* CSS classes from Navbar.css.

As a frontend developer, implement the Navbar section for the TaskList page. This component (Navbar.css) uses useState for userOpen and mobileOpen dropdowns, and a useRef (dropRef) to close the user menu on outside clicks via mousedown event listener. It renders NAV_PAGES array with active link detection via window.location.pathname, a logo with SVG grid icon linking to /Dashboard, desktop nav links with nb-link--active class for current route, a user dropdown button with animated nb-chevron--open class, and a mobile hamburger menu with body scroll lock via useEffect. Note: this Navbar component likely already exists from Dashboard and TaskForm pages — reuse or verify it matches the existing implementation. Depends on Dashboard Navbar task (ee9a60d0-0364-4643-9410-7c0192419d1b) to establish page chain.

As a frontend developer, implement the Navbar section for the Categories page. This component (Navbar.css import) uses useState for userOpen and mobileOpen dropdowns, useRef (dropRef) for outside-click detection via a mousedown event listener, and a useEffect to toggle document.body.style.overflow when the mobile menu opens. Renders NAV_PAGES array with active-link detection via window.location.pathname comparison. Includes an SVG grid logo linking to /Dashboard, desktop nb-links list, a user avatar button with nb-chevron rotation animation, and a mobile hamburger toggle. Note: Navbar component may already exist from previous pages (TaskForm, TaskList, TaskDetail). Chain to Dashboard page via dependency.

Implement FastAPI router for tasks: GET /tasks (list with optional category filter and completion filter), POST /tasks (create with title, description, category_id), PUT /tasks/{id} (full update), DELETE /tasks/{id} (hard delete), PATCH /tasks/{id}/complete (toggle is_complete). Include Pydantic request/response schemas, 404 handling, and input validation.

Implement FastAPI router for categories: GET /categories (list all), POST /categories (create with name and color), PUT /categories/{id} (update name/color), DELETE /categories/{id} (with guard: reject if tasks reference this category, or cascade based on requirements). Include Pydantic schemas and error handling.

As a frontend developer, implement the TaskFormHeader section for the TaskForm page. Uses window.location.search to detect edit mode (checks for 'edit=' query param) and conditionally renders either 'Edit Task' or 'Create New Task' title and matching subtitle strings. Renders a breadcrumb nav (Dashboard › Task List › [title]) using tfh-breadcrumb, tfh-breadcrumb-link, and tfh-breadcrumb-sep CSS classes. Wraps header content in a framer-motion motion.div with initial opacity:0/y:10 animating to opacity:1/y:0 over 0.35s easeOut. Includes an SVG plus icon (tfh-icon), h1 title, subtitle paragraph, a required-fields legend row (tfh-required-dot + tfh-required-text), and a decorative tfh-divider accent line.

As a frontend developer, implement the Footer section for the TaskForm page. This component is shared across pages and may already exist from Landing and Dashboard pages. Renders a ftr-footer element with ftr-inner containing a three-column ftr-top layout: brand column (ftr-brand-name 'deep-design', ftr-brand-tagline), Navigate column mapping appPages array (Dashboard, Task List, New Task, Categories) as ftr-nav-link anchors, and Resources column mapping resourceLinks (Task Detail, API Docs, Status) as ftr-nav-link anchors. ftr-bottom row shows dynamic copyright year via new Date().getFullYear() and a ftr-status indicator with ftr-status-dot span and 'All systems operational' text. Decorative ftr-blueprint-line element at bottom. Reuse existing ftr-* CSS classes from Footer.css.

As a frontend developer, implement the TaskListHeader section for the TaskList page. Uses useState for sortOpen, activeSort (default 'due_date'), sortAsc, and viewMode ('list'/'grid'), plus useRef (sortRef) for outside-click close of sort dropdown. Renders QUICK_STATS array (total=24, active=11, completed=10, overdue=3) as stat chips with variant classes. Top row includes a motion.div title block with framer-motion fade-in (opacity 0→1, y 10→0, duration 0.3), breadcrumb link to /Dashboard, a sort dropdown toggling sortOpen with SORT_OPTIONS (due_date, priority, created, alpha) and direction toggle (sortAsc), and view mode toggle buttons for list/grid. The handleSortSelect function toggles direction if same key is clicked or sets a new sort key. Uses TaskListHeader.css classes like tlh-root, tlh-inner, tlh-top-row, tlh-title-block, tlh-breadcrumb.

As a frontend developer, implement the TaskListFilters section for the TaskList page. Uses useState for searchValue, activeStatus ('all'), activeCategory ('all'), dateFrom, dateTo, and mobileOpen. Renders a search input (tlf-search-input) with live onChange and a clear button (tlf-search-clear--visible when non-empty). STATUS_FILTERS array (all, active, completed) renders as toggle buttons. CATEGORIES array (6 items with color codes) renders as category pills with color dot. Date range inputs (dateFrom/dateTo) allow filtering by due date range. Tracks hasActiveFilters and activeFilterCount for a clear-all button. Uses AnimatePresence and motion from framer-motion with panelVariants (height: 0→auto, opacity 0→1) for mobile filter panel toggle. Active filter chips (status, category, date range) are individually removable via removeStatusFilter, removeCategoryFilter, removeDateFilter. Uses TaskListFilters.css with classes tlf-root, tlf-inner, tlf-search-wrap, tlf-search-icon.

As a frontend developer, implement the TaskListStats section for the TaskList page. Renders a 4-card stats grid using STATS array (total=24, active=11, completed=10, overdue=3) with variant-specific classes (tls-card--total, tls-card--active, tls-card--completed, tls-card--overdue). Uses framer-motion containerVariants with staggerChildren: 0.08 and cardVariants (opacity 0→1, y 12→0, duration 0.35, easeOut) applied via motion.div wrappers. The completed card renders a tls-progress-bar with tls-progress-fill at 42% width. Each card has a tls-card-header with label and icon span, a tls-count with variant class, and a tls-card-sub subtitle. Uses TaskListStats.css with classes tls-root, tls-inner, tls-grid, tls-card, tls-icon.

As a frontend developer, implement the TaskListContent section for the TaskList page. Uses useState to manage INITIAL_TASKS array (8 tasks with id, title, description, category, dueDate, priority, completed fields). Renders task cards using motion and AnimatePresence from framer-motion with cardVariants for enter/exit animations. Each card displays: priority badge (high/medium/low variants), category tag, formatted due date via formatDate() using toLocaleDateString('en-IN'), overdue indicator via isOverdue() comparing dueDate to today, a completion toggle checkbox, task title with strikethrough when completed, description excerpt, and action buttons (edit linking to /TaskForm, delete with confirmation). Toggle completion updates task.completed state. Uses TaskListContent.css with classes for card layout, priority badges, category tags, overdue highlighting.

As a frontend developer, implement the TaskListEmpty section for the TaskList page. Renders a centered empty state using framer-motion: outer container motion.div animates opacity 0→1 and y 18→0 (duration 0.45, easeOut); icon wrap motion.div animates scale 0.85→1 and opacity 0→1 (duration 0.4, delay 0.1). Displays a clipboard SVG icon, h2 heading 'No tasks yet!', and subtext paragraph. Renders three tle-hint-chip spans from hints array (Create a task/plus, Set a category/folder, Track progress/check) with inline SVG icons via iconPaths map. A tle-divider separates hints from the CTA. The CTA is a motion.a linking to /TaskForm with whileHover scale 1.03 and whileTap scale 0.97 spring animation. A secondary tle-secondary-link anchors to /Categories. Uses TaskListEmpty.css with classes tle-root, tle-container, tle-icon-wrap, tle-text, tle-hints, tle-hint-chip, tle-cta.

As a frontend developer, implement the TaskListPagination section for the TaskList page. Uses useState for currentPage (1), perPage (20), and jumpValue ('') with TOTAL_TASKS=47 and PER_PAGE_OPTIONS=[10,20,50]. Computes totalPages via Math.ceil, startItem/endItem for range display. Implements getPageNumbers() logic with ellipsis insertion for pages >7, handling three cases: currentPage ≤ 4, currentPage ≥ totalPages-3, and middle range. Renders hidden div (tlp-root--hidden) when TOTAL_TASKS < 20. Main render includes: tlp-accent-line decorative bar, tlp-info showing 'Showing X–Y of 47 tasks', tlp-perpage-wrap select with PER_PAGE_OPTIONS resetting to page 1 on change, previous/next arrow buttons with disabled states, animated page number buttons via AnimatePresence and motion, ellipsis spans, and a jump-to-page input with handleJumpKeyDown (Enter key) and handleJump validation. Uses TaskListPagination.css with classes tlp-root, tlp-inner, tlp-nav, tlp-info-range, tlp-info-total.

As a frontend developer, implement the TaskListQuickActions section for the TaskList page. Uses useState for allSelected, selectedCount (MOCK_SELECTED=3), bulkOpen, and toast ({message, variant}). Uses useRef (bulkRef) with mousedown listener for outside-click close of bulk action dropdown. BULK_ACTIONS array includes mark-complete, mark-active, a divider entry, and delete (danger=true). handleSelectAll toggles allSelected and sets selectedCount to MOCK_TOTAL (12) or 0. handleBulkAction dispatches variant-specific toast messages and resets selectedCount on delete. handleExport shows 'tqa-toast--accent' toast. handleArchive archives MOCK_COMPLETED (5) tasks with toast. isIndeterminate computed as !allSelected && selectedCount > 0. Toast uses AnimatePresence with motion.div for enter/exit animation and auto-dismiss via setTimeout(2800ms). Renders tqa-root section with tqa-title 'Quick Actions', tqa-actions row containing select-all checkbox, bulk action dropdown button, export button, and archive button. Uses TaskListQuickActions.css.

As a frontend developer, implement the Footer section for the TaskList page. Renders a ftr-footer element with ftr-inner container. Top section (ftr-top) includes: ftr-brand div with 'deep-design' h3 and tagline paragraph about task management clarity. Two navigation columns — ftr-col 'Navigate' linking to Dashboard, Task List, New Task (/TaskForm), Categories; ftr-col 'Resources' linking to Task Detail, API Docs (/Dashboard), Status (/Dashboard). Bottom bar (ftr-bottom) shows dynamic copyright year via new Date().getFullYear() and an ftr-status div with ftr-status-dot span and 'All systems operational' text. Decorative ftr-blueprint-line div at footer base. Note: this Footer component likely already exists from Landing, Dashboard, and TaskForm pages — reuse or verify it matches. Uses Footer.css with ftr- prefixed classes.

As a frontend developer, implement the Navbar section for the TaskDetail page. This component uses useState for userOpen and mobileOpen, useRef (dropRef) for outside-click detection, and two useEffects — one to close the user dropdown on outside mousedown events, and another to lock body scroll when the mobile menu is open. The NAV_PAGES array drives desktop nav links with active-state detection via window.location.pathname. The right section includes a user avatar button with an animated nb-chevron (rotates on open), a nb-dropdown panel, and a hamburger/close toggle for mobile. Note: this Navbar component likely already exists from Dashboard, TaskForm, and TaskList pages — reuse or verify it matches the TaskDetail context. Depends on TaskList Navbar task (1b38393d-e128-4223-949e-d80e0e6890df) to establish page-level chain.

As a frontend developer, implement the CategoriesHeader section for the Categories page. Uses framer-motion with motion.div and motion.button for entrance animations: title group animates from opacity 0 / y -8 to visible (0.3s easeOut), CTA button from opacity 0 / scale 0.95 (0.28s delay 0.1), and stats row from opacity 0 (0.35s delay 0.18). Renders a breadcrumb nav with Dashboard link and chevron SVG separator. Main row contains ch-title-group (h1 'Categories', subtitle paragraph) and a ch-cta-btn 'New Category' with plus SVG. Below that: a ch-accent-bar blueprint line and ch-stats-row with three ch-stat items (folder icon / 'All categories', clock icon / 'Last updated today', and a third stat) each with inline SVG icons. Imports CategoriesHeader.css.

As a frontend developer, implement the CategoriesList section for the Categories page. Uses useState for categories (INITIAL_CATEGORIES array of 6 items with id, name, color hex, taskCount, completedCount) and viewMode ('grid'/'list' toggle). Defines CARD_VARIANTS (hidden/visible/exit with staggered delay i*0.06) and LIST_VARIANTS (hidden/visible/exit with x offset and i*0.05 delay) for framer-motion AnimatePresence. Renders GridIcon and ListIcon SVG toggle buttons, EditIcon, TrashIcon, PlusIcon, and FolderIcon helper components. Grid view shows category cards with color swatch, name, task progress bar, completedCount/taskCount stats, and edit/delete action buttons. List view renders rows with the same data horizontally. Delete action calls setCategories to filter out the item, with AnimatePresence wrapping for exit animation (scale 0.95, opacity 0). Imports CategoriesList.css.

As a frontend developer, implement the CreateCategoryModal section for the Categories page. Uses useState for isOpen, name (max 40 chars), description (max 120 chars), selectedColor (from COLOR_OPTIONS array of 10 hex colors), nameError, and submitted flag. validateName checks for empty, min 2 chars, max length, and duplicate against EXISTING_NAMES array (case-insensitive). handleNameChange updates name and re-validates if nameError exists; handleNameBlur triggers validation. handleSubmit prevents default, validates, sets submitted true, then calls handleCancel after 1400ms timeout. handleCancel resets all state. When modal is closed, AnimatePresence renders a ccm-demo-trigger motion.div (opacity 0→1, y 8→0) with a ccm-demo-btn that sets isOpen true. Modal overlay uses motion.div with backdrop, form contains name input with character counter, description textarea, 10-swatch color picker grid with selectedColor highlight ring, error message display, isCreateDisabled logic, Cancel and Create buttons, and a success state after submission. Imports CreateCategoryModal.css.

As a frontend developer, implement the Footer section for the Categories page. Static functional component using new Date().getFullYear() for dynamic copyright year. Renders ftr-footer with ftr-inner containing ftr-top (three columns: ftr-brand with 'deep-design' h3 and tagline paragraph; ftr-col 'Navigate' with appPages array links to /Dashboard, /TaskList, /TaskForm, /Categories; ftr-col 'Resources' with resourceLinks to /TaskDetail, /Dashboard x2). ftr-bottom row shows copyright string and ftr-status with a ftr-status-dot span and 'All systems operational' text. Ends with a ftr-blueprint-line decorative div. Note: Footer component may already exist from previous pages (TaskForm, TaskList, TaskDetail). Imports Footer.css.

Register tasks and categories routers in the main FastAPI app with /api/v1 prefix. Configure CORS middleware to allow requests from the React frontend origin. Add global exception handlers for validation errors and unhandled exceptions.

As a frontend developer, implement the TaskFormBasicInfo section for the TaskForm page. Uses useState for title, notes, and titleTouched. Computes titleError (required + min 3 chars on blur) and dynamic char-count classes (tbi-char-count--warn when at limit, tbi-char-count--near within 20 chars for title / 40 for notes). TITLE_MAX=120, NOTES_MAX=300. Renders a framer-motion card (opacity:0/y:12 → opacity:1/y:0, 0.3s easeOut) with a tbi-blueprint-accent decorative bar and a section badge labeled '1'. Title input uses aria-required, aria-describedby pointing to the error span, and onBlur to set titleTouched. Error message is a framer-motion span with role='alert' and an SVG warning circle icon animated via opacity/x. Notes textarea tracks notesRemaining similarly.

As a frontend developer, implement the TaskFormDescription section for the TaskForm page. Uses useState for value, focused, and hintsOpen. MAX_CHARS=1000 with WARN_THRESHOLD=0.85. Computes isOverLimit and isNearLimit flags to apply dynamic wrapper classes (tfd-textarea-wrap--focused, tfd-textarea-wrap--near-limit, tfd-textarea-wrap--over-limit) and counter classes (tfd-counter--warn, tfd-counter--over). Renders a textarea with spellCheck, aria-label, and aria-describedby referencing counter and hints IDs. A toggle button (tfd-hint-toggle with animated chevron) uses AnimatePresence to show/hide a FORMATTING_HINTS panel listing 4 syntax hints (**bold**, - item, 1. step, #tag) as tfd-hint-row items. Character counter updates live. handleChange is memoized with useCallback.

As a frontend developer, implement the TaskFormCategoryAssignment section for the TaskForm page. Uses useState for isOpen and selectedId, useRef (dropdownRef) for outside-click detection via mousedown event listener. CATEGORIES array has 6 entries (Work, Personal, Learning, Health & Fitness, Finance, Home & Errands) each with id, label, color hex, and taskCount. handleSelect sets selectedId and closes dropdown; handleClear resets to null. When a category is selected, renders an AnimatePresence motion.span badge styled with category color (color+'18' background, color+'55' border) showing a tca-category-dot and a remove button. The dropdown list renders each category as a tca-option with color dot, label, and task count badge. Uses framer-motion AnimatePresence for badge enter/exit (opacity + scale 0.85↔1, 0.18s).

As a frontend developer, implement the TaskFormPriority section for the TaskForm page. Uses useState with 'medium' as default selected priority. PRIORITIES array contains 4 options: low (▽, #27AE60), medium (◇, #E6AC00), high (△, #D68910), critical (!, #E74C3C), each with id, name, desc, icon, and dotColor. Renders a radiogroup (role='radiogroup') of tfp-option label elements with hidden radio inputs. Each option conditionally applies tfp-option--selected and tfp-option--{id} modifier classes. A tfp-option-check span contains a polyline SVG checkmark. Below the group, a tfp-selected-bar shows a colored dot (inline style background from selectedPriority.dotColor), 'Selected priority:' label, and the selected priority name.

As a frontend developer, implement the TaskFormDueDate section for the TaskForm page. Uses useState for dueDate, dueTime, and recurrence (default 'one-time'). RECURRENCE_OPTIONS array has 4 entries (one-time, daily, weekly, monthly) each with value, label, hint string, and an inline SVG icon component. formatSummaryDate() formats the date+time into a human-readable string using toLocaleDateString (en-IN locale, weekday/year/month/day) and toLocaleTimeString when time is set. Renders date input, optional time input, and a pill-style recurrence selector. Uses framer-motion AnimatePresence to animate the recurrence hint text (opacity + y, 0.2s). When dueDate is set, renders a tfd-summary card with the formatted date string and selected recurrence label.

As a frontend developer, implement the TaskFormTags section for the TaskForm page. Uses useState for tags (initialized with ['deep-design','task']) and inputValue, useRef for the input element. MAX_TAGS=10. addTag (useCallback) normalizes input: trims, lowercases, replaces spaces with hyphens, guards against duplicates and max limit. removeTag filters by value. handleKeyDown triggers addTag on Enter or comma key, and removes last tag on Backspace when input is empty. handleChange auto-adds tag when trailing comma is typed. Renders AnimatePresence motion.span pill elements (opacity+scale 0.75→1→0.6, layout animation, 0.15s easeOut) each with a × remove button. SUGGESTED_TAGS (10 items: urgent, frontend, backend, bug, feature, review, blocked, research, design, testing) rendered as clickable tft-suggestion chips below the field. Shows tft-hint counter '{tags.length} / {MAX_TAGS}'.

As a frontend developer, implement the TaskDetailSidebar section for the TaskDetail page. Uses useState for accordionOpen to toggle sidebar accordion visibility with AnimatePresence from framer-motion. Renders TASK_DATA with STATUS_CONFIG and PRIORITY_CONFIG lookup maps to display a tds-status-badge (with tds-status-dot and variant classes like tds-status-badge--in-progress) and a tds-priority-label with a 3-bar visual indicator (bars array determines filled bars per priority level). Includes a formatDueDate utility that computes diffDays from today and returns formatted date, relative string, and urgency ('ok' | 'soon' | 'overdue') — driving conditional CSS classes on the due date row. A stats grid renders four stat blocks (Subtasks, Done, Left, Notes) from TASK_DATA.stats. The accordion toggle uses AnimatePresence to animate the tds-inner panel open/closed.

As a frontend developer, implement the TaskDetailHeader section for the TaskDetail page. Uses useState for isEditing (bool), title (current saved title), and draftTitle (in-progress edit value). Renders a breadcrumb nav (Dashboard → Tasks → {title}) using tdh-breadcrumb-link and tdh-breadcrumb-sep spans. A TASK_TYPE_ICONS map provides SVG icons for 'development', 'design', and 'research' task types rendered in a tdh-icon-wrap. The title area toggles between a read-only display with an edit pencil button and an inline input (handleEditClick/handleSave/handleCancel) supporting Enter/Escape keyboard shortcuts via handleKeyDown. STATUS_LABELS drives a tdh-status-badge with dynamic variant class (e.g., tdh-status-badge--inprogress). A formatRelativeTime utility displays last-modified time (e.g., '37m ago'). Uses AnimatePresence from framer-motion for edit/view mode transitions.

As a frontend developer, implement the TaskDetailContent section for the TaskDetail page. Uses useState to manage expand/collapse state for accordion panels. Renders a multi-paragraph DESCRIPTION string in a collapsible panel animated with framer-motion panelVariants (height: 0→auto, opacity: 0→1, easing [0.4,0,0.2,1]). A NOTES array (3 entries with id, text, timestamp, author) renders as a list with AnimatePresence for add/remove animations. An ATTACHMENTS array (2 entries: pdf and md) renders file rows with FileIcon, file name, size badge, and a DownloadIcon button. A PlusIcon button + UploadIcon trigger attachment upload UI. An ExpandIcon (chevron SVG) toggles each accordion section. All icon components (FileIcon, DownloadIcon, PlusIcon, UploadIcon, ExpandIcon) are inline SVG functional components defined within this file.

As a frontend developer, implement the TaskDetailMetadata section for the TaskDetail page. Uses useState for priority (default 'high'), category (default 'Project Alpha'), tags (INITIAL_TAGS: ['frontend','ui-review','sprint-4']), and tagInput. Renders a tdm-grid with four motion.div cards animated via cardVariants (staggered delay i*0.07, y: 10→0) using framer-motion custom prop: Created Date card (CalendarIcon + CREATED_DATE), Due Date card (CalendarIcon + DUE_DATE_VALUE with IS_OVERDUE AlertCircleIcon and overdue styling), Priority card (ClockIcon + a tdm-priority-select dropdown bound to priority state with dynamic class tdm-priority-select--{priority}, driven by PRIORITIES array), and Category card (FolderIcon + a tdm-category-select driven by CATEGORIES array). A Tags card renders INITIAL_TAGS as removable chips (removeTag on click) plus an input with TagIcon and addTag logic (Enter key or button click, slugifies input with replace(/\s+/g, '-')).

As a frontend developer, implement the TaskDetailActions section for the TaskDetail page. Uses useState for isCompleted (bool), showDeleteConfirm (bool), and toast ({message, variant} | null). A showToast utility sets toast state and auto-clears after 2600ms via setTimeout. Four framer-motion buttons with whileTap={{ scale: 0.96 }} spring animations: (1) Mark Complete toggles isCompleted, swaps SVG between circle-check and checkmark-polyline, and shows success/neutral toast; (2) Edit triggers an 'accent' toast then redirects to /TaskForm after 700ms; (3) Duplicate shows a neutral toast; (4) Archive shows a neutral toast. A Delete button triggers setShowDeleteConfirm(true) to reveal an AnimatePresence-animated confirmation overlay (tda-confirm-overlay) with Confirm and Cancel buttons — handleDeleteConfirm hides the overlay, shows a toast, then redirects to /TaskList after 1200ms. Toast component renders at bottom of section with variant-based class.

As a frontend developer, implement the Footer section for the TaskDetail page. This is a static functional component that renders a ftr-footer with ftr-inner containing a ftr-top row with three columns: ftr-brand (h3 'deep-design' + tagline paragraph), a Navigate ftr-col with appPages links (Dashboard, Task List, New Task, Categories), and a Resources ftr-col with resourceLinks (Task Detail, API Docs, Status). The ftr-bottom row renders a dynamic copyright year via new Date().getFullYear() and a ftr-status indicator with ftr-status-dot and 'All systems operational' text. A ftr-blueprint-line decorative div closes the footer. Note: this Footer component likely already exists from Dashboard, TaskForm, and TaskList pages — reuse or verify CSS matches the TaskDetail layout.

As a Tech Lead, verify end-to-end integration between the Categories frontend and the Categories API. Replace mock data with real API calls: fetch all categories on mount, create via POST /categories, update via PUT /categories/{id}, delete via DELETE /categories/{id}. Populate category dropdowns in TaskForm with live data. Handle loading and error states in the UI.

As a frontend developer, implement the TaskFormActions section for the TaskForm page. Uses useState for savingPrimary, savingSecondary, and savedSuccess. handleSave sets savingPrimary=true, then after 1400ms clears it and sets savedSuccess=true for 2800ms. handleSaveAndCreate sets savingSecondary=true for 1400ms. isAnyLoading disables both action buttons when either spinner is active. Left side uses AnimatePresence (mode='wait') to swap between a tfa-success-msg (polyline checkmark SVG, opacity+x animation, 0.2s) and a tfa-hint span. Three action elements: a motion.a Cancel link (whileTap scale 0.97, href='/TaskList'), a motion.button 'Save & Create Another' (tfa-btn--secondary, shows tfa-spinner span when savingSecondary), and a motion.button 'Save Task' primary CTA (tfa-btn--primary, shows spinner when savingPrimary, disabled when isAnyLoading).

As a Tech Lead, verify end-to-end integration between the Tasks frontend (TaskList, TaskForm, TaskDetail) and the Tasks API. Replace all mock/static data with real API calls via the service layer and global state: fetch tasks on mount, submit form to POST /tasks, toggle completion via PATCH /tasks/{id}/complete, delete via DELETE /tasks/{id}, load detail via GET /tasks/{id}. Handle loading spinners and error states in the UI. NOTE: this task depends on frontend tasks f60486b4, 50debcfc-82a4-4c15-9daa-0a42eadcc8ee, da4a9085, d9801e27, 9ef16c60, 838bf66a.

As a Tech Lead, verify end-to-end integration between the Dashboard frontend and the live Tasks/Categories APIs. Replace mock summary data with real aggregated API data: total/completed/pending/overdue task counts, tasks grouped by category. Fetch on mount and refresh after mutations. Ensure dashboard reflects live state as tasks are created, completed, or deleted.