Sultan Power

As a frontend developer, implement the `LandingHero` section for the Landing page. Build the `MorphingSphere` component using `useRef` and `useFrame` from `@react-three/fiber` to animate per-vertex noise morphing on a `sphereGeometry` (args [1, 32, 32]) with `wireframe` `meshStandardMaterial` at 0.15 opacity. Build `HeroScene` composing four `MorphingSphere` instances with memoized sphere configs (positions, colors, speeds, scales) plus `ambientLight` and two `pointLight` nodes. In the main `LandingHero` component use `useScroll` and `useTransform` from `framer-motion` to drive `bgY` (0 to -120), `decoY` (0 to -80), and `bgScale` (1 to 1.08) parallax transforms on the section ref. Implement a magnetic button hover effect using `useState` for `primaryOffset` with mouse position math. Use a `<Canvas>` from `@react-three/fiber` with `HeroScene`. Manage a canvas-based 2D particle system via `canvasRef` and `animFrameRef` with `showParticles` toggle state. Import `Navbar.css` styles; apply `nb-root`, `nb-inner` class structure from Navbar.

As a frontend developer, implement the `LandingImageCarousel` section for the Landing page. Build the `ImageCard` component using `useRef` and `useFrame` from `@react-three/fiber` to position cards in a circular carousel (radius 3.8) using trigonometric angle offsets from a shared `rotationRef`. Use `RoundedBox` and `Text` from `@react-three/drei` for 3D card geometry with per-card `meshStandardMaterial` color derived from `carouselImages` data (6 items: Portrait Swap, Group Photo, Creative Composite, ID Photo Upgrade, Event Memory, Social Media Ready). Apply hover scale/Y lerp via `hoveredRef`. Implement `THREE.MathUtils.lerp` for smooth hover transitions. Manage `rotationRef` for auto-rotation and drag-to-rotate interaction. Use `useThree` for camera/viewport access. Wire `AnimatePresence` and `motion` overlays from `framer-motion` for 2D UI overlays showing card metadata (title, meta, format, size, description). Map `carouselImages` array with memoized `THREE.Color` instances for `cardColor`, `gradientColor`, `whiteColor`, `primaryBlue`, and `borderDefault`.

As a frontend developer, implement the `LandingFeatures` section for the Landing page. Build the `FeatureCard` component using `useRef` and `useInView` (once: true, amount: 0.3) to trigger scroll-based entrance animations. Each card uses `cardVariants` (opacity 0→1, y 24→0, spring stiffness 260, damping 24) and `whileHover={{ y: -6 }}` spring lift. Render a `motion.div` accent bar with `initial={{ scaleX: 0.3 }}` and `whileHover={{ scaleX: 1 }}`. Render an icon via `iconVariants` (scale 0→1, rotate -45→0, spring stiffness 400, damping 18, delay 0.1). Map over 5 features array using Lucide icons: `Sparkles`, `ImageIcon`, `ShieldCheck`, `Download`, `Layers`. Apply per-icon CSS class modifiers: `lf-icon-wrap--ai`, `lf-icon-wrap--quality`, `lf-icon-wrap--secure`, `lf-icon-wrap--download`, `lf-icon-wrap--batch`. Wrap all cards in a `motion.div` with `containerVariants` (staggerChildren: 0.12). Render section header with `headerVariants` (opacity/y, duration 0.5, easeOut).

As a frontend developer, implement the `LandingGallery` section for the Landing page. Build the `GalleryCard` component using `useState` for `hovered` state toggled by `onMouseEnter`/`onMouseLeave`. Render 8 gallery items from `galleryItems` array (Executive Portrait, Creative Headshot, Social Profile, LinkedIn Headshot, Editorial Look, Fantasy Transform, Resume Photo, Vibrant Portrait) each with a height variant CSS class (`lg-card--h1` through `lg-card--h4`). Use Unsplash URLs for images with `loading='lazy'`. Apply `overlayVariants` (opacity 0→1, duration 0.25, easeOut/easeIn) via `AnimatePresence` for hover overlay. Use `tagVariants` with custom index delay (i * 0.05) for staggered tag badge entrance. Apply `ctaVariants` (y 16→0, spring stiffness 300, damping 20, delay 0.15) for CTA button within the overlay. Tags array per item controls badge rendering (e.g., 'Professional', 'Corporate').

As a frontend developer, implement the `LandingHowItWorks` section for the Landing page. Build a 4-step process display using the `steps` array (Upload Source Image, Select Target Face, Process Swap, Download Result), each with an inline SVG icon, number badge, title, and description. Use `useRef` and `useInView` at section level to trigger all animations. Apply `cardVariants` with custom index delay (i * 0.15, duration 0.5, cubic ease [0.25, 0.46, 0.45, 0.94]) for staggered card entrance. Build the `ArrowSVG` component rendering a dashed `motion.line` and arrowhead using `arrowVariants` (pathLength 0→1, delay 0.3 + i * 0.15, duration 0.6, easeInOut). Apply `connectorVariants` (scaleY 0→1, opacity→0.3, delay 0.2 + i * 0.15) for vertical mobile connectors between steps. Render step number indicators with primary color accents and SVG icons with `stroke='currentColor'` strokeWidth 2.

