Sultan of L

As a frontend developer, implement the `LandingHero` section for the Landing page using Framer Motion and a custom Canvas particle field. Build the `ParticleField` sub-component using `useRef` for `canvasRef`, `particlesRef`, `rafRef`, and `dimRef`. In `initParticles`, compute particle count as `Math.min(Math.floor((w * h) / 4000), 180)` and assign each particle random `x`, `y`, `baseY`, `r` (0.4–2.2), `speed`, `opacity`, and `hue` (185 cyan or 280 purple, 70/30 split). In the draw loop via `requestAnimationFrame`, apply parallax drift using `Math.sin` and scroll-based Y offset `p.baseY - scrollVal * h * 0.3 * p.speed * 3`, wrapping particles with edge fade and alpha decay tied to scroll progress. Use `ResizeObserver` for canvas DPR-aware resizing. In `LandingHero`, use `useScroll` with `target: heroRef` and `offset: ['start start', 'end start']`, then smooth with `useSpring` (stiffness 80). Pass `smoothProgress` to `ParticleField`. Integrate Framer Motion scroll transforms for hero text and CTA parallax. Import and apply `LandingHero.css`.

As a frontend developer, implement the `GalaxyMap` section for the Landing page using React Three Fiber and Framer Motion. Define the `FEATURES` array of 5 nodes (upload, library, preview, download, admin) each with `id`, `label`, `icon`, `iconClass`, `color`, `desc`, `href`, and `position: [x, y, z]` coordinates. Define `CONNECTION_PAIRS` as 7 index pairs forming a pentagon plus two crossing edges. Build the `StarNode` Three.js component using `useRef` for `meshRef` and `glowRef`, and `useMemo` for `THREE.Color`. In `useFrame`, lerp `emissiveIntensity` toward `targetIntensity` (1.8 when hovered/active, 0.4 default) and lerp scale toward `targetScale` (1.4 hovered, 1.6 active, 1.0 default) using `delta * 5/6`. Wire `onClickStar`, `onHoverStar`, `onUnhoverStar` pointer events. Use `@react-three/drei`'s `OrbitControls` and `Line` to render `CONNECTION_PAIRS` edges. Render a `<Canvas>` with the star nodes and connection lines. On the overlay, use Framer Motion `AnimatePresence` to show a card panel with the active feature's `desc` and a link to its `href`. Import and apply `GalaxyMap.css`.

As a frontend developer, implement the `FeatureCards` section for the Landing page with interactive demo cards and simulated AI processing. Define `QUALITY_LEVELS` (low/medium/high/ultra with Arabic labels), `TEMPLATES` (7 items: formal, casual, sport, military, traditional, doctor, royal with Arabic names and emoji icons), `BACKGROUNDS` (6 items: city, studio, nature, blur, beach, space), and `PROGRESS_STAGES` (5 stages at 25/50/75/92/100% with Arabic processing messages referencing Sultan Docker, InsightFace, and GFPGAN). Build the `ImageCard` memo component with `isDragOver` state, `useRef` for file input, `handleDragOver`/`handleDragLeave`/`handleDrop` callbacks (reading `e.dataTransfer.files[0]`), and a hidden file input for browse-to-upload. Implement quality selector buttons, template grid, background grid, and progress bar using Framer Motion `AnimatePresence` for stage transitions. The process button triggers staged progress simulation cycling through `PROGRESS_STAGES`. Import and apply `FeatureCards.css`.

As a frontend developer, implement the `HowItWorks` section for the Landing page using Framer Motion scroll-triggered animations. Define the `STEPS` array of 5 steps (Upload, Select Face, Real-Time Preview, Adjust Settings, Download) each with `num`, `title`, `desc`, `Icon` (from lucide-react: Upload, Users, Eye, SlidersHorizontal, Download), and `side` ('left'|'right') for alternating layout. Use `useRef` for `sectionRef` and `useInView` to trigger animations when the section enters the viewport. Apply `containerVariants` with `staggerChildren: 0.18`. For each step, animate entry from `x: -80` (left) or `x: 80` (right) with `opacity: 0` to final position using duration 0.6 and custom cubic bezier `[0.25, 0.46, 0.45, 0.94]`. Animate icon with `rotate: -180` to `0` and `scale: 0.5` to `1` over 0.7s. Animate step number badge with spring (`stiffness: 260, damping: 20`). Animate connecting SVG line with `pathLength` from 0 to 1. Animate description text with `y: 12` entrance and `delay: 0.3`. Import and apply `HowItWorks.css`.

