Pithriftstore

As a frontend developer, implement the `LandingHero` section for the Landing page. Use `useRef` for `sectionRef` and `useScroll`/`useSpring`/`useTransform` from Framer Motion for scroll-driven parallax: `headlineY` transforms `[0, -60]` and `headlineOpacity` transforms `[1, 0]` over scroll progress `[0, 0.4–0.5]`. Render staggered text animations using `containerVariants` (staggerChildren: 0.12, delayChildren: 0.2) and `fadeUpVariant` (opacity 0→1, y 30→0, duration 0.7). Implement CTA buttons with `ctaStagger` and `ctaVariant` (opacity/y/scale). Display three `fashionItems` as mosaic cards (Vintage Denim Jacket ₹1,299, Retro Band T-Shirt ₹499, Classic Linen Shirt ₹799) using three distinct `cardVariants` with staggered entry rotations (-6°→-3°, 4°→2°, y-based→-1°) and `whileHover` spring physics (stiffness 300, damping 20). Render `trustItems` row with `Shield`, `Truck`, `Sparkles` Lucide icons. Import from `../styles/LandingHero.css`.

As a frontend developer, implement the `LandingCarousel` section featuring a 3D React Three Fiber carousel. Build `ClothingCard` as a Three.js mesh using `@react-three/fiber` `useFrame` for per-frame floating animation (`Math.sin(t * 0.8 + index * 1.2) * 0.12`) and orbital positioning via `angle = (index / total) * Math.PI * 2` with radius 3.2. Use `RoundedBox` from `@react-three/drei` and `Html` for in-3D-space card overlays. Wrap scene in `<Canvas>` with `<Suspense>` fallback and `<OrbitControls>`. Manage `hoveredId` state and `onSelect` callback at the parent level. Render 6 ITEMS: Vintage Denim Jacket (₹1499, blue), Retro Band T-Shirt (₹599, red), Slim Fit Chinos (₹899, green), Flannel Check Shirt (₹749, amber), High-Waist Mom Jeans (₹1199, navy), Corduroy Overshirt (₹1349, purple) — each with `color`, `colorLight`, and Unsplash image URL. Use `useMotionValue`/`useTransform`/`animate` from Framer Motion for 2D panel transitions. Use `useCallback` and `useMemo` for performance. Import `* as THREE` from three. Import from `../styles/LandingCarousel.css`.

As a frontend developer, implement the `LandingCategories` section for the Landing page. Render 8 category cards (Jeans 184, T-Shirts 256, Shirts 142, Jackets 98, Dresses 127, Sweaters 73, Shorts 91, Accessories 215) each with unique `color`, `lightColor`, and `hoverBg` values. Build the `CategoryImage` component that renders inline SVG clothing illustrations (jeans, tshirt, shirt, jacket, dress, sweater, shorts, accessories patterns) switching background fill and `fillOpacity` (0.12 inactive → 0.18 hovered) based on `hovered` prop. Manage `useState` for hovered category. Use `motion` and `AnimatePresence` from Framer Motion for card hover animations. Apply `hoverBg` as dynamic inline style on hover. Import from `../styles/LandingCategories.css`.

As a frontend developer, implement the `LandingWhyShop` section for the Landing page. Render three benefit cards (Curated Selection with `Sparkles` icon/`primary` colorClass, Affordable Prices with `BadgeDollarSign`/`secondary`, Fast Shipping with `Truck`/`highlight`) from the `benefits` array. Implement CSS custom property parallax using `--scroll` var: `ws-parallax-bg` at `translateY(calc(var(--scroll, 0) * -0.3px))` and `ws-parallax-mid` at `-0.5px` multiplier. Use Framer Motion `whileInView` with `viewport={{ once: true, margin: '-60px' }}` for section header using `headerVariants` (opacity/y, duration 0.5). Animate benefit cards with `containerVariants` (staggerChildren: 0.15) and `cardVariants` (opacity 0→1, y 30→0, duration 0.55, cubic bezier ease). Animate icons with spring `iconVariants` (scale 0.4→1, stiffness 260, damping 18). Import from `../styles/LandingWhyShop.css`.

