AI Travel Planner

Develop a modern, interactive, one-page web application called "AI Travel Planner" that allows users to input a destination, travel days, and budget, and receive a fully detailed, AI-generated itinerary with images, hotels, and a downloadable PDF. The web app should be visually appealing, responsive, and optimized for performance.
Requirements
1. Tech Stack
Frontend: HTML, Tailwind CSS, JS (ES6+ modules)
Optional Backend (for advanced AI usage): Node.js / Express
AI Integration: Google Generative AI (Gemini-2.5-flash-preview)
PDF Generation: html2pdf.js
Icons: Phosphor Icons
Fonts: Google Fonts ("Outfit")
Image API: Pollinations.ai for scenic travel images
2. Layout & Sections
Hero Section
Full-width gradient background (dark theme: indigo, purple, blue)
Animated floating background blobs (glassmorphism effect)
Title: “Explore the Unseen” (gradient text)
Subtitle: “Visual. Smart. Personalized.”
Search form:
Destination (text input)
Days (select dropdown)
Budget (select dropdown)
Submit button with icon
Content Area
Initial state: placeholder image & message
Loading state: spinner & message
Error message: styled alert box
Trip results:
Trip Header: Image, title, summary, cost, days, currency
Daily Itinerary Tabs: Clickable day buttons
Daily Content: Day theme image, activities timeline
Hotels: Cards with image, name, price, rating, description
Map Preview: Interactive map placeholder
PDF download button
3. Styling
Use Tailwind CSS for responsive design
Apply Glassmorphism for cards and buttons
Smooth hover animations, transitions, and fade-in effects
Custom animations:
Fade-in on scroll or element load
Background pulsating blobs in hero
Hide scrollbar for horizontal tabs (overflow-x-auto + no-scrollbar class)
4. Functionality
Form Submission
Trigger AI generation using Google Generative AI
Build JSON prompt for AI:

{
  "trip_title": "string",
  "summary": "string",
  "currency": "string",
  "total_estimated_cost": "string",
  "daily_plan": [
    {
      "day": number,
      "theme": "string",
      "best_image_keyword": "string",
      "activities": [{"time": "string", "activity": "string", "description": "string", "location": "string", "cost": "string"}]
    }
  ],
  "hotels": [
    {"name": "string", "rating": "string", "price_per_night": "string", "description": "string", "image_keyword": "string"}
  ]
}
Show loader while generating content
Display error message if API fails
Render Trip Results
Trip Header: Show large scenic image + overlay info
Daily Tabs & Content: Highlight active day, update activities
Hotels: Display rating, price, and description cards
Map Preview: Static/interactive placeholder
PDF Generation: Download full trip details as PDF
Image Integration
Use Pollinations.ai for scenic AI-generated images
Generate images based on keywords (destination, day theme, hotel name)
UI/UX
Responsive on mobile, tablet, desktop
Smooth transitions and hover effects
Clear separation of content sections
Accessibility: form labels, readable fonts, contrast
5. JavaScript Logic
Modular, clean, readable ES6+ code
Functions:
renderTripHeader(data)
renderDayTabs(days)
renderDayContent(day)
renderHotels(hotels)
switchDay(index)
downloadPDF()
State Management:
currentTripData holds API response
activeDayIndex tracks currently selected day
Event Listeners:
Form submit → generate itinerary
Day tabs → switch content
PDF button → generate PDF
6. Extra Features
Smooth loading animations
Clickable day tabs with highlighted active state
Glass cards for cost, days, and currency
PDF download with html2pdf.js
Fallback images if AI API fails
Output
Fully interactive, visually appealing AI travel planner
Works in modern browsers
AI generates structured JSON → dynamically updates DOM
Exportable PDF for full itinerary