daily-tasks

As a frontend developer, implement the LandingHero section for the Landing page. The component uses useRef for `rootRef`, `headlineRef`, `subRef`, and `todRef`. Framer Motion `useScroll` drives parallax: `rawScale` transforms from 1 to 1.2, `rawOpacity` from 1 to 0, and `rawY` from 0 to 60 — all smoothed via `useSpring` (stiffness 120, damping 30). A TIME_OF_DAY array defines four rgba color stops (dawn/midday/dusk/night) interpolated via a custom `colorAt` lerp function subscribed to `scrollYProgress.on('change')` and applied as a CSS linear-gradient to `todRef`. HEADLINE_LINES defines a two-line headline with an `accent` flag for styled text. On mount, GSAP staggers headline word spans and the subtitle ref for entry animations. Imports LandingHero.css and gsap.

As a frontend developer, implement the LandingTaskCanvas section for the Landing page. The component renders three demo TASKS (plan/inbox/design), each with id, title, desc, state ('active'|'done'), meta, and steps array. The `TaskCanvasCard` sub-component uses useState for `flipped` and `dragging` states and Framer Motion `motion.div` with `drag`, `dragConstraints` (bound to a container dragRef), `dragElastic: 0.18`, `dragTransition`, and `whileDrag` (scale 1.05, zIndex 5). A flip animation rotates the card on its Y axis via `motion.div` with `animate={{ rotateY: flipped ? 180 : 0 }}` using a spring config (stiffness 200, damping 25). Cards have a front face (badge with dot, title, desc, meta, flip button) and a back face (steps list). A `CheckIcon` SVG component is used for done-state indicators. An `onFirstDrag` callback surfaces a drag-hint hint. Imports LandingTaskCanvas.css, framer-motion motion/AnimatePresence.

As a frontend developer, implement the LandingFeatures section for the Landing page. The component uses useState for `hovered` (index | null) to drive hover/dim effects across four FEATURES cards (Create Tasks, Track Progress, Organize Priorities, Stay Focused) each with title, desc, label (01–04), and an inline SVG icon. A `containerVariants` object staggers children with `staggerChildren: 0.05`; `cardVariants` animates each card from `{ opacity: 0, y: 28 }` to visible using a spring (stiffness 240, damping 22). The `motion.div` grid uses `whileInView` with `viewport={{ once: true, amount: 0.2 }}`. Two CSS parallax layers (`lf-bg-layer`, `lf-mid-layer`) use a CSS custom property `--scroll` for translateY offsets (-0.3px and -0.5px multipliers). Cards apply `is-hovered` and `is-dimmed` classes when `Math.abs(hovered - index) > 1`. Imports LandingFeatures.css and framer-motion.

As a frontend developer, implement the LandingCTA section for the Landing page. The component uses useRef for `btnRef`, useState for `magnet` ({x,y}) and `burst` (particle array). A `handleMouseMove` callback computes magnetic pull toward the CTA button when cursor is within `MAGNET_RADIUS` (80px), applying up to `MAGNET_MAX` (12px) offset via normalized dx/dy — translated to a Framer Motion `animate` on the button wrapper. A `handleBurst` callback calls `makeBurst()` to generate 10 particles with randomized angle, distance (46–84px), color from `PARTICLE_COLORS`, and scale — rendered via `AnimatePresence` as `motion.div` elements that animate out after 600ms via `window.setTimeout`. The headline uses `motion.h2` with a `whileHover` color animation cycling through `PALETTE` (`#4A90E2`, `#F5A623`, `#7ED321`) over 1.6s infinite loop. Two CSS parallax layers (`cta-bg-layer`, `cta-mid-layer`) use `--scroll` custom property. Imports LandingCTA.css and framer-motion.

As a frontend developer, implement the Footer section for the Landing page. The component uses useRef for `colsRef` (array of column refs) and `rootRef`, and useState for `openCol` (mobile accordion state, defaulting to 'Product'). On mount, GSAP sets all column refs to `{ opacity: 0, y: 18 }`, then an `IntersectionObserver` (threshold 0.2) triggers a staggered GSAP tween (`duration: 0.6, stagger: 0.1, ease: 'power2.out'`) to reveal columns. Four `linkColumns` (Product, Company, Resources, Legal) each contain four href links. Three `socials` (Twitter, GitHub, LinkedIn) are rendered as SVG icon buttons with a `handleSocialEnter` GSAP path-length hover animation. Mobile accordion toggled by `openCol` state via `setOpenCol`. Note: this Footer component may already exist from a previous page and should be reused if available. Imports Footer.css and gsap.