As a frontend developer, implement the `LandingFeaturedItems` section for the Landing page. Render 8 featured product cards from `FEATURED_ITEMS` array (Vintage Denim Jacket ₹1499/₹3200, Classic Striped Oxford Shirt ₹799/₹1800, High-Waist Straight Leg Jeans ₹1199/₹2600, Retro Graphic Tee ₹499/₹1100, Wool Blend Overcoat ₹2499/₹5500, Slim Fit Chinos ₹899/₹2000, Oversized Linen Shirt ₹699/₹1600, Distressed Boyfriend Jeans ₹1349/₹2900). Build `SILHOUETTES` map with four SVG clothing icons (jacket, shirt, jeans, tshirt) rendered as `lfi-placeholder-svg`. Implement `StarIcon` component with filled/empty states using SVG stroke/fill. Use `useMotionValue` and `useAnimation` from Framer Motion for drag-based carousel or scroll interaction. Manage `useState` for active/hovered card. Use `useRef` and `useEffect` for scroll/resize handling. Import from `../styles/LandingFeaturedItems.css`.

As a frontend developer, implement the `LandingTestimonials` section for the Landing page. Render 6 testimonial cards (Priya Sharma/Mumbai, Rahul Verma/Delhi, Ananya Iyer/Bangalore, Vikram Patel/Ahmedabad, Meera Krishnan/Chennai, Arjun Singh/Jaipur) each with `initials`, `stars` (4–5), and `quote`. Build `AnimatedStar` component using Framer Motion `motion.svg` with staggered scale/opacity spring animations (stiffness 400, damping 15, delay `0.15 + index * 0.1`) and `clipPath` fill reveal animation (`inset(0 100% 0 0)` → `inset(0 0% 0 0)`, delay `0.3 + index * 0.12`). Build `TestimonialCard` component triggered by `inView` prop. Use `useInView` hook with `useRef` for viewport detection. Manage `useState` for active/selected card index. Use `useCallback` for stable event handlers. Use `AnimatePresence` for card transitions. Import from `../styles/LandingTestimonials.css`.

As a frontend developer, implement the `LandingTrendingBadges` section for the Landing page. Render 8 interactive trend badge pills from `BADGES` array: #VintageDenim (234, primary), #CasualWear (189, secondary), #DesignerPieces (97, highlight), #SustainableFashion (312, #16A34A), #BudgetFriendly (456, accent), #Streetwear (178, primary_light), #RetroFinds and others. Each badge has a custom inline SVG icon, `color`, and `bgInactive` style. Manage `useState` for selected/active badge IDs supporting multi-select toggle behavior. Use Framer Motion `motion` and `AnimatePresence` for badge selection animations with active/inactive visual state switching (background transitions from `bgInactive` to active color). Include `TrendingUp` and `X` icons from Lucide for the section header and badge dismiss/clear interactions. Import from `../styles/LandingTrendingBadges.css`.

As a frontend developer, implement the `LandingNewsletterCTA` section for the Landing page. Manage `useState` for `email`, `promoOptIn` (boolean checkbox), `submitted` (boolean), and `touched` (boolean). Use `useMemo` to derive `isValid` via `EMAIL_REGEX` (`/^[^\s@]+@[^\s@]+\.[^\s@]+$/`) and compute `showValidation = touched && email.length > 0`. Implement `handleSubmit` that prevents default, validates, sets `submitted = true`, then resets all state after 3000ms timeout. Render CSS custom property parallax layers: `nlc-parallax-bg` at `-0.25px` and `nlc-parallax-mid` at `-0.5px` containing `nlc-deco-diamond`, `nlc-deco-ring`, and 9 `nlc-deco-dot` spans. Animate headline (y 24→0), subheadline (y 16→0, delay 0.12), and form (y 20→0, delay 0.24) with `whileInView`. Render `motion.input` with `Mail` icon, validation states, `Lock` icon for privacy note, and `AnimatePresence` for success state with `Check` icon. Import from `../styles/LandingNewsletterCTA.css`.

