He-man Stone Suppliers

As a frontend developer, implement the LandingHero section for the Landing page. Build a full-screen hero with a `@react-three/fiber` Canvas containing four `StoneBlock` components rendered from `STONE_ZONES` data (Kota Stone, Granite, Marble, Sandstone). Each `StoneBlock` uses `useRef` for mesh/material refs, `useMemo` for `THREE.Color` instances, and `useFrame` for sinusoidal floating animation (`Math.sin(t * 0.5 + zone.position[0]) * 0.08`) and emissive intensity lerp (0.05 → 0.35 on hover). Geometry is `dodecahedronGeometry`. Include `PerspectiveCamera`, `OrbitControls`, and `Environment` from `@react-three/drei`. Overlay uses `motion.div` with scroll-driven parallax via `useScroll`/`useTransform`. Stats bar renders three `STATS` items (`25+ Years Experience`, `500+ Projects Delivered`, `50+ Stone Varieties`). 24 CSS dust-mote particles generated from `PARTICLES` array with `light`/`dust`/`stone` type classes. Hovered stone shows info tooltip with name and desc. Imports `LandingHero.css`.

As a frontend developer, implement the LandingQuarryScene section for the Landing page. Build an interactive 3D quarry exploration scene using `@react-three/fiber` Canvas with `useFrame`, `useThree`, `Text`, `Environment`, and `ContactShadows` from `@react-three/drei`. Four `ZoneBlock` 3D terrain blocks are rendered from `STONE_ZONES` (Kota Stone at [-2.2,0.15,-1.5], Granite at [2.2,0.15,-1.5], Marble at [-2.2,0.15,1.8], Sandstone at [2.2,0.15,1.8]) with `glowRef` for emissive intensity lerp (0.08 → 0.6 on hover/select). Camera uses GSAP to animate between `DEFAULT_CAMERA` position and per-zone `cameraTarget`/`cameraLookAt` when a zone is selected. `AnimatePresence` drives an info panel overlay showing zone `description`, `properties` badges, and a link to `/Products` using the zone's `bgGradient`. Zone selection managed with `useState` for `hoveredZone` and `selectedZone`. `useCallback` guards all event handlers. Imports `gsap` for camera tween and `LandingQuarryScene.css`.

As a frontend developer, implement the LandingStoneTypes section for the Landing page. Render four `StoneCard` components from `stoneTypes` data (Kota Stone, Granite, Marble, Sandstone) using Framer Motion `containerVariants` (staggerChildren: 0.12) and `cardVariants` (opacity 0, y 60 → visible). Each `StoneCard` uses `useState` for `isFlipped` flip state and `useRef` with `useScroll`/`useTransform` for a parallax image effect (`imgY` transforms scrollYProgress [0,1] → [0,-40]px). Card back face shows stone `properties` object with `hardness`, `uses`, and `colors` fields, labelled via `propLabels` and badged with `propIcons` single-character indicators (`H`, `U`, `C`). Flip is triggered by a `RotateCw` (lucide-react) button. `useInView` from framer-motion gates the stagger animation. Unsplash images are used for each stone. Imports `LandingStoneTypes.css`.

As a frontend developer, implement the LandingFeaturedProducts section for the Landing page. Render six product cards from the `PRODUCTS` array (Kota Blue Natural, Rajasthan Red Granite, Makrana White Marble, Jodhpur Sandstone, Tandur Grey Limestone, Kashmir Valley Slate) using Framer Motion `useMotionValue`, `useTransform`, `useSpring`, and `AnimatePresence`. Each card features a `StoneTextureSVG` component that renders pattern-specific procedural SVGs: `marble` uses `feTurbulence`/`feDisplacementMap` SVG filters, `speckled` uses random circle fills, `veined` uses path strokes, `layered` uses horizontal rect bands, and `uniform` uses a solid fill. Cards display `dims`, `price`, a color swatch row from the `colors` array, and the `type` badge. Mouse-tracking 3D tilt effect implemented via `useMotionValue` for `rotateX`/`rotateY` with spring physics. Hovering expands to show full `desc`. Imports `LandingFeaturedProducts.css`.