As a frontend developer, implement the DashboardSidebar section for the Dashboard page. Build the sidebar component using React with useState for activeFilter ('all'|'completed'|'pending'|'priority') and drawerOpen toggle state, and useMemo for stats computation. Render a dsb-stats section with animated motion.div stat cards (Total, Done, Pending) using framer-motion spring animations (stiffness 260, damping 24) and whileHover scale/y transforms. Render a dsb-filters section mapping over FILTERS array (ListTodo, CheckCircle2, Clock, Star lucide icons) with motion.button filter buttons that highlight the active filter. Include a 'Create Task' button that navigates to /TaskForm via window.location.href. Support a mobile drawer toggle via toggleDrawer handler with AnimatePresence for open/close animation. Use MOCK_COUNTS object for badge counts per filter. Import and apply DashboardSidebar.css styles.

As a frontend developer, implement the DashboardTopbar section for the Dashboard page. Build the topbar component accepting viewMode and setViewMode props. Manage useState hooks for search string, filterActive boolean, sortOpen boolean, sortBy key ('newest'|'oldest'|'title'|'priority'), and taskCount. Use useRef for sortRef (outside-click detection) and inputRef (focus control). Implement two useEffect hooks: one for keyboard shortcuts (Escape closes sort dropdown, Ctrl+K focuses search input via inputRef), and one for closing the sort dropdown on outside mousedown click using sortRef. Render a dtb-search-wrap with a framer-motion animated search input (spring stiffness 380, damping 28), Search and X lucide icons, and a handleClear useCallback. Render a sort dropdown button with ArrowUpDown icon that opens a SORT_OPTIONS menu with Check icon on selected option, animated with AnimatePresence. Render VIEW_MODES toggle buttons (LayoutGrid for canvas, List for list) that call setViewMode. Apply DashboardTopbar.css styles.

As a frontend developer, implement the DashboardCanvas section for the Dashboard page. Build the canvas component managing INITIAL_TASKS array in useState (6 tasks with id, title, description, priority, completed, date fields). Use useState for flipped map (card flip state keyed by task id) and dragId for drag-and-drop tracking, plus useRef for dragRef. Implement useMemo for getTimeOfDayGreeting() returning label, emoji, and bg color based on current hour. Render a time-of-day greeting header using the tod memoized value. Render task cards as a kanban-style canvas grid, each card supporting: cardFlipVariants (rotateY 0/180 spring stiffness 260, damping 26) for front/back flip animation via framer-motion, GripVertical drag handle, Edit3 and Trash2 action icons, CheckCircle2/Circle completion toggle, RotateCcw restore for completed tasks, Calendar date display via formatDate helper, priority badge (high/medium/low), and ArrowLeft back button on card back face. Support drag-and-drop reordering with dragId state and dragRef. Include a Plus button to navigate to /TaskForm. Apply DashboardCanvas.css styles.

As a frontend developer, implement the DashboardTaskList section for the Dashboard page. Build the list component using useState for expandedId (accordion expand/collapse per row). Render a dtl-header with List lucide icon, 'All Tasks' title, and total count badge. Compute pendingCount and completedCount from TASKS array filtering by status. Implement a desktop dtl-table with thead columns (Task, status, priority, created date) and tbody rows. Each row renders: a ChevronDown icon toggling expandedId via toggleExpand handler, Edit3 action button, CheckCircle2 completion indicator, Trash2 delete button, Calendar/Clock icons for date display via formatDate helper (toLocaleDateString en-US). Use AnimatePresence with motion.div for animated accordion expansion of task description. Render a mobile-friendly card layout as an alternative to the table. Apply priority badge styling for High/Medium/Low values. Apply DashboardTaskList.css styles.

As a frontend developer, implement the DashboardEmpty section for the Dashboard page. Build the empty-state component using useRef for sectionRef. Implement containerVariants (staggerChildren 0.12, delayChildren 0.1) and itemVariants (opacity/y spring stiffness 280, damping 26) for framer-motion staggered entrance animation triggered by whileInView (once: true, amount: 0.3). Render decorative de-bg-glow with two de-glow-orb divs (blue and green ambient glows, aria-hidden). Render a de-illustration block containing two de-pulse-ring divs (second with delay class), a de-circle, three de-dot elements, and a de-icon-box wrapping ClipboardList lucide icon (size 34, strokeWidth 1.8) — all animated via itemVariants. Render de-heading 'No tasks yet!', de-subtitle paragraph, and a motion.button CTA with Plus icon (size 20, strokeWidth 2.3) that calls handleCreate (navigates to /TaskForm via window.location.href) with whileHover scale 1.04 and whileTap scale 0.97 spring. Render de-hints section with keyboard shortcut hints using Command lucide icon. Apply DashboardEmpty.css styles.

