prime-imsorry

As a frontend developer, implement the LandingHero section for the Landing page. Build a React Three Fiber `Canvas` scene containing a `SwapCube` component that renders a `RoundedBox` mesh with 6 face materials. Each face material uses a `THREE.CanvasTexture` generated via `FaceTexture` — a `useMemo` that draws emoji (140px), label (bold 36px), and 'Tap to explore' text onto a 512×512 canvas with a linear gradient fill. `SwapCube` uses `useRef` for mesh and drag/autoRotate tracking, and `useFrame` for continuous auto-rotation. Implement `onFaceClick` and `hoveredFace`/`setHoveredFace` props for interactivity. FACE_DATA has 6 entries with id, emoji, label, color, title, desc. Add `OrbitControls` from drei. Alongside the Canvas, render a motion-animated info panel using `AnimatePresence` that displays the selected face's title and desc with slide/fade transitions. Use `useState` for active face selection.

As a frontend developer, implement the TrustBadges section for the Landing page. Build 5 badge cards from the `badges` array (Users, Award, ShieldCheck, Gift, Zap icons from lucide-react). Use `useInView` with `sectionRef` (once: true, amount: 0.3) to trigger animations. Implement `AnimatedCounter` component using `useMotionValue`, `useTransform`, and framer-motion `animate` to count from 0 to target over 1.2s with cubic ease. Handle `staticText` case (Free badge) with opacity/y motion. Apply `cardVariants` (opacity 0→1, scale 0.85→1, y 24→0, staggered by index * 0.12) and `iconVariants` (scale 0.6→1, rotate -15→0, spring) per badge. Render two parallax background shape divs (`tb-bg-shape--1`, `tb-bg-shape--2`) with CSS variable `--scroll` transform.

As a frontend developer, implement the LandingFeatures section for the Landing page. Build a `FlipCard` component per feature (Upload, Camera, Paintbrush icons) using `useState(isFlipped)`. On `onHoverStart`/`onHoverEnd` and `onTap`, toggle flip state. Animate `lf-card-inner` with `rotateY: 0→180` over 0.6s cubic ease with `transformStyle: preserve-3d`. Front face shows icon with `rotateZ: 0→360` spin on flip and a teaser text. Back face shows full description and a link button with `ArrowRight` icon. Header uses `headerVariants` (opacity/y). Cards use `containerVariants` with `staggerChildren: 0.15` and `cardEntryVariants` (opacity 0→1, y 30→0). Features array has 3 entries: Upload→/Upload, Camera→/Camera, Paintbrush→/Editor. Imports both `FlipCard.css` and `LandingFeatures.css`.

As a frontend developer, implement the GalleryShowcase section for the Landing page. Render 8 gallery item cards from `galleryItems` array (each with id, title, creator, initials, views, hue, accent). Build `PlaceholderImage` SVG component using inline SVG with a `linearGradient` (id keyed by hue), two face circles, smile path arcs, a dashed arrow path, and 'Face Swap' text — all styled with the item's hue and accent color. Each card shows the SVG placeholder, an avatar with initials, title, creator name, and views count. Use `useState` for `hoveredId` to apply hover state. Use `motion` and `AnimatePresence` for card entry animations (opacity/y/scale). Supports a modal/lightbox expand pattern on card click using `AnimatePresence`. Imports both `PlaceholderImage.css` and `GalleryShowcase.css`.

As a frontend developer, implement the HowItWorks section for the Landing page. Build 4 step cards from `steps` array (Upload, Users, Wand2, Share2 icons). Implement `ConnectorLine` SVG component with a `motion.line` that animates `strokeDashoffset: 600→0` over 1.4s using `useAnimation` triggered by `inView`. Implement `NodeDot` components positioned at `topOffset` with spring scale/opacity entrance delayed by `0.4 + delayIndex * 0.25`. `StepCard` alternates left/right layout on desktop using `stepVariantsLeft` (x: -40→0) and `stepVariantsRight` (x: 40→0) spring animations; uses `mobileStepVariants` (y: 30→0) on mobile. Each step card shows step number badge (`badgeVariants`: scale 0→1 spring), icon (`iconVariants`: scale 0, rotate -45→0 spring), title, and desc. Use `useInView` with `useRef` on section for triggering all animations.

