snowy-clothing

As a frontend developer, implement the `HomeHero` section for the Home page. Build a full-viewport hero using `@react-three/fiber` Canvas with `OrbitControls`, `PerspectiveCamera`, and `Environment` from `@react-three/drei`. Implement the `Particles` component: 60 `instancedMesh` spheres animated via `useFrame` with sinusoidal float using per-particle speed/offset/scale. Implement `RunwayFloor` mesh with `planeGeometry` (4×24) rotated flat and `meshStandardMaterial`. Cycle through `PRODUCTS` array (4 items: Shadow Bomber Jacket, Arctic Puffer Vest, Neon Drift Hoodie, Onyx Cargo Pants) using `useState` for activeIndex. Use `useCallback` and `useRef` for performance. Integrate `gsap` for slide transitions and `framer-motion` `AnimatePresence` for overlay text reveals. Display collection name, product title, desc, and price per product. Import `THREE` from three and `HomeHero.css`.

As a frontend developer, implement the `RunwayShowcase` section for the Home page. Render 6 model cards from `runwayModels` array (Aiden K., Mika L., Jordan V., Sasha R., Ren T., Kai N.) using framer-motion `cardVariants` with staggered reveal (delay: i*0.12, duration 0.6, custom cubic-bezier ease). Each card has varying CSS `height` classes (tall/medium/short), Unsplash model images, badge overlays, price tag, and product/collection labels. Implement `hoveredCard` state with `useState` driving `AnimatePresence`-based overlay using `overlayVariants` (y: 30→0, opacity 0→1). Integrate `gsap` for header entrance animation via `headerRef` and `cardsRef` array. Include `Star` and `ArrowRight` from lucide-react. Import `RunwayShowcase.css`.

As a frontend developer, implement the `FeaturedCollections` section for the Home page. Render 3 collection cards from `collections` array (Streetwear Essentials 42 items, Limited Edition 18 items, Winter Drop 2026 31 items) with Unsplash images and per-card accent colors. Register `ScrollTrigger` plugin via `gsap.registerPlugin`. Use `gsap.context()` scoped to `rootRef` for two animation sets: (1) header stagger reveal targeting `.fc-label, .fc-title, .fc-subtitle` elements via `headerRef`, triggered at `top 85%`; (2) per-card `fromTo` opacity/y animations with `index*0.2` delay triggered at `top 88%`. Implement magnetic CTA button effect via `handleCtaMouseMove` callback using `ctaWrapsRef` array with `MAGNETIC_RADIUS=40` and `MAGNETIC_STRENGTH=0.4` constants. Spawn `PARTICLE_COUNT=14` decorative particles. Cleanup via `ctx.revert()`. Import `ScrollTrigger` from `gsap/ScrollTrigger` and `FeaturedCollections.css`.

As a frontend developer, implement the `BrandStatement` section for the Home page. Use `useInView` from framer-motion (once: true, amount: 0.25) on `sectionRef` to trigger a typewriter effect on `MISSION_TEXT` (259 chars) via `setTypedCount` interval (800ms total duration, char-by-char). Guard with `typingStarted` ref to prevent re-firing. Render 3 brand value cards from `BRAND_VALUES` (Craftsmanship, Innovation, Inclusivity) using `valueVariants` spring animations with custom delay `1.0 + i*0.2`. Animate the SVG divider line via `strokeDasharray` using `dividerLength=360`. Apply `eyebrowVariants` (x: -20→0), `headingVariants` (y: 16→0), and `positioningVariants` (delay 1.8s) framer-motion animations. Render parallax background layer div. Import `BrandStatement.css`.

As a frontend developer, implement the `NewArrivals` section for the Home page. Render 8 product cards from the `products` array (Obsidian Oversized Hoodie ₱2890, Arctic Cargo Pants ₱3450, Glacier Graphic Tee ₱1490, Midnight Track Jacket ₱4290, Storm Utility Vest ₱3890, Drift Relaxed Shorts ₱1990, Noir Crewneck Sweater ₱2590, Echo Windbreaker ₱4790) via `ProductCard` sub-component. Each `ProductCard` uses `useState` for `isFlipped` (card flip interaction) and `added` (add-to-cart feedback). Implement `StarRating` sub-component rendering full/half/empty star spans from float rating value. Use `formatPrice` utility for ₱ currency formatting. Integrate framer-motion `useMotionValue` and `useTransform` for tilt/parallax on hover, and `animate` for smooth transitions. Use `gsap` for entrance animations via `useRef` and `useCallback`. Import `NewArrivals.css`.

