wise-page

As a frontend developer, implement the `LandingHero` section for the Landing page. This section features: (1) a time-of-day gradient background computed via `lerpColor` and `getGradientColors` utilities across a 7-stop `GRADIENT_STOPS` palette (sky blue → deep blue, warm amber → deep orange) using `useState`/`useEffect` to read the current hour and derive a 0–1 progress value; (2) a headline with character-level stagger animation using `charVariants` (hidden: opacity 0, y 8 → visible: opacity 1, y 0, delay 0.8 + i*0.012); (3) animated subheadline text from `SUBHEADLINE_TEXT` constant; (4) three `TASK_CARDS` (urgent/personal/complete tags) animated via `cardVariants` with x:-40, y:20, rotate:-3 entrance and spring easing (delay 1.2 + i*0.18); (5) floating badge elements using `floatVariants` with scale 0.8→1 entrance; (6) `useMotionValue`/`useTransform` for parallax cursor tracking. Import `LandingHero.css`. Uses `AnimatePresence` for card transitions.

As a frontend developer, implement the `ValueProposition` section for the Landing page. Build three interactive flip cards using the `FlipCard` component driven by `useState(isFlipped)`. Each card from `VALUE_CARDS` (Simplicity/Layers icon, Efficiency/Zap icon, Clarity/Eye icon from lucide-react) has: (1) a front face with colored icon wrap and teaser text; (2) a back face with `backTitle` and `description`; (3) flip triggered by click (mobile) or mouseEnter/mouseLeave (desktop, `window.innerWidth >= 768` check); (4) `motion.div` with `animate={{ rotateY: isFlipped ? 180 : 0 }}` and `transformStyle: 'preserve-3d'` via `flipTransition` (duration 0.5s, cubic-bezier); (5) icon color animated between `frontColor` and `backColor`; (6) full keyboard accessibility with `role='button'`, `tabIndex=0`, `aria-label`, and `onKeyDown` Enter/Space handler. Import `ValueProposition.css`.

As a frontend developer, implement the `TaskCarouselShowcase` section for the Landing page. Build a fully interactive swipe-based task card carousel using: (1) `useMotionValue`/`useSpring`/`useTransform` for per-card drag physics — `springX` (stiffness 300, damping 30), `rotate` mapped [-200,0,200]→[-8,0,8], `leftOpacity`/`rightOpacity` action hint overlays, `cardScale` mapped to 0.96 at extremes; (2) `useState(dragState)` with 'idle'/'completing'/'deleting' states set at 40% of `DRAG_THRESHOLD=120`; (3) `handleDragEnd` that fires `animate(x, -400)` for complete or `animate(x, 400)` for delete, sets `dismissed` state, then calls `onComplete`/`onDelete` callbacks via `setTimeout`; (4) five `TASKS` with priority badges mapped via `PRIORITY_MAP` (high/medium/low CSS classes); (5) arrow navigation buttons using `FiArrowLeft`/`FiArrowRight` from react-icons/fi; (6) `FiChevronRight` CTA link; (7) `FiCheck`/`FiTrash2`/`FiClock`/`FiCalendar` icons on cards. Import `TaskCarouselShowcase.css`.

As a frontend developer, implement the `KeyFeatures` section for the Landing page. Render a 6-card grid using the `FeatureCard` component, each card driven by the `features` array (Add Tasks/FiPlusCircle/blue, Mark Complete/FiCheckCircle/orange, Edit Tasks/FiEdit3/blue, Delete Tasks/FiTrash2/orange, View All Tasks/FiList/blue, Simple Interface/FiLayout/orange). Each `FeatureCard` uses: (1) `useState(rippleKey)` and `useState(isHovered)` for hover ripple effect — `handleHoverStart` increments `rippleKey` and sets `isHovered`; (2) `cardVariants` with scale 0.5→1, opacity 0→1, y 30→0 spring animation (stiffness 200, damping 20, delay i*0.1) triggered via `whileInView` with `viewport={{ once: true, margin: '-40px' }}`; (3) `textVariants` for description text (delay i*0.1+0.15); (4) dynamic `kf-card-accent--{color}` and `kf-icon-wrapper--{color}` CSS modifier classes. Import `KeyFeatures.css` and icons from react-icons/fi.

As a frontend developer, implement the `HowItWorks` section for the Landing page. Render a 3-step process display using the `STEPS` array (View Your Tasks, Swipe to Action, Stay Organized) with numbered step indicators. Build two animated SVG connector components: (1) `ConnectorHorizontal` — an SVG `motion.line` with `strokeDasharray/strokeDashoffset` animation (duration 0.8s, delay 0.4+index*0.5) and a `motion.polygon` arrowhead that scales in (delay 1.0+index*0.5), both triggered via `useInView(ref, { once: true, margin: '-50px' })`; (2) `ConnectorVertical` — similar SVG line drawn top-to-bottom (duration 0.7s, delay 0.3+index*0.5) with a downward-pointing polygon. Step circles use `hiw-icon-accent` and `hiw-icon-highlight` CSS classes per the `STEPS` `iconClass` field. Both connectors use `useRef` and `useInView` from framer-motion. Import `HowItWorks.css`.

As a frontend developer, implement the `TaskManagementShowcase` section for the Landing page. Build an interactive mock task list UI with: (1) four `TASKS` items rendered with name, meta, completed state, and inline edit/delete icon buttons (`EditIcon`, `TrashIcon` SVG components); (2) four `CALLOUTS` (view/add/edit/delete) with `tms-callout-{id}` CSS classes and their matching icon components (`PlusIcon`/`EditIcon`/`TrashIcon`); (3) four `FEATURES` list items with `CheckIcon` SVG (14px, polyline checkmark) and title/subtitle text; (4) `useCallback` for action handlers; (5) `useMotionValue`/`useSpring` from framer-motion for hover tilt or magnetic interactions on the mock device frame; (6) `AnimatePresence` for task item enter/exit transitions. Custom inline SVG icons: `CheckIcon` (polyline 20,6 9,17 4,12), `PlusIcon` (cross lines), `EditIcon` (edit path), `TrashIcon` (trash path). Import `TaskManagementShowcase.css`.

