super-banana

As a frontend developer, implement the LandingHero section for the Landing page. This is a 3D React Three Fiber scene with multiple sub-components. ScrollLightingRig uses useFrame to read a CSS custom property (--scroll) and lerp between sunrise (#FFB84D), noon (#FFE5B4), and sunset (#FF6347) colors for ambientLight and directionalLight refs, animating light angle with trigonometry. MouseTiltCamera uses useThree to access the camera, listens to pointermove events, and applies smooth lerp-based camera tilt (target.current.x/y updated each frame). BananaTreeTrunk uses CylinderGeometry with useMemo for a seeded random sway animation via useFrame (rotation.z oscillation). The scene is wrapped in a Canvas from @react-three/fiber with Float from @react-three/drei. Also uses Framer Motion for overlay text animations. Import from LandingHero.css.

As a frontend developer, implement the BananaGrove section for the Landing page. This section features a React Three Fiber 3D Canvas scene with Html and Float from @react-three/drei and an Environment component. The CATEGORIES array (5 items: classic, spicy, organic, honey, cocoa) drives both 3D banana bunch meshes and an HTML overlay panel. A custom useForceSimulation hook uses d3-force (forceSimulation, forceCenter, forceManyBody, forceCollide, forceX, forceY) to compute physics-based positions for category nodes, updating React state on each simulation tick with alphaDecay 0.008 and velocityDecay 0.4. Nodes are initialized in a circular arrangement and settle into a force-balanced layout. AnimatePresence from framer-motion controls entry/exit of the detail panel when a category is selected (activeTier state). Import from BananaGrove.css.

As a frontend developer, implement the FeaturedProducts section for the Landing page. PRODUCTS array contains 4 items (classic, masala, honey, pepper) with price, originalPrice, rating, reviews, tag, and emoji fields. The ProductCard component uses useState for addedToCart and ripples state, useRef for cardRef/cardInnerRef/magneticTweenRef, useInView (margin: -80px, once: true) for scroll-triggered entrance, and IntersectionObserver to compute a liftFactor for scroll-linked lift intensity. Includes a RippleBurst component using Framer Motion (scale 0→6, opacity 1→0 over 0.5s) triggered on cart button click. A StarIcon SVG component renders filled/empty stars. The add-to-cart button shows a Check icon (addedToCart state) with a green confirmation state. GSAP is used for magnetic hover tween (magneticTweenRef) on the card. Uses useCallback for optimized handlers. Import from FeaturedProducts.css.

As a frontend developer, implement the PromotionsBanner section for the Landing page. Features a live countdown timer to SALE_END (2026-06-15T23:59:59) using getTimeLeft() which computes days/hours/minutes/seconds from Date diff. The FlipDigit component uses useState for current/prev/flipping state and a useEffect that detects value changes, triggers a flip animation (setFlipping true, timeout 450ms), and renders AnimatePresence with Framer Motion rotateX (-90→0 animate, exit 90) transitions per digit. A GlitchCTA component uses useState for hovering/clicked/ripples, useRef for rippleId counter, and useCallback for handleClick which adds ripple IDs to array (cleaned up after 600ms timeout). The CTA animates with glitch-style x offset array [0,-2,3,-1,2,0] on hover and scale pulse on click. Icons from lucide-react: ShoppingBag, Flame, Clock, Zap. Import from PromotionsBanner.css.

As a frontend developer, implement the LoyaltyShowcase section for the Landing page. TIERS array (Bronze/Silver/Gold) each with cssClass, icon (Award/Star/Crown from lucide-react), pointsReq, desc, and 3 perks with icons. BENEFITS array (3 items) and REWARDS array (6 items with threshold values) drive supplemental UI. AnimatedCounter component uses useSpring (stiffness:200, damping:30) and useTransform from framer-motion to animate a numeric display, subscribing to rounded.on('change') in a useEffect. Main LoyaltyShowcase component uses useState for purchaseAmount (slider, default 500) and activeTier (hover state), useRef for rootRef, useInView (margin: -100px, once: true). Tier cards (ls-tier-card--bronze/silver/gold CSS classes) render perks with Lock/Check icons based on tier progression. A points calculator uses purchaseAmount slider to compute and display earned points. Imports from both BenefitCard.css and LoyaltyShowcase.css.

As a frontend developer, implement the CustomerTestimonials section for the Landing page. TESTIMONIALS array contains 6 customer objects (Priya Sharma, Rahul Menon, Ananya Reddy, Vikram Patel, Deepa Nair, Arjun Iyer) each with initials, detail, rating (4-5), text, and tags array. useCardsPerView custom hook uses useState and a resize listener to return 1/2/3 cards based on breakpoints (768px, 1024px). StarRating component renders 5 SVG stars using STAR_PATH constant with Framer Motion path animation for filled stars triggered by inView. Carousel uses AnimatePresence with ChevronLeft/ChevronRight navigation buttons and MessageCircle icon, supporting drag-to-swipe and auto-advance. Active slide state tracks current index, clamped to available pages based on cardsPerView. useInView triggers entrance animations. Import from CustomerTestimonials.css.

As a frontend developer, implement the HowItWorks section for the Landing page. STEPS array (4 items: Browse Products, Add to Cart, Secure Checkout, Track Your Order) each with number (01-04), title, description, and iconId. Four custom SVG icon components (BrowseIcon, CartIcon, CheckoutIcon, TrackIcon) each with animatable refs (pathRef, circleRef, cartRef, item1Ref, item2Ref, etc.) triggered by an animate prop. Each icon uses GSAP in useEffect: BrowseIcon animates strokeDashoffset (200→0, 1s power2.out) and circle scale (0→1 with back.out(2) ease); CartIcon animates cart path strokeDashoffset then bounces two item refs (y: -12→0 with bounce.out, staggered 0.5s/0.7s delay). Steps are rendered in a horizontal/vertical timeline layout with useInView to trigger icon animations when steps scroll into view. Import from HowItWorks.css.

As a frontend developer, implement the LandingCTA section for the Landing page. ConfettiBurst component uses useState for particles array, initializing 24 particles in useEffect each with computed angle, velocity (120-300), random color from CONFETTI_COLORS (#FFB84D, #FF4D4D, #4D4DFF, #FFD700, #FFE5B4, #FF6B6B), size (5-11px), and rotation. Each particle animates via Framer Motion (x/y from cos/sin * velocity, opacity 0, rotate, scale 0.3) over 0.8s easeOut. BananaLeafSVG renders a decorative SVG leaf with multiple stroke paths at varying opacities. Main LandingCTA uses useState for email, subscribed, and spotlightPos ({x:-300,y:-300}), useRef for container, useInView for scroll-triggered entrance, and useCallback for mouse-move spotlight effect. Email subscription form toggles to a success state (subscribed=true) and triggers ConfettiBurst at the button's bounding rect origin on submit. AnimatePresence wraps the form/success state transition. Import from LandingCTA.css.

As a frontend developer, implement the Footer section for the Landing page. linkColumns array defines 4 columns (Products, Company, Support, Legal) each with title and links array pointing to internal routes. socialIcons array maps Facebook/Twitter/Instagram/Youtube Lucide icons. Footer uses useState for email and subscribed, useRef for formRef and rootRef, useInView (margin: -60px, once: true) for staggered entrance. handleSpotlight useCallback reads mouse position relative to formRef bounding rect and sets --ftr-mx/--ftr-my CSS custom properties for a spotlight effect. handleSubscribe prevents default, sets subscribed=true and clears email. columnVariant function returns staggered Framer Motion variants (alternating x: -16/16 based on index % 2, delay: index * 0.1). A parallax watermark div reads --scroll CSS custom property for translateY. The Send icon is used in the newsletter form submit. Note: this Footer component may already exist from a previous page — reuse if available. Import from Footer.css.

As a frontend developer, implement the ProductsHero section for the Products page. This section features a Three.js Canvas with a ParticleField component (40 floating golden particles using circleGeometry with '#FFB84D'/'#FFD700' hues, animated via useFrame with oscillating y/x positions and group-level rotation). The section also includes a LeafSVG component rendering decorative banana leaf shapes with opacity-layered SVG paths. The overlay contains framer-motion animated headline text with the Golden Crunch Co. products tagline, scroll-linked parallax transforms, and entry animations. Uses @react-three/fiber Canvas with dpr=[1,1.5], meshBasicMaterial with depthWrite=false for particles. Note: Navbar component already exists from Landing page.

As a frontend developer, implement the Navbar section for the Promotions page. This component (Navbar.css import) is shared across pages and may already exist from the Landing page task. It uses useState for dropdownOpen, mobileOpen, and a static cartCount=3, plus useRef for dropdownRef. Implements two useEffect hooks: one for click-outside detection to close the account dropdown, and one for body overflow locking during mobile menu open state. Renders nb-navbar with nav links (Products, Promotions, Loyalty, Order Tracking), ShoppingCart icon with badge, User account button with nb-dropdown (Login/Register links), and a mobile overlay with Menu/X lucide icons. Active 'Promotions' link should reflect current page state.

As a frontend developer, implement the Navbar section for the Loyalty page. This component (Navbar.jsx + Navbar.css) is shared across pages and may already exist from Promotions. It uses useState for scrolled, mobileOpen, and accountOpen states; useRef for dropdownRef; and useEffect hooks for scroll detection, outside-click dismissal, and body overflow locking on mobile. Renders NAV_LINKS array with Products, Promotions, Loyalty, OrderTracking hrefs. Includes ShoppingCart icon with a hardcoded cartCount badge (3), a User/ChevronDown account dropdown with LogIn/UserPlus/Package lucide icons, and a hamburger mobile menu. Active link highlighting for '/Loyalty' route should be verified.

As a Backend Developer, implement FastAPI endpoints for the product catalog: GET /api/products (paginated, filterable by category/price/rating), GET /api/products/{id}, GET /api/categories. Support query params for sorting (price, rating, name), filtering by flavor category, and pagination (page, page_size). Return INR prices. Needed by: ProductsGrid, ProductsFilterSidebar, ProductsControlBar, ProductsPagination, ProductDetailHero, ProductDetailMainContent, FeaturedProducts.

As a Backend Developer, implement FastAPI endpoints for product reviews: GET /api/products/{id}/reviews (paginated, sortable by date/rating), POST /api/products/{id}/reviews (authenticated, with rating and comment), POST /api/reviews/{id}/helpful (toggle helpful/unhelpful vote). Validate rating is 1-5. Needed by: ProductDetailReviews.

As a Backend Developer, implement FastAPI endpoints for the shopping cart using Redis for session-based cart storage: GET /api/cart, POST /api/cart/items (add item with productId and quantity), PATCH /api/cart/items/{productId} (update quantity), DELETE /api/cart/items/{productId} (remove item), DELETE /api/cart (clear cart). Return cart totals including subtotal, tax (5%), and shipping. Needed by: CartItemsList, CartSummary, CartActions.

As a Backend Developer, implement FastAPI endpoints for promotions: GET /api/promotions (list active promotions with time-limited deals, seasonal offers, bundles), POST /api/promotions/validate (validate promo code, return discount type and value), GET /api/promotions/{id}. Support discount types: percentage and fixed-amount. Enforce expiry date and active flag. Needed by: ActiveDeals, LimitedTimePromo, SeasonalOffers, BundleDeals, CheckoutPromoCode, CartSummary.

As a Backend Developer, implement FastAPI endpoints for the loyalty program: GET /api/loyalty/overview (current points balance, tier info, next tier progress), GET /api/loyalty/transactions (paginated history, filterable by earned/redeemed), GET /api/loyalty/rewards (available rewards catalog), POST /api/loyalty/redeem (redeem points for a reward), GET /api/loyalty/redemptions (customer's redemption history). Points system: 1 point per ₹10 spent. Tier thresholds: Bronze 0-999, Silver 1000-2999, Gold 3000+. Needed by: LoyaltyPointsOverview, LoyaltyTiers, LoyaltyRewards, LoyaltyPointsTracker, LoyaltyRedemption, LoyaltyPoints (OrderConfirmation).

As a Backend Developer, integrate a PCI DSS-compliant Indian payment gateway (Razorpay or PayU) into the FastAPI backend. Implement: order creation with gateway, payment verification via webhook/callback, signature validation, refund initiation endpoint, and support for UPI, credit/debit card, and net banking payment methods. Store payment gateway reference in Order. Comply with PCI DSS — never store raw card data. Support INR currency.

As a Backend Developer, implement FastAPI authentication endpoints for customer self-registration and login (separate from any existing admin auth): POST /api/auth/register (email, full_name, password with strength validation), POST /api/auth/login (returns JWT), POST /api/auth/logout, GET /api/customers/me (profile), PATCH /api/customers/me (update profile). Hash passwords with bcrypt. JWT claims include customer_id and role='customer'. This enables personalized cart, orders, reviews, and loyalty features.

As a Backend Developer, create seed scripts to populate the database with initial product catalog data: 16 banana chip SKUs (Classic Salted, Spicy Masala Crunch, Honey Glazed, Peri-Peri Fire Crunch, Dark Chocolate Drizzle, Salted Caramel, BBQ Banana Bites, Cinnamon Sugar Crunch, etc.), categories (Classic, Spicy, Sweet, Organic, Artisan), promotions (BANANA10, BANANA20, GOLDEN10, CRUNCH50, WELCOME15), and initial loyalty rewards catalog. Include pricing in INR, stock quantities, and FSSAI compliance data.

As a Frontend Developer, configure a centralized Axios (or fetch-based) API client for all backend communication. Set base URL from environment variable (REACT_APP_API_URL), attach JWT Authorization header from localStorage/context on every request, handle 401 responses by redirecting to login, and provide typed service modules for: productsService, cartService, ordersService, reviewsService, promotionsService, loyaltyService, and authService. This is a prerequisite for all frontend pages that need live data from the backend.

As a Frontend Developer, configure React Router v6 routes for all e-commerce pages in AppRoutes.jsx: / (Landing), /products (Products), /products/:id (ProductDetail), /cart (Cart), /checkout (Checkout), /order-confirmation/:orderId (OrderConfirmation), /order-tracking/:orderId (OrderTracking), /promotions (Promotions), /loyalty (Loyalty). Apply PrivateRoute guard to cart, checkout, order-confirmation, order-tracking, and loyalty routes. Set up 404 fallback page.

As a Backend Developer, implement FastAPI authentication endpoints for admin login: POST /api/admin/auth/login (accepts email+password, returns JWT with role='admin' claim). Hash passwords with bcrypt. JWT middleware to verify role='admin' on all /api/admin/* routes, returning 403 Forbidden for non-admin tokens. Store admin credentials securely via environment variables. This is a prerequisite for all admin-protected endpoints.

As a frontend developer, implement the ProductsFilterSidebar section for the Products page. This section includes a BananaAccent component with a Three.js Canvas rendering a procedurally-generated TubeGeometry banana shape (using THREE.CatmullRomCurve3 with 5 control points), animated via requestAnimationFrame loop for continuous y-rotation and sinusoidal x-rotation, lit with ambientLight (#FFE5B4) and two directionalLights. The sidebar contains: FLAVOR_CATEGORIES filter list (6 items with counts), SORT_OPTIONS radio group (5 options), a price range slider with PRICE_MIN=0/PRICE_MAX=1000 state, and collapsible filter accordion sections using framer-motion AnimatePresence with ChevronDown/ChevronUp Lucide icons. Active filter state with Check icons and X dismiss buttons. Uses useState for expanded sections and selected filters.

As a frontend developer, implement the ProductsControlBar section for the Products page. This bar includes: a view switcher with 3 options (grid3 using Columns3 icon, grid2 using LayoutGrid, list using LayoutList) with animated sliding indicator whose left/width are computed as calc(activeViewIndex * 100% / 3), a sort dropdown (useState sortOpen) with AnimatePresence-animated dropdown menu showing 6 SORT_OPTIONS, outside-click dismissal via useRef+useEffect document mousedown listener, and an active filters chip row with framer-motion AnimatePresence popLayout for chip enter/exit animations (opacity/scale/width transitions). Each chip has an X remove button calling removeFilter(key). A clearAllFilters button appears when activeFilters.length > 0. INITIAL_FILTERS contains 3 preset chips: Classic Banana Chips, 200g Pack, 4★ & Up.

As a frontend developer, implement the PromotionsHero section for the Promotions page. Uses @react-three/fiber Canvas with a FloatingParticles component: 40 particles generated via useMemo, each with random position, scale (0.04–0.18), speed (0.15–0.55), phase, and hue (#FFB84D or #FFD700). useFrame animates each mesh's y/x position via sin/cos and pulses material opacity (0.13–0.37). Includes a BananaLeafSVG decorative component with layered SVG paths and varying opacities. Content uses framer-motion animation variants (fadeUp, stagger) with ArrowRight and Sparkles lucide icons. The hero renders a promotional headline, subtext, and CTA button over the 3D particle canvas backdrop.

As a frontend developer, implement the ActiveDeals section for the Promotions page. Contains a static dealData array of 6 deals (CRUNCH20, SPICY15, SAVE30, JUMBO25, HONEY10, NEWFAN40) with fields: id, code, discount, title, desc, image emoji, endTime (computed from Date.now()+offsets), and stock level ('high'/'low'). A getTimeLeft() utility computes days/hours/mins/secs remaining. Component uses useState for timers object and useEffect with setInterval (1000ms) to tick all 6 timers simultaneously. Cards animate in via framer-motion cardVariants with staggered delay (i*0.1). Each deal card shows countdown timer digits, discount badge, promo code, stock indicator, and a CTA button. Low-stock deals render an urgency indicator.

As a frontend developer, implement the SeasonalOffers section for the Promotions page. Includes 6 seasonal offer cards (Summer Crunch, Festival Specials, Monsoon Munch, Harvest Gold, Winter Warmers, New Year Bash) with per-offer bannerColors, icon, price, originalPrice, discount%, and validUntil date range. Features a horizontal carousel with ChevronLeft/ChevronRight navigation buttons, useRef scroll control, and useCallback for scroll handlers. Integrates a Three.js canvas (imported as * from 'three') for a decorative 3D background element. Each card shows the seasonal theme, title, product description, discount badge, price, date range (Calendar icon), and an ArrowRight CTA. useState tracks active/selected card index. useEffect manages scroll position and resize observers.

As a frontend developer, implement the LimitedTimePromo section for the Promotions page. Features a 3D BananaOrb rendered via @react-three/fiber Canvas: an icosahedronGeometry (args=[1.6,2]) with flatShading meshStandardMaterial (color #FFB84D, emissive #FF8C00, emissiveIntensity 0.35). useFrame rotates it on Y axis at 0.25 rad/s, oscillates X via sin, Z via cos, and pulses scale (±0.04). Contains a useCountdown custom hook using setInterval(1000ms) to compute hours/minutes/seconds remaining from a targetTime. flashProducts array has 8 items with emoji, originalPrice, discountedPrice, discount%, stock, and maxStock for stock-bar rendering. Lucide icons: Flame, ShoppingCart, ArrowRight, Check, Clock, Zap. framer-motion animates product cards on scroll entry.

As a frontend developer, implement the BundleDeals section for the Promotions page. Includes a 3D FloatingShapes header element: 9 TorusGeometry (0.08, 0.03, 8, 16) shapes arranged in a circular orbit via useMemo angle/radius math, with alternating #FFB84D/#FFD700 colors. useFrame rotates groupRef.current.rotation.y by 0.002/frame and bobs each child on Y via sin. BundleCard component uses useState for showBreakdown (accordion) and tilt {rotateX, rotateY}; onMouseMove computes delta from card center via getBoundingClientRect and applies perspective(800px) rotateX/Y transform; onMouseLeave resets tilt with 0.45s ease-out transition. AnimatePresence wraps the breakdown accordion. ShoppingCart, ChevronDown, Tag lucide icons. Bundle cards display product list, bundle price, savings badge, and expandable item breakdown.

As a frontend developer, implement the LoyaltyRewards section for the Promotions page. Renders a 3D Coin3D component via @react-three/fiber using @react-three/drei Sphere, Torus, and MeshDistortMaterial: Torus (args=[1.6,0.13,16,64]) with metalness 0.65 and Sphere (args=[1.5,48,48]) with MeshDistortMaterial (distort=0.06); useFrame rotates on Y by 0.008*speed and oscillates X via sin. TIERS array defines 3 tiers (Starter, Gold, Platinum) each with id, label, tierCssClass, iconCssClass, icon (Star/Shield/Gem), points range, bonus multiplier, benefits[], and details[]. useState manages activeTier and expandedBenefits. AnimatePresence handles tier card transitions. Lucide icons: Star, Shield, Gem, Check, Sparkles, Gift, TrendingUp, HeartHandshake, ArrowRight, Zap, Award, Crown, CircleCheck. Tier cards highlight the Gold tier by default.

As a frontend developer, implement the PromoFAQ section for the Promotions page. Contains 6 FAQ items (how to apply promo code, expiration, combining offers, loyalty points with deals, sold-out stock behavior, international orders) stored as a static faqItems array with question and HTML-containing answer strings (using <code> and <strong> tags rendered via dangerouslySetInnerHTML or safe JSX). useState tracks openIndex for accordion behavior. framer-motion AnimatePresence with motion.div handles expand/collapse animation of each answer panel. ChevronDown icon rotates 180deg when expanded. ArrowRight used for a CTA link at section bottom. Each accordion item toggles via click on the question row.

As a frontend developer, implement the PromosCTA section for the Promotions page. Features a 3D ParticleRing via @react-three/fiber Canvas: 120 points in a ring of radius 3.2, positions computed via useMemo with random angular offsets and ±0.6 radial spread. Colors lerp between #FFB84D (gold), #FFE5B4 (cream), and #4D4DFF (blue) based on Math.random() thresholds. pointsMaterial uses THREE.AdditiveBlending, vertexColors, and sizeAttenuation. Main component uses useState for email string and submitted boolean. useRef on spotlightRef tracks mouse position; useCallback handleMouseMove computes x/y percentages from getBoundingClientRect for a CSS spotlight effect. AnimatePresence swaps the form with a CheckCircle success state on submission. Mail, Send, CheckCircle, ArrowRight, Gift lucide icons.

As a frontend developer, implement the Footer section for the Promotions page. This component (Footer.css import) is shared across pages and may already exist from the Landing page task (df5e6096-e317-463f-afe4-8f28c75f1dc4). Renders ftr-footer with a 4-column link grid (Products, Company, Support, Legal) each populated from linkColumns array. Brand column shows 🍌 logo, brand description, and social links (Instagram, Facebook, Twitter, Youtube via lucide-react) as ftr-social-link anchors. Newsletter subscription uses useState for email and subscribed boolean; handleSubscribe sets subscribed=true for 4000ms then resets via setTimeout. Send and CheckCircle icons toggle on submission. Includes ftr-divider, ftr-bg-decor, and ftr-bg-decor-left decorative elements.

As a frontend developer, implement the LoyaltyHero section (LoyaltyHero.jsx + LoyaltyHero.css). Uses @react-three/fiber Canvas with camera at [0,0,5] fov 50, rendering 14 procedurally generated BananaLeaf meshes (sphereGeometry args [0.7,8,4], color #E8C560, opacity 0.55) via FloatingLeaves component. Each leaf animates via useFrame with sinusoidal rotation.z, rotation.y, and position.y oscillations driven by individual speed and phase props. Framer-motion animates the lh-content div (opacity 0→1, y 30→0, duration 0.7) and lh-badge (delay 0.15). Includes two radial glow divs (lh-glow-left, lh-glow-right), Star/ArrowRight/Gift lucide icons in the badge and CTA button. Canvas uses dpr [1,1.5] and alpha:true gl config.

As a frontend developer, implement the LoyaltyPointsOverview section (LoyaltyPointsOverview.jsx + LoyaltyPointsOverview.css). Features a 3D tilt card using framer-motion useMotionValue, useSpring (stiffness 300, damping 30), and useTransform to map mouse position to rotateX/rotateY (±6 degrees) and CSS custom properties --lpo-glow-x/--lpo-glow-y. Hardcoded TIER_DATA (current: Silver, next: Gold, pointsHave: 2450, pointsForNextTier: 3000) drives a tier progress bar showing tierProgressPercent (82%) and remaining 550 points. Displays pointsBalance (2450), pointsEarnedThisMonth (340), redemptionValue (₹1225). Includes decorative SVG leaf path inside lpo-decor-leaf. Uses whileInView animation (opacity 0→1, y 30→0) with viewport once:true margin -40px. TrendingUp/Gift/ArrowRight/Star lucide icons used in stat columns.

As a frontend developer, implement the LoyaltyTiers section (LoyaltyTiers.jsx + LoyaltyTiers.css). Renders three tier cards from TIERS array (Bronze/Silver/Gold) with status variants: lt-card-status--current, lt-card-status--next, lt-card-status--locked. Gold tier badge contains a full Three.js scene (GoldMedallion) mounted via useRef/useEffect: PerspectiveCamera fov 40, WebGLRenderer alpha:true antialias:true, AmbientLight #ffd700, DirectionalLight #fff4b8 and #ffb84d, with a spinning/bobbing medallion mesh. Uses framer-motion for card entrance animations and useMotionValue/useSpring for per-card tilt interactions. Check/Star/Crown/Shield/ArrowRight/Sparkles lucide icons used. Tier benefits list rendered per TIERS[n].benefits array. Cleanup of Three.js renderer on unmount required.

As a frontend developer, implement the LoyaltyBenefits section (LoyaltyBenefits.jsx + LoyaltyBenefits.css). Renders a responsive comparison table from BENEFITS array (8 rows) × TIERS array (Bronze/Silver/Gold columns). renderCell() maps boolean true→Check icon (lob-check), false→Minus icon (lob-na), 'coming'→'Coming Soon' span, and string values to text spans. Table wrapper tracks mouse position via handleMouseMove callback and sets glowPos state ({x,y} 0-1) for CSS spotlight glow effect via inline --glow-x/--glow-y custom properties. useInView (rootRef, once:true, margin -60px) gates stagger animations: headerVariants (opacity/y) and rowVariants(i) with delay 0.15 + i*0.07. Tier badge classes: lob-th-badge--bronze/silver/gold.

As a frontend developer, implement the LoyaltyPointsTracker section (LoyaltyPointsTracker.jsx + LoyaltyPointsTracker.css). Renders paginated transaction history from TRANSACTIONS array (12 entries, ROWS_PER_PAGE=8) with filter tabs (all/earned/redeemed) driven by FILTERS array. Each transaction row shows type-specific icon (TrendingUp/ArrowUpRight/Gift/Zap from lucide), points delta (positive green/negative red), date, time, and description. Includes a Three.js ParticleAccent background: WebGLRenderer alpha scene with BufferGeometry points, mounted via useRef/useEffect with cleanup. AnimatePresence wraps row list for exit animations. Filter dropdown uses ChevronDown and useState. useInView gates section entrance. History/Filter lucide icons in section header.

As a frontend developer, implement the LoyaltyRewards section (LoyaltyRewards.jsx + LoyaltyRewards.css). Renders REWARDS array (9 items) across category filter tabs (discount/product/merch) with useMemo-filtered display. Each reward card shows emoji, icon component (Percent/Gift/ShoppingBag/Trophy from lucide), title, description, points cost, availability badge (high/medium/low), and special flag indicator. A @react-three/fiber Canvas scene renders inside selected/featured reward cards. AnimatePresence handles card filter transitions. Redeem modal uses useState for selectedReward; modal contains Star/X/Check lucide icons and confirm/cancel flow. Suspense wraps Canvas elements. useCallback for mouse interaction handlers on reward cards (hover tilt effect via framer-motion).

As a frontend developer, implement the LoyaltyRedemption section (LoyaltyRedemption.jsx + LoyaltyRedemption.css). Renders redemptions array (5 entries) showing status variants: delivered/intransit/available — each with distinct statusLabel and icon mapping. LoyaltyToken 3D scene uses @react-three/fiber Canvas + @react-three/drei OrbitControls; geometry is a torusGeometry (args [0.9,0.32,32,48]) with gold metalness:0.7 material and a cylinderGeometry (args [0.55,0.55,0.22,48]) core, lit by directional and point lights. Detail modal triggered by Eye icon (useState for selectedRedemption) shows trackingId, deliveryMethod, couponCode/voucherCode/expiryDate conditionally. AnimatePresence handles modal entrance. Package/Truck/Award/MapPin/Calendar/ExternalLink/Share2/X lucide icons used per status type.

As a frontend developer, implement the LoyaltyCTA section (LoyaltyCTA.jsx + LoyaltyCTA.css). Features a @react-three/fiber Canvas with a BananaBunch group component: 14 RoundedBox meshes (args [0.13,0.42,0.13] radius 0.04) procedurally positioned via useMemo with colors cycling #FFB84D/#FFD700/#FFE5B4, plus two Sphere meshes for stem (args [0.09,16,16] color #9B7B3C and [0.06,12,12] color #7A5C2E) from @react-three/drei. useFrame drives group.rotation.y += 0.003, sinusoidal rotation.x, and position.y bob. Parallax decorative 🍌 emoji divs (lcta-decor-tl/br/tr) use CSS var(--scroll) for translateY offset. useInView (contentRef, once:true, margin -60px) gates framer-motion entrance stagger for headline, subtext, and CTA buttons. Gift/Users/Star/Sparkles lucide icons in stat badges.

As a frontend developer, implement the Footer section (Footer.jsx + Footer.css). This shared component may already exist from Landing or Promotions pages. Renders four linkColumns (Products/Company/Support/Legal) each with 4 anchor links, and socialIcons array (Facebook/Twitter/Instagram/Youtube from lucide). Email newsletter form uses useState for email and subscribed; handleSubscribe prevents default, validates email.trim(), sets subscribed:true and clears input. handleSpotlight callback tracks mouse position on formRef and sets --ftr-mx/--ftr-my CSS custom properties for spotlight glow. columnVariant(index) framer-motion variant staggers columns with alternating x offsets (index%2===0 → -16 : 16) and delay index*0.1. ftr-watermark div has parallax translateY via CSS var(--scroll). useInView (rootRef, once:true, margin -60px) gates animations. Send lucide icon on newsletter submit button.

As a frontend developer, implement the ProductDetailHero section for the ProductDetail page. This section renders a full-viewport hero with a multi-image gallery (4 product images via productImages array) with ChevronLeft/ChevronRight navigation and thumbnail strip. Includes a DecorativeScene Canvas component using @react-three/fiber with Float, MeshDistortMaterial, and Sphere from @react-three/drei — renders 3 floating banana-chip ellipsoid meshes with MeshDistortMaterial (distort, speed, emissiveIntensity props) and ambient/directional lights. Displays productBadges (Bestseller with Star icon, Organic with Leaf icon) using AnimatePresence. Shows productData: category, name, rating (4.7 with Star icon), reviewCount (3842), price (₹149), originalPrice (₹199), savePercent (25%). Renders trust icons row: Truck, RotateCcw, Shield icons from lucide-react. Heart wishlist and ShoppingCart CTA buttons with framer-motion hover/tap animations. Imports ProductDetailHero.css. Uses useState for active image index, useRef for gallery, useCallback and useMemo for optimized handlers, useEffect for keyboard navigation. dpr={[1, 1.5]} on Canvas for performance.

As a frontend developer, implement the ProductDetailMainContent section for the ProductDetail page. This section renders a two-column grid layout (pd-mc-grid) with a left column containing a Three.js Canvas interactive 3D preview (BananaChipModel component using cylinderGeometry for chip shapes with Float animation, OrbitControls from @react-three/drei) and a right column with product configuration UI. Right column includes: VARIANTS array (Classic Salted, Spicy Masala, Honey Glazed, Peri Peri) with color swatches and activeVariant state; quantity stepper using Minus/Plus icons with handleQuantity clamped to 1-10; dynamic price calculation via useMemo (base 149 + variant extras [0,10,15,5]); Add to Cart button with AnimatePresence success state (Check icon) via added/setAdded with 2200ms timeout. INGREDIENTS list (8 items) and SPECIFICATIONS table (8 rows including FSSAI, Calories, Origin Kerala). Imports ProductDetailMainContent.css. Uses useState for activeVariant, quantity, added; useRef for canvasRef; useMemo for price.

As a frontend developer, implement the ProductDetailReviews section for the ProductDetail page. This section renders a full reviews system with 7 seeded REVIEWS (author, initials, rating, date, text, helpful/unhelpful counts). Includes a Three.js Canvas background using useFrame from @react-three/fiber and raw THREE.* geometry for an animated decorative element. Displays aggregate rating summary with star breakdown bars. SORT_OPTIONS dropdown (Most Recent, Highest Rated, Lowest Rated) with useMemo-sorted review list. Each review card shows: initials avatar, star rating row (Star icons), date, review text, ThumbsUp/ThumbsDown helpful voting with AnimatePresence count transitions. 'Load More' / ChevronDown pagination with useRef scroll anchor. Includes a write-review modal triggered by Edit3 icon: form with star selector, textarea, Send submit button, X close — toggled via AnimatePresence. ChevronRight breadcrumb. Imports ProductDetailReviews.css. Uses useState for sort, expanded list, modal open, vote states; useRef for scroll; useMemo for sorted/filtered reviews; useEffect for outside-click modal close.

As a frontend developer, implement the ProductDetailRelated section for the ProductDetail page. This section renders a horizontally scrollable grid of 6 related product cards (relatedProducts array: Spicy Masala, Honey Glazed, Salted Caramel, BBQ Banana Bites, Cinnamon Sugar Crunch, Classic Banana Chips) using RelatedProductCard sub-component. Each card uses motion.div with initial opacity/y animation, whileInView trigger (viewport once, margin -40px), and whileHover y:-4 lift. Card image is an inline SVG banana chip illustration (ellipse shadow, path fill #FFD700, circle highlight). Badge variants (popular/new) styled via pdr-badge--{badgeType} CSS classes. Quick-view overlay on hover using AnimatePresence with Eye icon from lucide-react — onQuickView prop triggers a modal. ArrowRight icon for CTA link. THREE.* imported for potential canvas use. X icon for modal close. Staggered entrance delay: index * 0.08s. Imports ProductDetailRelated.css. Uses useState for quickView product and modal open state; useRef for scroll container; useEffect for intersection observer or scroll sync.

As a Backend Developer, implement FastAPI endpoints for order management: POST /api/orders (create order from cart, apply promo code, deduct loyalty points, initiate payment), GET /api/orders/{id} (order summary with items), GET /api/orders/{id}/status (tracking status with timeline steps). Integrate with payment gateway service. On successful payment, award loyalty points (1 point per ₹10 spent) and update order status. Needed by: CheckoutCTA, OrderSummary, PaymentConfirmation, ItemsBreakdown, NextSteps, OrderConfirmationHero.

As a Frontend Developer, create a CartContext (CartContext.jsx) providing global cart state accessible across all pages: cartItems, cartCount, cartTotal, addToCart, removeFromCart, updateQuantity, clearCart, and applyPromoCode. Persist cart to localStorage and sync with backend cart API on auth state changes. Expose useCart hook. Wire cart count badge in the shared Navbar component. This enables consistent cart state across Landing, Products, ProductDetail, Cart, and Checkout pages.

As a Tech Lead, verify end-to-end integration between the customer auth frontend (Login, Register, RegSuccess pages) and the Customer Auth API. Ensure POST /api/auth/register and POST /api/auth/login return JWTs that are stored in AuthContext, PrivateRoute correctly gates protected pages (Cart, Checkout, OrderConfirmation, OrderTracking, Loyalty), logout clears token and redirects to Landing, and JWT expiry is handled gracefully.

As a Backend Developer, implement admin-only FastAPI endpoints for inventory management: GET /api/admin/products (all products regardless of is_active status), PATCH /api/admin/products/{id}/toggle-visibility (flip is_active boolean), GET /api/admin/products/{id} (full product detail). All routes protected by JWT middleware requiring role='admin'. Enforce is_active=true filter at DB query level for the public GET /api/products route so hidden products are never exposed to customers. Needed by: AdminInventoryDashboard frontend.

As a Frontend Developer, build a protected /admin/inventory route (AdminInventoryDashboard page) accessible only after admin JWT login. Renders a table/list of ALL products (including hidden) fetched from GET /api/admin/products. Each row shows product name, category, price, current visibility status, and a toggle switch to flip is_active. Implement optimistic UI: immediately update local state on toggle, call PATCH /api/admin/products/{id}/toggle-visibility, and revert if the call fails. Apply PrivateRoute guard checking for admin role in JWT. Use existing design tokens (--primary: #FFB84D, etc.). Customers must never see this route or any hidden products in the public catalog.

As a Frontend Developer, build a protected /admin/login page with an email+password form. On submit, call POST /api/admin/auth/login, store the returned admin JWT separately from customer JWT (e.g., adminToken in localStorage), and redirect to /admin/inventory. If already authenticated as admin, redirect directly. Add admin-specific AuthContext or extend the existing one to track adminUser and adminToken separately. Ensure the admin login page is not linked from any customer-facing navigation.

As a Frontend Developer, create a centralized AuthContext (AuthContext.jsx) providing global authentication state for both customer and admin roles: currentUser, adminUser, token, adminToken, login, adminLogin, logout, adminLogout, isAuthenticated, isAdmin. Persist tokens to localStorage with expiry checks. Expose useAuth hook. Wire PrivateRoute (for customers) and AdminRoute (for admins) guard components used by React Router in AppRoutes.jsx. This is a prerequisite for customer auth integration, admin login, and admin inventory dashboard.

As a Frontend Developer, integrate the Razorpay (or PayU) JavaScript SDK into the Checkout page. Load the SDK script dynamically, initialize the payment modal using the order_id returned by POST /api/orders, handle payment success/failure callbacks, and on success redirect to /order-confirmation/:orderId. Wire up CheckoutPaymentMethod and CheckoutCTA sections to trigger the gateway. Handle UPI, credit/debit card, and net banking payment methods. Store only the payment reference ID — never raw card data (PCI DSS compliance).

As a Frontend Developer, build a floating AI chat assistant widget (AIChatWidget.jsx) available site-wide via the Navbar or a fixed bottom-right FAB. Features: a chat panel that opens/closes, message history with user and assistant message bubbles, a text input with Send button, and loading/typing indicator. On submit, call POST /api/ai/assist with the user's query and display the GPT-5.4 response via Langchain. Support product recommendation queries and order status questions. Use existing design tokens for theming.

As a Frontend Developer, build the OrderTracking page at /order-tracking/:orderId. Sections: a Navbar (reuse shared component), an order tracking header with order ID and status summary, a timeline component showing 5 tracking steps (Confirmed, Processing, Shipped, Out for Delivery, Delivered) with real statuses from GET /api/orders/:id/tracking, estimated delivery dates in IST, carrier info display, and a refresh/polling mechanism (every 30s) to check for status updates. Add a CTA to return to OrderConfirmation or Products. Apply PrivateRoute guard. Reuse Footer shared component.

As a Backend Developer, update the Cart API implementation (9befe9b2) to use the Redis service provisioned in docker-compose. Inject the Redis client via FastAPI dependency injection using REDIS_URL env var. Implement cart key namespacing per customer session (e.g., cart:{session_id}). Set TTL of 7 days on cart keys. Note: depends on Redis service being available (tmp_redis_setup). This task closes the missing dependency between the Cart API task and Redis infrastructure.

As a Tech Lead, verify end-to-end integration between the FeaturedProducts section on the Landing page and the Products API. Ensure GET /api/products?featured=true (or top-rated filter) returns real product data that populates the FeaturedProducts cards with live INR pricing, ratings, and names — replacing the hardcoded PRODUCTS array. Verify add-to-cart triggers CartContext correctly from the Landing page.

As a Backend Developer, update the seed script (696a7df7) to remove all existing product SKUs and seed only 3 products: (1) Original Banana Chips Salty, (2) Black Pepper Banana Chips, (3) Spicy Banana Chips. Each product must include INR pricing, stock quantities, is_active=true, FSSAI compliance data, category assignment, and initial product images/descriptions. Remove all other SKUs from the seed script and any related migration fixtures. Ensure GET /api/products returns exactly these 3 products in the public catalog.

As a frontend developer, implement the ProductsGrid section for the Products page. This grid renders 16 banana chip product cards from a productData array including: id, name, desc, price (₹89–₹149), rating, reviews count, and badge ('bestseller'/'new'/'sale'/null). Each card includes: a Heart wishlist toggle button with filled/unfilled state, a ShoppingCart add-to-cart button that transitions to a Check icon on click (with per-product addedToCart state using useCallback), a star rating display using the Star Lucide icon, badge labels rendered conditionally, and a Package placeholder for product images. Uses framer-motion AnimatePresence for card entry animations and hover lift effects. Products include named SKUs like 'Classic Salted Banana Chips', 'Honey Glazed Banana Chips', 'Spicy Masala Crunch', 'Dark Chocolate Drizzle', etc. Imports THREE from three (likely for future canvas use).

As a frontend developer, implement the CartHeader section for the Cart page. This section renders a full-width hero-style header with a decorative 3D WebGL scene (DecorativeScene via @react-three/fiber Canvas) featuring a custom BananaShape mesh built from SphereGeometry with vertex manipulation for a banana-like silhouette, a Float-animated MeshDistortMaterial sphere, ambient and directional lighting. The 2D layer includes a breadcrumb nav (Home → Products → Cart) with ChevronRight separators from lucide-react, a checkout progress indicator (Cart / Checkout / Confirmation) with active/done state styling, and a ShoppingBag icon header with item count badge. useMemo is used to memoize the BananaShape geometry. Canvas wrapper must be sized with ch-canvas-wrap (absolute positioned accent column). Shared Navbar component may already exist from ProductDetail page.

As a Backend Developer, implement FastAPI endpoints for order tracking: GET /api/orders/{id}/tracking (return full tracking timeline with step statuses: confirmed/processing/shipped/out-for-delivery/delivered, estimated dates, and carrier info). Support IST timezone for all timestamps. Needed by: NextSteps section on OrderConfirmation and the OrderTracking page.

As a Tech Lead, verify end-to-end integration between the ProductDetail page frontend (ProductDetailHero, ProductDetailMainContent, ProductDetailReviews, ProductDetailRelated) and the Products/Reviews APIs. Ensure product data loads from GET /api/products/:id, reviews paginate and sort via GET /api/products/:id/reviews, new review POST works with auth, helpful votes update correctly, and add-to-cart updates CartContext.

As a Tech Lead, verify end-to-end integration between the Promotions page frontend (PromotionsHero, ActiveDeals, LimitedTimePromo, SeasonalOffers, BundleDeals, LoyaltyRewards) and the Promotions API. Ensure GET /api/promotions returns live deal data with real server-side expiry times, countdown timers are seeded from API endTime values (not hardcoded client offsets), stock levels reflect real inventory, and promo codes can be copied and applied in the Cart.

As a Tech Lead, verify end-to-end integration between the Loyalty page frontend (LoyaltyHero, LoyaltyPointsOverview, LoyaltyTiers, LoyaltyBenefits, LoyaltyRewards, LoyaltyPointsTracker, LoyaltyRedemption, LoyaltyCTA) and the Loyalty API. Ensure points balance, tier status, and transaction history load from real API data, reward redemption flow works end-to-end, tier progress bar reflects accurate pointsForNextTier, and redemption status updates propagate.

As a Tech Lead, verify end-to-end integration between the Admin Inventory Dashboard frontend and the Admin Inventory API. Ensure: (1) GET /api/admin/products returns all products including hidden ones in the admin UI, (2) the toggle switch correctly calls PATCH /api/admin/products/{id}/toggle-visibility and the public GET /api/products no longer returns the hidden product, (3) optimistic UI reverts on API failure, (4) 403 is returned and handled gracefully when a non-admin token attempts to access admin routes, (5) the /admin/inventory route is completely inaccessible to unauthenticated users and customers.

As a Tech Lead, verify end-to-end integration between the Admin Login page frontend and the Admin Auth API. Ensure: POST /api/admin/auth/login returns a valid JWT with role='admin', the admin JWT is stored correctly and used in Authorization headers for all /api/admin/* calls, the AdminRoute guard redirects unauthenticated users to /admin/login, and admin logout clears the admin token without affecting customer session.

As a Tech Lead, verify end-to-end integration between the Razorpay/PayU frontend SDK and the backend payment integration. Ensure: order creation via POST /api/orders returns a valid gateway order_id, the frontend SDK initializes correctly with that order_id, payment webhook/callback reaches the backend for signature verification, order status updates to 'paid' on success, loyalty points are awarded post-payment, and failed payments return an appropriate error state in the UI without creating a confirmed order.

As a Tech Lead, verify end-to-end integration between the ProductDetailReviews frontend section and the Reviews API. Ensure GET /api/products/:id/reviews returns paginated reviews that render correctly with real author names, ratings, and dates; POST /api/products/:id/reviews (authenticated) creates a review visible on next load; helpful vote toggling via POST /api/reviews/:id/helpful updates counts correctly; and unauthenticated review submission redirects to login.

As a Tech Lead, verify end-to-end integration between the AI Chat Assistant frontend widget and the /api/ai/assist backend endpoint. Ensure: user queries reach the LiteLLM gateway and are routed to GPT-5.4, Langchain processes product recommendation and order status context correctly, responses render in the chat UI within acceptable latency, error/fallback responses are handled gracefully in the UI, and rate limiting does not crash the frontend.

As a Frontend Developer, build the customer Register (/register) and Login (/login) pages. Register page: full name, email, password (with strength indicator), confirm password fields, submit calls POST /api/auth/register, on success redirects to /register-success. Login page: email + password, submit calls POST /api/auth/login, stores JWT via AuthContext, redirects to intended protected page or /products. Both pages use existing design tokens. Include form validation, inline error messages, and loading states. RegSuccess page: confirmation message with link back to /products.

As a QA Engineer, write automated test cases verifying that the public GET /api/products endpoint strictly filters out products where is_active=false. Test cases: (1) seed a hidden product, assert it does not appear in public response; (2) toggle visibility to true, assert it appears; (3) assert GET /api/admin/products returns all products including hidden ones; (4) assert unauthenticated PATCH /api/admin/products/{id}/toggle-visibility returns 403; (5) assert customer JWT on admin endpoint returns 403.

As a Tech Lead, verify end-to-end integration between the global CartContext (245d82ea) and the Cart API backend (9befe9b2). Ensure cart state syncs with the backend on auth state change, cart count badge in Navbar reflects live CartContext data, addToCart/removeFromCart/updateQuantity all call the correct API endpoints, and cart persists across page reloads via localStorage fallback.

As a Tech Lead, verify end-to-end integration between the LiteLLM AI Gateway (d56daf15) and the FastAPI /api/ai/assist endpoint consumed by the AI Chat Assistant frontend (1fb63048). Ensure LiteLLM correctly routes to GPT-5.4, Langchain context chains for product recommendations and order status queries work correctly, rate limiting is enforced and gracefully surfaced to the frontend, and fallback responses are returned when the LLM is unavailable.

As a Tech Lead, verify end-to-end integration between the ProductDetailReviews frontend write-review modal (8ad05118) and the Reviews API (4b664273). Ensure authenticated POST /api/products/:id/reviews correctly creates a review visible on next page load, unauthenticated submission redirects to /login, star rating and review text are validated before submission, and helpful vote toggling via POST /api/reviews/:id/helpful updates counts in real time.

As a Tech Lead, verify end-to-end integration between the Indian Payment Gateway backend (700145fc) and the Orders API (457d59b0). Ensure order creation via POST /api/orders generates a valid gateway order_id (Razorpay/PayU), webhook/callback signature validation works correctly, order status transitions to 'paid' on success, loyalty points are awarded post-payment, and failed payments do not create confirmed orders. Verify INR currency handling and PCI DSS compliance (no raw card data stored).

As a Tech Lead, verify end-to-end integration between the Admin Inventory Dashboard frontend (8dc03cf2) and the Admin Inventory API (da39034d). Ensure the toggle switch calls PATCH /api/admin/products/{id}/toggle-visibility, optimistic UI reverts on failure, the public GET /api/products immediately stops returning toggled-off products, and 403 is returned and displayed for non-admin token access. Also verify only 3 products (Original Banana Chips Salty, Black Pepper Banana Chips, Spicy Banana Chips) appear in the admin dashboard.

As a Tech Lead, verify end-to-end integration between the centralized Axios API client (d8e8fa7e) and the AuthContext (b55fa50c). Ensure JWT tokens are automatically attached to all authenticated requests, 401 responses trigger logout and redirect to /login, admin JWT is used for /api/admin/* routes, and all service modules (productsService, cartService, ordersService, reviewsService, promotionsService, loyaltyService, authService) are wired correctly to the API client.

As a Tech Lead, verify end-to-end integration between the Admin Login page frontend (125caf16) and the Admin Auth API (386438b5). Ensure POST /api/admin/auth/login returns a valid JWT with role='admin', admin JWT is stored separately from customer JWT in AuthContext, AdminRoute guard redirects unauthenticated users to /admin/login, and admin logout clears admin token without affecting the customer session.

As a frontend developer, implement the ProductsPagination section for the Products page. This section includes a buildPages() utility that generates smart page arrays with ellipsis ('…') for current≤4, current≥total-3, and middle cases. A canvas-based 2D ParticleField (NOT Three.js) renders floating golden particles using requestAnimationFrame with ResizeObserver for responsive canvas sizing, DPR scaling, and per-particle sinusoidal alpha flicker (rgba(255,184,77,a)). The pagination UI uses framer-motion AnimatePresence with ChevronLeft/ChevronRight navigation buttons, numbered page buttons that highlight the active page, and ellipsis separators. State managed via useState for currentPage. Page button clicks trigger animated transitions with layout animations.

As a frontend developer, implement the CartItemsList section for the Cart page. This section manages local cart state via useState with cartItemsData (3 items: banana-chips-classic, banana-chips-masala, banana-chips-honey with unitPrice in paise, quantity, color). It renders each item with a ProductThumbnail (inline SVG using item color), item name, variant, quantity stepper (+/- via Minus/Plus lucide icons), line total, and a Trash2 delete button. AnimatePresence wraps each cart row for exit animations on remove. An empty cart state renders an EmptyCartScene via @react-three/fiber Canvas with a Float-animated TorusKnot and MeshDistortMaterial colored #FFB84D plus lucide ShoppingBag icon. useCallback is used for quantity update and remove handlers. formatPrice converts paise to ₹ display. Canvas for empty state: width 100%, height min(240px, 40vh).

As a frontend developer, implement the CartSummary section for the Cart page. This section displays an order summary panel with animated number values using AnimatedValue (framer-motion useSpring + useTransform to smoothly interpolate from old to new numeric values). It includes coupon code input with VALID_COUPONS map (BANANA10: 10% off, CRUNCH50: ₹50 off, GOLDEN20: 20% off) validated via useState, with Check/X lucide icons for success/error feedback and AnimatePresence for the coupon result row. Loyalty points toggle (340 points at ₹0.25/point) uses a Three.js coin rendered via raw imperative import('three') inside useEffect on a mountRef canvas (CylinderGeometry with TorusGeometry edge ring, gold MeshStandardMaterial, spinning animate loop, cleanup on unmount). Summary rows: subtotal, shipping (free), tax (5%), discount, loyalty deduction, and grand total. useRef/useEffect manage the Three.js renderer lifecycle.

As a frontend developer, implement the CheckoutProgressBar section for the Checkout page. Build a 5-step progress bar using CHECKOUT_STEPS array (cart, shipping, billing, payment, confirmation) with Lucide icons (ShoppingCart, Truck, FileText, CreditCard, CheckCircle). Manage currentStep via useState(1). Each step renders a cpg-step bubble with status classes (done/current/upcoming) driven by getStepStatus(). Animate connector fills using framer-motion scaleX transition (0.45s cubic-bezier). Current step bubble pulses with infinite scale animation [1,1.08,1] with 1.8s repeatDelay. Done steps show an animated checkmark (scale+rotate in/out via AnimatePresence mode='wait'). Uses spring layout transitions (stiffness:400, damping:30). Depends on Cart page CartHeader task to establish page-level chain.

As a Tech Lead, verify end-to-end integration between the Products page frontend (ProductsHero, ProductsFilterSidebar, ProductsControlBar, ProductsGrid, ProductsPagination) and the Products API. Ensure product data flows from GET /api/products with correct filtering, sorting, and pagination params. Verify INR pricing displays correctly, category filters map to API params, and add-to-cart triggers CartContext correctly.

As a Tech Lead, verify end-to-end integration between the newly built OrderTracking page frontend (tmp_build_ordertracking_page) and the Order Tracking API (66f57f45). Ensure GET /api/orders/:id/tracking returns real timeline data with IST timestamps, step statuses render correctly (confirmed/processing/shipped/out-for-delivery/delivered), polling refresh updates the UI, and the orderId URL param correctly scopes the fetch to the authenticated customer's order.

As a Tech Lead, verify end-to-end integration between the customer Register and Login frontend pages (fd4754cf) and the Customer Auth API (5d51e01b). Ensure POST /api/auth/register and POST /api/auth/login return JWTs stored correctly in AuthContext, PrivateRoute gates protected pages, form validation errors surface correctly from API responses, and logout clears token state without affecting admin session.

As a frontend developer, implement the CartActions section for the Cart page. This section renders the final CTA row with a primary 'Proceed to Checkout' button (ShoppingBag + ArrowRight lucide icons, framer-motion spring config: stiffness 400 damping 20, whileTap scale), a 'Save for Later' Heart toggle button (savedForLater useState), and a 'Share Cart' button (shared useState with 2s auto-reset). A decorative @react-three/fiber Canvas (caa-canvas-wrap, Suspense fallback null, dpr [1, 1.5]) renders a ParticlesField — 18 small spheres (sphereGeometry args ~0.06-0.14r) with meshBasicMaterial in #FFB84D / #4D4DFF / #FFD700 at 0.18 opacity, rotated via useFrame with groupRef. Two SVG banana-leaf motifs (motion.path with pathLength 0→1 animation over 2s) are positioned absolutely left and right as caa-bg-decor. ShieldCheck and Lock lucide icons appear in a security trust strip below CTAs. Canvas wrapper: width 100%, height 180px desktop / 120px mobile.

As a frontend developer, implement the CheckoutForm section for the Checkout page. Build a multi-field shipping address form with VALIDATORS object covering name, email, phone, address1, city, state, postal fields using regex validation. Manage INITIAL_FIELDS state (value/error/touched per field) via createInitialFields(). Render a dropdown for INDIA_STATES (28 states + UTs). Handle onBlur-triggered validation and inline error display with AnimatePresence-animated error messages. Include a useAmbientParticles hook that drives a Canvas 2D particle system (40 particles, Three.js-inspired physics) on a background canvas element sized via ResizeObserver. Uses useState, useCallback, useMemo, useEffect, useRef from React. framer-motion animates field focus states and error transitions.

As a frontend developer, implement the CheckoutOrderSummary section for the Checkout page. Render a DecorativeOrb component using Three.js (SphereGeometry 48-segment wireframe in #FFB84D + semi-transparent glow sphere in #FFE5B4) mounted via useRef/useEffect with requestAnimationFrame loop (orb.rotation.x+=0.004, orb.rotation.y+=0.007). Display initialItems array (3 banana chip products with emoji, unitPrice, qty) with per-item quantity controls. Calculate totals with SHIPPING_COST=49 and TAX_RATE=0.05. Show ESTIMATED_DELIVERY string. Format currency with formatINR using en-IN locale. Use AnimatePresence for item quantity change animations. Dispose Three.js renderer/geometries/materials on cleanup.

As a frontend developer, implement the CheckoutPromoCode section for the Checkout page. Build a DiscountToken component using dynamically imported Three.js (async import): renders a CylinderGeometry coin (gold #FFD700, metalness:0.7) with a TorusGeometry edge ring (#FFE5B4), AmbientLight + DirectionalLight + PointLight, animating mesh.rotation.y+=0.025 and sinusoidal rotation.x. Manage code input state via useState with PROMO_CODES lookup object (BANANA20, GOLDEN10, CRUNCH50, WELCOME15 — percentage and fixed types). Show success/error states using CheckCircle/AlertCircle Lucide icons with AnimatePresence transitions. Display applied discount token with Trash2 removal button. Render available code suggestions with Star/Sparkles/ArrowRight icons. Cleanup cancels animId and disposes renderer on unmount.

As a frontend developer, implement the CheckoutPaymentMethod section for the Checkout page. Build a CardMesh component using @react-three/fiber Canvas + @react-three/drei (RoundedBox, Box, Text). CardMesh uses useFrame for sinusoidal rotation (rotation.y = sin(t*0.4)*0.12, rotation.x = cos(t*0.3)*0.06) and floating position.y animation. Render a 3D credit card with: RoundedBox card body (#1a1a2e), accent stripe with configurable glowColor emissive material, gold chip (RoundedBox + detail Box lines), drei Text components for card number/holder/expiry using Inter_Regular.json font. Accept cardNumber, cardHolder, expiry, color props. Wire up controlled inputs that update the 3D card in real-time. Support multiple payment method tabs (card, UPI, netbanking) with AnimatePresence panel transitions via framer-motion.

As a frontend developer, implement the CheckoutSecurityBadges section for the Checkout page. Build a ShieldMesh component using @react-three/fiber (Canvas, useFrame) with cylinderGeometry body (#FFB84D, metalness:0.35), tapered top cylinderGeometry, bottom coneGeometry point, and a torusGeometry checkmark ring (#4D4DFF). useFrame rotates meshRef.current.rotation.y+=delta*0.5. ShieldScene wraps it in Canvas (fov:35, position z:2.2) with ambientLight (intensity:1.4) and two directionalLights. Render security badge cards (LockIcon, ShieldIcon, CheckmarkBadgeIcon as inline SVGs) with framer-motion entrance animations. Import BadgeCard.css alongside CheckoutSecurityBadges.css. Badges communicate SSL encryption, secure checkout, and buyer protection trust signals.

As a frontend developer, implement the Navbar section for the OrderConfirmation page. This component (Navbar.jsx) uses useState for scrolled, mobileOpen, and accountOpen states, with useRef for dropdownRef and click-outside detection via useEffect. Renders a sticky nav with scroll-shadow class (nb-scrolled), a 🍌 Golden Crunch Co. logo linking to /Products, desktop NAV_LINKS (Products, Promotions, Loyalty, Order Tracking), a ShoppingCart icon with a hardcoded cartCount badge of 3, a User/Account dropdown with ChevronDown animation, and a mobile hamburger menu with body overflow lock. Note: this component may already exist from previous pages (Loyalty, ProductDetail, Cart, Checkout) — reuse if available.

As a Tech Lead, verify end-to-end integration between the Products page frontend sections (ProductsHero, ProductsFilterSidebar, ProductsControlBar, ProductsGrid, ProductsPagination) and the Products API (d005b659). Ensure only 3 products (Original Banana Chips Salty, Black Pepper Banana Chips, Spicy Banana Chips) are returned and rendered correctly with INR pricing, category filters, sorting, and pagination. Verify add-to-cart triggers CartContext. Note: frontend section tasks should depend on d005b659 (Products API).

As a frontend developer, implement the CheckoutCTA section for the Checkout page. Build the primary 'Complete Purchase' button managing loading and processing boolean states via useState. handleCompletePurchase sets both flags, awaits a 2200ms Promise, then redirects to /OrderConfirmation via window.location.href. Button is disabled when loading||processing. framer-motion whileHover (scale:1.04) and whileTap (scale:0.96) with spring (stiffness:400, damping:17) — suppressed when disabled. AnimatePresence mode='wait' swaps LockIcon SVG ↔ cta-spinner span during loading state, and swaps button label text with y-axis slide transition. Inline LockIcon, ArrowIcon, ShieldIcon as functional SVG components. Renders a secondary 'Save for Later' button and security micro-copy with ShieldIcon below the primary CTA.

As a frontend developer, implement the OrderConfirmationHero section. This component uses a Three.js celebration particle burst via a custom useCelebrationBurst hook attached to a canvasRef. The particle system creates 180 points bursting from center in random directions with velocities, using five golden/confetti colors (#FFB84D, #FFD700, #FFE5B4, #FF4D4D, #4D4DFF) rendered as PointsMaterial with vertexColors. Animation runs for 2.8 seconds with elapsed/progress tracking. Uses framer-motion for hero content reveal, and lucide-react Mail and Check icons. THREE.WebGLRenderer is configured with alpha:true and antialias:true, with a resize handler for responsive canvas. The hero likely displays an order success message with the particle burst as a celebratory background effect.

As a frontend developer, implement the OrderSummary section. Renders a static card (os-card) with an os-grid of four order metrics: Order ID (GC-2026-2894) with Hash icon, Order Date (24 May 2026, 03:42 PM IST) with Calendar icon, Estimated Delivery (29–31 May 2026) with Truck icon, and Order Status with ClipboardCheck icon showing an os-status-badge os-status-processing pill with animated os-status-dot. Uses framer-motion containerVariants with staggerChildren:0.1 and metricVariants (opacity/y slide-up) triggered via whileInView with once:true and margin:-40px viewport. All icons are from lucide-react.

As a frontend developer, implement the ItemsBreakdown section. Contains four ITEMS (Classic Salted Banana Chips 200g ×2 @₹149, Spicy Masala Crunch 150g ×3 @₹179, Honey Glazed 100g ×1 @₹199, Peri-Peri Fire Crunch 150g ×2 @₹169) and two DISCOUNTS (BANANA10 promo -₹139, Loyalty Points -₹25). Computes subtotal, totalDiscount, and grandTotal with Intl.NumberFormat en-IN INR formatting. Includes a @react-three/fiber Canvas with a GoldenCoin component (Float + Torus with meshStandardMaterial color:#FFB84D metalness:0.7) as a decorative ib-3d-accent. Uses framer-motion containerVariants (staggerChildren:0.08), itemVariants (x:-14 slide-in), and summaryVariants (delay:0.4 fade-up) with useInView once:true. Renders item rows with emoji, name, variant, qty, unit price, and line total.

As a frontend developer, implement the ShippingBilling section. Renders two AddressCard sub-components (shipping and billing) using hardcoded data for Ravi Kumar at 42/1, Golden Crunch Lane, JP Nagar 2nd Phase, Bengaluru 560078, with phone +91 98765 43210 and email. Each card uses useRef + useInView (once:true, margin:-40px) and a handleMouseMove callback that sets --sb-mx/--sb-my CSS custom properties for cursor-reactive glow. Cards have an accent stripe (sb-shipping or sb-billing class), header with MapPin or Building2 lucide icon, and the billing card shows a framer-motion animated sb-same-badge with CheckCircle icon (delay:0.35). cardVariants apply staggered y:24 fade-up. Both cards display address lines, phone (Phone icon), and email (Mail icon).

As a frontend developer, implement the PaymentConfirmation section. Contains static paymentData (Credit Card ending in 1234, TXN-GCC-9876-5432-1098, subtotal ₹2499, taxes ₹449.82, shipping ₹149, total ₹3097.82). Renders a pc-card with a @react-three/fiber Canvas in pc-coin-wrapper showing a GoldCoin component — a Float-wrapped cylinder mesh with MeshDistortMaterial (color:#FFD700, emissive:#FFB84D, metalness:0.85, roughness:0.15, distort:0.03). Uses useInView (once:true, margin:-60px) to trigger framer-motion lineItemVariant animations (x:-12 staggered by index*0.12). Displays payment method header with CreditCard icon, transaction ID with Receipt icon, and line items for subtotal/taxes/shipping/total with divider before total row.

As a frontend developer, implement the LoyaltyPoints section. Renders a 3D TierMedal3D component via @react-three/fiber Canvas: a group with a gold Torus outer ring (args:[1.05,0.06,16,48], metalness:0.9) and an Icosahedron inner gem wrapped in MeshDistortMaterial (color:#FFD700, distort:0.18, speed:1.8) with three lights including a gold pointLight. Shows hardcoded data: pointsEarned=125, tierName='Gold', totalBalance=2840, nextTier='Platinum', pointsToNext=1160, tierProgress=71%, redemptionThreshold=500, redemptionValue=₹100. Uses Sparkles, TrendingUp, Wallet, ArrowRight, Info from lucide-react. framer-motion cardVariants with custom index (delay:i*0.14) and fadeUpVariants (delay:0.6) triggered by useInView (once:true, margin:-80px). Displays tier progress bar, balance cards, and redemption info.

As a frontend developer, implement the NextSteps section. Renders a 5-step order timeline (STEPS array): Confirmation Email Sent (completed), Order Processing (active), Shipped (pending), Out for Delivery (pending), Delivered (pending). Each step has an Icon from lucide-react (CheckCircle2, RefreshCw, Truck, MapPin, Home), status badge from STATUS_LABELS, estimated time string, and description text. Includes a BananaSpark Three.js background effect using a plain WebGLRenderer (not @react-three/fiber) with a custom group, AmbientLight, DirectionalLight, and useRef/useEffect canvas setup with resize handler, dpr clamping, and animRef for RAF cleanup. framer-motion useInView triggers step card animations. Steps visually distinguish completed/active/pending states with different icon colors and connectors.

As a frontend developer, implement the OrderConfirmationCTA section. Uses useState for ripples object keyed by button ID, useRef for rootRef, and useInView (once:true, margin:-40px). handleMouseMove sets --occta-mx/--occta-my CSS custom properties on buttons for cursor-reactive glow via occta-glow span. handleRipple creates a timed ripple entry with x/y/size coordinates that auto-cleans after 700ms. Two buttons: a primary occta-btn--primary linking to /OrderTracking (Package icon + ArrowRight) and a secondary occta-btn linking to /Products (ShoppingBag icon). framer-motion fadeUp variants (custom index, delay:i*0.15, ease:[0.22,1,0.36,1]) animate the message paragraph and button row. Displays 'Your order is confirmed' message with 'Keep exploring' emphasis.

As a frontend developer, implement the Footer section for the OrderConfirmation page. Uses useState for email and subscribed states, useRef for formRef and rootRef, useInView (once:true, margin:-60px), and a handleSpotlight useCallback that sets --ftr-mx/--ftr-my CSS custom properties for cursor spotlight on the newsletter form. handleSubscribe prevents default and sets subscribed:true on non-empty email. Renders four linkColumns (Products, Company, Support, Legal) with framer-motion columnVariant (alternating x:-16/16 slide-in per index*0.1 delay). Includes social icons (Facebook, Twitter, Instagram, Youtube from lucide-react) and a newsletter email form with Send icon. Features an ftr-watermark parallax div using --scroll CSS var. Note: Footer component may already exist from Loyalty or other pages — reuse if available.

As a Tech Lead, verify end-to-end integration between the Cart page frontend (CartHeader, CartItemsList, CartSummary, CartActions) and the Cart API. Ensure cart items load from GET /api/cart, quantity updates call PATCH /api/cart/items/:productId, item removal calls DELETE /api/cart/items/:productId, promo code validation hits POST /api/promotions/validate, and loyalty point toggle reflects correct deduction. Verify CartContext stays in sync.

As a Tech Lead, verify end-to-end integration between the CheckoutPromoCode and CartSummary frontend promo-code inputs and the POST /api/promotions/validate backend endpoint (c5ad7f29). Ensure promo codes (BANANA10, BANANA20, GOLDEN10, CRUNCH50, WELCOME15) are validated server-side, discount type and value are applied correctly to cart totals, expired or invalid codes return proper error states in the UI, and applied discounts persist through to order creation.

As a Tech Lead, verify end-to-end integration between the Checkout page frontend (CheckoutForm, CheckoutPaymentMethod, CheckoutPromoCode, CheckoutOrderSummary, CheckoutCTA) and the Orders/Payment APIs. Ensure shipping form data passes to POST /api/orders, payment gateway SDK initializes correctly in CheckoutPaymentMethod, payment confirmation redirects to OrderConfirmation page with correct orderId, and promo codes apply discount before order creation.

As a Tech Lead, verify end-to-end integration between the OrderConfirmation page frontend (OrderConfirmationHero, OrderSummary, ItemsBreakdown, PaymentConfirmation, ShippingBilling, LoyaltyPoints, NextSteps, OrderConfirmationCTA) and the Orders API. Ensure GET /api/orders/:id returns real order data, loyalty points earned display correctly, order status reflects backend state, and CTA links to OrderTracking with correct orderId param.

As a Tech Lead, verify end-to-end integration between the OrderTracking page and the Order Tracking API. Ensure GET /api/orders/:id/tracking returns real timeline steps with IST timestamps, step statuses (confirmed/processing/shipped/out-for-delivery/delivered) render correctly in the NextSteps timeline UI, and real-time or polling refresh works for status updates.

As a Tech Lead, verify end-to-end integration between the LoyaltyPoints section on the OrderConfirmation page (af2206e6) and the Loyalty API (1036a2af) and Orders API (457d59b0). Ensure loyalty points are awarded automatically on payment success (1 point per ₹10 spent), the pointsEarned and totalBalance values rendered in LoyaltyPoints reflect the actual backend state from GET /api/loyalty/overview, and tier progress updates correctly after the order.