As a frontend developer, implement the `Capabilities` section for the Landing page with an interactive accordion-style capability showcase. Define `CAPABILITIES` array of 5 items (faceswap, preview, quality, batch, privacy) each with `id`, `title`, `description`, `accent` CSS class, `simplePath` (circle placeholder), and `complexPath` (detailed SVG path for the icon). Use `useState` to track `activeId` and `useState`/`useRef` for a hover interaction. Use `useInView` from Framer Motion for scroll-triggered reveal. Use `AnimatePresence` to animate the expanded description panel when an item is selected. Each capability item renders an SVG icon that morphs between `simplePath` and `complexPath` using Framer Motion `animate` on the `d` attribute when active. Accent classes `cp-icon-cyan`, `cp-icon-pink`, `cp-icon-purple`, `cp-icon-gold` drive color theming. Import and apply `Capabilities.css`.

As a frontend developer, implement the `TechStack` section for the Landing page with an interactive draggable tech card carousel. Define `TECH_STACK` array covering Next.js 16, React 19, Docker, InsightFace, and additional entries — each with `name`, `role`, `category` (Frontend/Backend/AI), `badgeClass` (ts-badge--frontend/backend/ai), `iconColor` (ts-icon-wrap--cyan/purple/pink), and inline SVG `icon` (custom SVGs with strokes for Next.js logo, React atom orbits, Docker container boxes, InsightFace landmarks). Use Framer Motion `useMotionValue` and `useAnimation` to implement horizontal drag-to-scroll carousel behavior. Use `AnimatePresence` for card hover detail expansion. Track a `hoveredId` state to show the tech's `role` description on hover. Apply category badge styling. Use `useRef` and `useEffect` for drag constraint calculation. Import and apply `TechStack.css`.

As a frontend developer, implement the `Testimonials` section for the Landing page with a drag-based carousel and auto-advance. Define 3 testimonials (Layla Mansour, Tobias Richter, Amira Khalil) each with `name`, `role`, `initials`, `stars: 5`, and a `quote` referencing GFPGAN, InsightFace, and real-time preview. Build `StarIcon` SVG component rendering filled/unfilled stars. Build `QuoteIcon` SVG component with open-quote path. Build `TestimonialCard` memo with `cardVariants` (`opacity: 0, scale: 0.9, y: 30` → visible) using `whileInView` with `viewport: { once: true, amount: 0.3 }` and staggered `delay: index * 0.15` on desktop. Use Framer Motion `useMotionValue` for drag tracking and `useTransform` for visual feedback. Implement auto-advance with `useInterval`-style `useEffect` at `AUTO_INTERVAL = 8000ms`. Track `activeIndex` state with dot indicators. On desktop render all 3 cards in a flex row; on mobile use draggable single-card carousel with `CARD_GAP = 20` spacing. Import and apply `Testimonials.css`.

As a frontend developer, implement the `LandingCTA` section for the Landing page with a magnetic button effect and particle burst animation. Define `PARTICLE_COUNT = 24`, `MAGNETIC_RANGE = 120`, and `MAGNETIC_STRENGTH = 12`. Implement `generateParticles()` producing 24 particles with random angle/distance from center, colors from `['#00F0FF', '#FF007F', '#B300FF', '#66F9FF', '#FFD700']`, `size` (4–8px), and `duration` (0.5–0.9s). Build `MagneticButton` component using `useMotionValue` for `mouseX`/`mouseY`, `useTransform` to map `[-MAGNETIC_RANGE, 0, MAGNETIC_RANGE]` → `[-MAGNETIC_STRENGTH, 0, MAGNETIC_STRENGTH]` offsets applied as Framer Motion `style`. Attach a global `mousemove` listener via `useEffect` that calculates distance from button center and sets motion values — zeroing them when distance exceeds `MAGNETIC_RANGE`. Add `whileTap: { scale: 0.96 }`. Build `ParticleBurst` component using `AnimatePresence` to render particles animating from `{opacity:1, scale:1, x:0, y:0}` to `{opacity:0, scale:0, x: p.x, y: p.y}` on click. Track `burstActive` and `burstOrigin` state in the main `LandingCTA`. Import and apply `LandingCTA.css`.

