Argonova_

As a frontend developer, implement the LandingHero section for the Landing page. Render the `HEADLINE_WORDS` array (`Welcome`, `to`, `Argonova_`) using Framer Motion `containerVariants` with `staggerChildren: 0.12` and `delayChildren: 0.3`, and `wordVariants` with `rotateX: -40` to `0` entrance animation. Animate the subheadline using `fadeUpVariants` (`opacity: 0, y: 24` → visible). Render the `STATS` array (`50K+ Active Growers`, `120+ Crop Varieties`, `98% Satisfaction`) with `statVariants`. Implement 8 floating background particles (types: `leaf`, `droplet`, `seed`) via the `LeafSVG`, `DropletSVG`, and `SeedSVG` sub-components positioned absolutely using left/top percentages from the `PARTICLES` config. Integrate GSAP `ScrollTrigger` for parallax scroll effects on hero content. Render CTA buttons with `ctaVariants` scale-up entrance (`scale: 0.85` → `1`). Use `useInView` from Framer Motion to trigger animations on viewport entry. Register `ScrollTrigger` plugin via `gsap.registerPlugin`.

As a frontend developer, implement the TrustBadges section for the Landing page. Render the `BADGES` array (4 items: `users` 10K+, `farmers` 100%, `crops` 50+, `support` 24/7) as animated stat cards. Implement the `AnimatedCounter` sub-component using Framer Motion's `useMotionValue`, `useSpring` (stiffness: 60, damping: 25), and `useTransform` hooks — the spring animates from 0 to the badge's `value` when `inView` is true, with a `springVal.on('change')` subscriber updating local `display` state via `Math.round`. Each badge card should display an SVG icon, the animated numeric counter with suffix, a label, and a description string. Use `useInView` to trigger the counter animation only when the section enters the viewport. Apply entrance animations to each badge card using Framer Motion.

As a frontend developer, implement the InteractiveGalaxy section for the Landing page. This is a Three.js/React Three Fiber 3D canvas section. Render a `Canvas` (from `@react-three/fiber`) containing: (1) a `StarField` component using a `useFrame` rotating group with `glowRefs` for per-star glow pulsing, (2) star positions generated via `fibonacciSphere` (Fibonacci sphere distribution using golden angle `Math.PI * (3 - Math.sqrt(5))`), (3) `CONNECTIONS` array defining 8 line pairs rendered as `Line` components from `@react-three/drei`, (4) `OrbitControls` for mouse-drag orbit. Track `hoveredStar` and `selectedStar` state. Render the `FEATURES` array (6 items: `crops`, `growth`, `soil`, `disease`, `learning`, `community`) as interactive star nodes — each with a `color`, `icon` emoji, `title`, `description`, `cta`, and `href`. Use `AnimatePresence` + Framer Motion to animate the feature detail panel that appears when a star is selected. Each star is clickable via `onStarClick` and hoverable via `onStarHover` callbacks. Import `THREE` from `three` for `Vector3` usage.

As a frontend developer, implement the PersonalizedRecommendations section for the Landing page. Render the `CARDS` array (3 items: `recommendations`, `guidance`, `seasonal`) as interactive feature cards. Each card includes: a `CardIcon` sub-component rendering a unique inline SVG (crop/water-drop/sun-burst icons with their respective stroke colors `#F39C12`, `#E74C3C`, `#27AE60`), a `tagline`, `description`, a `metrics` array (3 items each with `label` and `icon` type), `iconBg` background color, and a `link` href. Implement `useState` for tracking the active/hovered card. Use `AnimatePresence` from Framer Motion for card transition animations. Apply staggered entrance animations per card. Metrics icons include types: `soil`, `crop`, `check`, `weather`, `sun`, `map`, `leaf`, `calendar`, `shield` — render appropriate SVG icons for each metric type. Cards link to `/CropPlanner`, `/SoilHealth`, and `/LearningCenter` respectively.

As a frontend developer, implement the GrowthTracking section for the Landing page. Render a `PlantSVG` sub-component that accepts a `progress` prop (0.0–1.0) and visually morphs the plant illustration through `GROWTH_STAGES` thresholds (`Seed`: 0, `Seedling`: 0.25, `Vegetative`: 0.55, `Mature`: 0.8). Integrate GSAP `ScrollTrigger` to animate the `progress` value as the user scrolls through the section — use `gsap.registerPlugin(ScrollTrigger)`. Render the `FEATURES` array (4 items: `growth`, `water`, `health`, `journal`) as a vertical feature list, each with a colored icon wrapper (`gt-feature-icon--growth/water/health/journal`), SVG icon, `title` with `titleAccent` highlight span, and `desc`. Use Framer Motion `useInView` for staggered entrance animation of each feature row. Use `useState`, `useEffect`, and `useRef` for managing scroll-driven progress state and GSAP timeline cleanup.

As a frontend developer, implement the LearningHub section for the Landing page. Render the `CARDS` array (4 items: `tutorials`, `videos`, `seasonal`, `articles`) as a grid of resource cards. Each card has: a `colorClass` for the icon wrapper background (`lh-icon-wrap--tutorials/videos/seasonal/articles`), an `lh-icon-svg` SVG icon, a `title`, `description`, and a `tags` array (3 tags per card — e.g., `['Crop Rotation', 'Organic Methods', 'Irrigation']`). Implement `cardVariants` with a custom `i` index parameter for staggered entrance: `hidden: { opacity: 0, y: 40 }` → `visible` with per-card delay based on index. Use `useInView` from Framer Motion to trigger card animations when the section enters the viewport. Implement hover effects on cards. Use `useState` for tracking active/selected card state.

As a frontend developer, implement the UserPersonas section for the Landing page. Render the `PERSONAS` array (4 items: `farmer`, `grower`, `gardener`, `learner`) as interactive persona cards. Each persona has: a `variant` class string for theming (`up-avatar-svg` with variant-specific CSS), a unique multi-path SVG avatar icon, a `role` label, a `benefit` description string, and a `ctaHref` link (`/CropPlanner`, `/HomeGarden`, `/SoilHealth`, and a fourth learner href). Implement `useState` for `activePersona` tracking, `useRef` for the container, `useEffect` for initialization, and `useCallback` for event handlers. Use `AnimatePresence` from Framer Motion to animate persona card transitions when switching between active personas. Apply entrance animations to the section and individual persona tabs/cards. Handle keyboard and click interactions for accessibility.

As a frontend developer, implement the Testimonials section for the Landing page. Render the `TESTIMONIALS` array (6 items: Rajesh Patel, Ananya Sharma, Vikram Desai, Priya Nair, Suresh Kumar, Meera Joshi) with auto-advancing carousel at `AUTO_INTERVAL: 5000ms`. Implement `useState` for `activeIndex` tracking and `useCallback` for navigation handlers. On mobile, use `cardVariants` with `enter: { opacity: 0, scale: 0.8 }`, `center: { opacity: 1, scale: 1 }`, `exit: { opacity: 0, scale: 0.8 }` transitions via `AnimatePresence`. On desktop, render up to 3 cards simultaneously using `desktopCardVariants` with per-card `delay: i * 0.15` stagger. Implement `StarRating` sub-component using `starContainerVariants` (stagger 0.1s, delay 0.3s) and `starVariants` with spring animation (`stiffness: 300, damping: 15, rotate: -90 → 0`). Each testimonial card shows: initials avatar badge, name, role, quote text, and star rating. Use `useEffect` for the auto-advance interval with cleanup.

As a frontend developer, implement the LandingCTA section for the Landing page. Implement a full-width CTA section with two buttons: primary (using `PARTICLE_COLORS_PRIMARY`: `#F39C12`, `#F1C40F`, `#E67E22`, `#D4AC0D`, `#FDE68A`) and secondary (using `PARTICLE_COLORS_SECONDARY`: `#E74C3C`, `#C0392B`, `#F39C12`, `#E57373`, `#FF8A80`). Implement the magnetic button effect via `handleMagnetic` and `handleMouseLeaveMagnetic` callbacks using GSAP `gsap.to(btn, { x, y })` with `power2.out` easing, pulling buttons up to 12px toward the cursor within a 120px `threshold` radius. On click, trigger `spawnBurst` — spawning 12 particles per click at evenly distributed angles, each with random speed (50–110px) and a color drawn from the palette. Use `waveSvgBottomRef` and `waveSvgTopRef` to animate SVG wave elements via GSAP on button click, temporarily setting `animationDuration` to `4s` then reverting to `12s` after 0.6s. Use `AnimatePresence` to render and clean up burst particles. Manage particle state with `useState` and `particleIdRef` for unique IDs.

As a frontend developer, implement the Footer section for the Landing page. Render the `linkColumns` array (4 columns: `Product`, `Company`, `Resources`, `Support`) each with 5 anchor links — Product links to `/CropPlanner`, `/Dashboard`, `/DiseaseGuide`, `/SoilHealth`, `/HomeGarden`; Resources links to `/LearningCenter`. Render the `socialIcons` array (Twitter, GitHub, LinkedIn, YouTube) as SVG icon buttons using their `path` data. Use Framer Motion `useInView` with a `useRef` container ref to trigger staggered column entrance animations when the footer scrolls into view. Implement hover animations on link items and social icons. Include the Argonova_ brand logo/wordmark, copyright notice, and bottom legal links (Privacy Policy, Terms of Service). This component may already exist if shared across pages — check for reuse from other page implementations.

