regal-itineraries

As a frontend developer, implement the LandingHero section for the Landing page. Build `LandingHero` with `useRef` for `sectionRef` and `useState` for `primaryBurst`/`secondaryBurst` particle arrays. Use `useScroll` and `useTransform` from framer-motion to derive scroll-driven values: `blobScaleNear` (1→1.9), `blobScaleFar` (1→1.45), `blobFade` (0.7→0), `ringScale` (1→1.6), `ringFade` (1→0), `contentFade` (1→0), `contentLift` (0→-60px) all keyed to `scrollYProgress`. Render animated decorative blobs and rings as `motion.div` elements. Implement the `HeadlineWord` sub-component that splits word text into individual `motion.span` characters using `charVariant` (spring: damping 16, stiffness 220) and `charContainer` (staggerChildren 0.028, delayChildren 0.15). Render the three `headlineWords` array entries with accent styling on 'AI Travel'. Implement `makeParticles()` to generate 10 burst particles with angle/distance/color from `burstColors` array. Wire `fireBurst` to CTA button mouse events. Render `trustStats` (120+ Destinations, 5-Day Smart Plans, 24/7 TravelMate AI). Include `Sparkles`, `ArrowRight`, `Play` lucide icons. Apply `LandingHero.css` styles.

As a frontend developer, implement the GlobeExplorer section for the Landing page. This is a complex 3D section using `@react-three/fiber` Canvas, `@react-three/drei` (OrbitControls, Stars, Html), and `three.js`. Build destination pins on a 3D sphere using lat/lon to XYZ conversion for the 5 DESTINATIONS (Kyoto, Santorini, Marrakech, and others). Use `useFrame` for globe rotation animation and `useThree` for camera access. Wrap 3D content in `<Suspense>` for lazy loading. Implement `useState` for selected destination tracking and `useEffect` for initialization. Render an `AnimatePresence`-wrapped detail panel using framer-motion that shows destination fields: `name`, `region`, `days`, `budget`, `best`, `desc`, `tips` array, and `itinerary` array with day/text entries. Include lucide icons: `Compass`, `Plane`, `X`, `MapPin`, `CalendarDays`, `Wallet`, `Sparkles`, `Lightbulb`, `Route`. Apply `GlobeExplorer.css` and `THREE` materials for the globe mesh.

As a frontend developer, implement the TravelMateIntro section for the Landing page. Build `TravelMateIntro` with `useRef` for `sectionRef`, `useInView` (once: true, amount: 0.3) for scroll-triggered animations, and `useState` for `hovering`. Implement the `TypewriterLine` sub-component that splits text into individual `motion.span` chars using `charVariants` (opacity 0→1, y 8→0, duration 0.18) with staggerChildren 0.03 and configurable `delayStart`. Render two typewriter lines for `headlineLead` ('Meet ') and `headlineAccent` ('TravelMate AI'). Add a decorative `tmi-decor` layer with `tmi-blob-1` and `tmi-blob-2`, and a `tmi-midground` layer with `tmi-ring-1`, `tmi-ring-2`, `tmi-dot-1/2/3` using CSS variable-based parallax (`--scroll`). Build the avatar column with a `motion.div` (scale 0.8→1 on inView, ease [0.22,1,0.36,1]) containing an inline SVG AI avatar with `tmi-avatar-glow` halo. Render the three `capabilities` cards (Smart Recommendations/Compass, Itinerary Creation/MapPinned, Budget Planning/Wallet). Include `Bot`, `MessageCircle`, `ArrowRight` icons. Apply `TravelMateIntro.css`.

As a frontend developer, implement the UserPersonas section for the Landing page. Build the `PersonaCard` sub-component using `useRef` and framer-motion's `useMotionValue`, `useSpring` (stiffness 220, damping 18, mass 0.4), and `useMotionTemplate` to create a magnetic tilt effect. On `handleMove`, compute relative cursor position within the card and drive `mx`/`my` motion values (±8px range) and gradient origin `gx`/`gy` CSS variables (`--gx`, `--gy`). On `handleLeave`, spring all values back to 0/50%. The transform is applied via `useMotionTemplate` as `translate(${springX}px, ${springY}px)`. Render four persona cards from the `personas` array: The Traveler (Compass), Budget Traveler (PiggyBank), Food Enthusiast (UtensilsCrossed), Adventure Seeker (Mountain). Each card shows `badge`, `Icon`, `name`, `desc`, and `useCase` fields. Include `ArrowRight` icon for card CTAs. Apply card glow via `.up-card-glow`. Use `initial="rest"`, `whileHover="hover"`, `animate="rest"` on each card. Apply `UserPersonas.css`.

As a frontend developer, implement the CoreFeatures section for the Landing page. Build `CoreFeatures` with `useRef` for `gridRef` and `useInView` (once: true, amount: 0.15) to trigger entrance animations. Implement `containerVariants` (staggerChildren 0.1, delayChildren 0.05) and `cardVariants` (opacity 0→1, y 24→0, duration 0.55, ease [0.22,1,0.36,1]). Render the 7-item `features` array as `FeatureCard` components inside a `motion.div` grid: Personalized Itineraries (Route/Itinerary), Destination Recommendations (Compass/Destination), Budget Planning (Wallet/Budget), Hotel & Activity Suggestions (BedDouble/Hotels), Packing Checklist (ClipboardCheck/Packing), Food Recommendations (UtensilsCrossed/Restaurants), Travel Blogs (BookOpen/Blogs). Each `FeatureCard` renders the lucide icon in `.cf-icon` (adds `cf-icon-active` class when `inView`), title, desc, and a Learn More anchor with `ArrowRight`. Add decorative `cf-blob cf-blob-1` with CSS transform. Apply `CoreFeatures.css`.

As a frontend developer, implement the JourneyShowcase section for the Landing page. Register `gsap` and `ScrollTrigger` plugin at module level. Build `JourneyShowcase` with `useEffect`, `useRef`, and `useState` for active step tracking. Use GSAP ScrollTrigger to pin the section and scrub through the 7 `steps` array as the user scrolls — each step has `id`, `tag`, `title`, `desc`, `cta`, `href`, `Icon`, and `img` (Unsplash URLs). Steps cover: explore (Globe2/Destination), chat (MessagesSquare/Chat), itinerary (Map/Itinerary), budget (Wallet/Budget), hotels (BedDouble/Hotels), pack (Luggage/Packing), blogs (BookOpen/Blogs). Use framer-motion `motion` for panel entrance animations. Render a sticky left panel showing the active step's image and a scrollable right column of step cards with `Sparkles` and `ArrowRight` icons. Each step card highlights on activation. Apply `JourneyShowcase.css`.

As a frontend developer, implement the CallToAction section for the Landing page. Build `CallToAction` with `useRef` for `rootRef` and `zoneRef`, `useState` for `magnet` ({x,y}), `bursts` array, and `active` boolean. Use `IntersectionObserver` (threshold 0.35) inside `useEffect` to set `active` true when section enters viewport, toggling the `cta-active` class. Implement `handleZoneMove` with `useCallback` to compute cursor offset from button center and apply a magnetic drift via `setMagnet({ x: dx * 0.35, y: dy * 0.4 })`. On `handleZoneLeave`, reset magnet to {x:0,y:0}. Implement `handleClick` with `useCallback` to generate 14 burst particles (PARTICLE_COUNT) at evenly spaced angles with `dist = 70 + random*60`, push to `bursts` state, then clear after 650ms timeout. Animate the CTA button with framer-motion `AnimatePresence` for burst particle overlays. Render `supportItems` row: CreditCard ('No credit card required'), Sparkles ('Free 14-day trial'), ShieldCheck ('Cancel anytime'). Add decorative parallax blobs and rings. Apply `CallToAction.css`.

As a frontend developer, implement the Footer section for the Landing page. Build `Footer` with `useState` for `email` string and `subscribed` boolean. Implement `handleSubmit` that prevents default, checks `email.trim()`, sets `subscribed` true, and clears the email field. Render two decorative glow divs (`ftr-glow`, `ftr-glow-2`). Build the brand column with `Globe2` icon in `.ftr-logo-mark`, tagline text, and a newsletter form (`ftr-news-form`) with a controlled email input and Subscribe button using `Send` icon; show `.ftr-news-success` paragraph when `subscribed` is true. Map the three `linkColumns` (Destinations, Travel Tips, Company) each with their `links` arrays as anchor lists. Render four social icon links from `socials` array (Instagram, Twitter, Facebook, Youtube lucide icons). Display dynamic copyright year via `new Date().getFullYear()`. Note: this component is shared across pages and may already exist from a prior page task. Apply `Footer.css`.

