bright-logic

As a frontend developer, implement the `LandingHero` section. Use `useRef` on `sectionRef` and `useScroll` with `offset: ['start start', 'end start']` to drive multi-layer parallax: `bgY` (0 → -90px), `midY` (0 → -180px). Apply individual depth transforms per text element — `headlineY` (0 → -60px), `subheadlineY` (0 → -120px), `ctaY` (0 → -180px), `badgeY` (0 → -40px) — each with their own opacity fade-out curves. Render three decorative layers: `lh-bg-layer` (gradient + 3 shapes + grid pattern), `lh-mid-layer` (4 mid-shapes), and `lh-content` with staggered entrance animations for badge (delay 0.1s), headline (delay 0.25s), subheadline (delay 0.45s), and CTA (delay 0.65s) using cubic-bezier `[0.25, 0.46, 0.45, 0.94]`. Include a `scrollIndicatorOpacity` transform fading out by 15% scroll. Apply `lh-` CSS classes from `LandingHero.css`.

As a frontend developer, implement the `LandingValueProposition` section. Render three value cards from the `cards` array — 'Simple Task Management' (blue, `#3B82F6`), 'Built for Focus' (green, `#10B981`), and 'Stay Organized' (amber, `#F59E0B`) — each with custom inline SVG icons using `motion.path` and `motion.circle` elements that animate `stroke`/`fill` color on `whileHover` (e.g., `#3B82F6` → `#93C5FD`). Each card uses per-card `shadow` (`rgba` values) for hover box-shadow. Wire up framer-motion `whileHover` transitions with `duration: 0.3` on all icon sub-paths. Apply `lv-` BEM CSS classes from `LandingValueProposition.css` with `theme` variants (`primary`, `secondary`, `accent`).

As a frontend developer, implement the `LandingFeatures` section. Define a `features` array of 3 items (numbers '01'–'03') and render each via a `FeatureRow` sub-component. Each `FeatureRow` uses `useRef` + `useInView` (with `once: true, margin: '-80px'`) to trigger entrance animations: text column slides in from `x: -60` or `x: 60` based on `feature.reversed`, image column slides from the opposite direction, both using `duration: 0.7` and cubic-bezier `[0.25, 0.46, 0.45, 0.94]`. Import and use Lucide icons `Plus`, `Check`, `Trash2`, `Filter`, `ArrowUpDown` in the interactive mock UI panel. Render feature bullets with inline SVG check-circle icons using `var(--secondary)` stroke. Support `lf-row--reversed` CSS modifier for alternating layout. Apply `lf-` classes from `LandingFeatures.css`.

As a frontend developer, implement the `LandingUseCases` section. Define a `useCases` array of 4 items — Daily Task Tracking (blue), Project Planning (green), Priority Management (amber), Progress Monitoring (red) — each using Lucide icons `CalendarCheck`, `FolderKanban`, `ListOrdered`, `TrendingUp`. Implement `UseCaseCard` sub-component with `motion.div` using `cardVariants` (`hidden: {opacity:0, scale:0.92, y:24}` → `visible`) and `whileHover` for `backgroundColor` tint. Apply `motion.div` `whileHover` on the icon wrapper for `drop-shadow` glow filter. Add inner icon `whileHover` for 360° rotation (`duration: 0.6, ease: 'easeInOut'`). Wrap all cards in a `motion.div` using `containerVariants` with `staggerChildren: 0.12`. Apply `uc-` classes and `uc-icon-wrap--blue/green/amber/red` modifiers from `LandingUseCases.css`.

As a frontend developer, implement the `LandingSimplicityShowcase` section. Define a `steps` array of 3 items (Add/Complete/Organize) with `circleClass` and `color` values. Implement three animated SVG icon sub-components: `AddIcon` (two `motion.line` elements with `pathLength` 0→1, delays 0.1s/0.25s), `CheckIcon` (`motion.path` checkmark, delay 0.1s, duration 0.5s), and `OrganizeIcon` (three `motion.line` elements with cascading delays 0.05/0.15/0.25s). Implement `ArrowHorizontal` SVG with animated dashed `motion.path`. Use `useState` and `useRef` + `useEffect` for any step-selection state. Use `useInView` via `framer-motion` to trigger icon animations on viewport entry. Apply responsive layout switching between horizontal arrows and vertical arrows via `lss-arrow-svg-h`/`lss-arrow-svg-v`. Apply `lss-` CSS classes from `LandingSimplicityShowcase.css`.

