[V0_FILE]typescriptreact:file="components/tour-guide-3d.tsx" isQuickEdit="true" "use client" import { Suspense, useRef, useState, useEffect } from "react" import { Canvas, useFrame } from "@react-three/fiber" import { OrbitControls, useGLTF, Environment, Html } from "@react-three/drei" import { motion } from "framer-motion" function Model({ position = [0, -1, 0], scale = 1.5 }) { const group = useRef() const { scene } = useGLTF("/assets/3d/duck.glb") // Animation for the model useFrame((state) => { if (group.current) { group.current.rotation.y = Math.sin(state.clock.getElapsedTime() * 0.5) * 0.5 group.current.position.y = Math.sin(state.clock.getElapsedTime()) * 0.1 } }) return ( Hello! I'm your tour guide! ) } export default function TourGuide3D() { const [mounted, setMounted] = useState(false) useEffect(() => { setMounted(true) }, []) if (!mounted) return null return (

) } [V0_FILE]typescriptreact:file="app/about/page.tsx" isQuickEdit="true" "use client" import Image from "next/image" import Link from "next/link" import { Button } from "@/components/ui/button" import { motion } from "framer-motion" export default function AboutPage() { const fadeIn = { hidden: { opacity: 0, y: 20 }, visible: { opacity: 1, y: 0 }, } const teamMembers = [ { name: "Sarah Johnson", role: "CEO & Founder", image: "https://images.unsplash.com/photo-1580489944761-15a19d654956?q=80&w=400&auto=format&fit=crop", bio: "With over 15 years of experience in the tourism industry, Sarah founded Athu Tourism with a vision to create unforgettable travel experiences.", }, { name: "Michael Chen", role: "Head of Destinations", image: "https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?q=80&w=400&auto=format&fit=crop", bio: "Michael has traveled to over 50 countries and uses his extensive knowledge to curate our unique destination offerings.", }, { name: "Elena Rodriguez", role: "Customer Experience Director", image: "https://images.unsplash.com/photo-1573496359142-b8d87734a5a2?q=80&w=400&auto=format&fit=crop", bio: "Elena ensures that every Athu Tourism customer receives personalized service and has the trip of a lifetime.", }, ] return (

{/* Hero Section */}

About Athu Tourism

Discover our story, our mission, and the passionate team behind your unforgettable travel experiences.

{/* Our Story */}

Our Story

Founded in 2010, Athu Tourism began with a simple mission: to help travelers discover the world's most breathtaking destinations while providing exceptional service and unforgettable experiences.

What started as a small team of passionate travelers has grown into a global company with a presence in over 30 countries. Despite our growth, we've maintained our commitment to personalized service and sustainable tourism practices.

Today, we're proud to have helped thousands of travelers create memories that will last a lifetime. Our team of expert guides and travel specialists work tirelessly to ensure that every Athu Tourism experience exceeds expectations.

{/* Our Values */}

Our Values

At Athu Tourism, our values guide everything we do. From how we select our destinations to how we interact with our customers and partners.

{[ { title: "Exceptional Experiences", description: "We believe that travel should be transformative. Every destination, activity, and accommodation is carefully selected to provide our customers with exceptional experiences.", }, { title: "Sustainable Tourism", description: "We're committed to sustainable tourism practices that respect local communities and environments. We work with partners who share our commitment to responsible travel.", }, { title: "Personalized Service", description: "No two travelers are alike. We take the time to understand our customers' preferences and create personalized itineraries that exceed expectations.", }, ].map((value, index) => (

{value.title}

{value.description}

))}

{/* Meet the Team */}

Meet the Team

Our team of passionate travelers and tourism experts is dedicated to creating unforgettable experiences for our customers.

{teamMembers.map((member, index) => (

{member.name}

{member.role}

{member.bio}

))}

{/* Call to Action */}

Ready to Start Your Adventure?

Join thousands of satisfied travelers who have experienced the world with Athu Tourism.

) } [V0_FILE]typescriptreact:file="app/contact/page.tsx" "use client" import { useState } from "react" import Image from "next/image" import { Button } from "@/components/ui/button" import { Input } from "@/components/ui/input" import { Textarea } from "@/components/ui/textarea" import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select" import { MapPin, Phone, Mail, Clock, Send } from "lucide-react" import { motion } from "framer-motion" export default function ContactPage() { const [formState, setFormState] = useState({ name: "", email: "", phone: "", subject: "", message: "", }) const [isSubmitting, setIsSubmitting] = useState(false) const [isSubmitted, setIsSubmitted] = useState(false) const handleChange = (e) => { const { name, value } = e.target setFormState((prev) => ({ ...prev, [name]: value })) } const handleSelectChange = (value) => { setFormState((prev) => ({ ...prev, subject: value })) } const handleSubmit = (e) => { e.preventDefault() setIsSubmitting(true) // Simulate form submission setTimeout(() => { setIsSubmitting(false) setIsSubmitted(true) setFormState({ name: "", email: "", phone: "", subject: "", message: "", }) // Reset success message after 5 seconds setTimeout(() => { setIsSubmitted(false) }, 5000) }, 1500) } const fadeIn = { hidden: { opacity: 0, y: 20 }, visible: { opacity: 1, y: 0 }, } return (

{/* Hero Section */}

Contact Us

Have questions or ready to plan your next adventure? Get in touch with our travel experts.

{/* Contact Form and Info */}

{/* Contact Information */}

Get in Touch

Our Location

tal-junnar, dist-pune, pimpalwandi (waghpatta) 412412

Phone Number

+91 8421998085

Email Address

waghatharva230@gmail.com

Working Hours

Monday - Friday: 9AM - 6PM

Saturday: 10AM - 4PM

{/* Contact Form */}

Send Us a Message

{isSubmitted ? (

Thank you for contacting us!

We've received your message and will get back to you shortly.

) : (

Your Name

Email Address

Phone Number

Subject

Your Message

</div>

<Button
                      type="submit"
                      className="w-full bg-gradient-to-r from-pink-500 to-purple-600 hover:from-pink-600 hover:to-purple-700 text-white shadow-lg hover:shadow-xl transition-all duration-300"
                      disabled={isSubmitting}
                    >
                      {isSubmitting ? (
                        <span className="flex items-center">
                          <svg
                            className="animate-spin -ml-1 mr-2 h-4 w-4 text-white"
                            xmlns="http://www.w3.org/2000/svg"
                            fill="none"
                            viewBox="0 0 24 24"
                          >
                            <circle
                              className="opacity-25"
                              cx="12"
                              cy="12"
                              r="10"
                              stroke="currentColor"
                              strokeWidth="4"
                            ></circle>
                            <path
                              className="opacity-75"
                              fill="currentColor"
                              d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
                            ></path>
                          </svg>
                          Sending...
                        </span>
                      ) : (
                        <span className="flex items-center">
                          <Send className="mr-2 h-4 w-4" />
                          Send Message
                        </span>
                      )}
                    </Button>
                  </form>
                )}
              </div>
            </motion.div>
          </div>
        </div>
      </section>

{/* Map Section */}
      <section className="py-20 bg-white">
        <div className="container mx-auto px-4">
          <motion.div
            className="text-center mb-12"
            initial="hidden"
            whileInView="visible"
            viewport={{ once: true }}
            variants={fadeIn}
            transition={{ duration: 0.6 }}
          >
            <h2 className="text-3xl font-bold text-purple-700 mb-4">Find Us</h2>
            <p className="text-gray-700 max-w-2xl mx-auto">
              Visit our office to meet our team and discuss your travel plans in person.
            </p>
          </motion.div>

<motion.div
            className="h-[400px] bg-gray-200 rounded-lg overflow-hidden"
            initial="hidden"
            whileInView="visible"
            viewport={{ once: true }}
            variants={fadeIn}
            transition={{ duration: 0.6 }}
          >
            <Image
              src="https://images.unsplash.com/photo-1569336415962-a4bd9f69c07b?q=80&w=1200&auto=format&fit=crop"
              alt="Office Location Map"
              width={1200}
              height={400}
              className="w-full h-full object-cover"
            />
          </motion.div>
        </div>
      </section>

{/* FAQ Section */}
      <section className="py-20 bg-gray-50">
        <div className="container mx-auto px-4">
          <motion.div
            className="text-center mb-12"
            initial="hidden"
            whileInView="visible"
            viewport={{ once: true }}
            variants={fadeIn}
            transition={{ duration: 0.6 }}
          >
            <h2 className="text-3xl font-bold text-purple-700 mb-4">Frequently Asked Questions</h2>
            <p className="text-gray-700 max-w-2xl mx-auto">
              Find answers to common questions about our services, booking process, and more.
            </p>
          </motion.div>

<div className="max-w-3xl mx-auto space-y-4 md:space-y-6">
            {[
              {
                question: "How do I book a tour with Athu Tourism?",
                answer:
                  "You can book a tour through our website by selecting your desired destination and following the booking process. Alternatively, you can contact our team via phone or email for personalized assistance.",
              },
              {
                question: "What payment methods do you accept?",
                answer:
                  "We accept all major credit cards, PayPal, and bank transfers. For certain destinations, we also offer installment payment plans.",
              },
              {
                question: "Can I customize my tour package?",
                answer:
                  "We specialize in creating customized itineraries based on your preferences, budget, and travel style. Contact our team to discuss your requirements.",
              },
              {
                question: "What is your cancellation policy?",
                answer:
                  "Our cancellation policy varies depending on the destination and package. Generally, cancellations made 30 days or more before departure receive a full refund minus a small administrative fee. Please refer to the specific terms for your booking.",
              },
            ].map((faq, index) => (
              <motion.div
                key={index}
                className="mb-6 bg-white p-6 rounded-lg shadow-sm"
                initial="hidden"
                whileInView="visible"
                viewport={{ once: true }}
                variants={fadeIn}
                transition={{ duration: 0.5, delay: index * 0.1 }}
              >
                <h3 className="text-lg font-medium text-purple-700 mb-2">{faq.question}</h3>
                <p className="text-gray-700">{faq.answer}</p>
              </motion.div>
            ))}
          </div>
        </div>
      </section>

{/* Call to Action */}
      <section className="py-20 bg-gradient-to-r from-purple-600 to-indigo-700 text-white">
        <div className="container mx-auto px-4 text-center">
          <motion.div
            initial="hidden"
            whileInView="visible"
            viewport={{ once: true }}
            variants={fadeIn}
            transition={{ duration: 0.6 }}
          >
            <h2 className="text-3xl font-bold mb-4">Ready to Start Your Adventure?</h2>
            <p className="text-xl mb-8 max-w-2xl mx-auto">
              Our team is ready to help you plan the perfect vacation. Contact us today!
            </p>
            <Button
              size="lg"
              className="bg-gradient-to-r from-pink-500 to-purple-600 hover:from-pink-600 hover:to-purple-700 text-white shadow-lg hover:shadow-xl transition-all duration-300"
            >
              Book Your Trip Now
            </Button>
          </motion.div>
        </div>
      </section>
    </main>
  )
}

[V0_FILE]typescriptreact:file="app/tours/page.tsx" isQuickEdit="true"
import Image from "next/image"
import Link from "next/link"
import { Button } from "@/components/ui/button"
import { Card, CardContent, CardFooter } from "@/components/ui/card"
import { Badge } from "@/components/ui/badge"
import { MapPin, Calendar, Users, Star } from "lucide-react"