As a frontend developer, implement the `LandingFAQ` section for the Landing page. Manage `useState` for `openId` (single active accordion item). Implement `toggleItem` function using functional updater: `setOpenId((prev) => (prev === id ? null : id))` for single-open accordion behavior. Render 7 FAQ items from `faqData` array covering topics: shopping/browsing, quality/condition grading, shipping (5–7 days standard, 2–3 days express, free return pickup), returns (7-day window, 5–7 day refund), payments (UPI/cards/net banking/wallets), sustainability (circular fashion), and seller photo uploads (24hr review). Use Framer Motion `AnimatePresence` with `motion.div` for accordion panel expand/collapse with height animation. Use `ChevronDown` with rotation transform on open state, `ArrowRight` for action links, and `HelpCircle` for section icon. Import from `../styles/LandingFAQ.css`.

As a frontend developer, implement the `LandingFinalCTA` section for the Landing page. Build `MagneticButton` component using `useRef`, `useMotionValue` (x, y), `useSpring` (stiffness 300, damping 20), and mouse event handlers to create magnetic cursor-tracking effect within `magnetRange`. Implement `generateParticles` function that creates 18 burst particles per click at `(originX, originY)` with random `angle`, `distance` (60–140px), `size` (4–10px), and `delay` (0–0.1s) for confetti explosion effect. Manage `useState` for active particles array. Render 8 `floatingIcons` (TShirtIcon, HangerIcon, ShirtIcon, JacketIcon) with CSS class positions `lcta-icon-1` through `lcta-icon-8`, each animated with Framer Motion `animate` using different `duration` (6–8.5s) and `delay` (0–2.5s) values for ambient float. Use `AnimatePresence` for particle burst lifecycle. Use `useCallback` for stable mouse handlers. Import from `../styles/LandingFinalCTA.css`.

As a frontend developer, implement the `Footer` section for the Landing page. Note: this component may already exist from a previous page — reuse if available. Build `AnimatedLink` component using `useState` for `hovered` state, `motion.div` with `onHoverStart`/`onHoverEnd`, and an SVG underline animation using `motion.line` with `pathLength` transitioning 0→1 on hover (duration 0.3, easeInOut). Build `SocialIcon` component as `motion.a` with `whileHover` scaling to 1.15 with primary blue color and border glow (spring stiffness 400, damping 15). Manage `useState` for `email` and `submitted` in the footer newsletter form; `handleSubmit` sets `submitted = true`, clears email, resets after 3000ms. Render 4 `linkColumns` (Shop, Categories, Support, Legal) each with 4 `AnimatedLink` items. Implement CSS custom property parallax: `ftr-parallax-bg` at `-0.2px` and `ftr-parallax-mid` at `-0.4px`. Import from `../styles/Footer.css`.

As a Backend Developer, implement FastAPI endpoints for products: GET /api/products (list with filters for category, price range, pagination), GET /api/products/{id} (single product detail), POST /api/products (create product with photo upload), GET /api/products/featured (8 featured items for LandingFeaturedItems), GET /api/products/trending (trending badges/tags). Include Pydantic schemas for Product (id, title, price, original_price, category, images, condition, tags, seller_id). Note: frontend tasks 2081bfe2 (LandingFeaturedItems) and 34e6bddf (LandingTrendingBadges) depend on this API.

As a Backend Developer, implement FastAPI endpoints for clothing categories: GET /api/categories (list all 8 categories: Jeans, T-Shirts, Shirts, Jackets, Dresses, Sweaters, Shorts, Accessories with item counts), GET /api/categories/{slug}/products (paginated products for a category). Include category metadata (name, slug, item_count, color, image_url). Note: frontend task 78adba3f (LandingCategories) depends on this API.

As a Backend Developer, implement FastAPI endpoints for cart management: GET /api/cart (get current user cart), POST /api/cart/items (add item to cart), PUT /api/cart/items/{item_id} (update quantity), DELETE /api/cart/items/{item_id} (remove item), DELETE /api/cart (clear cart). Include CartItem schema (product_id, quantity, price_snapshot). Use session-based or user-based cart storage in MySQL.

As a Backend Developer, implement FastAPI endpoint: POST /api/newsletter/subscribe (accept email + promo_opt_in boolean, validate email format, store in newsletter_subscribers table, return success/already-subscribed). Include duplicate email handling with 200 OK for idempotency. Note: frontend task f3f39b53 (LandingNewsletterCTA) depends on this API.