As a frontend developer, implement the `LandingDemoPreview` section. Initialize `useState(initialTasks)` with 5 mock task objects (fields: `id`, `title`, `meta`, `priority: 'high'|'medium'|'low'`, `completed`). Implement `toggleTask(id)` to toggle `completed` state. Compute `completedCount`, `totalCount`, and `progressPercent` for a live progress bar. Use `checkVariants` (`pathLength` 0→1 animated SVG checkmarks) and `listItemVariants` (staggered `opacity`/`y` per item index `i * 0.08s` delay). Use `AnimatePresence` for task list transitions. Render `priorityLabels` badges (High/Med/Low). Include two CSS-driven parallax background layers (`dp-bg-dot`, `dp-mid-line`) using `var(--scroll)` CSS custom property. Section header uses `whileInView` with `viewport: {once:true, margin:'-60px'}`. Apply `dp-` classes from `LandingDemoPreview.css`.

As a frontend developer, implement the `LandingFAQ` section. Define `faqData` array of 5 FAQ items. Implement `AccordionItem` sub-component with local `useState(isOpen)`. Each accordion button uses `whileHover` for `backgroundColor: rgba(59,130,246,0.04)` and `aria-expanded` for accessibility. Animate the chevron SVG with `animate: {rotate: isOpen ? 180 : 0}` using spring (`stiffness:300, damping:30`). Use `AnimatePresence` with `initial={false}` on the answer wrapper, animating `height: 0 → 'auto'` and `opacity: 0 → 1` on enter, reversed on exit, with `duration: 0.3` cubic-bezier ease. Apply `fq-item--open` CSS modifier when expanded. Apply `fq-` BEM classes from `LandingFAQ.css`.

As a frontend developer, implement the `LandingCTA` section. Implement `generateParticles()` producing 14 particles with random angle, distance 30–80px, size 4–9px, and colors from `['#F59E0B','#FBBF24','#FCD34D','#3B82F6','#10B981','#EF4444']`. Track `useState(particles)` and `useState(burstKey)`. Implement magnetic button effect via `useRef(btnRef)`, `useState(magnetOffset)`, `handleMouseMove` computing `deltaX/deltaY` from button center with `maxShift: 4`, and `handleMouseLeave` resetting to `{x:0,y:0}`. Fire `generateParticles()` and increment `burstKey` on `handleClick` using `useCallback`. Use `AnimatePresence` to animate particle burst elements keyed by `burstKey`. Render two CSS parallax decorative layers (`lc-deco-bg`, `lc-deco-mid`) with `var(--scroll)` CSS variable transforms. Apply `lc-` classes from `LandingCTA.css`.

As a frontend developer, implement the `Footer` section. Use `useScroll` and `useTransform` to animate `gridY` from `0` to `-60px` on the `ftr-grid-bg` decorative layer. Render three link columns: Product (`productLinks`: Task Manager, Create Task, Getting Started), Company (`companyLinks`: About Us, Open Source, Contact), Legal (`legalLinks`: Privacy Policy, Terms of Service, Cookie Policy). Render four social icons using Lucide components `Github`, `Twitter`, `Linkedin`, `Mail` with `href` targets. Include an animated SVG logo with two `motion` elements: a `motion.rect` (blue border) and a `motion.path` (green checkmark), both animating `pathLength` 1→0 and `opacity` 1→0.3 over 2s on mount. Display brand tagline text. Apply `ftr-` BEM classes from `Footer.css`. Note: this component may already exist from a prior page.

As a frontend developer, implement the Navbar section for the TaskList page. This component may already exist from the Landing page (task 4b4f6f0a-5f9d-49f7-b627-6928f7a66d09) and should be reused or verified it renders correctly on this page. The Navbar uses framer-motion with useScroll and useTransform hooks to animate background from transparent to rgba(255,255,255,0.95) and backdropFilter from blur(0px) to blur(12px) over the first 120px of scroll. It includes an animated SVG logo with three motion.path elements using logoPathVariants (pathLength draw-on animation with staggered custom delays), a navLinks array linking to /Landing, /TaskList, /TaskForm, a Get Started CTA linking to /TaskForm, and a mobile hamburger button toggling mobileOpen state with AnimatePresence for the mobile menu overlay. Uses nb- CSS class prefix from Navbar.css.