As a frontend developer, implement the `LandingPricing` section for the Landing page. Build a 3-tier pricing display (Free, Pro, Enterprise) using the `plans` array. Use `useState` for a monthly/yearly billing toggle that switches between `monthlyPrice` and `yearlyPrice` values. Use `AnimatePresence` to animate price value transitions. The Pro plan has `featured: true` and renders a highlighted card with `ctaStyle: 'primary'` linking to `/Checkout`; Free links to `/Signup`; Enterprise shows a contact CTA. Render each feature in a plan's `features` array with tooltip (`tip`) text on hover. Use inline SVG icons per plan (user, star/polygon, briefcase). Apply `motion` animations for card entrance (opacity/y/scale). Render the `priceSub` string beneath each price. Enterprise plan renders `monthlyPrice: null` as custom pricing text. Implement the billing toggle UI with spring-animated indicator. All feature items include tooltip data attributes from the `tip` field.

As a frontend developer, implement the `LandingTestimonials` section for the Landing page. Build a testimonial carousel using 6 testimonial objects (Sarah Mitchell, James Rodriguez, Aisha Patel, Michael Chen, Elena Vasquez, David Kim) with DiceBear avatar URLs, quote text, role, and 5-star ratings. Use `useState` for active index, `useEffect` for `AUTO_INTERVAL` (5000ms) auto-advance, `useCallback` for navigation handlers, `useRef` for drag state, and `useMotionValue` from `framer-motion` for drag tracking. Show `VISIBLE_DESKTOP = 3` cards simultaneously on desktop. Build `StarRating` component rendering `motion.span` stars with staggered spring entrance (scale 0→1, rotate -30→0, delay 0.1 * i, stiffness 400, damping 15) triggered by `inView` prop. Use `AnimatePresence` for card slide transitions. Render avatar `<img>` tags from DiceBear SVG seeds with backgroundColor variants per testimonial.

As a frontend developer, implement the `LandingCTA` section for the Landing page. Build the `LandingCTA` component using `useScroll` and `useTransform` from `framer-motion` to animate `bgColor` across three scroll keyframes (white → light blue tint → primary blue tint). Use `useState` for `magnetOffset` (x/y), `particles` array, and `burstKey`. Implement a magnetic CTA button via `handleMouseMove` that calculates `dx`/`dy` from button center and clamps to ±16px at 0.2x multiplier, reset on `handleMouseLeave`. On button click (`handleClick`), spawn `PARTICLE_COUNT = 22` particle objects with randomized angles, distances (60-140px), colors from `PARTICLE_COLORS` array ('#FFD700', '#FFA500', '#1A73E8', '#FF6F61', '#FFE066'), and sizes (4-10px) originating from button center — cleared after 1200ms. Render `AnimatePresence` particle burst overlay. Include decorative shapes (`lc-deco-shape--1` through `--4`) in `lc-deco-layer`. Render three trust badge items: 'No credit card required', 'Free tier available', 'Setup in 30 seconds'.

As a frontend developer, implement the `Footer` section for the Landing page. Build the `Footer` component using `motion` from `framer-motion` for entrance animations. Render 4 `footerColumns` (Product, Resources, Company, Legal) each with a title and array of link objects mapping to `<a>` tags. Product links to /FaceSwap, /Gallery, /Landing; Dashboard, Resources, Company, and Legal all link to /Landing placeholders. Render 3 `socialIcons` (Twitter, LinkedIn, GitHub) as `motion.a` elements with SVG path icons, per-icon hex color values, and `whileHover` scale/color transitions. Render the Sultan Power SVG logo (same layered-diamond path as Navbar). Include copyright text and bottom legal link row. Note: this Footer component may already exist from a previous page — reuse if available.

As a Backend Developer, implement the WhatsApp OTP API endpoints using FastAPI. Include: POST /auth/otp/send (send OTP via WhatsApp), POST /auth/otp/verify (verify OTP and return session token), GET /admin/whatsapp/stats (WhatsApp usage statistics for admin). Integrate with a WhatsApp Business API provider. Store OTP records with expiry in the database. Apply rate limiting per phone number. Note: frontend tasks for OTP verification flow and admin dashboard depend on these endpoints.

As an AI Engineer, implement the face-swapping API endpoints using FastAPI. Include: POST /faceswap/upload-source (upload source image), POST /faceswap/upload-target (upload target image), POST /faceswap/process (initiate face-swap job, returns job_id), GET /faceswap/result/{job_id} (poll for result), GET /faceswap/download/{job_id} (download result image). Integrate with a face-swap AI model (e.g., InsightFace/SimSwap). Store images in Supabase storage. Handle async processing with background tasks. Apply credit deduction on successful swap. Note: FaceSwap frontend page depends on these endpoints.

As a Backend Developer, implement the gallery API endpoints using FastAPI. Include: GET /gallery (list gallery templates/images with pagination and filters), GET /gallery/{id} (get single gallery item), POST /admin/gallery (admin upload new template), DELETE /admin/gallery/{id} (admin delete template). Integrate with Supabase storage for image hosting. Return image URLs, metadata, and tags. Note: Gallery frontend page depends on these endpoints.

As a Backend Developer, implement the Stripe payment API endpoints using FastAPI. Include: POST /payments/checkout (create Stripe checkout session, returns checkout URL), POST /payments/webhook (handle Stripe webhook events for payment confirmation, subscription updates, refunds). Integrate with Stripe SDK. Validate webhook signatures. Update user credit balance on successful payment. Store transaction records in the database. Note: Checkout frontend page depends on these endpoints.