As a frontend developer, implement the UserTestimonials section for the Landing page. Build a carousel/slider over 3 testimonials. Implement `TypewriterQuote` component that splits quote text into individual `motion.span` chars, animating each with `staggerChildren: 0.018` and per-char opacity/y variants, keyed by `triggerKey` for re-triggering on slide change via `AnimatePresence mode='wait'`. Implement `PulsingStar` component with infinite scale pulse `[1, 1.15, 1]` animation at staggered delays. `TestimonialCard` uses `useAnimation` on avatar to trigger a full `rotate: [0, 360]` spin when `isActive` and `triggerKey` change. Auto-advance carousel using `useEffect`/`useRef` interval. Navigation dots and prev/next controls update active index. Imports both `TestimonialCard.css` and `UserTestimonials.css`.

As a frontend developer, implement the LandingFAQ section for the Landing page. Render 8 FAQ items from `faqData` array. Use `useState(openIndex)` to track the expanded accordion item. Each item has a clickable question row that toggles open state. Use `AnimatePresence` to animate the answer panel: `answerVariants` collapses height to 0 and expands to auto; `borderVariants` scaleY animates a left accent border from 0→1 (transformOrigin: top) on expand. Question row shows a `motion.div` chevron/arrow that rotates 0→180deg when expanded. Answer text fades in with the panel. Section header animates in with opacity/y on `whileInView`. Apply staggered entrance per FAQ item using `motion.div` with viewport-triggered variants.

As a frontend developer, implement the LandingPricing section for the Landing page. Render 3 pricing tier cards (Free, Pro at $9.99, Enterprise at $29.99) from `tiers` array. Use `containerVariants` (staggerChildren: 0.15) and `cardVariants` (opacity 0→1, y 40→0, 0.6s easeOut) for card entrance. The Pro tier has `highlighted: true` — render a 'Most Popular' badge and apply elevated visual treatment. Each card's feature list uses `featureListVariants` (staggerChildren: 0.1, delayChildren: 0.3) and `featureItemVariants` (opacity/x: -10→0). Each feature's `Check` icon uses `checkVariants` (scale 0→1, spring stiffness 500). CTA buttons use `ctaHoverBg`/`ctaHoverColor` for hover state via `whileHover`. `Shield` icon appears in a trust note below cards. Two parallax background shapes rendered via `lp-bg-shape--1/2` with `--scroll` CSS variable transform.

As a frontend developer, implement the LandingCTA section for the Landing page. Build `MagneticButton` component using `useRef`, `useState({x,y})`, and `useCallback` for `handleMouseMove`/`handleMouseLeave`. Compute pull vector from cursor to button center within an 80px radius with a 0.35 pull factor. Animate button position with `motion.a` spring (stiffness 250, damping 18, mass 0.6). Generate 25 floating particles via `generateParticles(PARTICLE_COUNT)` using `useMemo` — each particle has type (gold/blue/coral cycling), size (3-8px), left%, delay, duration (7-13s), xDrift (-30 to +30). Render particles as `motion.div` elements with continuous float-up keyframe animations. Section uses `useInView` (once: true, amount: 0.3) for entrance animation trigger. Background has an animated `lc-gradient-bg` with `backgroundPosition` cycling `0%→100%→0%` over 14s infinite linear. Imports both `MagneticButton.css` and `LandingCTA.css`.

As a frontend developer, implement the Footer section for the Landing page. Build a `Footer` component with `useState(email)` for newsletter form. Render 4 link columns (Product, Company, Legal, Community) from `linkColumns` array using `columnVariants` (opacity/y with custom per-column delay, whileInView, once: true). Each link uses `underlineVariants` (scaleX: 0→1 on hover, transformOrigin: left) via `motion.div`. Render 4 social icon buttons (Twitter, Facebook, Instagram, Github from lucide-react) with `whileHover` scale/rotate animations. Newsletter form has email input with `onChange` updating state and `onSubmit` handler. Parallax background layer with inline SVG dot pattern (40×40 grid, circle r=1.2, fill var(--primary), opacity 0.04) using `--scroll` CSS variable. Note: This component may already exist from a previous page — reuse if available.