As a Backend Developer, implement the FastAPI REST endpoints for task management. Endpoints required: GET /api/tasks (list all tasks, returns array), POST /api/tasks (create task, body: {title, description?, priority?, due_date?}), PATCH /api/tasks/{id} (update task fields including toggling completed), DELETE /api/tasks/{id} (delete task by id). Use SQLAlchemy ORM with the Task model. Include Pydantic schemas for request validation (title min 3 chars, max 100 chars; description max 500 chars; priority must be Low/Medium/High or null; due_date must not be in the past on creation). Return appropriate HTTP status codes (200, 201, 404, 422). Enable CORS for the React frontend origin. Wire up the database session dependency.

As a frontend developer, implement the TaskListHeader section for the TaskList page. The component renders a header element with class tlh-root containing a tlh-inner wrapper. It displays a top row with a title group (h1 with class tlh-title showing 'My Tasks' and a span with class tlh-badge showing the TASK_COUNT constant set to 5 followed by ' tasks') and an anchor link styled as tlh-add-btn pointing to /TaskForm with a lucide-react Plus icon and 'Add Task' label. Below is a subtitle paragraph with class tlh-subtitle. Imports Plus from lucide-react and styles from TaskListHeader.css using tlh- prefix classes.

As a frontend developer, implement the TaskListContainer section for the TaskList page. The component uses useState initialized with an initialTasks array of 5 hardcoded tasks (each with id, title, description, dueDate, and completed fields). It implements toggleTask (maps over tasks flipping completed boolean by id) and deleteTask (filters out task by id) handlers. Renders a section.tlc-root > div.tlc-inner with one div.tlc-item per task (adding tlc-item--completed modifier class when task.completed is true). Each item contains: a tlc-checkbox-wrap with a controlled checkbox input wired to toggleTask, a content area with title and description, a due date badge computed by getDueBadgeVariant helper (returns 'overdue'/'soon'/'normal'/null based on diff from hardcoded today 2026-05-20), a Calendar icon from lucide-react for the date display formatted via formatDueDate, and a Trash2 icon button from lucide-react wired to deleteTask. Returns null when tasks array is empty (deferring to TaskListEmpty). Imports from TaskListContainer.css using tlc- prefix classes.

As a frontend developer, implement the Footer section for the TaskList page. This component may already exist from the Landing page (task 8341fa3c-7174-4071-b8f2-d302d7e70c11) and should be reused or verified it renders correctly here. The Footer uses framer-motion useScroll and useTransform to animate a ftr-grid-bg div with a parallax y transform from 0 to -60px based on scrollYProgress. It renders an animated SVG logo with two motion elements (a rect and a checkmark path) that animate pathLength and opacity from 1/1 to 0/0.3 with staggered delays. Includes three link column arrays (productLinks, companyLinks, legalLinks) each with 3 items, and a socialItems array with Github, Twitter, Linkedin, Mail icons from lucide-react rendered as accessible anchor links. Uses ftr- CSS class prefix from Footer.css.

As a frontend developer, implement the Navbar section for the TaskForm page. This component may already exist from the Landing and TaskList pages — reuse or verify the existing Navbar component. The Navbar uses Framer Motion's useScroll and useTransform hooks to animate background color from transparent ('rgba(255,255,255,0)') to frosted glass ('rgba(255,255,255,0.95)') with blur(12px) backdropFilter as the user scrolls past 120px. Features an animated SVG logo with three motion.path elements using logoPathVariants (pathLength draw animation with staggered custom delays of 0, 0.2, 0.4s) — a lightbulb outline in #3B82F6, base lines, and an amber (#F59E0B) filament. Includes navLinks array ['Landing', 'TaskList', 'TaskForm'], a 'Get Started' CTA button linking to /TaskForm, and a mobile hamburger toggle managed by useState(mobileOpen). AnimatePresence handles mobile menu open/close transitions. Imports from '../styles/Navbar.css'.

As a frontend developer, implement the TaskListEmpty section for the TaskList page. The component renders a section.tle-root > div.tle-inner containing an icon wrapper div.tle-icon-wrap with a ClipboardList icon from lucide-react, an h2.tle-headline with text 'No tasks yet', a p.tle-subheadline with descriptive text about creating the first task, and an anchor link styled as tle-cta pointing to /TaskForm with a Plus icon from lucide-react and 'Create your first task' label. This empty state component is shown when the TaskListContainer returns null (i.e., when the tasks array is empty). Imports from TaskListEmpty.css using tle- prefix classes.