export default function ToursPage() {
  const tours = [
    {
      id: 1,
      name: "Tropical Island Hopping",
      location: "Thailand",
      image: "https://images.unsplash.com/photo-1537996194471-e657df975ab4?q=80&w=600&auto=format&fit=crop",
      price: "$1,499",
      duration: "10 days",
      groupSize: "12 people max",
      rating: 4.8,
      featured: true,
      description:
        "Explore the stunning islands of Thailand with crystal clear waters, white sandy beaches, and vibrant marine life.",
    },
    {
      id: 2,
      name: "Alpine Adventure",
      location: "Switzerland",
      image: "https://images.unsplash.com/photo-1531210483974-4f8c1f33fd35?q=80&w=600&auto=format&fit=crop",
      price: "$1,899",
      duration: "7 days",
      groupSize: "8 people max",
      rating: 4.9,
      featured: false,
      description:
        "Experience the breathtaking beauty of the Swiss Alps with hiking, skiing, and authentic mountain village stays.",
    },
    {
      id: 3,
      name: "Cultural Heritage Tour",
      location: "Japan",
      image: "https://images.unsplash.com/photo-1528360983277-13d401cdc186?q=80&w=600&auto=format&fit=crop",
      price: "$2,199",
      duration: "12 days",
      groupSize: "10 people max",
      rating: 4.7,
      featured: false,
      description:
        "Immerse yourself in Japanese culture with visits to ancient temples, traditional tea ceremonies, and bustling modern cities.",
    },
    {
      id: 4,
      name: "Safari Adventure",
      location: "Kenya",
      image: "https://images.unsplash.com/photo-1523805009345-7448845a9e53?q=80&w=600&auto=format&fit=crop",
      price: "$2,499",
      duration: "8 days",
      groupSize: "6 people max",
      rating: 4.9,
      featured: true,
      description:
        "Witness the majestic wildlife of Africa in their natural habitat on an unforgettable safari adventure.",
    },
    {
      id: 5,
      name: "Mediterranean Cruise",
      location: "Greece & Italy",
      image: "https://images.unsplash.com/photo-1516483638261-f4dbaf036963?q=80&w=600&auto=format&fit=crop",
      price: "$1,999",
      duration: "14 days",
      groupSize: "20 people max",
      rating: 4.6,
      featured: false,
      description:
        "Sail the crystal blue waters of the Mediterranean, exploring ancient ruins, charming villages, and beautiful beaches.",
    },
    {
      id: 6,
      name: "Amazon Expedition",
      location: "Brazil",
      image: "https://images.unsplash.com/photo-1518182170546-07661fd94144?q=80&w=600&auto=format&fit=crop",
      price: "$2,299",
      duration: "9 days",
      groupSize: "8 people max",
      rating: 4.8,
      featured: false,
      description:
        "Venture into the heart of the Amazon rainforest to discover incredible biodiversity and indigenous cultures.",
    },
  ]

const categories = [
    { name: "Adventure", icon: "🧗‍♂️" },
    { name: "Beach", icon: "🏖️" },
    { name: "Cultural", icon: "🏛️" },
    { name: "Wildlife", icon: "🦁" },
    { name: "City Break", icon: "🏙️" },
    { name: "Cruise", icon: "🚢" },
  ]

return (
    <main className="pt-20">
      {/* Hero Section */}
      <section className="relative h-[50vh] flex items-center">
        <div className="absolute inset-0 z-0">
          <Image
            src="https://images.unsplash.com/photo-1501785888041-af3ef285b470?q=80&w=1920&auto=format&fit=crop"
            alt="Tours"
            fill
            className="object-cover"
          />
          <div className="absolute inset-0 bg-gradient-to-r from-teal-900/80 to-teal-900/60" />
        </div>

<div className="container relative z-10 mx-auto px-4">
          <div className="max-w-2xl text-white">
            <h1 className="text-5xl font-bold mb-4">Explore Our Tours</h1>
            <p className="text-xl mb-8">
              Discover our carefully crafted tour packages designed to provide unforgettable experiences around the
              world.
            </p>
            <Button
              size="lg"
              className="bg-gradient-to-r from-pink-500 to-purple-600 hover:from-pink-600 hover:to-purple-700 text-white shadow-lg hover:shadow-xl transition-all duration-300"
            >
              View All Tours
            </Button>
          </div>
        </div>
      </section>

{/* Tour Categories */}
      <section className="py-12 bg-white">
        <div className="container mx-auto px-4">
          <h2 className="text-2xl font-bold text-teal-900 mb-8 text-center">Browse by Category</h2>

<div className="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-6 gap-3 md:gap-4">
            {categories.map((category, index) => (
              <Link
                key={index}
                href={`/tours/category/${category.name.toLowerCase()}`}
                className="bg-teal-50 hover:bg-teal-100 transition-colors rounded-lg p-4 md:p-6 text-center"
              >
                <span className="text-3xl md:text-4xl mb-2 block">{category.icon}</span>
                <span className="font-medium text-teal-900 text-sm md:text-base">{category.name}</span>
              </Link>
            ))}
          </div>
        </div>
      </section>

{/* Featured Tours */}
      <section className="py-20 bg-gray-50">
        <div className="container mx-auto px-4">
          <h2 className="text-3xl font-bold text-teal-900 mb-12 text-center">Featured Tours</h2>

<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6 md:gap-8">
            {tours
              .filter((tour) => tour.featured)
              .map((tour) => (
                <Card key={tour.id} className="overflow-hidden hover:shadow-xl transition-shadow duration-300">
                  <div className="relative">
                    <Image
                      src={tour.image || "/placeholder.svg"}
                      alt={tour.name}
                      width={600}
                      height={400}
                      className="w-full h-64 object-cover"
                    />
                    <Badge className="absolute top-4 right-4 bg-amber-500 hover:bg-amber-600">Featured</Badge>
                  </div>
                  <CardContent className="p-6">
                    <div className="flex items-center mb-2">
                      <MapPin className="h-4 w-4 text-teal-600 mr-1" />
                      <span className="text-sm text-gray-500">{tour.location}</span>
                    </div>
                    <h3 className="text-xl font-bold mb-2 text-teal-900">{tour.name}</h3>
                    <p className="text-gray-600 mb-4">{tour.description}</p>

<div className="grid grid-cols-3 gap-2 mb-4">
                      <div className="flex items-center">
                        <Calendar className="h-4 w-4 text-teal-600 mr-1" />
                        <span className="text-xs text-gray-600">{tour.duration}</span>
                      </div>
                      <div className="flex items-center">
                        <Users className="h-4 w-4 text-teal-600 mr-1" />
                        <span className="text-xs text-gray-600">{tour.groupSize}</span>
                      </div>
                      <div className="flex items-center">
                        <Star className="h-4 w-4 text-amber-500 mr-1" />
                        <span className="text-xs text-gray-600">{tour.rating}</span>
                      </div>
                    </div>
                  </CardContent>
                  <CardFooter className="p-6 pt-0 flex items-center justify-between">
                    <div className="text-xl font-bold text-teal-900">{tour.price}</div>
                    <Button className="bg-teal-600 hover:bg-teal-700 text-white">
                      <Link href={`/tours/${tour.id}`}>View Details</Link>
                    </Button>
                  </CardFooter>
                </Card>
              ))}
          </div>

<div className="text-center mt-12">
            <Button
              size="lg"
              variant="outline"
              className="border-pink-500 text-pink-600 hover:bg-gradient-to-r hover:from-pink-500 hover:to-purple-600 hover:text-white hover:border-transparent transition-all duration-300"
            >
              <Link href="/tours/featured">View All Featured Tours</Link>
            </Button>
          </div>
        </div>
      </section>

{/* All Tours */}
      <section className="py-20 bg-white">
        <div className="container mx-auto px-4">
          <h2 className="text-3xl font-bold text-teal-900 mb-12 text-center">All Tours</h2>

<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
            {tours.map((tour) => (
              <Card key={tour.id} className="overflow-hidden hover:shadow-xl transition-shadow duration-300">
                <div className="relative">
                  <Image
                    src={tour.image || "/placeholder.svg"}
                    alt={tour.name}
                    width={600}
                    height={400}
                    className="w-full h-64 object-cover"
                  />
                  <div className="absolute top-4 right-4 bg-amber-500 text-white px-3 py-1 rounded-full text-sm font-medium">
                    {tour.price}
                  </div>
                </div>
                <CardContent className="p-6">
                  <div className="flex items-center mb-2">
                    <MapPin className="h-4 w-4 text-teal-600 mr-1" />
                    <span className="text-sm text-gray-500">{tour.location}</span>
                  </div>
                  <h3 className="text-xl font-bold mb-2 text-teal-900">{tour.name}</h3>
                  <p className="text-gray-600 mb-4">{tour.description}</p>

<div className="grid grid-cols-3 gap-2 mb-4">
                    <div className="flex items-center">
                      <Calendar className="h-4 w-4 text-teal-600 mr-1" />
                      <span className="text-xs text-gray-600">{tour.duration}</span>
                    </div>
                    <div className="flex items-center">
                      <Users className="h-4 w-4 text-teal-600 mr-1" />
                      <span className="text-xs text-gray-600">{tour.groupSize}</span>
                    </div>
                    <div className="flex items-center">
                      <Star className="h-4 w-4 text-amber-500 mr-1" />
                      <span className="text-xs text-gray-600">{tour.rating}</span>
                    </div>
                  </div>
                </CardContent>
                <CardFooter className="p-6 pt-0 flex items-center justify-between">
                  <Button variant="outline" className="border-teal-600 text-teal-600 hover:bg-teal-50">
                    <Link href={`/tours/${tour.id}`}>View Details</Link>
                  </Button>
                  <Button className="bg-amber-500 hover:bg-amber-600 text-white">Book Now</Button>
                </CardFooter>
              </Card>
            ))}
          </div>
        </div>
      </section>

{/* Testimonials */}
      <section className="py-20 bg-teal-50">
        <div className="container mx-auto px-4">
          <h2 className="text-3xl font-bold text-teal-900 mb-12 text-center">What Our Travelers Say</h2>

<div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-6 md:gap-8">
            {[
              {
                name: "Emily Johnson",
                location: "New York, USA",
                image: "https://images.unsplash.com/photo-1494790108377-be9c29b29330?q=80&w=100&auto=format&fit=crop",
                text: "The Safari Adventure tour exceeded all my expectations. Our guide was incredibly knowledgeable, and we saw all the Big Five animals. A truly unforgettable experience!",
                tour: "Safari Adventure",
              },
              {
                name: "David Chen",
                location: "Toronto, Canada",
                image: "https://images.unsplash.com/photo-1500648767791-00dcc994a43e?q=80&w=100&auto=format&fit=crop",
                text: "The Cultural Heritage Tour of Japan was the perfect blend of traditional and modern experiences. The attention to detail and the small group size made it feel very personal.",
                tour: "Cultural Heritage Tour",
              },
              {
                name: "Maria Rodriguez",
                location: "Barcelona, Spain",
                image: "https://images.unsplash.com/photo-1580489944761-15a19d654956?q=80&w=100&auto=format&fit=crop",
                text: "Island hopping in Thailand was a dream come true. The accommodations were excellent, the food was amazing, and our guide made sure we experienced the authentic local culture.",
                tour: "Tropical Island Hopping",
              },
            ].map((testimonial, index) => (
              <Card key={index} className="bg-white p-6">
                <div className="flex items-center mb-4">
                  <div className="relative w-12 h-12 rounded-full overflow-hidden mr-4">
                    <Image
                      src={testimonial.image || "/placeholder.svg"}
                      alt={testimonial.name}
                      fill
                      className="object-cover"
                    />
                  </div>
                  <div>
                    <h3 className="font-bold text-gray-900">{testimonial.name}</h3>
                    <p className="text-sm text-gray-500">{testimonial.location}</p>
                  </div>
                </div>
                <div className="mb-4">
                  <div className="flex text-amber-500 mb-2">{"★★★★★"}</div>
                  <p className="text-gray-700 italic">"{testimonial.text}"</p>
                </div>
                <p className="text-sm text-teal-600">Tour: {testimonial.tour}</p>
              </Card>
            ))}
          </div>
        </div>
      </section>

{/* Call to Action */}
      <section className="py-20 bg-gradient-to-r from-teal-600 to-teal-700 text-white">
        <div className="container mx-auto px-4 text-center">
          <h2 className="text-3xl font-bold mb-4">Ready for Your Next Adventure?</h2>
          <p className="text-xl mb-8 max-w-2xl mx-auto">
            Book your dream tour today and create memories that will last a lifetime.
          </p>
          <div className="flex flex-wrap justify-center gap-4">
            <Button
              size="lg"
              className="bg-gradient-to-r from-pink-500 to-purple-600 hover:from-pink-600 hover:to-purple-700 text-white shadow-lg hover:shadow-xl transition-all duration-300"
            >
              Book a Tour
            </Button>
            <Button
              size="lg"
              variant="outline"
              className="border-white text-white hover:bg-white/20 transition-all duration-300"
            >
              <Link href="/contact">Contact Us</Link>
            </Button>
          </div>
        </div>
      </section>
    </main>
  )
}

[V0_FILE]typescriptreact:file="tailwind.config.js"
/** @type {import('tailwindcss').Config} */
module.exports = {
  darkMode: ["class"],
  content: [
    "./pages/**/*.{ts,tsx}",
    "./components/**/*.{ts,tsx}",
    "./app/**/*.{ts,tsx}",
    "./src/**/*.{ts,tsx}",
    "*.{js,ts,jsx,tsx,mdx}",
  ],
  theme: {
    container: {
      center: true,
      padding: "2rem",
      screens: {
        "2xl": "1400px",
      },
    },
    extend: {
      colors: {
        border: "hsl(var(--border))",
        input: "hsl(var(--input))",
        ring: "hsl(var(--ring))",
        background: "hsl(var(--background))",
        foreground: "hsl(var(--foreground))",
        primary: {
          DEFAULT: "hsl(var(--primary))",
          foreground: "hsl(var(--primary-foreground))",
        },
        secondary: {
          DEFAULT: "hsl(var(--secondary))",
          foreground: "hsl(var(--secondary-foreground))",
        },
        destructive: {
          DEFAULT: "hsl(var(--destructive))",
          foreground: "hsl(var(--destructive-foreground))",
        },
        muted: {
          DEFAULT: "hsl(var(--muted))",
          foreground: "hsl(var(--muted-foreground))",
        },
        accent: {
          DEFAULT: "hsl(var(--accent))",
          foreground: "hsl(var(--accent-foreground))",
        },
        popover: {
          DEFAULT: "hsl(var(--popover))",
          foreground: "hsl(var(--popover-foreground))",
        },
        card: {
          DEFAULT: "hsl(var(--card))",
          foreground: "hsl(var(--card-foreground))",
        },
        // Enhanced color palette with more light colors
        teal: {
          50: "#e6fffa",
          100: "#b2f5ea",
          200: "#81e6d9",
          300: "#4fd1c5",
          400: "#38b2ac",
          500: "#319795",
          600: "#2c7a7b",
          700: "#285e61",
          800: "#234e52",
          900: "#1d4044",
        },
        amber: {
          50: "#fffbeb",
          100: "#fef3c7",
          200: "#fde68a",
          300: "#fcd34d",
          400: "#fbbf24",
          500: "#f59e0b",
          600: "#d97706",
          700: "#b45309",
          800: "#92400e",
          900: "#78350f",
        },
        emerald: {
          50: "#ecfdf5",
          100: "#d1fae5",
          200: "#a7f3d0",
          300: "#6ee7b7",
          400: "#34d399",
          500: "#10b981",
          600: "#059669",
          700: "#047857",
          800: "#065f46",
          900: "#064e3b",
        },
        // New light colors
        sky: {
          50: "#f0f9ff",
          100: "#e0f2fe",
          200: "#bae6fd",
          300: "#7dd3fc",
          400: "#38bdf8",
          500: "#0ea5e9",
          600: "#0284c7",
          700: "#0369a1",
          800: "#075985",
          900: "#0c4a6e",
        },
        rose: {
          50: "#fff1f2",
          100: "#ffe4e6",
          200: "#fecdd3",
          300: "#fda4af",
          400: "#fb7185",
          500: "#f43f5e",
          600: "#e11d48",
          700: "#be123c",
          800: "#9f1239",
          900: "#881337",
        },
        purple: {
          50: "#faf5ff",
          100: "#f3e8ff",
          200: "#e9d5ff",
          300: "#d8b4fe",
          400: "#c084fc",
          500: "#a855f7",
          600: "#9333ea",
          700: "#7e22ce",
          800: "#6b21a8",
          900: "#581c87",
        },
        lime: {
          50: "#f7fee7",
          100: "#ecfccb",
          200: "#d9f99d",
          300: "#bef264",
          400: "#a3e635",
          500: "#84cc16",
          600: "#65a30d",
          700: "#4d7c0f",
          800: "#3f6212",
          900: "#365314",
        },
      },
      borderRadius: {
        lg: "var(--radius)",
        md: "calc(var(--radius) - 2px)",
        sm: "calc(var(--radius) - 4px)",
      },
      keyframes: {
        "accordion-down": {
          from: { height: 0 },
          to: { height: "var(--radix-accordion-content-height)" },
        },
        "accordion-up": {
          from: { height: "var(--radix-accordion-content-height)" },
          to: { height: 0 },
        },
        float: {
          "0%, 100%": { transform: "translateY(0)" },
          "50%": { transform: "translateY(-10px)" },
        },
        "pulse-slow": {
          "0%, 100%": { opacity: 1 },
          "50%": { opacity: 0.7 },
        },
      },
      animation: {
        "accordion-down": "accordion-down 0.2s ease-out",
        "accordion-up": "accordion-up 0.2s ease-out",
        float: "float 3s ease-in-out infinite",
        "pulse-slow": "pulse-slow 4s cubic-bezier(0.4, 0, 0.6, 1) infinite",
      },
    },
  },
  plugins: [require("tailwindcss-animate")],
}