As a frontend developer, implement the `TrustBadges` section for the Home page. Render 5 `BadgeCard` sub-components from the `badges` array (Authentic Streetwear, Secure Payments, Fast Shipping, Premium Quality, Satisfaction Guarantee). Each `BadgeCard` uses `useState` for `hovered` state toggling two framer-motion animations: (1) `.tb-glow` div animates scale 0→1.4 and opacity 0→1 on hover (duration 0.35s); (2) icon div pulses via `scale: [1, 1.18, 1]` on repeat with `repeatDelay: 2`. Import lucide-react icons `ShieldCheck`, `CreditCard`, `Truck`, `Award`, `ThumbsUp`. Render three parallax decorative background layers (`.tb-deco-bg`, `.tb-deco-mid`) with blob and dash divs using CSS `--scroll` custom property for translateY. Import `TrustBadges.css`.

As a frontend developer, implement the `CustomerTestimonials` section for the Home page. Manage `activeIndex` and `isPaused` via `useState`. Implement `animateToCard` callback using `isAnimatingRef` guard — it drives GSAP transitions between `cardRefs` and `starRefs` arrays for the 4 testimonial cards (Marcus Chen, Aisha Johnson, Dylan Park, Sofia Rivera). Each card shows initials avatar, rating (4–5 stars via `StarIcon` SVG), review text, product name, and verified buyer badge. Implement auto-advance timer via `autoTimerRef` and pause-on-hover via `pauseTimerRef`. Navigation uses `ChevronLeft`/`ChevronRight` custom SVG components. Integrate `AnimatePresence` from framer-motion for card transitions. Import `CustomerTestimonials.css`.

As a frontend developer, implement the `SocialProof` section for the Home page. Render 8 Instagram-style post thumbnails from `socialPosts` array (Layered Look, Winter Puffer, Essentials, BTS Shoot, Varsity Jacket, Sneaker Drop, Accessories, Street Style) as `PostThumbnail` sub-components. Each post uses CSS `gradient` as background (e.g. `linear-gradient(135deg, #1A1A1D 0%, #4E4E50 50%, #FF6F61 100%)`). `PostThumbnail` manages `hovered` state via `useState`. On hover, animate overlay using `overlayVariants` (y: '100%'→0) and `borderVariants` (opacity 0→1) via framer-motion `AnimatePresence`. Show `InstagramIcon` custom SVG and post `label` in overlay. Apply `gridItemVariants` stagger (delay: i*0.08, duration 0.5, cubic-bezier ease) to each item. Use `useRef` and `useCallback` for grid container. Import `SocialProof.css`.