As a frontend developer, implement the ChatHeader section for the Chat page. This section renders a `<header className='cht-root'>` with three layers: (1) a decorative glow layer with three `.cht-glow-orb` spans for ambient background lighting; (2) a `@react-three/fiber` Canvas with `camera={{ position: [0, 0.6, 5.5], fov: 48 }}` and `dpr={[1, 2]}` containing 18 procedurally generated `Float`-wrapped spheres (positions computed via trigonometry using `useMemo`, each with `meshStandardMaterial` using HSL color derived from hue offset, roughness 0.35, metalness 0.15, opacity 0.55) plus a wireframe icosahedron backdrop mesh; (3) a content overlay with `.cht-icon-badge` using the `Bot` icon from lucide-react, an 'TravelMate AI' subtitle, an `<h1>` heading with italic span styling, and staggered reveal animations via CSS classes `.cht-reveal .cht-reveal-delay-1/2/3`. Uses `useRef` for canvas parent and `useMemo` for sphere data. Install `@react-three/fiber` and `@react-three/drei` if not already present. Note: Navbar component may already exist from the Landing page tasks.

As a Backend Developer, implement the AI chat API endpoint (/api/chat) using FastAPI, LiteLLM for LLM routing, and LangChain for conversational chain management. Integrate GPT 5.4 for generating travel recommendations, itinerary suggestions, destination picks, restaurant suggestions, and travel tips. Support multi-turn conversation context. Handle the user scenario: 'I want a 5-day budget trip from Ahmedabad' — return structured JSON with destination, day-wise itinerary, estimated budget, places, restaurants, and travel tips. Implement streaming responses where possible.

As a Backend Developer, implement REST API endpoints for itinerary management using FastAPI: POST /api/itineraries (create), GET /api/itineraries/{id} (retrieve), PUT /api/itineraries/{id} (update), DELETE /api/itineraries/{id} (delete), GET /api/itineraries (list user itineraries). Each itinerary includes destination, start/end dates, day-wise plan, activities, hotels, restaurants, and estimated budget. Support AI-generated itinerary saving from the chat flow. Frontend section tasks for ItineraryHero, ItineraryActivities, ItineraryHotels, ItineraryRestaurants, ItineraryTravelTips depend on this API.

As a Backend Developer, implement destinations API endpoints: GET /api/destinations (list with filters: season, budget, activity, difficulty), GET /api/destinations/{id} (detail with weather, visa, activities, hotels, restaurants, reviews), GET /api/destinations/search?q= (search). Return structured data including name, region, images, ratings, reviews, best season, visa requirements, budget range, and coordinates for map rendering. Frontend DestinationHero, DestinationDetails, DestinationCards, DestinationMap, RelatedDestinations sections depend on this API.

As a Backend Developer, implement hotel API endpoints: GET /api/hotels (list with filters: type, stars, amenities, price range, sort), GET /api/hotels/{id} (detail with images, amenities, reviews, pricing), GET /api/hotels/compare?ids= (comparison data for up to 5 hotels). Return hotel data including name, location, price per night, star rating, amenities, distance to attraction, cancellation policy, and user reviews. Frontend HotelsHero, HotelsGrid, HotelsFilters, HotelsReviews, HotelsComparison sections depend on this API.

As a Backend Developer, implement activities API endpoints: GET /api/activities (list with filters: location, duration, difficulty, price range, rating, type), GET /api/activities/{id} (detail with full description, highlights, pricing, group size), GET /api/activities/categories (list of activity categories with counts). Return activity data including name, location, rating, price, duration, difficulty, description, and images. Frontend ActivitiesGrid, ActivitiesFilters, ActivitiesBrowse, ActivitiesHighlights, ActivitiesCategories sections depend on this API.

As a Backend Developer, implement restaurants API endpoints: GET /api/restaurants (list with filters: cuisine, price range, rating, city, sort), GET /api/restaurants/{id} (detail with images, menu highlights, contact, hours, reviews). Return restaurant data including name, cuisine, star rating, price level, location, phone, website, hours, and user reviews. Frontend RestaurantsHero, RestaurantsGrid, RestaurantsFilter, RestaurantsDetail sections depend on this API.

As a Backend Developer, implement travel blogs API endpoints: GET /api/blogs (paginated list with filters: category, search; TOTAL=24, PAGE_SIZE=6), GET /api/blogs/{id} (full blog post detail), GET /api/blogs/featured (featured blog post). Return blog data including title, excerpt, category, author, publish date, read time, and image URL. Support category filtering: Destination Guides, Food & Cuisine, Adventure Tips, Budget Travel, Travel Stories. Frontend BlogsHero, BlogGrid, FeaturedBlog, BlogsFilter, BlogsPagination sections depend on this API.

As a Backend Developer, scaffold the FastAPI backend project structure with: app/main.py (FastAPI app with CORS, middleware), app/api/ (router modules per resource), app/models/ (SQLAlchemy models), app/schemas/ (Pydantic request/response schemas), app/services/ (business logic layer), app/core/ (config, security, database session), alembic/ (migrations). Configure environment variables (DATABASE_URL, OPENAI_API_KEY, JWT_SECRET, LITELLM config). Set up uvicorn for local dev and gunicorn for production. Include health check endpoint GET /api/health. This is a prerequisite for all backend API endpoint tasks.

As a frontend developer, implement the ChatContainer section for the Chat page. This section manages the full chat conversation UI using `useState` (messages array seeded with 8 `initialMessages`), `useRef` (scroll container), and `useEffect` (auto-scroll to latest message). Renders a list of message bubbles differentiated by `role: 'assistant' | 'user'`, with support for `hasDestCard` — when true, renders a destination card component displaying `destCard.name`, `destCard.detail`, `destCard.rating` (with `Star` icon from lucide-react), and an empty image placeholder. Assistant messages support markdown-style bold via `**text**` parsing. Includes a row of `suggestionChips` (5 preset prompts: 'Plan a 5-day budget trip from Mumbai', 'Best restaurants in Paris', etc.) rendered as clickable chips that prepopulate the chat. Uses `Sparkles` and `MapPin` icons from lucide-react. Messages include formatted timestamps. The component must handle scroll anchoring as new messages arrive.

As a frontend developer, implement the ChatInput section for the Chat page. This section renders a `<section className='ci-root'>` containing: (1) a horizontal row of 5 quick-suggestion pills (`quickSuggestions` array with ids: budget, adventure, destinations, food, packing) each with a lucide-react icon (`Wallet`, `Compass`, `MapPin`, `UtensilsCrossed`, `Plane`) — clicking a pill calls `handlePillClick` which sets the textarea message and re-focuses; hover triggers `setPillHovered` to apply `rotate(-8deg) scale(1.1)` CSS transform on the pill icon; (2) a `<textarea ref={textareaRef}>` with `autoResize` callback (using `el.scrollHeight`, capped at 120px height) triggered via `useEffect` on message change; supports `Enter` to send (Shift+Enter for newline) via `handleKeyDown`; (3) a character counter showing `charCount / MAX_CHARS (500)` with conditional styling when `isNearLimit` (>85%) or `isOverLimit`; (4) a send `<button>` using the `Send` icon, disabled when `!canSend`, with `isSending` state toggling a simulated 800ms send delay and resetting message. Uses `useState`, `useRef`, `useEffect`, `useCallback` for full optimization.

As a frontend developer, implement the DestinationHero section for the Destination page. This section uses framer-motion's useScroll and useTransform hooks with a containerRef to drive three parallax layers: (1) a dh-blob-layer with three atmospheric blobs (dh-blob-1/2/3) translated via a CSS --scroll custom property at speed 0.4, (2) a dh-bg-layer containing a motion.img sourced from Unsplash scaled from 1 to 1.4 via imageScale transform, and (3) a dh-content-wrapper whose opacity fades from 1 to 0 and y shifts from 0 to -80px as the user scrolls. The overlay panel contains a dh-eyebrow label, an h1 title with a dh-title-accent span for 'Regal-Itineraries', a dh-tagline paragraph, and a dh-cta-group with a primary CTA linking to /Itinerary (with an inline arrow SVG) and a secondary CTA linking to /Destination. A dh-scroll-indicator with an animated dh-scroll-dot is rendered below the content. Styles are imported from DestinationHero.css.