[V0_FILE]typescriptreact:file="components/welcome-banner.tsx" isQuickEdit="true"
"use client"

import { useState, useEffect } from "react"
import { motion } from "framer-motion"
import { Button } from "@/components/ui/button"
import Link from "next/link"

export default function WelcomeBanner() {
  const [visible, setVisible] = useState(true)

useEffect(() => {
    const timer = setTimeout(() => {
      setVisible(false)
    }, 10000) // Banner will auto-hide after 10 seconds

return () => clearTimeout(timer)
  }, [])

if (!visible) return null

return (
    <motion.div
      className="fixed bottom-4 right-4 z-50 max-w-md bg-gradient-to-r from-pink-500 to-purple-600 rounded-lg shadow-lg overflow-hidden"
      initial={{ opacity: 0, y: 50 }}
      animate={{ opacity: 1, y: 0 }}
      exit={{ opacity: 0, y: 50 }}
      transition={{ duration: 0.5 }}
    >
      <div className="p-6">
        <h3 className="text-lg font-bold text-white mb-2">Welcome to Athu Tourism!</h3>
        <p className="text-white/90 mb-4">Discover amazing destinations and create unforgettable memories with us.</p>
        <div className="flex space-x-2">
          <Button size="sm" className="bg-white text-purple-600 hover:bg-gray-100 transition-all duration-300">
            <Link href="/tours">Explore Tours</Link>
          </Button>
          <Button
            size="sm"
            variant="outline"
            className="border-white text-white hover:bg-white/20 transition-all duration-300"
            onClick={() => setVisible(false)}
          >
            Close
          </Button>
        </div>
      </div>
    </motion.div>
  )
}

[V0_FILE]typescriptreact:file="app/tours/[id]/page.tsx" isQuickEdit="true"
import Image from "next/image"
import Link from "next/link"
import { Button } from "@/components/ui/button"
import { Badge } from "@/components/ui/badge"
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
import { MapPin, Calendar, Users, Star, Check, Info, Map, Camera, Utensils } from "lucide-react"

// This would normally come from a database or API
const getTourData = (id) => {
  const tours = {
    "1": {
      id: 1,
      name: "Tropical Island Hopping",
      location: "Thailand",
      images: [
        "https://images.unsplash.com/photo-1537996194471-e657df975ab4?q=80&w=800&auto=format&fit=crop",
        "https://images.unsplash.com/photo-1552465011-b4e21bf6e79a?q=80&w=800&auto=format&fit=crop",
        "https://images.unsplash.com/photo-1468413253725-0d5181091126?q=80&w=800&auto=format&fit=crop",
      ],
      price: "$1,499",
      duration: "10 days",
      groupSize: "12 people max",
      rating: 4.8,
      featured: true,
      description:
        "Explore the stunning islands of Thailand with crystal clear waters, white sandy beaches, and vibrant marine life. This 10-day adventure takes you through the most beautiful islands including Phuket, Phi Phi, and Krabi.",
      highlights: [
        "Island hopping to 5 different tropical paradises",
        "Snorkeling in crystal clear waters with colorful marine life",
        "Traditional Thai cooking class with local ingredients",
        "Sunset beach dinners and cultural performances",
        "Guided tours of ancient temples and local markets",
      ],
      itinerary: [
        {
          day: 1,
          title: "Arrival in Bangkok",
          description:
            "Welcome to Thailand! Arrive in Bangkok and transfer to your hotel. Evening welcome dinner and orientation.",
        },
        {
          day: 2,
          title: "Bangkok City Tour",
          description:
            "Explore the vibrant city of Bangkok, visiting the Grand Palace, Wat Pho, and taking a boat ride along the canals.",
        },
        {
          day: 3,
          title: "Fly to Phuket",
          description: "Morning flight to Phuket. Afternoon at leisure to explore the beaches and local markets.",
        },
        {
          day: 4,
          title: "Phi Phi Islands",
          description: "Full-day speedboat tour to the stunning Phi Phi Islands. Snorkeling, swimming, and beach time.",
        },
        {
          day: 5,
          title: "Phuket Free Day",
          description:
            "Day at leisure in Phuket. Optional activities include spa treatments, cooking classes, or exploring the old town.",
        },
      ],
      included: [
        "All accommodations (9 nights)",
        "Daily breakfast and select meals",
        "All transportation including domestic flights",
        "English-speaking guides",
        "Entrance fees to attractions",
        "Island hopping tours and activities",
      ],
      reviews: [
        {
          name: "Sarah Johnson",
          rating: 5,
          comment:
            "This tour exceeded all my expectations! The islands were breathtaking and our guide was incredibly knowledgeable.",
        },
        {
          name: "Michael Chen",
          rating: 4,
          comment: "Great experience overall. The island hopping was amazing, though some days felt a bit rushed.",
        },
        {
          name: "Emma Williams",
          rating: 5,
          comment:
            "Absolutely perfect vacation! The beaches were pristine and the tour was well organized from start to finish.",
        },
      ],
    },
    "2": {
      id: 2,
      name: "European Cultural Tour",
      location: "Italy & France",
      images: [
        "https://images.unsplash.com/photo-1499856871958-5b9627545d1a?q=80&w=800&auto=format&fit=crop",
        "https://images.unsplash.com/photo-1520175480921-4edfa2983e0f?q=80&w=800&auto=format&fit=crop",
        "https://images.unsplash.com/photo-1503917988258-f87a78e3c995?q=80&w=800&auto=format&fit=crop",
      ],
      price: "$1,899",
      duration: "10 days",
      groupSize: "16 people max",
      rating: 4.9,
      featured: false,
      description:
        "Immerse yourself in the rich culture and history of Italy and France. Visit iconic landmarks, enjoy authentic cuisine, and experience the charm of European cities.",
      highlights: [
        "Skip-the-line access to major attractions",
        "Wine tasting in Tuscany and Champagne regions",
        "Guided tours of the Louvre and Vatican Museums",
        "Authentic cooking classes in both countries",
        "Scenic train journey through the Alps",
      ],
      itinerary: [
        {
          day: 1,
          title: "Arrival in Rome",
          description:
            "Welcome to Italy! Arrive in Rome and transfer to your hotel. Evening welcome dinner in a traditional trattoria.",
        },
        {
          day: 2,
          title: "Ancient Rome",
          description: "Explore the Colosseum, Roman Forum, and Palatine Hill with a knowledgeable guide.",
        },
        {
          day: 3,
          title: "Vatican City",
          description: "Visit the Vatican Museums, Sistine Chapel, and St. Peter's Basilica. Afternoon at leisure.",
        },
        {
          day: 4,
          title: "Florence",
          description:
            "Train to Florence. Afternoon walking tour including the Duomo, Ponte Vecchio, and Piazza della Signoria.",
        },
        {
          day: 5,
          title: "Tuscany Day Trip",
          description: "Full-day excursion to the Tuscan countryside with wine tasting and lunch at a local vineyard.",
        },
      ],
      included: [
        "All accommodations (9 nights)",
        "Daily breakfast and select meals",
        "First-class train transportation",
        "Skip-the-line museum passes",
        "Expert local guides",
        "Wine tastings and cooking classes",
      ],
      reviews: [
        {
          name: "David Thompson",
          rating: 5,
          comment:
            "This tour was the perfect introduction to European culture. The guides were exceptional and the experiences authentic.",
        },
        {
          name: "Jennifer Lopez",
          rating: 5,
          comment: "Every detail was perfectly planned. The small group size made it feel personalized and intimate.",
        },
        {
          name: "Robert Wilson",
          rating: 4,
          comment:
            "Wonderful cultural immersion. The pace was good though some free time in Paris would have been nice.",
        },
      ],
    },
  }

return tours[id] || null
}

