agile-products

As a frontend developer, implement the LandingHero section for the Landing page. Build a full 3D hero using `@react-three/fiber` Canvas with a `BinaryField` component that renders 120 `BinaryDigit` instances (Text from `@react-three/drei`) falling along the Y axis via `useFrame`, resetting when Y < -12. Implement `CameraController` using `useFrame` to lerp `position.z` based on `scrollFactor`. Use `useState` for `showDetail`, `tilt` ({rotateX, rotateY}), and `swayAngle`; animate `swayAngle` via `requestAnimationFrame` using `Math.sin(elapsed * 0.8) * 3`. Implement card 3D tilt via `onMouseMove` using `getBoundingClientRect`. Import icons from `lucide-react` (`ShieldCheck`, `Zap`, `Lock`, `ShoppingCart`, `ChevronRight`, `Check`, `ArrowRight`). Use `framer-motion` and `AnimatePresence` for hero content transitions.

As a frontend developer, implement the TrustBadges section for the Landing page. Render four `Badge` items from the `BADGES` array (`ShieldCheck` 256-bit SSL, `Users` 10K+ customers, `Zap` 24/7 delivery, `BadgeCheck` 100% money-back) using `motion.div` with `whileInView` entrance (`opacity: 0→1, y: 24→0`) and staggered delays (0, 0.1, 0.2, 0.3). Each badge has a `tb-glow` div animated with a repeating `boxShadow` pulse using amber rgba values. Use `react-countup` `CountUp` component gated by `inView` state from `useInView` hook. Render a parallax background layer with 20 binary digit `span` elements and 3 midground geometric shapes. Apply CSS custom property `--scroll` for parallax `translateY` at -0.25px speed.

As a frontend developer, implement the LandingFeatures section for the Landing page. Render 4 `FeatureCard` components from the `FEATURES` array (`Browse Catalog` with `Search`, `Secure Checkout` with `ShieldCheck`, `Instant Keys` with `Zap`, `Customer Support` with `Headphones` from `lucide-react`). Each `FeatureCard` uses `useState` for `hovered`, `motion.div` with `whileHover` scale to 1.05 and custom `boxShadow` with amber/blue rgba. Animate the icon wrapper with `rotate: 15` on hover via spring. Animate `lf-title-underline` span from `width: 0` to `80%` on hover. Use `containerVariants` with `staggerChildren: 0.1` and `delayChildren: 0.15`, and `cardVariants` with `opacity/y` entrance. Render 10 binary decoration columns with 20 rows each as background texture.

As a frontend developer, implement the ProductGrid section for the Landing page. Render 6 product cards from the `PRODUCTS` array (`Windows Server 2022`, `MS Office 365 Pro`, `Norton Antivirus Plus`, `Windows 11 Pro`, `SQL Server 2022`, `Kaspersky Total Security`) each with `icon` from `lucide-react` (`Server`, `FileSpreadsheet`, `ShieldCheck`, `Monitor`, `Database`, `Key`), `price`, `priceNote`, `specs` list, and `features` badges. Implement particle burst effect using `createParticles` function generating 10 particles with `PARTICLE_COLORS` array spread at random angles/distances. Use `useState` for selected product state and `useCallback` for cart add handler. Use `motion.div` with `AnimatePresence` for card transitions. Implement `RotateCcw`, `ArrowRight`, `ShoppingCart`, `Check`, `X` icons for cart interactions.

As a frontend developer, implement the HowItWorks section for the Landing page. Render 4 steps from `STEPS` array (`Browse Products` / `Search`, `Add to Cart` / `ShoppingCart`, `Secure Checkout` / `ShieldCheck`, `Instant Delivery` / `Zap`) with tooltip support via `useState` for `hoveredStep`. Integrate `gsap` and `ScrollTrigger` (registered via `gsap.registerPlugin`) to set `lineDrawn` state `true` via `ScrollTrigger.create` with `trigger: sectionRef.current, start: 'top 75%', once: true` — all within a `gsap.context` cleaned up with `ctx.revert()`. Animate a connector line (`lineRef`) based on `lineDrawn` state. Render parallax background with 20 binary decoration chars using CSS `animationDelay` and a midground layer with two orb divs (`hiw-mid-orb--1`, `hiw-mid-orb--2`) at 0.4px scroll speed.