As a frontend developer, implement the LandingAbout section for the Landing page. Build a two-column layout with a parallax quarry image on the left (Framer Motion `motion.div` with `imageY` from `useTransform(scrollYProgress, [0,1], [0,-80])`) and animated text content on the right. Three decorative parallax background layers (`lab-parallax-bg` at -0.2x scroll, `lab-parallax-mid` at -0.4x scroll) render `lab-deco-slab`, `lab-deco-grain`, and `lab-deco-line` divs. Three `CountUp` sub-components animate from 0 to target values (`25+`, `150+`, `5000+`) using `requestAnimationFrame`, `easeOutQuad` easing, and a `trigger` prop gated by `useInView` on `textRef` (margin `-80px`, once). `hasRun` ref prevents re-triggering. `useScroll` targets `sectionRef` with `offset: ['start end', 'end start']`. Imports `LandingAbout.css`.

As a frontend developer, implement the LandingWhyChooseUs section for the Landing page. Render a responsive grid of six `BenefitCard` components from the `benefits` array using Framer Motion `containerVariants` (staggerChildren: 0.08, delayChildren: 0.1) and `cardVariants` (opacity 0, y 40 → spring stiffness 120/damping 14). Each card includes a `wcu-card-accent-bar` top stripe, a `wcu-shadow-pulse` div with an infinite hover-triggered scale+opacity animation (scale 1→1.15→1, opacity 0→0.6→0, duration 1.2s), and an icon wrapped in `motion.div` with `iconVariants` (rotate 0→360 on mount, 0.8s easeOut). Icons sourced from lucide-react: `ShieldCheck`, `Gem`, `IndianRupee`, `Wrench`, `Truck`, `Leaf`. `useInView` on the section ref gates the container animation. `whileHover="hover"` on each card propagates to nested variants. Imports `LandingWhyChooseUs.css`.

As a frontend developer, implement the LandingTestimonials section for the Landing page. Render four `TestimonialCard` components from the `testimonials` array (Rajesh Sharma, Priya Mehta, Arjun Patel, Kavitha Reddy) using `AnimatePresence` and `useInView` (once: true, amount: 0.3). Each card implements a CSS 3D tilt effect via `useState` for `{ rotateX, rotateY }` computed in `handleMouseMove` (using `getBoundingClientRect`, `maxTilt: 8`, normalized by half-dimensions) and reset on `handleMouseLeave`. `isHovered` state drives elevation/shadow changes. Cards display avatar initials circle, star rating (filled/empty stars based on `rating` field), `projectType` badge, `location`, `company`, and the full `review` text. `useCallback` wraps all mouse handlers. `useInView` staggers card entrance with `motion.div` variants. Imports `LandingTestimonials.css`.

As a frontend developer, implement the LandingCTA section for the Landing page. Build a full-width call-to-action section with a scroll-driven animated gradient background using `useScroll`/`useTransform` (`gradientAngle` 200→340deg) smoothed via `useSpring` (stiffness 40, damping 20). A magnetic primary button uses `useSpring` for `magnetX`/`magnetY` offsets computed in `handleMouseMove` (pullRadius: 120, maxPull: 12, angle via `Math.atan2`) and reset on `handleMouseLeave`, with `primaryBtnRef` attached. `useMemo` generates 20 floating particles from `generateParticles` — each with random `x`, `y`, `size` (3–11px), `opacity`, `speed`, `delay`, `duration`, and alternating gold `rgba(243,156,18)` / `rgba(244,208,63)` colors. Four trust badges rendered from `TRUST_BADGES` using `Shield`, `Award`, `Clock`, `CheckCircle` lucide icons. `useInView` (once: false, margin: -100px) triggers entrance animations. Imports `LandingCTA.css`.

As a frontend developer, implement the Footer section for the Landing page. Build a multi-column footer with two parallax decorative layers (`ftr-parallax-bg` at -0.15x scroll with `ftr-deco-line` divs, `ftr-parallax-mid` at -0.3x scroll with `ftr-deco-dot` divs). The top row contains an animated SVG logo (Framer Motion stroke-draw, same pattern as Navbar) and a newsletter email form with `useState` for `email` and `submitted` — on submit sets `submitted: true`, clears `email`, then resets via `setTimeout` after 3000ms. Four link columns rendered from `footerColumns` array (`Products`, `Company`, `Support`, `Legal`) with hrefs to `/Products`, `/About`, `/Contact`, `/Inquiries`, `/Landing`. Social icons row uses `FaFacebookF`, `FaInstagram`, `FaLinkedinIn`, `FaTwitter`, `FaYoutube` from `react-icons/fa` wrapped in `motion.a` with hover scale. Contact info uses `Phone`, `Mail`, `MapPin` from lucide-react. Note: this component may already exist if shared across pages. Imports `Footer.css`.