As a frontend developer, implement the ItineraryHero section for the Itinerary page. This section renders a full-screen hero with a multi-layer parallax background using CSS custom property `--scroll` to drive translateY transforms at 0.3x and 0.5x speeds. The foreground content uses framer-motion with staggered letter-by-letter heading animation (`headingLetter` variants with rotateX: -60 → 0 and stagger 0.04s), a pre-title fade-up, subheading slide-up delayed to 1.0s, a spring-animated pill badge, and three stat items (₹18,500 Total Cost, 5 Days, 8 Activities) with staggered custom-delay entrance using DollarSign, CalendarDays, MapPin icons from lucide-react. Includes `downloadHovered` and `shareHovered` useState hooks driving Download and Share2 icon button hover states. Uses AnimatePresence wrapping the title block. Decorative midground orbs (ih-mg-orb-1/2/3) are positioned absolutely. CSS covers 5866 chars of parallax layer, orb, and typography styles.

As a Backend Developer, implement budget planning API endpoints: POST /api/budget/estimate (generate AI budget estimate for a trip), GET /api/budget/currency-rates (fetch live exchange rates for USD/EUR/GBP/INR/JPY), GET /api/budget/breakdown/{itinerary_id} (return category breakdown: accommodation, activities, food, transport, miscellaneous). Integrate with a currency exchange rate provider. Frontend BudgetForm, BudgetBreakdown sections depend on this API. Note currency exchange rate integration as per SRD Assumptions.

As a Backend Developer, implement packing checklist API endpoints: POST /api/packing/generate (AI-powered checklist generation based on trip type, destination, climate, duration, activities; returns categorized items: Essentials, Clothing, Toiletries, Electronics, Documents), GET /api/packing/{checklist_id} (retrieve saved checklist), PUT /api/packing/{checklist_id} (update item checked state). Use LiteLLM/LangChain to generate personalized checklists. Frontend ChecklistGenerator depends on this API for checklist generation, and ChecklistResult depends on it for displaying and persisting state.

As a frontend developer, implement the DestinationMap section for the Destination page. This section renders an SVG-based interactive map of Paris using a custom latLngToPoint projection function that maps lat/lng coordinates (MAP_LAT_RANGE [48.78–48.92], MAP_LNG_RANGE [2.1–2.4]) onto a 1000×700 SVG viewBox. It renders 10 DESTINATION_PINS (Eiffel Tower, Louvre, Notre-Dame, Seine Cruise, Montmartre, Versailles, two dining spots, two hotels) as clickable SVG pin elements categorized into four types (landmark, activity, dining, hotel) with distinct colors defined in LEGEND_CATEGORIES. State is managed via useState and useCallback/useRef/useMemo hooks. AnimatePresence from framer-motion is used to animate a detail popover panel when a pin is selected, showing pin name, description, visitor count, and rating. A legend bar renders category chips with color swatches. The active pin state drives popover position calculation relative to the SVG. Styles imported from DestinationMap.css.

As a frontend developer, implement the FilterBar section for the Destination page. The component manages activeFilters (object keyed by group ID mapping to string arrays), activeSort (string defaulting to 'popular'), and mobileOpen (boolean) via useState. Four filterGroups are defined (season, budget, activity, difficulty) each with a Lucide icon (Sun, Wallet, TreePine, Gauge) and an options array. Three sortOptions use TrendingUp, Star, Clock icons. The toggleFilter function adds/removes options from the activeFilters map and clears empty groups. clearAll resets all filters. totalActiveFilters is computed as a flat count across all groups. Filter chips animate in with framer-motion custom stagger (chipVariants with 0.07s delay per index). Active filter group headers show an animated underline via underlineVariants (scaleX 0→1). A mobile collapse panel uses collapseVariants (height: 0→auto) controlled by mobileOpen, toggled by a SlidersHorizontal button with badge count. Active filter chips render with an X icon (lucide-react) for individual removal. A 'Clear All' button appears when totalActiveFilters > 0. Styles imported from FilterBar.css.

As a frontend developer, implement the DestinationDetails section for the Destination page. This section uses framer-motion's useScroll and useTransform for scroll-driven reveal animations. The overview text is split into an overviewWords array of 74 individual words, each animated via wordVariants (opacity 0→1, y 6→0) in a containerVariants staggerChildren (0.05s delay) container triggered by whileInView. Four infoBoxes render detail cards for Weather, Best Season, Visa Requirements, and Budget Range — each with a Lucide icon (CloudSun, Calendar, FileText, Wallet), label, value, and optional badge elements (type: 'season' or 'budget'). A quickStats row displays four stat pills (Country: GR, Currency: EUR, Language: Greek, Population: 15.5k) using Globe, Banknote, Languages, MapPin icons. An activities list of 6 items animates in with fadeInUp variants. An ArrowRight icon links to the itinerary planner. Thermometer and Gauge icons are also imported. Styles imported from DestinationDetails.css.

As a frontend developer, implement the ReviewsAndRatings section for the Destination page. The component manages state for the active review index, expanded review (for truncated full-text toggle), and carousel drag offset via useState, useRef, useEffect, and useCallback. Four reviews are defined with id, name, initials, location, rating (4–5), date, excerpt, and full text fields. The summaryStats object shows averageRating 4.8, totalReviews 327, and recommendPercent 96 displayed in a prominent stats header. A reusable StarRating sub-component accepts rating, size, className, and dimClass props and renders filled/dimmed stars. AnimatePresence from framer-motion animates card transitions with ChevronLeft and ChevronRight navigation buttons (lucide-react). Each review card shows an avatar with initials, reviewer name, location, date, star rating, and excerpt/full text toggle. The carousel supports both button navigation and drag/swipe gestures via useRef tracking. Styles imported from ReviewsAndRatings.css.

As a frontend developer, implement the RelatedDestinations section for the Destination page. The section renders 6 destination cards (Dubai, Paris, Bali, Tokyo, Santorini, Cusco/Machu Picchu) each linking to /Destination?place=<id>. A reusable CardImage sub-component uses a per-card useRef with framer-motion's useScroll and useTransform to apply a vertical parallax translateY between -8% and 8% on the inner motion.img as the card scrolls through the viewport (offset: ['start end', 'end start']). Each DestinationCard uses its own useRef, useState(visible), and a useEffect-powered IntersectionObserver to trigger entrance animation. Cards display an rd-card-img-wrap with rd-card-img-overlay gradient, destination title, description, and a ChevronRight icon. A section footer includes an ArrowRight icon link to browse all destinations. Styles imported from RelatedDestinations.css.

As a frontend developer, implement the BookingCTA section for the Destination page. The component uses useState for burstTrigger (particle burst counter) and rippleKey (ripple animation key), plus useRef for buttonZoneRef and sectionRef. Mouse parallax is implemented via useMotionValue (mouseX, mouseY) piped through useSpring (stiffness 140, damping 17) then split into four derived useTransform values (springPlanX/Y at 0.08x, springChatX/Y at 0.12x) that independently offset two CTA buttons on hover. handleMouseMove calculates offset from the buttonZoneRef center; handleMouseLeave resets to 0. handleClick triggers both setRippleKey and setBurstTrigger increments. Scroll-driven background intensity uses useScroll on sectionRef with a bgOpacity transform ([0,0.3,0.7,1] → [0.75,1,0.85,0.7]) applied to a motion.div bc-bg layer. A useEffect reads the page-level CSS --scroll custom property via requestAnimationFrame loop for a parallax bc-parallax-bg layer with two bc-orb elements at 0.18x speed. A particle burst system renders 14 particles (bc-orb-1/2/3 styled) with colors cycling through #2A3D66, #E07A5F, #F4A261, sizes 5–12px, angles spread across 360°, distances 80–170px, triggered by AnimatePresence keyed to burstTrigger. MapPin, MessageCircle, Star icons from lucide-react decorate the CTA text and trust badges. Styles imported from BookingCTA.css.