As a frontend developer, implement the `Footer` section for the Landing page with animated link columns and a newsletter form. Define four link column arrays — `productLinks` (/Upload, /FaceLibrary, /Preview, /Download), `companyLinks` (/Dashboard, /Analytics, /Profile, /Landing), `legalLinks` (Privacy Policy, Terms of Service, GDPR Compliance, Cookie Policy), `resourceLinks` (Documentation, API Reference, /Settings, Support) — and aggregate into a `columns` array. Define `socialIcons` array with GitHub, Twitter (X), LinkedIn, and Discord — each with `name` and an inline SVG using stroke-based paths. Use Framer Motion `AnimatePresence` to animate hover state on link items. Use `useState` and `useCallback` for the newsletter email input and submission state. Render the brand logo, tagline, column grid, social icon row, and copyright line. Note: Footer component may already exist from a shared layout — check before creating. Import and apply `Footer.css`.

As a frontend developer, implement the LoginNavbar section for the Login page. This reuses the shared Navbar component (may already exist from Landing page task 1e504300-dbf4-4e46-84ce-da96780b0846). The Navbar component uses useState for drawerOpen and scrolled state, plus a static status='active' state. A scroll event listener (passive) sets scrolled when window.scrollY > 12, toggling the nb-scrolled CSS class on the nav.nb-root element. Renders NAV_PAGES array (10 items: Dashboard, Upload, Library, FaceLibrary, Preview, Download, Analytics, AdminDashboard, Profile, Settings) as nb-link anchor elements with nb-link--active class based on window.location.pathname. The right side renders an nb-status dot (idle variant via nb-status-dot--idle) and a hamburger button with three nb-ham-line spans toggling nb-open class and aria-expanded. The drawer (nb-drawer / nb-drawer--open) renders the same NAV_PAGES as nb-drawer-link anchors. Body overflow is locked to hidden when drawer is open via useEffect cleanup. Includes nb-glow decorative element. Imports Navbar.css for all styling.