As a Backend Developer, implement the Products REST API using FastAPI. Endpoints: GET /api/products (list all products with optional query params: type, page, limit), GET /api/products/{id} (product detail with full image list and specs), POST /api/products (admin: create product), PUT /api/products/{id} (admin: update product), DELETE /api/products/{id} (admin: delete product). Include request/response Pydantic schemas, image URL handling, product type enum validation, and pagination metadata. Protect write endpoints with JWT authentication middleware. This API supports the Products page, ProductDetail page, LandingFeaturedProducts section, and Admin Dashboard.

As a Backend Developer, implement the Inquiries REST API using FastAPI. Endpoints: POST /api/inquiries (public: submit a new inquiry from the Contact form, with product_id optional), GET /api/inquiries (admin: list all inquiries with filters for status and date), GET /api/inquiries/{id} (admin: view single inquiry), PATCH /api/inquiries/{id}/status (admin: update status to read/responded), DELETE /api/inquiries/{id} (admin: delete inquiry). Include email notification stub on new inquiry submission. Protect admin endpoints with JWT auth middleware. Request/response Pydantic schemas including validation for phone, email fields.

As a Backend Developer, implement JWT-based authentication for admin routes in FastAPI. Endpoints: POST /api/auth/login (accepts email + password, returns access_token and refresh_token), POST /api/auth/refresh (refresh access token), POST /api/auth/logout (invalidate token). Use python-jose for JWT encoding, passlib[bcrypt] for password hashing. Create a reusable `get_current_admin` dependency for protected routes. Token expiry: 15 minutes for access token, 7 days for refresh token. Return appropriate 401/403 HTTP errors on failure. Note: basic login UI already exists; this covers the backend security layer.

As a Backend Developer, implement an image upload and serving service in FastAPI. Endpoint: POST /api/upload/image (admin: accepts multipart/form-data, validates file type [jpg/png/webp], enforces max size 10MB, generates optimized thumbnail, stores to local volume or object storage, returns public URL). GET /api/images/{filename} to serve images. Implement image compression/resizing using Pillow to ensure high-resolution images do not compromise load times (Non-Functional Requirement). Store image metadata linked to products. Configure CORS and static file serving in FastAPI.

As a Frontend Developer, implement the About page (v1 design). Build sections covering company history, mission statement, team, and credentials. Use parallax scroll effects consistent with the landing page interaction model for decorative elements, while maintaining the 'static' interaction model for content sections. Include an animated timeline for company milestones, stone sourcing locations map or graphic, and quality certifications. Use brand colors and typography from the design system. Route: /About.

As a Frontend Developer, implement the Contact page (v1 design). Build a contact form with fields: name, email, phone, product interest (dropdown with stone types), and message. Include client-side validation with error states. Display company contact information (phone, email, address) using lucide-react icons. Embed a location map or static map image for the business address. On form submit, call POST /api/inquiries and show a success/error feedback state. Route: /Contact. Depends on Inquiries API (temp_inquiries_api) — link this task to that backend task when wiring up.

As a Frontend Developer, implement the Products catalog page (v1 design). Build a responsive product grid with filter controls for stone type (Kota, Granite, Marble, Sandstone, Limestone, Slate). Fetch products from GET /api/products with type query param. Implement pagination or infinite scroll. Each product card shows name, type badge, thumbnail image, price, and a 'View Details' link to /ProductDetail/:id. Include loading skeleton states and empty state for no results. Use Framer Motion for card entrance animations. Route: /Products. Depends on Products API (temp_products_api) — link this task to that backend task when wiring up.

As a Frontend Developer, implement the ProductDetail page (v1 design). Fetch product by ID from GET /api/products/{id}. Display a high-resolution image gallery with lightbox/zoom functionality. Show full product specs: name, type, dimensions, price, color swatches, description, and use cases. Include a 'Request Inquiry' CTA button that links to /Contact with pre-filled product_id. Add related products section (same type). Breadcrumb navigation: Home > Products > [Product Name]. Use Framer Motion for image transitions. Route: /ProductDetail/:id. Depends on Products API (temp_products_api) — link this task to that backend task when wiring up.