As a frontend developer, implement the Navbar section for the Login page. This component may already exist from the Landing page (task 3b7711bf-2665-4be1-afa1-17f3474a3317) and can be reused directly. The Navbar uses two useState hooks (mobileOpen, scrolled) and a useEffect for passive scroll listener that toggles the 'nb-scrolled' class on the nav root. A second useEffect locks body scroll (document.body.style.overflow = 'hidden') when the mobile menu is open. The component renders: a logo with Sparkles icon (lucide-react, size=18) linking to /Home; a desktop ul.nb-links iterating navLinks array (Home, Upload, Camera, Editor, Preview, Share, Profile); desktop CTAs with nb-cta-login (/Login) and nb-cta-signup (/Signup) anchors; and a mobile hamburger button with three nb-hamburger-line spans and aria-expanded state. A separate nb-mobile-menu div slides in when mobileOpen is true, rendering nb-mobile-link anchors with closeMobile onClick and a nb-mobile-divider. Import Navbar.css (6718 chars of styles).

As a Backend Developer, implement the Camera Capture API using FastAPI. Endpoint: POST /api/images/capture (accepts base64-encoded image data or blob from in-app camera, stores the captured photo, returns image_id and URL). Reuse the image storage layer from the Image Upload API (temp_backend_image_upload_api). Validate image format and size. Return image metadata for downstream face-swap processing.

As a Backend Developer, implement the Face Swap AI API using FastAPI and LiteLLM for LLM routing to the Google Nano banana AI model. Endpoints: POST /api/faceswap/detect (accepts image_id, returns list of detected face bounding boxes/coordinates), POST /api/faceswap/swap (accepts source_image_id, target_image_id, face_selection payload; returns swapped_image_id and result URL), GET /api/faceswap/{job_id}/status (poll async job status). Implement async task processing (Celery or FastAPI BackgroundTasks) for long-running AI inference. Store job results in MongoDB 'faceswap_jobs' collection. Handle errors gracefully and return meaningful status codes.

As a Backend Developer, implement the Filters and Effects API using FastAPI. Endpoints: GET /api/filters (list available filters/effects), POST /api/images/{image_id}/apply-filter (accepts filter_id and parameters, returns new processed image_id and URL). Implement at least basic filter categories: brightness/contrast, color grading, artistic effects. Use Pillow or OpenCV for server-side image processing. Store processed image metadata in MongoDB. Ensure high-resolution support without performance degradation per SRD non-functional requirements.

