Argonova

As a frontend developer, implement the LandingHero section. Uses @react-three/fiber Canvas with GalaxyStars component: 14 sphere meshes placed on a spiral (useMemo starData), useFrame for auto-rotation (groupRef.rotation.y), hover emissive glow (emissiveIntensity 0.6 to 2.5), pointer events for cursor change. THREE.BufferGeometry connection lines between adjacent stars rendered as line segments. Canvas wrapper must be sized width:100%, height:min(70vh,640px). Framer Motion AnimatePresence wraps overlay text. scrollProgress prop drives scroll-boosted rotation speed. Includes meshStandardMaterial with color, emissive, roughness, metalness per star.

As a frontend developer, implement the LandingGalaxyMap section — the signature 3D interactive galaxy feature map. Uses @react-three/fiber Canvas with OrbitControls and Line from @react-three/drei. Six FEATURES nodes (Crop Planner, Soil Health, Disease Guide, Learning Center, Plant Tracker, Fertilizer Guide) placed as 3D sphere meshes at defined positions with unique colors. CONNECTIONS array defines edges rendered as <Line> components. Clicking a star zooms camera and opens AnimatePresence detail card via framer-motion showing feature name, desc, benefits[], and href CTA. Hovering highlights with emissive glow. Canvas scene column: min-height:420px desktop / 320px mobile. OrbitControls restricted for drag-to-rotate.

As a frontend developer, implement the LandingValueProposition section. Renders four VALUE_PROPS as FlipCard components using framer-motion. Each FlipCard uses useState(flipped) and animates rotateY(0→180) on mouseEnter/mouseLeave via motion.div with .lvp-card-inner class. Front face shows Lucide icon (Sprout, HeartPulse, ShieldCheck, BookOpen), title, and desc. Back face shows benefits[] array as bullet list. Cards use cardVariants with staggered delay (i * 0.15) and useInView hook on section ref for scroll-triggered entrance (opacity: 0→1, y: 40→0). headerVariants animate section headline on scroll. Four iconColor variants: teal, coral, amber, gold.

As a frontend developer, implement the LandingUserPersonas section. Renders four PERSONAS (Farmer, Home Grower, Terrace Gardener, Agriculture Learner) as selectable cards. Uses useState for active persona selection, useCallback for click handlers, useMemo for derived display data. AnimatePresence wraps the expanded detail panel showing persona.useCase text. Each persona card has an inline SVG icon (custom path/circle/rect shapes), name, and description. Active card highlighted with accent color border. Framer-motion transitions between persona detail panels with fade + slide. Mobile: collapses to single column accordion or swipeable row.

As a frontend developer, implement the LandingFeatures section. Renders six FEATURES as motion.div cards using framer-motion useInView hook on section ref. Each card has a gradient background (gradientStart → gradientEnd via CSS custom properties), inline SVG icon with stroke color adapted per card, title, description, and link href to internal pages (/Crop Planner, /Soil Health, /Disease Guide, /Home Garden, /Dashboard, /Learning Center). Cards use staggered scroll-triggered entrance animations. Grid layout: 3 columns desktop, 2 tablet, 1 mobile. Hover state: scale and border-color shift to accent.

As a frontend developer, implement the LandingCropPlanner interactive demo section. Uses useState for soilType, climate, previousCrop selections and current recommendation index. SOIL_TYPES (8), CLIMATES (6), PREVIOUS_CROPS (11) arrays render as styled select dropdowns. REGIONS map derives region label from soil type. RECOMMENDATIONS_DB keyed by soil type provides crop cards with name, emoji, score (%), season, desc, traits[]. Lucide icons: Sprout, ChevronLeft, ChevronRight, ArrowRight, Leaf, Droplets, Sun, Search. AnimatePresence wraps recommendation card transitions. useInView on sectionRef triggers entrance animation. ChevronLeft/Right buttons cycle through recommendations[]. Score renders as animated progress bar. Mobile: full-width stacked layout.

As a frontend developer, implement the LandingTestimonials carousel section. Three testimonials (Ravi Krishnamurthy/Farmer, Meera Joshi/Home Grower, Anil Sharma/Terrace Gardener) rendered with 3D carousel effect. Uses useState(activeIndex), useState(locked), useState(isMobile), useRef(intervalRef, dragStartX). getRelativePosition() maps index to position (-1, 0, 1, 2). getCardTransform() returns {x, scale, opacity, zIndex, rotateY} per position — center card at scale 1.05, side cards at scale 0.92 opacity 0.55, offset ±180px desktop/±90px mobile. AnimatePresence with framer-motion layout animations. Auto-advances via setInterval in useEffect. Drag events on dragStartX ref for swipe navigation. StarIcon SVG renders 5-star rating. Avatar initials with .lt-avatar--farmer/grower/gardener CSS color variants.

As a frontend developer, implement the LandingCTA section with magnetic button and particle burst. Uses useState(magnetOffset {x,y}), useState(particles[]), useState(isMagnetic), useRef(sectionRef, btnRef), useInView(sectionRef, {once:true, margin:'-80px'}). handleMouseMove calculates dx/dy from button center; within 80px radius sets isMagnetic and magnetOffset({x: dx*0.4, y: dy*0.4}) via setMagnetOffset. handlePrimaryClick triggers generateParticles(24) — each particle has angle, distance (60-160px), size (4-10px), color from ['#F2B134','#FFDD57','#D95F5F','#4F6B73','#2A3D45'], duration. Particles clear after 900ms setTimeout. contentVariants with staggerChildren:0.12, childVariants for each text element. AnimatePresence renders particle burst. .lc-gradient-bg and .lc-deco-bg with .lc-orb elements provide animated background.

As a frontend developer, implement the Footer section with four linkColumns (Product, Company, Resources, Legal) and four socialIcons (LinkedIn, Twitter, Facebook, Instagram — each with inline SVG stroke paths). Uses framer-motion useInView on section ref. columnVariants animate each column with staggered delay (i * 0.12, duration 0.5). bottomVariants animate copyright row. Each linkColumn maps links[] to anchor tags with hover underline. Social icon links are circular buttons with hover color shift to accent. Footer bottom row shows copyright text with current year. Desktop: 4-column grid; mobile: stacked single column. May already exist from a previous page — check for existing Footer.jsx before recreating.

As a frontend developer, implement the Navbar shared component for the Login page. This is the same Navbar already built for the Landing page (task 78299a81-227e-4913-bd3a-db55bb03fd56) — verify the existing sections/Navbar.jsx is reusable here without modification. The component uses useState for scrolled/langOpen/mobileOpen/activeLang, useEffect for scroll listener (threshold: 10vh), click-outside handler via langRef, and body overflow lock on mobile open. NAV_LINKS array points to /Dashboard, /Learning Center, /Soil Health, /Crop Planner. LANGUAGES array has en/hi/ta/te. Includes SVG logo with animated nb-logo-path and nb-logo-leaf, desktop nav with lucide ChevronDown language dropdown, and mobile hamburger (Menu/X icons) that opens a full-width drawer overlay. Confirm import path '../styles/Navbar.css' resolves correctly from the Login page context.

As a Backend Developer, implement Supabase-backed user profile CRUD operations. Endpoints/functions needed: fetch user profile by auth ID, update profile fields (full_name, village, farm_size, user_type, preferred_language, soil_type), store and retrieve preferred language. Ensure all operations are secured via RLS. Note: Dashboard personalization and Navbar language switcher frontend tasks depend on this.

As a Backend Developer, implement the crop rotation recommendation logic using a rule-based system. Accept inputs: previous_crop, soil_type (Black/Red/Sandy/Clay), season (Kharif/Rabi/Zaid). Return: recommended next crop, fertilizer suggestions, water requirements, sustainability insights, soil recovery guidance. Save recommendation to crop_history table tied to authenticated user. Expose via Supabase Edge Function or RPC. Note: CropPlannerForm frontend task depends on this API.

As a Backend Developer, implement the disease guide data layer. Seed the disease_reports reference dataset with realistic Indian agriculture diseases (Late Blight, Powdery Mildew, Leaf Rust, Bacterial Wilt, etc.) including: crop_name, symptom tags, disease_name, causes, prevention, treatment, fertilizer_recommendations, severity. Expose a Supabase RPC or view for symptom-based filtering. Save user disease report queries to disease_reports table. Note: DiseaseGuideSymptomChecker, DiseaseGuideGrid, and DiseaseGuideSearch frontend tasks depend on this.

As a Backend Developer, implement the Garden Tracker data layer via Supabase. Support CRUD operations on garden_tracker table: create plant entry (plant_name, watering_schedule, sunlight_requirement, growth_status), update growth_status and watering data, delete plant, fetch all plants by user_id. Enforce RLS so users only access their own plants. Note: HomeGardenPlantGrid, HomeGardenGrowthTracker, and HomeGardenReminders frontend tasks depend on this.

As a Backend Developer, implement the soil health data layer. Create a soil_health reference dataset with nutrient data (N, P, K, Ca, Mg, S ppm ranges), pH ranges, and fertilizer guidance keyed by soil_type. Expose Supabase RPCs for: fetch nutrient data by soil_type, get fertilizer recommendations, get pH guidance, get trend history data. Note: SoilHealthNutrientPanel, SoilHealthpHAndMoisture, SoilHealthFertilizerGuidance, and SoilHealthTrends frontend tasks depend on this.

As a Frontend Developer, set up global state management for ArgoNova using React Context API or Zustand. Manage: authenticated user session and profile data, selected language (with persistence to localStorage and Supabase profile), user type (Farmer/Home Grower/Terrace Gardener/Learner), dashboard personalization state. Create custom hooks: useAuth(), useUserProfile(), useLanguage(). Ensure state is hydrated from Supabase session on app load and persisted across page navigations via React Router.