As a Backend Developer, implement the Tasks REST API using FastAPI. Create endpoints: POST /api/tasks (create task with title, description, is_completed), GET /api/tasks (list all tasks with optional filter by status), GET /api/tasks/{id} (get single task), PUT /api/tasks/{id} (update task title, description, is_completed), DELETE /api/tasks/{id} (delete task). Include request/response Pydantic schemas, proper HTTP status codes, and error handling (404 for not found, 422 for validation). Note: Frontend section tasks DashboardTaskList, DashboardCanvas, DashboardSidebar, TaskFormActions, TaskFormFields, TaskCardMain, TaskCardActions, TaskCardRelated all depend on this API.

As a frontend developer, implement the TaskCardHeader section for the TaskCard page. This section renders a motion.div root container with framer-motion entrance animation (opacity: 0→1, y: -12→0, 0.4s easeOut). Inside, it contains a back-navigation button (motion.a with whileHover scale 1.05, whileTap scale 0.96) linking to /Dashboard with a chevron-left SVG icon, and a breadcrumb nav (aria-label='Breadcrumb') with three levels: 'daily-tasks' linking to /Landing, 'Dashboard' linking to /Dashboard, 'Tasks' linking to /Dashboard, and a static current-page span showing 'Review Q3 Marketing Plan'. Separator chevrons are rendered as inline SVG polylines. Apply TaskCardHeader.css with tch-root, tch-inner, tch-back-btn, tch-breadcrumb, tch-breadcrumb-link, tch-breadcrumb-sep, and tch-breadcrumb-current class styles.

As a Tech Lead, verify the end-to-end integration between the Dashboard frontend implementation and the Tasks CRUD backend API. Ensure DashboardTaskList, DashboardCanvas, DashboardSidebar, DashboardTopbar, and DashboardEmpty all fetch real task data via the API client, handle loading/error states gracefully, and that create/complete/delete actions correctly call the API and refresh the UI. Confirm data flows correctly, API responses are handled properly in the UI, and all interactions work as expected. Note: depends on existing Dashboard section tasks (149361e7, 1e8ac875, c49addb8, d3dfb3a2, f32335a7) and the backend API (temp_backend_tasks_api) and frontend API client (temp_frontend_api_client).

As a Tech Lead, verify the end-to-end integration between the TaskForm frontend implementation and the Tasks CRUD backend API. Ensure TaskFormFields collects valid data, TaskFormActions calls the correct API endpoint (POST for create, PUT for update), handles API errors and success responses in the UI status message, and navigates correctly on success. Confirm that the simulated async handlers in TaskFormActions are replaced with real API client calls. Note: depends on existing TaskForm section tasks (267d6d19, 92224a5d, cb7a842d) and the backend API (temp_backend_tasks_api) and frontend API client (temp_frontend_api_client).

As a Tech Lead, verify the end-to-end integration between the TaskCard frontend implementation and the Tasks CRUD backend API. Ensure TaskCardMain fetches the real task by ID from the API, TaskCardActions calls DELETE and PATCH (mark complete) endpoints correctly, TaskCardRelated fetches related or recent tasks from the API, and all UI states (loading, error, success) are handled properly. Confirm that static taskData and RELATED_TASKS arrays are replaced with live API data. Note: depends on existing TaskCard section tasks (54601700, 76f5fe90, 81a5c27d, 87188bd6) and the backend API (temp_backend_tasks_api) and frontend API client (temp_frontend_api_client).

As a frontend developer, implement the TaskCardMain section for the TaskCard page. This section uses useState(isFlipped), useRef(cardRef), useMotionValue(rotateY), and useTransform to drive a flip-card animation between a front face (task details) and a back face (edit/complete/delete actions). Static taskData object (id, title, description, status, priority, createdAt, updatedAt) is used for display. A formatDate helper formats ISO timestamps to locale strings. Priority is mapped to CSS classes tcm-priority-high/medium/low and statusClass tcm-completed. The flip is triggered by handleFlip (useCallback). The front face shows title, description, priority badge, status badge, and timestamps. The back face exposes edit (pencil SVG), complete (check SVG), and delete (trash SVG) action buttons. Spring config uses stiffness 260, damping 26. frontOpacity and backOpacity are driven by useTransform on rotateY [-90,0] and [0,90]. Apply TaskCardMain.css with tcm-* class variants.