As a Backend Developer, implement admin user management API endpoints using FastAPI. Include: GET /admin/users (list all users with pagination), GET /admin/users/{id} (get user details), PATCH /admin/users/{id}/permissions (update user permissions/roles), DELETE /admin/users/{id} (deactivate user account), GET /admin/dashboard (overview stats: total users, swaps, revenue). Apply admin role guard middleware to all admin routes. Note: Admin Dashboard and Users frontend pages depend on these endpoints.

As a Backend Developer, implement shared authentication and authorization middleware for the FastAPI application. Include: JWT token validation middleware (verify signature, expiry, user existence), role-based access control (RBAC) decorators for admin and developer routes, CORS configuration for frontend domain, rate limiting middleware (per IP and per user), request logging middleware, and a global exception handler returning standardized error responses. This middleware is a prerequisite for all protected API endpoints.

As a frontend developer, implement the `LandingHero` section using `@react-three/fiber` Canvas with a `HeroScene` containing four `MorphingSphere` components. Each `MorphingSphere` uses `useFrame` to animate rotation and per-vertex noise morphing on a `sphereGeometry args={[1, 32, 32]}` with wireframe `meshStandardMaterial`. Use `useScroll` and `useTransform` from Framer Motion to apply parallax `bgY` (0 to -120px), `decoY` (0 to -80px), and `bgScale` (1 to 1.08) on scroll. Implement magnetic button hover effect via `primaryOffset` state and `useState({ x: 0, y: 0 })` tracking mouse position relative to the CTA button center. Include a 2D HTML canvas particle system via `canvasRef` with `showParticles` state toggled on interaction. Mount the `HeroScene` inside a `<Canvas>` with `ambientLight` and two `pointLight` sources. Import and apply styles from `LandingHero.css`.

As a frontend developer, implement the `LandingImageCarousel` section using `@react-three/fiber` Canvas with a 3D rotating carousel of six `ImageCard` components. Each `ImageCard` is positioned on a circle of radius 3.8 using trigonometry (`angle = (index / totalCards) * Math.PI * 2`) and uses `useFrame` to update `meshRef.current.position` and `rotation.y` based on a shared `rotationRef`. Implement hover scale/lift via `hoveredRef` with `THREE.MathUtils.lerp` for smooth transitions on `scale` and `position.y`. Use `RoundedBox` and `Text` from `@react-three/drei` for card geometry and labels. Build `THREE.Color` instances via `useMemo` for `cardColor`, `gradientColor`, `whiteColor`, `primaryBlue`, and `borderDefault`. Manage `rotationRef` for continuous auto-rotation and `hoveredRef` for hover tracking as refs to avoid re-renders. Include an overlay HTML panel with `AnimatePresence` showing image metadata (title, meta, format, size, description) keyed to the active card. Import from `LandingImageCarousel.css` for layout styles.

As a frontend developer, implement the `LandingFeatures` section rendering five `FeatureCard` components from the `features` array, each with a Lucide icon (`Sparkles`, `ImageIcon`, `ShieldCheck`, `Download`, `Layers`). Use `useInView` with `once: true, amount: 0.3` to trigger per-card animations. Animate cards using `cardVariants` (`opacity: 0 → 1, y: 24 → 0`) via Framer Motion spring (`stiffness: 260, damping: 24`). Apply stagger via `containerVariants` (`staggerChildren: 0.12`). Animate the icon using `iconVariants` (`scale: 0 → 1, rotate: -45 → 0`) with spring. On hover apply `whileHover={{ y: -6 }}` spring lift. Add the `.lf-accent-bar` with `scaleX: 0.3 → 1` on hover and `.lf-accent-side-glow` via `motion.div`. Use the `lf-card`, `lf-icon-wrap`, `lf-icon-wrap--ai`, `lf-icon-wrap--quality`, etc. CSS classes from `LandingFeatures.css`. The header section uses `headerVariants` fade-up animation with `duration: 0.5`.

As a frontend developer, implement the `LandingGallery` section rendering eight `GalleryCard` components from `galleryItems`, each with Unsplash image URLs and variable height classes (`lg-card--h1` through `lg-card--h4`). Each `GalleryCard` manages local `hovered` state via `useState` and `onMouseEnter`/`onMouseLeave`. On hover, show an overlay using `AnimatePresence` with `overlayVariants` (opacity fade). Stagger-animate tag pills using `tagVariants` with custom index delays (`delay: i * 0.05`). Animate the CTA button inside the overlay using `ctaVariants` with spring (`stiffness: 300, damping: 20, delay: 0.15`). Display `item.tags` as pill badges and `item.title` as card title. Use a masonry-style CSS grid layout via `lg-grid` and `lg-card-img-wrapper` classes from `LandingGallery.css`. Images use `loading='lazy'` for performance.

As a frontend developer, implement the `LandingHowItWorks` section rendering four step cards from the `steps` array (Upload Source Image, Select Target Face, Process Swap, Download Result). Each step card uses `useInView` with a `ref` and animates via `cardVariants` (`opacity: 0 → 1, y: 30 → 0`) with per-index custom delay (`delay: i * 0.15`). Render inline SVG icons per step inside a styled icon wrapper. Between steps render `ArrowSVG` components that animate a dashed `motion.line` using `arrowVariants` (`pathLength: 0 → 1`) and an arrowhead `motion.polygon`, both driven by `whileInView`. Add `connectorVariants` for vertical mobile connectors (`scaleY: 0 → 1, opacity: 0 → 0.3`). Use `useInView` at the section level with `once: true` to gate all animations. Apply layout from `LandingHowItWorks.css` with `hiw-arrow-svg`, `hiw-step`, and connector class names.