As a frontend developer, implement the SignupHero section for the Signup page. Renders a Three.js/R3F Canvas with 18 FloatingParticle components, each a tetrahedronGeometry (args=[1,0]) with meshBasicMaterial color #4F6B73 and opacity 0.08–0.24. Each FloatingParticle uses a mesh useRef and useFrame to drive sinusoidal position.y (amplitude 1.6) and cosine position.x (amplitude 2.2) animations with per-particle random phase and speed (0.25–0.80). The AmbientParticles component generates particles via useMemo with startPos in [-7,7] x [-4,4] x [-3,-7] ranges. A FarmingMotif component renders a Framer Motion div (initial opacity:0 y:12, animate opacity:1 y:0, delay 0.75s) containing an SVG viewBox 260x48 with a horizontal base line, two leaf path groups (opacity 0.7/0.75), sprout stems with circle accents in #F2B134, and additional botanical decorative paths using var(--primary,#2A3D45) and var(--accent,#F2B134) fills. Headline and subtitle use Framer Motion entrance animations.

As a frontend developer, implement the SignupForm section for the Signup page. Contains a Three.js/R3F Canvas with a ParticleField component: 60 particles in a spherical distribution (radius 3.2–4.8) using bufferGeometry with bufferAttribute positions, pointsMaterial color #2A3D45 opacity 0.55 AdditiveBlending, and useFrame driving meshRef.rotation.y at 0.06 speed with sinusoidal rotation.x. The form UI renders four PERSONAS selection cards (Farmer→Sprout icon, Home Grower→Home icon, Terrace Gardener→Building2 icon, Agriculture Learner→GraduationCap icon) with active state highlighting. Email field uses Mail icon with validateEmail (regex check, required). Password field uses Lock icon with Eye/EyeOff visibility toggle and validatePassword (min 8 chars, uppercase, lowercase, digit rules). AnimatePresence wraps inline error messages (AlertCircle icon) with Framer Motion fade transitions. Form submission state uses useState for loading spinner. Validation runs on blur and submit. useCallback wraps handlers. CSS includes sf- prefix classes.