As a frontend developer, implement the SignupHero section for the Signup page. This section features a full Three.js particle field background using a `ParticleField` component that renders 320 primary cyan (#00F0FF) particles and 60 accent purple particles via `THREE.Points` with `AdditiveBlending` and a custom radial gradient `CanvasTexture` sprite. Uses `useRef` and `useEffect` for canvas lifecycle management, a `ResizeObserver` for responsive canvas sizing, and per-particle speed arrays for animated drift. The hero overlay contains the signup form or CTA content positioned above the canvas. Imports from `../styles/SignupHero.css`. Note: A similar ParticleField pattern exists in Landing page sections — reuse or adapt the Three.js setup rather than rebuilding from scratch.

As a frontend developer, implement the SignupBenefits section for the Signup page. This section renders three benefit cards defined in the `benefits` array: 'Unlimited Swaps', 'Save & Share Results', and 'Premium Library Access', each with a `title`, `desc`, `iconClass` (e.g. `sbn-card-icon--swaps`), `accent` label, and an inline `svgPath` for the icon. A `ParticleField` component renders 80 Three.js particles using `THREE.BufferGeometry` with per-vertex `colors` attribute, mixing cyan (#00F0FF), purple (#B300FF), and pink (#FF007F) via `THREE.Color.lerp`. The renderer appends its `domElement` to a `containerRef` div. Uses `useRef` and `useEffect` for setup and cleanup. Imports from `../styles/SignupBenefits.css`. This section is visually independent of SignupHero and can be built in parallel.

As a Backend Developer, design and implement the Supabase database schema for SultanAI v3. Create tables for: users (profile data, preferences), faces (face library entries with metadata: id, label, tags, category, thumb_url, created_at), face_swaps (job history: id, user_id, source_image_url, target_image_url, result_url, quality, template, background, status, created_at), analytics_events (user activity tracking for admin dashboard). Write SQL migrations for all tables. Configure RLS policies. Add seed data for the faces library (minimum 9 faces matching FACE_LIBRARY array used in LibraryGrid task 5ff965f5). Note: This is a prerequisite for all API tasks that read/write data.

As a Frontend Developer, establish the global design system and theme foundation for SultanAI v3 - Pulse Edition. Create: (1) globals.css with all CSS custom properties for the color palette (--primary: #00F0FF, --secondary: #B300FF, --accent: #FF007F, --highlight: #FFD700, --bg: #0a0a0f, --surface: rgba(15,15,25,0.45), --text: #FFFFFF, --text-muted: #CCCCCC, --border: rgba(255,255,255,0.08)); (2) Configure next/font/google for Cairo (weights 400,600,700,900) and Space Grotesk (weights 400,500,700) in the root layout; (3) Set dir='rtl' on the root HTML element with Arabic as primary language; (4) Create shared glassmorphism utility classes (backdrop-filter: blur(24px), border-radius 32px desktop/24px mobile, multi-layer box-shadow); (5) Set up 50-particle animated background component (ParticleBackground) with floatUp keyframes (bottom-to-top, 4-8s duration, cyan with purple glow, z-index:0, pointer-events:none) for use across all pages; (6) Configure responsive breakpoints (480px, 768px, 1024px, 1400px) with clamp() typography scale. This is a prerequisite for all frontend section tasks.

As a frontend developer, implement the LoginFooter section for the Login page. Renders a <footer className='lf-root'> containing a <ul className='lf-links'> that maps over FOOTER_LINKS array (Privacy /Privacy, Terms /Terms, Contact /Contact). Uses React.Fragment with key per link; inserts a <li className='lf-sep' aria-hidden='true'> separator between items (idx > 0). Each link renders as <a className='lf-link'>. Below the list, renders a <p className='lf-copy'> with dynamic copyright year via new Date().getFullYear() and 'Sultan of L. All rights reserved.' text. Imports LoginFooter.css for all styling. This is a page-specific footer distinct from the shared Landing Footer component.

As a frontend developer, implement the LibraryHeader section for the Library page. This section renders a `<section className="lh-root">` containing: (1) a breadcrumb `<nav>` with an anchor link to `/Dashboard` and a current page span for 'Library'; (2) a title row with an `<h1>` displaying 'Face Library' and a count badge div using the `Users` icon from `lucide-react` showing `totalFaces` (hardcoded to 124) formatted with `toLocaleString()` and a pulsing `lh-count-dot` span; (3) a descriptive paragraph about the face collection; and (4) a decorative `lh-divider`. Apply all styles from `LibraryHeader.css`. Note: check if a shared Navbar component already exists from earlier pages before creating a new one.

As a Backend Developer, implement the Server Action layer to communicate with the HuggingFace Face Swap engine at NEXT_PUBLIC_FACE_ENGINE_URL (shababdd11-face-swap-sultan.hf.space). Create a Next.js Server Action `swapFaces` that: (1) accepts source image, target image, quality level, template, and background parameters; (2) authenticates requests using HF_TOKEN; (3) uploads images to the face engine endpoint; (4) polls for job completion and streams progress updates back to the client (matching the 5-stage progress bar: 25% Sultan Docker connect, 50% InsightFace analysis, 75% quality application, 92% GFPGAN restoration, 100% complete); (5) stores the result image URL in Supabase face_swaps table; (6) returns the final result URL. Replace the mock setTimeout simulation currently used in FeatureCards. Handle errors and timeouts gracefully.

As a Backend Developer, implement Server Actions for face library management. Create the following actions: (1) `getFaces(filters)` - fetch paginated faces with category filter, search term, and sort options matching LibraryFilters (task 44d26dc8) categories (all/male/female/young/celebrity/artistic/recent) and sort options (newest/oldest/a-z/z-a/popular); (2) `getFaceById(id)` - fetch single face details; (3) `addFace(data)` - admin-only: upload face image to Supabase Storage and create face record; (4) `removeFace(id)` - admin-only: delete face record and associated storage file; (5) `loadMoreFaces(page, filters)` - paginated fetch for LibraryLoadMore (task cdeb4f9d). All mutations validate admin role via SUPABASE_SERVICE_ROLE_KEY. Note: LibraryGrid (5ff965f5), LibraryFilters (44d26dc8), LibraryLoadMore (cdeb4f9d), and FaceLibrary admin tasks depend on these endpoints.

As a Backend Developer, implement Server Actions for the Analytics and AdminDashboard pages. Create: (1) `getAnalyticsSummary()` - admin-only: total users, total swaps, daily/weekly active users, swap success rate; (2) `getUserActivityFeed(limit, offset)` - paginated recent user actions for admin monitoring; (3) `getSystemPerformance()` - face engine response times, queue depth, error rates; (4) `getDailySwapStats(days)` - time-series data for charting swap volumes; (5) `trackEvent(eventType, metadata)` - client-callable action to log user interactions to analytics_events table. All admin endpoints validate the NEXT_PUBLIC_ADMIN_EMAIL role. Note: AdminDashboard and Analytics frontend pages depend on these actions.

As a Backend Developer, implement Server Actions for user profile management. Create: (1) `getUserProfile(userId)` - fetch user display name, avatar, preferences, swap history count; (2) `updateUserProfile(data)` - update display name, avatar image (upload to Supabase Storage), language preference (Arabic/English); (3) `getUserSwapHistory(userId, page)` - paginated history of face swap jobs with result thumbnails; (4) `deleteUserAccount(userId)` - GDPR-compliant account deletion cascading all user data. Enforce that users can only access/modify their own profile data via RLS. Note: Profile frontend page depends on these actions.

As a Backend Developer, implement Stripe payment integration for SultanAI v3. Create Server Actions: (1) `createCheckoutSession(plan)` - create a Stripe Checkout session for subscription plans using STRIPE_SECRET_KEY; (2) `handleWebhook(request)` - process Stripe webhook events (checkout.session.completed, customer.subscription.updated, customer.subscription.deleted) using STRIPE_WEBHOOK_SECRET, updating user subscription status in Supabase; (3) `getSubscriptionStatus(userId)` - fetch current user subscription tier; (4) `createPortalSession(customerId)` - generate Stripe Customer Portal URL for subscription management. Set up the /api/stripe/webhook Next.js API route for webhook handling. Note: STRIPE_SECRET_KEY and STRIPE_WEBHOOK_SECRET must be replaced with real production credentials per Configuration Requirements. SRD specifies real Stripe API keys are required.

As a Backend Developer, implement Server Actions for application settings management. Create: (1) `getUserSettings(userId)` - fetch user preferences (language, notification preferences, default quality level, theme); (2) `updateUserSettings(userId, settings)` - persist user preferences to Supabase; (3) `getAdminSettings()` - admin-only: fetch system-wide configuration (face engine URL, maintenance mode, feature flags); (4) `updateAdminSettings(settings)` - admin-only: update system configuration; (5) `managePermissions(userId, role)` - admin-only: assign/revoke admin role per the AdminDashboard flow. Note: Settings frontend page depends on these actions.

As a Frontend Developer, implement global state management for SultanAI v3 using React 19 patterns. Create: (1) AuthContext with useContext providing user session state (authenticated user, loading, error) powered by Supabase auth state listener; (2) SwapContext managing the active face swap job state (sourceImage, targetImage, selectedTemplate, selectedBackground, quality, dialKnob value, progress stage, result URL) using useReducer for predictable state transitions; (3) useOptimistic integration in SwapContext for instant UI feedback on selection changes (template/background chips appearing immediately before server confirmation); (4) useActionState wrappers for all Server Action calls (swapFaces, addFace, removeFace) with idle/loading/success/error states; (5) Custom hooks: useAuth(), useSwap(), useFaceLibrary() for clean component API; (6) Persist user preferences (quality, language) to localStorage with SSR-safe hydration. Note: This is a prerequisite for Upload, Preview, Download, Library, and Dashboard frontend pages.

As a frontend developer, implement the LibraryFilters section for the Library page. This section uses three `useState` hooks: `searchTerm`, `activeCategory` (default `'all'`), and `sortBy` (default `'newest'`). It renders a `lf-bar` container with: (1) a search input wrapped in `lf-search-wrap` with an inline SVG `SearchIcon` and a controlled text input; (2) a `lf-pills` row of category filter buttons mapped from the `CATEGORIES` array (keys: all, male, female, young, celebrity, artistic, recent) with active/variant CSS classes; (3) a sort `<select>` with a custom `CaretIcon` SVG caret, mapped from `SORT_OPTIONS` (newest, oldest, a-z, z-a, popular); and (4) a reset button showing `ResetIcon` SVG that only appears when `hasActiveFilters` is true, calling `handleReset()` to clear all state. Imports `ResetIcon.css` and `LibraryFilters.css`.

As a frontend developer, implement the LibraryGrid section for the Library page. This section manages state with `useState` for `faces` (initialized from `FACE_LIBRARY` array of 9 face objects with id, label, tags, thumb, category), `favorites` (a `Set`), `selected` (a `Set`), `draggingId`, and `dragOverId`. It uses a `dragSrcRef` via `useRef` to track drag source. Implement `useCallback`-memoized handlers: `toggleFavorite` and `toggleSelect` (toggle ids in respective Sets), drag-and-drop handlers (`handleDragStart`, `handleDragOver`, `handleDragLeave`, `handleDrop`, `handleDragEnd`) that reorder the `faces` array via splice on drop. Each face card renders with draggable attributes, conditional CSS classes for `--dragging` and `--dragover` states, a thumbnail placeholder, label, tags array rendered as pills, a favorite heart button, and a select checkbox. Apply styles from `LibraryGrid.css`.

As a frontend developer, implement the Navbar section for the FaceLibrary page. This is the shared Navbar component (may already exist from Landing/Library pages) featuring: NAV_PAGES array with 10 routes (Dashboard, Upload, Library, Face Library, Preview, Download, Analytics, Admin, Profile, Settings), scroll-aware state via useEffect listening to window.scrollY > 12 toggling nb-scrolled class, drawerOpen state managing mobile hamburger menu with body overflow lock, active link detection via window.location.pathname comparison, status indicator dot with nb-status-dot--idle variant, animated hamburger button with aria-expanded, slide-in nb-drawer with staggered nb-drawer-link items, and nb-glow decorative element. Import from '../styles/Navbar.css'.

As a Backend Developer, implement the Server Action for secure image download. Create: (1) `generateDownloadUrl(swapJobId)` - generates a signed Supabase Storage URL (expiry 1 hour) for the result image, validating that the requesting user owns the swap job; (2) `downloadResultImage(url)` - streams the image file to the client as a downloadable response with appropriate Content-Disposition headers; (3) `saveToGallery(swapJobId)` - saves the result to the user's personal gallery in Supabase. Ensure only authenticated users can download their own results. Note: Download frontend page depends on this API.

As a Tech Lead, verify the end-to-end integration between the Login page frontend implementation (LoginNavbar cb5b9551, LoginFooter 4d58a3a4) and the Supabase authentication backend (backend-supabase-auth). Ensure: Supabase signInWithPassword is called correctly from the login form Server Action, session tokens are set in cookies for SSR, redirect to Dashboard on success, error messages display correctly in the UI, and the auth state propagates through AuthContext to the Navbar status indicator.

As a Tech Lead, verify the end-to-end integration between the Signup page frontend (SignupHero 7fd531e7, SignupBenefits 738daafc) and the Supabase auth backend (backend-supabase-auth). Ensure: Supabase signUp is called correctly, email confirmation flow works, user profile record is created in Supabase on first sign-in, redirect to Dashboard after successful signup, and GDPR consent is captured and stored.

As a Tech Lead, verify the end-to-end integration between the Library page frontend sections (LibraryFilters 44d26dc8, LibraryGrid 5ff965f5, LibraryHeader 76f628bf, LibraryLoadMore cdeb4f9d) and the Face Library backend API (backend-face-library-api). Ensure: faces load from Supabase on page mount replacing hardcoded FACE_LIBRARY mock data, category filters and sort options call getFaces() with correct parameters, drag-and-drop reordering persists to local state, favorites toggle updates correctly, load more fetches next page from API, and the total face count in LibraryHeader reflects the real database count.

As a Tech Lead, verify the end-to-end integration between the FaceLibrary admin page frontend sections (Navbar 3d71c38f, FaceLibraryHeader 46e78405, Footer 7fa93126) and the Face Library backend API (backend-face-library-api). Ensure: bulk mode toggle enables multi-select for batch operations, the Add Face (Plus button) triggers addFace() Server Action with image upload, remove face calls removeFace() with confirmation dialog, admin-only actions are gated behind role check, and content moderation flags update face status in Supabase. Verify that only users with NEXT_PUBLIC_ADMIN_EMAIL role can access admin operations.

As a Tech Lead, verify the end-to-end integration between the Upload/Preview frontend pages and the Face Engine API backend (backend-face-engine-api). Ensure: source and target image uploads from FeatureCards (46057a7b) correctly pass files to the swapFaces Server Action, the 5-stage progress bar updates in real-time as the HuggingFace engine processes (replacing mock setTimeout), quality/template/background selections from ControlPanel are passed as parameters, the result image URL is returned and displayed in ResultCard, and the swap job is saved to Supabase face_swaps table. Validate that the useOptimistic hook provides instant UI feedback for selection chips and useActionState manages the swap job lifecycle states (idle/loading/success/error).

As a Tech Lead, verify the end-to-end integration between the Analytics and AdminDashboard frontend pages and the Analytics & Monitoring backend API (backend-analytics-api). Ensure: admin dashboard overview loads real user counts and swap stats from getAnalyticsSummary(), user activity feed renders live data from getUserActivityFeed(), performance metrics display face engine response times from getSystemPerformance(), daily swap volume charts use getDailySwapStats() time-series data, and all admin endpoints correctly reject non-admin users. Verify that NEXT_PUBLIC_ADMIN_EMAIL role gating works in both the UI and Server Actions.

As a Tech Lead, verify the end-to-end integration between the Profile frontend page and the User Profile backend API (backend-user-profile-api). Ensure: profile data loads from Supabase on page mount, avatar image upload to Supabase Storage works correctly, display name updates persist, swap history renders with result thumbnails, language preference (Arabic/English) updates propagate to the AuthContext and toggle RTL/LTR layout, and GDPR-compliant account deletion cascades all user data and redirects to Landing page.

As a Tech Lead, verify the end-to-end integration between the Settings frontend page and the Settings Management backend API (backend-settings-api). Ensure: user preferences load from Supabase and persist on change, admin system settings panel is only visible to NEXT_PUBLIC_ADMIN_EMAIL users, permission management (role assignment) calls managePermissions() Server Action correctly, and all settings changes are reflected immediately in the UI via optimistic updates.

As a frontend developer, implement the LibraryLoadMore section for the Library page. This section features a Three.js `ParticleCanvas` component that uses `useRef` and `useEffect` to mount a `THREE.WebGLRenderer` (alpha, antialias off) with a `THREE.PerspectiveCamera` (FOV 60, z=12) onto a div via `mount.appendChild(renderer.domElement)`. It spawns `PARTICLE_COUNT` (30) `THREE.Sprite` particles using `THREE.SpriteMaterial` with `AdditiveBlending`, colored from the `COLORS` array (`#FF007F`, `#FFD700`, `#00F0FF`, `#B300FF`), each with randomized position, scale, speed, amplitude, and phase. A `createParticleTexture()` function generates a radial gradient `THREE.CanvasTexture`. The animation loop via `requestAnimationFrame` applies sinusoidal Y-position oscillation and opacity pulsing per particle using `THREE.Clock`. The component handles window resize and cleans up renderer/animation on unmount. Wraps the canvas in a 'Load More' button UI with a loading state. Apply styles from `LibraryLoadMore.css`.

As a frontend developer, implement the FaceLibraryHeader section for the FaceLibrary page. This section features: bulkMode boolean state toggled via flh-admin-toggle button with aria-pressed, viewMode state ('grid'|'list') toggled via Grid3X3 and List lucide-react icon buttons, BREADCRUMBS array (SultanAI → Library → Face Library) rendered with ChevronRight separators and flh-breadcrumb-current span for the last item, ambient glow decorations (flh-ambient--top and flh-ambient--bot divs), flh-sep-glow separator, Layers icon button for bulk select toggle, Plus icon for CTA button in the bottom row title group, flh-title with styled span, and flh-bottom-row layout. Import from '../styles/FaceLibraryHeader.css' and lucide-react icons (Plus, Grid3X3, List, Layers, ChevronRight).

As a frontend developer, implement the Footer section for the FaceLibrary page. This is the shared Footer component (may already exist from Landing page) featuring: ftr-glow-line and ftr-ambient decorative elements, ftr-brand-col with SultanAI v3 logo (ftr-logo-icon 'S' glyph + ftr-logo-text), brand description paragraph about InsightFace and GFPGAN, ftr-status with animated ftr-status-dot and 'All Systems Operational' label, three nav columns (Product: Dashboard/Upload/Library/Preview; Platform: Analytics/FaceLibrary/Download/Profile; Admin: AdminDashboard/Settings/Login/Signup), ftr-divider horizontal rule, ftr-bottom row with dynamic currentYear copyright via new Date().getFullYear(), ftr-bottom-meta with Cpu, Shield, Zap lucide-react icons as ftr-meta-icon. Import from '../styles/Footer.css' and lucide-react.

As a Tech Lead, verify the end-to-end integration between the Download page frontend and the Download backend API (backend-download-api). Ensure: the result image from the face swap job is accessible via signed Supabase Storage URL, the download button triggers generateDownloadUrl() then streams the file with correct Content-Disposition headers, the save-to-gallery action persists the result, and only the authenticated owner of the swap job can download their result. Confirm the Download page links correctly from the Preview page result card.