As a frontend developer, implement the `LandingPricing` section rendering three plan cards (Free, Pro, Enterprise) from the `plans` array. Implement a monthly/yearly billing toggle using `useState` that switches displayed price between `monthlyPrice` and `yearlyPrice` with `AnimatePresence` key-based swap animation. The Pro plan uses `featured: true` to apply a highlighted card style. Each feature row includes a tooltip via `useState`-driven hover state showing the `tip` text. Render inline SVG icons per plan. The Enterprise plan shows a 'Contact Sales' CTA instead of a price. CTA buttons link to `/Signup` and `/Checkout`. Use `motion.div` for card entrance animations keyed to billing toggle changes. Apply tooltip visibility, pricing badge, and featured card styles from `LandingPricing.css`.

As a frontend developer, implement the `LandingTestimonials` section with an auto-advancing carousel of six testimonials. Use `useState` for `currentIndex` and `useEffect` with `setInterval` at `AUTO_INTERVAL` (5000ms) for auto-play, cleared on manual navigation. Show `VISIBLE_DESKTOP` (3) cards on desktop, sliding via `AnimatePresence` with directional `x` transforms. Implement drag-to-swipe using `useMotionValue` and pointer events (`onPointerDown`/`onPointerUp`) to detect swipe direction via a `dragRef`. Render `StarRating` sub-component with staggered star animations (`motion.span` with `scale: 0 → 1, rotate: -30 → 0`, `delay: 0.1 * i`, spring). Display `avatar` from DiceBear API URLs, `name`, `role`, and `quote` per testimonial. Include prev/next navigation buttons and dot indicators for current index. Apply `lt-stars`, `lt-star`, card and carousel layout classes from `LandingTestimonials.css`.

As a frontend developer, implement the `LandingCTA` section as a `motion.section` with `useScroll` and `useTransform` animating background color from `rgba(255,255,255,0.95)` → `rgba(232,240,254,0.5)` → `rgba(26,115,232,0.04)` via `scrollYProgress`. Implement magnetic CTA button effect using `btnRef` and `useState({ x: 0, y: 0 })` for `magnetOffset`, clamped to ±16px via `handleMouseMove`. On button click (`handleClick`), burst `PARTICLE_COUNT` (22) `motion.div` particles outward using polar coordinates with random angles and distances (60–140px), colored from `PARTICLE_COLORS` (`#FFD700`, `#FFA500`, `#1A73E8`, `#FF6F61`, `#FFE066`), keyed by `burstKey` and cleared after 1200ms via `setTimeout`. Render three trust badges (`trustItems`: 'No credit card required', 'Free tier available', 'Setup in 30 seconds'). Include four `lc-deco-shape` decorative elements in a `lc-deco-layer` div. Apply styles from `LandingCTA.css`.

As a frontend developer, implement the `Footer` section rendering four link columns (`footerColumns`: Product, Resources, Company, Legal) each with four links. Use `motion.div` for column entrance animations (fade-up stagger). Render three social icon buttons (`socialIcons`: Twitter, LinkedIn, GitHub) as SVG path icons with brand colors (`#1DA1F2`, `#0A66C2`, `#333333`) and hover color fill transitions via Framer Motion `whileHover`. Include the Sultan Power logo with the same layered SVG as the Navbar. Display copyright text and a bottom bar with policy links. Product column links to `/FaceSwap`, `/Dashboard`, `#gallery`, `#pricing`. Resources link to `#how-it-works` and `#features`. Apply `ft-columns`, `ft-col-title`, `ft-link`, `ft-social`, and `ft-bottom` classes from `Footer.css`. Note: this component may already exist from a previous page — check before creating.

As a frontend developer, implement the LoginHero section for the Login page. This section renders a full-screen hero (`lh-root`) with mouse-tracking parallax animations using `useState({ x: 0.5, y: 0.5 })` and `useCallback` for `handleMouseMove`/`handleMouseLeave` handlers. Five decorative shapes (`lh-deco-shape--1` through `--5`) receive inline `transform: translate()` styles via `parallaxStyle(depth)` at varying depths (12–20px) for layered parallax effect. Content includes an eyebrow badge with `lh-eyebrow-dot` pulse indicator and 'Sultan Power' label, an `<h1>` with `lh-headline-accent` span on 'Back', a subheadline paragraph describing account access, and a row of three `featurePills` (Secure Authentication/shield, WhatsApp OTP Login/message, Encrypted Sessions/lock) each rendered with inline SVG icons (`ShieldIcon`, `MessageIcon`, `LockIcon` components). An `lh-accent-line` decorative element is also included. Note: Navbar component likely already exists from the Landing page.