As a frontend developer, implement the ItineraryActivities section for the Itinerary page. This section renders a filterable grid of 6 activity cards (Guided City Walking Tour, Sunset Sailing Experience, Mountain Trail Hike, etc.) from a local ACTIVITIES array. Each card displays an Unsplash image, difficulty badge, duration (Clock icon), cost (DollarSign icon), group size (Users icon), star rating, review count, and a short description. Cards use framer-motion entrance animations. Clicking a card opens a modal/drawer with `fullDesc`, highlights list, and action buttons. State includes `useState` for selected activity and filter category. Filter tabs use category values ('tours', 'water', etc.) from the ACTIVITIES data. Icons imported from lucide-react: Clock, DollarSign, Star, Users, MapPin, TrendingUp, Shield, ArrowRight, X, Plus. CSS spans 10349 chars covering card layout, modal overlay, difficulty badge color variants, and responsive grid.

As a frontend developer, implement the ItineraryHotels section for the Itinerary page. This section renders 4 hotel cards (The Grand Palace Hotel, Seaside Boutique Resort, Mountain View Lodge, Urban Heritage Suites) from a local `hotels` array. Each card shows an Unsplash image, star rating rendered via an inline SVG star path, numeric rating badge, price-per-night, distance from landmark, primary amenity chips mapped through `hotelAmenityIcons` (Wifi, UtensilsCrossed, Coffee, Waves, Sparkles, Car, Wind, Tv, Dumbbell, ShieldCheck from lucide-react), and a collapsed extra-amenities list. Clicking a card opens an AnimatePresence-driven detail panel/modal with full review quote, reviewAuthor, an ArrowRight CTA, and an ExternalLink button. Uses `useState` and `useRef` for selected hotel state and scroll position. `useScroll` and `useTransform` from framer-motion drive a parallax effect on the section background. CSS is 11814 chars covering card grid, amenity chip layout, modal styles, and star/rating badge variants.

As a frontend developer, implement the ItineraryRestaurants section for the Itinerary page. This section renders a filterable restaurant grid from a local `restaurants` array of 6 entries (Agashiye, Swati Snacks, Vishalla, Sankalp, Mirch Masala, City Corner) each with Unsplash image, cuisine type, cost range, highlight dish, star rating rendered via an inline `StarIcon` SVG component, and location rendered via an inline `MapPinIcon` SVG component. Filter tabs use `cuisineFilters` array with values 'all', 'Gujarati', 'Street Food', 'South Indian', 'North Indian' driven by `useState`. Filtered cards animate in/out using AnimatePresence with `cardVariants` (opacity 0→1, y 50→0, ease cubic-bezier) and stagger via `containerVariants`. CSS is 7355 chars covering filter tab active states, card hover lift, image overlay, and responsive grid layout.

As a frontend developer, implement the ItineraryTravelTips section for the Itinerary page. This section renders an accordion of travel tip categories from a local `tips` array with ids: 'visa', 'customs', 'transport', 'weather', 'money', 'emergency'. Each item has an icon component (FileText, Users, Bus, CloudSun, Banknote, Phone from lucide-react), a label, a badge string ('Essential', 'Cultural', etc.), and a `content` JSX node. Accordion expand/collapse uses `useState` for active tip id, with AnimatePresence and height-based motion.div transitions driven by ChevronDown rotation. Content nodes embed AlertCircle and Info icon alerts (`.itt-important`), CheckCircle2 and Globe icon lists (`.itt-info-list`), and `<span className="itt-highlight">` text callouts. Additional icons in content: MapPin, Clock, Shield, Globe, CreditCard, Thermometer, Umbrella. Uses `useRef` and `useEffect` for scroll-into-view on expand. CSS is 6807 chars covering accordion panel, badge variants, highlight spans, info-list, and important-alert styles.

As a frontend developer, implement the ItineraryCTA section for the Itinerary page. This section renders a full-width CTA card with a two-layer parallax background (icta-deco-bg at 0.3x speed, icta-deco-mg at 0.6x speed) using CSS `--scroll` custom property, decorative orbs (icta-orb-1/2), a ring shape, and four dot shapes. The CTA card uses framer-motion entrance animation. A 'Book Now' button uses a magnetic hover effect: `handleMagnetMove` calculates cursor offset from button center via `btnRef` (useRef) and clamps dx/dy to ±16px, stored in `magnetOffset` state, applied as a CSS transform. On click, `handleBookNow` calls `spawnParticles()` which generates 14 particles (PARTICLE_COUNT) at radial angles using Math.cos/sin with random distance 80–140px, sets them in `particles` state, then clears after 700ms via setTimeout, before navigating to '/Budget' via `window.location.href`. An email subscription form uses `email` useState, `handleEmailSubmit` sets `subscribed` true for 4000ms then resets, toggling a CheckCircle success state via AnimatePresence. Icons: Sparkles, ArrowRight, RefreshCw, Send, CheckCircle from lucide-react. CSS is 8399 chars covering card glassmorphism, particle keyframes, orb animations, and magnetic button styles.

As a frontend developer, implement the ActivitiesHero section for the Activities page. This section renders a full-bleed hero with three parallax blob layers (background, midground, foreground) driven by CSS --scroll custom property. It accepts props: searchQuery, onSearchChange, activeCategory, and onCategoryChange. Uses framer-motion variants (headerVariants, subVariants, staggerContainer, childVariant) for entrance animations with staggered children. Renders a category filter bar using the categories array (All Activities, Adventure/Mountain, Relaxation/Umbrella, Cultural/Landmark, Food/UtensilsCrossed from lucide-react) with handleFilterClick callback. Integrates GSAP ScrollTrigger via useRef(sectionRef) and useRef(ctaRef) to trigger a ctaPulsed state pulse (setCtaPulsed true for 4000ms) when the section enters at 70% viewport. Includes a Search icon input bound to onSearchChange and an ArrowRight CTA. GSAP context is cleaned up on unmount via ctx.revert().

As a frontend developer, implement the BudgetHero section for the Budget page. This section features a full Three.js 3D scene mounted via `useRef(mountRef)` with a `THREE.WebGLRenderer` (alpha, antialias), `THREE.PerspectiveCamera` at position (0, 0.8, 6.5), and multi-light setup (AmbientLight, DirectionalLight keyLight/fillLight/rimLight). Render 7 animated floating coins using `THREE.CylinderGeometry(0.22, 0.22, 0.06, 48)` with gold `MeshStandardMaterial` (metalness 0.7) and `THREE.TorusGeometry` edge rings. Each coin has individual `userData` for bobbing speed, phase, and rotation animation driven by a `requestAnimationFrame` loop. Overlay UI includes `Wallet`, `TrendingUp`, `Sparkles`, `ChevronDown`, `Landmark` icons from lucide-react, headline text, and a scroll-down chevron. Import `BudgetHero.css` for layout. Depends on Itinerary page tasks to establish page-level chain.

As a frontend developer, implement the HotelsHero section for the Hotels page. This section features a full-screen hero with a 3D React Three Fiber Canvas background rendering a FloatingGlobe component built with @react-three/drei's Float, Sphere, and MeshDistortMaterial — the globe uses distortion animation (distort=0.25, speed=2.5) with a wireframe overlay layer. The section includes: (1) CSS parallax decorative layers (hhe-decor-1/2/3) driven by a CSS variable --scroll with translateY transform, (2) a hotel silhouette SVG/CSS overlay (hhe-silhouettes), (3) a badge with animated dot, (4) an h1 headline, (5) a search form with useState hooks for `destination` and `dateRange` fields featuring MapPin and Calendar lucide icons, (6) quick-destination links rendered from the quickDestinations array (Paris, Tokyo, Bali, New York), and (7) a stats row from the stats array showing '12K+ Curated Hotels', '200+ Destinations', '98% Happy Travelers'. The Canvas uses camera position [0,0,6], fov 45, alpha true, dpr [1,1.5]. Ambient light (0.4), pointLight at [5,3,5] in #F4A261 and [-4,-2,-3] in #5A6F99. Note: Navbar component may already exist from Landing/Destination pages.

