marine-todo

As a frontend developer, implement the HomeTodoHeader section for the Home page. This section uses React useState and useEffect hooks alongside framer-motion's motion, useAnimationControls, and AnimatePresence. It defines a getTimePeriod() utility and a TIME_CONFIG object with four time-of-day themes (morning, afternoon, evening, night), each with distinct bg, badgeBg, and orbTint color values. The section renders animated SVG icons: SunIcon (continuous 360° rotation over 20s), AfternoonIcon (360° rotation over 30s), EveningIcon (scale+opacity breathing at 3s interval), and a NightIcon. The header displays a dynamic greeting badge rendered with AnimatePresence for smooth time-period transitions, using the badgeBg color token and orbTint from TIME_CONFIG. The component conditionally renders the correct icon and greeting label based on the current hour. CSS imports from HomeTodoHeader.css. This is a root section with no page-level dependencies.

As a frontend developer, implement the HomeTodoWaveBackground section for the Home page. This section uses React useEffect, useRef, useState, and useMemo alongside framer-motion's useScroll and useTransform for scroll-based parallax (parallaxY = scrollY * -0.3), and GSAP timeline for wave animation. It defines a getTimeBasedColors() utility returning four color sets (morning, afternoon, evening, night) with primary/secondary/tertiary tokens. The generateWavePath() function produces SVG path data using 120-step sine-wave interpolation with amplitude, frequency, phaseShift, and yBase parameters. Three SVG path refs (wave1Ref, wave2Ref, wave3Ref) are animated via a GSAP timeline (repeat: -1, yoyo: true, 6s duration) that continuously updates path 'd' attributes with evolving phase values. Colors auto-update every 60 seconds via setInterval. The SVG viewBox is '0 0 1440 400'. CSS imports from HomeTodoWaveBackground.css. This section is independent of HomeTodoHeader and can be built in parallel.

As a frontend developer, implement the HomeTodoTaskList section for the Home page. This section manages the core task list using React useState and useCallback alongside framer-motion's motion, AnimatePresence, and Reorder for drag-to-reorder functionality. INITIAL_TASKS contains 6 seed tasks with id, text, and completed fields. It defines SVG icon components: CheckIcon, EditIcon, DeleteIcon, SaveIcon, CancelIcon, and a DragHandle (3×2 dot grid). The TaskCard component manages local ripple state (setRipples) and an editing state with inline text input toggled via editing flag. cardVariants animate cards in (opacity 0→1, scale 0.92→1, y 18→0) and out (opacity→0, scale→0.92, y→-12). rippleVariants scale from 0→3 with opacity 0.5→0 over 0.6s easeOut. Tasks support toggle-complete, inline edit with save/cancel, and delete with AnimatePresence exit animations. The Reorder.Group wraps TaskCards for drag reordering. CSS imports from HomeTodoTaskList.css. This section is independent of other sections and can be built in parallel.

As a frontend developer, implement the HomeTodoAddTaskBar section for the Home page. This section uses React useState, useRef, useCallback, and framer-motion's motion, AnimatePresence, and useAnimation. State includes taskText, isFocused, showParticles, showSuccess, and ripples array. PARTICLE_COUNT=6 particles are emitted at PARTICLE_ANGLES [0,60,120,180,240,300] degrees using PARTICLE_COLORS ['#FF6F61','#F9AA33','#FFB74D','#FF6F61','#4A6572','#F9AA33']. handleAddTask() triggers: buttonControls scale animation [1,1.08,1] over 0.35s, spawnRipple() that calculates click position relative to .htab-inner container, setShowParticles(true) for 850ms, setShowSuccess(true) for 1400ms toast, clears taskText, and refocuses inputRef after 100ms. Ripple elements animate width/height 0→400px with opacity 0.5→0. Enter key on input triggers handleAddTask. The .htab-inner div applies --focused class when isFocused. The outer .htab-root uses initial opacity:0 y:20 → animate opacity:1 y:0 over 0.5s easeOut. CSS imports from HomeTodoAddTaskBar.css. This section is independent of other sections and can be built in parallel.

As a frontend developer, implement the HomeTodoEmptyState section for the Home page. This section uses React useState, useEffect, useMemo, and framer-motion's motion, useInView, and AnimatePresence. getTimeOfDayColors() returns main/secondary/accent tokens for four time periods. useInView tracks the section ref with { once: false, margin: '-50px' }. breathingVariants animate scale [1,1.08,1] with duration 1.8s when hovered or 3s at rest, repeating infinitely. textContainerVariants uses staggerChildren:0.18 and delayChildren:0.3; textItemVariants animate opacity 0→1 and y 20→0 over 0.7s with cubic-bezier [0.25,0.46,0.45,0.94]. arrowBounce animates y [0,8,0] over 1.6s easeInOut infinitely. Two parallax decorative SVG layers are rendered: .htes-parallax-deco (translateY * -0.2px) with two wave paths filled with todColors.main (opacity 0.4) and todColors.secondary (opacity 0.3), and .htes-parallax-mid (translateY * -0.4px) with todColors.accent wave (opacity 0.35). The --scroll CSS custom property drives parallax via inline transform. An isHovered state toggles on the breathing container to speed up the animation. CSS imports from HomeTodoEmptyState.css. This section is independent of other sections and can be built in parallel.

As a Backend Developer, define the MySQL database model for tasks using SQLAlchemy ORM. The Task model should include fields: id (primary key, UUID or auto-increment int), text (VARCHAR), completed (BOOLEAN, default false), order_index (INT for drag-to-reorder support), created_at, updated_at. Create Alembic migration scripts to initialize the tasks table. Include a seed script with sample tasks matching the INITIAL_TASKS referenced in HomeTodoTaskList section.

As a Frontend Developer, set up global state management and API client for the marine-todo SPA. Implement a React Context (or lightweight Zustand/Redux store) to hold the tasks array and expose actions: fetchTasks, addTask, updateTask, deleteTask, reorderTasks. Create an axios or fetch-based API client configured with the backend base URL (from env REACT_APP_API_URL). All task mutations should optimistically update state and rollback on error. This bridges the frontend section components (HomeTodoTaskList, HomeTodoAddTaskBar) with the backend Tasks CRUD API. Note: HomeTodoTaskList (7fe722f2), HomeTodoAddTaskBar (5555c1f7) should depend on this task once completed.

As a Frontend Developer, establish the global theme and design system for marine-todo. Create a CSS variables file (or Tailwind/styled-components theme) with all color tokens: --primary: #2D3E50, --primary-light: #4A6572, --secondary: #F9AA33, --accent: #FF6F61, --highlight: #FFB74D, --bg: #F5F5F5, --surface: rgba(255,255,255,0.9), --text: #212121, --text-muted: #757575, --border: rgba(0,0,0,0.1). Set up global typography, spacing scale, and base reset styles. Configure framer-motion and GSAP as project dependencies. This is a prerequisite for all frontend section components.