export default function TourDetailPage({ params }) {
  const tour = getTourData(params.id)

if (!tour) {
    return (
      <div className="container mx-auto px-4 py-20 text-center">
        <h1 className="text-3xl font-bold text-gray-900 mb-4">Tour Not Found</h1>
        <p className="text-gray-600 mb-8">The tour you're looking for doesn't exist or has been removed.</p>
        <Button>
          <Link href="/tours">Back to Tours</Link>
        </Button>
      </div>
    )
  }

return (
    <main className="pt-20 pb-20">
      {/* Hero Section */}
      <section className="relative h-[50vh]">
        <div className="absolute inset-0">
          <Image src={tour.images[0] || "/placeholder.svg"} alt={tour.name} fill className="object-cover" />
          <div className="absolute inset-0 bg-gradient-to-t from-black/70 to-black/30" />
        </div>

<div className="container relative h-full mx-auto px-4 flex items-end pb-12">
          <div className="text-white">
            <div className="flex items-center mb-2">
              <MapPin className="h-5 w-5 text-amber-400 mr-2" />
              <span className="text-lg">{tour.location}</span>
              {tour.featured && <Badge className="ml-4 bg-amber-500">Featured Tour</Badge>}
            </div>
            <h1 className="text-4xl md:text-5xl font-bold mb-4">{tour.name}</h1>
            <div className="flex flex-wrap items-center gap-6">
              <div className="flex items-center">
                <Calendar className="h-5 w-5 text-amber-400 mr-2" />
                <span>{tour.duration}</span>
              </div>
              <div className="flex items-center">
                <Users className="h-5 w-5 text-amber-400 mr-2" />
                <span>{tour.groupSize}</span>
              </div>
              <div className="flex items-center">
                <Star className="h-5 w-5 text-amber-400 mr-2" />
                <span>{tour.rating} (120+ reviews)</span>
              </div>
            </div>
          </div>
        </div>
      </section>

{/* Tour Content */}
      <section className="py-12 bg-white">
        <div className="container mx-auto px-4">
          <div className="flex flex-col lg:flex-row gap-8 lg:gap-12">
            {/* Main Content */}
            <div className="w-full lg:w-2/3">
              <Tabs defaultValue="overview" className="w-full">
                <TabsList className="w-full justify-start mb-8 bg-gray-100 p-1 rounded-lg overflow-x-auto flex-nowrap">
                  <TabsTrigger value="overview" className="text-sm md:text-base whitespace-nowrap">
                    Overview
                  </TabsTrigger>
                  <TabsTrigger value="itinerary" className="text-sm md:text-base whitespace-nowrap">
                    Itinerary
                  </TabsTrigger>
                  <TabsTrigger value="gallery" className="text-sm md:text-base whitespace-nowrap">
                    Gallery
                  </TabsTrigger>
                  <TabsTrigger value="reviews" className="text-sm md:text-base whitespace-nowrap">
                    Reviews
                  </TabsTrigger>
                </TabsList>

<TabsContent value="overview" className="mt-0">
                  <div className="prose max-w-none">
                    <h2 className="text-2xl font-bold text-teal-900 mb-4">Tour Overview</h2>
                    <p className="text-gray-700 mb-8">{tour.description}</p>

<h3 className="text-xl font-bold text-teal-900 mb-4">Tour Highlights</h3>
                    <ul className="space-y-2 mb-8">
                      {tour.highlights.map((highlight, index) => (
                        <li key={index} className="flex items-start">
                          <Check className="h-5 w-5 text-teal-600 mr-2 flex-shrink-0 mt-0.5" />
                          <span className="text-gray-700">{highlight}</span>
                        </li>
                      ))}
                    </ul>

<h3 className="text-xl font-bold text-teal-900 mb-4">What's Included</h3>
                    <ul className="space-y-2 mb-8">
                      {tour.included.map((item, index) => (
                        <li key={index} className="flex items-start">
                          <Check className="h-5 w-5 text-teal-600 mr-2 flex-shrink-0 mt-0.5" />
                          <span className="text-gray-700">{item}</span>
                        </li>
                      ))}
                    </ul>
                  </div>
                </TabsContent>

<TabsContent value="itinerary" className="mt-0">
                  <h2 className="text-2xl font-bold text-teal-900 mb-6">Tour Itinerary</h2>
                  <div className="space-y-6">
                    {tour.itinerary.map((day) => (
                      <div key={day.day} className="border-l-4 border-teal-500 pl-6 pb-6">
                        <div className="flex items-center mb-2">
                          <div className="bg-teal-500 text-white rounded-full w-8 h-8 flex items-center justify-center mr-3 flex-shrink-0">
                            {day.day}
                          </div>
                          <h3 className="text-xl font-bold text-teal-900">{day.title}</h3>
                        </div>
                        <p className="text-gray-700">{day.description}</p>
                      </div>
                    ))}
                    <div className="border-l-4 border-teal-500 pl-6 pb-6 border-dashed">
                      <p className="text-gray-500 italic">And more exciting activities for the remaining days...</p>
                    </div>
                  </div>
                </TabsContent>

<TabsContent value="gallery" className="mt-0">
                  <h2 className="text-2xl font-bold text-teal-900 mb-6">Tour Gallery</h2>
                  <div className="grid grid-cols-1 sm:grid-cols-2 gap-4 md:gap-6">
                    {tour.images.map((image, index) => (
                      <div key={index} className="rounded-lg overflow-hidden shadow-md img-hover-zoom">
                        <Image
                          src={image || "/placeholder.svg"}
                          alt={`${tour.name} - Image ${index + 1}`}
                          width={800}
                          height={500}
                          className="w-full h-64 object-cover"
                        />
                      </div>
                    ))}
                  </div>
                </TabsContent>

<TabsContent value="reviews" className="mt-0">
                  <h2 className="text-2xl font-bold text-teal-900 mb-6">Customer Reviews</h2>
                  <div className="space-y-6">
                    {tour.reviews.map((review, index) => (
                      <div key={index} className="bg-gray-50 p-6 rounded-lg">
                        <div className="flex items-center mb-3">
                          <div className="bg-teal-100 text-teal-800 rounded-full w-10 h-10 flex items-center justify-center mr-3">
                            {review.name.charAt(0)}
                          </div>
                          <div>
                            <h4 className="font-bold text-gray-900">{review.name}</h4>
                            <div className="flex text-amber-500">
                              {Array(5)
                                .fill(0)
                                .map((_, i) => (
                                  <Star
                                    key={i}
                                    className={`h-4 w-4 ${i < review.rating ? "fill-current" : "stroke-current fill-none"}`}
                                  />
                                ))}
                            </div>
                          </div>
                        </div>
                        <p className="text-gray-700">{review.comment}</p>
                      </div>
                    ))}
                  </div>
                </TabsContent>
              </Tabs>
            </div>

{/* Sidebar */}
            <div className="w-full lg:w-1/3">
              <div className="bg-white border border-gray-200 rounded-lg shadow-md p-6 sticky top-24">
                <div className="mb-6">
                  <div className="flex items-center justify-between mb-2">
                    <span className="text-gray-600">Price</span>
                    <span className="text-3xl font-bold text-teal-900">{tour.price}</span>
                  </div>
                  <p className="text-sm text-gray-500 mb-6">per person, based on double occupancy</p>
                  <Button className="w-full bg-gradient-to-r from-pink-500 to-purple-600 hover:from-pink-600 hover:to-purple-700 text-white shadow-lg hover:shadow-xl transition-all duration-300 mb-4">
                    Book Now
                  </Button>
                  <Button
                    variant="outline"
                    className="w-full border-pink-500 text-pink-600 hover:bg-gradient-to-r hover:from-pink-500 hover:to-purple-600 hover:text-white hover:border-transparent transition-all duration-300"
                  >
                    <Link href="/contact">Inquire Now</Link>
                  </Button>
                </div>

<div className="border-t border-gray-200 pt-6">
                  <h3 className="font-bold text-gray-900 mb-4">Tour Information</h3>
                  <ul className="space-y-4">
                    <li className="flex items-start">
                      <Calendar className="h-5 w-5 text-teal-600 mr-3 flex-shrink-0 mt-0.5" />
                      <div>
                        <span className="block text-sm font-medium text-gray-900">Duration</span>
                        <span className="text-gray-600">{tour.duration}</span>
                      </div>
                    </li>
                    <li className="flex items-start">
                      <Users className="h-5 w-5 text-teal-600 mr-3 flex-shrink-0 mt-0.5" />
                      <div>
                        <span className="block text-sm font-medium text-gray-900">Group Size</span>
                        <span className="text-gray-600">{tour.groupSize}</span>
                      </div>
                    </li>
                    <li className="flex items-start">
                      <Map className="h-5 w-5 text-teal-600 mr-3 flex-shrink-0 mt-0.5" />
                      <div>
                        <span className="block text-sm font-medium text-gray-900">Location</span>
                        <span className="text-gray-600">{tour.location}</span>
                      </div>
                    </li>
                    <li className="flex items-start">
                      <Camera className="h-5 w-5 text-teal-600 mr-3 flex-shrink-0 mt-0.5" />
                      <div>
                        <span className="block text-sm font-medium text-gray-900">Activities</span>
                        <span className="text-gray-600">Sightseeing, Cultural Experiences, Local Cuisine</span>
                      </div>
                    </li>
                    <li className="flex items-start">
                      <Utensils className="h-5 w-5 text-teal-600 mr-3 flex-shrink-0 mt-0.5" />
                      <div>
                        <span className="block text-sm font-medium text-gray-900">Meals</span>
                        <span className="text-gray-600">Breakfast daily, 3 lunches, 5 dinners</span>
                      </div>
                    </li>
                  </ul>
                </div>

<div className="border-t border-gray-200 pt-6 mt-6">
                  <div className="bg-amber-50 border border-amber-200 rounded-lg p-4">
                    <div className="flex items-start">
                      <Info className="h-5 w-5 text-amber-600 mr-3 flex-shrink-0 mt-0.5" />
                      <div>
                        <h4 className="font-medium text-amber-800 mb-1">Need Help?</h4>
                        <p className="text-sm text-amber-700 mb-2">
                          Our travel experts are ready to assist you with any questions.
                        </p>
                        <Button
                          variant="link"
                          className="text-pink-600 p-0 h-auto hover:text-purple-600 transition-colors"
                        >
                          <Link href="/contact">Contact Us</Link>
                        </Button>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>

{/* Related Tours */}
      <section className="py-12 bg-gray-50">
        <div className="container mx-auto px-4">
          <h2 className="text-2xl font-bold text-teal-900 mb-8">You Might Also Like</h2>
          <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-4 md:gap-6">
            {[
              {
                id: 3,
                name: "Safari Adventure",
                location: "Kenya",
                image: "https://images.unsplash.com/photo-1523805009345-7448845a9e53?q=80&w=800&auto=format&fit=crop",
                price: "$2,499",
                duration: "8 days",
              },
              {
                id: 4,
                name: "Northern Lights Expedition",
                location: "Iceland",
                image: "https://images.unsplash.com/photo-1531366936337-7c912a4589a7?q=80&w=800&auto=format&fit=crop",
                price: "$1,899",
                duration: "6 days",
              },
              {
                id: 5,
                name: "Ancient Wonders Tour",
                location: "Egypt",
                image: "https://images.unsplash.com/photo-1568322445389-f64ac2515020?q=80&w=800&auto=format&fit=crop",
                price: "$2,199",
                duration: "9 days",
              },
            ].map((relatedTour) => (
              <div key={relatedTour.id} className="bg-white rounded-lg overflow-hidden shadow-md card-hover">
                <div className="relative h-48 img-hover-zoom">
                  <Image
                    src={relatedTour.image || "/placeholder.svg"}
                    alt={relatedTour.name}
                    fill
                    className="object-cover"
                  />
                </div>
                <div className="p-4">
                  <div className="flex items-center mb-1">
                    <MapPin className="h-4 w-4 text-teal-600 mr-1" />
                    <span className="text-xs text-gray-500">{relatedTour.location}</span>
                  </div>
                  <h3 className="font-bold text-gray-900 mb-2">{relatedTour.name}</h3>
                  <div className="flex items-center justify-between">
                    <div>
                      <span className="block text-xs text-gray-500">{relatedTour.duration}</span>
                      <span className="font-bold text-teal-600">{relatedTour.price}</span>
                    </div>
                    <Button
                      size="sm"
                      className="bg-gradient-to-r from-pink-500 to-purple-600 hover:from-pink-600 hover:to-purple-700 text-white shadow-sm hover:shadow-md transition-all duration-300"
                    >
                      <Link href={`/tours/${relatedTour.id}`}>View</Link>
                    </Button>
                  </div>
                </div>
              </div>
            ))}
          </div>
        </div>
      </section>
    </main>
  )
}

[V0_FILE]typescriptreact:file="app/destinations/loading.tsx" isFixed="true"
export default function Loading() {
  return null
}

[V0_FILE]typescriptreact:file="components/glowing-logo.tsx"
"use client"

import { useState, useEffect } from "react"
import { motion } from "framer-motion"
import { useRouter } from "next/navigation"

export default function GlowingLogo() {
  const router = useRouter()
  const [glowIntensity, setGlowIntensity] = useState(0)
  const [hovered, setHovered] = useState(false)

useEffect(() => {
    const interval = setInterval(() => {
      setGlowIntensity((prev) => (prev === 20 ? 0 : prev + 1))
    }, 100)

return () => clearInterval(interval)
  }, [])

return (
    <motion.div
      className="relative"
      initial={{ opacity: 0, x: -20 }}
      animate={{ opacity: 1, x: 0 }}
      transition={{ duration: 0.5 }}
      onHoverStart={() => setHovered(true)}
      onHoverEnd={() => setHovered(false)}
      onClick={() => router.push("/")}
      style={{ cursor: "pointer" }}
    >
      <motion.div
        className="text-2xl font-bold flex items-center"
        animate={hovered ? { scale: 1.05 } : { scale: 1 }}
        transition={{ duration: 0.3 }}
      >
        <span className="text-transparent bg-clip-text bg-gradient-to-r from-pink-400 to-purple-400">Athu</span>
        <span className="text-transparent bg-clip-text bg-gradient-to-r from-purple-400 to-indigo-400 ml-1">
          Tourism
        </span>
        <motion.div
          className="w-2 h-2 rounded-full bg-pink-500 ml-1"
          animate={{
            scale: [1, 1.5, 1],
            opacity: [0.7, 1, 0.7],
          }}
          transition={{
            duration: 2,
            repeat: Number.POSITIVE_INFINITY,
            repeatType: "reverse",
          }}
        />
      </motion.div>
      <motion.span
        className="absolute inset-0 text-transparent bg-clip-text bg-gradient-to-r from-pink-400 to-indigo-400 blur-[4px]"
        style={{ opacity: 0.3 + glowIntensity / 50 }}
        animate={hovered ? { opacity: 0.8 } : {}}
      >
        <span>Athu</span>
        <span className="ml-1">Tourism</span>
      </motion.span>
    </motion.div>
  )
}

[V0_FILE]typescriptreact:file="components/navbar.tsx"
"use client"

import { useState, useEffect } from "react"
import Link from "next/link"
import { Menu, X, Sun, Moon } from "lucide-react"
import { Button } from "@/components/ui/button"
import { motion, AnimatePresence } from "framer-motion"
import GlowingLogo from "./glowing-logo"
import { useRouter } from "next/navigation"

export default function Navbar() {
  const router = useRouter()
  const [isOpen, setIsOpen] = useState(false)
  const [isDarkMode, setIsDarkMode] = useState(false)
  const [isScrolled, setIsScrolled] = useState(false)

useEffect(() => {
    const handleScroll = () => {
      if (window.scrollY > 10) {
        setIsScrolled(true)
      } else {
        setIsScrolled(false)
      }
    }

window.addEventListener("scroll", handleScroll)

return () => {
      window.removeEventListener("scroll", handleScroll)
    }
  }, [])

const toggleDarkMode = () => {
    setIsDarkMode(!isDarkMode)
    document.documentElement.classList.toggle("dark")
  }

const navLinks = [
    { name: "Home", href: "/" },
    { name: "Destinations", href: "/destinations" },
    { name: "About", href: "/about" },
    { name: "Tours", href: "/tours" },
    { name: "Contact", href: "/contact" },
  ]

const handleNavClick = (e, href) => {
    e.preventDefault()

// Close mobile menu if open
    if (isOpen) {
      setIsOpen(false)
    }

// Navigate without page reload
    router.push(href)
  }

return (
    <header
      className={`fixed w-full z-50 transition-all duration-500 ${
        isScrolled ? "bg-gradient-to-r bg-opacity-90 backdrop-blur-md shadow-md" : "bg-transparent"
      } ${isScrolled ? "from-purple-600 to-indigo-700" : ""}`}
    >
      <div className="container mx-auto px-4">
        <div className="flex items-center justify-between h-20">
          <GlowingLogo />

{/* Desktop Navigation */}
          <nav className="hidden md:flex items-center space-x-8">
            {navLinks.map((link, index) => (
              <motion.div
                key={link.name}
                initial={{ opacity: 0, y: -10 }}
                animate={{ opacity: 1, y: 0 }}
                transition={{ duration: 0.3, delay: index * 0.1 }}
              >
                <Link
                  href={link.href}
                  onClick={(e) => handleNavClick(e, link.href)}
                  className={`text-sm font-medium transition-colors hover:text-yellow-300 ${
                    isScrolled ? "text-white" : "text-white"
                  }`}
                >
                  {link.name}
                </Link>
              </motion.div>
            ))}
            <motion.div
              initial={{ opacity: 0, scale: 0.8 }}
              animate={{ opacity: 1, scale: 1 }}
              transition={{ duration: 0.3, delay: 0.5 }}
            >
              <Button
                className="bg-gradient-to-r from-pink-500 to-purple-600 hover:from-pink-600 hover:to-purple-700 text-white shadow-lg hover:shadow-xl transition-all duration-300"
                onClick={() => router.push("/booking")}
              >
                Book Now
              </Button>
            </motion.div>
            <motion.button
              onClick={toggleDarkMode}
              className="p-2 rounded-full bg-white/20 backdrop-blur-sm text-white"
              initial={{ opacity: 0, rotate: -30 }}
              animate={{ opacity: 1, rotate: 0 }}
              transition={{ duration: 0.5 }}
              whileHover={{ scale: 1.1 }}
            >
              {isDarkMode ? <Sun size={20} /> : <Moon size={20} />}
            </motion.button>
          </nav>

{/* Mobile Menu Button */}
          <div className="md:hidden flex items-center">
            <button onClick={toggleDarkMode} className="p-2 mr-2 rounded-full bg-white/20 backdrop-blur-sm text-white">
              {isDarkMode ? <Sun size={20} /> : <Moon size={20} />}
            </button>
            <button
              onClick={() => setIsOpen(!isOpen)}
              className={`p-2 rounded-md text-white bg-white/10 backdrop-blur-sm`}
            >
              {isOpen ? <X size={24} /> : <Menu size={24} />}
            </button>
          </div>
        </div>
      </div>

{/* Mobile Navigation */}
      <AnimatePresence>
        {isOpen && (
          <motion.div
            className="md:hidden bg-gradient-to-r from-purple-600 to-indigo-700 shadow-lg"
            initial={{ opacity: 0, height: 0 }}
            animate={{ opacity: 1, height: "auto" }}
            exit={{ opacity: 0, height: 0 }}
            transition={{ duration: 0.3 }}
          >
            <div className="container mx-auto px-4 py-6">
              <nav className="flex flex-col space-y-5">
                {navLinks.map((link) => (
                  <Link
                    key={link.name}
                    href={link.href}
                    onClick={(e) => handleNavClick(e, link.href)}
                    className="text-white hover:text-amber-300 py-2 text-lg font-medium"
                  >
                    {link.name}
                  </Link>
                ))}
                <Button
                  className="bg-gradient-to-r from-pink-500 to-purple-600 hover:from-pink-600 hover:to-purple-700 text-white w-full py-6 shadow-lg hover:shadow-xl transition-all duration-300"
                  onClick={() => {
                    setIsOpen(false)
                    router.push("/booking")
                  }}
                >
                  Book Now
                </Button>
              </nav>
            </div>
          </motion.div>
        )}
      </AnimatePresence>
    </header>
  )
}

[V0_FILE]typescriptreact:file="components/footer.tsx"
"use client"

