earthy-page

As a frontend developer, implement the HomeHeader section for the Home page. This section renders a staggered letter-by-letter reveal animation of the title 'earthy-page' using framer-motion's `letterContainerVariants` and `letterVariants` with spring physics (stiffness: 260, damping: 20, stagger: 0.05s). Each character is split into individual `motion.span` elements with the `hh-letter` class. Below the title, an animated SVG accent line uses `accentLineVariants` with `pathLength` draw animation (duration 1.2s, delay 0.6s), and the stroke color transitions between '#F4A261' and '#FFB703' based on `isHovered` state managed via `onHoverStart`/`onHoverEnd` on the parent `motion.div`. A tagline paragraph ('A serene space for your daily tasks') fades in with `taglineVariants` at delay 1.4s. Accessibility: aria-label and role='heading' aria-level={1} on the title row. Uses `useState` for hover state. Styles in HomeHeader.css.

As a frontend developer, implement the DeskCanvas section for the Home page. This section renders a time-aware desk background using `getTimePhase()` (reads `new Date().getHours()`) to derive one of four phases: morning, midday, evening, night. State hooks `timePhase` and `bgColor` are updated every 5 seconds via `setInterval` in a `useEffect`. The animated `dc-surface` div uses framer-motion `animate={{ backgroundColor: bgColor }}` with a 1.5s easeInOut transition for smooth color morphing. A `dc-time-pill` badge shows the current phase label with a `dc-time-dot` whose `backgroundColor` animates via framer-motion between phase-specific dot colors (#FFB703, #F4A261, #A3C9A8, #4A7C59). Also renders texture/grain/desk-edge divs and four `dc-corner-decor` elements for a physical desk aesthetic. A `dc-drag-zone` fades in with initial opacity 0, scale 0.97 animation. Uses `useMemo` for dotColor and phaseLabel derivations. Styles in DeskCanvas.css (5624 chars).

As a frontend developer, implement the TaskNotes section for the Home page. This section renders a draggable, editable sticky-note board using `INITIAL_NOTES` (8 pre-seeded notes with id, text, category) and `COLOR_CLASSES` array for note theming. Each `StickyNote` sub-component uses `useMotionValue` for rotation (random ±3° via `getRandomRotation()`), a y-axis lift motion value, and `useTransform` to derive scale (1→1.03) and boxShadow on drag. Drag interactions via `handleDragStart`/`handleDragEnd` animate rotation back to 0 on pickup and restore on release using framer-motion `animate()`. Hover triggers a -6px y-lift spring animation. Inline editing is supported: `isEditing` state toggles a textarea (ref: `textareaRef`) with auto-focus via `setTimeout`. Uses `Pencil`, `Trash2`, `Check` icons from lucide-react. `onDelete` and `onEdit` handlers are passed as props. `useInView` from framer-motion is used for scroll-based reveal. Styles in TaskNotes.css (4533 chars). This is the core task-display component per SRD functional requirements.

As a frontend developer, implement the TaskInputArea section for the Home page. This section provides a controlled text input for creating new tasks. State: `isFocused` (boolean), `inputValue` (string), `showConfirm` (boolean). The `tia-input-wrapper` motion.div animates `borderColor` between '#4A7C59' (focused) and 'rgba(38,70,83,0.2)' (idle), and `boxShadow` to a green glow on focus (spring stiffness 400, damping 30). The `tia-input` is a standard input with placeholder 'What needs to be done today?', aria-label 'New task', and Enter key submission via `handleKeyDown` (useCallback). The `tia-add-btn` motion.button animates `width` (42px collapsed → auto expanded), `backgroundColor` (#E76F51 active vs 50% opacity disabled), and `paddingLeft/Right` based on focus/text presence. `whileHover` transitions button color to '#FFB703'. `handleSubmit` (useCallback) sets `showConfirm` true for 600ms then resets. Button renders an SVG plus icon. Uses `useRef` for input focus. Styles in TaskInputArea.css (3035 chars). Implements SRD 'create new tasks' requirement.

As a frontend developer, implement the BottomPrompt section for the Home page. This section renders a contextual hint bar with three user interaction hints: 'Drag notes to reorder' (IconMove SVG), 'Click to edit' (IconEdit SVG), and 'Tap a note to delete' (IconX SVG) — each a custom inline SVG component. Uses `useInView` (ref attached to `bp-root`, margin '0px 0px -40px 0px', once: true) to trigger entrance. State: `shouldPulse` (boolean), `hasInteracted` (boolean), `isHovered` (boolean). A `setTimeout` of 3000ms after inView triggers `setShouldPulse(true)` if user hasn't interacted. Container uses `containerVariants` with staggerChildren 0.08s. Words are split via `splitWords()` and each rendered with `wordVariants` (opacity 0→1, y 12→0). Separator dots between hints use `separatorVariants` (scale 0→1). Active hint uses `pulseVariants` for a scale pulse animation ([1, 1.04, 1], 1.8s, repeat 2). `AnimatePresence` wraps the visible content gated on `isInView`. Styles in BottomPrompt.css (1583 chars). Complements TaskNotes UX with discoverable interaction hints.

As a Backend Developer, define the Task SQLAlchemy model with fields: id (UUID or int PK), text (string), position (int for ordering), created_at (datetime, IST-aware), updated_at (datetime). Write Alembic migration scripts for the tasks table in MySQL/MariaDB. Add seed data with sample tasks to match the 8 pre-seeded INITIAL_NOTES used in the frontend. Ensure the schema supports all CRUD and reorder operations.

As a Frontend Developer, configure the global design system and theme for earthy-page. Define CSS custom properties (or a theme config) for all SRD colors: primary (#4A7C59), primary_light (#A3C9A8), secondary (#F4A261), accent (#E76F51), highlight (#FFB703), bg (#F1FAEE), surface (rgba(255,255,255,0.8)), text (#264653), text_muted (#8D99AE), border (rgba(38,70,83,0.2)). Set up global base styles, font imports, reset CSS, and install/configure framer-motion as a dependency. This is a prerequisite for all section-level frontend tasks.

As a Backend Developer, implement the FastAPI CRUD endpoints for tasks: GET /tasks (list all), POST /tasks (create), PUT /tasks/{id} (edit), DELETE /tasks/{id} (delete), and PATCH /tasks/{id}/reorder (update position/order). Include Pydantic schemas for request/response validation, error handling, and IST timezone awareness per SRD constraints. These endpoints support all functional requirements: create, edit, delete, view, and reorder tasks.

As a Frontend Developer, implement global state management for the tasks list to be shared across all Home page sections (TaskNotes, TaskInputArea). Use React Context or a lightweight store (e.g. Zustand) to hold the tasks array, expose actions: addTask, editTask, deleteTask, reorderTasks. Wire up API calls (fetch/axios) to the backend endpoints. This enables TaskInputArea to create tasks, TaskNotes to edit/delete/reorder them, and ensures consistent state across sections. Note: this task depends on temp_backend_tasks_api being available.

As a Tech Lead, verify the end-to-end integration between the Home page frontend (TaskNotes, TaskInputArea, BottomPrompt sections) and the Tasks CRUD backend API. Ensure data flows correctly: tasks load from GET /tasks on mount, new tasks from TaskInputArea hit POST /tasks and appear in TaskNotes, edits hit PUT /tasks/{id}, deletions hit DELETE /tasks/{id}, and drag-to-reorder calls PATCH /tasks/{id}/reorder. Validate API responses are handled properly in the UI, error states are surfaced gracefully, and all user flow paths (view → create → edit → delete → reorder) work as expected end-to-end. Note: depends on temp_backend_tasks_api and temp_global_state.