As a frontend developer, implement the Testimonials section for the Landing page. Build a custom embla-like carousel via `useEmblaLikeCarousel` hook using `viewportRef`, `useState` for `selectedIndex`, `scrollSnaps`, `canScrollPrev`, `canScrollNext`, and `useRef` for `isDragging`, `startX`, `startScrollLeft`. Implement `getSlidesPerView` with responsive breakpoints (1/2/3 per viewport width). Render 5 testimonial cards from `TESTIMONIALS` array (`Sarah Mitchell`, `James Rodriguez`, `Emily Thornton`, `David Kim`, `Amanda Foster`) each with `Quote` icon, star rating, initials avatar, name, and role. Add `ChevronLeft`/`ChevronRight` nav buttons. Render 12 binary waterfall columns (`BINARY_COLUMNS`) as background with CSS `animation-duration` and `animation-delay` per column. Use `useInView` for section entrance via `motion.div`.

As a frontend developer, implement the LandingPricing section for the Landing page. Render 3 pricing tiers from `tiers` array (`Individual` at ₹999/mo, `Small Business` at ₹2,499/mo with `popular: true` badge, `Enterprise` at ₹7,999/mo) each with icon emoji, `iconClass`, description, feature list with `Check` icons, and CTA button styled by `ctaStyle` (`lp-cta-outline` or `lp-cta-filled`). Use `useState` for `selectedTier` (default `business`) and `isYearly` toggle (monthly/yearly price switching). Render 24 binary chars in parallax background at -0.25px scroll speed and a midground decorative layer at -0.45px. Use `motion.div` with `AnimatePresence` for tier selection transitions and `Shield` icon for trust indicators.

As a frontend developer, implement the LandingFAQ section for the Landing page. Render 7 FAQ items from `FAQ_DATA` array covering topics: key delivery, key legitimacy, volume licensing, payment methods, refund policy, activation support, and time-to-use. Each item identified by `id` (`faq_item_1` through `faq_item_7`) with `question` and `answer` fields. Use `useState` for tracking the open/expanded item. Implement accordion expand/collapse with `motion.div` + `AnimatePresence` for smooth height transitions. Use `ChevronDown` icon with rotation animation on open state. Render `HelpCircle` for section icon and `ArrowRight` for CTA link. Include 24 binary background elements with staggered CSS `animationDelay` values.

As a frontend developer, implement the LandingCTA section for the Landing page. Use `useState` for `particles` array and `magnetOffset` ({x, y}). Implement magnetic button effect via `onMouseMove` handler on the section: compute `btnCenterX/Y` from `getBoundingClientRect`, calculate distance, apply pull factor `(1 - dist/maxDist) * 12` within `maxDist: 120px` radius, stored in `magnetOffset` via `useCallback`. On click, call `generateParticles()` generating 10 particles with radial spread (angle from index/count * 2π, distance 60-160px) in `PARTICLE_COLORS` (`#E74C3C`, `#F39C12`, `#F4D03F`, `#5DADE2`), then clear after 800ms via `setTimeout`. Render 14 binary waterfall columns (`BINARY_COLUMNS`) at 0.3px parallax speed. Use `useInView` with `margin: '-80px'` for entrance animation. Display `ShoppingCart`, `Shield`, `Zap`, `CheckCircle` trust icons with `AnimatePresence` for particle burst rendering.

As a frontend developer, implement the Footer section for the Landing page. Render four `LinkColumn` components: `Products` (5 links to `/Products`), `Company` (5 links to `/Landing`), `Support` (5 links including `/Orders`), `Legal` (5 links). Each link uses `FooterLink` with animated `ftr-link-underline` div using `motion` variants (`rest: width 0`, `hover: width 100%`) over 0.3s ease. Render 5 social icon buttons (`Twitter`, `Facebook`, `Linkedin`, `Github`, `Youtube` from `lucide-react`) via `socialIcons` array with staggered `delay` (0 to 0.2). Render `BottomLink` components for bottom bar legal links using same underline animation pattern. Include 30 binary decoration chars as background texture with per-char `left`, `top`, `delay`, and `size` styles. Note: This Footer component may already exist from a shared layout; verify before reimplementing.

Implement FastAPI endpoints for guest cart management using session tokens: POST /api/cart (create/get cart by session token), GET /api/cart/{session_token} (retrieve cart with items), POST /api/cart/{session_token}/items (add item with product_id, quantity), PUT /api/cart/{session_token}/items/{item_id} (update quantity), DELETE /api/cart/{session_token}/items/{item_id} (remove item), DELETE /api/cart/{session_token} (clear cart). Cart model: session_token, items (product_id, quantity, price_snapshot), total_inr. No user accounts required — purely session-based. Frontend Cart page depends on this API.