As a Frontend Developer, implement the Admin Dashboard page (v1 design). Build a protected route (/Dashboard) that requires JWT auth token. Display overview stats: total products, total inquiries, new inquiries count. Include quick action cards: Add Product, View Inquiries, Manage Catalog. Sidebar navigation with links to Products management and Inquiries. Show recent inquiries list preview. Fetch stats from backend summary endpoint. Redirect to /Login if unauthenticated. Depends on Auth API (temp_auth_api) and Inquiries/Products APIs — link these tasks when wiring up.

As a Frontend Developer, implement the Admin Inquiries management page (v1 design). Build a protected route (/Inquiries) showing a table/list of all customer inquiries fetched from GET /api/inquiries. Display columns: customer name, email, product interest, date, status badge (new/read/responded). Allow admin to click an inquiry to view full message details. Implement status update action (mark as read/responded) via PATCH /api/inquiries/{id}/status. Include filter by status and date range. Pagination support. Empty state and loading skeletons. Depends on Inquiries API (temp_inquiries_api) — link this task when wiring up.

As a Frontend Developer, implement the Admin product management UI within the Dashboard/Products admin route. Build a product list table with Add, Edit, Delete actions. Create a product form modal/page with fields: name, type (dropdown), description, price, dimensions, color swatches (multi-input), and image upload (calls POST /api/upload/image). On form submit, call POST /api/products or PUT /api/products/{id}. Implement confirmation dialog for delete (DELETE /api/products/{id}). Show success/error toasts. Depends on Products API (temp_products_api) and Image Upload API (temp_image_upload_api) — link these tasks when wiring up.

As a Frontend Developer, configure global state management for the React application. Set up React Context or Zustand store for: auth state (isAuthenticated, adminUser, token), cart/inquiry basket (if applicable), and UI state (theme, loading). Implement an API client module (axios or fetch wrapper) with base URL configuration, JWT token injection in request headers, and 401 auto-redirect to /Login. Create custom hooks: useAuth(), useProducts(), useInquiries() for consuming API data with loading/error states. This is a prerequisite for all pages that consume backend APIs.

As a Backend Developer, implement a GET /api/dashboard/summary endpoint (admin protected) that returns aggregate stats for the admin dashboard: total_products count, total_inquiries count, new_inquiries count (status='new'), recent_inquiries list (last 5), product_type_breakdown (count per type). This supports the Admin Dashboard overview page (temp_dashboard_page).

As a Tech Lead, verify end-to-end integration between the Products catalog frontend (temp_products_page) and the Products backend API (temp_products_api). Ensure product listing loads correctly from the API, filter by stone type query param works, pagination functions correctly, product cards display real data including images, and navigation to ProductDetail passes correct product ID. Confirm CORS configuration is correct and loading/error states render as expected in the UI.

As a Tech Lead, verify end-to-end integration between the ProductDetail frontend page (temp_product_detail_page) and the Products backend API (temp_products_api). Ensure product data loads by ID, high-resolution images render correctly from API URLs, specs display accurately, related products section fetches same-type products, and the 'Request Inquiry' CTA correctly pre-fills the Contact form with the product reference.

As a Tech Lead, verify end-to-end integration between the Contact page frontend (temp_contact_page) and the Inquiries backend API (temp_inquiries_api). Ensure the contact form submission correctly calls POST /api/inquiries, validation errors from backend are surfaced in the UI, success state is shown after submission, and the submitted inquiry appears in the Admin Inquiries page. Test with and without a pre-filled product_id from the ProductDetail CTA flow.

As a Tech Lead, verify end-to-end integration between the Admin Inquiries frontend page (temp_inquiries_page) and the Inquiries backend API (temp_inquiries_api). Ensure inquiry list loads from GET /api/inquiries, status update PATCH calls succeed and reflect in the UI, pagination and filters work correctly, and protected routes correctly redirect unauthenticated users to /Login.

As a Tech Lead, verify end-to-end integration between the Admin product management frontend (temp_admin_products_mgmt) and the Products API (temp_products_api) plus Image Upload API (temp_image_upload_api). Ensure CRUD operations (create, update, delete) work correctly end-to-end, image uploads return valid URLs that render in the product form and catalog, JWT auth is enforced on all write operations, and the product catalog reflects changes immediately after admin actions.

As a Tech Lead, verify end-to-end integration between the Admin Dashboard frontend (temp_dashboard_page) and the Dashboard Summary API (temp_dashboard_stats_api). Ensure stats (total products, total inquiries, new inquiries) render correctly from API data, recent inquiries preview list displays accurate data, auth guard redirects unauthenticated users, and all quick action navigation links function correctly.