As a frontend developer, implement the TaskFormHero section for the TaskForm page. This is a static hero banner rendered inside a 'tfh-root' section with an 'tfh-inner' container. It renders a PlusCircle icon from lucide-react inside a 'tfh-icon-wrap' div, followed by a 'tfh-text' div containing: a breadcrumb nav (aria-label='Breadcrumb') with an anchor to '/TaskList' labeled 'My Tasks', a separator span ('tfh-sep'), and a current span ('tfh-current') labeled 'New Task'; an h1 with class 'tfh-headline' reading 'Add a New Task'; and a paragraph with class 'tfh-subheadline' providing task creation guidance. No state or animations. Imports from '../styles/TaskFormHero.css'.

As a frontend developer, implement the TaskFormContainer section for the TaskForm page. This is the core interactive form with controlled state via useState hooks: formData ({title, description, priority, dueDate}), errors ({}), and submitted (false). Implements a validate() function enforcing: title required and min 3 chars; priority required (from PRIORITY_OPTIONS constant with '', 'Low', 'Medium', 'High'); dueDate required and must not be in the past (compares against today with setHours(0,0,0,0)). handleChange clears individual field errors on input. handleSubmit calls validate(), sets errors or sets submitted=true, resets formData, and auto-clears submitted after 4000ms via setTimeout. handleCancel resets all state. Renders: a success banner with CheckCircle icon (lucide-react) and link to '/TaskList' when submitted===true; a noValidate form with fields for title (max 100 chars, character counter using titleLen), description (max 500 chars, counter using descLen), a priority select using PRIORITY_OPTIONS, and a dueDate date input; error messages with AlertCircle icon; and Cancel (X icon) and Submit (Plus icon) buttons. Imports CheckCircle, AlertCircle, Plus, X from lucide-react and '../styles/TaskFormContainer.css'.

As a frontend developer, implement the TaskFormTips section for the TaskForm page. This is a static informational section rendered inside 'tft-root' with a 'tft-inner' container. It renders a 'tft-heading' paragraph ('Tips for better tasks') followed by a 'tft-cards' div that maps over a 'tips' array of three objects: {key:'focused', icon:Target, iconClass:'tft-icon-wrap--blue', title:'Keep tasks focused', desc:'...'}, {key:'deadlines', icon:Clock, iconClass:'tft-icon-wrap--green', title:'Set realistic deadlines', desc:'...'}, and {key:'priority', icon:Zap, iconClass:'tft-icon-wrap--amber', title:'Use priority wisely', desc:'...'}. Each card renders a div with class 'tft-card' containing an icon wrapper div with dynamic iconClass (Target, Clock, Zap from lucide-react) and a 'tft-card-body' with title and desc spans. No state or animations. Imports from '../styles/TaskFormTips.css'.

As a frontend developer, implement the Footer section for the TaskForm page. This component may already exist from the Landing and TaskList pages — reuse or verify the existing Footer component. The Footer uses Framer Motion's useScroll and useTransform to apply a parallax effect on a 'ftr-grid-bg' div (y from 0 to -60px based on scrollYProgress). Contains a 'ftr-content' div with 'ftr-top' layout: a brand block with an animated SVG logo (motion.rect and motion.path animating pathLength from 1 to 0 with opacity 0.3 over 2s) and brand description; three link columns (Product, Company, Legal) populated from productLinks, companyLinks, and legalLinks arrays; and social icons (Github, Twitter, Linkedin, Mail from lucide-react) from the socialItems array. Includes a bottom bar with copyright text. Imports from '../styles/Footer.css'.

As a Tech Lead, verify end-to-end integration between the TaskList frontend (TaskListContainer, TaskListHeader) and the backend Tasks API. Replace the hardcoded initialTasks array in TaskListContainer with live API calls to GET /api/tasks. Wire toggleTask to PATCH /api/tasks/{id} (set completed) and deleteTask to DELETE /api/tasks/{id}. Verify the task badge count in TaskListHeader reflects the live task count. Ensure API responses are handled correctly, loading and error states are shown, and all interactions (toggle, delete) update the UI without requiring a page reload. Note: TaskListContainer (537935cf) and TaskListHeader (262c0115) must be completed before this integration task.

As a Tech Lead, verify end-to-end integration between the TaskForm frontend (TaskFormContainer) and the backend Tasks API. Replace the simulated form submission in TaskFormContainer with a real POST /api/tasks call. Pass {title, description, priority, due_date} from formData in the request body. Handle API validation errors (422) and map them back to field-level errors state. On success (201), show the success banner and redirect to /TaskList. Ensure the frontend validation (title min 3 chars, due_date not in past) aligns with backend Pydantic validation. Note: TaskFormContainer (d5c2b41f) must be completed before this integration task.