As a frontend developer, implement the RestaurantsHero section for the Restaurants page. Build the hero section using React with useState for searchVal and activeChip state, and useRef/useMemo for the 3D canvas layer. Implement the FoodShapes component using @react-three/fiber Canvas with @react-three/drei Float, Sphere, and MeshDistortMaterial — rendering 14 randomly positioned distorted spheres in colors ['#F4A261','#E07A5F','#F2CC8F','#5A6F99','#2A3D66'] with varying scale (0.18–0.73), speed, and opacity (0.22). The rh-canvas-layer div wraps the 3D canvas as a decorative aria-hidden background. Content includes: a rh-badge with UtensilsCrossed icon and 'Curated Dining' label, an h1 rh-headline, cuisine chip buttons from the cuisineChips array (7 items with colored dots, toggling activeChip state), a search input bound to searchVal with Search icon, and a stats row showing '2,400+ Restaurants', '85+ Cities', '12K+ Reviews' with Sparkles/MapPin/Users/Star icons. Apply RestaurantsHero.css for all styles. Note: this is the first section of the Restaurants page and depends on the Destination page tasks for page-chain sequencing.

As a frontend developer, implement the BlogsHero section for the Blogs page. This section features a React Three Fiber Canvas with two animated 3D components: CompassRing (a rotating group with outer BufferGeometry ring, inner torus mesh, four N-S-E-W sphereGeometry marker dots with alternating #E07A5F/#F2CC8F colors, and a center octahedronGeometry gem) and FloatingParticles (40 spherical particles distributed via spherical coordinates at radius 3.2–5.0, animated with useFrame for orbital Y rotation and sinusoidal X tilt via clock.getElapsedTime). Both components use useRef, useMemo, and useFrame hooks. Import from '../styles/BlogsHero.css' and '@react-three/fiber'. Note: BlogsHero depends on the Itinerary page tasks being completed first.

As a Tech Lead, verify the end-to-end integration between the Chat page frontend (ChatHeader, ChatContainer, ChatInput) and the TravelMate AI Chat API backend. Ensure: user messages from ChatInput are sent to /api/chat, AI responses are rendered correctly in ChatContainer with markdown bold parsing, suggestion chips populate input correctly, destination cards render from API hasDestCard responses, streaming responses display progressively, conversation context is maintained across turns, and error/loading states are handled gracefully.

As a frontend developer, implement the DestinationCards section for the Destination page. The section renders a grid of 6 destination cards (Santorini, Kyoto, Machu Picchu, Bali, Marrakech, Amalfi Coast) each with an Unsplash image, title, description, rating, review count, and category tags. The StarRating sub-component uses motion.div with whileInView triggered scale animations (opacity 0→1, scale 0.3→1) with staggered delays per star (0.3 + star * 0.08s). Each card uses useAnimation and useMotionValue/useSpring from framer-motion for hover tilt/magnetic effects. useEffect with IntersectionObserver drives scroll-triggered card entrance animations. Tags are styled with tagClass helper switching between dc-tag--adventure, dc-tag--food, and dc-tag--culture CSS modifier classes. Each card shows a Star icon (lucide-react), review count, and an ArrowRight icon on the CTA. Styles imported from DestinationCards.css.

As a frontend developer, implement the ActivitiesBrowse section for the Activities page. This section renders a horizontally scrollable carousel of 5 activity cards (Santorini Sunset Catamaran Cruise, Machu Picchu Guided Trek, Kyoto Tea Ceremony & Garden Tour, Serengeti Hot Air Balloon Safari, Amalfi Coast Scooter Adventure) using framer-motion useMotionValue, useTransform, and useSpring for card tilt/parallax effects on hover. Each card displays a Star (lucide-react) rating via a StarRating helper component rendering 5 stars with fill logic, MapPin location, Clock duration, and difficulty badge styled via difficultyClass() mapping (ab-diff-easy, ab-diff-moderate, ab-diff-challenging). Carousel navigation uses ChevronLeft/ChevronRight buttons with useRef for the scroll container. ArrowRight is used for the section-level CTA. State managed with useState for current scroll index.

As a frontend developer, implement the ActivitiesCategories section for the Activities page. This section renders a 6-card grid (Adventure/Mountain, Relaxation/Coffee, Cultural/Landmark, Food/UtensilsCrossed, Sports/Dumbbell, Wellness/HeartPulse from lucide-react) with activity counts and descriptions sourced from the categories array. Uses framer-motion containerVariants (staggerChildren: 0.1, delayChildren: 0.15) and cardVariants (spring stiffness: 100, damping: 18, hidden: opacity 0/y 20/scale 0.97) with whileInView on the container (viewport once: true, margin: -60px). Each card includes a preview image from Unsplash, an icon, name, count badge, description, and a ChevronRight arrow. Two CSS parallax decorative layers (acat-bg-layer at speed 0.3, acat-mid-layer at speed 0.6) driven by CSS --scroll are rendered as aria-hidden divs.

As a frontend developer, implement the ActivitiesHighlights section for the Activities page. This section renders a split layout with a large hero activity panel (Bali Sacred Monkey Forest Sanctuary) featuring a GSAP Ken Burns pan/zoom effect on scroll applied to heroImgRef, alongside a 2x2 grid of highlight cards (Northern Lights Chase, Grand Canyon Helicopter Tour, Santorini Sunset Sail, Machu Picchu Sunrise Trek) each with a badge (Trending/Popular/Top Rated/Adventure), price, MapPin location, and Star rating. Uses a reusable StarRating component rendering 5 stars with fill color #F2CC8F and two size variants (sm/default) via ahigh-card-star and ahigh-star CSS classes. The hero panel shows duration (Clock), groupSize (Users), TrendingUp icon, rating (Star), and a Learn More CTA with ArrowRight. framer-motion staggerContainer (staggerChildren: 0.12) and cardItem (y: 30→0, duration 0.55) animate the highlight cards on scroll with whileInView.

As a frontend developer, implement the ActivitiesFilters section for the Activities page. This is a complex filter sidebar/drawer component accepting filterState and filterHandlers props, with fallback to local useState for: location (10 regions), duration (slider 0-30 days), difficulties (multi-select: Easy/Moderate/Hard/Expert), priceRange (slider 0-$500), rating (4.5+/4+/3+/All), and activityTypes (10 types: Hiking, Diving, Sightseeing, etc.). Renders a desktop collapsible sidebar using openSections state (toggleSection) with ChevronDown animated accordions, and a mobile drawer (drawerOpen state) with separate drawerSections state (toggleDrawerSection). Uses framer-motion AnimatePresence for accordion content reveal. Active filter count is computed via useMemo. Filter/SlidersHorizontal/Star/X icons from lucide-react are used throughout. Accepts lifted state callbacks (onLocationChange, onDurationChange, onDifficultiesChange, onPriceRangeChange, onRatingChange, onTypesChange) or falls back to local setters.

As a frontend developer, implement the ActivitiesCTA section for the Activities page. This section renders a call-to-action card with a reusable MagneticButton component that tracks mouse position via onMouseMove, computing x/y offsets (0.35 multiplier) and animating via framer-motion spring (stiffness: 180, damping: 15, mass: 0.5) for a magnetic hover pull effect. The card uses useInView (margin: -80px, once: true) on cardRef to trigger an opacity 0→1 / y 40→0 entrance animation (duration 0.65, cubic-bezier [0.22, 0.61, 0.36, 1]). Renders a headline with an animated gradient underline, an email subscription form using useState for email and submitted states — on submit, sets submitted: true and clears the email field. Icons: ArrowRight, MessagesSquare, Mail, Send from lucide-react. Background has three decorative parallax blobs (ac-cta-blob-1/2/3) in ac-cta-midground layer driven by CSS --scroll. MagneticButton supports both anchor (href) and button (onClick) rendering modes.

As a frontend developer, implement the BudgetForm section for the Budget page. This section renders a complex multi-field budget input form backed by `useState` and `useCallback` hooks, with imports from `react`, `lucide-react` (Search, Calendar, Users, DollarSign, MapPin, Compass, Mountain, Users2, Wallet, ArrowRight, Check, AlertCircle, ChevronDown), and a `@react-three/fiber` Canvas decorative background. The `BgShapes` component generates 28 procedural meshes (`CircleGeometry`, `TorusGeometry`, `RingGeometry`) using `useMemo`, animated via `useFrame` with mouse-parallax tracking stored in `useRef([0, 0])` and updated via a passive `mousemove` listener. The `BgScene` wraps `BgShapes` inside a `Canvas` with camera at z=5. The main form collects destination, dates, travelers, and budget fields with validation states (AlertCircle for errors, Check for valid). Import `BudgetForm.css`.

As a frontend developer, implement the BudgetBreakdown section for the Budget page. This section uses `react-chartjs-2` (`Pie`, `Line` components) with `chart.js` registrations (ArcElement, Tooltip, Legend, CategoryScale, LinearScale, PointElement, LineElement, Filler). It displays a `categoryBreakdown` array of 5 categories (Accommodation, Activities, Food, Transport, Miscellaneous) each with amount, color, and lucide icon (Hotel, Compass, UtensilsCrossed, Bus, MoreHorizontal). A currency selector `useState('USD')` maps over 5 currencies (USD, EUR, GBP, INR, JPY). A scroll-triggered reveal uses `IntersectionObserver` with `useCallback` ref collector (`revealRefs`) and `isIntersecting` state map. Renders a `Pie` chart with `pieData` (category colors + CC alpha, borderColor white), a `Line` chart for `dailyCosts` over 5 days, a budget progress bar at 68%, and category breakdown cards. Import `BudgetBreakdown.css`.

As a frontend developer, implement the BudgetTips section for the Budget page. This section renders 6 expandable tip cards defined in the `tips` array, each with an `id`, lucide icon (PiggyBank, Plane, MapPin, UtensilsCrossed, BedDouble, Ticket), `title`, `brief`, `detail`, `learnHref` (linking to /Blogs, /Hotels, /Restaurants, /Activities, /Destination pages), and `accentIdx`. Interaction is managed via `useState` for expanded card index. A Three.js decorative background is initialized via `useRef` and `useEffect` using raw `THREE` (not fiber), with animated floating shapes. The `useMemo` hook caches tip data. ChevronDown and ArrowRight icons from lucide-react handle expand/collapse toggles and CTA links. Import `BudgetTips.css`.

As a frontend developer, implement the BudgetCTA section for the Budget page. This section features a `@react-three/fiber` Canvas with 18 floating `Node` components, each rendering an `<icosahedronGeometry args={[1, 0]} />` with `meshStandardMaterial` (color '#E07A5F' or '#F4A261', roughness 0.72, metalness 0.08, transparent). Nodes are seeded in a `geometries` module-level array using polar coordinates (r, theta, phi) and animated in `useFrame` with per-node `rotSpeed` and `floatAmp`/`floatFreq`/`phase` for sinusoidal bobbing. The `FloatingNodes` component maps over `geometries` via `useMemo`. The main `BudgetCTA` uses `useState(visible)` triggered by `IntersectionObserver` at 0.15 threshold to apply `btcta-reveal`/`btcta-visible` CSS classes with staggered delays. Decorative `btcta-blob` divs are rendered as aria-hidden. Icons: MapPin, MessageCircle, Users, Star, Quote from lucide-react. Import `BudgetCTA.css`.

As a frontend developer, implement the HotelsFilters section for the Hotels page. This sticky filter bar uses multiple useState hooks: `stuck` (scroll-based sticky detection via getBoundingClientRect against 68px threshold), `drawerOpen` (mobile drawer with body overflow lock via useEffect), `sortOpen` (dropdown with outside-click detection via mousedown listener and sortRef), `sortBy` (default 'recommended'), `typeFilter` (single-select toggle from hotelTypes array: luxury/boutique/budget/resort/business), `starFilter` (single-select from starOptions [5,4,3,2,1] rendered as Star icons), `amenityFilters` (multi-select array from amenitiesList: Wifi/Pool/Gym with lucide icons), and `priceRange` (slider, default 150). Uses framer-motion AnimatePresence for drawer open/close animations and ChevronDown for sort dropdown. The `activeFilterCount` derived value sums active filters and drives a badge. A `clearAll` callback resets all filter state. The rootRef tracks sticky state via scroll event listener (passive). Sort dropdown has 5 options (Recommended, Price ASC/DESC, Top Rated, Closest to City) and closes on outside click. The mobile drawer overlays with overflow:hidden on body.

As a frontend developer, implement the HotelsGrid section for the Hotels page. This section renders a paginated/scrollable grid of hotel cards using a static hotels array of 5+ entries (Ritz-Carlton Kyoto $520, Aman Tokyo $780, Six Senses Zighy Bay $440, Belmond Hotel Caruso $650, and more). Each hotel card features: multi-image carousel with ChevronLeft/ChevronRight navigation and image index state, star rating display with review count, location with MapPin icon, price per night, amenity badge pills, an ArrowRight CTA, and an Eye hover interaction. Cards use framer-motion with useMotionValue/useSpring/useTransform for a 3D tilt effect on mouse move. The section also includes a decorative 3D Canvas scene in the background rendering an AccentRing component (Float + Torus from @react-three/drei, orange emissive color #F4A261, emissiveIntensity 0.3, opacity 0.6). The Torus args are [1.4, 0.04, 16, 100] with rotation [Math.PI*0.35, 0, 0]. Uses useCallback and useMemo for performance optimization of filtered/sorted hotel list.

As a frontend developer, implement the HotelsReviews section for the Hotels page. This section features a custom GLSL star field rendered via Three.js ShaderMaterial (starShaderMaterial) with custom vertexShader and fragmentShader, using THREE.AdditiveBlending and depthWrite:false. The shader has uniforms: uTime (animated), uMouse (mouse-tracked vec2), uColor1 (#5A6F99), uColor2 (#E07A5F), uColor3 (#F4A261). The StarField component uses useMemo to generate 280 star particles with Float32Array position/aSize/aPhase attributes and a BufferGeometry, then drives uTime via requestAnimationFrame (not useFrame). Mouse position is tracked via mouseRef passed as prop. The reviews UI includes ThumbsUp interactions (lucide), a ChevronDown 'load more' pattern, and review cards with star ratings. useState manages displayed review count and helpful vote state. useCallback is used for vote handlers. The section uses a Canvas with the StarField as atmospheric background behind the review content.

As a frontend developer, implement the HotelsComparison section for the Hotels page. This section renders an interactive hotel comparison tool using a HOTELS array of 5 hotels (Grand Palace Paris $385, Marina Bay Sands Singapore $420, Ritz-Carlton Tokyo $495, Santorini Boutique $260 marked bestValue:true, Alpine Lodge Zermatt $340). Features: (1) multi-select hotel picker (useState for selectedIds), (2) comparison table rows for price, star rating (Star icon), amenities (multi-icon grid using AMENITY_ICONS map with Wifi/Waves/UtensilsCrossed/Car/Dumbbell/ShieldCheck/Settings icons), distance to attraction with MapPin, and cancellation policy (free/mod/strict types with color coding), (3) a 3D ComparisonScene Canvas using useFrame for animated 3D bar chart — bars rendered per selectedId with hotel-specific colors, groupRef for mouse-reactive rotation via mouseRef, useMemo for bar geometry computation, (4) Check/XCircle icons for amenity presence/absence, (5) BarChart3 icon in section header, (6) ChevronRight navigation. useCallback optimizes selection toggle. The scene uses THREE geometries built dynamically from selectedIds.

As a frontend developer, implement the HotelsCTA section for the Hotels page. This is a conversion call-to-action section featuring a 3D CtaGlobe component rendered via React Three Fiber Canvas (camera position [0,0,3.2], fov 42, dpr [1,1.5], alpha true). The CtaGlobe consists of: (1) a core solid Sphere (sphereGeometry args [1.3,48,48], meshBasicMaterial #F4A261 opacity 0.18) on meshRef rotating via useFrame (rotation.y = t*0.08, rotation.x = sin(t*0.15)*0.06), (2) a wireframe overlay Sphere (args [1.35,32,32], #2A3D66 opacity 0.12) on wireframeRef (rotation.y = t*0.05), (3) 120 orbiting particles computed via useMemo (spherical coordinate distribution, r=1.6-1.75) rendered as tiny spheres (args [0.018,4,4], #E07A5F opacity 0.55) with per-particle angle offset. Content area (hcta-inner) includes: hcta-text-block with decorative span divider, h2 headline with hcta-headline-accent span for 'book?', and two CTA buttons — primary with Building2 icon and secondary/chat with MessageCircle icon (lucide-react). Canvas is wrapped in hcta-globe-wrap div positioned decoratively.

As a frontend developer, implement the RestaurantsFilter section for the Restaurants page. Build the filter panel using React with multiple useState hooks: activeCuisines (array), priceValue (range slider, default 200), ratingFilter (number, default 0), sortBy (string, default 'popular'), mobileOpen (bool), and three dropdown open-state booleans (priceOpen, ratingOpen, sortOpen). Implement useRef for priceRef, ratingRef, sortRef to support a useEffect-based mousedown outside-click listener that closes all dropdowns. The StarRating sub-component renders up to 5 stars with full/half/empty logic using lucide-react Star icons (fill '#e4a90c' or empty stroke '#d4d4d4'). Render: a mobile filter toggle button with Filter icon and active filter count badge, a cuisine chips list from 8 cuisines with item counts (toggleCuisine toggles activeCuisines array), a price range dropdown (slider 0–200 with rh-price label), a rating dropdown (4 ratingOptions with StarRating display), a sort dropdown (4 sortOptions), and a 'Clear All' button (clearAll resets all state). Apply SlidersHorizontal, Star, ArrowUpDown, X, Filter icons from lucide-react. Apply RestaurantsFilter.css for all styles.

As a frontend developer, implement the RestaurantsCTA section for the Restaurants page. Build the call-to-action section using React with useState (visible, default false) and useRef (innerRef). Implement a useEffect that creates an IntersectionObserver on innerRef with threshold 0.25 — when the element enters the viewport, setVisible(true) and unobserve. Conditionally apply 'rct-inner rct-visible' CSS class based on visible state for entrance animation. Render: a rct-bg gradient background div (aria-hidden), four decorativeIcons mapped as floating decorative elements — ChefHat (rct-decor-1), Soup (rct-decor-2), Wine (rct-decor-3), UtensilsCrossed (rct-decor-4) — all with strokeWidth=1.2 and aria-hidden. Content includes: h2 rct-headline with 'Ready to Taste Local?' text and rct-headline-accent span, a rct-sub paragraph about TravelMate AI curation, an anchor tag rct-btn linking to '/Itinerary' with UtensilsCrossed icon, 'Start Planning Your Foodie Trip' label, and ArrowRight icon in rct-btn-icon span, plus a rct-support paragraph crediting 'TravelMate AI'. Apply RestaurantsCTA.css for all styles.

As a frontend developer, implement the BlogsFilter section for the Blogs page. This section uses useState to manage activeCategory (default 'All') and searchText (default '') state. It renders a search input with a Lucide Search icon and an aria-label. Below it renders category pill buttons from a static categories array ('All', 'Destination Guides', 'Food & Cuisine', 'Adventure Tips', 'Budget Travel', 'Travel Stories') with bf-pill and bf-active CSS classes toggled on click. A conditional reset button with RotateCcw Lucide icon and bf-clear class appears only when activeCategory !== 'All' or searchText !== '', calling handleClear() to reset both states. Import from '../styles/BlogsFilter.css' and 'lucide-react'.

As a frontend developer, implement the FeaturedBlog section for the Blogs page. This section uses useState (revealed), useRef (rootRef, sphereRef, animRef), and useEffect hooks. An IntersectionObserver on rootRef triggers a scroll-reveal animation at 0.15 threshold, setting revealed=true and disconnecting. A second useEffect on sphereRef sets up a raw Three.js scene (no R3F) with a PerspectiveCamera at (0, 0.2, 4.5), WebGLRenderer with alpha, and a SphereGeometry(0.6, 64, 64) mesh using a custom ShaderMaterial with uTime, uColor1 (#F4A261), uColor2 (#E07A5F), uColor3 (#F2CC8F) uniforms and GLSL vertex/fragment shaders. The static featuredBlog data object contains category, headline, excerpt, Unsplash image URL, imageAlt, author (name + avatar), and publishDate. Lucide Calendar and ArrowRight icons are used. Import from '../styles/FeaturedBlog.css', 'three', and 'lucide-react'.

As a frontend developer, implement the BlogGrid section for the Blogs page. This section uses useState, useEffect, useRef, and useCallback hooks. It renders a static array of 6 blogPosts objects (each with id, title, excerpt, category, authorName, authorInitials, publishDate, readTime, href '/Blogs', and Unsplash image URL). Cards display the Unsplash image, category badge, title, excerpt, author initials avatar, author name, publishDate, readTime, and a navigation link. A Lucide Search icon is imported. The section likely implements scroll-reveal or hover interactions via useRef/useCallback. Import from '../styles/BlogGrid.css' and 'lucide-react'.

As a frontend developer, implement the PackingHero section for the Packing page. This section renders a full-screen hero using a Three.js Canvas (via @react-three/fiber) with a DecorativeScene containing HeroGeometry — 8 semi-transparent OctahedronGeometry meshes in navy (#2A3D66) and amber (#F4A261) colors with randomized positions, scales, and speeds. The Canvas uses camera position [0,0,6], fov 45, dpr [1,1.5], and alpha transparency. Three CSS accent shapes (ph-accent-shape--tl, --br, --mid) layer geometric decorative elements. The content area (ph-inner) includes a ph-eyebrow label ('Smart Packing'), an h1 ph-headline with a ph-headline-accent span ('Confidence'), a subtitle paragraph, and a trip context badge row showing MapPin (destination: 'Paris, France'), Calendar (dates: 'Jun 22 – Jun 28, 2026'), and Luggage (tripType: 'Leisure') badges from Lucide React, plus an ArrowRight CTA. Import PackingHero.css for styling.

As a Tech Lead, verify the end-to-end integration between the Itinerary page frontend sections (ItineraryHero, ItineraryActivities, ItineraryHotels, ItineraryRestaurants, ItineraryTravelTips, ItineraryCTA) and the Itinerary CRUD API. Ensure: itinerary data loads from /api/itineraries/{id}, activities/hotels/restaurants data is fetched from respective APIs and filtered by itinerary context, download/share buttons produce correct data, filter tabs work against API responses, and the day-wise plan renders correctly from AI-generated itinerary data.

As a frontend developer, implement the ActivitiesGrid section for the Activities page. This section renders a paginated grid of activity cards sourced from a local activities array of 8+ entries (Grand Canyon Helicopter Tour, Santorini Sunset Sailing, Machu Picchu Trek, Kyoto Tea Ceremony, Queenstown Bungee Jump, Northern Lights Safari, Bali Rice Terrace Walk, Dubai Desert Safari, etc.) each with id, name, location, rating, price, duration, difficulty, desc, and img. Uses useState for current page tracking and framer-motion AnimatePresence with layout animations for grid transitions. Each card renders MapPin, Star, Clock, and ArrowRight from lucide-react, with difficulty badge styling. Pagination controls use ChevronLeft/ChevronRight. Cards animate in with framer-motion (opacity 0→1, y offset) using staggered children. The component is designed to work alongside ActivitiesFilters for filtered results display.

As a frontend developer, implement the RestaurantsGrid section for the Restaurants page. Build the restaurant card grid using React with useState, useEffect, useRef, and useCallback. Import three from 'three' for any WebGL-based hover/shimmer effects on cards. Render 9 restaurant cards from the hardcoded restaurants array — each card displays: an Unsplash image (600x338), restaurant name, cuisine tag, a StarRating sub-component (renders 1–5 Star icons with fill 'var(--accent)'), review count, price level via priceLabel() helper ('$' to '$$$$'), location string with MapPin icon, and a ChevronRight arrow CTA. The StarRating component loops i=1..5 comparing against Math.floor(rating). Apply rg-star className to each Star icon. Implement card layout in a responsive CSS grid. Apply RestaurantsGrid.css for all styles.

As a frontend developer, implement the BlogsPagination section for the Blogs page. This section uses useState (currentPage), useRef (barRef), useCallback, useEffect, and useMemo hooks. It renders a React Three Fiber Canvas with a ParticleRing component: 40 particles arranged in an ellipse at radius 1.6 with useFrame animating sinusoidal Y-bobbing, scale pulsing, and slow Y-axis group rotation (0.0018 rad/frame), colored alternating #F4A261/#E07A5F/#5A6F99. Pagination constants: TOTAL_BLOG_POSTS=24, POSTS_PER_PAGE=6, TOTAL_PAGES=4. The UI renders ChevronLeft/ChevronRight prev/next buttons and numbered page buttons (blpg-num, blpg-active classes). A magnetic hover effect on barRef.current querySelectorAll('.blpg-num:not(.blpg-active)') uses mousemove to compute per-button dx/dy distance and applies CSS transform translate + rotateX/rotateY pull effect and dynamic boxShadow. Import from '../styles/BlogsPagination.css', 'three', '@react-three/fiber', and 'lucide-react'.

As a frontend developer, implement the ChecklistGenerator section for the Packing page. This section is a multi-field interactive form powered by useState, useRef, useEffect, and useMemo hooks. It includes a Three.js Canvas (via @react-three/fiber) rendering a GlobeScene with an animated rotating Sphere (args [1.4,48,48], navy #2A3D66), a wireframe orange (#F4A261) outer Sphere (args [1.44,32,32]), and three torusGeometry latitude rings (gold #F2CC8F, opacity 0.35) at y offsets [0.35, 0.7, 1.05]. The GlobeScene uses useFrame for continuous y-rotation (t*0.08) and sinusoidal x-tilt. The form collects: trip type (6 emoji pill buttons: leisure, business, adventure, family, romantic, backpacking), destination text input (MapPin icon), climate dropdown (8 options via climates array), traveler count (Users icon), trip duration (Calendar icon), and activities multi-select grid (10 emoji-labelled options: swimming, hiking, fine dining, photography, shopping, skiing, diving, nightlife, museums, wildlife). A Sparkles icon decorates the generate CTA button. Import ChecklistGenerator.css and Lucide icons: Sparkles, MapPin, Thermometer, Users, Calendar, Briefcase, Info.

As a frontend developer, implement the TravelTipsStrip section for the Packing page. This section renders a horizontal tips strip using Framer Motion (motion) with whileInView scroll-triggered animations. It displays 3 tip cards from the packingTips array (roll clothes, packing cubes, carry-on essentials) using tipVariants (opacity 0 → 1, y 16 → 0, staggered delay i*0.12, duration 0.45, cubic-ease [0.22,0.61,0.36,1]). Each tts-tip-card contains a tts-tip-dot accent, tts-tip-label, and tts-tip-text. A tts-header with Lightbulb icon (size 22) introduces the section. Below the tips grid, a tts-cta-row renders 3 navigation links via nextStepLinks array (/Budget 'accent' variant, /Itinerary 'outline', /Hotels 'outline'), each a motion.a using ctaVariants (opacity 0 → 1, x -12 → 0, delay 0.36+i*0.08). ArrowRight icon from Lucide is used within CTA buttons. All viewports use once:true, margin:'-40px'. Import TravelTipsStrip.css.

As a Tech Lead, verify the end-to-end integration between the Budget page frontend sections (BudgetForm, BudgetBreakdown, BudgetTips, BudgetCTA) and the Budget Planning API. Ensure: BudgetForm submits destination/dates/travelers/budget to /api/budget/estimate and receives structured breakdown, BudgetBreakdown renders live currency conversions from /api/budget/currency-rates, Pie and Line charts display correct data from API responses, validation error states surface properly, and budget context flows from the AI chat itinerary recommendation.

As a Tech Lead, verify the end-to-end integration between the Destination page frontend sections (DestinationHero, DestinationDetails, DestinationCards, DestinationMap, FilterBar, ReviewsAndRatings, RelatedDestinations, BookingCTA) and the Destinations API. Ensure: destination detail loads from /api/destinations/{id} with URL query param (e.g. /Destination?place=paris), FilterBar query params hit /api/destinations with correct filter params, map pins render from API coordinate data, reviews render from API, and related destinations card links resolve correctly.

As a Tech Lead, verify the end-to-end integration between the Hotels page frontend sections (HotelsHero, HotelsGrid, HotelsFilters, HotelsReviews, HotelsComparison, HotelsCTA) and the Hotels API. Ensure: HotelsGrid loads from /api/hotels with pagination, HotelsFilters send correct query params (type, stars, amenities, price, sort) to the API, HotelsComparison fetches from /api/hotels/compare?ids=, hotel reviews render from API, and quick-destination links in HotelsHero correctly filter results.

As a frontend developer, implement the RestaurantsDetail section for the Restaurants page. Build the restaurant detail modal/panel using React with useState, useRef, useMemo, and useEffect. Integrate @react-three/fiber Canvas and useFrame for the FloatingParticles 3D decoration: 40 particles using bufferGeometry with bufferAttribute for positions (Float32Array, count*3, random spread 10x8x4 range) and colors (Float32Array, navy-blue tones ~0.18–0.26 RGB range). useFrame rotates the points mesh on Y-axis (elapsedTime * 0.04) with sin/cos wobble on X/Z. pointsMaterial uses size=0.06, vertexColors, opacity=0.55, AdditiveBlending, depthWrite=false. The detail panel includes: X close button, hero image, restaurant name, Star rating row, MapPin location, Phone, Globe, Clock, and ChevronRight icons from lucide-react. Renders a reviews section from 4 hardcoded review objects (Sophia M., James K., Elena R., Marcus T.) each with avatar initials, star rating (1–5), date string, and review text. Includes a Calendar-based reservation/booking CTA. Apply RestaurantsDetail.css for all styles.

As a frontend developer, implement the ChecklistResult section for the Packing page. This section renders the AI-generated packing list using Framer Motion (motion, AnimatePresence, Reorder) for drag-to-reorder category items. State is managed via useState and useCallback. The section has 5 pre-seeded categories: Essentials (Briefcase icon, 5 items), Clothing (Shirt icon, 8 items), Toiletries (Droplets icon, 6 items), Electronics (Smartphone icon), and Documents (FileText icon), each with id, label, detail, and weight fields. Per-item state tracks checked/unchecked status. A weight tracker uses a Scale icon displaying total packed weight. Expand/collapse per category uses ChevronDown animated rotation. GripVertical icons enable drag handles for Reorder. Top action bar includes Printer and Download (PDF) icon buttons. A progress bar shows checked-item percentage. Each item uses CheckCircle2 or a hollow circle for check state. A BoxSelect 'Select All' shortcut and PackageOpen empty-state are also implemented. A Three.js Canvas provides a subtle animated background accent. All category colorClass tokens (clr-cat-essentials, clr-cat-clothing, etc.) are referenced from ChecklistResult.css.

As a Tech Lead, verify the end-to-end integration between the Activities page frontend sections (ActivitiesHero, ActivitiesCategories, ActivitiesBrowse, ActivitiesHighlights, ActivitiesGrid, ActivitiesFilters, ActivitiesCTA) and the Activities API. Ensure: ActivitiesGrid paginates from /api/activities with filter params from ActivitiesFilters, category counts in ActivitiesCategories come from /api/activities/categories, ActivitiesBrowse carousel loads correctly, search query from ActivitiesHero filters API results, and ActivitiesFilters sidebar correctly maps to API query parameters.

As a Tech Lead, verify the end-to-end integration between the Blogs page frontend sections (BlogsHero, BlogsFilter, FeaturedBlog, BlogGrid, BlogsPagination) and the Travel Blogs API. Ensure: BlogGrid fetches paginated posts from /api/blogs with page and category params matching BlogsPagination state, BlogsFilter search and category selection pass correct query params to the API, FeaturedBlog loads from /api/blogs/featured, pagination constants (TOTAL_BLOG_POSTS=24, POSTS_PER_PAGE=6) align with API total count response, and category options match API-supported values.

As a Tech Lead, verify the end-to-end integration between the Restaurants page frontend sections (RestaurantsHero, RestaurantsGrid, RestaurantsFilter, RestaurantsDetail, RestaurantsCTA) and the Restaurants API. Ensure: RestaurantsGrid loads from /api/restaurants, RestaurantsFilter sends cuisine/price/rating/sort query params to the API, RestaurantsDetail modal fetches full detail from /api/restaurants/{id}, search in RestaurantsHero queries the API, and cuisine chip filters in the hero align with API filter parameters.

As a Tech Lead, verify the end-to-end integration between the Packing page frontend sections (PackingHero, ChecklistGenerator, ChecklistResult, TravelTipsStrip) and the Packing Checklist API. Ensure: ChecklistGenerator form submits to /api/packing/generate with trip type, destination, climate, travelers, duration, and activities; ChecklistResult renders AI-generated categories and items from the API response; checked item state persists via PUT /api/packing/{id}; PDF download reflects current API state; and the trip context badges in PackingHero can be populated from an active itinerary context.