As a Frontend Developer, set up global client-side state management for cart and user session. Implement a React Context + useReducer (or Zustand store) for: cartItems (array of {product_id, title, price, quantity, image}), cartCount, cartTotal, addToCart/removeFromCart/updateQuantity/clearCart actions. Implement userSession context for auth state (user id, name, isAuthenticated). Persist cart to localStorage via useEffect. Export typed hooks: useCart(), useUser(). This shared state is consumed by Navbar (cartCount/cartPulse), LandingFeaturedItems (addToCart), LandingCarousel (onSelect/addToCart), and downstream Cart/Checkout pages.

As a Frontend Developer, create a centralized API client (`src/services/api.js` or `api.ts`) using axios or fetch with: base URL from REACT_APP_API_URL env var, request/response interceptors for auth token injection and error normalization, typed service modules: productsService (getFeatured, getByCategory, getById, uploadPhoto), categoriesService (getAll, getProducts), cartService (getCart, addItem, updateItem, removeItem), paymentService (initiatePayment, getOrder), newsletterService (subscribe). Export as named services. All frontend section components and pages that call the backend must import from this service layer.

As a Frontend Developer, implement a shared scroll-parallax utility that sets the `--scroll` CSS custom property on the document root (or section refs) via a single passive `scroll` event listener in a custom hook `useScrollParallax`. Multiple sections (LandingWhyShop, LandingNewsletterCTA, Footer) reference `--scroll` / `ws-parallax-bg` / `nlc-parallax-bg` / `ftr-parallax-bg` CSS vars. Centralizing the listener prevents duplicate event handlers and ensures consistent scroll values across all parallax sections. Export as `useScrollParallax()` hook from `src/hooks/useScrollParallax.js`.

As a Backend Developer, implement FastAPI endpoints for payment processing: POST /api/orders (create order from cart), GET /api/orders/{id} (order details), POST /api/payments/initiate (initiate payment, return payment gateway URL/token), POST /api/payments/webhook (handle payment gateway callbacks), GET /api/orders (user order history). Integrate with a payment gateway supporting UPI, cards, net banking, wallets (e.g. Razorpay for INR/India). Include Order and Payment Pydantic schemas. Ensure PCI-compliant handling — never store raw card data.

As a Backend Developer, implement FastAPI endpoint for photo uploads: POST /api/products/{id}/images (multipart file upload, validate MIME type image/jpeg|png|webp, max 5MB, store in local volume or object storage, return image URL). Implement image resizing/thumbnail generation. Include GET /api/products/{id}/images to list product images. Ensure uploaded images are served via a static files route or CDN-compatible path.

As a Tech Lead, verify the end-to-end integration between the LandingFeaturedItems frontend section and the Products API backend. Ensure the section fetches real product data from GET /api/products/featured, INR prices render correctly, add-to-cart actions update global cart state and reflect in Navbar badge, and the fallback static FEATURED_ITEMS array is replaced with API data. Confirm API responses are handled properly in the UI including loading and error states.

As a Tech Lead, verify the end-to-end integration between the LandingCategories frontend section and the Categories API backend. Ensure the section fetches live category data from GET /api/categories, item counts are accurate, category card click navigates to the correct /categories/{slug} route, and hover animations work correctly with real data. Confirm API responses are handled properly in the UI including loading states.

As a Tech Lead, verify the end-to-end integration between the LandingNewsletterCTA frontend section and the Newsletter Subscription API. Ensure the form submission calls POST /api/newsletter/subscribe with email and promo_opt_in, handles 200 (success) and duplicate-email responses gracefully, displays the correct success/error state in the UI, and resets after 3000ms as designed. Confirm CORS and API base URL are correctly configured.

As a Tech Lead, verify the end-to-end integration between the LandingCarousel 3D section and the Products API. Ensure the carousel fetches product data (or uses a dedicated carousel endpoint), item selection triggers the correct product detail navigation or add-to-cart action via the global cart state, and Unsplash placeholder images are replaced or supplemented with real product images from the API. Confirm OrbitControls and floating animations perform acceptably with live data.