As a frontend developer, implement the `NewsletterSignup` section for the Home page. Manage `email`, `submitted`, and `isFocused` via `useState`. Implement `handleSubmit` which sets `submitted=true` and calls `spawnConfetti`. `spawnConfetti` via `useCallback` creates 25 DOM particle elements in `confettiRef` container, each assigned a random color from `CONFETTI_COLORS` (#FF6F61, #FFD700, #1A1A1D, #4E4E50), random size (4–12px), circle or rect shape, then animates with GSAP `fromTo`: upward spread with random angle/velocity (120–320), x/y/opacity/scale/rotation exit over 0.8–1.4s with `power2.out` ease, removing element on complete. Auto-reset `submitted` and clear `email` after 3000ms via `useEffect`. Show `AnimatePresence`-driven success state. Render parallax background and midground deco circles. Import `NewsletterSignup.css`.

As a frontend developer, implement the `Footer` section for the Home page. Render 4 link columns from `linkColumns` array (Shop, Collections, Company, Support) each with 4 links, using `columnVariants` (staggerChildren 0.1, delayChildren 0.2) and `linkVariants` (x: -10→0, custom i*0.1 delay) framer-motion animations. Render 3 social icons (Instagram, TikTok, Twitter) as SVG with `isHoveringSocial` state via `useState`. Implement `getOrbitPosition` utility computing x/y coords via `Math.cos`/`Math.sin` for social icon orbit animation layout. Include brand tagline, copyright, and legal links. Import `Footer.css`. This component may already exist from a previous page — reuse if available.

Implement FastAPI backend endpoints for products resource: GET /api/products (list with filters: category, price range, size, color, search, pagination), GET /api/products/{id} (detail), POST /api/products (admin create), PUT /api/products/{id} (admin update), DELETE /api/products/{id} (admin delete). Include stock availability, variant management (size/color), low-stock indicator logic, and image URL handling. Return structured JSON matching frontend ProductCard and product detail page requirements. Note: frontend tasks NewArrivals (21943d32), RunwayShowcase (2c377c61), FeaturedCollections (54b571a9), HomeHero (c95a1efb) depend on this endpoint for real data.

Implement FastAPI endpoints for customer/user management: POST /api/auth/register (account creation), POST /api/auth/login (JWT token), POST /api/auth/logout, GET /api/users/me (profile), PUT /api/users/me (update profile), GET /api/users/me/orders (order history), GET /api/users/me/wishlist, POST /api/users/me/wishlist/{product_id}, DELETE /api/users/me/wishlist/{product_id}. Admin endpoints: GET /api/admin/customers (list), GET /api/admin/customers/{id} (detail). Use JWT bearer tokens. Note: Login, Signup, Profile, Wishlist pages depend on these endpoints.

Implement FastAPI endpoints for theme and CMS customization: GET /api/theme (public, returns current theme config: colors, fonts, banner URLs, section visibility), PUT /api/admin/theme (update theme config), GET /api/admin/banners, POST /api/admin/banners, PUT /api/admin/banners/{id}, DELETE /api/admin/banners/{id}. GET /api/admin/shipping-config (shipping fees, couriers, delivery estimates), PUT /api/admin/shipping-config. Store theme config as JSON in DB. Note: Admin Theme, Admin Shipping, and all public pages that render theme-driven styles depend on this.

Implement FastAPI endpoint POST /api/newsletter/subscribe accepting email address, storing in newsletter_subscribers table with created_at timestamp and active flag. Include duplicate-check (return 200 if already subscribed). Admin endpoint GET /api/admin/newsletter/subscribers for export. Note: NewsletterSignup frontend component (3d735b18) currently uses mock submit — wire to this endpoint.

Implement FastAPI endpoints for discount/promo code management: POST /api/cart/apply-discount (validate code, return discount amount/percentage), Admin: GET /api/admin/discounts, POST /api/admin/discounts (create code with type: percentage/fixed, min order, expiry, usage limit), PUT /api/admin/discounts/{id}, DELETE /api/admin/discounts/{id}. Track usage count per code. Note: Checkout and Admin Dashboard pages depend on this.

Implement JWT-based authentication middleware for FastAPI. Setup: install python-jose and passlib, create JWT utility (create_access_token, decode_token, get_current_user dependency). Implement role-based access control (RBAC) with roles: guest, registered_user, admin. Protect admin routes with require_admin dependency, user routes with require_user dependency. Add CORS middleware configured for frontend origin. Implement refresh token endpoint POST /api/auth/refresh. Store hashed passwords using bcrypt. This is a cross-cutting concern required by all protected API endpoints.

Create a seed data script (scripts/seed.py) to populate the database with initial data for development and demo: (1) Admin user account with hashed password, (2) 12+ sample products matching the items referenced in frontend tasks (Obsidian Oversized Hoodie ₱2890, Arctic Cargo Pants ₱3450, Glacier Graphic Tee ₱1490, Midnight Track Jacket ₱4290, Storm Utility Vest ₱3890, Drift Relaxed Shorts ₱1990, Noir Crewneck Sweater ₱2590, Echo Windbreaker ₱4790, Shadow Bomber Jacket, Arctic Puffer Vest, Neon Drift Hoodie, Onyx Cargo Pants) with categories, variants, and placeholder images, (3) 3 featured collections (Streetwear Essentials, Limited Edition, Winter Drop 2026), (4) Default theme config with brand colors from SRD, (5) Sample discount codes for testing. Run via `python scripts/seed.py`.

Implement FastAPI endpoints for order management: POST /api/orders (create order for guest and registered users), GET /api/orders/{id} (order detail + tracking), GET /api/orders (admin list with filters), PUT /api/orders/{id}/status (admin update: received/payment_confirmed/packing/shipped/in_transit/delivered), GET /api/orders/track/{tracking_code} (public tracking by code). Include order confirmation logic, inventory decrement on order creation, and shipping workflow state machine. Note: Checkout, Confirmation, Tracking, and Admin Orders pages depend on this.

Implement FastAPI endpoint POST /api/admin/uploads for product image handling. Accept multipart/form-data with image files, validate file type (jpg/png/webp) and size (max 10MB), resize/optimize using Pillow (generate thumbnail, medium, large variants), store to local /media volume (docker-mapped) or S3-compatible storage. Return CDN/static URLs for use in product creation. Add GET /media/{path} static file serving. Note: required by Admin Product upload flow and product image gallery on product detail pages.

Implement FastAPI endpoints for payment management: POST /api/payments/initiate (create payment record for order), POST /api/payments/gcash/verify (admin verify GCash payment with reference number/QR), POST /api/payments/bank-transfer/verify (admin verify bank transfer), GET /api/payments/{order_id} (payment status), Admin: GET /api/admin/payments (list pending/completed), PUT /api/admin/payments/{id}/confirm, PUT /api/admin/payments/{id}/refund. Support GCash, bank transfer, and COD toggle. Note: Checkout, Admin Payments pages depend on these endpoints.

Implement FastAPI endpoints for admin analytics and reporting: GET /api/admin/analytics/overview (total sales, order counts, top products, revenue by period), GET /api/admin/analytics/sales-report (filterable by date range, exportable), GET /api/admin/analytics/inventory (stock levels, low-stock alerts), GET /api/admin/analytics/customers (new vs returning, top customers). Aggregate queries using SQLAlchemy over orders, products, and users tables. Note: Admin Analytics/Dashboard pages depend on this.