As a frontend developer, implement the SignupSocialProof section for the Signup page. Renders a Three.js/R3F Canvas with a FarmGlobe component: a sphereGeometry (args=[1.35,64,64]) with MeshDistortMaterial (color #4F6B73, emissive #2A3D45, distort 0.25, speed 1.8) plus an orbit torusGeometry (args=[1.65,0.025,16,80]) with meshBasicMaterial color #F2B134 opacity 0.25, wrapped in OrbitControls and directional/point lights. Stats grid renders four statsData items (10,000+ Farmers, 150+ Crop varieties, 28 States, 97% satisfaction) each with icon classes ssp-stat-icon--farmers/crops/regions/satisfaction. Five avatar initials (RK, PD, AM, VS, SN) with className variants ssp-avatar--farmer/home/terrace/learner/grower. Framer Motion containerVariants (staggerChildren 0.1) and itemVariants (y:20→0) trigger via useInView. fadeInVariants and StarRating component render testimonial cards with Quote icon. Suspense wraps the Canvas.

As a frontend developer, implement the Footer section for the Signup page. This shared component may already exist from Landing, Login, Dashboard, or Learning Center pages. Renders four linkColumns arrays: Product (Crop Planner, Disease Guide, Soil Health, Home Garden, Dashboard), Company (About Argonova, Mission, Careers, Press Kit), Resources (Learning Center, Farming Tutorials, Sustainable Practices, Community Forum), and Legal (Terms, Privacy, Cookie, Data Protection). Social icons row (LinkedIn, Twitter, Facebook, Instagram) use inline SVG with stroke currentColor strokeWidth 2. Framer Motion columnVariants animate each column with opacity:0 y:30 → opacity:1 y:0 with staggered delay i*0.12 and duration 0.5. bottomVariants animate copyright and social row with y:20 fade. useInView triggers animations. CSS uses 4-column desktop grid collapsing to 2-column at 768px and 1-column at 480px.

As a Backend Developer, configure the Supabase Edge Functions runtime for ArgoNova. Set up the Deno-based Edge Functions environment, configure CORS headers for Vercel domain, establish shared utility modules (auth validation, error response helpers), configure secrets/environment variables (OpenWeatherMap API key, NewsAPI key, data.gov.in key, VITE_SUPABASE_URL, VITE_SUPABASE_ANON_KEY, SUPABASE_SERVICE_ROLE_KEY). Create a `_shared/` directory with cors.ts and supabaseAdmin.ts helpers reused across all Edge Functions. This is a prerequisite for Farm Score, Live Data Aggregator, Learning Center tracking, and Crop Planner Edge Functions.

As a Backend Developer, define and apply Row Level Security policies for all ArgoNova tables: `users` (select/update own row by auth.uid()), `crop_history` (select/insert own rows), `disease_reports` (select own, insert authenticated), `garden_tracker` (full CRUD own rows), `learning_resources` (public read, authenticated insert), `weather_cache` / `news_cache` / `market_price_cache` (service-role write, authenticated read), `performance_logs` and `error_logs` (service-role insert only). Write migration file `supabase/migrations/20240001_rls_policies.sql`. Verify policies via Supabase Studio policy tester. This task is a hard dependency for all backend CRUD and Edge Function tasks.

As a DevOps Engineer, configure all environment variables in Vercel for both production and preview environments: VITE_SUPABASE_URL, VITE_SUPABASE_ANON_KEY, VITE_EMAILJS_SERVICE_ID, VITE_EMAILJS_TEMPLATE_ID, VITE_EMAILJS_PUBLIC_KEY. Set build command to `vite build`, output directory to `dist`, node version to 18.x. Configure preview branch deployments to use staging Supabase project. Add vercel.json with rewrite rules for SPA routing (`/*` → `/index.html`). Verify CORS allowed origins in Supabase dashboard match Vercel production and preview domains.

As a Tech Lead, verify end-to-end integration of the Global Error Boundary & Toast Notification System (task c607a903) across all pages and integration points. Confirm: (1) React ErrorBoundary wraps each page route in App.jsx and captures render errors to Supabase `error_logs`; (2) `useToast` hook is wired into all existing integration tasks (Crop Planner, Soil Health, Disease Guide, Home Garden, Dashboard, Auth) replacing any ad-hoc alert/console error patterns; (3) toast queue correctly limits to 3 visible toasts with auto-dismiss at 4 s; (4) role='alert' + aria-live='polite' on toast container; (5) Framer Motion slide-in from bottom-right works on mobile viewport.

As a Backend Developer, create and apply the complete PostgreSQL database schema via Supabase migrations for all ArgoNova tables not yet covered by existing migration task (b077562d). Specifically ensure the following tables exist with correct column definitions and foreign key relationships: plant_reminders (covered by 15b59184), learning_resources (covered by e66b46e2), weather_cache, news_cache, market_price_cache (covered by ada4ac34), performance_logs, error_logs (referenced by c607a903 and 57073867), and soil_nutrient_reference, crop_rotation_rules, disease_reference (referenced by seed task 532c4de0). Verify all migration files are ordered correctly in supabase/migrations/ and run without conflicts. This task is a prerequisite for all Edge Function and RPC tasks.

As a frontend developer, implement the LandingHero section using `@react-three/fiber` Canvas with a `GalaxyStars` component. Build the `GalaxyStars` component with `useMemo` to generate 14 spiral-positioned star meshes (using trigonometry: angle = t * PI * 4, radius = 2 + t * 8) in colors #F2B134, #FFDD57, #D95F5F, #4F6B73, #ffffff. Animate via `useFrame`: rotate group Y-axis at 0.08 base speed boosted by `scrollProgress * 0.12`, pulse individual star scales via sine waves, apply 1.6x scale on hover using `hoveredIdx` state. Render `THREE.BufferGeometry` connection lines between adjacent stars. Use `meshStandardMaterial` with emissive intensity toggling between 0.6 and 2.5 on hover. Integrate `motion` and `AnimatePresence` from framer-motion for hero text/CTA entrance animations. Track scroll progress via `useState`/`useRef` for scroll boost input.

As a frontend developer, implement the LandingGalaxyMap section featuring an interactive 3D feature constellation. Render a `@react-three/fiber` Canvas with `OrbitControls` and `Line` from `@react-three/drei`. Build 6 feature nodes from the `FEATURES` array (Crop Planner #F2B134, Soil Health #4F6B73, Disease Guide #D95F5F, Learning Center #FFDD57, Home Garden #6BCB77, Farm Dashboard #A78BFA), each with `id`, `name`, `icon`, `color`, `href`, `desc`, and `benefits[]`. Render `CONNECTIONS` array (10 pairs) as 3D lines between nodes. Implement `useState` for `selectedFeature` and `hoveredFeature`. On node click, show an `AnimatePresence`-powered detail panel (via framer-motion) displaying feature `desc`, `benefits` bullet list, and a navigation `href` link. Use `useRef` and `useMemo` for node position calculations and performance optimization.

As a frontend developer, implement the LandingValueProposition section with a 4-card flip interaction. Import `Sprout`, `HeartPulse`, `ShieldCheck`, `BookOpen` from lucide-react for card icons. Build the `FlipCard` component using `useState` for `flipped` boolean, animating `rotateY` between 0 and 180 degrees via framer-motion `motion.div` with 0.5s ease transition. Map over `VALUE_PROPS` array (Smart Crop Recommendations/teal, Soil Health Monitoring/coral, Disease Prevention/amber, Learning & Growth/gold) each with 4 `benefits[]` strings shown on the back face. Use `useInView` hook on a section ref to trigger staggered entrance animations via `cardVariants` (hidden: opacity 0 y:40, visible: staggered by index * 0.15 delay, 0.6s duration) and `headerVariants` for the section header. Cards flip on click/hover to reveal the benefits list.

As a frontend developer, implement the LandingUserPersonas section showcasing 4 persona cards. Build from the `PERSONAS` array (farmer, homegrower, terrace, learner) each with `id`, `name`, `description`, `useCase`, and inline SVG `icon` (custom SVG paths — farmer with sprout/leaf paths, homegrower with house silhouette, terrace with plant tiers, learner with book/graduation paths). Use `useState` for `activePersona` and `useCallback` for selection handlers. Use `useMemo` for derived persona display data. Animate card transitions with `AnimatePresence` from framer-motion — active persona detail panel slides in/out. Implement tab-style persona selector buttons that highlight the active persona, updating the detail view with `description` and `useCase` text on selection.

As a frontend developer, implement the LandingFeatures section as a responsive feature card grid. Map over the `FEATURES` array (6 items: Personalized Crop Recommendations, Soil Health Tracking, Disease Detection, Watering Reminders, Small-Space Gardening, and a 6th entry) each with `title`, `description`, `link` (href to respective pages), `gradientStart`/`gradientEnd` color pairs (e.g., #2A3D45→#4F6B73, #D95F5F→#E88A8A, #F2B134→#FFDD57), and inline SVG icons with `stroke="#F4F4F9"` (except Disease Detection which uses `stroke="#2A3D45"`). Use `useRef` and `useInView` from framer-motion to trigger staggered card entrance animations. Each card renders as a gradient background tile with SVG icon, title, description, and a linked CTA.

As a frontend developer, implement the LandingCropPlanner section as an interactive crop recommendation demo. Build a multi-step UI using `useState` for `selectedSoil`, `selectedClimate`, `selectedPrevCrop`, and `results` state. Render three selector carousels (ChevronLeft/ChevronRight from lucide-react) for `SOIL_TYPES` (8 types: Alluvial, Black/Regur, Red & Yellow, Laterite, Arid/Desert, Saline/Alkaline, Peaty/Marshy, Forest/Mountain), `CLIMATES` (6 types), and `PREVIOUS_CROPS` (11 types). Use `REGIONS` map to derive region labels from soil type. Look up `RECOMMENDATIONS_DB` (keyed by soil type, each with 6 crop objects containing `name`, `emoji`, `score`, `season`, `desc`, `traits[]`) to display results. Animate results with `AnimatePresence` and `useInView` from framer-motion. Render each result card with `Sprout`, `Leaf`, `Droplets`, `Sun`, `Search`, `ArrowRight` lucide icons. Show crop score badges and trait chips per result.

As a frontend developer, implement the LandingTestimonials section as a 3D carousel. Build from the `testimonials` array (4 entries: Ravi Krishnamurthy/farmer, Meera Joshi/grower, Anil Sharma/gardener, Priya Nair/learner) each with `id`, `name`, `role`, `text`, `rating`, `initials`, and `avatarClass`. Use `useState` for `activeIndex` and `useCallback` for prev/next navigation handlers. Implement `getRelativePosition` helper to compute positions (-1, 0, 1, 2) relative to activeIndex with wrap-around. Apply `getCardTransform` to produce per-card `x` offset (±180px desktop / ±90px mobile), `scale` (1.05 center / 0.92 sides), `opacity` (1 center / 0.55 sides), `zIndex`, and `rotateY` values. Animate cards using `AnimatePresence` and `motion.div`. Render `StarIcon` SVG for 5-star ratings. Auto-advance via `useEffect` interval. Include dot navigation indicators.

As a frontend developer, implement the LandingCTA section with a magnetic CTA button and particle burst effect. Use `useState` for `magnetOffset` ({x,y}), `particles` array, and `isMagnetic` boolean. Attach `onMouseMove` to the section root — compute distance from cursor to button center via `getBoundingClientRect`; if dist < 80px, set magnetic offset to dx*0.4/dy*0.4 and animate button position. On primary button click, call `generateParticles(24)` which creates particles with random angle/distance (60–160px), size (4–10px), colors (#F2B134, #FFDD57, #D95F5F, #4F6B73, #2A3D45), and duration (0.5–0.8s) — clear after 900ms. Use `useInView` on `sectionRef` (margin -80px, once) to trigger `contentVariants` (opacity 0→1, y 40→0, 0.7s, staggerChildren 0.12) and `childVariants` (opacity 0→1, y 24→0, 0.55s). Render animated gradient background div (`lc-gradient-bg`) and parallax orb decorations (`lc-deco-bg`) with CSS scroll variable.

As a frontend developer, implement the Footer section with animated link columns and social icons. Build from `linkColumns` array (4 columns: Product with 5 links, Company with 4 links, Resources with 4 links, Legal with 4 links) each containing `title` and `links[]` with `label`/`href`. Render social icons from `socialIcons` array (LinkedIn, Twitter, Facebook, Instagram) with inline SVG paths using `stroke="currentColor"`. Use `useInView` on the footer ref to trigger `columnVariants` staggered entrance animations (hidden: opacity 0 y:30, visible: staggered by index * 0.12 delay, 0.5s duration). Animate the bottom bar with `bottomVariants` (hidden: opacity 0 y:20). Include the Argonova logo/brand mark and copyright text in the bottom bar. Note: this Footer component may already exist from a previous page implementation.

As a frontend developer, implement the LoginHero section for the Login page. The section renders a full-viewport (lhr-root) split layout with three layers: (1) a CSS radial glow div (lhr-glow), (2) a Three.js Canvas (via @react-three/fiber) wrapped in lhr-canvas-wrap — canvas is position:absolute, inset:0, 100% width/height, pointerEvents:none — rendering 36 LeafParticles using bufferGeometry with Float32Array positions (14×7×5 spread), pointsMaterial color #F2B134 opacity 0.35, additive blending, animated via useFrame rotating y at 0.06×elapsedTime and drifting y via sin(elapsedTime×0.3)×0.4; (3) a framer-motion motion.div (lhr-content) with containerVariants (staggerChildren:0.14, delayChildren:0.1) and itemVariants (opacity/y:16 → 1/0, duration:0.55, cubic-bezier easing). Content includes a decorative SVG leaf icon (lhr-icon-svg with lhr-icon-leaf path), headline, subheadline, and CTA button — all wrapped in motion.div with itemVariants. Canvas dpr clamped to [1, 1.5]. Import framer-motion and @react-three/fiber.

As a frontend developer, implement the LoginForm section for the Login page. The component manages state: email, password, showPassword (toggle via Eye/EyeOff lucide icons), rememberMe checkbox, and isLoading for submission spinner. Includes a raw Three.js ParticlesBackground (NOT @react-three/fiber) mounted via useRef on a lf-bg-canvas div: creates Scene, PerspectiveCamera (fov:50, z:20), WebGLRenderer (alpha:true), 60 particles with Float32Array positions (24×18×14 spread) and per-particle sizes (0.6–3.1), PointsMaterial color 0xF2B134 opacity 0.55 additive blending, animate loop rotating particles.rotation.y+=0.0006 and x+=0.00025 with sin-based opacity pulse (0.55±0.12 at 0.0004 rate). Handles window resize updating camera aspect and renderer size. Cleanup cancels animation frame, removes DOM element, disposes geometry/material. Form fields use framer-motion motion.div wrappers, Mail and Lock icons from lucide-react, AlertCircle for validation errors, LogIn icon on submit button. Import '../styles/LoginForm.css'.

As a frontend developer, implement the LoginSupport section for the Login page. Renders three support cards (security, help, contact) from a static supportCards array, each with a lucide icon (Shield, HelpCircle, Phone), title, description, divider, and arrow link. SupportCard uses useRef on the card element to track mouse position via onMouseMove, computing x/y percentages relative to card bounds and setting CSS custom properties --mx/--my for radial spotlight effect; onMouseLeave resets to 50%/50%. Framer-motion: cardVariants use custom(i) for staggered delay (i×0.1s, duration 0.55s, cubic-bezier ease), headingVariants fade/slide in at 0.5s. useInView hook (from framer-motion) on a section ref triggers animate state ('visible'/'hidden') passed to each SupportCard. Cards render as motion.div with initial='hidden' and animate={isInView ? 'visible' : 'hidden'}. Import '../styles/LoginSupport.css'.

As a frontend developer, implement the Footer shared component for the Login page. This is the same Footer already built for the Landing page (task 4ee49838-a0a8-4159-a54a-fff47c1a6c7c) — confirm sections/Footer.jsx is reusable without modification. The Footer renders four linkColumns (Product, Company, Resources, Legal) with hardcoded hrefs to /Crop Planner, /Disease Guide, /Soil Health, /Home Garden, /Dashboard, /Learning Center, and /Landing routes. Four socialIcons (LinkedIn, Twitter, Facebook, Instagram) rendered as inline SVGs. Uses framer-motion: columnVariants with custom(i) stagger (delay i×0.12, duration 0.5, cubic-bezier ease) triggered by useInView on section ref, and bottomVariants (opacity/y:20 fade-up) for copyright bar. Confirm import path '../styles/Footer.css' resolves correctly from Login page context.

As a frontend developer, implement the Navbar section for the Dashboard page. This component already exists from the Landing and Login pages (sections/Navbar.jsx) — verify it renders correctly in the Dashboard context. The Navbar includes: scroll-based state (setScrolled via window.scrollY threshold at 10vh), language switcher dropdown (useState langOpen, activeLang) with 4 languages (English, Hindi, Tamil, Telugu) using a ref for outside-click dismissal (langRef + mousedown listener), mobile hamburger menu (useState mobileOpen) with body overflow lock, SVG logo with animated leaf/circle paths (nb-logo-path, nb-logo-leaf CSS classes), desktop nav links (Features, Learn, About, Pricing), and responsive CSS hiding desktop nav below 768px. Confirm the component imports correctly and active link state reflects /Dashboard route.

As a Backend Developer, implement the Farm Health Score calculation logic as a Supabase Edge Function or RPC. Inputs: soil_quality, crop_diversity, irrigation_efficiency, fertilizer_balance derived from user's crop history and soil type. Output: overall_score (0-100), sub_metrics (Soil Health, Crop Rotation Compliance, Disease Prevention scores), farming_insights[], improvement_suggestions[]. Note: DashboardFarmScore frontend task depends on this.

As a Frontend Developer, implement all sections for the Signup page. The signup form should collect: Full Name, Email, Password, Village/Area Name, Farm Size, User Type (Farmer/Home Grower/Terrace Gardener/Agriculture Learner), Preferred Language, Soil Type, Primary Farming Interest. Integrate with Supabase auth createUser and insert into users table on successful registration. Redirect to Dashboard on success. Reuse Navbar and Footer shared components. Apply Framer Motion entrance animations consistent with Login page styling. Validate all fields with AnimatePresence error messages.

As a Frontend Developer, implement the multilingual support framework for ArgoNova. Set up i18next or a custom translation context supporting English, Telugu, Hindi, Tamil, and Kannada. Create translation JSON files for all UI labels, navigation items, form fields, error messages, dashboard labels, and recommendation outputs. Integrate with useLanguage() hook from global state. Apply dynamic language switching without page reload. Store preferred language in Supabase user profile via useUserProfile() hook on change.

As a Frontend Developer, configure React Router v6 for all pages: Landing (/), Login (/Login), Signup (/Signup), Dashboard (/Dashboard), Crop Planner (/Crop Planner), Soil Health (/Soil Health), Disease Guide (/Disease Guide), Home Garden (/Home Garden), Learning Center (/Learning Center). Implement ProtectedRoute wrapper component that checks auth state from useAuth() hook and redirects unauthenticated users to /Login. Implement PublicRoute that redirects authenticated users away from Login/Signup to /Dashboard. Handle loading states during session hydration.

As a Backend Developer, populate all reference datasets in PostgreSQL via Supabase seed scripts. (1) `disease_reference` — 20+ Indian agriculture diseases with crop_name, symptom_tags TEXT[], disease_name, causes, prevention, treatment, severity ENUM('mild','moderate','severe'). (2) `soil_nutrient_reference` — nutrient data (N, P, K, Ca, Mg, S optimal ppm ranges) keyed by soil_type for 8 soil types. (3) `crop_rotation_rules` — rule-based matrix of (previous_crop, soil_type, season) → recommended_crop, fertilizer_notes, water_req. (4) `learning_resources` — 20+ multilingual entries (en/hi/ta/te/kn) across tutorial/video/tip types and all 4 seasons. Place seed files in `supabase/seed.sql` and document run order.

As a Backend Developer, extend the `users` table with a `preferred_language` VARCHAR(5) column (default 'en') and expose two Supabase RPCs: (1) `get_user_language(p_user_id UUID)` — returns the stored language code; (2) `update_user_language(p_user_id UUID, p_language VARCHAR)` — validates against allowed codes ('en','hi','ta','te','kn') and upserts. Apply RLS: users can only read/update their own row. This supports the i18n multilingual framework and Navbar language switcher sync described in the SRD Functional Requirements.

As a Tech Lead, verify end-to-end integration between the SignupForm frontend section (task 470f3883) and the Supabase Auth backend (task 51a346fc). Ensure: (1) SignupForm calls `supabase.auth.signUp()` with email/password on submit; (2) on success, a `profiles` row is inserted with full_name, user_type (persona), preferred_language, soil_type, village, farm_size; (3) duplicate email errors surface as inline field validation; (4) persona-not-selected blocks submission; (5) React Router redirects to /Dashboard post-signup; (6) global state (useAuth/useUserProfile) is hydrated immediately. Cross-reference with task 0d8f7cd5 (Signup Flow Integration) to confirm no overlap — this task focuses on the direct SignupForm ↔ Supabase wiring.

As a Tech Lead, verify end-to-end integration between the Dashboard Live Data Widget task (bdd858ce) and the Live Data Aggregator API (ada4ac34). Confirm: (1) `get_live_dashboard_data` RPC is called on Dashboard mount with authenticated user ID; (2) weather widget renders temperature, condition icon, and location from OpenWeatherMap response; (3) agriculture news carousel auto-scrolls every 5 s; (4) crop market price table renders commodity/price/trend; (5) all three widgets show skeleton loaders during fetch; (6) graceful degradation to 'Data unavailable' on API timeout or failure; (7) 30-min client-side polling cleans up on unmount.

As a Tech Lead, verify end-to-end integration of the EmailJS hook (task 39afc860) across all three touchpoints: (1) Landing page contact/demo request form sends lead notification to admin email; (2) Disease Guide 'Report Sighting' form sends report to admin via `sendEmail`; (3) rate-limit guard (max 3 sends/session/form) is enforced in `useEmailJS` hook. Verify VITE_EMAILJS_* environment variables are set in Vercel (cross-reference task tmp_vercel_env_setup). Confirm optimistic UI pattern: success state shown immediately, failures logged silently.

As a Tech Lead, verify end-to-end integration of the PWA setup and performance monitoring (task 57073867). Confirm: (1) `vite-plugin-pwa` generates valid manifest with name 'ArgoNova', theme_color '#2D6A4F', 192/512px icons; (2) Workbox service worker registers and intercepts requests — cache-first for static assets, network-first for Supabase API calls; (3) `web-vitals` reports CLS/LCP/FID — console in dev, Supabase `performance_logs` insert in prod; (4) all page routes are code-split via React.lazy/Suspense; (5) all below-fold images have `loading='lazy'` and WebP with `<picture>` fallback. Run Lighthouse audit targeting LCP <2.5 s and CLS <0.1 on mobile.

As a Backend Developer, configure Supabase Realtime for ArgoNova's live data needs. Enable Realtime on the `garden_tracker` table so HomeGarden growth tracker reflects updates without manual refresh. Enable Realtime on `crop_history` so DashboardCropRotation refreshes when a new crop plan is saved. Create a `useSupabaseRealtime(table, filter)` custom hook that subscribes to INSERT/UPDATE/DELETE events, dispatches to the relevant Zustand/Context store slice, and unsubscribes on unmount. Ensure Realtime channels are properly cleaned up to prevent memory leaks in the SPA.

As a Backend Developer, implement the backend for HomeGarden watering reminders. Create a `plant_reminders` table (id, user_id, plant_id FK garden_tracker, reminder_type ENUM('water','fertilize','pest','harvest'), scheduled_at TIMESTAMPTZ, snoozed_until TIMESTAMPTZ, is_done BOOLEAN, created_at). Expose RPCs: `get_user_reminders(p_user_id)`, `create_reminder(p_user_id, p_plant_id, p_type, p_scheduled_at)`, `update_reminder(p_id, p_is_done, p_snoozed_until)`, `delete_reminder(p_id)`. Apply RLS: users own their reminders. Create a Supabase Edge Function `send-reminder-notification` triggered by a pg_cron job (daily at 07:00 IST) that queries due reminders and sends push/email via EmailJS or FCM. Note: HomeGardenReminders frontend task (25a9e57c) depends on this API.

As a Backend Developer, implement the crop history data layer via Supabase. Create RPCs: (1) `get_crop_history(p_user_id UUID)` — returns all crop_history rows for the authenticated user ordered by created_at DESC; (2) `save_crop_rotation(p_user_id, p_previous_crop, p_recommended_crop, p_season, p_soil_type)` — inserts a new crop_history row. Apply RLS: users can only read/insert their own rows. This API supports the DashboardCropRotation section (task 69fedd92) which needs to load real historical rotation data, and integrates with the Crop Planner Recommendations API (db2f2f3f) which saves recommendations to crop_history.

As a frontend developer, implement the DashboardSidebar section for the Dashboard page. The sidebar includes: a 3D amber crystal accent rendered via @react-three/fiber Canvas with an AmberCrystal mesh (octahedronGeometry args=[0.8,0]) that rotates continuously via useFrame (rotation.y += delta*0.4, rotation.x += delta*0.2), ambientLight intensity=0.6 and two directionalLights. Navigation items array (NAV_ITEMS) includes Dashboard, Crop Planner, Soil Health, Disease Guide, Home Garden, Learning Center — each with lucide-react icons (LayoutDashboard, Sprout, Droplets, Bug, Home, GraduationCap). NavLinks sub-component renders anchor tags with dsb-active class for Dashboard item and dsb-active-indicator span. AnimatePresence from framer-motion handles mobile drawer open/close with animated HamburgerIcon (SVG with motion.line elements). On mobile, sidebar becomes a slide-in drawer; on desktop it is a fixed-width left panel. Responsive CSS collapses to drawer below 768px.

As a frontend developer, implement the DashboardStats section for the Dashboard page. Renders 4 stat cards (Farm Score 87/100, Soil pH 6.8, Last Watering 2hrs ago, Disease Risk Moderate) using statCards array with id, label, value, trend, trendDir, trendLabel, Icon, iconClass, and sparkHeights (10-element arrays for sparkline bars). Uses framer-motion containerVariants (staggerChildren: 0.1, delayChildren: 0.05) and cardVariants (opacity 0→1, y 24→0, duration 0.5) for scroll-triggered entrance animations. TrendIcon sub-component conditionally renders TrendingUp, TrendingDown, or Minus from lucide-react based on trendDir. ParticleBackground sub-component uses Three.js directly (not react-three-fiber): creates WebGLRenderer on a canvas ref, 50-particle BufferGeometry with Float32Array positions and colors mixing colorTeal (#4F6B73), colorAmber (#F2B134), colorCoral (#D95F5F). Responsive 4-column grid collapses to 2-column on tablet and 1-column on mobile.

As a frontend developer, implement the DashboardFarmScore section for the Dashboard page. Displays FARM_SCORE=78 with SUB_METRICS array (Soil Health 82, Crop Rotation Compliance 75, Disease Prevention 68). getInterpretation() function maps score ranges to label/cls/desc objects (Excellent≥90, Good≥75, Fair≥60, Needs Attention≥40, Critical otherwise). DecorativeRing component renders a torus geometry (args=[1.35,0.03,16,100]) via @react-three/fiber useFrame rotating on z (delta*0.15) and x (delta*0.08) axes with meshStandardMaterial color=#4F6B73 emissiveIntensity=0.4. SVG ring uses circle element with circumference=2πr (r=75), animated dashOffset computed as circumference*(1-FARM_SCORE/100) via framer-motion motion.circle. ringColor is computed via useMemo interpolating THREE.Color between #D95F5F and #F2B134 based on score. useInView hook (once:true, margin:-40px) triggers entrance animation (opacity 0→1, y 24→0). Sub-metrics render as labeled progress bars. Canvas positioned absolutely behind SVG ring.

As a frontend developer, implement the DashboardCropRotation section for the Dashboard page. Renders CROP_DATA array of 4 crops: Wheat (Rabi, past, yield 4.8t/ha), Rice (Kharif, past, 5.2t/ha), Moong/Green Gram (Zaid, past, 1.2t/ha warning), and Mustard (Rabi, next/recommended). Each crop card has: icon from lucide-react (Wheat, Sprout, Leaf, Flower2), color/accentColor, type (past|next), yield, yieldStatus, soilImpact, notes, and optional recommendation string. CropBlob 3D component uses @react-three/drei Sphere with MeshDistortMaterial (distort=0.35, speed=1.8), useFrame animates rotation.y=elapsedTime*0.5 and rotation.x sine oscillation. CropCanvas wraps in react-three-fiber Canvas. AnimatePresence from framer-motion handles accordion expand/collapse of crop detail panels (useState for active card). ChevronDown icon rotates on open. Sparkles icon marks the recommended next crop. Responsive: horizontal scrolling timeline on mobile, grid on desktop.

As a frontend developer, implement the Footer section for the Dashboard page. This component may already exist from Landing/Login pages (sections/Footer.jsx) — verify it renders correctly here. The Footer includes: 4 linkColumns (Product: Crop Planner, Disease Guide, Soil Health, Home Garden, Dashboard; Company: About Argonova, Mission, Careers, Press Kit; Resources: Learning Center, Farming Tutorials, Sustainable Practices, Community Forum; Legal: ToS, Privacy, Cookie, Data Protection). columnVariants framer-motion animation with custom delay per column index (i*0.12, duration 0.5). 4 socialIcons rendered as inline SVGs (LinkedIn, Twitter, Facebook, Instagram). useInView hook triggers entrance animations. bottomVariants handles bottom bar fade-in. Responsive: 4-column grid on desktop, 2-column on tablet, stacked on mobile. CSS uses Footer.css with Argonova brand colors.

As a frontend developer, implement the Navbar section for the Learning Center page. This component is shared across pages and may already exist from prior pages (Login, Dashboard). It uses React state hooks: scrolled (scroll threshold at 10% viewport height), langOpen (language dropdown toggle), activeLang (currently selected language code), and mobileOpen (mobile drawer toggle). It renders an SVG logo with animated nb-logo-path and nb-logo-leaf paths, desktop NAV_LINKS (Features, Learn, About, Pricing), a Globe + ChevronDown language switcher dropdown with LANGUAGES array (en, hi, ta, te), a mobile hamburger Menu/X toggle, and a mobile drawer overlay. Uses useRef for langRef click-outside detection and useCallback for handleLangSelect. CSS handles nb-scrolled class, backdrop-filter blur, and responsive breakpoints hiding desktop nav below 1024px.

As a frontend developer, implement the Navbar section for the Crop Planner page. This component reuses the shared Navbar already built for Dashboard, Login, and Learning Center pages. It includes: scroll-based state (`scrolled`) toggling `.nb-scrolled` class at 10% viewport height threshold; a language switcher dropdown with 4 languages (English, Hindi, Tamil, Telugu) using `langRef` for outside-click detection; mobile menu toggle with `mobileOpen` state and body overflow lock; an animated SVG logo with `.nb-logo-path` and `.nb-logo-leaf` paths for the Argonova brand; 4 desktop nav links (Features, Learn, About, Pricing); and a CTA button. Verify the component file exists from prior pages before regenerating.

As a frontend developer, implement the SoilHealthHeader section for the Soil Health page. Build the page header using framer-motion fadeUp stagger animations (custom delay i*0.08) for breadcrumb nav, h1 title, meta row with location/clock SVG badges showing 'Krishnagiri, Tamil Nadu' and last-updated timestamp, and an actions group with refresh button that uses useState(refreshing) to trigger an 800ms spinner state. Breadcrumb links back to /Dashboard. CSS in SoilHealthHeader.css using shh- prefix. Depends on Navbar from Dashboard page.

As a frontend developer, implement the SoilHealthNutrientPanel section. Build a nutrient grid displaying 6 macro-nutrients (N, P, K, Ca, Mg, S) from the NUTRIENTS array with realistic ppm values. Each card shows: symbol badge, current value vs optimalMin/optimalMax range, getStatus() helper returning 'optimal'/'deficient'/'excess', animated bar fill via getBarFill() clamped to 4-100%, status color from getStatusColor(), and history sparkline from 4-point history arrays. Includes a Three.js @react-three/fiber Canvas with NutrientParticles (70-point Float32Array particle field). AnimatePresence for card expand/collapse detail view showing nutrient description. CSS in SoilHealthNutrientPanel.css and MiniBarChart.css.

As a frontend developer, implement the SoilHealthpHAndMoisture section. Build two sub-components: (1) PHScaleBar — a Three.js @react-three/fiber Canvas rendering 14 boxGeometry segments with gradient colors from red (#c92a2a) through green (#40c057) to purple (#845ef7), a cylinderGeometry marker pin and torusGeometry glow ring positioned at currentPH=6.4 on the scale using markerX = (currentPH/14)*7 - 3.5, with markerColor logic for acid/neutral/alkaline. (2) MoistureGauge — an SVG semicircle gauge using polarToCartesian/describeArc helpers, framer-motion animated needle to value=62%, with targetMin=50 and targetMax=75 shown as optimal band. AnimatePresence for pH detail tooltip. CSS in SoilHealthpHAndMoisture.css.

As a frontend developer, implement the SoilHealthFertilizerGuidance section. Build a 3D fertilizer molecule viewer using @react-three/fiber Canvas with @react-three/drei Float and OrbitControls (autoRotate speed 1.2, zoom/pan disabled). FertilizerMolecule renders NutrientMolecule sphereGeometry components for N (color #2A3D45, radius 0.4), P (#D95F5F, 0.32), K (#F2B134, 0.38), and center NPK (#4F6B73, 0.2), connected by NutrientBond TubeGeometry from THREE.LineCurve3 with 50% opacity. Right panel shows fertilizer type cards with IconFlask SVG, dosage recommendations, and application timing. useState for selected fertilizer card. CSS in SoilHealthFertilizerGuidance.css.

As a frontend developer, implement the SoilHealthTrends section. Build a Chart.js Line chart via react-chartjs-2 displaying nutrient trends (N, P, K, Organic Matter) over selectable TIME_RANGES ('3m'/'6m'/'12m'). generateNutrientData() produces realistic time-series with configurable start/end/noise per nutrient. NUTRIENT_META array defines 4 nutrients with colors (#4CAF50, #2196F3, #FF9800, #9C27B0) and legend dot CSS classes. trendValue() and trendArrow() helpers compute ↑/↓/→ indicators for each series. ThreeParticles background canvas using THREE.WebGLRenderer with alpha, PerspectiveCamera at z=30, animated particle field. AnimatePresence for time range tab transitions. useState for activeRange. CSS in SoilHealthTrends.css and ThreeParticles.css.

As a frontend developer, implement the SoilHealthRecommendations section. Build a prioritized recommendations list from the 5-item recommendations array with priority levels 'urgent'/'important'/'soon'. Each recommendation card shows: priority badge with color coding, title, description, impact score (0-100) as animated progress bar, impactLabel ('High'/'Medium'), and dual guidance tabs (farmer vs homeGrower) using useState(activeTab). Three.js particle background via useRef mountRef with WebGLRenderer alpha canvas, PerspectiveCamera, animated BufferGeometry points using useEffect cleanup pattern. framer-motion AnimatePresence for card expand/collapse toggled by useState(expandedId). Cards stagger-animate on mount. CSS in SoilHealthRecommendations.css.

As a frontend developer, implement the DiseaseGuideHero section for the Disease Guide page. This section features a Three.js Canvas with a custom DiseasedLeaf 3D mesh composed of two planeGeometry halves, a center vein, lateral veins, and circleGeometry disease spots with brownish-orange material. The leaf group uses useFrame for continuous rotation (rotation.y += delta * 0.12) and subtle sine-wave pitch. A ringRef animates a pulsing scale ring around the leaf. Framer Motion animates the headline, subheadline, and CTA text using staggered itemVariants (opacity 0→1, y 28→0). The section also integrates @react-three/drei Sparkles for ambient particle effect. Hover state on the leaf changes material color from #4a7a4a to #5a8a5a. Responsive: full-viewport height on desktop, reduced min-height on mobile with font scaling.

As a frontend developer, implement the HomeGardenHero section for the Home Garden page. This section features a React Three Fiber Canvas with a custom LeafModel 3D component using Float, MeshDistortMaterial from @react-three/drei — including a stem (cylinderGeometry), three distorted leaf meshes (sphereGeometry + MeshDistortMaterial with speed/distort props), and a golden center bud. The hero also renders a GARDEN_MODES array (terrace, home, apartment) as interactive mode pill selectors with custom ModePillIcon SVG icons per type. Framer Motion is used for entrance animations. CloudSun and Sprout icons from lucide-react are present. useState manages active mode selection and useMemo/useRef optimize rendering. The section depends on the Dashboard page task to establish page chain.

As a Tech Lead, verify end-to-end integration between the Login/Signup frontend sections and the Supabase authentication backend. Ensure login form correctly calls Supabase signInWithPassword, signup form calls signUp and inserts user profile, session tokens are stored and hydrated via global state, protected routes correctly redirect unauthenticated users, and language preference is persisted to user profile. Verify error states (wrong password, duplicate email) are handled gracefully in the UI.

As a Tech Lead, verify end-to-end integration between the i18n multilingual framework (frontend task 1feb4212) and the Language Preference Persistence API (backend task tmp_supabase_language_profile_api). Ensure: (1) on language switch in Navbar, the new locale is persisted to Supabase via `update_user_language` RPC; (2) on app load/session hydration, `get_user_language` is called and the i18n context is initialized to the stored language; (3) all UI labels, form fields, and error messages switch without page reload; (4) unauthenticated users fall back to localStorage-persisted language. Test across en/hi/ta/te/kn locales.

As a Tech Lead, verify end-to-end integration between the Global State Management setup (task 81433806) and Supabase Auth (task 51a346fc). Ensure: (1) `useAuth()` hook correctly reads from `supabase.auth.getSession()` on mount and subscribes to `onAuthStateChange`; (2) `useUserProfile()` fetches and caches user profile data from `users` table after auth; (3) `useLanguage()` reads `preferred_language` from profile and initializes i18n context; (4) ProtectedRoute (task ab532a76) correctly gates using `useAuth()` loading + session state; (5) state is cleared on `signOut()`. This is the foundational wiring that all dashboard and feature pages depend on.

As a Frontend Developer, perform a comprehensive mobile responsiveness audit across all ArgoNova pages (Landing, Login, Signup, Dashboard, Crop Planner, Soil Health, Disease Guide, Home Garden, Learning Center). Verify: (1) all grid layouts collapse correctly at 768px (2-col) and 480px (1-col) breakpoints; (2) Navbar mobile drawer opens/closes correctly on all pages; (3) Three.js Canvas sections have correct dpr clamping [1,1.5] and reduced particle counts on mobile (covered separately by d75e45a0 — verify it applies to all pages); (4) typography scales correctly via clamp() on all hero sections; (5) touch events work on 3D carousels (LandingTestimonials drag swipe, LandingGalaxyMap OrbitControls touch); (6) sticky filter bars (DiseaseGuideCategories, DiseaseGuideSearch) scroll correctly on iOS Safari. This audit complements the Three.js optimization task (d75e45a0) and must be verified on real mobile viewport sizes.

As a frontend developer, implement the LearningCenterHero section for the Learning Center page. Renders a Three.js/R3F 3D scene via Canvas with a FarmingGlobe component: a distorted Sphere (MeshDistortMaterial, color #2A3D45), an inner Ring (color #F2B134 emissive amber), and an outer orbit Ring (color #4F6B73). OrbitingNodes renders 8 Float-wrapped mesh nodes positioned on a parametric orbit with colors cycling between #F2B134, #D95F5F, and #4F6B73. Stars component adds a star field backdrop. useFrame drives continuous groupRef.rotation.y and ringRef.rotation.z animations. Foreground uses Framer Motion useInView for entrance animations on headline, subtitle, and stat counters (120+ Resources, 15K+ Learners, 45+ Instructors). Includes a Search input with ArrowRight CTA button, and FILTER_PILLS (All, Tutorials, Videos, Articles, Guides) as clickable category pills with active state. Suspense wraps the Canvas fallback.

As a frontend developer, implement the LearningCenterSeasonalTips section for the Learning Center page. Manages a seasons array with four objects: summer (April–June, Sun icon, sorghum/pearl millet tips), monsoon (July–September, CloudRain icon, flood-tolerant rice Swarna-Sub1 tips), winter (October–February, Snowflake icon), and spring (Flower2 icon). Each season has an intro, seasonClass, and 5 tips with per-tip icon variants (Leaf, Droplets, Sprout, Thermometer). Uses useState for activeSeasonId toggling between season tabs. Renders a R3F Canvas with OrbitControls, Environment, and useMemo-constructed THREE.js geometry for a seasonal 3D accent. Framer Motion useInView triggers staggered card entrance animations. Season tab pills update the active panel; tip list renders with ArrowRight accent icons. CSS applies seasonClass-specific color theming (summer=amber, monsoon=blue, winter=slate, spring=green) with responsive grid collapse at 768px.

As a frontend developer, implement the Footer section for the Learning Center page. This shared component may already exist from Landing, Login, or Dashboard pages. Renders four linkColumns arrays: Product (Crop Planner, Disease Guide, Soil Health, Home Garden, Dashboard), Company (About Argonova, Mission, Careers, Press Kit), Resources (Learning Center, Farming Tutorials, Sustainable Practices, Community Forum), and Legal (Terms, Privacy, Cookie, Data Protection). Social icons row includes LinkedIn, Twitter, Facebook, Instagram as inline SVG stroked icons. Uses Framer Motion columnVariants (hidden: opacity 0 y:30, visible with staggered delay i*0.12) and bottomVariants triggered by useInView. CSS uses a 4-column desktop grid collapsing to 2-column at 768px and 1-column at 480px with responsive padding adjustments.

As a frontend developer, implement the CropPlannerHero section for the Crop Planner page. This section renders a full-width hero with a Three.js `@react-three/fiber` Canvas background containing an `OrbScene` with two animated meshes: an icosahedron (`orb1Ref`, color `#4F6B73`, opacity 0.16) and a sphere (`orb2Ref`, color `#F2B134`, opacity 0.13), both animated via `useFrame` with sinusoidal y-position movement and continuous rotation. The content layer uses Framer Motion `containerVariants` (staggerChildren 0.16, delayChildren 0.25) and `itemVariants` (y: 28→0, duration 0.65) to animate an h1 headline with `.cph-headline-accent` span for 'Crop Rotation', a subheadline paragraph, and an intro paragraph about Argonova's AI analysis. CSS uses `.cph-root`, `.cph-canvas-wrap` (absolute-positioned canvas), and `.cph-content`.

As a frontend developer, implement the CropPlannerForm section for the Crop Planner page. This is the most complex section, featuring: a Three.js `FloatingParticles` component with 60 particles (50% circles, 50% leaf types) animated via `useFrame` using `THREE.Vector3` positions and per-particle speed; a multi-step form with controlled state for soil type (8 options via `SOIL_TYPES`), climate region (8 options via `CLIMATE_REGIONS`), previous crop with typeahead search against 30 `CROP_SUGGESTIONS`, and garden type toggle (Farmer/Home Grower/Terrace using `GARDEN_TYPES` with Lucide icons Sprout/Home/Building2); form validation with `AnimatePresence`-driven error messages using `AlertCircle`; a multi-select crop suggestions dropdown with `Search` icon; and Framer Motion animated form card reveals. Icons from lucide-react: `Sprout`, `ChevronDown`, `AlertCircle`, `Search`, `Leaf`, `Globe`, `Home`, `Building2`, `X`. CSS uses `.cpf-` prefix classes.

As a frontend developer, implement the CropPlannerFeatures section for the Crop Planner page. This section renders a 6-feature grid using the `FEATURES` array: AI Crop Matching (Sparkles icon, `cf-grad-1`), Soil Health Integration (Sprout, `cf-grad-2`), Seasonal Scheduling (CalendarClock, `cf-grad-3`), Weather Sync (CloudSun, `cf-grad-1`), Yield Predictions (TrendingUp, `cf-grad-2`), and Companion Planting (GitBranch, `cf-grad-3`). A Three.js `ParticleField` is implemented using vanilla Three.js (not react-three-fiber) with a `mountRef`, 200-particle `BufferGeometry` using `Float32Array` for positions, colors (palette: `#2A3D45`, `#4F6B73`, `#D95F5F`, `#F2B134`), and sizes; a `ResizeObserver` handles canvas resizing. Feature cards use Framer Motion `useInView` hook for scroll-triggered reveal animations. CSS uses `.cf-` prefix and gradient classes `cf-grad-1/2/3`.

As a frontend developer, implement the Footer section for the Crop Planner page. This component may already exist from Landing, Login, Dashboard, or Learning Center pages — verify before regenerating. It includes 4 link columns using `linkColumns` array: Product (Crop Planner, Disease Guide, Soil Health, Home Garden, Dashboard), Company (About Argonova, Mission, Careers, Press Kit), Resources (Learning Center, Farming Tutorials, Sustainable Practices, Community Forum), and Legal (Terms, Privacy, Cookie Policy, Data Protection). Social icons (LinkedIn, Twitter, Facebook, Instagram) are rendered as inline SVGs. Framer Motion `columnVariants` (custom delay: i * 0.12, y: 30→0) and `bottomVariants` (y: 20→0) animate the columns and bottom bar respectively using `useInView` hook. CSS uses `.ftr-` prefix classes.

As a frontend developer, implement the DiseaseGuideSearch section for the Disease Guide page. This section includes a Three.js Canvas with 60 individual ParticleDot mesh components using sphereGeometry, each animated via useFrame with sine/cosine positional drift. The main search bar uses controlled state (searchQuery) with a live-updating AnimatedCount component that uses AnimatePresence mode='wait' and spring transitions to animate the result count number between values. Three filter groups (Crop Type, Severity, Season) are rendered as pill-button toggles with active state. A computeCount function derives the filtered result count from the active filter combination. A RotateCcw reset button clears all filters. Lucide icons: Search, X, RotateCcw. Responsive: filter groups wrap on mobile, search bar is full-width.

As a frontend developer, implement the DiseaseGuideCategories section for the Disease Guide page. This section renders a horizontally scrollable tab bar with 6 category tabs: All Diseases, Fungal, Bacterial, Viral, Nutritional Deficiency, Pest Damage. Active tab state is managed with useState(activeKey). A layoutId='dgcat-indicator' Framer Motion div provides a shared animated underline that slides between tabs via spring transition (stiffness 420, damping 32). A useCallback checkOverflow function detects horizontal overflow via scrollWidth vs clientWidth and conditionally applies a fade-mask CSS class. On tab click, the container scrolls to center the active tab using scrollTo with smooth behavior. tabRefs stores refs per tab key for offset calculations. ARIA roles: tablist and tab with aria-selected. Responsive: tabs overflow scroll on mobile with fade edge indicators.

As a frontend developer, implement the DiseaseGuideSymptomChecker section for the Disease Guide page. This section features a 3D MoleculeHelix rendered in a Three.js Canvas via @react-three/fiber, with 8 sphere meshes in a helix arrangement using colors from the design palette (#2A3D45, #4F6B73, #F2B134, #D95F5F), connected by cylinderGeometry rods. The group rotates continuously via useFrame. The main UI is a multi-step symptom selector: 14 symptom chips (yellow-leaves, brown-spots, wilting, powdery-coating, deformation, lesions, stunted-growth, leaf-curl, rust-pustules, root-rot, blight, mosaic-patterns, fruit-rot, stem-canker) rendered as toggleable buttons with emoji icons. A useMemo-derived DISEASES array matches selected symptom IDs to disease entries. AnimatePresence shows matched disease result cards with severity badges (mild/moderate/severe), scientific name, description, and treatment. State: selectedSymptoms (Set), resultsVisible. Responsive: symptom chips wrap in flexible grid, results stack below on mobile.

As a frontend developer, implement the DiseaseGuidePrevention section for the Disease Guide page. This section uses a Three.js Canvas with a custom PreventionGeometry component featuring a central IcosahedronGeometry (radius 0.8, detail 1) with orbiting particle meshes animated via useFrame. The UI layout is a two-panel design: a left sidebar with 4 practice items (Crop Rotation, Sanitation, Resistant Varieties, Irrigation Management) rendered as clickable list items with Lucide icons (RefreshCw, Shield, Sprout, Droplets) and colored accent dots using var(--secondary). Clicking a practice item updates activeIndex state to show the corresponding descCard on the right panel. Each descCard shows step label, title, body text, a Lightbulb tip callout, and a colored accent border matching the practice (var(--secondary), var(--accent), var(--primary_light), var(--highlight)). ArrowRight icon indicates active selection. Framer Motion animates card transitions. Responsive: two-panel collapses to stacked accordion on mobile.

As a frontend developer, implement the DiseaseGuideResources section for the Disease Guide page. This section renders 4 resource cards (Video Tutorials, Expert Articles, Treatment Database, Community Q&A) from a resources array with Lucide icons (Play, BookOpen, Database, MessageSquare). Each ResourceCard uses useMotionValue and useSpring (stiffness 140, damping 18) for springy 3D tilt on mouse move via rotateX/rotateY motion values applied to the card wrapper style. A handleMouseMove function calculates tilt angle from cursor position relative to card center with maxTilt=7 degrees. CSS custom properties --mx and --my track cursor position for a radial glow effect via setGlowPos state. On mouse leave, spring values reset to 0. Cards use staggered containerVariants (staggerChildren 0.12) with cardVariants (opacity 0→1, y 36→0). useInView triggers animation when section scrolls into view. Each icon wrap has a unique CSS class (video, articles, database, community) for gradient color differentiation. ArrowRight icon on CTA link. Responsive: 2-column grid on tablet, 4-column on desktop, 1-column on mobile.

As a frontend developer, implement the HomeGardenModeSelector section for the Home Garden page. This section renders three garden mode cards (terrace, home, balcony) from the MODES array, each with a React Three Fiber Canvas containing unique 3D icons — RooftopIcon (cylinderGeometry platform, torus railing, sphereGeometry plants), PottedPlantIcon, and a balcony icon — all using Float from @react-three/drei with rotationIntensity and floatIntensity props. AnimatePresence and useInView from framer-motion drive card reveal animations. useState tracks the selected mode. Each card displays title, desc, and plantCount. Suspense wraps each Canvas for async loading. Sprout, Flower2, Sun icons from lucide-react are used as fallback UI.

As a frontend developer, implement the HomeGardenPlantGrid section for the Home Garden page. This section renders a grid of plant cards driven by a PLANT_ICONS map containing custom inline SVG illustrations for tomato, basil, mint, chili, coriander, and additional plant types using CSS variable-driven colors (var(--secondary), var(--text_muted)). Each card displays plant metadata — CalendarDays (next watering), Droplets (moisture), and a status indicator using CheckCircle2 or Sprout icons from lucide-react. Interactive actions include Eye (view detail), Plus (add plant), and Trash2 (delete) buttons. useState manages plant list state and useCallback optimizes handlers. useInView from framer-motion triggers staggered card entrance animations. A floating Plus button allows adding new plants.

As a frontend developer, implement the HomeGardenGrowthTracker section for the Home Garden page. This is the most complex section: it features a React Three Fiber Canvas with OrbitControls, Float, Sphere, Cylinder, and MeshDistortMaterial from @react-three/drei rendering a 3D Cherry Tomato plant model. Static data includes SELECTED_PLANT (name, variety, age 56 days, totalCycle 85 days), GROWTH_METRICS array (height 48cm, leaf count 28, yield 72% with Ruler/Leaf/TrendingUp icons and trend badges), ENV_DATA array (sunlight, moisture, pH, temperature with Sun/Droplets/Sprout/Thermometer icons), CAROUSEL_SNAPS (4 growth stage snapshots with day labels and stage text), and MILESTONES (6 timeline entries with completed/upcoming status using CheckCircle2/Clock3 icons). A STAGES progress bar tracks Germination → Seedling → Vegetative → Flowering → Fruiting stages. useState and useMemo manage carousel index and derived data. ChevronLeft/ChevronRight buttons navigate the photo carousel with AnimatePresence transitions.

As a frontend developer, implement the HomeGardenReminders section for the Home Garden page. This section renders a 3D animated BellMesh using @react-three/fiber's useFrame hook — the bell group rotates continuously (rotation.y += delta * 0.4) with sinusoidal x-tilt. The bell is composed of cylinderGeometry (body), sphereGeometry dome cap, a golden clapper sphere with emissive material, and a torus ring at the base. INITIAL_REMINDERS array contains 5 reminder objects (water, fertilizer, pest, harvest types) for plants including Tomato, Spinach, Chili, Coriander, Mint — each with id, type, plant, action, date, time, done, and snoozedUntil fields. SNOOZE_OPTIONS popover offers 30min/1h/3h/Tomorrow durations. useState manages reminder done-state toggles, snooze state, and active popover. useEffect and useCallback handle snooze expiry logic. Framer Motion animates reminder card entrance.

As a frontend developer, implement the HomeGardenResourcesPanel section for the Home Garden page. This section renders 6 resource cards from the resources array — typed as guide, video, or tip — each with BookOpen, Video, or Lightbulb icons from lucide-react, a tag badge, title, desc, and an ArrowRight link to internal pages (/Learning Center, /Disease Guide, /Crop Planner, /Soil Health). A React Three Fiber Canvas renders a decorative ParticleField with 45 random points using bufferGeometry/bufferAttribute and pointsMaterial (color #2A3D45, opacity 0.25). Card entrance uses cardVariants with staggered delay (i * 0.08) and headerVariants for the section header. useInView from framer-motion triggers animations on scroll. useMemo memoizes particle positions. useRef and useCallback are imported for potential scroll handlers.

As a frontend developer, implement the HomeGardenGetStarted section for the Home Garden page. This CTA section features a React Three Fiber Canvas with a ParticleOrbit 3D component — 36 orbiting sphere particles generated via useMemo, each with randomized angle, radius (0.65–0.9), y position, size (0.02–0.06), and alternating colors (#F2B134, #D95F5F, #4F6B73) with emissive glow. A thin torus ring (torusGeometry args [0.78, 0.01]) anchors the orbit visually. useFrame rotates the group (rotation.y += delta * 0.3, rotation.x += delta * 0.08). The content area uses three Framer Motion variants — fadeUp (opacity/y), fadeUpBtn (opacity/y/scale with 0.2s delay), and scaleIn (scale from 0.7) — triggered by useInView with once: true and -80px margin. A Plus icon from lucide-react is present in the primary CTA button. Decorative hgs-accent-bar, hgs-deco-dot-1, and hgs-deco-dot-2 divs add ambient background effects.

As a Tech Lead, verify end-to-end integration between SoilHealthNutrientPanel, SoilHealthpHAndMoisture, SoilHealthFertilizerGuidance, and SoilHealthTrends frontend sections and the Soil Health Data API. Ensure nutrient data is fetched from Supabase based on the authenticated user's soil_type from their profile, pH and moisture values are correctly rendered in the gauge components, fertilizer recommendations are populated from the API response, and trend chart data is fetched for the selected time range.

As a Tech Lead, verify end-to-end integration between the DashboardFarmScore frontend section and the Farm Score Calculation API. Ensure the score is fetched from the Supabase RPC using the authenticated user's data, the SVG animated ring renders the correct score value from the API response, sub-metrics (Soil Health, Crop Rotation Compliance, Disease Prevention) are populated from the API, and the getInterpretation() label reflects the live score correctly.

As a Tech Lead, verify end-to-end integration between Dashboard frontend sections and the User Profile API. Ensure the Dashboard fetches and displays personalized content based on user_type, soil_type, preferred_language, and village from the Supabase user profile, the language switcher in Navbar correctly updates the profile via the API and switches UI language immediately, and the DashboardStats section reflects user-specific farm data. Verify all personalization flows work correctly after login session hydration.

As a Tech Lead, verify end-to-end integration between the DashboardCropRotation frontend section (task 69fedd92) and the Crop History API (tmp_crop_history_api). Confirm: (1) DashboardCropRotation fetches crop_history rows for the authenticated user on mount using `get_crop_history` RPC; (2) crops are rendered with correct type flags (past vs. next/recommended); (3) Supabase Realtime subscription (task 94b7918d) correctly reflects new entries when a crop plan is saved via Crop Planner; (4) accordion expand/collapse animations work with live data; (5) empty state is shown when no history exists for a new user.

As a Tech Lead, verify end-to-end integration between the DashboardStats frontend section (task 2e6e1278) and the User Profile API (d9cde3a8) and Farm Score API (cb5fb3ba). Confirm: (1) Farm Score stat card renders the live score from `calculate_farm_score` RPC; (2) Soil pH stat pulls from soil_health data keyed to user's soil_type from profile; (3) 'Last Watering' stat reflects the most recent done reminder from plant_reminders table; (4) 'Disease Risk' stat is derived from the disease_reference dataset based on current season; (5) all four stat cards show skeleton loaders during initial fetch; (6) sparkline bar data is generated client-side from fetched values.

As a Tech Lead, verify end-to-end integration of learning resource view tracking in the Learning Center. This extends the existing dd37bfaa integration task with additional verification: (1) `track-resource-view` Edge Function is called when a resource card is clicked or expanded in LearningCenterHero; (2) view_count increments atomically in the `learning_resources` table; (3) LearningCenterSeasonalTips section tracks tip impressions separately; (4) language switcher in Navbar correctly triggers a re-fetch of resources via `get_learning_resources` with the new locale parameter; (5) Supabase RLS correctly allows authenticated users to increment view_count but not modify other fields. Note: Verify no overlap with dd37bfaa which covers the base content fetch — this task focuses on the tracking and language-switch re-fetch flows.

As a Tech Lead, verify end-to-end integration of the language switcher Navbar component across all pages (Landing, Login, Signup, Dashboard, Crop Planner, Soil Health, Disease Guide, Home Garden, Learning Center). Confirm: (1) the shared Navbar component correctly reads activeLang from useLanguage() global state rather than local useState on pages where user is authenticated; (2) on language switch, `update_user_language` RPC (task 6ffb4f3a) is called for authenticated users; (3) unauthenticated users have language stored in localStorage only; (4) all pages re-render translated labels without page reload after language switch; (5) the activeLang state is synchronized across all Navbar instances (no stale state on page navigation). This task extends c85391e1 which covers the i18n framework wiring — this task focuses on Navbar multi-page synchronization specifically.

As a frontend developer, implement the CropPlannerCTA section for the Crop Planner page. This section includes: a Three.js `CtaParticles` component (48 particles, `PARTICLE_COUNT`, color `#FFDD57`, `AdditiveBlending`, opacity 0.6) with pre-computed `Float32Array` positions and `useMemo`-based RAF animation loop for rotation; a toast notification system with `toast` state, `TOAST_DURATION` (4500ms), `toastTimerRef` for cleanup, and `AnimatePresence`-driven toast display; a 'Save Plan' button (`handleSave`) triggering the toast with 'Plan saved! Start tracking your growth journey.'; an 'Export PDF' button (`handleExport`) opening a modal (`modalOpen` state, `handleCloseModal`); three supporting icon buttons using `Bookmark`, `FileText`, `CheckCircle` from lucide-react with labels 'PDF Export', 'Save Plan', 'Track Growth'; and a `X` icon for modal close. CSS uses `.cta-` prefix, `.cta-canvas-wrap` for Three.js layer.

As a frontend developer, implement the DiseaseGuideGrid section for the Disease Guide page. This section renders a grid of disease cards from a DISEASES array containing realistic Indian agriculture diseases: Late Blight, Powdery Mildew, Leaf Rust, Bacterial Wilt, and others. Each card displays icon (emoji), name, affected crops, severity badge, and a short description. Cards use Three.js (imported as * from 'three') for a per-card 3D hover glow effect using WebGLRenderer on a canvas overlay. AnimatePresence wraps the card grid for enter/exit transitions. Cards expand on click to reveal a detailed drawer with symptoms, treatment, and prevention fields from the disease data object. Severity levels map to color-coded badges (high=red/secondary, medium=amber/accent). Framer Motion card variants use opacity, y, and scale. Responsive: 1 column mobile, 2 columns tablet, 3 columns desktop grid.

As a Tech Lead, verify end-to-end integration between the CropPlannerForm frontend section and the Crop Planner Recommendations API. Ensure form submission correctly calls the Supabase RPC with previous_crop, soil_type, and season inputs, the recommendation response is displayed in the UI (crop name, fertilizer, water requirements, sustainability insights), results are saved to crop_history table for the authenticated user, and error states are handled in the UI when no recommendation is found.

As a Tech Lead, verify end-to-end integration between HomeGardenPlantGrid, HomeGardenGrowthTracker, and HomeGardenReminders frontend sections and the Garden Tracker CRUD API. Ensure plant list is fetched from garden_tracker table for the authenticated user, adding/deleting plants correctly persists to Supabase, growth_status updates are saved, reminder data is stored and retrieved correctly, and watering schedule data flows from the API into the reminder UI components.

As a Tech Lead, verify end-to-end integration between the HomeGardenReminders frontend section (task 25a9e57c) and the Watering Reminder Notifications API (task tmp_watering_reminder_notifications_api). Confirm: (1) reminder list is fetched from `plant_reminders` table for authenticated user on mount; (2) done-state toggles call `update_reminder` with `is_done=true`; (3) snooze options (30min/1h/3h/Tomorrow) call `update_reminder` with correct `snoozed_until` timestamp; (4) new reminders created via the HomeGardenPlantGrid 'Add Plant' flow are persisted; (5) Supabase Realtime subscription (task tmp_supabase_realtime_subscriptions) reflects reminder state changes without page refresh.

As a Tech Lead, verify end-to-end integration between DiseaseGuideSymptomChecker and DiseaseGuideGrid frontend sections and the Disease Guide Data API. Ensure symptom selection correctly queries the Supabase disease dataset, matched diseases are displayed with correct severity badges and treatment info, user disease report queries are saved to disease_reports table, and search/filter in DiseaseGuideSearch correctly filters the disease dataset from the backend.

As a Tech Lead, verify complete end-to-end integration across all Home Garden sections. This extends the existing b76a2a09 integration task with additional verification: (1) HomeGardenHero mode selection (terrace/home/apartment) persists selected mode to user profile via User Profile API (d9cde3a8) and filters the plant grid accordingly; (2) HomeGardenModeSelector 3D mode cards correctly reflect user's stored garden type from profile on load; (3) HomeGardenResourcesPanel links (/Learning Center, /Disease Guide, /Crop Planner, /Soil Health) are correctly routed via React Router protected routes (ab532a76); (4) HomeGardenGetStarted CTA navigates authenticated users to plant creation flow and unauthenticated users to /Signup. Note: This task complements b76a2a09 which covers CRUD and reminder integration — do not duplicate those verifications.

it should to every task

As a Tech Lead, verify end-to-end integration of the disease report submission flow in the Disease Guide. This extends the existing 34fccb1c integration task: (1) DiseaseGuideSymptomChecker 'Report Sighting' action (when user identifies a disease) correctly saves to `disease_reports` table with user_id, crop_name, matched symptom tags, disease_name; (2) EmailJS hook (task 39afc860) sends admin notification via `sendEmail` on disease report submit; (3) DiseaseGuideSearch filter correctly queries Supabase with severity, crop type, and season parameters from the API (844f6d82); (4) disease detail drawer in DiseaseGuideGrid shows treatment and prevention fields populated from `disease_reference` seed data. Note: Does not duplicate base symptom-matching or grid rendering integration already covered by 34fccb1c.