As a frontend developer, implement the Navbar section for the Login page. This component may already exist from the Landing page (task 6839d30e-cecc-4539-8653-58002b5cb8a7) — reuse or verify it renders correctly on /Login. The Navbar uses useState hooks for menuOpen, langOpen, activeLang, and activePath. It uses useEffect to sync activePath with window.location.pathname and to lock body scroll when the mobile menu is open. It uses useCallback for toggleMenu, closeMenu, toggleLang, and selectLang handlers. The NAV_ITEMS array includes 9 routes (Landing, Login, Signup, Dashboard, LearningCenter, CropPlanner, DiseaseGuide, SoilHealth, HomeGarden). The LANGUAGES array supports English, Hindi, Tamil, Telugu with a dropdown switcher. AnimatePresence and motion from framer-motion animate the mobile drawer and language dropdown. The nv-link--active class is applied based on activePath matching. The hamburger button controls the mobile overlay menu.

As a frontend developer, implement the SignupHeader section for the Signup page. This section renders a full-width `<header className="sh-root">` containing a Three.js Canvas background with an animated `ParticleField` component — 200 particles using `Float32Array` for positions/speeds, animated via `requestAnimationFrame` and `THREE.Clock` with per-particle sinusoidal Y-drift and boundary clamping. Overlay content uses Framer Motion `fadeUp` variants (opacity 0→1, y 20→0, custom delay stagger at i*0.18) for the `sh-headline` ('Create Your Account'), `sh-subheadline` (Argonova_ tagline), and `sh-tagline` elements. Canvas uses `camera={{ position: [0,0,4], fov:55 }}` and `dpr={[1,1.5]}`. Import from `../styles/SignupHeader.css`. Note: Navbar component may already exist from Landing/Login pages.

As a DevOps Engineer, configure Vercel with correct build settings, environment variable injection (VITE_SUPABASE_URL, VITE_SUPABASE_ANON_KEY), and preview/production deployment pipelines so the React/Vite app deploys reliably from the repository.

As a Frontend Developer, define all React Router v6 routes (Landing, Login, Signup, Dashboard, CropPlanner, DiseaseGuide, SoilHealth, HomeGarden, LearningCenter) with protected route wrappers for authenticated pages using Supabase session state from global store.

As a Backend Developer, implement Supabase RPC functions and client-side service layer for CRUD on the users table (id, full_name, email, village, farm_size, user_type, preferred_language, soil_type, created_at) with proper RLS policies so only authenticated users can read/update their own profile.

As a Backend Developer, implement rule-based crop rotation logic as a Supabase Edge Function or client-side service: accepts previous_crop, soil_type (Black/Red/Sandy/Clay), and season (Kharif/Rabi/Zaid) and returns recommended next crop, fertilizer suggestions, water requirements, and sustainability insights. Implement CRUD for crop_history table. Note: frontend tasks temp_023-temp_025 depend on this API.

As a Backend Developer, implement a disease lookup service querying a predefined agriculture dataset (seeded in Supabase) by crop_name and symptom, returning disease name, causes, prevention methods, treatment suggestions, and fertilizer recommendations. Implement CRUD for disease_reports table with RLS. Note: frontend tasks temp_017-temp_019 depend on this API.

As a Backend Developer, implement CRUD service for garden_tracker table (id, user_id, plant_name, watering_schedule, sunlight_requirement, growth_status, created_at) with Supabase RLS so users can create, read, update, and delete their plant records. Note: HomeGarden frontend tasks 9094662a, 5e257322, 96de7dd2 depend on this API.

As a Backend Developer, implement soil health service layer using Supabase: seed nutrient reference data (N, P, K, Ca, Mg, S levels, pH ranges, fertilizer guidance per soil type) and expose query endpoints returning nutrient profiles, pH indication, suitable crop suggestions, and fertilizer/irrigation advice for the SoilHealth page components.

As a Backend Developer, seed and expose Supabase queries for learning center content: farming tutorials, educational videos (title, instructor, duration, views), seasonal tips (per season), and articles (title, author, date, excerpt, readTime, category). Includes pagination and filtering by content type and difficulty level.