As a frontend developer, implement the LoginForm section for the Login page. This section renders a centered login card (`lf-card`) with a decorative background layer (`lf-deco-bg`). State hooks manage: `email`, `password`, `showPassword` (toggle visibility), `rememberMe` (checkbox), `loading` (submit spinner with 1800ms setTimeout simulation), `emailError`, and `passwordError`. Inline validation functions `validateEmail` (regex `/^[^\s@]+@[^\s@]+\.[^\s@]+$/`, required check) and `validatePassword` (required, min 6 chars) are called on blur and on change when errors exist. The form (`noValidate`) contains: an email input (`lf-input--with-icon`, `lf-input--error` class on error) with inline SVG envelope icon; a password input with show/hide toggle button using an eye SVG; a remember-me checkbox and forgot password link row; a submit button that shows a loading spinner state. Error messages render conditionally below each field. The card header displays 'Welcome back' title and 'Sign in to your Sultan Power account' subtitle.

As a frontend developer, implement the LoginFooterCTA section for the Login page. This section renders a `lfcta-root` container with a divider (two `lfcta-divider-line` spans flanking an 'or continue with' label) followed by a row of three social OAuth provider buttons defined in the `socialProviders` array: Google (multi-path SVG with four `<path>` elements for the Google logo in brand colors), GitHub (single-path SVG of the Octocat logo), and WhatsApp (single-path SVG with the WhatsApp logo). Each button uses a `cssClass` property (`google`, `github`, `whatsapp`) for per-brand color styling. Below the social buttons, a sign-up CTA link renders encouraging users without an account to register, plus a terms/privacy disclaimer line.

As a frontend developer, implement the Navbar section for the Gallery page. This component may already exist from the Landing page (task 1369a690-7fdd-463d-9879-445ab59221aa) and ForgotPassword page — reuse if available. The Navbar uses useState for activeLink, isScrolled, and mobileOpen states. It uses useEffect to attach a passive scroll listener that toggles the 'nb-scrolled' class when window.scrollY > 20, and a second useEffect to lock body scroll when the mobile drawer is open. Framer Motion is used for the mobile drawer with drawerVariants (hidden/visible/exit with opacity and y transforms) and linkStagger custom variants with staggered delays per link index. The nav includes a logo (SVG icon + 'Sultan Power' text linking to /Landing), desktop nav links with a shared layoutId='nb-active-underline' spring-animated underline indicator on hover, and CTA buttons ('Sign In' linking to /Login, 'Get Started' linking to /Signup with whileHover scale 1.04 and whileTap scale 0.97). The navLinks array references /Landing#features, /Gallery, and /Landing#pricing.

As a Frontend Developer, implement all sections for the Signup page including: SignupHero (page header with decorative elements), SignupForm (email + password registration form accepting any valid email format with any password, using useState for form fields, validation, loading, and success states, submitting to POST /auth/signup), SignupFooterCTA (social sign-up options and login redirect link), Navbar (reuse from Landing), and Footer (reuse from Landing). On successful registration, redirect to OTP verification or Dashboard. Note: depends on Auth API (task 970cf8ac-2d96-43ed-90b1-a65e84441218) and Global State Management (task 9a98baf5-e6f9-48ac-907a-e5a4e024f87b).

As a Frontend Developer, implement all sections for the FaceSwap page including: FaceSwapHero (page header), FaceSwapUploader (source image upload panel using POST /faceswap/upload-source), FaceSwapTarget (target image upload panel using POST /faceswap/upload-target), FaceSwapProcessor (initiate swap button calling POST /faceswap/process, show job_id and polling spinner), FaceSwapResult (display result image from GET /faceswap/result/{job_id} with polling interval, credit deduction notification), FaceSwapDownload (download button using GET /faceswap/download/{job_id}), FaceSwapHistory (list past swap jobs from user history), Navbar (reuse), Footer (reuse). Implement usePolling hook for job status. Handle error states: no face detected, processing failure, insufficient credits. Note: depends on FaceSwap AI API (task 16012eca-de51-4d2e-b444-36b794d6f281) and Global State (task 9a98baf5-e6f9-48ac-907a-e5a4e024f87b).

As a Frontend Developer, implement all sections for the Dashboard page including: DashboardNavbar (authenticated nav with user avatar and credits badge), DashboardOverview (stats cards: total swaps, credits remaining, subscription status), DashboardSwapHistory (paginated list of FaceSwapJob records with thumbnails, status, and date), DashboardSubscription (current plan details, upgrade CTA linking to /Checkout), DashboardWhatsAppStats (WhatsApp OTP usage statistics for admin role), DashboardRevenueCard (revenue summary for admin role), DashboardSystemStatus (API health monitoring for developer role), DashboardMigrations (migration controls for developer role). Use role-based conditional rendering to show admin/developer sections. Fetch data from GET /admin/dashboard and user profile endpoints. Note: depends on Admin Users API (task 0a119c70-0ea0-4047-a360-9a6c77e77e24) and Global State (task 9a98baf5-e6f9-48ac-907a-e5a4e024f87b).

As a Frontend Developer, implement all sections for the Checkout page including: CheckoutHero (page header), CheckoutPlanSelector (display available credit plans/tiers with pricing), CheckoutSummary (order summary card), CheckoutPaymentForm (Stripe checkout redirect button calling POST /payments/checkout, show loading state, redirect to Stripe-hosted page), CheckoutSuccess (success confirmation page after Stripe redirect with updated credits display), CheckoutCancel (cancellation handling page), Navbar (reuse), Footer (reuse). Use query params to detect success/cancel callbacks from Stripe. Note: payment is placeholder/mock during development — Stripe keys are not active. Depends on Stripe Payments API (task 5e1fa07a-c00b-40b2-bb6a-e07474db3189) and Global State (task 9a98baf5-e6f9-48ac-907a-e5a4e024f87b).