import Link from "next/link"
import { Facebook, Twitter, Instagram, Youtube, Mail, Phone, MapPin, Send } from "lucide-react"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { useState } from "react"
import { useRouter } from "next/navigation"

export default function Footer() {
  const router = useRouter()
  const [email, setEmail] = useState("")
  const [subscribed, setSubscribed] = useState(false)

const handleSubscribe = (e) => {
    e.preventDefault()
    if (email) {
      // In a real application, you would send this to your backend
      console.log("Subscribed with email:", email)
      setSubscribed(true)
      setTimeout(() => {
        setSubscribed(false)
        setEmail("")
      }, 5000)
    }
  }

const handleNavClick = (e, href) => {
    e.preventDefault()
    router.push(href)
  }

return (
    <footer className="bg-gradient-to-r from-purple-900 to-indigo-900 text-white">
      <div className="container mx-auto px-4 py-16">
        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8">
          {/* Company Info */}
          <div>
            <h3 className="text-2xl font-bold mb-4">Athu Tourism</h3>
            <p className="mb-4 text-indigo-100">
              Discover the world with our expert guides and carefully crafted experiences.
            </p>
            <div className="flex space-x-4">
              <a
                href="https://facebook.com"
                target="_blank"
                rel="noopener noreferrer"
                className="social-icon facebook"
                aria-label="Facebook"
              >
                <Facebook size={20} />
              </a>
              <a
                href="https://twitter.com"
                target="_blank"
                rel="noopener noreferrer"
                className="social-icon twitter"
                aria-label="Twitter"
              >
                <Twitter size={20} />
              </a>
              <a
                href="https://instagram.com/ig_atharva_wagh"
                target="_blank"
                rel="noopener noreferrer"
                className="social-icon instagram"
                aria-label="Instagram"
              >
                <Instagram size={20} />
              </a>
              <a
                href="https://youtube.com"
                target="_blank"
                rel="noopener noreferrer"
                className="social-icon youtube"
                aria-label="YouTube"
              >
                <Youtube size={20} />
              </a>
            </div>
          </div>

{/* Quick Links */}
          <div>
            <h3 className="text-xl font-bold mb-4">Quick Links</h3>
            <ul className="space-y-2">
              {[
                { name: "Home", href: "/" },
                { name: "About Us", href: "/about" },
                { name: "Destinations", href: "/destinations" },
                { name: "Tours", href: "/tours" },
                { name: "Contact", href: "/contact" },
              ].map((item) => (
                <li key={item.name}>
                  <Link
                    href={item.href}
                    onClick={(e) => handleNavClick(e, item.href)}
                    className="text-indigo-100 hover:text-pink-300 transition-colors"
                  >
                    {item.name}
                  </Link>
                </li>
              ))}
            </ul>
          </div>

{/* Contact Info */}
          <div>
            <h3 className="text-xl font-bold mb-4">Contact Us</h3>
            <ul className="space-y-3">
              <li className="flex items-start">
                <MapPin className="h-5 w-5 mr-2 text-pink-400 flex-shrink-0 mt-0.5" />
                <span className="text-indigo-100">tal-junnar, dist-pune, pimpalwandi (waghpatta) pin:-412412</span>
              </li>
              <li className="flex items-center">
                <Phone className="h-5 w-5 mr-2 text-pink-400" />
                <a href="tel:+918421998085" className="text-indigo-100 hover:text-pink-300 transition-colors">
                  +91 8421998085
                </a>
              </li>
              <li className="flex items-center">
                <Mail className="h-5 w-5 mr-2 text-pink-400" />
                <a
                  href="mailto:waghatharva230@gmail.com"
                  className="text-indigo-100 hover:text-pink-300 transition-colors"
                >
                  waghatharva230@gmail.com
                </a>
              </li>
            </ul>
          </div>

{/* Newsletter */}
          <div>
            <h3 className="text-xl font-bold mb-4">Newsletter</h3>
            <p className="mb-4 text-indigo-100">Subscribe to our newsletter for the latest updates and offers.</p>
            <form onSubmit={handleSubscribe} className="flex flex-col space-y-2">
              <div className="relative">
                <Input
                  type="email"
                  placeholder="Your email address"
                  className="bg-indigo-800/50 border-indigo-700 text-white placeholder:text-indigo-300 pr-10"
                  value={email}
                  onChange={(e) => setEmail(e.target.value)}
                  required
                />
                <button
                  type="submit"
                  className="absolute right-2 top-1/2 transform -translate-y-1/2 text-pink-400 hover:text-pink-300"
                >
                  <Send size={18} />
                </button>
              </div>
              <Button
                type="submit"
                className="bg-gradient-to-r from-pink-500 to-purple-600 hover:from-pink-600 hover:to-purple-700 text-white w-full shadow-lg hover:shadow-xl transition-all duration-300"
              >
                Subscribe
              </Button>
              {subscribed && (
                <div className="text-sm bg-green-800/50 text-green-200 p-2 rounded">
                  Thank you for subscribing! Check your email for confirmation.
                </div>
              )}
            </form>
          </div>
        </div>

<div className="border-t border-indigo-800 mt-12 pt-8 text-center text-indigo-100">
          <p>© {new Date().getFullYear()} Athu Tourism. All rights reserved.</p>
        </div>
      </div>
    </footer>
  )
}

[V0_FILE]typescriptreact:file="app/destinations/page.tsx"
import Image from "next/image"
import Link from "next/link"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
import { MapPin, Star, Calendar, Users, Search } from "lucide-react"

export default function DestinationsPage() {
  const destinations = [
    {
      id: 1,
      name: "Tropical Paradise",
      location: "Maldives",
      image: "https://images.unsplash.com/photo-1573843981267-be1999ff37cd?q=80&w=600&auto=format&fit=crop",
      price: "$1,299",
      rating: 4.8,
      description:
        "Crystal clear waters, white sandy beaches, and luxurious overwater bungalows await in this tropical paradise.",
      activities: ["Snorkeling", "Scuba Diving", "Beach Relaxation"],
    },
    {
      id: 2,
      name: "Mountain Retreat",
      location: "Switzerland",
      image: "https://images.unsplash.com/photo-1531210483974-4f8c1f33fd35?q=80&w=600&auto=format&fit=crop",
      price: "$1,499",
      rating: 4.9,
      description:
        "Breathtaking alpine views, charming villages, and world-class skiing in the heart of the Swiss Alps.",
      activities: ["Skiing", "Hiking", "Mountain Biking"],
    },
    {
      id: 3,
      name: "Cultural Heritage",
      location: "Japan",
      image: "https://images.unsplash.com/photo-1528360983277-13d401cdc186?q=80&w=600&auto=format&fit=crop",
      price: "$1,199",
      rating: 4.7,
      description:
        "Ancient temples, bustling cities, and serene gardens showcase Japan's unique blend of tradition and modernity.",
      activities: ["Temple Visits", "Tea Ceremonies", "City Tours"],
    },
    {
      id: 4,
      name: "Safari Adventure",
      location: "Kenya",
      image: "https://images.unsplash.com/photo-1523805009345-7448845a9e53?q=80&w=600&auto=format&fit=crop",
      price: "$1,899",
      rating: 4.9,
      description:
        "Witness the majestic wildlife of Africa in their natural habitat on an unforgettable safari adventure.",
      activities: ["Game Drives", "Hot Air Balloon Rides", "Cultural Visits"],
    },
    {
      id: 5,
      name: "Historical Journey",
      location: "Italy",
      image: "https://images.unsplash.com/photo-1516483638261-f4dbaf036963?q=80&w=600&auto=format&fit=crop",
      price: "$1,399",
      rating: 4.8,
      description:
        "Explore ancient ruins, Renaissance art, and indulge in world-famous cuisine in the heart of Europe.",
      activities: ["Museum Tours", "Wine Tasting", "Cooking Classes"],
    },
    {
      id: 6,
      name: "Island Paradise",
      location: "Bali, Indonesia",
      image: "https://images.unsplash.com/photo-1537996194471-e657df975ab4?q=80&w=600&auto=format&fit=crop",
      price: "$999",
      rating: 4.6,
      description: "Lush rice terraces, sacred temples, and vibrant culture make this island a must-visit destination.",
      activities: ["Surfing", "Temple Tours", "Spa Treatments"],
    },
  ]

return (
    <main className="pt-20">
      {/* Hero Section */}
      <section className="relative h-[50vh] flex items-center">
        <div className="absolute inset-0 z-0">
          <Image
            src="https://images.unsplash.com/photo-1469854523086-cc02fe5d8800?q=80&w=1920&auto=format&fit=crop"
            alt="Destinations"
            fill
            className="object-cover"
          />
          <div className="absolute inset-0 bg-gradient-to-r from-purple-900/80 to-indigo-900/60" />
        </div>

<div className="container relative z-10 mx-auto px-4">
          <div className="max-w-2xl text-white">
            <h1 className="text-5xl font-bold mb-4 text-amber-300">Explore Our Destinations</h1>
            <p className="text-xl mb-8 text-white">
              Discover handpicked destinations around the world, each offering unique experiences and unforgettable
              memories.
            </p>

{/* Search Form */}
            <div className="bg-white p-4 md:p-6 rounded-lg shadow-lg">
              <div className="grid grid-cols-1 gap-4">
                <div>
                  <label className="block text-gray-700 text-sm font-medium mb-2">Destination</label>
                  <div className="relative">
                    <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400 h-4 w-4" />
                    <Input
                      placeholder="Where to?"
                      className="pl-10 bg-gray-50 border-gray-200 text-gray-800 placeholder:text-gray-400"
                    />
                  </div>
                </div>
                <div>
                  <label className="block text-gray-700 text-sm font-medium mb-2">Travel Type</label>
                  <Select>
                    <SelectTrigger className="bg-gray-50 border-gray-200 text-gray-800">
                      <SelectValue placeholder="Select type" className="text-gray-800" />
                    </SelectTrigger>
                    <SelectContent>
                      <SelectItem value="beach">Beach</SelectItem>
                      <SelectItem value="mountain">Mountain</SelectItem>
                      <SelectItem value="city">City</SelectItem>
                      <SelectItem value="cultural">Cultural</SelectItem>
                      <SelectItem value="adventure">Adventure</SelectItem>
                    </SelectContent>
                  </Select>
                </div>
                <div className="flex items-end">
                  <Button className="w-full bg-gradient-to-r from-pink-500 to-purple-600 hover:from-pink-600 hover:to-purple-700 text-white shadow-lg hover:shadow-xl transition-all duration-300">
                    Search
                  </Button>
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>

{/* Destinations Grid */}
      <section className="py-20 bg-gray-50">
        <div className="container mx-auto px-4">
          <h2 className="text-3xl font-bold text-purple-700 mb-12 text-center">Popular Destinations</h2>

<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
            {destinations.map((destination) => (
              <div
                key={destination.id}
                className="bg-white rounded-lg overflow-hidden shadow-md hover:shadow-xl transition-shadow duration-300"
              >
                <div className="relative h-64">
                  <Image
                    src={destination.image || "/placeholder.svg"}
                    alt={destination.name}
                    fill
                    className="object-cover"
                  />
                  <div className="absolute top-4 right-4 bg-amber-500 text-white px-3 py-1 rounded-full text-sm font-medium">
                    {destination.price}
                  </div>
                </div>
                <div className="p-6">
                  <div className="flex items-center mb-2">
                    <MapPin className="h-4 w-4 text-purple-600 mr-1" />
                    <span className="text-sm text-gray-500">{destination.location}</span>
                  </div>
                  <h3 className="text-xl font-bold mb-2 text-purple-700">{destination.name}</h3>
                  <p className="text-gray-600 mb-4">{destination.description}</p>

<div className="mb-4">
                    <h4 className="text-sm font-semibold text-gray-700 mb-2">Popular Activities:</h4>
                    <div className="flex flex-wrap gap-2">
                      {destination.activities.map((activity, index) => (
                        <span key={index} className="bg-purple-50 text-purple-700 text-xs px-2 py-1 rounded">
                          {activity}
                        </span>
                      ))}
                    </div>
                  </div>

<div className="flex items-center justify-between mt-4">
                    <div className="flex items-center">
                      <Star className="h-4 w-4 text-amber-500 mr-1" />
                      <span className="text-sm text-gray-600">{destination.rating} (120 reviews)</span>
                    </div>
                    <Button
                      variant="outline"
                      className="text-purple-600 border-purple-600 hover:bg-gradient-to-r hover:from-pink-500 hover:to-purple-600 hover:text-white hover:border-transparent transition-all duration-300"
                    >
                      <Link href={`/tours/${destination.id}`}>View Details</Link>
                    </Button>
                  </div>
                </div>
              </div>
            ))}
          </div>
        </div>
      </section>

{/* Featured Destination */}
      <section className="py-20 bg-white">
        <div className="container mx-auto px-4">
          <div className="flex flex-col lg:flex-row items-center gap-12">
            <div className="lg:w-1/2">
              <div className="relative h-[500px] rounded-lg overflow-hidden shadow-xl">
                <Image
                  src="https://images.unsplash.com/photo-1570077188670-e3a8d69ac5ff?q=80&w=1200&auto=format&fit=crop"
                  alt="Featured Destination"
                  fill
                  className="object-cover"
                />
              </div>
            </div>

<div className="lg:w-1/2">
              <span className="inline-block bg-amber-100 text-amber-800 text-sm font-medium px-3 py-1 rounded-full mb-4">
                Featured Destination
              </span>
              <h2 className="text-3xl font-bold text-purple-700 mb-4">Santorini, Greece</h2>
              <div className="flex items-center mb-4">
                <Star className="h-4 w-4 text-amber-500 mr-1" />
                <span className="text-sm text-gray-600">4.9 (250 reviews)</span>
              </div>
              <p className="text-gray-700 mb-6">
                Discover the magic of Santorini, with its iconic white-washed buildings, blue-domed churches, and
                breathtaking sunsets over the Aegean Sea. This Greek paradise offers a perfect blend of natural beauty,
                rich history, and luxurious experiences.
              </p>

<div className="grid grid-cols-2 gap-4 mb-6">
                <div className="flex items-center">
                  <Calendar className="h-5 w-5 text-purple-600 mr-2" />
                  <div>
                    <p className="text-sm font-medium text-gray-900">Best Time to Visit</p>
                    <p className="text-sm text-gray-600">April to October</p>
                  </div>
                </div>
                <div className="flex items-center">
                  <Users className="h-5 w-5 text-purple-600 mr-2" />
                  <div>
                    <p className="text-sm font-medium text-gray-900">Perfect For</p>
                    <p className="text-sm text-gray-600">Couples, Families</p>
                  </div>
                </div>
              </div>

<div className="flex items-center justify-between bg-gray-50 p-4 rounded-lg mb-6">
                <div>
                  <p className="text-sm text-gray-600">Starting from</p>
                  <p className="text-2xl font-bold text-purple-700">$1,799</p>
                </div>
                <Button className="bg-gradient-to-r from-pink-500 to-purple-600 hover:from-pink-600 hover:to-purple-700 text-white shadow-lg hover:shadow-xl transition-all duration-300">
                  <Link href="/tours/1">View Package</Link>
                </Button>
              </div>
            </div>
          </div>
        </div>
      </section>

{/* Call to Action */}
      <section className="py-20 bg-gradient-to-r from-purple-600 to-indigo-700 text-white">
        <div className="container mx-auto px-4 text-center">
          <h2 className="text-3xl font-bold mb-4">Can't Find Your Dream Destination?</h2>
          <p className="text-xl mb-8 max-w-2xl mx-auto">
            Our travel experts can help you create a custom itinerary tailored to your preferences and budget.
          </p>
          <Button
            size="lg"
            className="bg-gradient-to-r from-pink-500 to-purple-600 hover:from-pink-600 hover:to-purple-700 text-white shadow-lg hover:shadow-xl transition-all duration-300"
          >
            <Link href="/contact">Contact Our Experts</Link>
          </Button>
        </div>
      </section>
    </main>
  )
}

