Babubhai Jewellers

As a frontend developer, implement the `HomeHero` section using `@react-three/fiber` Canvas with `OrbitControls`, `PerspectiveCamera`, `Environment`, and `Float` from `@react-three/drei`. Render a `Jewel` component inside a `Suspense` boundary that uses `useFrame` for continuous `rotation.y` delta animation and `useMemo` to derive geometry type from `piece.id`. Render three geometry variants: ring (`torusGeometry` + `octahedronGeometry` diamond stone), necklace (`torusGeometry` arc chain + pendant mesh), and bangle (`torusGeometry` cuff). Use a `PIECES` array of three items (Solitaire Ring, Maharani Bridal Haar, Chandni Silver Cuff) each with `metal`, `specs`, `tags`, `color`. Implement `useState` for active piece selection, animated slide-in copy panel via `AnimatePresence`, spec chips, tag pills, and a `PARTICLES` array of 14 ambient floating dots. Import `HomeHero.css`.

As a frontend developer, implement the `HomeTrustBadges` section with three `FlipCard` components driven by a `BADGES` array (BIS Hallmarked, Since 1952, Master Craftsmanship). Each `FlipCard` uses `useState` for `hovered`, animates `rotateY: 180` on hover/focus via `framer-motion`, and renders a front face (lucide icon via `ShieldCheck`, `Crown`, `Gem`; title, tag, stat) and a back face (`BACK_ICONS` map to `Award`, `ShieldCheck`, `Hammer`; backTitle, backText, bullet points with `Check` icons). Cards use `whileInView` with staggered `delay: index * 0.12` entrance animations. Import `HomeTrustBadges.css`.

As a frontend developer, implement the `HomeLiveRates` section using a `METALS` array (Gold 24K and Silver 999) each with `base`, `change`, `direction`, `stroke`, `fill`, and a 10-point `trend` array. Render an SVG sparkline per metal using `buildSparkPath` (min/max normalised to SPARK_W=240 × SPARK_H=80) with a filled gradient area path and a live dot at `lastPoint`. Use `useState` for `hovered` metal card and `minutesAgo`, driven by a `setInterval` every 60 000 ms via `useEffect`. Show `TrendingUp`/`TrendingDown` lucide icons, INR-formatted price via `formatINR` (en-IN locale), change percentage badge, and a `Clock` updated label. Include a `Calculator` CTA linking to Gold Rate page. Render parallax `.hlr-deco` layers and animated `.hlr-spark` elements. Import `HomeLiveRates.css`.