As a frontend developer, implement the `TrustSignals` section for the Landing page. Render three `StatCard` components from the `STATS` array (speed/<2s/Zap/blue, india/100%/Globe/orange, scale/100+/TrendingUp/green) using lucide-react icons. Each `StatCard` features: (1) `useRef`+`useInView(ref, { once: true, amount: 0.4 })` to trigger animations on scroll; (2) a left-side `motion.div` color bar (`ts-color-bar--{color}`) that `scaleY` animates from 0→1 (duration 0.8s, delay 0.2+index*0.1, originY:0); (3) a pulsing icon wrap (`ts-icon-wrap--{color}`) with infinite `scale: [1, 1.1, 1]` animation (duration 0.6s, repeatDelay 1.4s) triggered when `isInView`; (4) an `AnimatedCounter` subcomponent using `useMotionValue(0)` animated via `animate(motionValue, targetValue, { duration: 2, ease: [0.25,0.46,0.45,0.94] })` with `motionValue.on('change')` subscriber updating `displayValue` state, displaying `prefix+displayValue+suffix`; (5) `whileHover={{ y: -4 }}` lift on card. Import `TrustSignals.css`.

As a frontend developer, implement the `LandingCTA` section for the Landing page. Build the call-to-action section with: (1) a three-layer parallax background using `lc-bg-layer`, `lc-overlay`, and `lc-mid-layer` divs with CSS `var(--scroll)` transform for 0.2x and 0.4x parallax rates; (2) three decorative orbs (`lc-mid-orb--1/2/3`) in the midground layer; (3) a magnetic CTA button using `useRef(btnRef)`, `useMotionValue`/`useSpring` (stiffness 300, damping 10) for `magnetX`/`magnetY`, `handleMouseMove` computing distance from button center with 0.35x/0.45x multipliers, `handleMouseLeave` resetting to 0; (4) a particle burst `handleClick` handler that generates 14 particles via `Array.from` with randomized angles, distances (60–160px), colors from a 5-color palette, and sizes (4–10px), stored in `useState(particles)` and cleared after 900ms via `setTimeout`; (5) `AnimatePresence` wrapping particle `motion.div` elements; (6) `motion.h2` headline and `motion.p` subheadline with `whileInView` fade-up animations. Import `LandingCTA.css`.

As a frontend developer, implement the `Footer` section for the Landing page. Build the `Footer` component with: (1) a two-layer parallax background (`ftr-bg-layer` at 0.2x, `ftr-mid-layer` at 0.4x) containing three `ftr-mid-line` decorative lines; (2) a branding block with a `motion.button` logo (`whileHover={{ scale: 1.03 }}`, `whileTap={{ scale: 0.97 }}`) that calls `handleScrollToTop` via `window.scrollTo({ top: 0, behavior: 'smooth' })`; (3) a tagline paragraph; (4) nav links column mapped from `navLinks` array (Landing/TaskCarousel/TaskList/TaskForm); (5) feature links column from `featureLinks`; (6) legal links from `legalLinks`; (7) social icon links from `socialLinks` using `FiTwitter`/`FiGithub`/`FiLinkedin`/`FiInstagram` from react-icons/fi; (8) all links wrapped in `AnimatedLink` component that uses `motion.span` with hover variants driving a `motion.div` underline (`scaleX` 0→1, duration 0.3s, `originX: 0`), with a separate `ftr-bottom-underline` variant for bottom bar links; (9) `FiArrowUp` icon in scroll-to-top button. Import `Footer.css`. Note: this component may already exist from a previous page — check before creating.

As a Backend Developer, implement the Tasks REST API using FastAPI. Create endpoints: GET /api/tasks (list all tasks), POST /api/tasks (create task), GET /api/tasks/{id} (get single task), PUT /api/tasks/{id} (update task), PATCH /api/tasks/{id}/complete (mark complete), DELETE /api/tasks/{id} (delete task). Each task model should include: id, title, description, priority (high/medium/low), completed (bool), created_at, updated_at. Use SQLAlchemy ORM with MySQL/MariaDB. Return appropriate HTTP status codes and error responses. This API supports the TaskCarousel, TaskList, and TaskForm frontend pages.

As a Frontend Developer, set up global state management for the tasks data shared across TaskCarousel, TaskList, and TaskForm pages. Use React Context + useReducer or a lightweight store (Zustand/Redux Toolkit). Define actions: LOAD_TASKS, ADD_TASK, UPDATE_TASK, COMPLETE_TASK, DELETE_TASK. Ensure optimistic updates are applied (immediate UI change, rollback on API error). This shared state ensures all pages reflect the same task data without redundant API calls.

As a Tech Lead, verify the end-to-end integration between the Tasks frontend (TaskCarousel swipe actions, TaskList CRUD operations, TaskForm create/update) and the Tasks backend API. Ensure: (1) task list loads from GET /api/tasks on mount; (2) swipe-complete in carousel correctly calls PATCH /api/tasks/{id}/complete and updates global state; (3) swipe-delete calls DELETE /api/tasks/{id} and removes card; (4) TaskForm POST/PUT calls succeed and redirect/update list; (5) optimistic updates render immediately with rollback on error; (6) all loading and error states are handled gracefully in the UI. Note: depends on frontend API client (temp_api_client) and backend Tasks API (temp_backend_tasks_api).