[V0_FILE]css:file="app/globals.css"
@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
  :root {
    --background: 0 0% 100%;
    --foreground: 222.2 84% 4.9%;

--card: 0 0% 100%;
    --card-foreground: 222.2 84% 4.9%;

--popover: 0 0% 100%;
    --popover-foreground: 222.2 84% 4.9%;

--primary: 173 80% 40%;
    --primary-foreground: 210 40% 98%;

--secondary: 210 40% 96.1%;
    --secondary-foreground: 222.2 47.4% 11.2%;

--muted: 210 40% 96.1%;
    --muted-foreground: 215.4 16.3% 46.9%;

--accent: 210 40% 96.1%;
    --accent-foreground: 222.2 47.4% 11.2%;

--destructive: 0 84.2% 60.2%;
    --destructive-foreground: 210 40% 98%;

--border: 214.3 31.8% 91.4%;
    --input: 214.3 31.8% 91.4%;
    --ring: 173 80% 40%;

--radius: 0.5rem;
  }

.dark {
    --background: 222.2 84% 4.9%;
    --foreground: 210 40% 98%;

--card: 222.2 84% 4.9%;
    --card-foreground: 210 40% 98%;

--popover: 222.2 84% 4.9%;
    --popover-foreground: 210 40% 98%;

--primary: 173 80% 40%;
    --primary-foreground: 222.2 47.4% 11.2%;

--secondary: 217.2 32.6% 17.5%;
    --secondary-foreground: 210 40% 98%;

--muted: 217.2 32.6% 17.5%;
    --muted-foreground: 215 20.2% 65.1%;

--accent: 217.2 32.6% 17.5%;
    --accent-foreground: 210 40% 98%;

--destructive: 0 62.8% 30.6%;
    --destructive-foreground: 210 40% 98%;

--border: 217.2 32.6% 17.5%;
    --input: 217.2 32.6% 17.5%;
    --ring: 173 80% 40%;
  }
}

@layer base {
  * {
    @apply border-border;
  }
  body {
    @apply bg-background text-foreground;
    scroll-behavior: smooth;
  }
  html {
    scroll-behavior: smooth;
  }
}

/* Custom animations */
@keyframes float {
  0% {
    transform: translateY(0px);
  }
  50% {
    transform: translateY(-10px);
  }
  100% {
    transform: translateY(0px);
  }
}

.animate-float {
  animation: float 3s ease-in-out infinite;
}

@keyframes pulse {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.7;
  }
}