As a Frontend Developer, implement all sections for the Settings page including: SettingsNavbar (authenticated nav), SettingsProfile (edit display name, email, phone number, save changes via PATCH /users/profile), SettingsSubscription (current plan info, upgrade/downgrade links), SettingsSupabase (developer-only Supabase configuration panel), SettingsStripe (developer-only Stripe key configuration, shown as placeholder/disabled during development), SettingsWhatsApp (developer-only WhatsApp API configuration, shown as placeholder/disabled), SettingsNotifications (notification preferences), SettingsSecurity (change password form, active sessions list). Apply role-based rendering for developer-only sections. Note: depends on User Profile API and Auth Middleware (tasks 97c51514 and 9a98baf5).

As a Frontend Developer, implement all sections for the Users admin page including: UsersNavbar (authenticated admin nav), UsersTable (paginated data table of all users fetched from GET /admin/users with columns: id, email, phone, role, credits, created_at, status), UsersSearch (search/filter bar by email or phone), UsersDetailModal (user detail drawer/modal from GET /admin/users/{id}), UsersPermissionsForm (role and permissions editor calling PATCH /admin/users/{id}/permissions), UsersDeactivateButton (deactivate account button calling DELETE /admin/users/{id} with confirmation dialog). Apply admin role guard — redirect non-admin users to Dashboard. Note: depends on Admin Users API (task 0a119c70-0ea0-4047-a360-9a6c77e77e24) and Global State (task 9a98baf5-e6f9-48ac-907a-e5a4e024f87b).

As a Data Engineer, configure Supabase Storage buckets and Row Level Security (RLS) policies for the Sultan Power application. Create buckets: 'source-images' (user-private, authenticated upload), 'target-images' (user-private, authenticated upload), 'result-images' (user-read, service-write), 'gallery-templates' (public-read, admin-write). Define RLS policies ensuring users can only access their own image files. Set CORS policies for the frontend domain. Configure bucket size limits and allowed MIME types (image/jpeg, image/png, image/webp). Document bucket URLs for use in FaceSwap AI API and Gallery API. This is a prerequisite for image upload/retrieval in FaceSwap and Gallery features.

As a Tech Lead, verify the end-to-end integration between the authentication frontend pages (Login, Signup, ForgotPassword, OTP Verification) and the backend Auth API. Ensure JWT tokens are stored and injected correctly, OTP WhatsApp flow completes successfully, password reset emails/messages are delivered, and protected routes redirect unauthenticated users. Validate error states (wrong credentials, expired OTP) are surfaced in the UI correctly.

As a Tech Lead, verify the end-to-end integration between the FaceSwap frontend page and the FaceSwap AI backend API. Ensure source and target image uploads succeed, job polling works correctly, the result image is rendered in the UI, the download flow works, and credit deduction is reflected in the user's balance. Validate error states (no face detected, processing failure) are handled gracefully in the UI.

As a Tech Lead, verify the end-to-end integration between the Gallery frontend page and the Gallery backend API. Ensure gallery items load with correct image URLs and metadata, pagination works, admin upload and delete operations function correctly, and images serve from Supabase storage with appropriate caching headers.

As a Tech Lead, verify the end-to-end integration between the Checkout frontend page and the Stripe Payments backend API. Ensure the checkout session is created correctly, the user is redirected to Stripe, webhook events update the user's credit balance, and success/failure states are reflected in the UI. Test with Stripe test mode keys before production.

As a Tech Lead, verify the end-to-end integration between the LandingPricing frontend section and the backend. Ensure the Checkout CTA on the Pro plan correctly initiates a Stripe checkout session, the Signup CTA routes authenticated users to the dashboard and unauthenticated users to Signup, and plan feature data can be driven from the backend if configurable. Validate that credit plan metadata matches the Stripe products configured.