As a frontend developer, implement the SoilHealthHistoricalTrends section for the SoilHealth page. This section renders a Chart.js Line chart (using react-chartjs-2 with CategoryScale, LinearScale, PointElement, LineElement, Filler, Tooltip, Legend) overlaid on a Three.js @react-three/fiber Canvas particle background (SoilParticles mesh with rotation). The component manages state for active time range (RANGES: '6m'/'12m') and visible nutrient toggles (pH, nitrogen, phosphorus, potassium) from NUTRIENT_LABELS array. MONTHS_12 and MONTHS_6 label arrays drive the x-axis. NUTRIENT_HISTORY array (12 entries with date, lab, pH, nitrogen, phosphorus, potassium, status fields from Jun 2025–May 2026) is sliced based on selected range. Each nutrient line uses a distinct color (#2C3E50, #E74C3C, #F39C12, #F1C40F). AnimatePresence and framer-motion wrap the chart container for animated mount/unmount transitions. Toggle buttons with sht-toggle-dot-- prefixed dot classes and range selector pills allow nutrient filtering and time range switching.

As a frontend developer, implement the SoilHealthRecommendations section for the SoilHealth page. This section renders a RECOMMENDATIONS array (items: nitrogen increase, lime application, with urgency: 'high'/'medium', timeline strings, description referencing actual ppm values like 28 ppm nitrogen vs 35–40 ppm optimal) as animated cards using framer-motion useInView and motion.div with stagger variants. Each card has an inline SVG icon, urgency badge, title, description, and timeline callout. A decorative Three.js ThreeAccent Canvas is embedded — it renders a SoilTerrainChunk using a BoxGeometry(1, 0.4, 1, 6, 3, 6) with procedural vertex displacement (Math.sin/cos bumps on Y axis), meshStandardMaterial (color #4a3620, roughness 0.75), ambient+directional lights, OrbitControls with autoRotate at speed 1.2 and zoom/pan disabled.

As a frontend developer, implement the SoilHealthActions section for the SoilHealth page. This section renders a framer-motion motion.div card (initial opacity 0 y 24, whileInView opacity 1 y 0, viewport once with -60px margin, 0.55s easeOut transition) containing an animated left accent stripe (sa-accent-stripe), two CTA anchor buttons linking to /CropPlanner — a primary 'Schedule Lab Test' button with a document SVG icon and a secondary 'Explore Crop Recommendations' button with a bar-chart SVG icon — plus a callout row showing 'Last soil sample taken: 45 days ago' with a clock SVG icon and a sa-prompt-link inline anchor also routing to /CropPlanner.

As a frontend developer, implement the Navbar section for the DiseaseGuide page. This component may already exist from previous pages (Dashboard, SoilHealth, HomeGarden). It uses framer-motion useScroll/useTransform for scroll-driven background opacity (rgba(44,62,80,v)), backdropFilter blur (0–12px), and boxShadow transitions. Includes NAV_LINKS array (Features, About, How It Works, Contact), PAGE_LINKS array (Dashboard, Learning Center, Crop Planner, Soil Health, Home Garden), and LANGUAGES array (en, हिन्दी, தமிழ், తెలుగు) with selectedLang useState. spawnParticles callback generates 8 radial particles on CTA click with 700ms cleanup timeout. Mobile hamburger with mobileOpen useState and AnimatePresence. Language dropdown with langOpen useState. SVG logo with animated path draw. Verify the component is shared/reused from existing pages rather than recreated.

As a Backend Developer, implement a global error boundary in React for frontend runtime errors, and add an error_logs table in Supabase to capture API errors (endpoint, error_code, message, user_id, created_at) from Edge Functions and RPCs. Expose a lightweight error reporting service so production issues can be diagnosed. Add performance_logs table for tracking slow RPC calls.

As a frontend developer, implement the LoginHero section for the Login page. This section renders a 3D agriculture sprout scene using @react-three/fiber Canvas and @react-three/drei Float. The SproutGeometry component builds a sprout from boxGeometry (stem), two sphereGeometry leaves (left/right, colors #4CAF50/#66BB6A/#43A047), a top leaf (#81C784), a cylinderGeometry soil base (#795548), and 6 accent dot meshes positioned radially at radius 0.42 with orange emissive material (#F39C12). The accent dots are memoized with useMemo. The Scene component uses useRef and useFrame to apply a sinusoidal y-rotation (Math.sin(elapsedTime * 0.3) * 0.12) to a group wrapping the Float-animated SproutGeometry. The lh-root section includes lh-bg gradient backdrop, two lh-decorative-ring divs (outer/inner), and lh-decorative-dots patterns (top-left) as aria-hidden decorative elements.

As a frontend developer, implement the LoginForm section for the Login page. The component manages 7 state hooks: email, password, rememberMe, showPassword, loading, apiError, and fieldErrors. The validate callback checks for empty email, invalid email format (regex /^[^\s@]+@[^\s@]+\.[^\s@]+$/), empty password, and minimum 6-character password length. handleSubmit prevents default, clears errors, runs validate, short-circuits on fieldErrors, sets loading true, and simulates an API call via setTimeout (1200ms). handleEmailChange and handlePasswordChange clear field-level and API-level errors on input. togglePassword flips showPassword. The lof-card div uses motion with initial opacity:0/y:16 animating to opacity:1/y:0 (duration 0.4, easeOut). An apiError banner uses motion with initial opacity:0/y:-6. The form includes an email/username input, a password input with togglePassword eye icon, a rememberMe checkbox, a Forgot Password link, and a Submit button that shows a loading spinner when loading is true.

As a frontend developer, implement the LoginSocialAuth section for the Login page. This section renders Google and GitHub OAuth buttons with custom inline SVG icons (GoogleIcon with 4 colored paths for #4285F4/#34A853/#FBBC05/#EA4335, GitHubIcon with fill #24292E). It uses a Three.js WebGLRenderer (not react-three-fiber) attached via canvasRef to render 55 floating particles: positions as Float32Array (18×10×6 spread), sizes as Float32Array, and per-particle speed data stored in a ref. The canvas is initialized in a useEffect with cleanup via cancelAnimationFrame and renderer.dispose(). The container uses motion with containerVariants (staggerChildren: 0.12, duration 0.5, easeOut) and each OAuth button uses itemVariants (opacity/y animation, duration 0.4). The section includes a divider line with 'or continue with' text between the form and the social buttons.

As a frontend developer, implement the LoginSignupCTA section for the Login page. This is a minimal static component that renders a lcta-root div containing a lcta-inner div with a lcta-text span ('Don't have an account?') and a lcta-link anchor pointing to /Signup ('Sign up'). No state, no animations, no hooks — pure presentational JSX. The CSS (1347 chars) styles the row layout, typography, and link appearance for the signup prompt beneath the login form.

As a frontend developer, implement the Footer section for the Login page. This component may already exist from the Landing page (task c22010f1-f4ff-49d3-812e-15e72aaa51c3) — reuse or verify it renders correctly on /Login. The Footer uses lucide-react icons (Leaf, Twitter, Instagram, Youtube, Linkedin, Sprout). It renders three link columns via arrays: platformLinks (Dashboard, Crop Planner, Disease Guide, Soil Health), resourceLinks (Learning Center, Home Garden, Login, Sign Up), and communityLinks (Farming Tutorials, Sustainable Practices, Crop Rotation Tips, Pest Management). Social links use the socials array with 4 icon components. The ftr-footer element includes a ftr-bg-pattern div and an aria-hidden decorative SVG leaf (ftr-leaf-pulse) with a path, centerline stroke, and two branch strokes. The ftr-inner contains ftr-grid with a brand column (ftr-logo with Sprout icon, ftr-brand-desc, ftr-socials) and the three link columns.

As a frontend developer, implement the SignupFormContainer section for the Signup page. This is the most complex section: a multi-field signup form with useState hooks for `email`, `password`, `confirmPassword`, `persona`, `location`, `termsAccepted`, `showPw`, `showConfirmPw`, `submitted`, `errors`, and `touched`. Includes a `calcStrength(pw)` utility scoring password on length (≥8, ≥12), uppercase, digits, and special chars returning score/label/color. Persona selection renders 4 cards (`PERSONAS` array: farmer, home_grower, terrace_gardener, agriculture_learner) each with a Lucide icon (Sprout, Home, Leaf, GraduationCap). Password fields use `Eye`/`EyeOff` toggle buttons. A 3D `ParticleField` via `@react-three/fiber` Canvas with 36 `Float`-wrapped sphere meshes from `@react-three/drei` provides decorative background. Form validation uses `errors`/`touched` state with inline feedback, a `CheckCircle` success state on `submitted`, and a `MapPin` icon on the location field. Import Lucide icons: `Eye, EyeOff, Check, X, Sprout, Home, Leaf, GraduationCap, MapPin, CheckCircle`. Styles from `../styles/SignupFormContainer.css`.

As a frontend developer, implement the SignupBenefits section for the Signup page. Renders a `benefits` array of 4 cards (Sprout — Personalized Crop Recommendations → /CropPlanner; LineChart — Track Plant Growth → /Dashboard; BookOpen — Learn Sustainable Farming → /LearningCenter; Users — Connect with Farmers → /Dashboard) each with a Lucide icon, title, desc, and an `ArrowRight`-decorated link. A `FloatingParticles` Three.js component via `@react-three/fiber` `useFrame` animates 18 meshes (icosahedron, octahedron, torus geometries cycling via `i % 3`) with per-particle sinusoidal X/Y drift and continuous rotation using `particles.current` ref array. Card entrance uses Framer Motion `cardVariants` with staggered `delay: i * 0.12` and `whileInView` with `viewport={{ once: true }}`. Styles from `../styles/SignupBenefits.css`.

As a frontend developer, implement the SignupSecurity section for the Signup page. Renders a `<section className="ss-security">` with a Three.js Canvas background (`camera={{ position:[0,0,4.2], fov:42 }}`, `dpr={[1,1.5]}`) containing a `ShieldGeometry` component — an `Octahedron` from `@react-three/drei` (`args={[1.6,0]}`, `scale={[1,1.15,1]}`) with wireframe `meshStandardMaterial` (color `#F39C12`, opacity 0.16, emissive `#F39C12` at 0.08) animated via `useFrame` with Y-rotation (delta*0.15), X-rotation (delta*0.08), and sinusoidal Y-position float. Three `badges` (Lock — Secure Encryption, ShieldCheck — Privacy Protected, EyeOff — Data Encrypted) animate in via `badgeVariants` with `whileInView` stagger (delay: 0.18 + i*0.12). Headline uses `headlineVariants`, privacy note uses `privacyVariants` (delay 0.64). Lucide icons: `ShieldCheck, EyeOff, Lock`. Styles from `../styles/SignupSecurity.css`.

As a frontend developer, implement the SignupCTA section for the Signup page. Renders a `<section className="scta-root">` with a decorative `scta-glow` div and `scta-accent-line` accent bar. Contains an `scta-headline` ('Ready to Transform Your Farming?'), `scta-sub` paragraph referencing farmers/home growers/agriculture learners. An `scta-actions` div holds two interactive elements: a `<button type="button" className="scta-btn">` with an inline SVG user-plus icon and 'Create Free Account' label; and an `<a href="/Login" className="scta-secondary">` with a chevron-left inline SVG and 'Back to Login' label. No state or animation — purely static JSX. Styles from `../styles/SignupCTA.css`.

As a frontend developer, implement the Navbar section for the Dashboard page. This component (reused from Login/Landing) renders a responsive navigation bar with: NAV_ITEMS array linking to all 9 app routes, LANGUAGES array with 5 locales (EN, HI, TA, TE, KN) toggled via langOpen state and langRef click-outside detection, a Bell icon with notifCount=3 badge, a profile dropdown (profileOpen state + profileRef) with User/Settings/LogOut menu items triggering handleLogout (redirects to /Login), a hamburger mobile menu (menuOpen state) that locks body scroll via useEffect, and active route highlighting via activePath matched against window.location.pathname. Uses framer-motion AnimatePresence for dropdown/mobile menu transitions and lucide-react icons. Component may already exist from Login or Landing pages — verify before duplicating.

As a DevOps Engineer, document and securely inject all secrets (Supabase keys, API keys for weather/news/market APIs) into Vercel and local .env files so no credentials are exposed in the codebase. Include .env.example template.

As a Backend Developer, implement a dashboard aggregation service that calculates farm health score from soil quality, crop diversity, irrigation efficiency, and fertilizer balance factors; composes personalized crop recommendation preview; and integrates weather widget data. Exposes a single dashboard summary endpoint keyed by user_id.

As a Backend Developer, implement read/write endpoint for preferred_language field on the users table so language selection from the Navbar persists across sessions. Supports English, Telugu, Hindi, Tamil, Kannada. Integrates with the global state store on the frontend via temp_007.

As a frontend developer, implement the shared Navbar section for the DiseaseGuide page. Reuse or verify the existing Navbar.jsx — the /DiseaseGuide route should be highlighted as active. This component is shared across all pages.

As a frontend developer, implement the shared Navbar section for the CropPlanner page. Reuse or verify the existing Navbar.jsx — the /CropPlanner route should be highlighted as active.

As a Tech Lead, verify the end-to-end integration between the HomeGarden frontend (WaterReminders, PlantGrowthTracker, CropSuggestions sections) and the garden tracker CRUD API (temp_010). Ensure plant records are persisted, water reminder state is saved, and growth status is retrieved from Supabase correctly.

As a Tech Lead, verify the end-to-end integration between the SoilHealth frontend (NutrientProfile, QuickStats, FertilizerGuidance sections) and the soil health data API (temp_011). Ensure nutrient data, pH charts, and fertilizer recommendations are populated from Supabase and not hardcoded mock values.

As a Tech Lead, verify the end-to-end integration between LearningCenter frontend sections (VideoGrid, FeaturedTutorials, ArticlesSection, SeasonalTips) and the learning center content API (temp_013). Ensure content renders from Supabase, filters and pagination work, and no mock data remains in production.

As a frontend developer, implement the DiseaseGuideHeader section for the DiseaseGuide page. Uses framer-motion useInView (once: true, margin: '-40px') to trigger character-level entrance animations on TITLE_TEXT 'Disease Guide & Prevention'. splitIntoWords and splitIntoChars helpers drive charVariants with per-character staggered delay (0.05 * globalCharIndex), rotateX from -60 to 0, and fadeUp variant for subtitle/breadcrumb elements with custom delay. Decorative SVG leaf illustration uses var(--primary) fill for the leaf path with disease-spot circles using var(--secondary) at 0.35 opacity, rendered aria-hidden. Section ref passed to useInView drives all animation triggers.

As a frontend developer, implement the DiseaseGuideSearch section for the DiseaseGuide page. Maintains DISEASE_DATABASE array of 10 diseases (Powdery Mildew, Leaf Spot, Root Rot, Blight, Downy Mildew, Fusarium Wilt, Rust Disease, Anthracnose, Mosaic Virus, Bacterial Canker) each with name, desc, severity color, and crops array. EXAMPLE_TAGS (4 entries) render as clickable colored chips. Animated scrambling placeholder cycles through CYCLE_PHRASES ('Search diseases', 'Find symptoms', 'Identify crop issues', 'Browse treatments') using SCRAMBLE_CHARS string with useEffect interval. Search input filters DISEASE_DATABASE in real-time by name match. AnimatePresence drives dropdown suggestion list appearance. useRef and useCallback manage input focus and suggestion selection state.

As a frontend developer, implement the DiseaseGuideQuickFilters section for the DiseaseGuide page. Renders four filter groups using CROP_TYPES (7: wheat, rice, tomato, potato, corn, soybean, cotton), SEVERITIES (4: low/medium/high/critical each with qf-severity-dot CSS modifier class), SEASONS (5: all/spring/summer/autumn/winter), and TREATMENT_TYPES (3: organic/chemical/cultural). Custom SVG icon components: ChevronIcon, CheckIcon, CloseIcon, CropIcon, SeverityIcon, SeasonIcon, TreatmentIcon. Each filter group has an expand/collapse toggle with AnimatePresence animated height. Multi-select state per group tracked with useState arrays. Active filter count badge displayed per group header. Active filters render as dismissible chips with CloseIcon. useRef and useCallback manage dropdown positioning and outside-click dismissal.

As a frontend developer, implement the DiseaseGuideResults section for the DiseaseGuide page. Renders DISEASES array of 10 entries (Late Blight/Tomato, Powdery Mildew/Cucumber, Bacterial Wilt/Potato, Leaf Rust/Wheat, Downy Mildew/Spinach, Mosaic Virus/Pepper, Damping Off/Seedlings, Fusarium Wilt/Banana, Anthracnose/Mango, Clubroot/Cabbage) each with crop emoji, severity level (severe/high/moderate/low), symptom description, and affected crop count. Card grid with AnimatePresence for staggered entry. Severity badge uses CSS class modifier per level. useState tracks selectedDisease for highlight state. useRef and useCallback power card hover interactions. Result count display updates with filter state.

As a frontend developer, implement the DiseaseGuideDetail section for the DiseaseGuide page. Displays DISEASE_DATA for 'Late Blight' (Phytophthora infestans, Fungal Oomycete, severity 78). Renders 9-item symptoms list, 6 affected crops with emoji icons, and 3 disease stages (early/mid/late with titles, descriptions, and duration labels) as a tabbed or stepped interface with useState for activeStage. Environmental conditions section renders 4 condition bars (Temperature 10–25°C, Humidity 80–100%, Soil Moisture Saturated, Wind Dispersal Moderate) with animated progress fill using framer-motion animate() for numeric counting. useInView triggers entrance animations. SVG progress bars use pct values from DISEASE_DATA.conditions array.

As a frontend developer, implement the DiseaseGuideSimilarDiseases section for the DiseaseGuide page. Renders SIMILAR_DISEASES array of 4 entries (Bacterial Leaf Blight 87% similarity, Downy Mildew 72%, Nutrient Deficiency N 58%, Anthracnose 64%) as TiltCard components. Each TiltCard uses useMotionValue for x/y cursor tracking, useSpring with stiffness:200/damping:20 for smooth rotateX/rotateY (±8deg range), and useTransform for glowX/glowY radial gradient spotlight. handleMouseMove calculates normalized cursor position within card bounds via getBoundingClientRect. SVG circular progress indicator uses CIRCUMFERENCE = 2 * Math.PI * 20 with dashOffset computed as CIRCUMFERENCE - (similarity/100)*CIRCUMFERENCE. ICON_MAP maps icon keys to lucide-react components (AlertTriangle, Zap, Droplets, Bug, Leaf). ChevronLeft/ChevronRight navigation with ArrowRight and Info icons from lucide-react.

As a frontend developer, implement the DiseaseGuidePreventionTips section for the DiseaseGuide page. Renders preventionTips array of 7 items (Crop Rotation, Resistant Varieties, Field Sanitation, Plant Spacing, Irrigation Timing, Preventive Fungicide, Regular Scouting) with iconMap mapping icon keys to lucide-react components (RotateCcw, Shield, Trash2, Maximize2, Droplets, FlaskConical, Eye). Also renders organicSteps array of 4 entries (Neem Oil Foliar Spray, Copper Fungicide Application, Bacillus subtilis Biocontrol, Compost Tea Soil Amendment) each with product name, application rate, and cost range. Tab or accordion UI with AnimatePresence for animated content switching between prevention tips and organic treatment steps. useState tracks activeTab and expandedTip. useRef and useCallback manage accordion collapse/expand. AlertTriangle, Leaf, Beaker, Shovel icons from lucide-react for supplementary UI elements.

As a frontend developer, implement the DiseaseGuideActions section for the DiseaseGuide page. Uses useInView (once: true, margin: '-60px') on sectionRef to trigger card entrance animation (opacity 0→1, y 24→0, duration 0.55s easeOut). Two CTA buttons rendered as motion.a elements: 'Report Sighting' (dga-btn--report) and 'Get Expert Advice' (dga-btn--advice), each with whileHover scale:1.03/y:-2 and whileTap scale:0.97 spring animations. handleMouseMove useCallback tracks cursor position via getBoundingClientRect and sets --mx/--my CSS custom properties on button element for radial glow effect via dga-btn-glow span. Two decorative blur divs (dga-deco--1, dga-deco--2) positioned absolutely. Each button contains dga-btn-glow span, icon SVG (warning triangle for report, chat bubble for advice), label text, and arrow SVG.

As a frontend developer, implement the Footer section for the DiseaseGuide page. This component may already exist from previous pages (Dashboard, SoilHealth, HomeGarden). Renders linkColumns array of 4 columns (Product: Crop Planner/Growth Tracking/Disease Guide/Soil Health Analysis/Home Garden Tools; Company: About Argonova_/Our Mission/Sustainability/Partnerships/Careers; Resources: Learning Center/Farming Tutorials/Community Forum/API Documentation/Blog; Support: Help Center/Contact Us/System Status/Privacy Policy/Terms of Service). socialIcons array with Twitter, GitHub, LinkedIn, and YouTube SVG path data renders icon row. useInView with framer-motion drives staggered column entrance animations. Verify the component is shared/reused from existing pages rather than recreated.

As a Tech Lead, verify the end-to-end integration between the Login frontend (LoginForm, LoginSocialAuth sections) and Supabase Auth. Ensure email/password sign-in works, session is persisted via global state store, OAuth buttons trigger Supabase OAuth flow, and protected routes redirect unauthenticated users to /Login.

As a Tech Lead, verify the end-to-end integration between the Signup frontend (SignupFormContainer with persona/location fields) and Supabase Auth + users table. Ensure new accounts are created, persona and preferred_language are persisted to the users table via user profile API, and successful signup redirects to /Dashboard.

As a Backend Developer, implement a Supabase Edge Function that calculates the Farm Health Score from four weighted factors: soil quality (from soil_health data), crop diversity (from crop_history), irrigation efficiency (static or user-provided), and fertilizer balance (from crop recommendations). Returns overall score 0-100, per-factor breakdown, and improvement suggestions. Called by the Dashboard aggregation API.

As a Frontend Developer, audit and optimize performance across all pages: implement React.lazy + Suspense for Three.js Canvas components (InteractiveGalaxy, ParticleField, SoilParticleBackground), add Vite code-splitting per route, lazy-load Chart.js registrations, and ensure Three.js renderers are properly disposed on unmount to prevent memory leaks. Target <3s LCP on mobile (Lighthouse score ≥80).

As a frontend developer, implement the DashboardSidebar section for the Dashboard page. This component renders a collapsible sidebar with: NAV_ITEMS array (7 items: Dashboard, Crop Planner, Soil Health, Disease Guide, Learning Center, Home Garden, Settings) each with a lucide-react icon and active state via activePath; a 'Disease Guide' nav item that renders a 'New' badge (ds-nav-badge--new); PERSONAS array (4 entries: Farmer/Tractor, Home Grower/Home, Terrace Gardener/Building2, Agriculture Learner/BookOpen) with a persona dropdown toggled by personaOpen state showing persona desc text; sidebarCollapsed boolean state toggling compact/full layout; a mobile drawer (drawerOpen state) that locks body scroll via useEffect and renders an AnimatePresence overlay; renderNavItems and renderPersonaDropdown helper functions. Uses framer-motion motion.div for drawer and dropdown animations, and lucide-react icon components.

As a frontend developer, implement the DashboardHeader section for the Dashboard page. This component renders a page header with: a breadcrumb nav (Dashboard → Farm Overview links using ChevronRight icon); a title row with an h1 'Farm Overview' heading; a dynamic date display using formatDate() (toLocaleDateString with en-IN locale, weekday/year/month/day) alongside a Calendar icon; a dynamic season badge using getSeasonInfo() which maps JS month index to India-centric seasons (Pre-Monsoon, Kharif, Post-Monsoon, Rabi) with emoji icons; and a FILTERS array with 3 keys (week, month, all) rendered as motion.button elements with whileTap scale animation, activeFilter state controlling the active button style via dh-filter-btn--active class. Uses framer-motion motion for button tap feedback and lucide-react Calendar/ChevronRight icons.

As a frontend developer, implement the DashboardWelcome section for the Dashboard page. This component renders a personalized welcome banner with: getTimeGreeting() helper returning morning/afternoon/evening based on current hour; PERSONAS config object (farmer, homegrower, terrace, learner) each with a custom inline SVG icon, bg color, and CSS gradient string; getWeatherData() returning mock weather data (temp:29, condition:Partly Cloudy, location:Bangalore IN, humidity:62); a Sprout3D component using @react-three/fiber Canvas with a mesh containing cylinderGeometry stem and decorative leaf geometry rendered with meshStandardMaterial; framer-motion motion.div for entrance animations; and useMemo for persona data derivation. The 3D Canvas is used as a decorative element near the persona icon.

As a frontend developer, implement the DashboardStats section for the Dashboard page. This component renders 4 animated metric cards using: a drawGauge() helper that draws arc-based canvas gauges with start/end angles (Math.PI*0.75 to Math.PI*2.25), track/fill arcs, end dot, and lineCap round; a useAnimatedCount custom hook using requestAnimationFrame with cubic ease-out (1 - Math.pow(1-progress,3)) for smooth number counting; a MetricCard component accepting icon, iconBg, label, index props with framer-motion initial/animate (opacity:0→1, y:24→0) staggered by index*0.1 delay; a FarmHealthGauge sub-component using useRef for canvas and container, a resizeAndDraw callback responding to ResizeObserver; and lucide-react icons Heart, Sprout, CalendarClock, Beaker for each card. Uses canvas 2D context for gauge rendering with devicePixelRatio scaling.

As a frontend developer, implement the DashboardFarmScore section for the Dashboard page. This component renders an animated farm score panel with: FARM_SCORE constant (78) and FACTORS array (4 entries: Soil Health 82/#27AE60, Pest Pressure 68/#E74C3C, Crop Diversity 75/#F1C40F, Water Availability 88/#3498DB); a RadialBar sub-component using useInView hook (once:true, margin:-40px), SVG circles with motion.circle animating strokeDashoffset from full circ to circ-progress on inView with 1.0s ease; a GaugeTorus component using @react-three/fiber with two THREE.TorusGeometry arcs (args:[1.15,0.025,32,120,Math.PI*1.55] and [1.15,0.025,32,120,Math.PI*0.95]) with meshBasicMaterial and DoubleSide, OrbitControls from @react-three/drei, and geometry rotation via useEffect; framer-motion animate() (not component) to count displayScore 0→78 over 1.6s with custom cubic bezier [0.25,0.1,0.25,1]; and Suspense wrapping the Canvas.

As a frontend developer, implement the DashboardQuickActions section for the Dashboard page. This component renders an action panel with a Three.js particle backdrop via DqaParticleCanvas sub-component: 80 SphereGeometry particles (0.04 radius, 6 segments) with PARTICLE_COLOR 0xf39c12, per-particle opacity 0.08–0.28, drift velocity DRIFT_SPEED=0.05, soft boundary BOUND=10 with EDGE_FORCE=0.02 nudge, rendered via THREE.WebGLRenderer with alpha:true on a canvas ref sized to parentElement; action cards using lucide-react icons ClipboardList, Beaker, Bug, Droplets, Lightbulb, UserCog with ArrowRight hover indicators; AnimatePresence for card entrance/exit; useState for hover/active card tracking; and a useCallback initThree function that creates the renderer, scene, camera, geometry, and per-mesh materials with cloned opacity. Animation loop uses requestAnimationFrame stored in animRef for cleanup.

As a frontend developer, implement the DashboardCropPlanner section for the Dashboard page. This component renders a responsive crop carousel with: CROPS array (6 entries: Tomato/Pusa Ruby, Rice/Sona Masoori, Spinach/All Green, Wheat/HD-3086, Chili/Guntur Teja, Brinjal/Arka Navneet) each with soilType, daysToHarvest, growthStage, stageKey (early/mid/late), and icon (Sprout or Leaf); GRADIENT_MAP with 6 distinct CSS linear-gradient strings applied per card; cardVariants framer-motion object with hidden/visible states using custom(i) delay i*0.07; responsive cardsPerView state updated via resize listener (1/2/3/4 at 0/540/768/1024px breakpoints); currentIndex state clamped to maxIndex (totalCards-cardsPerView); ChevronLeft/ChevronRight navigation buttons with isAnimating guard; a Plus button for adding new crops; and ArrowRight CTA. Uses useRef for carouselRef, useCallback for updateCardsPerView, and useEffect for resize and maxIndex clamping.

As a frontend developer, implement the DashboardSoilHealth section for the Dashboard page. This component renders 4 nutrient cards via NutrientCard sub-component with: soilNutrients array (Nitrogen N 42kg/ha good, Phosphorus P 18kg/ha warn/Low, Potassium K 95kg/ha good, Soil pH 6.2 good); getProgressPercent() clamping value between optimalMin/optimalMax and returning 0-100%; NutrientCard with useRef cardRef and tilt state {x,y} updated on onMouseMove (delta from card center, scaled by ±3deg) reset on onMouseLeave, applied as CSS perspective(800px) rotateX/rotateY transform for 3D tilt effect; dsh-indicator div with dsh-indicator--good or dsh-indicator--warn modifier class; an animated progress bar using barPercent; framer-motion initial opacity:0 y:24 animate opacity:1 y:0 with index*0.08 delay; and lucide-react Sprout, ArrowRight, FlaskConical icons in the section header/CTA.

As a frontend developer, implement the Footer section for the Dashboard page. This component (may already exist from Landing/Login pages) renders a site footer with: a decorative ftr-bg-pattern div and an animated SVG leaf (ftr-leaf-pulse class) with vein path details; a 4-column ftr-grid layout containing a brand column (Sprout icon logo, Argonova_ wordmark with underscore span, brand description text), platformLinks column (Dashboard, Crop Planner, Disease Guide, Soil Health), resourceLinks column (Learning Center, Home Garden, Login, Sign Up), and communityLinks column (Farming Tutorials, Sustainable Practices, Crop Rotation Tips, Pest Management); a socials row with 4 icon links (Twitter, Instagram, Youtube, Linkedin from lucide-react) rendered as ftr-social-link anchors with target=_blank and rel=noopener. Verify if Footer component already exists from Landing or Login pages before re-implementing.

As a frontend developer, implement the Navbar section for the HomeGarden page. This is the same Navbar component used across Dashboard and other pages — check if it already exists before reimplementing. The component uses useState for langOpen, profileOpen, menuOpen, activeLang, activePath, and notifCount (hardcoded to 3). It includes useRef for langRef and profileRef with click-outside detection via mousedown event listener. NAV_ITEMS array contains 9 routes including '/HomeGarden' as the active path. Features a LANGUAGES dropdown with 5 Indian language options (EN, HI, TA, TE, KN) using handleLangSelect. Mobile menu locks body scroll via useEffect on menuOpen. Profile dropdown includes User, Settings, LogOut icons with handleLogout redirecting to '/Login'. Uses framer-motion AnimatePresence for dropdown animations and lucide-react icons (Bell, Globe, ChevronDown, User, Settings, LogOut, Home). Imports '../styles/Navbar.css'.

As a frontend developer, implement the Navbar section for the SoilHealth page. This is a shared component (may already exist from Dashboard and HomeGarden pages) with full framer-motion animations. Features: NAV_ITEMS array with 5 routes (Dashboard, CropPlanner, SoilHealth, DiseaseGuide, LearningCenter), LANGUAGES array with 4 locales (en, hi, ta, te) using Unicode labels, menuOpen/langOpen/profileOpen/activeLang/activePath useState hooks, useEffect for body overflow lock on mobile menu open, useCallback for toggleMenu/closeMenu/toggleLang/toggleProfile/selectLang handlers, isActive() path matching helper, AnimatePresence for mobile menu transitions, and nv- CSS prefix classes. The SoilHealth nav link should render with nv-active class. Reuse existing Navbar component if already created.

As a frontend developer, implement the shared Navbar section for the LearningCenter page. This component already exists from HomeGarden and SoilHealth pages — reuse or verify the existing Navbar.jsx and Navbar.css. The component uses useState for menuOpen and activePath, useEffect to sync window.location.pathname and lock body scroll when mobile drawer is open, and useCallback for toggleMenu/closeMenu. It renders 7 NAV_ITEMS including LearningCenter as the active link. Uses framer-motion AnimatePresence for the mobile drawer slide-in and an overlay backdrop. Desktop shows nav links + Sign In / Sign Up CTAs; mobile shows hamburger with 3 animated nv-ham-line spans. The /LearningCenter route should be highlighted as active.

As a frontend developer, implement the DiseaseGuide hero/header section with framer-motion entrance animations, a Three.js or @react-three/fiber decorative background, and introductory headline guiding users to identify crop diseases by symptom.

As a frontend developer, implement the shared Footer section for the DiseaseGuide page. Reuse or verify the existing Footer.jsx and Footer.css — the DiseaseGuide link should be active in platformLinks.

As a frontend developer, implement the CropPlanner hero/header section with framer-motion entrance animations, a Three.js or @react-three/fiber decorative 3D crop/soil scene, and an introductory headline explaining the crop rotation planning tool.

As a frontend developer, implement the shared Footer section for the CropPlanner page. Reuse or verify the existing Footer.jsx and Footer.css — the CropPlanner link should be active in platformLinks.

As a Tech Lead, verify the end-to-end integration between the Dashboard frontend implementation (all Dashboard section tasks) and the Dashboard aggregation API (temp_012). Ensure farm score, crop recommendation preview, soil nutrient widget, and weather data all flow correctly from Supabase through the API into the UI. Verify persona-based personalization works correctly.

As a Tech Lead, verify end-to-end integration of user profile management and multilingual support: global state (temp_004) reads user profile from Supabase (temp_007), language preference updates persist via temp_014, and the Navbar language selector correctly reflects and updates the stored preference across all pages.

As a Backend Developer, integrate OpenWeatherMap API (or equivalent) to provide live weather data (temperature, condition, humidity, location) consumed by the Dashboard weather widget and HomeGardenHero. Cache results in a weather_cache table in Supabase to avoid excessive API calls. Expose a lightweight RPC or Edge Function returning current weather by user location.

As a Backend Developer, integrate a news API (NewsAPI or equivalent filtered for agriculture topics) to provide agriculture news cards on the Dashboard. Cache results in a news_cache table. Expose an Edge Function or RPC returning top 5-10 agriculture news items with title, source, date, and URL.

As a Backend Developer, integrate a crop market price data source (Agmarknet or equivalent) to provide live mandi prices on the Dashboard. Cache results in a market_price_cache table. Expose an RPC or Edge Function returning current prices for common crops (wheat, rice, tomato, potato, onion) keyed by region.

As a Frontend Developer, configure i18next (or react-i18next) with translation JSON files for English, Telugu, Hindi, Tamil, and Kannada. Translate all Navbar labels, dashboard headers, form field labels, CTA text, and recommendation outputs. Wire the language switcher in Navbar to call i18n.changeLanguage() and persist the selection via the multilingual preference API (a4cfe621). Ensure typography renders correctly for Devanagari and Dravidian scripts.

As a frontend developer, implement the HomeGardenHero section for the HomeGarden page. The section renders a full-bleed hero with a Three.js @react-three/fiber Canvas background featuring a ParticleField component — 90 animated particles (PARTICLE_COUNT=90) using Float32Array for positions and speeds, with useFrame animating sinusoidal Y and cosine X drift per particle tick. The pointsMaterial uses color '#F39C12', opacity 0.35, additive blending (blending=2). A gradient overlay div (hgh-overlay) sits above the canvas. Content layer uses framer-motion motion variants: fadeUp, fadeUpDelay (with configurable delay param), and scaleIn for staggered entrance animations. Displays current date via formatDate() using toLocaleDateString('en-IN'), hardcoded weather object (temp:23, condition:'Sunny', location:'Bengaluru, IN'), and persona string 'Terrace Gardener'. Shows Sun, CloudSun, CalendarDays lucide icons. Camera positioned at [0,0,5] fov 50, dpr [1,2]. Imports '../styles/HomeGardenHero.css'.

As a frontend developer, implement the GardenModeSelector section for the HomeGarden page. Renders three selectable mode cards defined in GARDEN_MODES array: 'home-garden' (Icosahedron shape, accent #F39C12), 'terrace-garden' (Torus shape, accent #F1C40F), 'farm-mode' (Sphere shape, accent #E74C3C). Each card uses the TiltCard wrapper component with framer-motion useMotionValue, useTransform, and useSpring (stiffness:200, damping:24) for 3D tilt effect — rotateX/rotateY derived from mouse position relative to card bounds. Each card also renders a Card3DScene using @react-three/fiber Canvas with @react-three/drei Float, Icosahedron, Torus, Sphere components and two pointLights. Selection state tracks active mode id. AnimatePresence/motion used for card entrance and CheckCircle2 icon on selected mode. Icons from lucide-react: Home, Building2, Wheat, CheckCircle2. Suspense wraps 3D scenes. Imports '../styles/GardenModeSelector.css'.

As a frontend developer, implement the CropSuggestions section for the HomeGarden page. Data is organized in CROPS_BY_MODE object with two keys: 'terrace' (8 crops: Basil, Mint, Cherry Tomato, Coriander, Chilli, Spinach, Marigold, Bottle Gourd) and 'indoor' (including Aloe Vera, Peace Lily, Snake Plant, Microgreens, and more). Each crop object has id, name, emoji, difficulty ('Easy'/'Medium'/'Hard'), growthWeeks, waterFreq, and description fields. The section imports THREE from 'three' for canvas/WebGL rendering alongside framer-motion for card entrance animations. Uses useState and useEffect for active mode tab switching between terrace/indoor views. Cards animate in with staggered motion variants. Displays difficulty badge, growth week timeline, water frequency, and emoji per crop card. Imports '../styles/CropSuggestions.css'.

As a frontend developer, implement the WaterReminders section for the HomeGarden page. Features a Three.js @react-three/fiber Canvas background with WaterParticles component rendering 48 sphere meshes using meshStandardMaterial (color '#3498db', opacity 0.16) inside a DropletScene with ambientLight and pointLight — canvas is absolutely positioned with pointerEvents none. PLANTS array contains 6 entries (Tomato/Tamatar, Spinach/Palak, Green Chili/Hari Mirch, Coriander/Dhaniya, Mint/Pudina, Eggplant/Baingan) each with id, name, nameLocal, frequency, nextDate, isUrgent boolean, hoursRemaining (supports negative for overdue), and reminded boolean toggle state. cardVariants animate with staggered delay (i*0.08) and cubic bezier easing. headerVariants animate x from -16. Per-card bell toggle via Bell/BellOff icons, urgent indicator via AlertCircle, overdue detection via negative hoursRemaining. lucide-react icons: Droplets, Clock, Bell, BellOff, AlertCircle, Calendar, CheckCircle2, Sprout. Uses AnimatePresence for card transitions. Imports '../styles/WaterReminders.css'.

As a frontend developer, implement the PlantGrowthTracker section for the HomeGarden page. The plants array contains 3 entries: Cherry Tomato (Roma VF, 78% growth, 7 milestones, planted May 1), Mint (Pudina/Common, 62% growth, 5 milestones, planted May 5), and Green Chili (Jwala, 45% growth, planted May 8). Each plant has milestones with label, day, desc, date, and completed boolean. UI includes an accordion-style plant selector using useState for activeId and expandedMilestoneId. The growth percentage renders as an animated progress bar. Milestone timeline renders with CheckCircle and step connector lines, distinguishing completed vs pending milestones. AnimatePresence handles accordion open/close transitions. ChevronDown icon rotates on expand. Stats row shows waterSchedule (Droplets icon) and sunNeeds (Sun icon). Camera/Photo log placeholder uses Camera icon. Calendar icon for plantedDate display. Imports '../styles/PlantGrowthTracker.css'.

As a frontend developer, implement the SunlightGuidance section for the HomeGarden page. Features a 3D SunOrb component built with @react-three/fiber useFrame: a group with three layered sphere meshes (core r=0.7 emissive #F39C12 intensity 1.4, mid corona r=0.9 opacity 0.35, outer glow r=1.12 opacity 0.16) plus 4 torus ring rays at 0/45/90/135 degree angles — all rotating at different speeds per delta. OrbitControls from @react-three/drei wraps the scene in Suspense. CROP_SUNLIGHT array has 4 crops (Tomatoes 4/6h, Chili Peppers 5/6h, Coriander 4.5/5h, Basil/Tulsi 3.5/4h) with currentHours vs requiredHours for deficit calculation. BOOST_TIPS array with title+desc for improvement suggestions. useState tracks selected crop for accordion expansion with ChevronDown rotation. AnimatePresence animates tip panels open/close. AlertTriangle icon for deficit warnings, Sun icon for header. Imports '../styles/SunlightGuidance.css'.

As a frontend developer, implement the QuickActions section for the HomeGarden page. The actions array defines 5 action cards: 'Log Watering' (Droplets, href '/HomeGarden'), 'Upload Plant Photo' (Camera, href '/HomeGarden'), 'View Disease Guide' (ShieldAlert, href '/DiseaseGuide'), 'Set Fertilizer Reminder' (FlaskConical, href '/HomeGarden'), 'Export Garden Stats' (BarChart3, href '/HomeGarden'). Each ActionCard component uses useRef and useState tilt ({x,y}) with handleMouseMove computing dx/dy from card center bounds, applied as inline perspective(600px) rotateX/rotateY transform. handleMouseLeave resets tilt to {x:0,y:0}. Cards render as motion.a anchors with whileInView entrance (opacity 0→1, y 28→0) with staggered delay (index*0.08), spring stiffness 120 damping 18. Each card has qa-card-glow, qa-card-ripple decorative divs, icon div, content (label + desc), and ArrowRight arrow. Imports '../styles/QuickActions.css'.

As a frontend developer, implement the Footer section for the HomeGarden page. This is the same Footer component used across Login, Dashboard, and other pages — check if it already exists before reimplementing. Renders a footer with ftr-bg-pattern decorative div and an SVG leaf pulse illustration (ftr-leaf-pulse) with path-based leaf shape and vein lines. ftr-grid contains a brand column with Sprout icon logo, 'Argonova_' wordmark with underscore span, and brand description text about Indian agriculture. Three link columns: platformLinks (Dashboard, Crop Planner, Disease Guide, Soil Health), resourceLinks (Learning Center, Home Garden, Login, Sign Up), communityLinks (Farming Tutorials, Sustainable Practices, Crop Rotation Tips, Pest Management). Socials row with 4 links: Twitter, Instagram, Youtube, Linkedin icons from lucide-react (target='_blank', rel='noopener noreferrer'). Imports '../styles/Footer.css'.

As a frontend developer, implement the SoilHealthHeader section for the SoilHealth page. Contains a Three.js ParticleField component using useRef/useEffect to mount a WebGLRenderer with alpha:true. Creates two particle systems: 50 dark particles (color 0x2C3E50, size 0.12, NormalBlending) and 30 lighter warm particles (color 0xF39C12, size 0.08, AdditiveBlending). Both particle groups rotate on Y and X axes with different speeds, and primary particles float vertically with per-particle speed values stored in a Float32Array. The header content uses framer-motion motion components for entrance animations. Uses loh- CSS prefix classes with responsive padding (96px/104px/112px at mobile/tablet/desktop breakpoints).

As a frontend developer, implement the SoilHealthQuickStats section for the SoilHealth page. Features STAT_METRICS array with 4 cards: Average pH (6.8, optimal), Available Nitrogen (285 kg/ha, warning/low), Phosphorus Level (42 kg/ha, optimal), Potassium Level (118 kg/ha, critical). Each card contains a Sparkline SVG component that uses buildSparklinePath() to generate an M/L path from a 7-point data array, with stroke color driven by status (critical=#E74C3C, warning=#F39C12, optimal=#27AE60) and an endpoint circle marker. Includes a Three.js ParticleScene background mounted via useRef/useEffect with animRef cleanup. Uses framer-motion for card entrance animations. sqs- CSS prefix classes.

As a frontend developer, implement the SoilHealthNutrientProfile section for the SoilHealth page. Contains NUTRIENTS array with 6 nutrients (N, P, K, Ca, Mg, S) each with symbol, level (0-100), optimalMin/optimalMax, current value, unit, recommendation text, status (optimal/attention/low), and interpretation string. Uses useState for active selected nutrient and useCallback for selection handler. Features a Three.js decorative scene with DECORATION_CYLINDERS (3 cylinders with varying radius/height/color/opacity) and DECORATION_PARTICLES (3 particles with position/color/size). Framer-motion AnimatePresence drives recommendation panel transitions. Nutrient selector renders horizontal tab-style buttons. Progress bars show level vs optimal range. Uses snp- CSS prefix classes with 11987 chars of CSS.

As a frontend developer, implement the SoilHealthFertilizerGuidance section for the SoilHealth page. Features FERTILIZER_DATA object with NPK ratio 10:26:26 (Diammonium Phosphate Blend), applicationRate, timing, cost (₹2,480/50kg bag), and costNote. COMPARISON_DATA array renders two variants (current vs target) with 3 nutrients each showing value, unit, and pct for animated bar width. Uses barVariants framer-motion custom variant with 1.2s cubic-bezier ease and cardVariants with staggered delay (i * 0.1). SoilParticleBackground Three.js component: 55 particles with per-particle velocity Float32Array (3 components each), particle positions updated each frame using velocity values with boundary wrapping. AnimatePresence for panel transitions. useState for active tab. Uses sfg- CSS prefix classes.

As a frontend developer, implement the Footer section for the SoilHealth page. This is a shared component (may already exist from Dashboard and HomeGarden pages). Uses lucide-react icons: Leaf, Twitter, Instagram, Youtube, Linkedin, Sprout. Contains three link columns: platformLinks (Dashboard, Crop Planner, Disease Guide, Soil Health), resourceLinks (Learning Center, Home Garden, Login, Sign Up), communityLinks (Farming Tutorials, Sustainable Practices, Crop Rotation Tips, Pest Management). Renders a decorative SVG leaf with pulse animation (ftr-leaf-pulse class) and ftr-bg-pattern div for CSS background pattern. Sprout icon used in ftr-logo-icon. Social links rendered from socials array with aria-labels. ftr- CSS prefix classes. Reuse existing Footer component if already created.

As a frontend developer, implement the LearningCenterHero section with a @react-three/fiber Canvas featuring a custom PlantModel component. The PlantModel group uses useRef + useFrame to apply a sine-wave rotation (groupRef.rotation.y). It is composed of layered meshes: a cylinderGeometry pot base with grey meshStandardMaterial, a circleGeometry soil cap in dark brown, a main stem cylinder in #27AE60, four sphereGeometry leaves at varying positions/rotations in #2ECC71 and #27AE60, a golden knowledge bulb sphere at the top with emissive #F39C12 and emissiveIntensity 0.5, a torusGeometry glow ring in #F1C40F, and small ambient spark particle meshes. The hero wraps the Canvas in a @react-three/drei Float for floating motion, uses motion from framer-motion for fade-in text animations, and includes a Search input with an ArrowRight CTA button.

As a frontend developer, implement the LearningCenterBrowseFilter section. It renders a CategoryDropdown component with useState for open/closed state and a useEffect-based outside-click handler via document.addEventListener. Categories include 'Crop Rotation', 'Soil Management', 'Pest Control', 'Organic Farming', 'Water Conservation', 'Seasonal Tips'. Separate pill-button filter rows handle CONTENT_TYPES ('All', 'Videos', 'Articles', 'Guides') and DIFFICULTY_LEVELS ('Beginner', 'Intermediate', 'Advanced') each managed with useState active selection. A Search bar with lucide-react Search icon and SlidersHorizontal advanced filter toggle are included. A decorative FilterAccentStrip uses a @react-three/fiber Canvas with a custom GLSL shaderMaterial (AccentParticles component, useFrame animating uTime uniform) rendering a pulsing wave gradient at the bottom border of the filter bar. Uses framer-motion AnimatePresence for dropdown open/close transitions.

As a frontend developer, implement the LearningCenterFeaturedTutorials section. It holds a TUTORIALS array of 6 items with fields: id, title, author, difficulty, duration, desc, thumbClass (CSS class for thumbnail gradient), and a lucide-react icon (Sprout, Sun, Layers, Droplets, Bug, Wheat). An AgParticles Three.js component uses useRef for pointsRef, useMemo to generate Float32Array positions for 100 particles scattered in a 14x14 field, and useFrame to animate the points mesh rotation. The Canvas wraps AgParticles as a decorative background. Tutorial cards render with motion from framer-motion (stagger fade-in), show the icon, thumbClass thumbnail, difficulty badge, duration with Clock icon, author with User icon, and an ArrowRight CTA. A ChevronLeft / ChevronRight carousel navigation manages the visible card slice via useState activeIndex. The section uses useCallback for navigation handlers and useMemo for the visible tutorials slice.

As a frontend developer, implement the LearningCenterVideoGrid section. It holds a VIDEO_DATA array of 10+ items with fields: id, title, instructor, instructorInitials, views, duration, gradient (CSS linear-gradient string), and accent color. Each card renders a thumbnail div with the gradient background, a centered Play button overlay, a duration badge, an Eye views count, and a Heart like button managed with useState likedIds Set. Instructor avatar uses instructorInitials in a styled circle. Cards animate in via framer-motion motion.div with staggered fade-up variants using AnimatePresence. A useMemo filters the displayed videos based on active filter state. ChevronLeft / ChevronRight pagination buttons manage page offset with useState. The grid uses CSS grid with responsive columns (2 on tablet, 3-4 on desktop). Lucide icons used: Play, Clock, Eye, Heart, ChevronLeft, ChevronRight.

As a frontend developer, implement the LearningCenterArticlesSection. It contains an articles array of 5+ items with fields: id, title, author, date, excerpt, readTime, category, categoryType ('accent'|'primary'|'secondary'), image (Unsplash URL), and href. A Three.js decorative element is initialized via useRef + useEffect using raw THREE.* imports (not @react-three/fiber) — it creates a scene, renderer, and animates particles appended to a canvas ref inside the section. Article cards use motion from framer-motion with scroll-triggered viewport animations (whileInView). The featured first article renders full-width with the Unsplash image, large excerpt, and a prominent ArrowRight CTA. Remaining articles render in a 2-column grid. Each card shows category badge (colored per categoryType), author, date, readTime with Clock icon, and a ChevronRight arrow link. Uses lucide-react: Clock, ArrowRight, BookOpen, ChevronRight.

As a frontend developer, implement the LearningCenterSeasonalTips section. It holds a SEASONS array of 4 items (spring, summer, monsoon, winter) each with: id, label, icon (Flower2, Sun, CloudRain, Snowflake), bannerGradient, headline, tips array of 5-7 strings, illustrationEmoji, colorPrimary, and ctaLink. A useState activeSeasonId controls which season panel is displayed. Season tab buttons animate the active indicator with motion.div layoutId for a sliding underline. AnimatePresence wraps the tips list for exit/enter transitions. Each season panel shows the gradient banner with illustrationEmoji, headline, a numbered tips list rendered with motion.li stagger variants, and a Sprout + ArrowRight CTA linking to /CropPlanner. A @react-three/fiber Canvas with Float and OrbitControls renders a 3D seasonal shape (useMemo-generated THREE geometry) as a decorative accent. Uses lucide-react: Sun, CloudRain, Flower2, Snowflake, ArrowRight, Sprout.

As a frontend developer, implement the LearningCenterPathways section. It contains a pathwayData array of 6 items with fields: icon (Sprout, Leaf, ShieldCheck, Tractor, Zap, BookOpen from lucide-react), title, desc, courses count, difficulty ('Beginner'|'Intermediate'|'Advanced'), and time. A difficultyClass helper maps difficulty to CSS modifier classes (lcp-diff-beginner, lcp-diff-intermediate, lcp-diff-advanced). A ParticleCanvas component uses raw THREE.* (useRef mountRef, useEffect) to create a WebGLRenderer with alpha:true, PerspectiveCamera at z:30, and 60 particles with Float32Array positions and speeds, appended to the container div and animated via requestAnimationFrame. Framer-motion useAnimationFrame, useMotionValue, and useSpring are imported for card hover spring physics. Each pathway card shows the icon, difficulty badge, course count with BookOpen, time estimate with Clock, description, and a GraduationCap + ArrowRight enroll button. Uses Star and Zap for featured/popular badges.

As a frontend developer, implement the LearningCenterProgress section. It uses useState isLoggedIn (defaulting true for demo). Three data arrays drive the UI: inProgressCourses (3 items with title, category, progress 0-100, thumbClass CSS class, Icon), completedCourses (2 items with completedDate and hasCertificate flag), and recommendedCourses (2 items with reason string and href). A CertBadge3D component uses @react-three/drei Octahedron with useRef + useFrame to rotate on Y-axis and oscillate X-axis via sine, rendered in a Canvas with meshStandardMaterial color #F39C12 metalness 0.5. Progress bars animate width via CSS transition driven by the progress percentage value. framer-motion containerVariants (staggerChildren: 0.1), cardVariants (opacity+y fade-up), and fadeInVariants are applied. The headline uses motion.h2 with fadeInVariants. Lucide icons: BookOpen, CheckCircle, Calendar, Award, ArrowRight, TrendingUp, UserPlus, Sprout, ChevronRight, Shield, Microscope, Sun, Flower2.

As a frontend developer, implement the LearningCenterCTA section. It renders a full-width call-to-action with a @react-three/fiber Canvas (lcta-cta-canvas-wrap div, wrapped in Suspense fallback null) containing a FloatingParticles component. FloatingParticles uses useMemo to generate 40 particle objects with spherical distribution (theta/phi/radius), meshRef array, and useFrame to animate each sphere's x/y/z position via sine/cosine waves using per-particle speed and offset. The group rotates slowly on Y-axis. Sphere colors cycle: #F39C12, #2C3E50, #F1C40F. The overlay content uses framer-motion motion.div with fadeInUp custom delay variants for headline, subtext, and buttons. Two CTA buttons have buttonScale hover/tap spring variants (stiffness 400). Social proof stats use Sprout (learners), Users (community), Star (rating) icons from lucide-react. A MessageCircle icon appears on a community chat CTA. Camera at position [0,0,7] fov 60, dpr [1,1.5].

As a frontend developer, implement the shared Footer section for the LearningCenter page. This component already exists from Dashboard and HomeGarden pages — reuse or verify the existing Footer.jsx and Footer.css. The component renders a ftr-footer with a ftr-bg-pattern decorative div, an inline SVG ftr-leaf-pulse (leaf shape with vein paths in #ECF0F1), and an ftr-inner with ftr-grid containing: a brand column (Sprout icon logo, 'Argonova_' text with styled span, brand description paragraph, and 4 social links using Twitter/Instagram/Youtube/Linkedin from lucide-react); three link columns (platformLinks, resourceLinks, communityLinks each with 4 hrefs). The LearningCenter links should be active/current in the resourceLinks column. Verify responsive grid collapse at mobile breakpoints.

As a frontend developer, implement the DiseaseGuide SymptomSearch section: a controlled form with crop name input, symptom description textarea or multi-select pills, and a submit button. Uses useState for form fields and fieldErrors, validate callback, and loading state. Styled with the SRD design system tokens.

As a frontend developer, implement the CropPlanner PlannerForm section: controlled form with selects for Previous Crop, Soil Type (Black/Red/Sandy/Clay), and Season (Kharif/Rabi/Zaid). Uses useState for form fields and validation errors. On submit, calls the crop rotation API (temp_008). Loading state and error display included. framer-motion animated form fields.

As a Tech Lead, verify the end-to-end integration of live data APIs (weather, news, market prices) into the Dashboard frontend. Ensure DashboardWelcome shows real weather, DashboardStats reflects live farm score, and any news/market widgets display real API data rather than hardcoded mock values. Verify graceful degradation when APIs are unavailable.

As a frontend developer, implement the DiseaseGuide DiseaseResults section: renders a list/grid of matching diseases returned from the API. Each result card shows disease name, crop, matched symptoms, and a 'View Treatment' CTA. Uses framer-motion staggered card entrance animations and AnimatePresence for list updates.

As a frontend developer, implement the CropPlanner RecommendationResults section: displays the recommended next crop, water requirements, and sustainability insights returned from the crop rotation API. Uses framer-motion AnimatePresence for result reveal animation. Shows crop icon, name, and key metrics in styled cards.

As a frontend developer, implement the DiseaseGuide TreatmentDetail section: a detail panel (drawer or expand) showing full disease info — disease name, causes, prevention methods, treatment suggestions, and fertilizer recommendations. Uses AnimatePresence for enter/exit transition and framer-motion layout animations.

As a frontend developer, implement the CropPlanner FertilizerSuggestions section: renders fertilizer and soil recovery guidance cards from the rotation API response. Each card shows fertilizer name, NPK ratio, application timing, and a cost indicator. Uses framer-motion staggered card entrance and lucide-react icons.

As a Tech Lead, verify the end-to-end integration between the DiseaseGuide frontend (SymptomSearch, DiseaseResults, TreatmentDetail) and the disease guide lookup API (temp_009). Ensure symptom searches return real dataset matches, disease reports are saved to Supabase, and error states are handled gracefully in the UI.

As a Tech Lead, verify the end-to-end integration between the CropPlanner frontend (PlannerForm, RecommendationResults, FertilizerSuggestions) and the crop rotation API (temp_008). Ensure rule-based recommendations are returned correctly for all soil type and season combinations, crop history is saved, and the UI handles loading and error states properly.