.animate-pulse-slow {
  animation: pulse 4s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

/* Gradient backgrounds */
.bg-gradient-pastel {
  background: linear-gradient(135deg, #e0f2fe 0%, #d1fae5 50%, #ffe4e6 100%);
}

.bg-gradient-sunset {
  background: linear-gradient(135deg, #fef3c7 0%, #fda4af 100%);
}

.bg-gradient-ocean {
  background: linear-gradient(135deg, #bae6fd 0%, #a7f3d0 100%);
}

.bg-gradient-lavender {
  background: linear-gradient(135deg, #e9d5ff 0%, #bae6fd 100%);
}

/* Image hover effects */
.img-hover-zoom {
  overflow: hidden;
}

.img-hover-zoom img {
  transition: transform 0.5s ease, filter 0.5s ease;
}

.img-hover-zoom:hover img {
  transform: scale(1.08);
  filter: brightness(1.1);
}

/* Card hover effects */
.card-hover {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.card-hover:hover {
  transform: translateY(-8px);
  box-shadow: 0 20px 30px -10px rgba(0, 0, 0, 0.2);
}

/* Add these responsive utility classes at the end of the file */

/* Responsive text sizes */
.text-responsive {
  font-size: clamp(1rem, 2.5vw, 1.25rem);
}

.title-responsive {
  font-size: clamp(1.5rem, 5vw, 3rem);
}

/* Responsive spacing */
.p-responsive {
  padding: clamp(1rem, 3vw, 2rem);
}

.m-responsive {
  margin: clamp(1rem, 3vw, 2rem);
}

/* Responsive container for small screens */
@media (max-width: 640px) {
  .container {
    padding-left: 1rem;
    padding-right: 1rem;
  }

h1 {
    font-size: clamp(2rem, 8vw, 3rem);
  }

h2 {
    font-size: clamp(1.5rem, 6vw, 2.5rem);
  }

.card-hover:hover {
    transform: none;
  }
}

/* Improved image display on mobile */
@media (max-width: 768px) {
  .img-hover-zoom:hover img {
    transform: none;
  }

.hero-text-container {
    padding-top: 4rem;
    padding-bottom: 4rem;
  }
}

/* Glowing effects */
.glow {
  animation: glow 2s ease-in-out infinite alternate;
}

@keyframes glow {
  from {
    text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 15px #e60073, 0 0 20px #e60073, 0 0 25px #e60073, 0 0 30px #e60073, 0
      0 35px #e60073;
  }
  to {
    text-shadow: 0 0 10px #fff, 0 0 20px #ff4da6, 0 0 30px #ff4da6, 0 0 40px #ff4da6, 0 0 50px #ff4da6, 0 0 60px #ff4da6,
      0 0 70px #ff4da6;
  }
}

/* Color changing animations */
.color-change-bg {
  background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab);
  background-size: 400% 400%;
  animation: gradient 15s ease infinite;
}

@keyframes gradient {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

/* Add these styles for the glowing social media icons */
.social-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.1);
  transition: all 0.3s ease;
  position: relative;
}

.social-icon::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.social-icon:hover {
  transform: translateY(-3px);
}

.social-icon:hover::before {
  opacity: 1;
  box-shadow: 0 0 15px 5px;
}

.social-icon.facebook::before {
  box-shadow: 0 0 15px 5px rgba(24, 119, 242, 0.7);
}

.social-icon.twitter::before {
  box-shadow: 0 0 15px 5px rgba(29, 161, 242, 0.7);
}

.social-icon.instagram::before {
  box-shadow: 0 0 15px 5px rgba(225, 48, 108, 0.7);
}

.social-icon.youtube::before {
  box-shadow: 0 0 15px 5px rgba(255, 0, 0, 0.7);
}

/* Enhanced button styles */
.btn-gradient {
  background-size: 200% auto;
  transition: all 0.5s ease;
}

.btn-gradient:hover {
  background-position: right center;
}

[V0_FILE]typescriptreact:file="components/scroll-handler.tsx"
"use client"

import { useEffect } from "react"

export default function ScrollHandler() {
  useEffect(() => {
    // Smooth scroll to top when page loads
    window.scrollTo({ top: 0, behavior: "smooth" })

// Handle internal link clicks for smooth scrolling
    const handleLinkClick = (e: MouseEvent) => {
      const target = (e.target as HTMLElement).closest("a")
      if (target && target.href && target.href.startsWith(window.location.origin)) {
        e.preventDefault()

// Smooth scroll to top
        window.scrollTo({ top: 0, behavior: "smooth" })

// Navigate after scroll animation
        setTimeout(() => {
          window.location.href = target.href
        }, 500)
      }
    }

document.addEventListener("click", handleLinkClick)

return () => {
      document.removeEventListener("click", handleLinkClick)
    }
  }, [])

return null
}

[V0_FILE]typescriptreact:file="app/layout.tsx" isQuickEdit="true"
import type React from "react"
import type { Metadata } from "next"
import { Inter } from "next/font/google"
import "./globals.css"
import Navbar from "@/components/navbar"
import Footer from "@/components/footer"
import ScrollHandler from "@/components/scroll-handler"

const inter = Inter({ subsets: ["latin"] })

export const metadata: Metadata = {
  title: "Athu Tourism - Discover the World",
  description: "Explore breathtaking destinations around the world with Athu Tourism. Book your dream vacation today!",
  generator: "v0.dev",
}

export default function RootLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <html lang="en">
      <body className={inter.className}>
        <ScrollHandler />
        <Navbar />
        {children}
        <Footer />
      </body>
    </html>
  )
}

[V0_FILE]typescriptreact:file="app/booking/page.tsx"
"use client"

import { useState } from "react"
import Image from "next/image"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Textarea } from "@/components/ui/textarea"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
import { Calendar, Clock, CreditCard, MapPin, Users, Check } from "lucide-react"
import { motion } from "framer-motion"
import { Checkbox } from "@/components/ui/checkbox"
import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group"
import { Label } from "@/components/ui/label"

export default function BookingPage() {
  const [step, setStep] = useState(1)
  const [formState, setFormState] = useState({
    firstName: "",
    lastName: "",
    email: "",
    phone: "",
    destination: "",
    travelDate: "",
    duration: "",
    adults: "2",
    children: "0",
    accommodation: "hotel",
    specialRequests: "",
    paymentMethod: "credit-card",
    agreeTerms: false,
  })

const [isSubmitting, setIsSubmitting] = useState(false)
  const [isSubmitted, setIsSubmitted] = useState(false)

const handleChange = (e) => {
    const { name, value, type, checked } = e.target
    setFormState((prev) => ({
      ...prev,
      [name]: type === "checkbox" ? checked : value,
    }))
  }

const handleSelectChange = (name, value) => {
    setFormState((prev) => ({ ...prev, [name]: value }))
  }

const handleSubmit = (e) => {
    e.preventDefault()
    setIsSubmitting(true)

// Simulate form submission
    setTimeout(() => {
      setIsSubmitting(false)
      setIsSubmitted(true)
      window.scrollTo({ top: 0, behavior: "smooth" })
    }, 1500)
  }

const nextStep = () => {
    setStep(step + 1)
    window.scrollTo({ top: 0, behavior: "smooth" })
  }

const prevStep = () => {
    setStep(step - 1)
    window.scrollTo({ top: 0, behavior: "smooth" })
  }

const fadeIn = {
    hidden: { opacity: 0, y: 20 },
    visible: { opacity: 1, y: 0 },
  }

const destinations = [
    { value: "maldives", label: "Maldives - Tropical Paradise" },
    { value: "switzerland", label: "Switzerland - Mountain Retreat" },
    { value: "japan", label: "Japan - Cultural Heritage" },
    { value: "kenya", label: "Kenya - Safari Adventure" },
    { value: "italy", label: "Italy - Historical Journey" },
    { value: "bali", label: "Bali - Island Paradise" },
  ]

return (
    <main className="pt-20 pb-20">
      {/* Hero Section */}
      <section className="relative h-[40vh] flex items-center">
        <div className="absolute inset-0 z-0">
          <Image
            src="https://images.unsplash.com/photo-1476514525535-07fb3b4ae5f1?q=80&w=1920&auto=format&fit=crop"
            alt="Book Your Tour"
            fill
            className="object-cover"
          />
          <div className="absolute inset-0 bg-gradient-to-r from-purple-900/80 to-indigo-900/60" />
        </div>

<div className="container relative z-10 mx-auto px-4">
          <motion.div
            className="max-w-2xl text-white"
            initial="hidden"
            animate="visible"
            variants={fadeIn}
            transition={{ duration: 0.8 }}
          >
            <h1 className="text-5xl font-bold mb-4">Book Your Dream Vacation</h1>
            <p className="text-xl">Fill out the form below to start planning your next adventure with Athu Tourism.</p>
          </motion.div>
        </div>
      </section>

{/* Booking Form */}
      <section className="py-20 bg-gray-50">
        <div className="container mx-auto px-4">
          {isSubmitted ? (
            <motion.div
              className="max-w-3xl mx-auto bg-white p-8 rounded-lg shadow-lg"
              initial="hidden"
              animate="visible"
              variants={fadeIn}
            >
              <div className="text-center mb-8">
                <div className="inline-flex items-center justify-center w-16 h-16 bg-green-100 rounded-full mb-4">
                  <Check className="h-8 w-8 text-green-600" />
                </div>
                <h2 className="text-2xl font-bold text-purple-700 mb-2">Booking Request Submitted!</h2>
                <p className="text-gray-600">
                  Thank you for booking with Athu Tourism. We've received your request and will contact you within 24
                  hours to confirm your booking details and process payment.
                </p>
              </div>
              <div className="bg-purple-50 p-6 rounded-lg mb-6">
                <h3 className="font-bold text-purple-700 mb-4">What happens next?</h3>
                <ol className="space-y-2 text-gray-700">
                  <li className="flex items-start">
                    <span className="bg-purple-200 text-purple-800 w-6 h-6 rounded-full flex items-center justify-center mr-2 flex-shrink-0">
                      1
                    </span>
                    <span>Our travel expert will review your booking request</span>
                  </li>
                  <li className="flex items-start">
                    <span className="bg-purple-200 text-purple-800 w-6 h-6 rounded-full flex items-center justify-center mr-2 flex-shrink-0">
                      2
                    </span>
                    <span>We'll contact you via email or phone to confirm details and discuss any customizations</span>
                  </li>
                  <li className="flex items-start">
                    <span className="bg-purple-200 text-purple-800 w-6 h-6 rounded-full flex items-center justify-center mr-2 flex-shrink-0">
                      3
                    </span>
                    <span>Once confirmed, we'll send you a secure payment link</span>
                  </li>
                  <li className="flex items-start">
                    <span className="bg-purple-200 text-purple-800 w-6 h-6 rounded-full flex items-center justify-center mr-2 flex-shrink-0">
                      4
                    </span>
                    <span>After payment, you'll receive your complete travel documents and itinerary</span>
                  </li>
                </ol>
              </div>
              <div className="text-center">
                <Button
                  className="bg-gradient-to-r from-pink-500 to-purple-600 hover:from-pink-600 hover:to-purple-700 text-white shadow-lg hover:shadow-xl transition-all duration-300"
                  onClick={() => (window.location.href = "/")}
                >
                  Return to Homepage
                </Button>
              </div>
            </motion.div>
          ) : (
            <div className="max-w-3xl mx-auto">
              <div className="mb-8">
                <div className="flex items-center justify-between mb-4">
                  {[1, 2, 3].map((stepNumber) => (
                    <div key={stepNumber} className="flex flex-col items-center">
                      <div
                        className={`w-10 h-10 rounded-full flex items-center justify-center mb-2 ${
                          step === stepNumber
                            ? "bg-gradient-to-r from-pink-500 to-purple-600 text-white"
                            : step > stepNumber
                              ? "bg-green-500 text-white"
                              : "bg-gray-200 text-gray-500"
                        }`}
                      >
                        {step > stepNumber ? <Check className="h-5 w-5" /> : stepNumber}
                      </div>
                      <span
                        className={`text-sm ${step === stepNumber ? "text-purple-700 font-medium" : "text-gray-500"}`}
                      >
                        {stepNumber === 1 ? "Personal Details" : stepNumber === 2 ? "Trip Details" : "Payment"}
                      </span>
                    </div>
                  ))}
                </div>
                <div className="w-full bg-gray-200 h-2 rounded-full overflow-hidden">
                  <div
                    className="h-full bg-gradient-to-r from-pink-500 to-purple-600 transition-all duration-500"
                    style={{ width: `${(step / 3) * 100}%` }}
                  ></div>
                </div>
              </div>

<motion.div
                className="bg-white p-8 rounded-lg shadow-lg"
                key={step}
                initial="hidden"
                animate="visible"
                variants={fadeIn}
              >
                <form onSubmit={handleSubmit}>
                  {step === 1 && (
                    <div>
                      <h2 className="text-2xl font-bold text-purple-700 mb-6">Personal Information</h2>
                      <div className="grid grid-cols-1 md:grid-cols-2 gap-6 mb-6">
                        <div>
                          <label htmlFor="firstName" className="block text-sm font-medium text-gray-700 mb-1">
                            First Name
                          </label>
                          <Input
                            id="firstName"
                            name="firstName"
                            value={formState.firstName}
                            onChange={handleChange}
                            placeholder="John"
                            required
                            className="text-gray-800 placeholder:text-gray-400"
                          />
                        </div>
                        <div>
                          <label htmlFor="lastName" className="block text-sm font-medium text-gray-700 mb-1">
                            Last Name
                          </label>
                          <Input
                            id="lastName"
                            name="lastName"
                            value={formState.lastName}
                            onChange={handleChange}
                            placeholder="Doe"
                            required
                            className="text-gray-800 placeholder:text-gray-400"
                          />
                        </div>
                        <div>
                          <label htmlFor="email" className="block text-sm font-medium text-gray-700 mb-1">
                            Email Address
                          </label>
                          <Input
                            id="email"
                            name="email"
                            type="email"
                            value={formState.email}
                            onChange={handleChange}
                            placeholder="john@example.com"
                            required
                            className="text-gray-800 placeholder:text-gray-400"
                          />
                        </div>
                        <div>
                          <label htmlFor="phone" className="block text-sm font-medium text-gray-700 mb-1">
                            Phone Number
                          </label>
                          <Input
                            id="phone"
                            name="phone"
                            value={formState.phone}
                            onChange={handleChange}
                            placeholder="+91 8421998085"
                            required
                            className="text-gray-800 placeholder:text-gray-400"
                          />
                        </div>
                      </div>
                      <div className="flex justify-end">
                        <Button
                          type="button"
                          onClick={nextStep}
                          className="bg-gradient-to-r from-pink-500 to-purple-600 hover:from-pink-600 hover:to-purple-700 text-white shadow-lg hover:shadow-xl transition-all duration-300"
                        >
                          Next Step
                        </Button>
                      </div>
                    </div>
                  )}

{step === 2 && (
                    <div>
                      <h2 className="text-2xl font-bold text-purple-700 mb-6">Trip Details</h2>
                      <div className="space-y-6 mb-6">
                        <div>
                          <label htmlFor="destination" className="block text-sm font-medium text-gray-700 mb-1">
                            Destination
                          </label>
                          <Select
                            value={formState.destination}
                            onValueChange={(value) => handleSelectChange("destination", value)}
                          >
                            <SelectTrigger id="destination" className="text-gray-800">
                              <SelectValue placeholder="Select a destination" className="text-gray-800" />
                            </SelectTrigger>
                            <SelectContent>
                              {destinations.map((dest) => (
                                <SelectItem key={dest.value} value={dest.value}>
                                  {dest.label}
                                </SelectItem>
                              ))}
                            </SelectContent>
                          </Select>
                        </div>

<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
                          <div>
                            <label htmlFor="travelDate" className="block text-sm font-medium text-gray-700 mb-1">
                              Preferred Travel Date
                            </label>
                            <div className="flex items-center">
                              <Calendar className="h-5 w-5 text-purple-600 mr-2" />
                              <Input
                                id="travelDate"
                                name="travelDate"
                                type="date"
                                value={formState.travelDate}
                                onChange={handleChange}
                                required
                                className="text-gray-800"
                              />
                            </div>
                          </div>
                          <div>
                            <label htmlFor="duration" className="block text-sm font-medium text-gray-700 mb-1">
                              Trip Duration
                            </label>
                            <div className="flex items-center">
                              <Clock className="h-5 w-5 text-purple-600 mr-2" />
                              <Select
                                value={formState.duration}
                                onValueChange={(value) => handleSelectChange("duration", value)}
                              >
                                <SelectTrigger id="duration" className="text-gray-800">
                                  <SelectValue placeholder="Select duration" className="text-gray-800" />
                                </SelectTrigger>
                                <SelectContent>
                                  <SelectItem value="3-5">3-5 days</SelectItem>
                                  <SelectItem value="6-8">6-8 days</SelectItem>
                                  <SelectItem value="9-12">9-12 days</SelectItem>
                                  <SelectItem value="13+">13+ days</SelectItem>
                                </SelectContent>
                              </Select>
                            </div>
                          </div>
                        </div>

<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
                          <div>
                            <label htmlFor="adults" className="block text-sm font-medium text-gray-700 mb-1">
                              Number of Adults
                            </label>
                            <div className="flex items-center">
                              <Users className="h-5 w-5 text-purple-600 mr-2" />
                              <Select
                                value={formState.adults}
                                onValueChange={(value) => handleSelectChange("adults", value)}
                              >
                                <SelectTrigger id="adults" className="text-gray-800">
                                  <SelectValue placeholder="Select number" className="text-gray-800" />
                                </SelectTrigger>
                                <SelectContent>
                                  {[1, 2, 3, 4, 5, 6, 7, 8, 9, 10].map((num) => (
                                    <SelectItem key={num} value={num.toString()}>
                                      {num}
                                    </SelectItem>
                                  ))}
                                </SelectContent>
                              </Select>
                            </div>
                          </div>
                          <div>
                            <label htmlFor="children" className="block text-sm font-medium text-gray-700 mb-1">
                              Number of Children
                            </label>
                            <div className="flex items-center">
                              <Users className="h-5 w-5 text-purple-600 mr-2" />
                              <Select
                                value={formState.children}
                                onValueChange={(value) => handleSelectChange("children", value)}
                              >
                                <SelectTrigger id="children" className="text-gray-800">
                                  <SelectValue placeholder="Select number" className="text-gray-800" />
                                </SelectTrigger>
                                <SelectContent>
                                  {[0, 1, 2, 3, 4, 5, 6].map((num) => (
                                    <SelectItem key={num} value={num.toString()}>
                                      {num}
                                    </SelectItem>
                                  ))}
                                </SelectContent>
                              </Select>
                            </div>
                          </div>
                        </div>

<div>
                          <label className="block text-sm font-medium text-gray-700 mb-1">
                            Preferred Accommodation
                          </label>
                          <RadioGroup
                            value={formState.accommodation}
                            onValueChange={(value) => handleSelectChange("accommodation", value)}
                            className="flex flex-col space-y-2"
                          >
                            <div className="flex items-center space-x-2">
                              <RadioGroupItem value="hotel" id="hotel" />
                              <Label htmlFor="hotel">Hotel</Label>
                            </div>
                            <div className="flex items-center space-x-2">
                              <RadioGroupItem value="resort" id="resort" />
                              <Label htmlFor="resort">Resort</Label>
                            </div>
                            <div className="flex items-center space-x-2">
                              <RadioGroupItem value="villa" id="villa" />
                              <Label htmlFor="villa">Private Villa</Label>
                            </div>
                          </RadioGroup>
                        </div>

<div>
                          <label htmlFor="specialRequests" className="block text-sm font-medium text-gray-700 mb-1">
                            Special Requests or Requirements
                          </label>
                          <Textarea
                            id="specialRequests"
                            name="specialRequests"
                            value={formState.specialRequests}
                            onChange={handleChange}
                            placeholder="Any dietary restrictions, accessibility needs, or special occasions?"
                            rows={4}
                            className="text-gray-800 placeholder:text-gray-400"
                          />
                        </div>
                      </div>
                      <div className="flex justify-between">
                        <Button
                          type="button"
                          onClick={prevStep}
                          variant="outline"
                          className="border-purple-600 text-purple-600 hover:bg-purple-50"
                        >
                          Previous
                        </Button>
                        <Button
                          type="button"
                          onClick={nextStep}
                          className="bg-gradient-to-r from-pink-500 to-purple-600 hover:from-pink-600 hover:to-purple-700 text-white shadow-lg hover:shadow-xl transition-all duration-300"
                        >
                          Next Step
                        </Button>
                      </div>
                    </div>
                  )}

{step === 3 && (
                    <div>
                      <h2 className="text-2xl font-bold text-purple-700 mb-6">Payment Information</h2>
                      <div className="space-y-6 mb-6">
                        <div>
                          <label className="block text-sm font-medium text-gray-700 mb-3">Payment Method</label>
                          <RadioGroup
                            value={formState.paymentMethod}
                            onValueChange={(value) => handleSelectChange("paymentMethod", value)}
                            className="flex flex-col space-y-3"
                          >
                            <div className="flex items-center space-x-2 p-3 border rounded-md hover:bg-gray-50">
                              <RadioGroupItem value="credit-card" id="credit-card" />
                              <Label htmlFor="credit-card" className="flex items-center">
                                <CreditCard className="h-5 w-5 text-purple-600 mr-2" />
                                <span>Credit/Debit Card</span>
                              </Label>
                            </div>
                            <div className="flex items-center space-x-2 p-3 border rounded-md hover:bg-gray-50">
                              <RadioGroupItem value="bank-transfer" id="bank-transfer" />
                              <Label htmlFor="bank-transfer">Bank Transfer</Label>
                            </div>
                            <div className="flex items-center space-x-2 p-3 border rounded-md hover:bg-gray-50">
                              <RadioGroupItem value="paypal" id="paypal" />
                              <Label htmlFor="paypal">PayPal</Label>
                            </div>
                          </RadioGroup>
                        </div>

<div className="bg-purple-50 p-4 rounded-md">
                          <h3 className="font-medium text-purple-700 mb-2">Important Information</h3>
                          <p className="text-sm text-gray-700 mb-2">
                            This is a booking request only. No payment will be processed at this time. Our team will
                            contact you to confirm availability and process the payment.
                          </p>
                          <p className="text-sm text-gray-700">
                            A 20% deposit is required to secure your booking, with the remaining balance due 30 days
                            before your departure date. Cancellation policies will be provided during confirmation.
                          </p>
                        </div>

<div className="flex items-start space-x-2">
                          <Checkbox
                            id="agreeTerms"
                            name="agreeTerms"
                            checked={formState.agreeTerms}
                            onCheckedChange={(checked) => setFormState((prev) => ({ ...prev, agreeTerms: checked }))}
                            required
                          />
                          <label htmlFor="agreeTerms" className="text-sm text-gray-700">
                            I agree to the{" "}
                            <a href="#" className="text-purple-600 hover:underline">
                              Terms and Conditions
                            </a>{" "}
                            and{" "}
                            <a href="#" className="text-purple-600 hover:underline">
                              Privacy Policy
                            </a>
                          </label>
                        </div>
                      </div>

<div className="flex justify-between">
                        <Button
                          type="button"
                          onClick={prevStep}
                          variant="outline"
                          className="border-purple-600 text-purple-600 hover:bg-purple-50"
                        >
                          Previous
                        </Button>
                        <Button
                          type="submit"
                          disabled={isSubmitting || !formState.agreeTerms}
                          className="bg-gradient-to-r from-pink-500 to-purple-600 hover:from-pink-600 hover:to-purple-700 text-white shadow-lg hover:shadow-xl transition-all duration-300"
                        >
                          {isSubmitting ? (
                            <span className="flex items-center">
                              <svg
                                className="animate-spin -ml-1 mr-2 h-4 w-4 text-white"
                                xmlns="http://www.w3.org/2000/svg"
                                fill="none"
                                viewBox="0 0 24 24"
                              >
                                <circle
                                  className="opacity-25"
                                  cx="12"
                                  cy="12"
                                  r="10"
                                  stroke="currentColor"
                                  strokeWidth="4"
                                ></circle>
                                <path
                                  className="opacity-75"
                                  fill="currentColor"
                                  d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
                                ></path>
                              </svg>
                              Processing...
                            </span>
                          ) : (
                            "Submit Booking Request"
                          )}
                        </Button>
                      </div>
                    </div>
                  )}
                </form>
              </motion.div>
            </div>
          )}
        </div>
      </section>

{/* Why Book With Us */}
      <section className="py-16 bg-white">
        <div className="container mx-auto px-4">
          <h2 className="text-3xl font-bold text-purple-700 mb-12 text-center">Why Book With Athu Tourism</h2>

<div className="grid grid-cols-1 md:grid-cols-3 gap-8">
            {[
              {
                icon: <Check className="h-10 w-10 text-purple-600" />,
                title: "Personalized Service",
                description: "Our travel experts create custom itineraries tailored to your preferences and needs.",
              },
              {
                icon: <MapPin className="h-10 w-10 text-purple-600" />,
                title: "Handpicked Destinations",
                description: "We carefully select the most breathtaking and unique locations around the world.",
              },
              {
                icon: <CreditCard className="h-10 w-10 text-purple-600" />,
                title: "Secure Payments",
                description: "All transactions are protected with industry-standard security protocols.",
              },
            ].map((feature, index) => (
              <motion.div
                key={index}
                className="bg-purple-50 p-6 rounded-lg text-center"
                initial="hidden"
                whileInView="visible"
                viewport={{ once: true }}
                variants={fadeIn}
                transition={{ duration: 0.5, delay: index * 0.1 }}
              >
                <div className="inline-flex items-center justify-center w-16 h-16 bg-white rounded-full mb-4">
                  {feature.icon}
                </div>
                <h3 className="text-xl font-bold text-purple-700 mb-2">{feature.title}</h3>
                <p className="text-gray-600">{feature.description}</p>
              </motion.div>
            ))}
          </div>
        </div>
      </section>
    </main>
  )
}

[V0_FILE]typescriptreact:file="app/page.tsx" isQuickEdit="true"
"use client"

import Link from "next/link"
import Image from "next/image"
import { ArrowRight, MapPin, Calendar, Users } from "lucide-react"
import { Button } from "@/components/ui/button"
import { Card, CardContent } from "@/components/ui/card"
import WelcomeBanner from "@/components/welcome-banner"
import { motion } from "framer-motion"

export default function Home() {
  const destinations = [
    {
      id: 1,
      name: "Tropical Paradise",
      location: "Maldives",
      image: "https://images.unsplash.com/photo-1514282401047-d79a71a590e8?q=80&w=600&auto=format&fit=crop",
      price: "$1,299",
      rating: 4.8,
    },
    {
      id: 2,
      name: "Mountain Retreat",
      location: "Switzerland",
      image: "https://images.unsplash.com/photo-1527004013197-933c4bb611b3?q=80&w=600&auto=format&fit=crop",
      price: "$1,499",
      rating: 4.9,
    },
    {
      id: 3,
      name: "Cultural Heritage",
      location: "Japan",
      image: "https://images.unsplash.com/photo-1493976040374-85c8e12f0c0e?q=80&w=600&auto=format&fit=crop",
      price: "$1,199",
      rating: 4.7,
    },
  ]

const fadeIn = {
    hidden: { opacity: 0, y: 20 },
    visible: { opacity: 1, y: 0 },
  }

return (
    <main className="min-h-screen">
      {/* Hero Section */}
      <section className="relative min-h-[90vh] flex items-center justify-center overflow-hidden">
        <div className="absolute inset-0 z-0">
          <Image
            src="https://images.unsplash.com/photo-1476514525535-07fb3b4ae5f1?q=80&w=1920&auto=format&fit=crop"
            alt="Beautiful landscape"
            fill
            className="object-cover"
            priority
          />
          <div className="absolute inset-0 bg-gradient-to-r from-teal-900/70 to-emerald-900/50" />
        </div>

<div className="container relative z-10 mx-auto px-4 py-12 flex flex-col md:flex-row items-center">
          <motion.div
            className="md:w-1/2 text-white"
            initial="hidden"
            animate="visible"
            variants={fadeIn}
            transition={{ duration: 0.8 }}
          >
            <h1 className="text-4xl md:text-5xl lg:text-7xl font-bold mb-4">Discover the World with Athu</h1>
            <p className="text-lg md:text-xl mb-8">
              Unforgettable adventures await. Let us guide you to the most breathtaking destinations around the globe.
            </p>
            <div className="flex flex-wrap gap-4">
              <Button
                size="lg"
                className="bg-gradient-to-r from-pink-500 to-purple-600 hover:from-pink-600 hover:to-purple-700 text-white shadow-lg hover:shadow-xl transition-all duration-300"
              >
                <Link href="/destinations">Explore Destinations</Link>
              </Button>
              <Button
                size="lg"
                variant="outline"
                className="border-pink-500 text-pink-500 hover:bg-gradient-to-r hover:from-pink-500 hover:to-purple-600 hover:text-white hover:border-transparent transition-all duration-300"
              >
                <Link href="/about">Learn More</Link>
              </Button>
            </div>
          </motion.div>

<div className="md:w-1/2 h-[300px] md:h-[400px] mt-8 md:mt-0 flex items-center justify-center">
            <motion.div
              initial={{ opacity: 0, scale: 0.8 }}
              animate={{ opacity: 1, scale: 1 }}
              transition={{ duration: 0.8, delay: 0.2 }}
              className="relative w-full max-w-md h-full"
            >
              <Image
                src="https://images.unsplash.com/photo-1504150558240-0b4fd8946624?q=80&w=800&auto=format&fit=crop"
                alt="Tourists enjoying vacation"
                fill
                className="object-cover rounded-lg shadow-2xl"
              />
              <div className="absolute inset-0 bg-gradient-to-t from-black/50 to-transparent rounded-lg"></div>
              <div className="absolute bottom-6 left-6 right-6 text-white">
                <p className="text-lg font-semibold">Start your journey today</p>
                <p className="text-sm opacity-80">Over 500+ destinations worldwide</p>
              </div>
            </motion.div>
          </div>
        </div>
      </section>

{/* Featured Destinations */}
      <section className="py-20 bg-gradient-ocean">
        <div className="container mx-auto px-4">
          <motion.div
            className="text-center mb-16"
            initial="hidden"
            whileInView="visible"
            viewport={{ once: true }}
            variants={fadeIn}
            transition={{ duration: 0.6 }}
          >
            <h2 className="text-4xl font-bold text-teal-900 mb-4">Featured Destinations</h2>
            <p className="text-lg text-gray-600 max-w-2xl mx-auto">
              Explore our handpicked selection of the most amazing places to visit this season.
            </p>
          </motion.div>

<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6 md:gap-8">
            {destinations.map((destination, index) => (
              <motion.div
                key={destination.id}
                initial="hidden"
                whileInView="visible"
                viewport={{ once: true }}
                variants={fadeIn}
                transition={{ duration: 0.5, delay: index * 0.1 }}
                className="card-hover"
              >
                <Card className="overflow-hidden h-full bg-white/90 backdrop-blur-sm">
                  <div className="relative h-64 img-hover-zoom">
                    <Image
                      src={destination.image || "/placeholder.svg"}
                      alt={destination.name}
                      fill
                      className="object-cover"
                    />
                    <div className="absolute top-4 right-4 bg-amber-500 text-white px-3 py-1 rounded-full text-sm font-medium">
                      {destination.price}
                    </div>
                  </div>
                  <CardContent className="p-6">
                    <div className="flex items-center mb-2">
                      <MapPin className="h-4 w-4 text-teal-600 mr-1" />
                      <span className="text-sm text-gray-500">{destination.location}</span>
                    </div>
                    <h3 className="text-xl font-bold mb-2 text-teal-900">{destination.name}</h3>
                    <div className="flex items-center justify-between mt-4">
                      <div className="flex items-center">
                        <span className="text-amber-500">★★★★★</span>
                        <span className="ml-1 text-sm text-gray-600">{destination.rating}</span>
                      </div>
                      <Button variant="ghost" className="text-teal-600 hover:text-teal-800 p-0">
                        <Link href={`/destinations/${destination.id}`} className="flex items-center">
                          View Details <ArrowRight className="ml-1 h-4 w-4" />
                        </Link>
                      </Button>
                    </div>
                  </CardContent>
                </Card>
              </motion.div>
            ))}
          </div>

<div className="text-center mt-12">
            <Button
              size="lg"
              className="bg-gradient-to-r from-pink-500 to-purple-600 hover:from-pink-600 hover:to-purple-700 text-white shadow-lg hover:shadow-xl transition-all duration-300"
            >
              <Link href="/destinations">View All Destinations</Link>
            </Button>
          </div>
        </div>
      </section>

{/* Why Choose Us */}
      <section className="py-20 bg-gradient-to-r from-sky-600 to-teal-600 text-white">
        <div className="container mx-auto px-4">
          <motion.div
            className="text-center mb-16"
            initial="hidden"
            whileInView="visible"
            viewport={{ once: true }}
            variants={fadeIn}
            transition={{ duration: 0.6 }}
          >
            <h2 className="text-4xl font-bold mb-4">Why Choose Athu Tourism</h2>
            <p className="text-lg max-w-2xl mx-auto text-sky-100">
              We provide unforgettable experiences with personalized service and attention to detail.
            </p>
          </motion.div>

<div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-6 md:gap-8">
            {[
              {
                icon: <MapPin className="h-10 w-10" />,
                title: "Handpicked Destinations",
                description: "We carefully select the most breathtaking and unique locations around the world.",
              },
              {
                icon: <Calendar className="h-10 w-10" />,
                title: "Flexible Scheduling",
                description: "Plan your trip on your terms with our flexible booking and rescheduling options.",
              },
              {
                icon: <Users className="h-10 w-10" />,
                title: "Expert Local Guides",
                description: "Our knowledgeable guides provide authentic insights into local culture and history.",
              },
            ].map((feature, index) => (
              <motion.div
                key={index}
                className="bg-white/10 backdrop-blur-sm p-8 rounded-lg text-center"
                initial="hidden"
                whileInView="visible"
                viewport={{ once: true }}
                variants={fadeIn}
                transition={{ duration: 0.5, delay: index * 0.1 }}
              >
                <div className="bg-white/20 rounded-full p-4 inline-flex mb-6">{feature.icon}</div>
                <h3 className="text-xl font-bold mb-3">{feature.title}</h3>
                <p className="text-sky-100">{feature.description}</p>
              </motion.div>
            ))}
          </div>
        </div>
      </section>

{/* Popular Tours */}
      <section className="py-20 bg-gradient-pastel">
        <div className="container mx-auto px-4">
          <motion.div
            className="text-center mb-16"
            initial="hidden"
            whileInView="visible"
            viewport={{ once: true }}
            variants={fadeIn}
            transition={{ duration: 0.6 }}
          >
            <h2 className="text-4xl font-bold text-purple-900 mb-4">Popular Tours</h2>
            <p className="text-lg text-purple-700 max-w-2xl mx-auto">
              Discover our most loved tour packages and experiences
            </p>
          </motion.div>

<div className="grid grid-cols-1 md:grid-cols-2 gap-8">
            {[
              {
                id: 1,
                name: "Island Paradise Exploration",
                location: "Bali, Indonesia",
                image: "https://images.unsplash.com/photo-1537996194471-e657df975ab4?q=80&w=800&auto=format&fit=crop",
                price: "$999",
                duration: "7 days",
              },
              {
                id: 2,
                name: "European Cultural Tour",
                location: "Italy & France",
                image: "https://images.unsplash.com/photo-1499856871958-5b9627545d1a?q=80&w=800&auto=format&fit=crop",
                price: "$1,899",
                duration: "10 days",
              },
            ].map((tour, index) => (
              <motion.div
                key={tour.id}
                initial="hidden"
                whileInView="visible"
                viewport={{ once: true }}
                variants={fadeIn}
                transition={{ duration: 0.5, delay: index * 0.1 }}
                className="card-hover"
              >
                <div className="bg-white rounded-lg overflow-hidden shadow-lg flex flex-col md:flex-row">
                  <div className="md:w-2/5 relative h-64 md:h-auto img-hover-zoom">
                    <Image src={tour.image || "/placeholder.svg"} alt={tour.name} fill className="object-cover" />
                  </div>
                  <div className="md:w-3/5 p-6 flex flex-col justify-between">
                    <div>
                      <div className="flex items-center mb-2">
                        <MapPin className="h-4 w-4 text-purple-600 mr-1" />
                        <span className="text-sm text-gray-500">{tour.location}</span>
                      </div>
                      <h3 className="text-xl font-bold mb-2 text-purple-900">{tour.name}</h3>
                      <p className="text-gray-600 mb-4">
                        Experience the beauty and culture of {tour.location} with our carefully crafted tour package.
                      </p>
                      <div className="flex items-center text-gray-500 mb-4">
                        <Calendar className="h-4 w-4 mr-1" />
                        <span className="text-sm">{tour.duration}</span>
                      </div>
                    </div>
                    <div className="flex items-center justify-between">
                      <span className="text-xl font-bold text-purple-600">{tour.price}</span>
                      <Button className="bg-purple-600 hover:bg-purple-700 text-white">
                        <Link href={`/tours/${tour.id}`}>View Details</Link>
                      </Button>
                    </div>
                  </div>
                </div>
              </motion.div>
            ))}
          </div>

<div className="text-center mt-12">
            <Button
              size="lg"
              className="bg-gradient-to-r from-purple-600 to-indigo-600 hover:from-purple-700 hover:to-indigo-700 text-white shadow-lg hover:shadow-xl transition-all duration-300"
            >
              <Link href="/tours">View All Tours</Link>
            </Button>
          </div>
        </div>
      </section>

{/* Call to Action */}
      <section className="py-20 bg-gradient-sunset text-white">
        <div className="container mx-auto px-4 text-center">
          <motion.div
            initial="hidden"
            whileInView="visible"
            viewport={{ once: true }}
            variants={fadeIn}
            transition={{ duration: 0.6 }}
          >
            <h2 className="text-4xl font-bold mb-4">Ready for Your Next Adventure?</h2>
            <p className="text-xl mb-8 max-w-2xl mx-auto">
              Book your dream vacation today and create memories that will last a lifetime.
            </p>
            <Button
              size="lg"
              className="bg-gradient-to-r from-pink-500 to-purple-600 hover:from-pink-600 hover:to-purple-700 text-white shadow-lg hover:shadow-xl transition-all duration-300"
            >
              <Link href="/contact">Contact Us Now</Link>
            </Button>
          </motion.div>
        </div>
      </section>

{/* Welcome Banner */}
      <WelcomeBanner />
    </main>
  )
}
</article></body></html>