As a frontend developer, implement the `HomeFeaturedCollections` section with a 6-item `COLLECTIONS` array (Gold, Diamond, Bridal, Silver, Men's, Kids) each containing `name`, `count`, `desc`, `badge`, `href`, and Unsplash `image` URL. Render `CollectionCard` components using `useState` for `hovered`, `whileHover: { y: -6 }` spring lift, and an animated `motion.img` that `scale: 1.05` on hover. Each card shows a base shade overlay, a badge pill, collection name, count, description, and an `ArrowRight` CTA. Include a section header with `Sparkles` and `Gem` lucide icons. Import `HomeFeaturedCollections.css`.

As a frontend developer, implement the `HomePremiumFeatures` section with a `FEATURES` array of four cards (Virtual Try-On, AI Recommendation, Gold Investment Calculator, Wedding Planner) each with `tag`, `title`, `desc`, `cta`, `href`, and a lucide `Icon` (`Sparkles`, `BrainCircuit`, `Calculator`, `HeartHandshake`). Render `FeatureCard` using `useState` for `hovered`, animating `y: -8` and `boxShadow` gold glow via `framer-motion`. Inside each card render an icon glow div with `scale`/`opacity` pulse animation on hover. Implement a `MagneticCTA` component using `useRef` + `useState` for `{x, y}` mouse offset, computing delta from `getBoundingClientRect` centroid and animating the `motion.a` with spring `stiffness: 220, damping: 14`. Import `HomePremiumFeatures.css`.

As a frontend developer, implement the `HomeTestimonials` section with a `testimonials` array of 4 entries (Ananya & Rohan Mehta, Priya Sharma, Kavita & Devang Patel, Meera Desai) each with `name`, `occasion`, `location`, `rating`, `initials`, `color`, and `text`. Use `useState` for `active` index and `useRef` for `trackRef` scroll container. Implement `scrollToIndex` using `track.scrollTo` with smooth behaviour and `handleScroll` to sync `active` via `getBoundingClientRect`. Render `ChevronLeft`/`ChevronRight` nav buttons and dot indicators. Build a `StarRow` component rendering 5 `motion.span` stars with `whileHover` pulse animation using `Star` lucide icon filled gold for rated stars. Import `HomeTestimonials.css`.

As a frontend developer, implement the `HomeGallery` section with a 10-item `GALLERY` array (store interiors, collection showcases, event photos) each having `title`, `tag`, `h` (aspect ratio multiplier), and Unsplash `img` URL. Use `useState` for `activeIndex` (lightbox) and `zoomed`. Implement `useCallback` handlers: `closeLightbox` (reset both states), `showNext`/`showPrev` (modulo cycle through GALLERY). Attach a `useEffect` keyboard listener for Escape, ArrowLeft, ArrowRight when `isOpen`. Render a CSS masonry/variable-height grid. Implement a full-screen `AnimatePresence` lightbox overlay with `X` close, `ChevronLeft`/`ChevronRight` nav, `ZoomIn` toggle, and `motion` image transitions. Import `HomeGallery.css`.

As a frontend developer, implement the `HomeAppointmentCTA` section with a controlled form using `useState` for `form` (name, mobile, date, time), `focused`, `submitted`, and `confetti`. Render four `FIELDS` (Full Name, Mobile Number, Preferred Date, Preferred Time) with `FieldUnderline` animated underline style from `FieldUnderline.css`. On submit, call `makeConfetti(50)` generating 50 confetti pieces with random `left`, `delay`, `duration`, `drift`, `rotate`, `color` from `CONFETTI_COLORS` (`#D4AF37`, `#FFD700`, `#C0C0C0`, etc.), animate them via `AnimatePresence`, set `submitted: true`, then reset after 2 000 ms via `window.setTimeout`. Include `CalendarCheck` and `MessageCircle` lucide CTAs in the copy panel. Render parallax `.hac-deco` layers with 5 `.hac-orb` elements. Import `HomeAppointmentCTA.css` and `FieldUnderline.css`.

As a frontend developer, implement the `Footer` component using `useState` for `openCol` (accordion key). Build a `renderColumn` helper that renders a `<button>` header with `ChevronDown` lucide icon toggling `AnimatePresence`-driven `motion.div` height animation (`height: 0 → auto`) for mobile, plus a `.ftr-desktop-only` always-visible body for desktop. Render four columns: Brand Story (heritage copy, BIS badge via `ShieldCheck`), Quick Links (`quickLinks` array: Collections, About, Custom Design, Gold Rate), Social Links (`Instagram`, `Facebook`, `MessageCircle` lucide icons), and Contact/Hours (`MapPin`, `Phone`, `Mail`, `Clock` icons). Render SEO link pills from `seoLinks` array (6 items). Include parallax `.ftr-deco-bg`. Note: this component may already exist from a previous page — reuse if available. Import `Footer.css`.

As a frontend developer, implement the Navbar section for the About page. This component (Navbar.css) is likely already implemented from the Home page (task c27fd8a1). Verify the shared Navbar component works correctly on the About page with: `scrolled` state via `window.scrollY > 12` scroll listener, `profileOpen` dropdown toggle with outside-click detection via `profileRef` and `mousedown` event listener, `mobileOpen` mobile menu state, NAV_LINKS array with 7 routes including the active 'About' link, profile button rendering 'Aarav Desai' / 'Administrator' with ChevronDown animation (`nv-chev-open` class toggle), and full dropdown menu with User/Settings/Calendar/LogOut icons from lucide-react. Confirm `nv-scrolled` class applies on scroll and mobile Menu/X icon toggling works.

As a frontend developer, implement the Navbar section for the Contact page. This component may already exist from the Home and About pages (task c27fd8a1). It uses useState for menuOpen and ddOpen, useRef for click-outside detection via mousedown event listener, and renders NAV_LINKS array with 8 navigation items. Includes a user dropdown with ChevronDown, UserCog, LayoutDashboard, Settings, LogOut icons from lucide-react, displaying 'Rajesh Babubhai' / 'Administrator' with nv-avatar initials 'RB'. Dropdown toggles nv-open class and has aria-haspopup/aria-expanded accessibility attributes. Import from '../styles/Navbar.css'.

As a frontend developer, implement the GoldRateHero section for the Gold Rate page. This section features a React Three Fiber 3D scene with a GoldObject component (animated gold ingot using boxGeometry with metalness=0.92, roughness=0.18, engraved line details, central sphere emblem, and glow aura plane) on a Pedestal component (cylinderGeometry top disc and column body). The GoldObject uses useFrame for auto-rotation (0.45 normal, 1.8 on hover) with oscillating glow opacity. OrbitControls, Environment from @react-three/drei are used for scene setup. The section includes Shield, Clock, Award icons from lucide-react as trust badge overlays. Hover state is tracked via useState and passed to the 3D GoldObject for accelerated rotation and glow effects. Note: Navbar component may already exist from a prior page.

As a frontend developer, implement the GoldRateLiveRates section for the Gold Rate page. This section renders a RATES array of 4 metals (24K Gold, 22K Gold, 18K Gold, Silver) each with purity, price, changePct, iconGlyph fields. It includes a period selector (PERIODS: '24h', '7d', '1m') that triggers generateHistoryBars() to produce mini bar-chart height arrays per period using random noise and trend interpolation. Each rate card displays a dynamic mini bar chart with per-bar up/down directional coloring. A GoldParticleBackdrop component uses raw Three.js (WebGLRenderer, PointsMaterial with AdditiveBlending, 70 particles) mounted via useEffect and useRef, rendered as a canvas overlay behind the rate cards. useMemo is used to cache generated bar data per period and metal.

As a frontend developer, implement the GoldRateTrendGraph section for the Gold Rate page. This section integrates react-chartjs-2 Line chart with ChartJS registered scales (CategoryScale, LinearScale, PointElement, LineElement, Title, Tooltip, Filler, Legend). It supports METALS (24k, 22k, 18k, silver) and RANGES (1w, 1m, 3m, 1y) selectors with useState for activeMetal and activeRange. generateMockData() produces mock price series with metal-specific baseRate (24k=7250, silver=82) and volatility parameters. A GoldParticles component uses Three.js with PerspectiveCamera, WebGLRenderer (alpha, antialias), BufferGeometry with particleCount responsive to viewport width (180 desktop / 80 mobile), tracked via containerRef, sceneRef, cameraRef, rendererRef, particlesRef, frameRef, meshRef with full cleanup on unmount. useCallback wraps initScene for stable reference. Chart renders with gradient fill using Filler plugin.

As a frontend developer, implement the GoldRateCalculator section for the Gold Rate page. This section provides an interactive price calculator with a METAL_RATES object covering 5 metals (24k_gold, 22k_gold, 18k_gold, silver, platinum) each with rate per gram, purityLoss, and craftingMargin fields. It uses TOLA_TO_GRAMS=11.6638 for unit conversion. State managed via useState for selected metal, weight, unit (grams/tola), and computed price. useMemo calculates final price factoring in purityLoss and craftingMargin. Icons from lucide-react: Calculator, Scale, TrendingUp, Info, Gem. A GoldParticleField component uses Three.js with OrthographicCamera, ShaderMaterial with custom GLSL vertexShader (gl_PointSize from size attribute * 320.0, vAlpha based on sin) and fragmentShader, 40 particles with per-particle speed/offset Float32Arrays for animated floating effect. Particles use uTime uniform updated each frame.

As a frontend developer, implement the GoldRateInvestmentInsights section for the Gold Rate page. This section renders 3 insight cards defined via useMemo: 'Today's Best Rate' (metrics: 24K Gold 10g, 22K Gold 10g, Silver 1kg with up/down change indicators), 'Weekly Trend' (Week High, Week Low, Volatility), and 'Investment Tip' (Suggested Allocation 15-20%, Ideal Entry ₹71,500, 6-Month Outlook Bullish). Each card has an inline SVG icon, metrics array with direction field for color coding, description text, and actionLabel/actionHref linking to '/Gold Rate' or '/Appointment'. hoveredIndex state (useState) tracks which card is hovered for highlight effects. A Three.js canvas scene is initialized via canvasRef useEffect with PerspectiveCamera (fov=60), WebGLRenderer (alpha, antialias) as a decorative particle backdrop.

As a frontend developer, implement the GoldRateCTA section for the Gold Rate page. This is a static call-to-action section with gcta-root/gcta-inner/gcta-content layout. It renders a 'Investment Guidance' label badge, an h2 headline with a gcta-headline-accent span ('Ready to Invest?'), a gcta-accent-line decorative divider, a copy paragraph about Babubhai Jewellers' 60+ years expertise, and a gcta-trust-line with dot + text listing BIS Hallmark certified and 100% buyback guarantee. The gcta-actions div contains two anchor CTAs: a primary 'Book Consultation' button linking to '/Appointment' with an inline calendar SVG icon and an animated gcta-pulse-dot span, and a secondary WhatsApp button linking to a wa.me URL with a WhatsApp SVG path icon, opening in a new tab with rel='noopener noreferrer'.

As a frontend developer, implement the Navbar section for the Gallery page. This component may already exist from previous pages (Contact, About). It uses useState for scrolled, profileOpen, and mobileOpen states, useRef for profileRef (click-outside detection), and useEffect for scroll listener and mousedown listener. NAV_LINKS array includes 7 routes including Gallery (active). Renders nv-root with nv-scrolled class on scroll, brand mark with 'B' emblem and 'Babubhai Jewellers / Timeless Elegance' text, desktop nav links, profile button with ChevronDown icon showing avatar 'AD' for Aarav Desai / Administrator, dropdown menu with nv-open class toggle, and mobile Menu/X icon hamburger. Imports from lucide-react: ChevronDown, User, Settings, Calendar, LogOut, Menu, X.

As a frontend developer, implement the Navbar section for the Testimonials page. This component may already exist from previous pages (Gallery, Contact, Gold Rate). It uses useState for menuOpen and ddOpen, useRef for userRef with outside-click detection via useEffect/mousedown listener. Renders nv-root header with nv-brand (Babubhai Jewellers logo with 'B' mark), nv-links mapping NAV_LINKS array (8 links: Dashboard, Gold Rate, Collections, Bridal, Custom Design, Gallery, Appointments, Contact), and nv-right with a user dropdown (ChevronDown, avatar 'RB', Rajesh Babubhai/Administrator meta, dropdown menu with UserCog/LayoutDashboard/Settings/LogOut items from lucide-react). Imports Navbar.css. Note: reuse existing Navbar component if available.

As a frontend developer, implement the Navbar section for the Collections page. This component (Navbar.css) reuses the shared Navbar component that may already exist from Gallery, Testimonials, or Gold Rate pages. It uses useState for menuOpen and ddOpen, useRef for userRef with outside-click detection via useEffect/mousedown event listener. Renders nv-root header with nv-brand (Babubhai Jewellers logo with 'B' mark), nv-links mapping NAV_LINKS array (8 links including Dashboard, Gold Rate, Collections, Bridal, Custom Design, Gallery, Appointments, Contact), and nv-right with user dropdown using ChevronDown, UserCog, LayoutDashboard, LogOut icons from lucide-react. Dropdown shows Rajesh Babubhai / admin@babubhaijewellers.in with Admin Panel and Dashboard links. Mobile hamburger menu uses Menu/X icons.

As a frontend developer, implement the AdminTopBar section for the Admin page. Build the Navbar component using Navbar.css with useState for menuOpen and ddOpen, useRef for userRef with outside-click detection via useEffect/mousedown listener. Render a header with nv-root class containing: brand link with nv-mark initial 'B' and brand name/sub text, horizontal nav with NAV_LINKS array (Dashboard, Gold Rate, Collections, Bridal, Custom Design, Gallery, Appointments, Contact) rendered as anchor tags, and a right-side user menu with avatar 'RB', user name 'Rajesh Babubhai', role 'Administrator', ChevronDown caret that rotates on open (nv-open class), and a dropdown (nv-dropdown with nv-open toggle) containing user head info, UserCog/LayoutDashboard/Settings/LogOut menu items from lucide-react. Note: Navbar component may already exist from previous pages — reuse or extend it for the admin context. Depends on Home page task to establish page chain.

As a Backend Developer, implement the Gold Rates REST API using FastAPI. Endpoints: GET /api/v1/gold-rates (list all current rates with metal/purity/price/unit/updated_at), POST /api/v1/gold-rates (admin: create new rate entry), PUT /api/v1/gold-rates/{id} (admin: update rate), DELETE /api/v1/gold-rates/{id} (admin: delete rate), GET /api/v1/gold-rates/history?metal=&range= (historical rate data for trend graph with range 1w/1m/3m/1y). Rates should support 24K Gold, 22K Gold, 18K Gold, Silver 999, Silver 925. Include last_updated timestamp. Admin endpoints require authentication middleware. This API supports: GoldRateLiveRates, GoldRateTrendGraph, GoldRateCalculator, DashboardRateManager, AdminRateManager, HomeLiveRates frontend sections.

As a Backend Developer, implement the Appointments REST API using FastAPI. Endpoints: POST /api/v1/appointments (create appointment; generates confirmation_number in BJ-YYYY-MMDD-APPT-XXXX format; validates name/mobile/email/date/time/purpose), GET /api/v1/appointments (admin: list all appointments with filters for status/date/search), GET /api/v1/appointments/{id} (admin: get appointment details), PUT /api/v1/appointments/{id} (admin: update status confirmed/pending/completed/cancelled), DELETE /api/v1/appointments/{id} (admin: cancel/delete). Public POST endpoint does not require auth; admin endpoints require auth middleware. Purpose options: Bridal Consultation, Custom Design, Purchase Inquiry, Exchange & Buyback, General Consultation. This API supports: AppointmentsForm, AppointmentForm, AppointmentConfirmation, AppointmentsConfirmation, DashboardAppointments, AdminAppointmentHandler, BridalAppointmentCTA, HomeAppointmentCTA frontend sections.

As a Backend Developer, implement the Products/Collections REST API using FastAPI. Endpoints: GET /api/v1/products (list products with filters: category, metal, priceMin/priceMax, occasion, bisCertified, newArrivals, sortBy; pagination with page/perPage), GET /api/v1/products/{id} (get product details), POST /api/v1/products (admin: create product), PUT /api/v1/products/{id} (admin: update product), DELETE /api/v1/products/{id} (admin: delete product), GET /api/v1/products/categories (list categories with counts). Product fields: name, sku, category, metal, purity, weight, priceMin, priceMax, stock, status (active/draft/archived), bisHallmark, isNew, images (array), description, tags. This API supports: CollectionsGrid, CollectionsFilter, CollectionsPagination, DashboardCollectionsManager, AdminProductManager, HomeFeaturedCollections, BridalSetsGrid, WeddingPlannerSuggestions, AIRecommendationResults frontend sections.

As a Backend Developer, implement the Testimonials REST API using FastAPI. Endpoints: GET /api/v1/testimonials (list published testimonials with optional ?featured=true filter for homepage), POST /api/v1/testimonials (public: submit new testimonial for moderation), GET /api/v1/testimonials/admin (admin: list all testimonials with status filter pending/published), PUT /api/v1/testimonials/{id} (admin: approve/reject/pin/archive testimonial; update status), DELETE /api/v1/testimonials/{id} (admin: delete testimonial). Testimonial fields: customer, location, review, rating (1-5), status (pending/published), source (in-store/google), product_tag, featured, created_at. Admin endpoints require auth. This API supports: TestimonialsGrid, TestimonialsWeddingStories, DashboardTestimonials, AdminTestimonialManager, BridalTestimonials, HomeTestimonials frontend sections.

As a Backend Developer, implement the Gallery REST API using FastAPI. Endpoints: GET /api/v1/gallery (list gallery items with optional ?category= filter for store/events/craftsmanship/collections/bridal/custom-design/festive), GET /api/v1/gallery/{id} (get single gallery item details), POST /api/v1/gallery (admin: upload new gallery photo; accepts multipart/form-data with image file, caption, category, tags), PUT /api/v1/gallery/{id} (admin: update caption/category/tags/order), DELETE /api/v1/gallery/{id} (admin: delete photo), POST /api/v1/gallery/reorder (admin: update display order). Gallery item fields: src, caption, category, tags (array), date, display_order. Admin endpoints require auth. Image storage via local filesystem or object storage. This API supports: GalleryCategoryTabs, GalleryGrid, GalleryFilter, GalleryLightbox, AdminGalleryManager, DashboardStats frontend sections.

As a Backend Developer, implement the Custom Design Request API using FastAPI. Endpoints: POST /api/v1/custom-design (public: submit custom design request; accepts multipart/form-data with name, email, phone, selected_metal, selected_gemstones (JSON array), selected_styles (JSON array), selected_occasions (JSON array), budget_note, inspiration_notes, inspiration_images (array of image files)); GET /api/v1/custom-design (admin: list all custom design requests with status filter); PUT /api/v1/custom-design/{id} (admin: update status and notes); DELETE /api/v1/custom-design/{id} (admin: delete request). Image upload saves files and returns public URLs. Admin endpoints require auth. This API supports: CustomDesignUploadStudio, CustomDesignCTA, CustomDesignMaterialSelector, fa47d6a6 (upload studio) frontend sections.

As a Backend Developer, implement the Contact Inquiry and Newsletter API using FastAPI. Endpoints: POST /api/v1/contact (public: submit contact inquiry; fields: name, mobile, email, purpose, message; validates mobile regex /^[6-9]\d{9}$/, email, message min 10 chars; stores in contact_inquiries table), GET /api/v1/contact (admin: list inquiries with search/status filter), PUT /api/v1/contact/{id} (admin: update status), POST /api/v1/newsletter (public: subscribe email to newsletter; validates email; stores in newsletter_subscriptions with dedup check), GET /api/v1/newsletter (admin: list subscriptions). Admin endpoints require auth. This API supports: ContactForm, WhatsAppConnect (indirectly), CollapseBody footer forms on all pages.

As a Backend Developer and AI Engineer, implement the Virtual Try-On API using FastAPI with LiteLLM routing to Google Nano for image generation. Endpoints: POST /api/v1/ai/virtual-tryon (accepts multipart/form-data with: user_photo (image file), product_id (jewellery to overlay), jewellery_type (necklace/ring/earring/bangle); calls Google Nano banana image generation model via LiteLLM to composite jewellery onto user photo; returns result_image_url), GET /api/v1/ai/virtual-tryon/{job_id} (check async job status and retrieve result). The endpoint validates image size and format, processes asynchronously if needed, and stores results temporarily. Placeholder fallback returns a mock overlaid image if model is unavailable. This supports: HomePremiumFeatures Virtual Try-On CTA and any try-on feature sections.

As a Backend Developer, implement JWT-based authentication middleware for the FastAPI admin endpoints. This includes: POST /api/v1/auth/login (accepts username/password; returns JWT access_token and refresh_token), POST /api/v1/auth/refresh (refresh access token using refresh_token), POST /api/v1/auth/logout (invalidate refresh token), GET /api/v1/auth/me (get current admin user profile). Implement a reusable `get_current_admin` dependency injected into all admin-only routes. JWT tokens should have configurable expiry (default 24h access, 7d refresh). Admin users are seeded in the database. Passwords are bcrypt-hashed. This middleware secures: gold rates admin, appointments admin, products admin, testimonials admin, gallery admin, dashboard stats, contact inquiries, and custom design admin endpoints. NOTE: Basic login/auth UI is already done per rules; this is the backend middleware implementation only.

As a frontend developer, implement the AboutHero section (AboutHero.css) for the About page. This is a static hero section with: decorative CSS elements (`ah-decor-line`, `ah-decor-ornament-top`, `ah-decor-ornament-bottom`, `ah-decor-diamond`), an `ah-label` span reading 'Our Story', an `h1.ah-headline` with italic span for 'of', a fleuron divider using `Gem` icon (size=14) from lucide-react flanked by two `span` elements, a multi-sentence `ah-subheadline` paragraph describing Babubhai Jewellers' heritage from Manek Chowk founding to present, and a closing `ah-gold-line` decorative div. No state or interactivity — purely presentational.

As a frontend developer, implement the AboutLegacy section (AboutLegacy.css) for the About page. This two-column layout section renders: a text column with `alg-section-label`, `h2.alg-heading` with accent span, an ornament divider (`alg-ornament-line` + `alg-ornament-dot`), two narrative paragraphs referencing Manek Chowk founding in 1952, founder Babubhai Desai, and great-grandson Aarav Desai, plus a `alg-pullquote` block with italic quote text. A `philosophyPillars` array of 4 objects (each with icon component from lucide-react — Gem, Heart, Star, Users — plus title and desc) is mapped into `alg-pillar` cards in a second column. No state or interactivity — static two-column narrative layout.

As a frontend developer, implement the AboutMilestones section (AboutMilestones.css) for the About page. This section renders a vertical timeline of 8 milestone cards from an array (`milestones`) spanning 1985–2026. Each entry has: `year`, `title`, `description`, and a dynamic `icon` component (Star, ShieldCheck, Diamond, Globe, Gem, Sparkles, Award, Users from lucide-react). The timeline is rendered via `.am-timeline` with each `.am-card` containing an `.am-dot-wrap > .am-dot` holding the icon, plus year/title/description. A decorative `.am-line` vertical rule and `.am-header` with label, title, and subtitle sit above the timeline. No state hooks — static data-driven render.

As a frontend developer, implement the AboutCraftsmanship section (AboutCraftsmanship.css) for the About page. This section uses `useState(null)` for `hoveredCard` to track which of 3 cards is hovered. The `acr-grid` renders three `.acr-card` elements each with `onMouseEnter`/`onMouseLeave` handlers updating `hoveredCard` index (0, 1, 2). Card 1 features a `Hammer` icon (Heritage badge), Card 2 features `ShieldCheck` (Quality badge), Card 3 features `Leaf` or `Gem` icon. Each card has: `acr-card-image` with icon wrapper, `acr-card-body` with badge dot + label, h3 title, description paragraph, and `acr-card-meta` row with `Star`/`Sparkles` icon. A `qualityBadges` array (ShieldCheck, Award, Gem, Heart icons) is also defined for potential footer badges. Section header has `acr-label`, `acr-title`, and `acr-subtitle`.

As a frontend developer, implement the AboutValues section (AboutValues.css) for the About page. This static section renders a `VALUES` array of 4 objects (Handshake/Trust, Hammer/Craftsmanship, Lightbulb/Innovation, Heart/Customer Care from lucide-react) mapped into `.av-pillar` cards within an `.av-grid`. Each pillar card contains: `av-icon-wrap` with the dynamic Icon component, `av-pillar-title` h3, and `av-pillar-desc` paragraph. Section header includes `av-label` ('Our Pillars'), `av-title` ('The Values We Live By'), and `av-subtitle`. No state or interactivity — pure static grid layout.

As a frontend developer, implement the AboutTeam section (AboutTeam.css) for the About page. This section integrates a 3D canvas element via `@react-three/fiber` and `@react-three/drei`. The `DiamondGem` component uses `useRef`, `useFrame` for per-frame rotation (Y += delta*0.8, X += delta*0.3) and scale lerp toward 1.25 on hover using `THREE.MathUtils.lerp`, and `useMemo` to create an `OctahedronGeometry(1, 0)`. `GemScene` wraps `DiamondGem` in a `Canvas` (camera position [0, 0.3, 3.5], fov 30, alpha true) with ambient and two directional lights. A `TEAM_MEMBERS` array of 5 members (Hasmukh Bhai Shah, Priya Desai, Rajesh Mehta, Ananya Sharma, Vikram Joshi) each with name, role, bio, badge, and initials is mapped into team cards each containing the `GemScene` component and member details. Requires `three`, `@react-three/fiber`, `@react-three/drei` dependencies.

As a frontend developer, implement the AboutCTA section (AboutCTA.css) for the About page. This static CTA section contains: decorative flourish divs (`acta-flourish-tl`, `acta-flourish-br`), a decorative top ornament row (`acta-decor-top`) with two `acta-diamond` spans and three `acta-line` spans (side/center variants), an `h2.acta-headline` with a highlighted `<span>Legacy</span>`, a descriptive paragraph, and two anchor CTAs in `.acta-actions` — a primary button linking to `/Appointment` with `Calendar` icon (size=20) and a ghost button linking to `/Collections` with `Gem` icon (size=20). A mirrored `acta-decor-bottom` ornament row closes the inner content. No state or interactivity.

As a frontend developer, implement the CollapseBody footer section (CollapseBody.css) for the About page. This footer component uses `useState` for a `form` object ({name, mobile, date, purpose}) and a `booked` boolean. `handleChange` updates individual form fields and resets `booked` to false; `handleSubmit` prevents default and sets `booked` to true. The footer grid (`cb-grid`) contains: a brand column with `cb-emblem` ('B'), brand name with `<span>Jewellers</span>`, blurb paragraph, and `trustBadges` array (ShieldCheck/BIS Hallmarked, Award/916 Purity, Sparkles/Certified Diamonds) mapped into `cb-badge` spans; an Explore links column mapping `quickLinks` (Dashboard, Gallery, Bridal, About); a Services + Contact column mapping `serviceLinks` (Custom Design, Wedding Planner, AI Recommendation, Gallery); a contact info column with MapPin/Phone/Mail/Clock icons; and an inline appointment booking form with name/mobile/date/purpose fields, submit handler, and a `booked` success state showing `CheckCircle2` confirmation. Social icons (Instagram, Facebook, Youtube, MessageCircle) appear in footer bottom bar.

As a frontend developer, implement the ContactHero section for the Contact page. This is a purely static decorative hero with three aria-hidden floating gold studs (ch-stud ch-stud-1/2/3 divs), a 'Connect With Us' pre-headline label (ch-label), an h1 with ch-headline-accent span reading 'Get in Touch', a subheadline paragraph, a ch-divider composed of two ch-divider-line spans flanking a ch-divider-diamond span, and an intro paragraph referencing Babubhai Jewellers with a strong tag. No state or interactivity. Import from '../styles/ContactHero.css'.

As a frontend developer, implement the ContactInfo section for the Contact page. Renders a CONTACT_CARDS array of 4 cards (address, phone, email, hours) using MapPin, Phone, Mail, Clock, ExternalLink icons from lucide-react. The 'hours' card renders a nested hours array with day/time pairs and a festival note. Includes a Three.js 3D accent orb via useAccentOrb(canvasRef) custom hook: creates a THREE.Scene with an IcosahedronGeometry (r=1.2, detail=3) gold mesh (MeshStandardMaterial, metalness 0.8), two TorusGeometry rings (r=1.55 and r=1.75) with semi-transparent gold/silver materials, AmbientLight, and responsive canvas resize logic using getBoundingClientRect on the parent element with devicePixelRatio scaling. Import from '../styles/ContactInfo.css' and 'three'.

As a frontend developer, implement the GoogleMap section for the Contact page. Renders a static Google Maps iframe embed using a hardcoded embedUrl pointing to Manek Chowk Ahmedabad (pb=!1m18 coordinates). Includes a gm-heading with h2 'Visit Our Showroom', a gm-map-frame wrapping the iframe with allowFullScreen, loading='lazy', and referrerPolicy='no-referrer-when-downgrade'. Below the map, renders a gm-location block with MapPin icon (size=17) in the h3, a gm-divider, a directions paragraph referencing Sidi Saiyyed Mosque and Bhadra Fort landmarks, and a gm-dir-link anchor with Navigation icon (size=17) linking to googleMapsDirUrl for Google Maps directions. No state. Import from '../styles/GoogleMap.css' and lucide-react.

As a frontend developer, implement the ContactForm section for the Contact page. Uses useState for form (name, mobile, email, purpose, message fields mapped to INITIAL_FORM), errors object, submitting boolean, and submitted boolean. Renders a PURPOSE_OPTIONS select with 6 options. The validate() function checks: name non-empty, mobile regex /^[6-9]\d{9}$/, email regex, purpose selection, message min 10 chars. handleSubmit calls validate(), sets errors or triggers a 1500ms simulated async submission. On success, renders a cf-success panel with CheckCircle2 (size=36) icon, 'Thank You for Reaching Out' title, and an ArrowLeft + handleReset button to return. Uses MessageSquare, User, Phone, Mail, ChevronDown, Send, ShieldCheck, AlertCircle icons from lucide-react. Each field clears its own error on handleChange. Import from '../styles/ContactForm.css'.

As a frontend developer, implement the WhatsAppConnect section for the Contact page. Uses useRef(canvasRef) and a Three.js WebGLRenderer (alpha: true, antialias: true) with PerspectiveCamera (FOV 45, position z=8). Creates 60 floating gold particles via THREE.BufferGeometry with Float32Array positions and sizes attributes, rendered as THREE.Points with PointsMaterial (color 0xD4AF37, AdditiveBlending, transparent opacity 0.7). Adds two decorative tori: TorusGeometry(1.4, 0.02) in gold (opacity 0.18) and TorusGeometry(1.9, 0.015) in silver (opacity 0.1), both with AdditiveBlending. Animation loop rotates particles (y+=0.0006, x+=0.00025) and both tori axes. Responsive resize via getBoundingClientRect on canvas.parentElement. Cleanup cancels requestAnimationFrame and removes resize listener. Import from '../styles/WhatsAppConnect.css' and 'three'.

As a frontend developer, implement the CollapseBody footer section for the Contact page. This component may already exist from the About page (task 73bc7efe). Uses useState for email string and subscribed boolean. Renders three navigation link columns (exploreLinks: 5 items, experienceLinks: 5 items, companyLinks: 4 items) and a cb-brand block with ShieldCheck, Award, Gem badge icons. Renders socials row with Instagram, Facebook, Youtube, MessageCircle icons from lucide-react. Newsletter form uses handleSubmit which sets subscribed=true and clears email on non-empty trim. Displays current year via new Date().getFullYear(). cb-badges render 'BIS Hallmarked', '916 Pure Gold', 'Certified Diamonds'. Tagline references heirloom-quality gold, diamond, and bridal jewellery since 1962. Import from '../styles/CollapseBody.css'.

As a frontend developer, implement the GalleryHero section for the Gallery page. Uses useState for searchText, useRef, and useMemo. Features a @react-three/fiber Canvas (camera position [0,0,6], fov 45, dpr [1,1.5], alpha:true) with four animated TorusRing components using useFrame for per-frame rotation via Math.sin/cos on elapsedTime. Torus rings: gold (#D4AF37, radius 2.8), bright gold (#FFD700, radius 3.4), cream (#F5E6B3, radius 2.2), silver (#C0C0C0, radius 3.8) — all with meshBasicMaterial and wireframe false. SceneContent adds ambientLight and pointLight. COLLECTION_STATS array displays 4 stats: 500+ Collections, 12K+ Pieces Crafted, 85+ Years Legacy, 100% BIS Hallmarked. Search bar with Search and SlidersHorizontal icons, X clear button (handleClear), onChange handler, onKeyDown prevents Enter default. OrbitControls from @react-three/drei. gh-canvas-wrap wraps the Canvas absolutely behind hero content.

As a frontend developer, implement the GalleryFilter section for the Gallery page. Uses useState for activeCategory (default 'all'), priceRange ([0, 500000]), sortBy ('featured'), and sortOpen; useRef for sortRef with click-outside detection via useEffect/mousedown. CATEGORIES array has 8 items (all, gold, diamond, bridal, silver, mens, kids, events) each with id, label, icon from lucide-react (Gem, Circle, Diamond, Heart, Users, Gift, Camera), and count. SORT_OPTIONS has 5 options (featured, newest, price_asc, price_desc, popular). Renders gf-pills-row with category pills showing active state, a price range slider (handlePriceChange updates min bound, getFillWidth computes % fill, formatPrice formats as ₹L/₹K), a sort dropdown (sortRef, nv-open class toggle), activeFiltersCount badge showing combined filter count, filteredCount display from active category, and RotateCcw reset button (handleReset). CheckCircle2 icon on selected sort option.

As a frontend developer, implement the GalleryGrid section for the Gallery page. Uses useState, useEffect, useRef, useMemo, useCallback, and imports * as THREE from 'three'. ALL_PRODUCTS contains 10+ jewellery items each with id, name, category, material, weight, price, rating, and Unsplash image URL. Renders a masonry/grid layout of product cards with Heart (wishlist toggle), Eye (quick view), Star (rating display), SlidersHorizontal, ChevronDown icons. Includes PackageOpen for empty state and Loader2 for loading spinner state. Uses useMemo to derive filtered/sorted product list and useCallback for event handlers. THREE.js is imported for potential WebGL card hover shimmer effects. Product cards display image, name, category badge, material, weight, price, and star rating. Supports pagination or infinite scroll with load-more functionality.

As a frontend developer, implement the GalleryCategoryTabs section for the Gallery page. Uses useState, useRef, useEffect and imports * as THREE from 'three', Canvas and useFrame from @react-three/fiber, OrbitControls from @react-three/drei. CATEGORY_TABS array has 4 tabs: store (Building2), events (Camera), craftsmanship (Wrench), collections (Gem). GALLERY_DATA object maps each tab key to an array of 6 items each with id, title, desc, badge, and img (Unsplash URLs). Renders a tab bar where clicking a tab updates active key state; tab panel displays a grid of image cards with title, desc, and badge overlay. ImageOff icon used for image error fallback state. THREE.js Canvas renders a decorative 3D background scene using useFrame animation. OrbitControls included for interactive camera. Tab switching triggers smooth transition between store/events/craftsmanship/collections photo grids.

As a frontend developer, implement the GalleryEngagementCTA section for the Gallery page. Uses useState for form ({name, mobile, description}), fileName, submitted, selectedCollections (array), and shared. COLLECTIONS array has 5 options: gold, diamond, bridal, silver, custom. Renders a gec-grid with two cards: Card 1 — Custom Design Upload form with Upload icon, name/mobile text inputs and description textarea (handleChange), file input (handleFileChange sets fileName), handleCustomSubmit sets submitted:true showing CheckCircle2 success state. Card 2 — WhatsApp Share card with ShoppingBag/Image icons, COLLECTIONS checkbox list (toggleCollection adds/removes from selectedCollections array), handleWhatsAppShare opens wa.me/917900012345 with pre-encoded text listing selected collection labels, sets shared:true showing confirmation. MessageCircle, Sparkles, Calendar icons used for section headings. Both cards have gec-icon-wrap with gec-icon-bg decorative background div.

As a frontend developer, implement the CollapseBody footer section for the Gallery page. This component may already exist from previous pages (About, Contact). Uses useState for form ({name, mobile, date, purpose}) and booked boolean. Renders a cb-footer with cb-shimmer decorative element and cb-inner container. cb-grid has 4 columns: Brand col — cb-emblem 'B' mark, 'Babubhai Jewellers' brand name with highlighted span, 'Timeless Elegance' tagline, blurb paragraph, and cb-badges row showing ShieldCheck (BIS Hallmarked), Award (916 Purity), Sparkles (Certified Diamonds) trust badges. Explore col — quickLinks array (Dashboard, Gallery, Bridal, About) as cb-link anchors. Services col — serviceLinks array (Custom Design, Wedding Planner, AI Recommendation, Gallery). Contact/Booking col — MapPin, Phone, Mail, Clock contact details plus an appointment booking form with name/mobile/date/purpose fields, handleSubmit sets booked:true showing CheckCircle2 confirmation. Social icons: MessageCircle (WhatsApp), Instagram, Facebook, Youtube in footer bottom bar.

As a frontend developer, implement the TestimonialsHero section for the Testimonials page. Features a 3D Gold Mandala rendered via @react-three/fiber Canvas with a custom GoldMandala component. The mandala geometry is built using THREE.Shape with 12 petals using quadratic curves and ExtrudeGeometry (depth 0.08, bevel enabled). Uses useMemo for geometry, ringGeo (TorusGeometry 2.32 radius), innerRingGeo (TorusGeometry 0.58), gold material (#D4AF37, metalness 0.85, roughness 0.22), and accentMat (#FFD700 with emissive #3d2e00). useFrame animates groupRef with sin-based rotation.z and constant rotation.y (0.12 rad/s), meshRef with sin-based rotation.x. Canvas uses camera position [0,0,5.5] fov 40, dpr [1,1.5], alpha transparent. MandalaScene wraps GoldMandala with ambient and directional lights. Imports TestimonialsHero.css.

As a frontend developer, implement the TestimonialsGrid section for the Testimonials page. Renders a grid of at least 8 testimonial cards from a TESTIMONIALS array (Priya Sharma, Amit Patel, Meera Desai, Rajesh Khanna, Sneha Kapoor, Vikram Joshi, Ananya Reddy, and more). Each card displays initials avatar, name, role (city/type), star rating (1-5 using Star from lucide-react), quote text, and purchase label with Gem or ShoppingBag icons from lucide-react. Uses useRef and useEffect with THREE (three.js) for a WebGL canvas background or particle effect decorating the grid. Imports TestimonialsGrid.css.

As a frontend developer, implement the TestimonialsWeddingStories section for the Testimonials page. Renders 3 featured wedding story cards from weddingStories array (Priya & Arjun Mehta Dec 2024, Ayesha & Vikram Patel Oct 2024, Sneha & Rohan Desai Feb 2025). Each card shows customerName, weddingDate with Calendar icon (lucide-react), excerpt text, imageLetter avatar, and an ArrowRight CTA. Features a 3D particle background via @react-three/fiber Canvas with StoryScene component rendering 18 GoldParticle meshes (octahedronGeometry) using @react-three/drei Float for hover/float animation. Particles use useMemo with goldShades array (#D4AF37, #F5E6B3, #FFD700, #C9A84C, #E8D48B). Ambient and point lights in scene. Imports TestimonialsWeddingStories.css.

As a frontend developer, implement the TestimonialsCTA section for the Testimonials page. Features a 3D JewelleryOrb rendered via @react-three/fiber Canvas with @react-three/drei OrbitControls and Sphere. JewelleryOrb uses meshRef, ringRef, ringRef2 via useRef; useFrame animates rotation.y (0.25 rad/s), sin-based rotation.x for core gem, ring.z (0.35) and ring.x (0.30), ringRef2.z (-0.28) and ringRef2.y (0.22). Core Sphere uses meshPhysicalMaterial (color #FFD700, clearcoat 0.6), inner glow Sphere (transparent opacity 0.55), two torusGeometry orbital rings (silver #C0C0C0 and gold #D4AF37), and 18 floating particle sphereGeometry meshes positioned via theta/phi math. CTA section includes Calendar, MessageSquare, ShieldCheck, Clock, Star icons from lucide-react as trust badges or action buttons. Imports TestimonialsCTA.css.

As a frontend developer, implement the CollapseBody footer section for the Testimonials page. This component may already exist from Contact and Gallery pages. Uses useState for email and subscribed state. Renders cb-footer with cb-inner containing: cb-brand block (Babubhai Jewellers logo, 'Timeless Elegance Since 1962' tagline, description paragraph, cb-badges with ShieldCheck/BIS Hallmarked, Award/916 Pure Gold, Gem/Certified Diamonds); cb-cols nav with three link columns — Explore (Collections, Bridal, Custom Design, Gallery, Gold Rate), Experience (AI Recommendation, Wedding Planner, Book Appointment, Testimonials, Dashboard), Company (About Us, Contact, Appointments, Admin); social icons row with Instagram, Facebook, Youtube, MessageCircle from lucide-react; newsletter form with email input, handleSubmit toggling subscribed state showing Check icon on success; copyright with dynamic year via new Date().getFullYear(). Imports CollapseBody.css.

As a frontend developer, implement the CollectionsHero section for the Collections page. Uses CollectionsHero.css and useState for sortOpen toggle state. Renders ch-root section with decorative ch-bg-wash and ch-bg-lines background layers. Includes ch-breadcrumb nav with Home → Collections path using ChevronRight icon (size 13). Title row has ch-title with ch-title-accent span and ch-tagline 'Explore Our Finest Jewellery'. Bottom row contains ch-count-badge showing ch-count-dot, count '86', and 'Exquisite Pieces' text, plus ch-sort-toggle button with SlidersHorizontal icon (size 18) that toggles sortOpen state via aria-expanded.

As a frontend developer, implement the CollectionsFilter section for the Collections page. Uses CollectionsFilter.css with complex multi-state management: openDropdown, category (CATEGORIES array: 11 items), metal (METAL_TYPES: 5 items), priceRange ([5000, 5000000] with 5000 step), occasion (OCCASIONS: 8 items), bisCertified, newArrivals. Has parallel mobile modal temp states: tempCategory, tempMetal, tempPriceRange, tempOccasion, tempBisCertified, tempNewArrivals. filterRef with outside-click useEffect. Computed activeFilterCount and hasActiveFilters. clearAll resets all filters. openMobileModal syncs temp state. formatPrice utility formats to ₹K/L/Cr. Icons: ChevronDown, X, SlidersHorizontal, Check from lucide-react. Desktop shows inline dropdowns, mobile shows modal overlay with apply/cancel actions.

As a frontend developer, implement the CollectionsGrid section for the Collections page. Uses CollectionsGrid.css with useState for wishlist/hover interactions. Renders a PRODUCTS array of 12 items including '22K Gold Kundan Necklace Set', 'Diamond & Emerald Polki Choker', 'Antique Gold Jhumka Earrings', 'Temple Gold Lakshmi Haar', 'Platinum Solitaire Ring', '925 Silver Filigree Bangles Set', 'Diamond Tennis Bracelet', 'Meenakari Gold Pendant Set', 'Ruby & Gold Cocktail Ring', 'Bridal Kundan Matha Patti', 'Pearl & Gold Chandbali Earrings', and more. Each product card shows Unsplash image (w=600&h=800&fit=crop), metal type badge, price, star rating with review count, isNew badge, bisHallmark badge. Card actions use Heart (wishlist), Eye (quick view), and Star icons from lucide-react. Responsive grid layout.

As a frontend developer, implement the CollectionsPagination section for the Collections page. Uses CollectionsPagination.css with useState for currentPage (default 1) and perPage (default 12). PER_PAGE_OPTIONS [12, 24, 36], TOTAL_ITEMS=87. computePages() function generates smart page array with ellipsis logic for >7 pages. goTo() validates page bounds, handlePerPage resets to page 1. Uses Three.js (accentRef, animRef) for gold shimmer accent bar — WebGLRenderer with alpha/antialias, OrthographicCamera, PlaneGeometry(2,2), ShaderMaterial with uTime and uAspect uniforms, custom GLSL vertex and fragment shaders for animated shimmer effect. ChevronLeft/ChevronRight icons for prev/next. Shows 'Showing X–Y of 87 items' text.

As a frontend developer, implement the CollectionsCTA section for the Collections page. Uses CollectionsCTA.css with @react-three/fiber Canvas and @react-three/drei (Float, Sphere, Torus, MeshDistortMaterial). Particle component renders either IcosahedronGeometry (position[1] > 0.5) with meshPhysicalMaterial (metalness 0.1, roughness 0.15, clearcoat 0.4, transparent opacity 0.85) or TorusGeometry with meshStandardMaterial (metalness 0.9). CenterJewel renders Sphere with MeshDistortMaterial (color #D4AF37, distort 0.25, speed 1.5) plus two Torus rings (silver metalness 0.95, gold emissive #D4AF37). CtaScene generates 14 particles in orbital positions using goldColors ['#D4AF37','#FFD700','#F5E6B3','#E5C667'] and silverColors with useMemo. CTA buttons use Calendar and MessageCircle icons from lucide-react for appointment booking and WhatsApp contact.

As a frontend developer, implement the Footer section for the Collections page. Uses Footer.css and may already exist from Gallery or Testimonials pages. Renders bj-footer with bj-footer-glow decorative element. Brand section has bj-brand-mark with 'B' emblem, 'Babubhai Jewellers Since 1962', tagline paragraph, and bj-trust-badges (BIS Hallmark Certified, 916 Hallmark Gold). Two link columns: Explore (Collections, Bridal, Custom Design, Gallery, Gold Rate) and Experience (AI Recommendation, Wedding Planner, Testimonials, Book Appointment, About Us). Contact section uses MapPin, Phone, Mail, Clock icons. WhatsApp integration via MessageCircle. Social links for Instagram, Facebook, YouTube using respective lucide-react icons. Dynamic year via new Date().getFullYear(). Copyright footer bar.

As a frontend developer, implement the Navbar section for the Bridal page. This component may already exist from previous pages (Gallery, Testimonials, Collections). It uses useState for `scrolled`, `profileOpen`, and `mobileOpen` states, useRef for `profileRef` for outside-click detection, and useEffect for scroll listener (window.scrollY > 12 triggers `nv-scrolled` class) and mousedown event for closing the profile dropdown. Renders NAV_LINKS array (7 links including Bridal, Dashboard, Gallery, Custom Design, Wedding Planner, AI Recommendation, About) with lucide-react icons (ChevronDown, User, Settings, Calendar, LogOut, Menu, X). Profile dropdown shows avatar initials 'AD', name 'Aarav Desai', Administrator role with animated chevron. Imports Navbar.css.

As a frontend developer, implement the Navbar section for the Appointment page. This component already exists from previous pages (Collections, Bridal, Testimonials). Reuse the existing Navbar component that includes: NAV_LINKS array with 8 routes (Dashboard, Gold Rate, Collections, Bridal, Custom Design, Gallery, Appointments, Contact), useState for menuOpen and ddOpen, useRef for userRef with outside-click detection via useEffect/mousedown listener, nv-brand with 'B' mark and 'Babubhai Jewellers / Timeless Elegance' branding, nv-links nav rendering all NAV_LINKS as anchor tags, nv-user-wrap with ChevronDown caret rotation, dropdown menu with UserCog/LayoutDashboard/LogOut lucide icons, and mobile hamburger Menu/X toggle. Import Navbar.css. Verify the Appointments link is active/highlighted on this page.

As a frontend developer, implement the Navbar section for the AI Recommendation page. This component may already exist from previous pages (Custom Design, Wedding Planner). It uses useState for scrolled, profileOpen, and mobileOpen states, useRef for profileRef (click-outside detection), and useEffect hooks for scroll listener and mousedown listener. Renders NAV_LINKS array with 'AI Recommendation' as the active route. Includes ChevronDown, User, Settings, Calendar, LogOut, Menu, X from lucide-react. Profile dropdown toggles with aria-expanded, shows avatar 'AD' for Aarav Desai (Administrator), with nv-scrolled class applied when scrollY > 12. Mobile hamburger menu toggles nv-mobile-open state. Import from '../styles/Navbar.css'.

As a frontend developer, implement the AdminSidebar section for the Admin page using Sidebar.css. Build the Sidebar component with three useState hooks: collapsed (boolean), openKey (default 'collections'), and activeKey (default 'dashboard'). Render a nav.sb-root containing sb-shell that applies sb-collapsed class when collapsed. Include sb-brand with Gem icon, brand name, and a PanelLeftClose toggle button. Map over NAV_ITEMS array (Dashboard, Gold Rates with '24k' count and children, Collections with count 6 and children, Appointments with count 12, Testimonials, Gallery) — each with lucide icons (LayoutDashboard, TrendingUp, Diamond, CalendarCheck, Quote, Images). Items with children render an accordion with ChevronRight that expands sub-links; toggleParent auto-expands collapsed sidebar on parent click. Collapsed state shows only icons with data-tip tooltips. Apply sb-active class based on activeKey.

As a frontend developer, implement the Navbar section for the Dashboard page. This component uses useState for scrolled, profileOpen, and mobileOpen states, plus useRef for click-outside detection on the profile dropdown. Includes scroll listener (passive) that toggles nv-scrolled class, NAV_LINKS array with 7 routes including Dashboard/Gallery/Bridal/Custom Design/Wedding Planner/AI Recommendation/About. Features a brand logo with 'B' mark and 'Babubhai Jewellers / Timeless Elegance' text, desktop nav links, and a profile dropdown triggered by nv-profile-btn showing avatar 'AD', name 'Aarav Desai', role 'Administrator', with ChevronDown rotation on open. Dropdown head shows name and email. Uses lucide-react icons: ChevronDown, User, Settings, Calendar, LogOut, Menu, X. Mobile hamburger menu with X toggle. Component may already exist from AI Recommendation or Admin pages — reuse or extend as needed.

As a Backend Developer and AI Engineer, implement the AI Jewellery Recommendation API using FastAPI with LiteLLM routing to GPT. Endpoints: POST /api/v1/ai/recommend (accepts: occasion, budget_min, budget_max, gender, style preferences, metal_purity as JSON; uses LiteLLM/Langchain to call GPT-5.4 model to generate jewellery recommendations as structured JSON matching available products; returns array of recommended product IDs with match_percentage and reasoning), POST /api/v1/ai/price-alert (accepts: product_id, user_email, target_price; stores price alert subscription). The recommend endpoint should cross-reference available products from the database and return top matches with AI-computed match scores. Include Langchain prompt templates for consistent jewellery recommendation context. This API supports: AIRecommendationResults, AIRecommendationFilters, AIRecommendationHero, AIRecommendationDetails, HomePremiumFeatures frontend sections.

As a Backend Developer, implement the Admin Dashboard Statistics API using FastAPI. Endpoints: GET /api/v1/admin/stats (returns aggregate stats: total_products count, pending_appointments count with next appointment info, today_gold_rate with change, gallery_items count, recent_activity), GET /api/v1/admin/stats/appointments-summary (appointments by status counts, today's count, weekly trend), GET /api/v1/admin/stats/products-summary (by category counts, low stock alerts). All endpoints require admin authentication. Computes stats via database aggregation queries. This API supports: DashboardStats, AdminDashboard, DashboardHeader frontend sections.

As a Backend Developer, implement the Price Request / Product Enquiry API using FastAPI. Endpoints: POST /api/v1/enquiry (public: submit price request for a product; fields: product_id, name, mobile, email, message; stores in contact_inquiries with purpose='price_request'; sends acknowledgement), GET /api/v1/enquiry (admin: list all enquiries with product join), PUT /api/v1/enquiry/{id} (admin: update status). This supports the 'Request Price' CTA on CollectionsGrid, BridalSetsGrid, AIRecommendationResults, and HomeFeaturedCollections. Admin endpoints require auth. Validates Indian mobile number format.

As a Backend Developer, implement the Wedding Planner API using FastAPI. Endpoints: POST /api/v1/wedding-planner/suggestions (accepts: budget, theme, skin_tone, style, occasion; queries products with relevant categories and returns filtered jewellery sets with match_score based on budget allocation percentages for bride/groom/gifts/additional); POST /api/v1/wedding-planner/save (save budget plan: budget, allocations, currency, selected_items to a planner session), POST /api/v1/wedding-planner/customization (accepts customization request with metal, gemstones, styles, occasions, budget_note, inspiration_images; stores as custom_design_request with source='wedding_planner'). This supports: WeddingPlannerBudgetPlanner, WeddingPlannerSuggestions, WeddingPlannerCustomization, WeddingPlannerApprovals frontend sections.

As a frontend developer, implement the GalleryLightbox section for the Gallery page. Uses useState for currentIndex and open state, useEffect for keyboard navigation (ArrowLeft, ArrowRight, Escape keys), useCallback for prev/next/close handlers. galleryItems array contains 4+ jewellery objects each with id, name, sku, category, description, price, purity, weight, materials, hallmark, and Unsplash image URL (800x800). Renders a full-screen overlay modal with X close button (lucide-react), ChevronLeft/ChevronRight navigation arrows, large product image, and right-panel detail section showing: product name, SKU badge, category, full description paragraph, price in large type, and a specs grid with Gem (purity), Weight icon, ShieldCheck (hallmark), Award icons alongside purity/weight/materials/hallmark values. CheckCircle2 confirms BIS certification. Lightbox triggered by clicking gallery grid items, supports swipe-like prev/next traversal through galleryItems array.

As a frontend developer, implement the BridalHero section for the Bridal page. This is a 3D-heavy hero section using @react-three/fiber Canvas, OrbitControls, Environment, and Float from @react-three/drei, plus THREE.js directly. The NecklaceModel component uses groupRef, ringRef, pendantRef, and chainRef with useFrame animations: groupRef rotates on Y axis sinusoidally (0.3 speed), ringRef oscillates on Z (0.5 speed), pendantRef rotates on Y (0.4 speed), chainRef rotates on Y (0.25 speed). Materials include goldMat (#D4AF37, metalness 0.95), diamondMat (white, emissiveIntensity 0.35), and paleGoldMat (#E8C547). Renders torusGeometry for outer ring (args [1.35, 0.09, 16, 80]) and inner ring (args [1.15, 0.05, 12, 64]), 12 decorative sphereGeometry beads positioned via trigonometry around ring circumference. 20 CSS particle elements generated from PARTICLES array with randomised left/animationDelay/animationDuration. Uses lucide-react Sparkles and Calendar icons. Imports BridalHero.css.

As a frontend developer, implement the BridalCollectionFilters section for the Bridal page. Uses useState for `scrolled`, `metal`, `diamond`, `type`, `priceMin` (default 5000), `priceMax` (default 1500000), `openDropdown`, and `activePreset`. Uses useRef for `rootRef` and `priceRef`, useCallback for memoised handlers. Scroll detection sets `scrolled` at window.scrollY > 80 for box-shadow transition. Outside-click via mousedown closes dropdowns. Filter options: METAL_OPTIONS (Gold/White Gold/Rose Gold with color dot classes bcf-dot-gold/bcf-dot-whitegold/bcf-dot-rosegold), DIAMOND_OPTIONS (Certified/Premium), TYPE_OPTIONS (Sets/Necklaces/Earrings/Rings). PRICE_PRESETS with 5 ranges (Under 50K to 10L+). Dual-handle price range slider with min/max clamping (val <= priceMax - 10000). Active preset highlighting. Reset/clear functionality with RotateCcw icon. Check and X icons from lucide-react. Imports BridalCollectionFilters.css.

As a frontend developer, implement the BridalSetsGrid section for the Bridal page. Renders a grid of 9+ PRODUCTS (including Royal Kundan Bridal Set, Polki Diamond Choker, Temple Jewellery Lakshmi Haar, Meenakari Bridal Bangles, Diamond & Emerald Rani Haar, Jadau Matha Patti Set, Solitaire Diamond Nose Ring, Antique Gold Waist Belt, Platinum Bridal Tennis Bracelet) with metal types (22k Gold, 18k Gold, Platinum), metalClass (bsg-metal-gold, bsg-metal-platinum), diamondGrade (VS1/F, VVS2/E, etc.), priceMin/priceMax ranges, Unsplash image URLs, and hue colors. Uses useState, useRef, useEffect, useCallback, useMemo. Embeds @react-three/fiber Canvas with OrbitControls, PerspectiveCamera, Environment from @react-three/drei and THREE.js for 3D product previews. Card interactions include Heart (wishlist), Eye (quick view), MessageCircle (enquiry), ChevronDown, Gem, Sparkles, AlertCircle from lucide-react. Imports BridalSetsGrid.css.

As a frontend developer, implement the BridalCustomDesignCTA section for the Bridal page. Features a 3D BridalNecklace component using @react-three/fiber Canvas, useFrame, @react-three/drei OrbitControls, Float, Environment, and THREE.js. The BridalNecklace uses groupRef, centerGemRef, sideGemsRef (array) with animations: groupRef rotation.y sinusoidal (0.3) and position.y float (0.5), centerGemRef rotation.z oscillation (0.7), sideGemsRef forEach incremental rotation.y (0.006 + i*0.002). Materials: goldMat (#D4AF37, metalness 0.92, roughness 0.18), diamondMat (white, emissiveIntensity 0.12), accentGemMat (#fff5e6, emissive #ffe0b2), cordMat (#b8941f). Chain built from CatmullRomCurve3 with 64-segment sinusoidal path rendered via TubeGeometry (args [80, 0.028, 12, true]). 7 pendant positions along chain via getPointAt, center pendant (i===3) at scale 0.2, others at 0.08. Icons: Upload, CalendarDays, Sparkles, Palette, Gem, CheckCircle2 from lucide-react. Imports BridalCustomDesignCTA.css.

As a frontend developer, implement the BridalTestimonials section for the Bridal page. Uses useState for active testimonial index, useCallback for navigation handlers, useMemo for FloatingParticles positions (Float32Array of count*3 random values). TESTIMONIALS array has 4 entries (Priya & Arjun Mehta, Riya Sharma, Ananya & Vikram Patel, Meera Desai) with initials, weddingDate, jewellery type, rating (all 5 stars), and Unsplash images. FloatingRing 3D component renders torusGeometry (args [2.6, 0.04, 32, 180]) with gold material (metalness 0.9, emissive #B8902B, emissiveIntensity 0.25). FloatingParticles renders THREE points bufferGeometry with bufferAttribute for 40 random particle positions. @react-three/fiber Canvas with OrbitControls hosts both 3D elements. Carousel navigation via ChevronLeft/ChevronRight, Star, Quote, Gem, Calendar icons from lucide-react. Imports BridalTestimonials.css.

As a frontend developer, implement the BridalAppointmentCTA section for the Bridal page. Contains a controlled form with useState for `form` object (name, email, phone, datetime, message fields) and `submitted` boolean. handleChange resets submitted state on new input; handleSubmit (e.preventDefault) sets submitted to true showing success state. 3D GemScene via @react-three/fiber Canvas with Suspense wrapper: 14 FloatingGem components (octahedronGeometry args [1, 0]) each with individual position, color (cycling gold #D4AF37, silver #C0C0C0, white #FFFFFF), scale (0.18–0.50), speed (0.6–2.0), rotSpeed (0.2–1.2). FloatingGem useFrame animates position.y sinusoidally and increments rotation.y/rotation.x per tick. Lighting: ambientLight (0.7), directionalLight (position [4,6,4], intensity 0.9), pointLight (position [-3,2,3], color #FFD700). BENEFITS array (4 items) with UserCheck, Gem, ShieldCheck, Clock icons. Icons also include Sparkles, CalendarDays, CheckCircle2, MessageCircle from lucide-react. Imports BridalAppointmentCTA.css.

As a frontend developer, implement the CollapseBody footer section for the Bridal page. This component may already exist from Gallery (ca1dff33), Testimonials (c01d8f1c), or Collections pages. Uses useState for `form` object (name, mobile, date, purpose) and `booked` boolean. handleChange resets booked on input; handleSubmit (e.preventDefault) sets booked to true. Renders footer with cb-shimmer decorative overlay and cb-grid layout containing: brand column (cb-emblem 'B', brand name 'Babubhai Jewellers', tagline 'Timeless Elegance', blurb text, trustBadges with ShieldCheck/Award/Sparkles icons for BIS Hallmarked/916 Purity/Certified Diamonds). Navigation columns: quickLinks (Dashboard, Gallery, Bridal, About) and serviceLinks (Custom Design, Wedding Planner, AI Recommendation, Gallery). Contact info with MapPin, Phone, Mail, Clock icons. Social links with Instagram, Facebook, Youtube icons. Appointment booking mini-form inline. Imports CollapseBody.css.

As a frontend developer, implement the AppointmentHero section for the Appointment page. This section uses Three.js (not React Three Fiber) with a canvasRef and a full WebGLRenderer setup inside a useEffect. The 3D scene contains: PerspectiveCamera at position (0, 1.2, 6.5) looking at (0, 0.15, 0); 5 lights (AmbientLight 0xfff8e7, DirectionalLight keyLight 0xe8d5a3, fillLight 0xc0a860, rimLight 0xffffff, PointLight topLight 0xffd700); a THREE.Group with goldMat (MeshStandardMaterial color 0xd4af37 metalness 0.85 roughness 0.18), accentMat (0xffd700 metalness 0.95), gemMat (white transparent opacity 0.92), and darkGemMat (0xf5e6b3 transparent opacity 0.85); a TorusGeometry band (r=0.85, tube=0.07) and inner band (r=0.72), plus 9 OctahedronGeometry gems placed around the torus at computed angular positions; animation loop with group rotation. Overlay content includes Gem, ShieldCheck, Award, CalendarDays, ArrowRight lucide icons. Import AppointmentHero.css. Handles window resize for renderer and camera aspect ratio.

As a frontend developer, implement the AppointmentForm section for the Appointment page. This is a multi-step form with useState hooks for: step (0-2, steps array ['Contact','Schedule','Review']), form (INITIAL_FORM with fields name/mobile/email/date/time/purpose/notes), errors (INITIAL_ERRORS), touched, submitted, submitting, and mousePos ({x:50,y:50}). Includes useRef cardRef for mouse-tracking parallax effect via handleMouseMove/handleMouseLeave useCallback handlers. PURPOSE_OPTIONS has 7 options (consultation, custom-design, exchange-buyback, bridal, investment, general). Step 0 collects name and mobile; Step 1 collects date, time, and purpose; Step 2 is review. validateStep function validates required fields per step with inline error messages. updateField performs real-time validation: name min 2 chars, mobile regex /^[6-9]\d{9}$/, email optional regex, date/time/purpose required. handleSubmit sets submitting true, simulates async delay, sets submitted true. Lucide icons: Calendar, Clock, User, Mail, Phone, MessageSquare, ChevronRight, ChevronLeft, CheckCircle, ShieldCheck, Award, Gem, Sparkles. Import AppointmentForm.css.

As a frontend developer, implement the AppointmentFAQ section for the Appointment page. Uses both custom accordion logic and a Three.js/React Three Fiber 3D canvas. faqItems array has 5 FAQ entries with JSX answer content (paragraphs with strong tags and anchor links for phone numbers). useState tracks openId for accordion expand/collapse toggle. Each FAQ item uses a ref and useEffect to animate max-height for smooth CSS expand/collapse (accordion pattern with ChevronDown rotation). Also integrates @react-three/fiber Canvas and @react-three/drei OrbitControls alongside a useFrame animation hook for the 3D decorative element. The THREE.js import is used for geometry/material directly inside the R3F component. Lucide icons: ChevronDown, ArrowRight. FAQ answers reference consultation duration (30–45 min), cancellation policy (2hr advance notice), phone number +91 98765 43210, booking timelines (24–48hrs regular, 4–6 weeks bridal), and peak wedding season dates (Nov–Feb, Apr–May). Import AppointmentFAQ.css.

As a frontend developer, implement the CollapseBody footer section for the Appointment page. This component already exists from previous pages (Testimonials, Bridal). Reuse the existing CollapseBody component which includes: useState for email ('') and subscribed (false); handleSubmit that sets subscribed=true and clears email if non-empty; cb-brand block with 'Babubhai Jewellers' logo link to /Dashboard, 'Timeless Elegance Since 1962' sub-label, tagline paragraph, and three cb-badge spans (ShieldCheck BIS Hallmarked, Award 916 Pure Gold, Gem Certified Diamonds); cb-cols nav with three columns — Explore (5 links: Collections/Bridal/Custom Design/Gallery/Gold Rate), Experience (5 links: AI Recommendation/Wedding Planner/Book Appointment/Testimonials/Dashboard), Company (4 links: About Us/Contact/Appointments/Admin); socials row with Instagram/Facebook/Youtube/MessageCircle icons all linking to /Contact; newsletter form with email input, Send icon submit button, and Check icon success state; dynamic year via new Date().getFullYear(). Import CollapseBody.css.

As a frontend developer, implement the Navbar section for the Custom Design page. This component reuses the shared Navbar from previous pages (e.g., Bridal page task 42094861-bda2-43f1-a353-465b2c3723a7). It uses useState for scrolled, profileOpen, and mobileOpen states, useRef for profileRef (click-outside detection), and useEffect for scroll listener and mousedown listener. Renders NAV_LINKS array with 7 links including 'Custom Design' as active, a brand logo with 'Babubhai Jewellers' / 'Timeless Elegance' sub-text, and a profile dropdown showing 'Aarav Desai / Administrator' with ChevronDown, User, Settings, Calendar, LogOut icons from lucide-react. Applies nv-scrolled class on scroll > 12px. Mobile menu toggled via Menu/X icons.

As a frontend developer, implement the Navbar section for the Wedding Planner page. This shared navigation component uses useState for scrolled, profileOpen, and mobileOpen states, useRef for click-outside detection on the profile dropdown, and useEffect for scroll and mousedown event listeners. Renders NAV_LINKS array with 7 links (Dashboard, Gallery, Bridal, Custom Design, Wedding Planner, AI Recommendation, About), a brand logo with 'Babubhai Jewellers' and 'Timeless Elegance' sub-text, and a profile dropdown with ChevronDown, User, Settings, Calendar, LogOut icons from lucide-react. Applies nv-scrolled CSS class when window.scrollY > 12. Mobile menu toggle uses Menu/X icons. Note: This component may already exist from previous pages (Appointment, Custom Design) — reuse if available. Depends on parent Bridal page task chain.

As a frontend developer, implement the AIRecommendationHero section for the AI Recommendation page. Uses useEffect and useRef (canvasRef) to initialize a Three.js scene with PerspectiveCamera (FOV 60, z=12), WebGLRenderer with alpha and antialias, and ResizeObserver on the parent element. Creates a gold particle system with 70 particles using BufferGeometry with position, size, and color attributes sampled from a goldPalette of 5 THREE.Color values (#D4AF37, #FFD700, #F5E6B3, #C0C0C0, #E8CD6A) using PointsMaterial with AdditiveBlending. Also renders 12 diamond sparkle meshes using OctahedronGeometry(0.08) in a sparkleGroup with MeshBasicMaterial. Imports Sparkles, Brain, ScanEye, Layers from lucide-react. Import from '../styles/AIRecommendationHero.css'.

As a frontend developer, implement the AIRecommendationFilters section for the AI Recommendation page. Uses useState, useRef, useEffect, useMemo. Renders filter configuration constants: JEWELLERY_TYPES (Gold/Diamond/Silver/Bridal with icon labels), OCCASIONS (8 items), METAL_PURITIES (916/750/925/999), STYLES (6 items), and SORT_OPTIONS (5 items). Includes a GoldParticleAccent sub-component that uses Three.js with 60-particle BufferGeometry, PerspectiveCamera (FOV 45, z=8), PointsMaterial color 0xd4af37 with AdditiveBlending, and a resize handler. Imports Filter, ChevronDown, X, RotateCcw, Gem, Calendar, Sparkles, SlidersHorizontal, ArrowUpDown, Check, IndianRupee from lucide-react. Includes active filter chips with X dismiss buttons and a reset-all control. Import from '../styles/AIRecommendationFilters.css'.

As a frontend developer, implement the AIRecommendationResults section for the AI Recommendation page. Uses useState and useMemo. Renders ALL_PRODUCTS array of 8 jewellery items (Polki Jadau Bridal Necklace, Temple Kundan Jhumka Earrings, Solitaire Diamond Studs, Ruby Halo Cocktail Ring, Rani Haar Emerald Set, Pearl Chandbali Earrings, Eternal Diamond Tennis Bracelet, Victorian Gold Bangles) each with id, name, category, price, weight, purity, match percentage, desc, and Unsplash image URLs. Supports grid/list view toggle (Grid3x3, List icons), pagination with ChevronLeft/ChevronRight, AI match percentage badges with Sparkles icon, ShieldCheck trust badge, Heart and Eye action buttons per card, and a RotateCcw refresh control. SlidersHorizontal for mobile filter toggle. ChevronDown for load-more. Import from '../styles/AIRecommendationResults.css'.

As a frontend developer, implement the AIRecommendationRelated section for the AI Recommendation page. Uses useState, useRef (canvasRef, animRef, particlesRef), useEffect, useCallback. Renders relatedProducts array of 5 items (Temple Lakshmi Necklace, Rajwadi Kundan Earrings, Polki Diamond Mangalsutra, Antique Silver Anklets, Meenakari Bangles Set) each with id, name, category, price, purity, badge (Trending/New/null), badgeType, and Unsplash image URLs. Includes SparkleCanvas sub-component that uses Canvas 2D API (not Three.js) with 22 gold particles per card hover, particle physics (vx/vy/life/maxLife/size/gold fields), resize via devicePixelRatio, and animate loop with ctx.clearRect. Horizontal carousel with ChevronLeft/ChevronRight navigation via useCallback. Eye icon for quick-view overlay. Import from '../styles/AIRecommendationRelated.css'.

As a frontend developer, implement the CollapseBody footer section for the AI Recommendation page. This component may already exist from previous pages (Appointment, Custom Design, Wedding Planner). Uses useState for form ({ name, mobile, date, purpose }) and booked boolean state. handleChange resets booked to false on any field edit; handleSubmit sets booked=true. Renders footer with cb-shimmer decorative overlay, cb-grid layout with: brand column (cb-emblem 'B', 'Babubhai Jewellers' brand name, cb-tag 'Timeless Elegance', blurb text, trust badges array with ShieldCheck/Award/Sparkles icons for BIS Hallmarked/916 Purity/Certified Diamonds), Explore links column (quickLinks: Dashboard/Gallery/Bridal/About), Services links column (serviceLinks: Custom Design/Wedding Planner/AI Recommendation/Gallery), and contact/appointment booking form column. Imports Gem, ShieldCheck, Award, Sparkles, MapPin, Phone, Mail, Clock, CheckCircle2, MessageCircle, Instagram, Facebook, Youtube from lucide-react. Import from '../styles/CollapseBody.css'.

As a frontend developer, implement the AdminDashboard section for the Admin page using AdminDashboard.css. Build the GoldOrnament 3D component using useRef and useEffect with dynamic async imports of Three.js and OrbitControls. Create an IcosahedronGeometry(1,1) mesh with MeshStandardMaterial (color 0xd4af37, roughness 0.22, metalness 0.92), a TorusGeometry(1.35, 0.04) ring rotated Math.PI*0.45, AmbientLight(0xffd700, 0.55), DirectionalLight(0xfff6d5) at position (3,2,4), and rim light at (-3,-1,-2). Configure OrbitControls with autoRotate=true, autoRotateSpeed=0.8, enableDamping=true, dampingFactor=0.06. Include resize handler and animation loop cleanup on unmount. Render dashboard stat cards with lucide icons (CalendarCheck, TrendingUp, MessageSquare, Star, ArrowUpRight, Clock, Gem, Image, Diamond, Quote, ExternalLink) for appointment counts, gold rates, testimonials, and gallery metrics.

As a frontend developer, implement the AdminRateManager section for the Admin page using AdminRateManager.css. Build component with useState for goldRate (initial 78450), silverRate (initial 94200), lastUpdate string, saving boolean, success boolean, and chartTab ('7d'|'1m'|'3m'). Implement handleUpdateRates with useCallback that triggers 900ms save simulation, updates lastUpdate with formatted time via toLocaleTimeString, and auto-clears success after 2s. Build handleGoldChange/handleSilverChange that strip non-numeric characters. Implement Chart.js integration via useEffect with dynamic import of Chart, LineController, LineElement, PointElement, LinearScale, CategoryScale, Filler, Tooltip, Legend — dynamically generates labels/goldData/silverData arrays based on chartTab (7/30/90 points), stores instance in chartInstanceRef with cleanup on tab change. Render HISTORY_DATA table (7 rows of date/gold/silver/change) with TrendingUp, Clock, RefreshCw, CheckCircle2, ChevronUp, ChevronDown, Minus, History lucide icons.

As a frontend developer, implement the AdminProductManager section for the Admin page using AdminProductManager.css. Build component with useState for search query, selected category filter, currentPage, and sort state. Use useMemo to compute filtered/sorted products from PRODUCTS array (12 items: Royal Kundan, Solitaire Diamond Ring, Antique Silver Anklets, etc.) filtered by CATEGORIES array (All Categories, Bridal, Rings, Earrings, Pendants, Bracelets, Silver, Necklace, Bangles). Implement ROWS_PER_PAGE=8 pagination with ChevronLeft/ChevronRight controls. Apply METAL_CLASS_MAP for badge styling (apm-badge--gold, apm-badge--diamond, apm-badge--silver, apm-badge--platinum, apm-badge--gemstone). Render formatPrice utility for Indian currency formatting. Include Search input, Plus (add) button, Edit3 and Trash2 action icons per row, ChevronDown for sort, Gem and PackageOpen icons from lucide-react. Show active/draft status badges per product row.

As a frontend developer, implement the AdminAppointmentHandler section for the Admin page using AdminAppointmentHandler.css. Build component with useState for search query, status filter, and selectedAppointment (for detail modal). Use useMemo to filter APPOINTMENTS array (6 entries: Priya Sharma bridal set APT-001, Amit Patel gold investment APT-002, Neha & Rohan wedding rings APT-003, Suresh Kumar anniversary APT-004, Kavita Agarwal custom design APT-005, Rajesh Mehta silver APT-006) by search and status. Implement STATUS_LABEL map (new/contacted/confirmed/completed) and status badge color classes. Render detail modal/panel triggered by Eye icon showing full inquiry text, Phone, Mail, Clock, User, MessageCircle fields. Include CheckCircle2, MessageSquare, BadgeCheck action buttons per row for status transitions. Use CalendarCheck, Search, X, Filter lucide icons. Apply date formatting and appointment card grid layout.

As a frontend developer, implement the AdminTestimonialManager section for the Admin page using AdminTestimonialManager.css. Build StarDisplay sub-component that renders full/half/empty stars using Math.floor and SVG linearGradient (id='half-grad') for half-star rendering with D4AF37 gold and d1d5db grey stops. Build main component with useState for PENDING_TESTIMONIALS array (6 entries: Priya Mehta 5.0 bridal, Amit Shah 4.5 gold chain, Neha Patel 5.0 custom ring, etc.) and APPROVED_TESTIMONIALS. Implement approve/reject/pin/archive actions updating status field. Apply AVATAR_COLORS array (5 gradient strings) cyclically per testimonial card. Include source badge (In-Store Visit, Google Review), product tag, featured toggle. Use Quote, Star, CheckCircle, XCircle, Pin, Archive, ChevronDown, ChevronUp lucide icons. Render pending vs approved tabs with count badges and expandable testimonial text.

As a frontend developer, implement the AdminGalleryManager section for the Admin page using AdminGalleryManager.css. Build component with useState for photos (INITIAL_PHOTOS array of 10 items with Unsplash src, caption, category, date, tags), activeFilter ('All' default), and selected photos set. Use useRef and useCallback for drag-and-drop reorder logic (GripVertical handle). Implement CATEGORIES filter bar (Store Interior, Collections, Events, Bridal, Custom Design, Craftsmanship, Festive) that filters photo grid. Add photo upload zone with UploadCloud icon and drag-drop support via useRef. Render photo grid cards each with Eye (preview), Tag (edit tags), Trash2 (delete), Check (select) overlay controls. Include bulk actions toolbar (Download, RotateCcw, Trash2) when photos selected. Implement lightbox/preview modal triggered by Eye. Use Filter, ArrowUpDown, Plus, X, Image lucide icons. Handle tag editing inline per photo card.

As a frontend developer, implement the DashboardSidebar section for the Dashboard page. Uses useState for activeItem (default 'Overview') and panelOpen (mobile slide toggle). MENU_ITEMS array includes Overview, Gold Rates, Collections (badge: '12'), Appointments (badge: '5'), Testimonials, Gallery — each with a lucide-react icon (LayoutDashboard, TrendingUp, Gem, CalendarCheck, MessageSquareText, Images). Mobile toggle bar renders the active item's icon dynamically via React.createElement and a ChevronDown with dsb-open rotation. Desktop sidebar header shows 'B' logo mark and 'Babubhai Jewellers / Admin Panel' branding. Nav panel uses dsb-panel-open class for mobile expand. Menu items use dsb-active class for current selection, aria-current='page', and collapse panel on mobile click. Badge spans rendered conditionally per item.

As a frontend developer, implement the DashboardHeader section for the Dashboard page. Uses useState(new Date()) and a setInterval tick every 30000ms (cleared on unmount) to keep live date/time. formatDate uses en-IN locale with weekday/day/month/year options; formatTime uses en-IN with hour/minute/hour12. Renders dh-title 'Dashboard', dh-datetime row with Calendar icon + formatted date, Clock icon + formatted time, a dh-pulse live indicator dot, and 'Live' label. Action buttons: dh-btn-outline links to '/Gold Rate' with RefreshCw icon ('Refresh Rates') and dh-btn-primary links to '/Custom Design' with Plus icon ('Add Product'). Uses lucide-react icons: Calendar, Clock, RefreshCw, Plus, Sparkles.

As a frontend developer, implement the DashboardStats section for the Dashboard page. Renders a dst-grid of 4 stat cards from the STATS array: Total Products (1,248, +12 this week, up), Pending Appointments (34, +5 today, up), Today's Gold Rate (₹6,245, +₹42/10g, up), Gallery Items (327, no change, neutral). Each card has a dst-icon-wrap with per-metric icon class (dst-icon-products, dst-icon-appointments, dst-icon-rate, dst-icon-gallery) and the corresponding lucide-react icon (Package, CalendarCheck, TrendingUp, Images). TrendIndicator sub-component conditionally renders dst-trend-up (ArrowUp), dst-trend-down (ArrowDown), or dst-trend-neutral (Minus) spans. Each card also shows a dst-subtitle string (e.g. 'Next: 2:30 PM • Priya Sharma').

As a frontend developer, implement the DashboardRateManager section for the Dashboard page. Manages INITIAL_RATES array (4 entries: Gold 24K/22K, Silver 999/925) with useState for inline editing, add/delete modal, and refresh states. Includes a ThreeAccent component using THREE.js: creates a Scene with PerspectiveCamera at (0, 0.4, 3.6), WebGLRenderer with alpha, a TorusGeometry outer ring (0xD4AF37, metalness 0.85) and CylinderGeometry inner coin disc (0xFFD700, metalness 0.9), grouped together with DirectionalLight key (1.6) and fill (0xD4AF37, 0.7) lights, animating via requestAnimationFrame. relativeTime helper converts ISO timestamps to human-readable relative strings. Edit3, PlusCircle, X, Check, Clock, AlertTriangle, RefreshCw, Gem lucide-react icons used. Inline row editing with Check/X confirm/cancel, outdated status badge via AlertTriangle, and add-rate modal form with metal/purity/price/unit fields. useMemo and useRef used for performance and mount point.

As a frontend developer, implement the DashboardCollectionsManager section for the Dashboard page. Uses useState for searchQuery, sortField/sortDir, currentPage, and selected items. COLLECTIONS array has 12 items across categories (gold, diamond, bridal, silver, mens, kids) with fields: id, name, sku, category, stock, price, status (active/draft/archived), updated date, and Unsplash thumb URLs. ITEMS_PER_PAGE = 6 with useMemo for filtered+sorted+paginated data. Sort toggling via ChevronUp/ChevronDown per column header. Search filters by name/sku. Pagination with ChevronLeft/ChevronRight and page count display. Each row renders thumb image, name+SKU, category badge, stock count (0 = out-of-stock style), formatted INR price, status badge, updated date, and action buttons: Eye (view), Edit (edit), Trash2 (delete). Plus button for adding new collection. All from lucide-react: Search, ChevronUp, ChevronDown, ChevronLeft, ChevronRight, Plus, Eye, Edit, Trash2.

As a frontend developer, implement the DashboardAppointments section for the Dashboard page. Uses useState for searchQuery, filterStatus, filterDate, selectedAppointment (detail panel), showAddModal, and contactModal. APPOINTMENT_DATA has 8 entries with fields: customer, initials, avatarClass (dap-av-gold/silver/rose/teal/plum), phone, email, date, time, purpose (Bridal Consultation/Custom Design/Purchase Inquiry/Exchange & Buyback/General Consultation) with purposeClass, status (Confirmed/Pending/Completed/Cancelled) with statusClass, contact. useMemo filters/searches the list. Renders a table/card list with avatar initials, customer name, date+time with Calendar icon, purpose badge, status badge, and action icons (Eye detail panel, X cancel, Check confirm, MessageCircle/Mail/Phone contact options). Add appointment modal with form fields. Contact modal with Send, MessageCircle, Mail, Phone options. Filter bar with Search input, Calendar date filter, Filter status dropdown, Plus add button. All lucide-react: Search, Calendar, Filter, Plus, X, Send, MessageCircle, Mail, Phone, Check.

As a frontend developer, implement the DashboardTestimonials section for the Dashboard page. Manages INITIAL_TESTIMONIALS (6 entries: customer, location, review text, rating 4-5, date, status Published/Pending) via useState. useMemo filters by searchQuery and status filter. RatingStars sub-component renders 5 Star icons from lucide-react, filling with #D4AF37 for rated stars and empty stroke for unrated, with aria-label. StatusBadge sub-component renders dt-badge-pu (Published) or dt-badge-pe (Pending) class. Each testimonial card shows: customer name, MapPin + location, Calendar + date, RatingStars, review text, StatusBadge, and action buttons: Eye (view detail), Pencil (edit), CheckCircle (approve/publish), Trash2 (delete). Top bar has Search input, status filter dropdown (All/Published/Pending), and Plus button to add testimonial. Add/edit modal with customer, location, review textarea, rating selector, status toggle. All lucide-react icons: Plus, Search, Star, Eye, Pencil, Trash2, CheckCircle, X, Calendar, MapPin.

As a frontend developer, implement the AppointmentsHero section for the Appointments page. This section renders a full-width hero using a layered approach: a decorative 3D canvas layer (`aph-accent-canvas`) containing a React Three Fiber `Canvas` with a `Scene` component that includes ambient, directional, and point lights plus a `GoldRing` component. The `GoldRing` uses `useFrame` for continuous animation — rotating on Y axis (0.0025 rad/frame), sinusoidal tilt on X, and vertical floating on Y — and renders two `THREE.TorusGeometry` meshes (outer ring radius 1.3 tube 0.04 with gold metalness material, inner ring radius 0.9 tube 0.025 tilted at PI*0.35 with lighter gold). The content layer (`aph-content`) stacks a status badge with an animated `aph-badge-dot`, a decorative ornament with `✦` icon, an `h1` headline with `aph-headline-accent` span, and a descriptive subheadline paragraph. Import from `../styles/AppointmentsHero.css`. Depends on the Dashboard Navbar task to establish page chain.

As a Tech Lead, verify the end-to-end integration between the Contact frontend sections (ContactForm, CollapseBody footer appointment forms on all pages) and the Contact/Newsletter backend API (/api/v1/contact, /api/v1/newsletter). Ensure: contact form submission validates correctly server-side, success state renders on 200 response, newsletter subscription deduplication works (no duplicate emails), footer CollapseBody appointment mini-forms POST to /api/v1/appointments correctly, WhatsAppConnect section opens wa.me link with correct phone number from environment config.

As a frontend developer, implement the AppointmentConfirmation section for the Appointment page. Uses useState for copied (false) and visible (false), with useEffect that sets visible=true after 100ms timeout for fade-in (opacity 0→1 via inline style transition). CONFIRMATION_NUMBER is static 'BJ-APPT-2026-06472'. APPOINTMENT_DATA object has name, date, time, purpose, store fields. handleCopy uses navigator.clipboard.writeText and sets copied=true for 2200ms before resetting. whatsappMessage is a URL-encoded string with all appointment details. NEXT_STEPS array has 3 items with Clock, Calendar, Gem icons. UI includes: ac-icon-wrap with ac-icon-ring pulse and ac-icon-inner Check icon (strokeWidth=3), heading with span-wrapped 'Appointment', TicketPercent icon for confirmation number display, copy button that toggles between Copy and CheckCheck icons in green (#25D366) when copied, WhatsApp share button, and action links (ShoppingBag, Image, MessageCircle). Import AppointmentConfirmation.css.

As a frontend developer, implement the CustomDesignHero section for the Custom Design page. Uses @react-three/fiber Canvas with Suspense, OrbitControls, Environment, ContactShadows, and Float from @react-three/drei. Renders a custom 3D RingBand component (torus gold band + silver inner band) animated via useFrame with sinusoidal rotation on Y and X axes. Includes a Diamond component built from THREE.ExtrudeGeometry using a bezier-curve shape with meshPhysicalMaterial (clearcoat, reflectivity, transparent opacity 0.92) and a pointLight inner glow. Hero text overlays with ArrowRight, Sparkles, ShieldCheck, Award from lucide-react as trust/badge icons.

As a frontend developer, implement the CustomDesignUploadStudio section for the Custom Design page. Uses useState, useRef, useCallback, and useEffect for upload management. Features a decorative THREE.js force-particle background rendered on a canvas via useForceParticles hook — 60 gold nodes (THREE.Points with AdditiveBlending) connected by LineSegments when within threshold distance 8, animated with a THREE.Clock. Supports drag-and-drop and click-to-upload image files with previews, multi-image management (add/remove), an inspiration notes textarea, and a Send submission button. Uses Upload, Image, X, Info, Plus, Sparkles, Trash2, Send icons from lucide-react.

As a frontend developer, implement the CustomDesignMaterialSelector section for the Custom Design page. Uses useState, useEffect, useMemo, and useRef. Includes METALS array (Gold, Silver, Platinum, Rose Gold with pricePerGram), GEMSTONES array (Diamond, Emerald, Ruby, Sapphire, Pearl, Tanzanite with colors), and PURITY_OPTIONS (18K, 22K, 24K, BIS 916). Features a use3DGemstone hook rendering a THREE.js canvas with a TorusGeometry gold ring + OctahedronGeometry gemstone using meshPhysicalMaterial, animated rotation. Uses framer-motion AnimatePresence for animated selection transitions. Live price estimation based on selected metal pricePerGram × weight. Icons: Check, Gem, Weight, Scale, Wand2, Sparkles, Save, CheckCircle2 from lucide-react.

As a frontend developer, implement the CustomDesignPreview section for the Custom Design page. Uses @react-three/fiber Canvas with OrbitControls, PerspectiveCamera, Environment, ContactShadows from @react-three/drei. Renders a JewelleryModel component with useMemo-derived metalMaterial and gemMaterial based on selected metalColor (gold/rose-gold/silver/platinum) and gemColor (diamond/ruby/emerald/sapphire/pearl). Contains three geometry variants: Pendant (torus chain + dodecahedron gems + bail), Ring (torus band + dodecahedron solitaire + accent gems), and additional types. Provides interactive controls: RotateCw reset, ZoomIn/ZoomOut, Maximize2 fullscreen, Sparkles effect toggle, Diamond gem swap, ShoppingBag add-to-enquiry. ArrowLeft back navigation.

As a frontend developer, implement the CustomDesignInspiration section for the Custom Design page. Uses useState for active filter, useMemo to filter the DESIGNS array (6 items: Rajwadi Antique Haar, Solitaire Floral Pendant, Polki Bridal Choker, Temple Jhumka Earrings, Custom Tennis Bracelet, Maharani Wedding Set) by FILTERS (all/gold/diamond/bridal). Each design card renders a @react-three/fiber Canvas with Float-animated mini 3D models: RingModel (torus), and other jewellery types using MeshTransmissionMaterial from @react-three/drei. Displays materials list, description, and an ArrowRight 'Customise' CTA per card. Shows SearchX empty state when no filter match. Gem icon in section header.

As a frontend developer, implement the CustomDesignProcess section for the Custom Design page. Features a @react-three/fiber Canvas background with GoldParticleRing — 80 gold sphere particles arranged in a sinusoidal ring pattern (radius 2.8 ± 0.6, useMemo-computed positions) with emissive gold color (#FFD700) and point/ambient lighting. Renders a 5-step vertical timeline using STEP_ICONS (Upload, Gem, Users, Hammer, Truck) and steps data array: Upload Inspiration, Select Materials, Design Consultation, Master Crafting, Delivery. Each step is expandable via ChevronDown accordion (useState activeStep). Plus icon for expand affordance. Canvas positioned as decorative background behind the step list.

As a frontend developer, implement the CustomDesignCTA section for the Custom Design page. Uses useState for form fields (name, email, phone, preferredDate, preferredTime, notes), errors object, and submitted boolean. Implements validate() with regex checks for email (RFC pattern) and phone (/^\+?[\d\s()-]{7,15}$/) with inline error display. handleSubmit prevents default, runs validation, sets submitted=true on success. handleReset clears all state. Displays trustBadges array (BIS Hallmark Certified/ShieldCheck, Expert Craftsmen/Award, Satisfaction Guarantee/ThumbsUp). Shows success state with CheckCircle2 on submission. Decorative animated cdcta-particle spans (8 total). Left panel has primary CTA + trust badges; right panel has the controlled form. MessageCircle, Send, Gem, CalendarClock icons from lucide-react.

As a frontend developer, implement the CollapseBody footer section for the Custom Design page. This component may already exist from the Bridal page (task 63c57d22-d77a-41df-bd05-b6ba18202d42) and Appointment page (task 4515110a-d2e4-42ad-9c5f-167692f896e4). Uses useState for form (name, mobile, date, purpose) and booked boolean. handleChange resets booked to false on any change; handleSubmit sets booked=true. Renders a 4-column footer grid: Brand column (cb-emblem 'B', brand name, tagline 'Timeless Elegance', blurb, trustBadges with ShieldCheck/Award/Sparkles), Explore links (quickLinks: Dashboard/Gallery/Bridal/About), Services links (serviceLinks: Custom Design/Wedding Planner/AI Recommendation/Gallery), and Contact/appointment-booking column. Social icons: Instagram, Facebook, Youtube. cb-shimmer decorative overlay.

As a frontend developer, implement the WeddingPlannerHero section for the Wedding Planner page. This is a static decorative hero section that renders three SVG flourish elements (wh-flourish-top-left, wh-flourish-top-right, wh-flourish-bottom-right) using CSS custom properties var(--primary) and var(--highlight) for gold stroke colors with varying opacities. PARTICLES array generates 24 animated gold particle elements with randomized left/bottom positions and CSS animation durations (5–8.5s) and delays. Feature badges use Gem, ShieldCheck, Sparkles icons from lucide-react, and an ArrowRight CTA button. No state or API calls — pure presentational section.

As a frontend developer, implement the WeddingPlannerBudgetPlanner section for the Wedding Planner page. This is a highly interactive budget planning tool featuring: a Three.js ParticleCanvas component using WebGLRenderer with 60 gold (0xD4AF37) additive-blended particles with upward drift velocities; a range slider (MAX_BUDGET=5000000, STEP=10000) with PRESETS array (₹2L–₹40L quick-select buttons); CURRENCIES array with INR/USD/GBP/AED and conversion rates; DEFAULT_PCT allocation object for bride(40%), groom(20%), gifts(25%), additional(15%) categories; useState hooks for budget, allocations, currency, saved state, and a savePulse animation trigger; useCallback for budget and allocation change handlers; a donut-chart-style allocation visualizer; IndianRupee, Calculator, Sparkles, Save, RotateCcw, CheckCircle2, Gem, Info icons from lucide-react; and a save confirmation flow using CheckCircle2.

As a frontend developer, implement the WeddingPlannerJewelleryTimeline section for the Wedding Planner page. Features a React Three Fiber Canvas with a TimelineParticles component using useFrame for continuous rotation animation on a groupRef, rendering 100 particles computed via useMemo with randomized theta/radius positions and individual speeds. The PHASES array defines 5 wedding phases (Pre-Engagement, Bridal Preparation, Wedding Week Shopping, Wedding Day Accessories, Post-Wedding Additions) each with timeframe, status badge (Completed/In Progress/Planned), description, and tags array. useState manages activePhase selection. @react-three/drei Sparkles component and OrbitControls are used in the 3D scene. Clock and Gem icons from lucide-react. Phase selection updates displayed description and tags with smooth transitions.

As a frontend developer, implement the WeddingPlannerSuggestions section for the Wedding Planner page. Features a Three.js background canvas with gold particle effects (THREE.BufferGeometry). ALL_PRODUCTS array contains 8 jewellery items (Polki Kundan Bridal Set, Temple Heritage Necklace, Sleek Diamond Pendant Set, Fusion Matha Patti, Victorian Emerald Jadau Set, Geometric Diamond Choker, Rose Gold Floral Haram, Meenakari Bajuband Set) each with matchScore, price, goldPurity, diamondCarat, color, secondaryColor, gemType fields. Filter system with useState for activeTheme, activeSkin, activeStyle dropdowns using ChevronDown. Each product card displays a Three.js gem preview rendered per gemType, matchScore badge, priceLabel, goldPurity, and an add-to-wishlist toggle using Check/Plus icons. Eye icon for quick view. Sparkles, Diamond, Gem, Crown, Zap, Filter icons from lucide-react. useMemo filters products based on active filter state.

As a frontend developer, implement the WeddingPlannerCustomization section for the Wedding Planner page. Features a React Three Fiber Canvas with DecorGems component rendering 12 FloatingGem meshes using @react-three/drei Float and MeshDistortMaterial with octahedronGeometry, randomized positions/colors/speeds/distort values computed via useMemo. METALS array (Gold 22K/24K, Silver 92.5%, Platinum 95%) with color dot classes. GEMSTONES array (Diamond, Emerald, Ruby, Sapphire) with emoji icons. STYLE_TAGS array of 8 style options with emoji icons. OCCASIONS array of 6 wedding events. useState manages uploadedImages (array), selectedMetal, selectedGemstones (multi-select Set), selectedStyles (multi-select Set), selectedOccasions (multi-select Set), budgetNote, and formSubmitted. Upload handler with useRef for file input using Upload/X/Image icons. Send icon for form submission. RefreshCw for reset. ArrowRight CTA. Multi-select toggle logic for gems/styles/occasions.

As a frontend developer, implement the WeddingPlannerApprovals section for the Wedding Planner page. Features a React Three Fiber Canvas with Suspense boundary wrapping a RotatingRing 3D component: a gold pedestal built from cylinderGeometry layers (dark base + gold accent), a torusGeometry ring band with D4AF37 gold material (roughness 0.2, metalness 0.95), an octahedronGeometry diamond gem (white, emissive c8e6ff), two side stone spheres, and 8 accent diamonds positioned around the band via angle math. AutoRotator wraps OrbitControls with autoRotate, enableZoom, polar angle constraints. SceneFallback handles loading state. Approval items list uses CheckCircle2, Download, CalendarClock, ChevronRight, RotateCw, Sparkles, IndianRupee, Diamond, ShoppingBag, BadgeCheck icons. useState manages selected approval items and approval status. useMemo computes summary totals. Environment from @react-three/drei.

As a frontend developer, implement the WeddingPlannerTestimonials section for the Wedding Planner page. Features a JewelleryPiece 3D component using useFrame for continuous rotation (groupRef.rotation.y += 0.003), sinusoidal y-position bobbing, and scale lerp on hover (1.12 target scale). gemGeo is computed via useMemo switching on shape prop: OctahedronGeometry for pendant, TorusGeometry for bangle, SphereGeometry for earrings, TorusKnotGeometry as default. Each piece has a cylinderGeometry metal base, torusGeometry pedestal ring, the gem mesh, and 6 accent dot spheres positioned by angle math. PedestalScene wraps Canvas with OrbitControls and Environment from @react-three/drei. Testimonial cards pass metalColor, gemColor, shape props and track hovered state. useRef and useMemo are used throughout. THREE.Vector3 lerp for smooth scale transitions.

As a frontend developer, implement the WeddingPlannerCTA section for the Wedding Planner page. Features a Three.js scene (not React Three Fiber) mounted imperatively via useEffect on a canvasRef. Scene includes AmbientLight (0.7), DirectionalLight keyLight (0xffeecc, 1.8 at position 3,3,4), rimLight (0xffd700, 1.0), and fillLight. A ringGroup contains: TorusGeometry band (0.58 radius, 0.08 tube) with gold MeshStandardMaterial (roughness 0.22, metalness 0.92), OctahedronGeometry gem (0.2) with white emissive material (emissiveIntensity 0.4), and 60 spark particles (BufferGeometry with spherical distribution, PointsMaterial gold AdditiveBlending, depthWrite false). Resize handler cancels/reschedules via requestAnimationFrame. CTA buttons use CalendarCheck, MessageCircle icons. Trust badges use ShieldCheck and Award icons. Sparkles decorative element. Cleanup on unmount removes renderer DOM element and cancels animation.

As a frontend developer, implement the CollapseBody footer section for the Wedding Planner page. This shared footer component renders: a brand column with 'B' emblem, 'Babubhai Jewellers' name, 'Timeless Elegance' tagline, blurb text, and three trustBadges (BIS Hallmarked with ShieldCheck, 916 Purity with Award, Certified Diamonds with Sparkles); an Explore links column using quickLinks array (Dashboard, Gallery, Bridal, About); a Services column using serviceLinks array (Custom Design, Wedding Planner, AI Recommendation, Gallery); and a contact/appointment form using useState for form fields (name, mobile, date, purpose) and booked state with handleChange/handleSubmit handlers that set booked=true and reset booked on re-edit. Social icons: Instagram, Facebook, Youtube. Location, Phone, Mail, Clock, CheckCircle2, MessageCircle icons from lucide-react. cb-shimmer decorative element. Note: This component may already exist from Bridal/Appointment/Custom Design pages — reuse if available.

As a frontend developer, implement the AIRecommendationDetails section for the AI Recommendation page. Uses useState, useRef, useEffect, useMemo, and Suspense. Integrates @react-three/fiber Canvas with useFrame, and @react-three/drei OrbitControls, Environment, ContactShadows. Defines two 3D models: RingModel (TubeGeometry via EllipseCurve + CatmullRomCurve3 path with 80 segments, OctahedronGeometry diamond crown, MeshPhysicalMaterial with metalness=1/roughness=0.15/clearcoat=0.2, shoulder diamonds) and PendantModel (TorusGeometry bail, ExtrudeGeometry pendant body from bezier Shape, animated with sin float via useFrame). Imports X, ChevronLeft, ChevronRight, Gem, Ruler, Scale, Award, ShieldCheck, Sparkles, PenTool, Fingerprint, Layers, ChevronDown, Info from lucide-react. Includes tabbed spec panels, accordion via ChevronDown state, and image gallery with prev/next navigation. Import from '../styles/AIRecommendationDetails.css'.

As a frontend developer, implement the AppointmentsForm section for the Appointments page. This is the primary booking form using `useState` hooks for `formData` (name, email, phone, date, time, purpose, requests), `errors`, `touched`, `submitting`, and `submitted` states. It includes a decorative 3D background accent (`GoldAccent`) rendered via React Three Fiber `Canvas` featuring two semi-transparent `TorusGeometry` meshes (radii 1.4 and 1.0) and a particle system with 60 gold points arranged in a ring using `useMemo`-memoized `Float32Array` positions. The form itself provides: text/email/phone inputs with real-time validation on blur (`touched`), a date picker, a time slot selector rendered as a grid of clickable slot buttons (with `available` flags from a `timeSlots` array), a purpose dropdown, a special requests textarea, and a submit button showing a spinner during `submitting` state. On successful submission `submitted` flips to true, revealing a success state. Import `../styles/AppointmentsForm.css` and three.js/fiber packages.

As a frontend developer, implement the AppointmentsFAQ section for the Appointments page. The section maintains `openIndex` state (initially `null`) via `useState` and a `toggleItem(index)` handler that sets `openIndex` to `index` or back to `null` if already open (accordion behavior). It renders a `faqData` array of 6 FAQ items (covering topics: what to bring, rescheduling, payment, consultation duration, bringing companions, appointment types) mapped into `afq-item` divs that receive an `open` class when `openIndex === index`. Each item contains a `<button className="afq-trigger">` with `aria-expanded` and `aria-controls` attributes for accessibility. A decorative `afq-bg-texture` div is included as aria-hidden. Imports `../styles/AppointmentsFAQ.css`.

As a frontend developer, implement the AppointmentsWhyBook section for the Appointments page. This is a static benefits grid section with no local state. It maps over a `benefitCards` array of 4 objects — Expert Guidance, Personalized Consultation, Premium Experience, Hassle-Free Booking — each containing an inline SVG icon (smiley face circle, heart path, star polygon, and calendar-with-checkmark rect respectively, all using `stroke="currentColor"` with `strokeWidth="1.6"`), a `title` string, and a `description` string. These are rendered as cards inside `awb-inner > awb-cards-grid`. The section header includes a `awb-section-label` span, an `h2` with `awb-headline-accent` span wrapping 'Jewellery Consultation', and an `awb-subheadline` paragraph. Imports `../styles/AppointmentsWhyBook.css`.

As a Tech Lead, verify the end-to-end integration between the Gold Rate frontend sections (GoldRateLiveRates, GoldRateTrendGraph, GoldRateCalculator, HomeLiveRates, DashboardRateManager, AdminRateManager) and the Gold Rates backend API (/api/v1/gold-rates). Ensure: live rates are fetched and displayed correctly with last_updated timestamp, trend graph renders historical data from /api/v1/gold-rates/history for all range options, calculator uses real rates from API, admin CRUD operations update the database and reflect in frontend, HomeLiveRates polling interval works correctly. Validate error states and loading skeletons.

As a Tech Lead, verify the end-to-end integration between the Collections/Products frontend sections (CollectionsGrid, CollectionsFilter, CollectionsPagination, BridalSetsGrid, HomeFeaturedCollections, DashboardCollectionsManager, AdminProductManager) and the Products backend API (/api/v1/products). Ensure: filter/sort/pagination parameters pass correctly to the API, product data renders with correct images/prices/badges, BIS Hallmark badges display based on API bisHallmark flag, admin CRUD operations (create/update/delete products) reflect immediately in frontend, wishlist toggling works with global state, category counts from /api/v1/products/categories render correctly in filter UI.

As a Tech Lead, verify the end-to-end integration between the Testimonials frontend sections (TestimonialsGrid, TestimonialsWeddingStories, HomeTestimonials, BridalTestimonials, DashboardTestimonials, AdminTestimonialManager) and the Testimonials backend API (/api/v1/testimonials). Ensure: public testimonials endpoint returns only published entries, admin panel shows pending/published/approved counts correctly, approve/reject/pin/archive actions update database and reflect in admin UI, new testimonial submission via public form stores as pending status, featured testimonials display on homepage correctly.

As a Tech Lead, verify the end-to-end integration between the Gallery frontend sections (GalleryCategoryTabs, GalleryGrid, GalleryFilter, GalleryLightbox, AdminGalleryManager) and the Gallery backend API (/api/v1/gallery). Ensure: gallery items load from API by category, lightbox displays full item detail from API response, admin photo upload sends multipart/form-data and returns accessible image URL, drag-and-drop reorder calls /api/v1/gallery/reorder and persists new display order, bulk delete actions work correctly, image error fallback (ImageOff) triggers when API image URL is unreachable.

As a Tech Lead, verify the end-to-end integration between the Admin/Dashboard frontend sections (AdminDashboard, DashboardStats, DashboardHeader, AdminSidebar, AdminTopBar, DashboardSidebar, DashboardHeader) and the Admin Dashboard Statistics API (/api/v1/admin/stats) and Auth API (/api/v1/auth). Ensure: admin login JWT flow works and tokens are stored/refreshed correctly, dashboard stats load real aggregate data from API, live date/time polling in DashboardHeader works, sidebar navigation routes correctly, admin session expiry shows re-login prompt, all protected admin routes return 401 and redirect to login when token is expired.

As a Tech Lead, verify the end-to-end integration between the price request CTAs on product-listing frontend sections (CollectionsGrid, BridalSetsGrid, AIRecommendationResults, HomeFeaturedCollections) and the Price Request / Enquiry backend API (/api/v1/enquiry). Ensure: 'Request Price' button opens a modal/form pre-populated with product_id, form submission sends data to API, success state renders correctly, admin can view price enquiries in admin panel linked to the product, mobile validation (Indian format /^[6-9]\d{9}$/) is enforced on both client and server.

As a frontend developer, implement the AIRecommendationActions section for the AI Recommendation page. Uses useState (wishlisted, heartAnim, toast, elevated), useRef (canvasRef, animRef, toastTimerRef, particlesRef), useCallback. Implements sticky elevation via scroll listener setting elevated when scrollY > 120 with nv-scrolled-style class. Toast system with TOAST_DURATION=2500ms and clearTimeout cleanup. Three.js gold-particle field behind primary button: 60-particle BufferGeometry with position/velocities/opacities Float32Arrays, PerspectiveCamera (FOV 35, z=6), createGlowTexture sprite texture, WebGLRenderer with alpha. Heart wishlist toggle with heartAnim CSS burst animation. Action buttons: Heart (wishlist), Share2, Camera (AR try-on), Calendar (appointment), Tag (price alert), CheckCircle2 (confirm). Import from '../styles/AIRecommendationActions.css'.

As a frontend developer, implement the AppointmentsConfirmation section for the Appointments page. The component uses `useState` for a `summary` object (date, time, purpose, name, confirmationNumber formatted as `BJ-2026-MMDD-APPT-XXXX`) and a `mounted` boolean that is set to `true` via `useEffect` with an 80ms `setTimeout` to trigger CSS mount animation (toggling `ac-mounted` class on `ac-root`). It renders a success icon wrapper (`ac-icon-wrap`), confirmation details using Lucide React icons (`Calendar`, `Clock`, `User`, `Gem`, `Hash`), a `handleDownload` function that generates a plain-text `.txt` blob with appointment details and triggers a programmatic anchor download, and a `handleAddToCalendar` function that constructs a `.ics` VCALENDAR string with `DTSTART`/`DTEND` formatted via `toISOString()` replacement and downloads it. Imports `Calendar, Download, Clock, User, Gem, Hash` from `lucide-react` and `../styles/AppointmentsConfirmation.css`.

As a Tech Lead, verify the end-to-end integration between the Custom Design frontend sections (CustomDesignUploadStudio, CustomDesignCTA, CustomDesignMaterialSelector) and the Custom Design backend API (/api/v1/custom-design). Ensure: multipart/form-data upload sends inspiration images and returns success, form validation errors from API surface correctly in UI, uploaded image previews render from API-returned URLs, admin can view and manage custom design requests. Confirm WeddingPlannerCustomization also routes correctly through the same backend endpoint with source='wedding_planner' tag.

As a Tech Lead, verify the end-to-end integration between the Wedding Planner frontend sections (WeddingPlannerBudgetPlanner, WeddingPlannerSuggestions, WeddingPlannerCustomization, WeddingPlannerApprovals) and the Wedding Planner backend API (/api/v1/wedding-planner). Ensure: budget + theme filters trigger POST /api/v1/wedding-planner/suggestions and render returned products with match_score badges, save budget plan persists to backend, customization form with multi-select metals/gems/styles/occasions submits correctly, approval items show correct summary totals from API response, currency conversion displays correct INR/USD/GBP/AED values based on frontend conversion rates.

As a Tech Lead, verify the end-to-end integration between the Appointments frontend sections (AppointmentsForm, AppointmentForm, AppointmentConfirmation, AppointmentsConfirmation, DashboardAppointments, AdminAppointmentHandler, BridalAppointmentCTA, HomeAppointmentCTA) and the Appointments backend API (/api/v1/appointments). Ensure: form submission creates appointment record in database, confirmation number BJ-YYYY-MMDD-APPT-XXXX is generated and displayed, admin dashboard lists/filters/updates appointments correctly, status transitions (pending→confirmed→completed/cancelled) work end-to-end, calendar .ics download includes correct appointment data from API response.

As a Tech Lead, verify the end-to-end integration between the AI Recommendation frontend sections (AIRecommendationHero, AIRecommendationFilters, AIRecommendationResults, AIRecommendationDetails, AIRecommendationActions, AIRecommendationRelated) and the AI Recommendation backend API (/api/v1/ai/recommend). Ensure: filter selections (occasion, budget, metal purity, style) are sent to the API as structured JSON, AI match_percentage scores display correctly on product cards, recommended product IDs cross-reference with /api/v1/products for full product data rendering, price alert subscription (AIRecommendationActions Tag button) calls /api/v1/ai/price-alert correctly, related products section loads from filtered product API based on same category as recommended item.