As a Backend Developer, implement the Share and Save API using FastAPI. Endpoints: POST /api/share (accepts image_id, platform (instagram/twitter/facebook/download), optional caption; returns share_url or triggers download), GET /api/share/history (list user's shared items), POST /api/projects/save (save current editor state as a downloadable project file — JSON/ZIP with image refs and edit metadata), GET /api/projects/{project_id}/download (download the saved project file). Store share records in MongoDB 'shares' collection. Integrate OAuth tokens for social media platforms if direct posting is required.

As an AI Engineer, configure LiteLLM as the LLM routing layer for the prime-imsorry application. Set up LiteLLM proxy configuration to route AI inference requests to the Google Nano banana model for face-swap image generation. Define model routing rules, fallback strategies, and rate limiting. Create a reusable AI service client module (services/ai_client.py) that wraps LiteLLM calls with retry logic, error handling, and logging. Configure environment variables for API keys and model endpoints. Validate end-to-end connectivity with a health-check endpoint: GET /api/ai/health.

As a Frontend Developer, set up React Router DOM with all application routes: /, /Home, /Upload, /Camera, /Editor, /Preview, /Share, /Profile, /Login, /Signup. Configure protected routes (require authentication) for: /Home, /Upload, /Camera, /Editor, /Preview, /Share, /Profile. Create placeholder page components for all pages not yet implemented (Home, Upload, Camera, Preview, Share, Signup, Profile). Set up global context providers: AuthContext (user state, login/logout), EditorContext (current image, face selections, filters state). Configure Axios or Fetch base URL pointing to the FastAPI backend. Note: All section-level frontend tasks depend on this scaffold being in place.

As a frontend developer, implement the LoginFooter section for the Login page. This Footer component may already exist from the Landing page (task cba2e732-b6e5-44ce-a1d9-f549ea1d2733) and can be reused or confirmed consistent. The component is a stateless functional Footer rendering: a ftr-top-border div; a ftr-brand block with a Camera icon (lucide-react) logo linking to /Home, a tagline paragraph about face-swapping, and a ftr-socials row mapping the socials array (Instagram, Twitter, Youtube, Github from lucide-react) as target='_blank' anchor links with aria-labels; and a ftr-columns grid with three ftr-column blocks — Product (Upload, Camera, Editor, Preview, Share links), Account (Sign Up /Signup, Log In /Login, Profile /Profile), and Resources (Home, Help Center, Privacy Policy, Terms of Service all pointing to /Home). Import LoginFooter.css (3777 chars of styles).

As a frontend developer, implement the Navbar section for the Editor page. This component likely already exists from previous pages (Landing: 3b7711bf-2665-4be1-afa1-17f3474a3317, Login: 8ba64aac-d29d-4799-b892-0eb514ee73d6). The Navbar uses useState for mobileOpen and scrolled states, useEffect for passive scroll listener that sets scrolled when window.scrollY > 8, and a second useEffect that toggles document.body.style.overflow to prevent background scroll when mobile menu is open. Renders nb-root nav with nb-scrolled class conditionally, nb-logo with Sparkles icon (lucide-react, size=18), desktop nb-links list mapping navLinks array (Home, Upload, Camera, Editor, Preview, Share, Profile), desktop nb-ctas with Log In / Sign Up anchor tags, and a three-line nb-hamburger button with aria-expanded. Mobile overlay nb-mobile-menu with nb-mobile-open class toggle renders the same navLinks as nb-mobile-link anchors each calling closeMobile onClick, plus nb-mobile-divider and nb-mobile CTAs.

As a Frontend Developer, implement the Signup page (design page: Signup v1). Build the registration form with fields: username, email, password, confirm password. Integrate with POST /api/auth/register backend endpoint. Show validation errors inline. On success, redirect to /Home. Include social signup options (Google OAuth). Apply the global theme and reuse the Navbar and Footer components. Note: This page depends on temp_backend_user_api for registration endpoint and temp_frontend_pages_scaffold for routing.

As a Frontend Developer, implement the Home page (design page: Home v1). Display a browseable gallery of sample face-swapped images fetched from GET /api/gallery/samples. Include search/filter controls. Show a hero welcome section with CTA buttons to Upload or Camera. Implement infinite scroll or pagination for gallery items. Apply the global theme with parallax background effects. Reuse Navbar and Footer components. Note: Depends on temp_backend_home_gallery_api for gallery data and temp_frontend_pages_scaffold for routing.

As a Frontend Developer, implement the Upload page (design page: Upload v1). Build a drag-and-drop file upload zone with file picker fallback. Show upload progress indicator. Preview the uploaded image on success. On upload completion (POST /api/images/upload), redirect to /Editor with the image_id as route state. Support JPEG, PNG, WEBP formats. Show file size and format validation errors. Apply the global theme. Reuse Navbar and Footer. Note: Depends on temp_backend_image_upload_api and temp_frontend_pages_scaffold.

As a Frontend Developer, implement the Camera page (design page: Camera v1). Use the browser MediaDevices API (getUserMedia) to access the device camera. Render a live camera feed in a video element. Provide a capture button that takes a snapshot (canvas.drawImage). Send the captured image blob to POST /api/images/capture. On success, redirect to /Editor with the returned image_id. Handle camera permission denied errors gracefully. Support front/rear camera toggle on mobile. Apply the global theme. Reuse Navbar and Footer. Note: Depends on temp_backend_camera_api and temp_frontend_pages_scaffold.

As a Frontend Developer, implement the Editor page (design page: Editor v2). Load the image (from route state image_id) via GET /api/images/{image_id}. Call POST /api/faceswap/detect to display detected face bounding boxes overlaid on the image. Allow user to select source and target faces. Trigger face swap via POST /api/faceswap/swap and poll GET /api/faceswap/{job_id}/status for async result. Show a loading/progress state during AI processing. On completion, display the swapped image and allow navigation to /Preview. Integrate filter controls (GET /api/filters, POST /api/images/{image_id}/apply-filter). Implement save project button (POST /api/projects/save). Reuse Navbar (e900616a) and Footer (f73356c8) components. Note: Depends on temp_backend_faceswap_api, temp_backend_filters_api, temp_backend_share_api, and temp_frontend_pages_scaffold.

As a Frontend Developer, implement the Preview page (design page: Preview v1). Display the final face-swapped and filtered image in full-screen view. Provide zoom controls and a full-screen toggle. Show image metadata (dimensions, created at). Include action buttons: Edit (back to /Editor), Share (proceed to /Share), Download (trigger file download). Apply smooth entrance animations with framer-motion. Reuse Navbar and Footer. Note: Depends on temp_backend_image_upload_api for image fetch and temp_frontend_pages_scaffold.

As a Frontend Developer, implement the Share page (design page: Share v1). Display the result image with sharing options for Instagram, Twitter, Facebook, and a direct download button. Integrate with POST /api/share for social platform sharing. Implement a caption/description input field. Show share history from GET /api/share/history. Provide a 'Save Project' download button using GET /api/projects/{project_id}/download. Apply the global theme with animated share buttons. Reuse Navbar and Footer. Note: Depends on temp_backend_share_api and temp_frontend_pages_scaffold.

As a Frontend Developer, implement the Profile page (design page: Profile v2). Display the current user's profile info (avatar, username, bio, social links) fetched from GET /api/users/me. Show a grid of the user's shared posts from GET /api/users/{user_id}/posts. Allow editing profile details via PUT /api/users/me with an inline edit form. Show account creation date and usage stats. Apply the global theme with animated card transitions. Reuse Navbar and Footer. Note: Depends on temp_backend_user_api and temp_frontend_pages_scaffold.

As a frontend developer, implement the Footer section for the Editor page. This component likely already exists from previous pages (Landing: cba2e732-b6e5-44ce-a1d9-f549ea1d2733). The Footer is a static functional component using Camera, Instagram, Twitter, Youtube, Github icons from lucide-react. Renders ftr-footer with ftr-top-border decorative element and ftr-inner wrapper. Contains ftr-main with ftr-brand block (Camera icon logo linking to /Home, tagline paragraph about face-swapping, ftr-socials row mapping the socials array of Instagram/Twitter/YouTube/GitHub with target=_blank rel=noopener) and ftr-columns grid with three ftr-column blocks: Product (Upload, Camera, Editor, Preview, Share links), Account (Sign Up, Log In, Profile links), Resources (Home, Help Center, Privacy Policy, Terms of Service links all pointing to /Home). All link arrays are defined as module-level constants.

As a Tech Lead, verify the end-to-end integration between the Upload page frontend implementation and the Image Upload backend API. Ensure the file upload flow works correctly: file selection → multipart upload to POST /api/images/upload → progress feedback → success redirect to /Editor with image_id. Verify error handling for unsupported formats and oversized files. Confirm image metadata is stored in MongoDB and retrievable.

As a Tech Lead, verify the end-to-end integration between the Camera page frontend implementation and the Camera Capture backend API. Ensure the camera capture flow works correctly: camera access → snapshot capture → POST /api/images/capture → success redirect to /Editor with image_id. Verify captured images are stored securely and retrievable. Test on both desktop and mobile browsers.

As a Tech Lead, verify the end-to-end integration between the Editor page frontend and the Face Swap AI API and Filters API. Ensure the complete editor workflow functions: image load → face detection overlay → face selection → swap job submission → async polling → result display → filter application → save project. Verify LiteLLM routing reaches the Google Nano banana model correctly. Confirm job status updates are reflected in the UI in real-time.

As a Tech Lead, verify the end-to-end integration between the Share page frontend and the Share & Save backend API. Ensure: image display on Share page → social platform share via POST /api/share → project download via GET /api/projects/{project_id}/download → share history display via GET /api/share/history all function correctly. Verify social OAuth tokens work for direct platform posting. Test project file download contains correct image refs and edit metadata.

As a Tech Lead, verify the end-to-end integration between the Profile page frontend and the User Profile backend API. Ensure: profile data fetch (GET /api/users/me), profile update (PUT /api/users/me), and shared posts list (GET /api/users/{user_id}/posts) all work correctly with proper UI feedback. Verify GDPR-compliant data handling and that only authenticated users can access their own profile data.

As a Tech Lead, verify the end-to-end integration between the Home page frontend and the Home Gallery Samples API. Ensure the gallery browse flow works: page load → GET /api/gallery/samples → paginated display → infinite scroll or pagination controls. Also verify the Landing page GalleryShowcase section (fce5bc49) uses GET /api/gallery/featured for real data. Confirm seed data is visible and pagination performs well with high-resolution image thumbnails.

As a Tech Lead, verify the end-to-end integration between the Signup page frontend and the User backend API registration endpoint (POST /api/auth/register). Ensure form submission, validation errors, success redirect to /Home, and JWT token storage all work correctly. Verify GDPR consent checkbox is present and stored. Test duplicate email error handling.