cool-system

As a frontend developer, implement the RecommendationsHero section for the Recommendations page. Uses @react-three/fiber Canvas with useFrame animation loop, @react-three/drei Float/Environment/Html components, framer-motion motion/useInView/AnimatePresence, lucide-react icons (Cpu, Zap, Monitor, HardDrive), and THREE.js primitives. Renders a 3D island scene via `IslandBase` component built from THREE.MeshStandardMaterial primitives: a cylindrical island platform (cylinderGeometry args [3.2,2.6,0.5,32]), tapered underside, a glowing torus rim ring with emissiveIntensity 0.9 (#FFD700/#FFA500), and accent path spokes at 60° intervals. Four `islandBuildings` (Filters, Compare, Details, Your Pick) are positioned in 3D space with unique color/emissive values and targetAnchor IDs (#rf-root, #rcmp-root, #rd-root, #rcta-root) for scroll-to navigation. `specHighlights` array drives 4 UI cards (Processor, Performance, Display, Storage). Apply RecommendationsHero.css (11050 chars).

As a frontend developer, implement the RecommendationsFilters section for the Recommendations page. Uses useState and useMemo for filter state management, framer-motion AnimatePresence/motion for animated transitions, and lucide-react icons (SlidersHorizontal, ChevronDown, X). Renders a `MorphingCount` badge component using AnimatePresence with initial/animate/exit variants (opacity, y: 8→0, scale 0.9→1) keyed by `total + '-' + activeCount`. Implements `FilterChip` pill buttons with `whileTap={{ scale: 0.94 }}` and `aria-pressed` toggling `rf-chip-active` class with an `rf-chip-active-dot` span. Implements `BudgetSlider` with MIN_BUDGET=400/MAX_BUDGET=8000, a percentage-computed `rf-slider-fill` div, 5 `budgetPresets`, and a `formatMoney` helper that returns '$8,000+' at 8000. Filter data arrays: 8 brands, 9 processors, 8 GPUs, 8 use cases. Apply RecommendationsFilters.css (10500 chars) with section id `rf-root`.

As a frontend developer, implement the RecommendationsComparison section for the Recommendations page. Uses useState, useRef, and useCallback, plus framer-motion AnimatePresence/motion and lucide-react icons (Cpu, Monitor, HardDrive, Weight, Zap, Plus, Check, ArrowRight, ChevronLeft, ChevronRight). Renders 3 products (MacBook Pro 16" M4 Max at $3,499, ASUS ROG Zephyrus G16 at $2,899, Dell XPS 17 9730 at $3,249) each with rank badge, vendor, price, pros/cons arrays, and a `specs` object. Three `specCategories` (Performance [CPU,GPU,RAM], Storage & Display [SSD,Display], Physical [Weight,Battery,Ports]) each with emoji icons. Three view modes keyed 'specs', 'procon', 'prices' toggled via tab UI. Supports carousel navigation via ChevronLeft/ChevronRight for mobile. Apply RecommendationsComparison.css (15437 chars) with section id `rcmp-root`.

As a frontend developer, implement the RecommendationsDetails section for the Recommendations page. Uses useState and useCallback with framer-motion AnimatePresence/motion for accordion and carousel animations, and a large lucide-react icon set (ChevronDown, Monitor, Keyboard, MonitorCheck, Cpu, Star, Shield, Clock, Headphones, Package, Check, Image, Zap, HardDrive, Camera, Palette, Wrench, Award, ThumbsUp, MessageSquare, AlertTriangle). Renders the 'Nebula Pro X1' product with AMD Ryzen 9 7945HX / RTX 4070 specs, an 8-row spec table, a 5-slide carousel (caption + icon + color per slide: aluminum unibody, RGB keyboard, OLED display, I/O ports, vapor chamber cooling) with navigation controls, and a features accordion with 6+ items (Factory-Calibrated OLED, Vapor Chamber Cooling, Thunderbolt 4 Docking, Per-Key RGB Keyboard, Wi-Fi 6E + 2.5G Ethernet, etc.). Apply RecommendationsDetails.css (15978 chars) with section id `rd-root`.

As a frontend developer, implement the RecommendationsCTA section for the Recommendations page. Uses useState, useRef, useMemo, and Suspense with @react-three/fiber Canvas/useFrame, @react-three/drei Float/Environment/MeshDistortMaterial, and framer-motion motion/AnimatePresence. Renders a `LaptopModel` 3D component inside a Float wrapper (speed=1.2, rotationIntensity=0.08, floatIntensity=0.3): base deck (boxGeometry [2.4,0.12,1.65]), keyboard deck chamfer, a 6×12 grid of individual key meshes (boxGeometry [0.1,0.015,0.1]) each positioned via `col * 0.13` offsets, a trackpad mesh, a screen/lid mesh (rotation [1.85,0,0]), screen bezel, and a screen display plane using MeshDistortMaterial (color #0f1923, emissive #0a1628). The group ref animates with `Math.sin(state.clock.elapsedTime * 0.25) * 0.15` Y-rotation and `Math.sin(elapsedTime * 0.4) * 0.12` Y-position. Apply RecommendationsCTA.css (11520 chars) with section id `rcta-root`.

As a frontend developer, implement the Footer section for the Recommendations page. This component may already exist from a previous page — reuse if available. Renders a static footer with `ftr-glow` decorative div, a brand block containing `ftr-mark` ('SA') and `ftr-brand-name` ('SpecAura') spans plus a tagline paragraph. Renders 5 social icon links using lucide-react (Twitter, Instagram, Youtube, Linkedin, Github at size=18, strokeWidth=1.75) inside `ftr-socials`. Renders a `ftr-links-grid` with 3 link columns: Platform (3 links), Personas (4 links: Students/Gamers/Creators/Professionals), Company (3 links). Dynamic `year` computed via `new Date().getFullYear()`. Apply Footer.css (4281 chars).

As a Backend Developer, implement the FastAPI endpoint(s) for generating personalized laptop/PC recommendations. This includes: POST /api/v1/recommendations accepting user persona (student/gamer/creator/professional), budget (INR), and requirements as input; integrating with LiteLLM for routing to GPT-5.4 to generate user-friendly recommendation responses; returning structured product recommendation data (name, specs, price, pros/cons, match score). Also implement GET /api/v1/recommendations/{session_id} for retrieving cached results. Validate input with Pydantic models. Note: Frontend tasks (RecommendationsFilters, RecommendationsHero, RecommendationsComparison, RecommendationsDetails, RecommendationsCTA) depend on this API for real data integration.

As a Frontend Developer, implement a shared API client layer for the SpecAura frontend to communicate with the FastAPI backend. Create an api/ directory with: a base axios/fetch client configured with base URL from env variables; a recommendationsApi module with submitRequirements(persona, budget, requirements) and getRecommendations(sessionId) methods; request/response TypeScript interfaces matching backend Pydantic schemas (UserSession, RecommendationResult, Product); error handling with user-friendly messages; loading state management hooks (useRecommendations). This client is needed by RecommendationsFilters, RecommendationsComparison, and RecommendationsDetails sections.

As a Backend Developer, implement FastAPI endpoints for the consultation booking feature. This includes: POST /api/v1/consultations accepting name, email, phone, persona (student/gamer/creator/professional), preferred_date, preferred_time, and notes; GET /api/v1/consultations/{booking_id} to retrieve booking details; PATCH /api/v1/consultations/{booking_id}/confirm for confirmation; Pydantic models for request/response validation; email notification stub (log to console for now, with hook for SMTP later); store bookings in DB with status (pending/confirmed/cancelled). Ensure all price/budget fields use INR. Frontend sections that will consume this API: any CTA or booking form sections on Home and Recommendations pages.

As a Backend Developer, implement FastAPI endpoints for the product catalog to support frontend comparison and detail sections. Includes: GET /api/v1/products?category=laptop|pc|workstation&persona=student|gamer|creator|professional&budget_min=&budget_max= (budget in INR); GET /api/v1/products/{product_id} for detailed product info; response schemas include name, vendor, specs (JSON), price_inr, category, persona_tags, pros, cons, match_score. Ensure all prices are returned in INR. Supports RecommendationsComparison and RecommendationsDetails frontend sections. Depends on DB models and migrations being in place.

As a Backend Developer, configure FastAPI middleware for the SpecAura API. This includes: CORS middleware configured for frontend origin(s) (dev: localhost:3000, prod: specaura.in); request logging middleware for structured JSON logs; global error handler middleware returning consistent error response schemas (code, message, details); rate limiting middleware (e.g., slowapi) to protect recommendation and consultation endpoints; request ID header injection for tracing. Ensure middleware is ordered correctly in the FastAPI app startup.

As a Frontend Developer, create shared INR currency formatting utilities for the SpecAura frontend. This includes: a formatINR(amount) helper that formats numbers as Indian Rupees (e.g., ₹1,25,000) using Indian numbering system (lakhs/crores); a parseBudgetINR(value) helper for converting slider/input values to INR amounts; budget preset constants aligned with Indian price brackets (e.g., ₹30,000 / ₹50,000 / ₹75,000 / ₹1,00,000 / ₹1,50,000+) replacing the existing dollar presets; update BudgetSlider MIN_BUDGET and MAX_BUDGET to INR equivalents; a displayPrice component for consistent price rendering across RecommendationsComparison and RecommendationsDetails. Note: All existing dollar/USD references in frontend components must be replaced with INR. Ensures SRD requirement that India/INR is the default currency.

As an AI Engineer, integrate LiteLLM for LLM routing to GPT-5.4 to power personalized technology recommendations. Implement a RecommendationService class that: constructs persona-specific system prompts (student/gamer/creator/professional), formats user budget (INR) and requirements into LLM-friendly context, calls LiteLLM with GPT-5.4 model routing, parses structured JSON responses into ProductRecommendation schemas, implements retry logic and fallback handling, and caches results by session_id. Configure LiteLLM with API keys via environment variables. Ensure responses are user-friendly and avoid technical jargon per SRD.

As a Tech Lead, verify the end-to-end integration between the Consultation Booking frontend form (tmp_consultation_booking_frontend) and the backend Consultation API (tmp_consultation_api). Ensure: form data (name, email, phone, persona, date/time, notes) flows correctly to POST /api/v1/consultations; booking confirmation ID is returned and displayed; INR budget fields are handled correctly throughout; loading and error states are gracefully handled; the booking modal/form is correctly triggered from CTA buttons on both Home and Recommendations pages; email notification stub is triggered. Dependency note: This integration task depends on both the frontend booking form and backend consultation API tasks.

As a Tech Lead, verify the end-to-end integration between the Products Catalog backend API (tmp_products_api) and the frontend RecommendationsComparison (7fff94eb) and RecommendationsDetails (cba9ddd5) sections via the shared API client (1db97d4c). Ensure: product data from GET /api/v1/products is correctly rendered in the comparison table and detail accordion; all prices display in INR using the currency utilities (tmp_inr_currency_util); persona and budget filter parameters from RecommendationsFilters (0f4725a2) correctly query the products API; loading and error states are handled gracefully in both sections.

As a Tech Lead, verify the end-to-end integration between the Recommendations page frontend sections and the backend Recommendations API. Ensure: user budget/persona/requirements from RecommendationsFilters flow correctly to POST /api/v1/recommendations; AI-generated product data from LiteLLM/GPT-5.4 populates RecommendationsComparison and RecommendationsDetails sections; filter state updates trigger API re-fetches and UI updates; loading and error states are handled gracefully across all sections; RecommendationsHero 3D island navigation correctly scrolls to section anchors; CTA in RecommendationsCTA links correctly. Note: depends on backend API (tmp_backend_recommendations_api), AI integration (tmp_ai_llm_integration), and frontend API client (tmp_frontend_api_client). Frontend section task IDs: 0f4725a2, 1884ead2, 7fff94eb, c4d049ad, cba9ddd5.