As a frontend developer, implement the Navbar section for the ForgotPassword page. This component is shared with Landing and Login pages and may already exist — verify before reimplementing. The Navbar uses useState for activeLink (index-based hover tracking), isScrolled (scroll-triggered class toggling via window.addEventListener with passive:true), and mobileOpen (drawer toggle with body overflow lock via useEffect). Includes framer-motion AnimatePresence for mobile drawer with drawerVariants (hidden/visible/exit with y:-20 transitions) and linkStagger custom variants with staggered delays (i*0.08). Desktop nav renders navLinks array (Features→/Landing#features, Gallery→/Gallery, Pricing→/Landing#pricing) with motion.div layoutId='nb-active-underline' spring animation (stiffness:380, damping:30). CTAs include nb-btn-signin (href=/Login) and motion.a nb-btn-getstarted (href=/Signup, whileHover scale:1.04, whileTap scale:0.97). Apply nb-scrolled class conditionally on isScrolled state.

As a frontend developer, implement the GalleryHeader section for the Gallery page. The component uses useState for searchQuery and isFocused states, and a useRef on the input element for programmatic focus. A useCallback-wrapped handleClear resets searchQuery and refocuses the input via inputRef.current.focus(). The section renders decorative floating blobs (gh-deco-blob--1/2/3) inside a gh-deco-layer div, a badge with a gh-badge-dot span and 'Template Gallery' label, an h1 with a gh-headline-accent span for 'Face Swap' text, a subheadline paragraph, and a search bar (gh-search-wrapper) containing an SVG magnifier icon, a controlled text input with aria-label, onFocus/onBlur handlers toggling isFocused, and an AnimatePresence-wrapped clear button that animates with initial opacity 0 / scale 0.5 and exit to opacity 0 / scale 0.5 (duration 0.15) — only rendered when searchQuery.length > 0. A template count hint is also rendered below the search bar.

As a frontend developer, implement the GalleryCategoryNav section for the Gallery page. The component uses useState for activeCategory (defaulting to 'all'). The categories array contains 6 entries: All Templates (86), Popular (24), New (12), Professional (18), Creative (15), and Trending (17). The section renders two views: a desktop tab bar (gcn-tab-bar) using role='tablist' with aria-label, where each button has role='tab', aria-selected, gcn-tab class toggling gcn-tab--active on click, and a gcn-tab-count span showing the count; and a mobile dropdown (gcn-mobile-select) with a gcn-select-wrapper containing a controlled native select element with aria-label and a custom SVG chevron arrow overlay (gcn-select-arrow). Both desktop and mobile views stay in sync via the shared activeCategory state.

As a frontend developer, implement the GalleryGrid section for the Gallery page. The component renders a static templates array of 12 objects, each with id, name, category, description, and usageCount fields. Template entries include: Celebrity Morph (12.4k uses), Vintage Portrait (8.7k uses), Pet Face Swap (15.2k uses), Professional Headshot (6.1k uses), Fantasy Character (9.3k uses), Historical Figure (4.8k uses), Movie Poster (11.0k uses), Anime Style (13.5k uses), Group Photo Swap (3.2k uses), Sports Highlight (7.6k uses), Baby Face (18.9k uses), and Wedding Glam (5.4k uses). Each card is wrapped in a Framer Motion motion component for entry animations. An EmptyIcon SVG component is defined for the empty-state rendering when no templates match. Cards display the template name, category badge, description, and usageCount. The grid uses GalleryGrid.css for masonry/grid layout styling.

As a frontend developer, implement the GalleryCTA section for the Gallery page. The component uses useState for cursorPos ({x: -999, y: -999}) and isHovering (false), and a useRef (sectionRef) on the section element. Three useCallback-wrapped pointer event handlers are attached via useEffect addEventListener calls (passive pointermove, pointerenter, pointerleave) — the pointermove handler computes cursor position relative to the section's getBoundingClientRect and updates cursorPos. A gcta-glow-orb div is positioned absolutely using the cursor x/y values with opacity toggled by isHovering. The content area uses Framer Motion with whileInView animations: a gcta-accent-line with scaleX 0→1 (duration 0.5, once viewport), an h2 gcta-headline with opacity/y fade-in (delay 0.1), a p gcta-subheadline (delay 0.2), and a gcta-buttons container (delay 0.3). A trustAvatars array ['JD','MK','SR','AL'] is defined for social proof avatar initials rendering.

As a frontend developer, implement the Footer section for the Gallery page. This component may already exist from the Landing page (task 6f81d8d1-47e2-402d-a89e-c0705ac1dcf2) and ForgotPassword page (task da07f4b8-ca53-48ca-83b0-a467060fd6b2) — reuse if available. The Footer uses a footerColumns array of 4 columns: Product (Face Swap, Gallery, Pricing, Dashboard), Resources (Getting Started, API Documentation, Tutorials, FAQs), Company (About Us, Careers, Blog, Contact), and Legal (Privacy Policy, Terms of Service, Cookie Policy, DMCA). A socialIcons array defines Twitter (#1DA1F2), LinkedIn (#0A66C2), and GitHub (#333333) with SVG path data for each. Framer Motion is used for animated column and link entries. The Footer links to /FaceSwap, /Gallery, /Landing, and /Dashboard routes.

As a Backend Developer, implement user profile management API endpoints using FastAPI. Include: GET /users/me (get current authenticated user profile: id, email, phone, role, credits, created_at), PATCH /users/profile (update display name, email, phone number with Pydantic validation), GET /users/history (paginated face swap job history for current user), GET /users/transactions (paginated transaction history for current user). Apply JWT auth middleware to all endpoints. Return 401 for unauthenticated requests. Note: Dashboard, Settings, and FaceSwap frontend pages depend on these endpoints.

As a Tech Lead, verify the end-to-end integration between the Signup frontend page and the backend Auth API. Ensure any valid email format with any password is accepted, the user record is persisted in Supabase, JWT token is returned and stored in global state, and the user is redirected to the correct post-registration page. Validate duplicate email handling and form error surfacing.

As a Tech Lead, verify the end-to-end integration between the FaceSwap frontend page and the FaceSwap AI backend API. Ensure source and target image uploads succeed to Supabase storage, job polling works correctly, the result image is rendered in the UI, the download flow works, and credit deduction is reflected in the user's balance. Validate error states (no face detected, processing failure, insufficient credits) are handled gracefully in the UI.

As a Tech Lead, verify the end-to-end integration between the Users admin frontend page and the Admin Users backend API. Ensure the user table populates with correct data, pagination works, search/filter functions correctly, permission updates persist, and account deactivation removes access. Confirm non-admin users are redirected and cannot access these endpoints.

As an AI Engineer, implement a dedicated client module for communicating with the face-swap engine hosted on Hugging Face Spaces (NEXT_PUBLIC_FACE_ENGINE_URL). Include: async HTTP client wrapper using httpx with HF_TOKEN Bearer auth header injection, POST /run/predict endpoint call with base64-encoded source and target images, response parsing to extract result image URL or base64 output, retry logic with exponential backoff for transient failures, timeout configuration (60s for swap processing), and error classification (model unavailable, no face detected, quota exceeded). This client is used by the FaceSwap AI API (task 16012eca). Depends on DB Models (task 2f619e00) for job record updates.

As a Backend Developer, implement credit balance management API endpoints using FastAPI. Include: GET /users/me/credits (get current credit balance), POST /admin/credits/grant (admin grant credits to user, body: user_id, amount, reason), POST /credits/deduct (internal service endpoint to deduct credits on face swap — called by FaceSwap processing, not directly by frontend), GET /users/me/transactions (list credit transaction history with pagination). Apply JWT auth and admin RBAC as appropriate. Update User.credits field atomically to prevent race conditions. During development, credits deduction is simulated (placeholder). Note: Dashboard and FaceSwap frontend pages depend on credit balance display.

As a frontend developer, implement the ForgotPasswordHero section for the ForgotPassword page. This is a simple static section with className fph-root containing fph-inner div. Renders an h1 with className fph-headline ('Reset Your Password'), a paragraph fph-subheadline describing the reset link flow, and a decorative fph-accent-bar div. No state or interactivity — purely presentational with CSS-driven layout from ForgotPasswordHero.css (1654 chars of styles).

As a frontend developer, implement the ForgotPasswordForm section for the ForgotPassword page. Uses four useState hooks: email (string), error (string), isLoading (boolean), isSuccess (boolean). Includes validateEmail regex (/^[^\s@]+@[^\s@]+\.[^\s@]+$/) and async handleSubmit that validates input, simulates API call via setTimeout(1500ms), and toggles isSuccess on resolution. Three framer-motion variant sets: cardVariants (y:20→0 on mount), successVariants (opacity+y+scale with mode='wait'), errorVariants (opacity+x+height:0→auto for inline error messages). AnimatePresence wraps success/form states with key-based switching. Card contains fof-card-accent bar, fof-icon-circle with SVG lock icon (rect+path), fof-heading, fof-subheading, and conditional success view (checkmark SVG + confirmation text) vs form view (email input with fof-input-wrap, error display via AnimatePresence with errorVariants, submit button with isLoading spinner state). Styles from ForgotPasswordForm.css (6775 chars).

As a frontend developer, implement the ForgotPasswordHelp section for the ForgotPassword page. Static two-column layout with className foh-root containing foh-inner. Left column (foh-column) has foh-column-header with foh-column-icon foh-column-icon--mail wrapping lucide-react Mail icon (size=16), foh-column-title text, foh-column-desc paragraph, and foh-action-link anchor (href=/ForgotPassword, 'Resend reset email') with foh-action-link-arrow span (→). A foh-divider separates the two columns. Right column mirrors structure with LockOpen lucide-react icon (size=16), foh-column-icon--lock variant, and foh-action-link pointing to /Login ('Back to Sign In'). No state or animations — pure static layout from ForgotPasswordHelp.css (2887 chars). Requires lucide-react dependency (Mail, LockOpen imports).

As a frontend developer, implement the Footer section for the ForgotPassword page. This component is shared with Landing and Login pages and may already exist (see task 6f81d8d1-47e2-402d-a89e-c0705ac1dcf2) — verify before reimplementing. Renders four footerColumns (Product, Resources, Company, Legal) each with title and links array. Social icons array (Twitter #1DA1F2, LinkedIn #0A66C2, GitHub #333333) rendered as SVG path icons with colored hover states. Uses framer-motion motion components for hover animations. Footer layout includes logo/brand section, column link grid, social icons row, and copyright line. Styles from Footer.css (3602 chars).

As a frontend developer, implement the GalleryLoadMore section for the Gallery page. The component defines TOTAL_TEMPLATES=48 and BATCH_SIZE=12 constants. It uses useState for loaded (initial 12) and loading (false) states. The useCallback-wrapped handleLoadMore checks hasMore (loaded < TOTAL_TEMPLATES) and loading guards before setting loading=true, then uses a setTimeout of 800ms to increment loaded by BATCH_SIZE (capped at TOTAL_TEMPLATES) and reset loading=false. The section renders a glm-pagination-info paragraph showing '1–{loaded} of {TOTAL_TEMPLATES} templates' or 'all {TOTAL_TEMPLATES} templates' when exhausted. When hasMore is true, a glm-load-button renders with disabled state during loading — showing a glm-spinner span with 'Loading' text, or an SVG chevron icon with 'Load More Templates'. When hasMore is false, a glm-end-message with a glm-end-divider and completion text is shown instead.

As a Tech Lead, verify the end-to-end integration between the Dashboard frontend and the backend APIs (Admin Users API and User Profile API). Ensure overview stats load correctly for regular users, admin-only sections (WhatsApp stats, revenue summary) are visible only to admin role, developer-only sections (system status, migrations) are visible only to developer role, and role-based access is enforced at both frontend and backend layers.

As a Tech Lead, verify the end-to-end integration between the Settings frontend page and the User Profile API. Ensure profile updates persist to Supabase, password change flow works, developer-only service configuration sections (Supabase, Stripe placeholder, WhatsApp placeholder) are visible only to developer role, and notification preferences are saved. Validate 401 handling and redirect to Login on session expiry.