Implement admin authentication for protected routes. Since the platform does not support user accounts for customers, only admin auth is needed. Create: POST /api/admin/login (returns JWT access token), POST /api/admin/logout, GET /api/admin/me (verify token). Implement FastAPI dependency `require_admin` using OAuth2PasswordBearer + JWT (PyJWT). Apply to all admin-only endpoints: product management, order management, fulfillment. Store admin credentials in environment variables (ADMIN_EMAIL, ADMIN_PASSWORD_HASH) or a separate admin table. Include token expiry and refresh logic. AdminLogin page depends on this API.

Create a centralized API client utility for all frontend-to-backend communication. Implement an axios or fetch-based client in src/utils/apiClient.js with: base URL from environment variable (REACT_APP_API_URL), automatic session_token injection in headers, JWT token injection for admin routes (from localStorage), request/response interceptors for error handling, automatic retry on 5xx errors (max 2 retries). Create typed API service modules: productsApi.js, cartApi.js, ordersApi.js, paymentsApi.js, adminApi.js. This cross-cutting utility is required by all pages that consume backend data.

Create a database seed script to populate initial product catalog for agile-products. Seed data should include: Windows Server category (Windows Server 2022 Standard at ₹12,999, Windows Server 2019 at ₹9,999), MS Office category (Office 365 Personal at ₹4,999, Office 2021 Professional at ₹7,499, Excel 2021 standalone at ₹2,999), Antivirus category (Norton 360 at ₹1,299, Kaspersky Total Security at ₹999, Quick Heal Total Security at ₹799). Each product includes: slug, category, description, stock_quantity (set to 999 for digital), is_active=true. Create alembic seed migration or a standalone seed.py script runnable via docker-compose exec. Also create 5 sample ProductKey records per product for testing fulfillment flow.

Implement FastAPI endpoints for order lifecycle: POST /api/orders (create order from cart, capture guest email/name), GET /api/orders (admin list all orders with filters: status, date range), GET /api/orders/{id} (order detail with items and keys), PUT /api/orders/{id}/status (admin update status: pending/processing/fulfilled/cancelled), POST /api/orders/{id}/fulfill (admin manually assign product keys from supplier, triggers email delivery). Order model: id, session_token, guest_email, guest_name, items, total_inr, status, payment_reference, fulfilled_at, created_at. Note: Dashboard and Orders admin pages depend on this API.

Set up global React state management for cart and session across all pages. Use React Context API + useReducer (or Zustand) for: CartContext (items, total, session_token, addItem, removeItem, updateQuantity, clearCart), SessionContext (session_token persisted in localStorage). Generate and persist session_token (UUID) on first visit. Sync cart state with backend Cart API on changes. Expose useCart() and useSession() hooks for consumption by ProductGrid, Cart, Checkout, and OrderConfirm pages. This is a cross-cutting concern required by multiple frontend pages that the existing section-level tasks do not cover.

Implement email delivery service for sending purchased product keys to customers after order fulfillment. Use FastAPI background tasks with an SMTP provider (e.g. SendGrid or SMTP via smtplib). Create an email template for order confirmation including: order ID, product name, license key, activation instructions. Trigger on PUT /api/orders/{id}/status when status transitions to 'fulfilled'. Also send order confirmation email on POST /api/orders. Store email logs in database. Environment variables: SMTP_HOST, SMTP_PORT, SMTP_USER, SMTP_PASSWORD, FROM_EMAIL.

Implement payment processing endpoints for INR transactions targeting India market. Integrate Razorpay (recommended for India) or Stripe with INR support: POST /api/payments/create-order (create payment order, returns payment_id and key), POST /api/payments/verify (verify payment signature after success using HMAC-SHA256), POST /api/payments/webhook (handle payment status webhooks). On successful payment verification, trigger order creation and confirmation email. Store payment_reference in order. Environment variables: RAZORPAY_KEY_ID, RAZORPAY_KEY_SECRET. Frontend Checkout page depends on this API.

Implement FastAPI endpoints for the admin dashboard overview: GET /api/admin/dashboard/stats (returns: total_orders, total_revenue_inr, pending_orders, fulfilled_orders, total_products, low_stock_products), GET /api/admin/dashboard/recent-orders (last 10 orders), GET /api/admin/dashboard/top-products (top 5 by sales volume). All endpoints protected by require_admin dependency. Dashboard page depends on this API. Note: frontend Dashboard section tasks should integrate with these endpoints once available.