Aspen Vaction

As a frontend developer, implement the `LandingHero` section using `@react-three/fiber` Canvas with `useFrame`, `useThree`, `OrbitControls`, `Sphere`, and `Html` from `@react-three/drei`. Build a `GlobeCore` component with three layered Sphere meshes: ocean (meshPhysicalMaterial, #4a90d9, opacity 0.92), wireframe land overlay (IcosahedronGeometry radius 1.98, green, opacity 0.35), and atmosphere glow (BackSide, #87CEEB, opacity 0.06). Add `GridLines` component with lat/lng grid geometry. Auto-rotate globe via `useFrame` delta at 0.04 rad/s. Plot 8 `DESTINATIONS` (Bali, Goa, Maldives, Manali, Sri Lanka, Santorini, Kyoto, Reykjavik) as pins using `latLngToVector3` coordinate conversion. Use framer-motion for hero text entrance. Import `useState`, `useRef`, `useMemo`, `useCallback` and `../styles/LandingHero.css`.

As a frontend developer, implement the `LandingGlobeExperience` section using framer-motion `motion` and `useInView`. Render three interaction instruction cards from the `interactions` array (rotate, hover, click), each with a step number, title, description, color-coded icon wrapper (lge-icon-wrap--rotate: #1A73E8, lge-icon-wrap--hover: #FF7043, lge-icon-wrap--click: #4CAF50), and hint badge. Implement three custom SVG icon components: `RotateIcon` (circular arc with arrow), `HoverIcon` (multi-finger hand path), and `ClickIcon` (cursor pointer with click indicator). Animate cards into view using `useInView` for scroll-triggered entrance. Import `../styles/LandingGlobeExperience.css`.

As a frontend developer, implement the `LandingFeatures` section using `useState` for hover state tracking and `motion`/`AnimatePresence` from framer-motion. Render 4 feature cards from the `features` array (search, book, manage, explore) each with a variant-specific glow color (`glowColor` rgba values: blue 0.18, orange 0.18, gold 0.22, amber 0.20), custom SVG icon (SearchIcon, BookIcon, ManageIcon, ExploreIcon), title, description, and animated arrow link (`arrowLabel`). Apply per-card glow on hover via inline style driven by active state. Link cards to /Search, /Booking, /Itinerary, /Recommendations respectively. Include `ArrowRight` SVG component for CTA arrows. Import `../styles/LandingFeatures.css`.

As a frontend developer, implement the `LandingDestinationHighlights` section using `useState` for active destination tracking, `useRef` for scroll container, and `useCallback` for event handlers. Render 6 destination cards (Bali, Goa, Kashmir, Kerala, Rajasthan, Himalayas) from the `destinations` array, each with an Unsplash image, name, region, and 4 `facts` entries with icon/text pairs. Implement `FactIcon` component rendering context-specific SVGs for calendar, wallet, star, and clock icon types. Use `AnimatePresence` and `motion` for card entrance and hover state transitions. Include a horizontally scrollable card rail. Import `../styles/LandingDestinationHighlights.css`.

As a frontend developer, implement the `LandingItineraryShowcase` section using `useState` for `hoveredDay` state. Import lucide-react icons: `MapPin`, `Compass`, `Sunrise`, `Palmtree`, `Star`, `ArrowRight`. Render a 3-day itinerary timeline from `itineraryDays` (Goa: Arrive & Beach, Heritage Tour, Island Hopping) with per-day icon components, tag chips with variants (default, accent, gold), and hover interaction. Render a map panel with 3 `mapPins` (Calangute 28%/22%, Old Goa 42%/55%, Grande Island 68%/30%) positioned absolutely. Implement framer-motion animations: `containerVariants` with staggerChildren 0.25, `dayVariants` (x: -30→0), `dotVariants` (spring scale), `headerVariants` (y: 20→0), `imageVariants` (scale: 0.95→1 with 0.3s delay). Add parallax background layer with CSS custom property `--scroll`. Import `../styles/LandingItineraryShowcase.css`.

As a frontend developer, implement the `LandingRecommendations` section using `useState` for flip card active state. Render 3 flip cards from the `recommendations` array (Bali, Manali, Maldives) each with a front face (Unsplash image, title, icon) and back face (backTitle, description, href to /Destination). Implement `iconMap` lookup for `PalmIcon`, `MountainIcon`, and `WavesIcon` custom SVG components. Apply shimmer animation using `shimmerKeyframes` (x: -100% to 200%) with `shimmerTransition` (2.4s infinite, 0.8s repeatDelay). Use `AnimatePresence` and `motion` with `headerVariants` (y: 30→0, opacity) for section heading entrance. Import `../styles/LandingRecommendations.css`.

As a frontend developer, implement the `LandingTestimonials` section using `useState` for active slide index, `useEffect` for autoplay (5000ms AUTOPLAY_INTERVAL), and `useCallback` for navigation handlers. Render 5 testimonial slides (Priya Sharma, Arjun Mehta, Sneha Reddy, Rahul Desai, Kavya Nair) from the `testimonials` array, each with gradient avatar (linear-gradient per entry), initials, name, role, trip destination, 5-star `StarIcon` rating, and quote text. Implement `AnimatePresence` slide transition with prev/next chevron buttons using `ChevronLeft`/`ChevronRight` SVG components. Render dot pagination indicators. Include a `CheckIcon` for verified badge display. Import `../styles/LandingTestimonials.css`.

As a frontend developer, implement the `LandingCTA` section using `useState` for `particles` array, `useRef` for `particleId` counter and `sectionRef`, and `useInView` (once: true, amount: 0.3) for scroll-triggered entrance. Implement `MagneticButton` component with `useRef`, `useState` for x/y offset, `useEffect` for mobile detection (< 768px), and `useCallback` for `handleMouseMove` (magnetic pull: strength = 1 - dist/maxDist, 12% factor, maxDist 180px) and `handleMouseLeave`. On primary CTA click, trigger `triggerParticles`: spawn 12 `PARTICLE_COUNT` particles using `getParticleAngle` with randomized radius (50–90px) from `PARTICLE_COLORS` ([#FFD700, #FFA726, #FF7043, #1A73E8, #E8F0FE]), clear after 800ms, redirect to /Signup after 400ms. Animate heading with `headlineVariants` (y: 24→0). Import `../styles/LandingCTA.css`.

As a frontend developer, implement the `Footer` section using framer-motion `motion` with `containerVariants` (staggerChildren: 0.12), `columnVariants` (y: 24→0, opacity, staggerChildren: 0.06), `linkVariants` (y: 10→0, opacity, 0.35s), `copyrightVariants` (opacity, 0.6s delay 0.5s), and `socialVariants` (scale: 0.8→1). Render 4 link columns from the `columns` array: Destinations (6 links to /Destination), Company (5 links to /Home), Help (5 links to /Settings, /Bookings, /Booking), Legal (4 links to /Home). Render social icons row with `TwitterIcon`, `InstagramIcon`, and `FacebookIcon` custom SVG components. Include copyright text and brand logo. Note: this Footer component may already exist from a previous page — reuse if available. Import `../styles/Footer.css`.

As a Backend Developer, implement destination management API endpoints using FastAPI: GET /api/destinations (list with filters: region, price, type), GET /api/destinations/{id} (detail view with facts, images, availability), POST /api/destinations (admin create), PUT /api/destinations/{id} (admin update info and availability), DELETE /api/destinations/{id} (admin remove). Include Pydantic schemas for request/response, pagination support, and search/filter query params. These endpoints support the Search, Destination detail, LandingDestinationHighlights, and Admin Destinations pages.

As a Backend Developer, implement booking management API endpoints using FastAPI: POST /api/bookings (create booking for accommodation or activity), GET /api/bookings (list user's bookings), GET /api/bookings/{id} (booking detail), PUT /api/bookings/{id} (update/modify booking), DELETE /api/bookings/{id} (cancel booking), GET /api/admin/bookings (admin: list all bookings with filters). Include payment integration hooks, booking status management (pending, confirmed, cancelled), and third-party booking service integration stubs. These endpoints support the Booking, Profile/Bookings, and Admin Bookings pages.

As a Backend Developer, implement itinerary management API endpoints using FastAPI: POST /api/itineraries (create new itinerary), GET /api/itineraries (list user's itineraries), GET /api/itineraries/{id} (itinerary detail with days and activities), PUT /api/itineraries/{id} (update itinerary), DELETE /api/itineraries/{id} (delete itinerary), POST /api/itineraries/{id}/days (add day), PUT /api/itineraries/{id}/days/{day_id} (update day schedule). These endpoints support the Itinerary page and LandingItineraryShowcase preview.

As a Backend Developer, implement personalized recommendations API endpoints using FastAPI: GET /api/recommendations (fetch AI-generated personalized destination suggestions based on user preferences and history), POST /api/recommendations/preferences (save user preference data), GET /api/recommendations/trending (top trending destinations for landing page). Integrate with LiteLLM routing to GPT for generating user-friendly recommendation responses. These endpoints support the Recommendations page and LandingRecommendations section.

As a Backend Developer, implement admin user management API endpoints using FastAPI: GET /api/admin/users (list all users with pagination and search), GET /api/admin/users/{id} (user detail), PUT /api/admin/users/{id} (edit user profile/role), POST /api/admin/users/{id}/deactivate (deactivate account), POST /api/admin/users/{id}/activate (reactivate account). Protect all admin routes with role-based access control (RBAC) middleware ensuring only Admin role users can access. Supports Admin Users page.

As a Frontend Developer, set up global state management for the Aspen Vaction React app. Implement a context/store architecture (React Context + useReducer or Zustand) to manage: authenticated user state and JWT token persistence (localStorage), user preferences, active booking/itinerary state, and destination search filters. Create auth hooks (useAuth, useUser) and shared API client with Axios including JWT interceptors for auto-attaching Authorization headers and handling 401 refresh flows. Set up React Query or SWR for server state caching of destinations, bookings, and recommendations. This foundational layer is required by all pages that need auth or data fetching.

As a Backend Developer, implement role-based access control (RBAC) middleware for the FastAPI backend. Create JWT verification middleware that decodes tokens, attaches the authenticated user to request state, and raises 401 for invalid/expired tokens. Implement role guards (require_user, require_admin) as FastAPI dependencies to protect routes — admin routes return 403 for non-admin users. Integrate middleware into all protected API routers (bookings, itineraries, recommendations, admin endpoints). Add rate limiting middleware for API protection during peak concurrency loads.

As a frontend developer, implement the LandingHero section for the Landing page. Build an interactive 3D globe using @react-three/fiber Canvas with OrbitControls, Sphere, and Html from @react-three/drei. Implement GlobeCore component with useFrame auto-rotation (delta * 0.04), a meshPhysicalMaterial ocean sphere (color #4a90d9, clearcoat 0.3), a wireframe IcosahedronGeometry land overlay (opacity 0.35), and a BackSide atmosphere glow sphere. Implement GridLines component with useMemo-generated latitude/longitude line geometry. Render 8 DESTINATIONS as 3D pins using latLngToVector3() coordinate conversion. Implement DestinationPin components with Html labels showing destination name and fact on hover. Add framer-motion hero text overlay with staggered animation for headline, subheadline, and CTA button. Handle useState for activeDestination and useMemo/useCallback for performance. Apply LandingHero.css styles.

As a frontend developer, implement the LandingGlobeExperience section for the Landing page. Render the three interaction cards from the interactions array (Rotate to Explore, Hover for Insights, Click to Book) each with step number, title, description, and hint badge. Implement three custom SVG icon components: RotateIcon (circular arc with arrow, strokeDasharray dashed segment), HoverIcon (multi-finger hand gesture paths), and ClickIcon (cursor arrow with ripple circles). Use framer-motion useInView for scroll-triggered staggered card entrance animations. Apply per-card iconColorClass variants ('lge-icon-wrap--rotate' #1A73E8, 'lge-icon-wrap--hover' #FF7043, 'lge-icon-wrap--click' #4CAF50) for themed icon backgrounds. Apply LandingGlobeExperience.css styles.

As a frontend developer, implement the LandingFeatures section for the Landing page. Render the 6-item features array (Holiday Packages, Customized Tours, Flight Booking, Hotel Booking, Visa Services, Travel Insurance) as interactive cards. Implement 6 custom SVG icon components: HolidayIcon (globe with meridian lines), CustomIcon (pencil/edit), FlightsIcon (airplane), HotelsIcon, VisaIcon, InsuranceIcon. Use useState for hoveredFeature tracking and AnimatePresence for card glow overlays. Apply per-card glowColor values (e.g. rgba(243,156,18,0.18) for holiday) as dynamic box-shadow on hover. Each card includes an arrowLabel CTA linking to its href (/Search or /Booking). Add framer-motion stagger entrance animations for card grid. Apply LandingFeatures.css with variant-based class modifiers.

As a frontend developer, implement the LandingDestinationHighlights section for the Landing page. Render the 6-destination array (Bali, Goa, Kashmir, Kerala, Rajasthan, Himalayas) with Unsplash images (600×800 crop). Implement useState for activeDestination and useRef/useCallback for swipe gesture handling. Each destination card shows region label, name, and a 4-item facts array with FactIcon components (calendar, wallet, star, clock SVG icons). Build AnimatePresence-driven transitions when switching active destination — image crossfade and facts panel slide-in. Implement a horizontal destination selector strip with active indicator. Add framer-motion entrance animations triggered by useInView. Apply LandingDestinationHighlights.css styles.

As a frontend developer, implement the LandingItineraryShowcase section for the Landing page. Render a 3-day Goa itinerary from itineraryDays array using framer-motion containerVariants (staggerChildren: 0.25) and dayVariants (opacity 0, x: -30 → visible) for staggered timeline entrance. Each day card uses lucide-react icons (Sunrise, Compass, Palmtree) and renders tag chips with variant styles ('', 'accent', 'gold'). Implement useState(hoveredDay) to highlight active timeline dot with dotVariants spring animation (stiffness 300, damping 20). Render a mock map panel on the right with 3 mapPins (Calangute, Old Goa, Grande Island) positioned via inline top/left percentages. Add lis-parallax-bg layer with CSS custom property --scroll for parallax effect and two decorative blob divs. Apply headerVariants and imageVariants for section header and map panel entrance. Apply LandingItineraryShowcase.css styles.

As a frontend developer, implement the LandingRecommendations section for the Landing page. Render 3 recommendation cards (Bali, Manali, Maldives) with CSS 3D card-flip interaction using framer-motion AnimatePresence. Each card has a front face showing destination image (Unsplash 600×800), title, and icon (PalmIcon, MountainIcon, WavesIcon — custom SVG components), and a back face showing backTitle, description, and a link to /Destination. Implement useState per card for flipped state. Add shimmerKeyframes animation (x: '-100%' → '200%', duration 2.4s, repeat Infinity, repeatDelay 0.8) on card shine overlay. Apply headerVariants (opacity 0, y: 30 → visible) for scroll-triggered section header entrance. Apply LandingRecommendations.css styles.

As a frontend developer, implement the LandingCTA section for the Landing page. Build the MagneticButton component using useRef, useState({x,y}), and useCallback for mousemove magnetic offset calculation (strength = 1 - dist/maxDist, offset *= 0.12, maxDist 180px) with spring animation (stiffness 350, damping 20, mass 0.5). Implement isMobile detection via useEffect/resize listener to disable magnetic effect below 768px. Build the particle burst system: triggerParticles generates PARTICLE_COUNT (12) particles using getParticleAngle(), each with random radius (50–90px), color from PARTICLE_COLORS array (['#FFD700','#FFA726','#FF7043','#1A73E8','#E8F0FE']), and size (5–11px); particles clear after 800ms and redirect to /Signup after 400ms. Use useInView (once: true, amount: 0.3) for headlineVariants entrance animation. Apply LandingCTA.css styles.

As a frontend developer, implement the Navbar section for the Login page. This component (Navbar.css) may already exist from the Landing page. It uses useState for `scrolled` and `mobileOpen` states, a useEffect scroll listener (`window.scrollY > 12`) that toggles the `nb-scrolled` class, a Lucide `Plane` icon in the logo, desktop nav links mapped from a `navLinks` array (Home, Search, Destinations, Bookings, Itinerary, Recommendations), desktop auth buttons (Log In → /Login, Sign Up → /Signup), and a mobile hamburger toggle with animated `nb-hamburger` spans. A mobile drawer (`nb-mobile-drawer`/`nb-drawer-open`) renders all nav links plus auth buttons. Verify the shared component renders correctly in the Login page context.

As a Tech Lead, verify the end-to-end integration between the LandingRecommendations frontend section and the Recommendations backend API. Ensure the trending destinations endpoint (GET /api/recommendations/trending) returns correctly structured data that populates the 3 flip cards (Bali, Manali, Maldives) with real backend data. Confirm image URLs, destination names, descriptions, and links to /Destination route work correctly. Note: frontend task depends on task 9e86da5f-faca-48c0-90ce-c1fb23ba36fa and backend task temp_backend_recommendations.

As a Tech Lead, verify the end-to-end integration between the LandingDestinationHighlights frontend section and the Destinations backend API. Ensure the destinations list endpoint (GET /api/destinations) returns the 6 featured destinations (Bali, Goa, Kashmir, Kerala, Rajasthan, Himalayas) with all required fields: name, region, images, and facts array. Confirm data flows correctly into the horizontally scrollable card rail and hover interactions work with real data. Note: frontend task depends on task d44b52ed-c76d-44f6-ae7a-4b9cb1f1471d and backend task temp_backend_destinations.

As a Tech Lead, verify the end-to-end integration between the LandingCTA frontend section and the Auth backend API. Confirm the CTA particle animation triggers correctly, the redirect to /Signup after 400ms works, and the Signup page connects to POST /api/auth/signup. Validate that a user completing signup is redirected to login and can subsequently authenticate via POST /api/auth/login. Note: frontend task depends on task 269059a4-ad55-4c7c-8ec3-f0d8f2a7fe5a and backend task temp_backend_auth.

As a frontend developer, implement the LoginHero section (LoginHero.css) for the Login page. The section renders a full-width `lh-hero` container with: a decorative SVG wave (`lh-decor-wave`) using a cubic bezier path filled with `var(--primary)` at 0.5 opacity; two decorative airplane silhouettes (`lh-airplane lh-airplane-1` and `lh-airplane lh-airplane-2`) rendered as inline SVGs with a shared plane path; four floating dot divs (`lh-dot`) inside a `lh-dots` container for ambient animation; and a content block (`lh-content`) with an `h1.lh-headline` containing an accented `span.lh-headline-accent` for 'Aspen Vaction' and a `p.lh-subheadline` describing itinerary/booking access. This is a purely decorative/static section with no state or API calls.

As a frontend developer, implement the LoginForm section (LoginForm.css) for the Login page. This is a complex interactive section using: useState for `email`, `password`, `showPassword`, `rememberMe`, `errors`, `touched`, and `isSubmitting`; useRef for `canvasRef` and `sectionRef`; and a full Three.js particle background (`PARTICLE_COUNT = 40`) initialized in a useEffect that creates a WebGLRenderer with alpha, a PerspectiveCamera at z=30, and 40 SphereGeometry meshes (radius 0.08) with `MeshBasicMaterial` color `0x1A73E8` at varying opacities, each animated with sinusoidal x/y motion driven by `performance.now()`. The form includes a Lucide `Mail` icon on the email input, a Lucide `Lock` icon with `Eye`/`EyeOff` toggle for password visibility, a remember-me checkbox, an `errors`/`touched` validation display using `AlertCircle`, a submit button with `ArrowRight` and `LogIn` icons, and `isSubmitting` loading state. Includes resize handler for responsive canvas. Requires `three` npm dependency.

As a frontend developer, implement the LoginFooterLinks section (LoginFooterLinks.css) for the Login page. The `lfl-section` container renders: a `lfl-social-row` with two anchor-based social login buttons — `lfl-btn-google` with a multi-path Google 'G' SVG logo (four colored paths: #4285F4, #34A853, #FBBC05, #EA4335) and `lfl-btn-facebook` with a Facebook 'f' SVG logo (#1877F2); a `lfl-divider-row` containing two `lfl-divider-line` hr elements flanking a `lfl-divider-text` span reading 'Don't have an account?'; and a `lfl-signup-link` anchor pointing to /Signup. This is a static section with no state or API calls. Social buttons currently link to /Login (placeholder) and should be noted for future OAuth integration.

As a frontend developer, implement the Footer section (Footer.css) for the Login page. This shared component may already exist from the Landing page. It renders a `ftr-footer` with a `ftr-content` grid containing: a `ftr-brand` column with `ftr-logo` text ('Aspen Vaction' with `ftr-logo-accent` span), a tagline paragraph, and four social icon links using `react-icons/fi` (`FiTwitter`, `FiInstagram`, `FiFacebook`, `FiYoutube`) each opening in `_blank` with `noopener noreferrer`; three link columns (`ftr-col`) — Explore (Home, Search, Destinations, Recommendations), Account (Login, Signup, Dashboard, Profile), and Services (Bookings, Itinerary, Users, Settings) — each with an `h4.ftr-col-title` and a mapped `ul.ftr-links`. Requires `react-icons` npm dependency. Verify the shared component renders correctly in the Login page context.

As a Backend Developer, implement service inquiry API endpoints using FastAPI: POST /api/services/flight-inquiry (submit flight booking inquiry with origin, destination, dates, passengers), POST /api/services/hotel-inquiry (submit hotel inquiry with location, dates, guests, preferences), POST /api/services/visa (submit visa service request with destination country, travel dates, passport info), POST /api/services/insurance (submit travel insurance request with trip details and coverage type), GET /api/services/inquiries (list user's service inquiries), GET /api/admin/services/inquiries (admin: list all inquiries with filters by type and status). Include Pydantic schemas, status tracking, and email notification stubs. These endpoints support the Booking page's flight, hotel, visa, and insurance inquiry forms.

As a Backend Developer, implement lead management API endpoints using FastAPI: POST /api/leads (create lead from inquiry or contact form), GET /api/admin/leads (list all leads with filters: status, source, date range, assigned agent), GET /api/admin/leads/{id} (lead detail), PUT /api/admin/leads/{id} (update lead status: new, contacted, qualified, converted, lost), POST /api/admin/leads/{id}/notes (add follow-up note), GET /api/admin/leads/stats (aggregate stats: total, by status, conversion rate). Define Lead ORM model with fields: id, user_id (nullable), name, email, phone, source (flight/hotel/visa/insurance/package/contact), message, status, assigned_to, created_at. Supports Admin Dashboard lead management flow.

As a Backend Developer, implement holiday and tour package API endpoints using FastAPI: GET /api/packages (list all packages with filters: type, destination, duration, price range), GET /api/packages/{id} (package detail with inclusions, itinerary, pricing), POST /api/admin/packages (admin create package), PUT /api/admin/packages/{id} (admin update package), DELETE /api/admin/packages/{id} (admin remove package), GET /api/packages/featured (featured/trending packages for landing/home page). Define Package ORM model: id, name, type (holiday/customized/cruise/villa), destination_id, duration_days, price, inclusions: JSON, itinerary_preview: JSON, images: JSON, is_featured, availability, created_at. Supports Search, Home, and Admin Dashboard pages.

As a Backend Developer, implement payment management API endpoints using FastAPI: POST /api/payments/initiate (initiate payment for a booking, returns payment gateway redirect URL), POST /api/payments/webhook (receive payment gateway webhook to confirm/fail transactions), GET /api/payments/{id} (payment status and receipt), GET /api/payments (list user's payment history), GET /api/admin/payments (admin: list all transactions with filters: status, date range, amount), GET /api/admin/payments/stats (revenue stats: total, by period, by service type). Define Payment ORM model: id, booking_id, user_id, amount, currency (INR), gateway_ref, status (pending/success/failed/refunded), method, created_at. Include third-party payment gateway integration stubs (Razorpay/PayU for India). Supports Admin Dashboard payment overview and Booking page.

As a Backend Developer, implement user profile management API endpoints using FastAPI: GET /api/profile (get authenticated user's profile), PUT /api/profile (update name, phone, avatar, preferences), PUT /api/profile/password (change password with current password verification), POST /api/profile/avatar (upload avatar image), GET /api/profile/trips (list user's trips combining bookings and itineraries for My Trips section), DELETE /api/profile (soft-delete user account). Include Pydantic schemas for request/response and file upload handling for avatar. Supports Profile page and My Trips section.

As a Backend Developer, implement platform settings API endpoints using FastAPI: GET /api/admin/settings (fetch all platform configuration settings), PUT /api/admin/settings/payment (update payment gateway config: keys, currency, active gateway), PUT /api/admin/settings/packages (update package display and availability settings), PUT /api/admin/settings/notifications (configure email/WhatsApp notification templates and triggers), GET /api/settings/whatsapp (return WhatsApp contact number and deep-link for the chat button). Define a Settings ORM model (key-value store) for admin-configurable values. Protect write endpoints with admin RBAC. Supports Admin Settings page.

As a Frontend Developer, implement all sections for the Signup page. Build the SignupForm component using useState for name, email, password, confirmPassword, showPassword, errors, touched, and isSubmitting. Include Three.js particle background (reusing LoginForm pattern with PARTICLE_COUNT=40). Add Lucide icons: User, Mail, Lock, Eye/EyeOff. Implement client-side validation for all fields including password strength indicator. On successful submission, POST to /api/auth/signup via the global API client, then redirect to /Login. Reuse the shared Navbar and Footer components from the Landing page. Apply Signup.css with the brand color theme.

As a Frontend Developer, implement all sections for the Home page (post-login landing). Build components: HomeHero (personalized welcome banner with user's name from auth state), FeaturedPackages (grid of featured holiday/tour packages fetched from GET /api/packages/featured), QuickActions (shortcut cards to Search, Bookings, Itinerary, Recommendations), RecentActivity (last booked or viewed destinations). Include the WhatsApp chat button (fixed bottom-right FAB) using the number from /api/settings/whatsapp. Use React Query for data fetching with skeleton loaders. Reuse shared Navbar and Footer. Apply Home.css with brand theme.

As a Frontend Developer, implement all sections for the Search page. Build: SearchFilterBar (destination type, region, price range, duration filters using useState), SearchResults (grid/list toggle of destination and package cards fetched from GET /api/destinations and GET /api/packages with filter params), SearchPagination, and DestinationCard/PackageCard components with hover animations using framer-motion. Wire all filter changes to debounced API calls via React Query. Include skeleton loaders and empty state. Each card links to /Destination/:id or /Booking. Apply Search.css with brand theme.

As a Frontend Developer, implement all sections for the Destination detail page. Build: DestinationHero (full-bleed image gallery with framer-motion), DestinationFacts (key facts: best time, price, rating, duration), DestinationPackages (available packages for this destination from GET /api/packages?destination_id=), DestinationActivities (activities/highlights list), DestinationBookingCTA (sticky CTA bar linking to /Booking). Fetch destination data from GET /api/destinations/:id using useParams and React Query. Include breadcrumb navigation. Apply Destination.css with brand theme.

As a Frontend Developer, implement all sections for the Booking page. Build: BookingTabs (Flight Inquiry, Hotel Inquiry, Visa Services, Travel Insurance as tab navigation), FlightInquiryForm (origin, destination, dates, passengers, class — POST to /api/services/flight-inquiry), HotelInquiryForm (location, check-in/out, guests, room type — POST to /api/services/hotel-inquiry), VisaServicesForm (destination country, travel dates, passport info — POST to /api/services/visa), TravelInsuranceForm (trip details, coverage type, traveler count — POST to /api/services/insurance), BookingConfirmation (success state with inquiry reference). Use React Hook Form with Yup validation. Integrate payment flow via POST /api/payments/initiate for paid bookings. Apply Booking.css.

As a Frontend Developer, implement all sections for the Bookings / My Trips page. Build: BookingsHeader (page title, summary stats), BookingsFilterBar (filter by status: upcoming, past, cancelled; and by type: package, flight, hotel, visa, insurance), BookingsList (cards for each trip fetched from GET /api/profile/trips with status badges, dates, destination image, type icon), BookingDetailModal (expanded view with full booking details and action buttons: view, cancel, download receipt), BookingsPagination. Use React Query with optimistic updates for cancellation. Include empty state with CTA to /Search. Apply Bookings.css with brand theme.

As a Frontend Developer, implement all sections for the Itinerary management page. Build: ItineraryList (cards of user's itineraries from GET /api/itineraries), ItineraryDetail (timeline view of selected itinerary with day-by-day activities, editable inline), ItineraryDayEditor (add/edit/remove activities per day with drag-to-reorder using @dnd-kit/core), ItineraryCreateModal (create new itinerary with title, destination, dates — POST /api/itineraries), ItineraryMap (static map panel showing destination pins per day, reuse LandingItineraryShowcase pattern). Wire all CRUD operations to itinerary API endpoints. Apply Itinerary.css.

As a Frontend Developer, implement all sections for the Recommendations page. Build: RecommendationsHero (personalized header with user name), PreferenceForm (interest tags: beach, mountains, culture, adventure, luxury; budget range slider; travel style — POST to /api/recommendations/preferences), RecommendationCards (AI-generated destination cards from GET /api/recommendations, each with AI badge, match score, destination image, description, and CTA to /Destination), TrendingSection (trending destinations from GET /api/recommendations/trending). Include loading skeleton with typewriter-style text for AI generation feel. Apply Recommendations.css.

As a Frontend Developer, implement all sections for the Profile page. Build: ProfileHeader (avatar with upload via POST /api/profile/avatar, name, email, member since), ProfileEditForm (name, phone, email fields — PUT /api/profile with React Hook Form), PasswordChangeForm (current password, new password, confirm — PUT /api/profile/password), PreferencesSection (travel preferences linked to recommendation engine — POST /api/recommendations/preferences), AccountActions (logout button, delete account with confirmation modal). Fetch profile from GET /api/profile on mount. Apply Profile.css with brand theme.

As a Frontend Developer, implement all sections for the Admin Dashboard page. Build: DashboardStatsRow (KPI cards: total users, active bookings, MTD revenue, pending leads — from GET /api/admin/dashboard/stats), BookingsChart (line/bar chart using recharts for bookings trend from GET /api/admin/dashboard/bookings-chart), RevenueChart (revenue trend), TopDestinations (ranked list from GET /api/admin/dashboard/top-destinations), RecentActivity (activity feed from GET /api/admin/dashboard/recent-activity), QuickLinks (nav cards to Users, Destinations, Bookings, Leads, Packages, Payments pages). Protect page with admin auth guard. Apply Dashboard.css.

As a Frontend Developer, implement all sections for the Admin Destinations page. Build: DestinationsPageHeader (title, 'Add Destination' CTA), DestinationsTable (table of all destinations with columns: image thumbnail, name, region, price range, availability toggle, actions — from GET /api/destinations), DestinationFormModal (create/edit destination form with image upload, name, region, description, facts, price range — POST/PUT /api/destinations), DestinationDeleteConfirm (confirmation modal for DELETE /api/destinations/:id), DestinationsFilterBar (search, region filter, availability filter). Use React Query with optimistic updates. Apply Destinations.css.

As a Frontend Developer, implement all sections for the Admin Settings page. Build: SettingsTabs (Payment Settings, Package Settings, Notification Settings, WhatsApp Config), PaymentSettingsForm (gateway selector, API key fields, currency config — PUT /api/admin/settings/payment), PackageSettingsForm (default display options, availability rules — PUT /api/admin/settings/packages), NotificationSettingsForm (email templates, WhatsApp trigger config — PUT /api/admin/settings/notifications), WhatsAppConfigForm (phone number, greeting message for the chat button). Use React Hook Form. Display save confirmation toasts. Apply Settings.css.

As a Tech Lead, verify the end-to-end integration between the LandingItineraryShowcase frontend section and the Itinerary backend API. Ensure the showcase section can optionally fetch a preview itinerary from GET /api/itineraries (for authenticated users) to personalize the Goa showcase with user data. Confirm the 'Create Itinerary' CTA navigates to /Itinerary and the authenticated user can immediately create a new itinerary. Validate fallback to static hardcoded data for unauthenticated users.

As a frontend developer, implement the UsersPageHeader section for the Users page. Build the `UsersPageHeader` component using the `uph-root` layout container with a `uph-title-block` containing an `<h1>` with class `uph-heading` ('Users') and a `<p>` with class `uph-subtext` describing platform user management. Include a `uph-cta` button with an inline SVG plus-icon (`uph-cta-icon`, two `<line>` elements forming a cross) and 'Add User' label, with `aria-label='Add a new user'`. Apply `UsersPageHeader.css` styles. Note: this is a static presentational section with no state hooks.

As a Backend Developer, implement admin dashboard summary API endpoints using FastAPI: GET /api/admin/dashboard/stats (aggregate KPIs: total users, active bookings, revenue MTD, pending leads, conversion rate), GET /api/admin/dashboard/bookings-chart (bookings per day/week/month for chart), GET /api/admin/dashboard/revenue-chart (revenue trend data), GET /api/admin/dashboard/top-destinations (top 5 destinations by booking count), GET /api/admin/dashboard/recent-activity (last 10 bookings, signups, or inquiries). Protect all endpoints with admin RBAC middleware. Supports Admin Dashboard page overview and analytics widgets.

As a Tech Lead, verify the end-to-end integration between the Signup page frontend and the Auth backend API. Ensure the SignupForm correctly POSTs to POST /api/auth/signup, validates server-side errors (e.g. email already exists), handles 422 validation responses gracefully, and redirects to /Login on success. Verify the newly created user can then log in via POST /api/auth/login and receive a valid JWT. Confirm token is stored in localStorage and attached to subsequent API requests via Axios interceptor.

As a Tech Lead, verify the end-to-end integration between the Login page frontend and the Auth backend API. Ensure the LoginForm POSTs credentials to POST /api/auth/login, handles JWT storage in localStorage, populates global auth state via useAuth hook, and redirects authenticated users to /Home. Verify the Navbar reflects authenticated state (show logout, hide Login/Signup). Confirm 401 errors show inline form validation feedback. Test token refresh flow via POST /api/auth/refresh when access token expires.

As a Tech Lead, verify the end-to-end integration between the Search page frontend and the Destinations and Packages backend APIs. Ensure filter params from SearchFilterBar correctly map to GET /api/destinations and GET /api/packages query parameters, paginated results render correctly, and clicking a result navigates to /Destination/:id or /Booking. Confirm debounced search, loading states, and empty states work with live API data.

As a Tech Lead, verify the end-to-end integration between the Destination detail page frontend and the Destinations backend API. Ensure GET /api/destinations/:id returns all required fields (name, region, images, facts, description, availability) and populates all page sections correctly. Confirm the packages section loads from GET /api/packages?destination_id= and the Book CTA navigates to /Booking with the correct package pre-selected.

As a Tech Lead, verify the end-to-end integration between the Booking page frontend and the Services and Payments backend APIs. Ensure each inquiry form (flight, hotel, visa, insurance) POSTs correctly to its respective endpoint, server validation errors surface in the UI, and confirmation states render with inquiry reference numbers. Verify payment initiation flow works for package bookings: POST /api/payments/initiate returns gateway redirect URL and the frontend redirects correctly. Confirm webhook receipt updates booking status.

As a Tech Lead, verify the end-to-end integration between the Bookings (My Trips) page frontend and the Profile and Bookings backend APIs. Ensure GET /api/profile/trips returns combined booking and itinerary data that populates trip cards correctly with status badges, dates, and destination images. Confirm booking cancellation (DELETE /api/bookings/:id) triggers optimistic UI update and shows success/error toast. Verify filter and pagination work with live API data.

As a Tech Lead, verify the end-to-end integration between the Itinerary page frontend and the Itinerary backend API. Ensure GET /api/itineraries populates itinerary list, POST /api/itineraries creates a new itinerary and updates the list optimistically, PUT /api/itineraries/:id/days/:day_id saves day edits correctly, and DELETE /api/itineraries/:id removes the entry with confirmation. Confirm drag-to-reorder activity changes persist via PUT calls. Verify the itinerary map panel displays pins matching the selected itinerary's destination.

As a Tech Lead, verify the end-to-end integration between the Recommendations page frontend and the Recommendations backend API and LiteLLM AI service. Ensure POST /api/recommendations/preferences saves user preferences and triggers a fresh GET /api/recommendations call returning GPT-generated destination suggestions. Verify recommendation cards populate with real AI-generated content, the AI badge and match score display correctly, and the loading skeleton shows during LLM response generation. Confirm trending destinations on GET /api/recommendations/trending load correctly.

As a Tech Lead, verify the end-to-end integration between the Profile page frontend and the Profile backend API. Ensure GET /api/profile populates all profile fields on load, PUT /api/profile updates persist with success/error feedback, avatar upload via POST /api/profile/avatar updates the avatar immediately via optimistic UI, and PUT /api/profile/password correctly validates current password and shows error on mismatch. Confirm account deletion triggers logout and redirect to /Landing.

As a Tech Lead, verify the end-to-end integration between the Admin Destinations page frontend and the Destinations backend API. Ensure the destinations table loads from GET /api/destinations, create/edit form POSTs and PUTs correctly with image upload, availability toggle calls PUT /api/destinations/:id, and delete confirmation calls DELETE /api/destinations/:id. Confirm admin RBAC guard is enforced. Verify changes are reflected in the user-facing Search and Destination detail pages.

As a Tech Lead, verify the end-to-end integration between the Admin Dashboard leads section and the Leads backend API. Ensure GET /api/admin/leads populates the leads list with correct filter and sort support, PUT /api/admin/leads/:id updates lead status and reflects in UI, POST /api/admin/leads/:id/notes persists follow-up notes, and aggregate stats from GET /api/admin/leads/stats display correctly in the dashboard widget. Confirm new leads created from service inquiry forms appear in the admin leads list.

As a Tech Lead, verify the end-to-end integration between the Admin Dashboard payment overview and the Payments backend API. Ensure GET /api/admin/payments populates the transactions list, GET /api/admin/payments/stats renders revenue charts correctly, and the payment gateway webhook (POST /api/payments/webhook) correctly updates booking status and reflects in the admin view. Verify payment settings from the Settings page take effect in the payment flow.

As a Tech Lead, verify the end-to-end integration between the Home page frontend and the Packages and Settings backend APIs. Ensure featured packages from GET /api/packages/featured render correctly in the FeaturedPackages grid, the WhatsApp FAB loads the correct phone number from GET /api/settings/whatsapp and generates a valid wa.me deep link, and the page correctly reads authenticated user state from global auth context to show a personalized welcome.

As a Tech Lead, verify the end-to-end integration between the Admin Settings page frontend and the Platform Settings backend API. Ensure GET /api/admin/settings populates all form fields on load, each settings form section PUTs to its specific endpoint, save confirmations show correct toast notifications, and settings changes (e.g. payment gateway keys) take effect in the live booking and payment flows without requiring a server restart.

As a frontend developer, implement the UsersFilterBar section for the Users page. Build the `UsersFilterBar` component using `useState` for `searchQuery`, `statusFilter`, `roleFilter`, and `sortBy`, and `useMemo` to derive `hasActiveFilters`. Render a `ufb-search-wrap` with an SVG search icon and a controlled `ufb-search-input` text field (`placeholder='Search by name or email...'`, `aria-label='Search users'`). Render a `ufb-filter-group` for Status using `STATUS_OPTIONS` (All/128, Active/94, Inactive/34) as `ufb-pill` buttons with `ufb-pill--active` on the selected value and `aria-pressed` attribute. Render a second `ufb-filter-group` for Role using `ROLE_OPTIONS` (All/128, User/112, Admin/16) as pills. Include a sort `<select>` with `SORT_OPTIONS` (Newest First, Oldest First, Name A–Z, Name Z–A, Last Active). Conditionally render a Reset button when `hasActiveFilters` is true, wired to `handleReset`. Apply `UsersFilterBar.css`.

As a frontend developer, implement the UsersTable section for the Users page. Build the `UsersTable` component using `useState` for row selection or expanded state. Render a table over a hardcoded `USERS` array of 8 records (id, name, email, phone, role, status, lastLogin). Include helper functions: `initials(name)` to generate two-letter avatar initials and `formatDate(iso)` using `toLocaleDateString('en-IN', ...)` for formatted timestamps. Render inline SVG icon components `IconEye` (eye SVG with `ut-action-icon` class) and `IconXCircle` (circle-X SVG) as row action buttons, plus `IconUsers` (people SVG with `ut-empty-icon` class) for the empty state. Display user avatar initials, name, email, phone, role badge, status badge (Active/Inactive), and last login formatted date per row. Apply `UsersTable.css`.

As a frontend developer, implement the UsersPagination section for the Users page. Build the `UsersPagination` component using `useState` for `currentPage` (default 1) and `perPage` (default 10). Derive `totalPages = Math.ceil(248 / perPage)`, `startItem`, and `endItem` for the results count label. Implement `generatePageNumbers(currentPage, totalPages)` which returns a smart page array with `'ellipsis'` sentinels for large page counts (≤7 pages renders all; otherwise renders page 1, conditional ellipsis, window around current, conditional ellipsis, last page). Render a `up-results-count` span with bold start/end/total. Render a `up-per-page-wrap` with a labeled `<select id='up-per-page'>` bound to `perPage` with `PAGE_SIZE_OPTIONS` [10, 25, 50, 100]. Render a `<nav aria-label='Pagination'>` with `<ul class='up-nav'>` containing previous/next SVG-icon buttons (disabled states wired) and numbered page buttons that render ellipsis elements for `'ellipsis'` entries. Wire `handlePageChange`, `handlePrev`, `handleNext`, and `handlePerPageChange` with page-clamping logic. Apply `UsersPagination.css`.

As a Tech Lead, verify the end-to-end integration between the Admin Dashboard page frontend and the Admin Dashboard backend API. Ensure KPI cards render live data from GET /api/admin/dashboard/stats, charts display correctly from bookings-chart and revenue-chart endpoints, top destinations list populates, and recent activity feed updates. Confirm admin RBAC guard blocks non-admin users from accessing /Dashboard and redirects to /Home.

As a Tech Lead, verify the end-to-end integration between the Admin Users page frontend (UsersTable, UsersFilterBar, UsersPagination) and the Admin Users backend API. Ensure GET /api/admin/users populates the table with live data, search and filter params map correctly to API query params, pagination works, deactivate/activate actions call POST /api/admin/users/:id/deactivate and activate endpoints, and the Add User CTA is wired to POST. Verify optimistic UI updates on status change.