As a frontend developer, implement the TaskCardActions section for the TaskCard page. This section manages three interactive actions using useState and useCallback: (1) isComplete toggle via handleComplete setting isComplete to true, (2) showDeleteConfirm two-step delete flow via handleDeleteClick which auto-dismisses after 3000ms using deleteTimerRef (useRef) with cleanup on unmount via useEffect, and (3) handleEdit navigating to /TaskForm via window.location.href. AnimatePresence wraps tooltip visibility with tooltipVariants (hidden/visible/exit using spring stiffness 600, damping 30). buttonSpring config uses stiffness 500, damping 28, mass 0.8. Inline SVG icon components: EditIcon (pencil path), CheckIcon and CheckDoneIcon (polyline check), TrashIcon (trash bin with lid and lines). deleteHovered state controls hover styling on delete button. Apply TaskCardActions.css with tca-* class variants.

As a frontend developer, implement the TaskCardRelated section for the TaskCard page. This section renders a horizontally scrollable carousel of related tasks from a static RELATED_TASKS array (5 items with id, title, description, category, status, date fields). Uses useState for canScrollLeft, canScrollRight, and inView, with useRef(trackRef) pointing to the scroll container. Scroll state is updated via checkScroll (useCallback) listening to scroll and resize events via useEffect. An IntersectionObserver on the .ta-rel-root container sets inView to trigger staggered card entrance animations using CARD_VARIANTS (hidden: opacity 0, y 30; visible: opacity 1, y 0 with per-index delay i*0.08 and cubic-bezier easing). STATUS_BADGE maps status strings to label/cls pairs; STATUS_ICON maps to ✓ and ◉ symbols; CATEGORY_COLOR_MAP maps Work→#4A90E2 and Personal→#F5A623 via categoryColor helper. Each card is wrapped in a motion.div with custom={i} for stagger. isEmpty state shows an empty state fallback. Apply TaskCardRelated.css with ta-rel-* class variants.

As a frontend developer, implement the TaskFormHeader section for the TaskForm page. This section renders an animated page header using framer-motion. It includes: (1) a decorative gradient accent bar that animates scaleX from 0 to 1 on mount; (2) an animated breadcrumb nav with Dashboard → TaskForm crumbs using ChevronRight separator from lucide-react; (3) a title row with a spring-animated ClipboardList icon (scale+rotate entry) and a character-by-character animated 'Add New Task' h1 where each char uses useMemo-cached spring transitions with staggered delays (0.12 + i*0.04s), rotateX from 40 to 0, and the first 3 chars receive the 'tfh-char-secondary' class; (4) an animated subtitle paragraph; and (5) a 'New Entry' status badge. Uses BREADCRUMB, TITLE_CHARS, and STATUS_BADGE constants. Note: Navbar component may already exist from Landing/Dashboard pages.

As a frontend developer, implement the TaskFormFields section for the TaskForm page. This section provides the core form input fields using React useState and useCallback hooks. It includes: (1) a Task Title input (id='tff-title') with TITLE_MAX=100 char limit, live character counter, aria-required/aria-invalid attributes, and onBlur-triggered validation that checks for non-empty (required) and minimum 3-character length; (2) a Description textarea with DESC_MAX=500 char limit and overflow validation; (3) an isCompleted toggle for task status; (4) a touched/errors state system that shows validation messages only after blur; (5) AnimatePresence-wrapped error messages using AlertCircle and success indicators using CheckCircle2 from lucide-react; (6) conditional CSS classes 'tff-has-error' and 'tff-is-valid' on field wrappers; and (7) helper text with aria-describedby linking. The validate useCallback mutates an errors copy and calls setErrors.

As a frontend developer, implement the TaskFormActions section for the TaskForm page. This section renders the form action buttons using a custom MagneticButton wrapper component. MagneticButton uses useRef, useMotionValue, and useSpring (stiffness:300, damping:22) to apply a magnetic cursor-follow effect via onMouseMove/onMouseLeave handlers, with whileTap scale:0.96. The section manages: (1) saving state with a 1400ms simulated async handleSave that shows 'Task updated/created successfully!' or error via AnimatePresence statusMessage; (2) deleting state with a window.confirm guard and 1000ms simulated handleDelete that redirects to /Dashboard on success; (3) handleCancel that navigates to /Dashboard; (4) an isBusy flag disabling all buttons during async ops; (5) isEditMode=true flag controlling save button label; and (6) Save (Save icon), Cancel (X icon), and Delete (Trash2 icon) buttons from lucide-react, with CheckCircle and AlertCircle for status feedback.