[V0_FILE]typescriptreact:file="app/page.tsx" import { Button } from "@/components/ui/button" import { Input } from "@/components/ui/input" import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select" import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs" import { CalendarIcon, GlobeIcon, MapPinIcon, PalmtreeIcon, PlaneIcon, SearchIcon } from "lucide-react" import Image from "next/image" import { FeaturedDestinations } from "@/components/featured-destinations" import { PopularPackages } from "@/components/popular-packages" import { Testimonials } from "@/components/testimonials" import { Newsletter } from "@/components/newsletter" import { Footer } from "@/components/footer" import { Header } from "@/components/header" export default function Home() { return (

Discover Your Perfect Adventure

Explore curated travel packages tailored to your preferences. From relaxing beach getaways to thrilling mountain expeditions.

Packages Hotels Activities

Destination

Date

Travelers

Destination

Check-in/out

Guests

Location

Date

Activity Type

) } [V0_FILE]typescriptreact:file="app/loading.tsx" isFixed="true" export default function Loading() { return null } [V0_FILE]typescriptreact:file="components/header.tsx" import { Separator } from "@/components/ui/separator" import Link from "next/link" import { Button } from "@/components/ui/button" import { GlobeIcon, MenuIcon, UserIcon } from "lucide-react" import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from "@/components/ui/dropdown-menu" import { Sheet, SheetContent, SheetTrigger } from "@/components/ui/sheet" export function Header() { return (

TravelEase

) } [V0_FILE]typescriptreact:file="components/featured-destinations.tsx" isFixed="true" isQuickEdit="true" import { Card, CardContent } from "@/components/ui/card" import { MapPinIcon, ChevronRightIcon } from "lucide-react" import Image from "next/image" import Link from "next/link" export function FeaturedDestinations() { const destinations = [ { id: 1, name: "Bali, Indonesia", image: "/placeholder.svg?height=400&width=600", description: "Tropical paradise with stunning beaches and rich culture", properties: 240, }, { id: 2, name: "Santorini, Greece", image: "/placeholder.svg?height=400&width=600", description: "Iconic white buildings with breathtaking sea views", properties: 186, }, { id: 3, name: "Kyoto, Japan", image: "/placeholder.svg?height=400&width=600", description: "Ancient temples and beautiful cherry blossoms", properties: 320, }, { id: 4, name: "Machu Picchu, Peru", image: "/placeholder.svg?height=400&width=600", description: "Historic Incan citadel set among breathtaking mountains", properties: 95, }, ] return (

Featured Destinations

Explore our handpicked destinations around the world

View all destinations

{destinations.map((destination) => (

{destination.name}

{destination.description}

{destination.properties} properties

))}

) } [V0_FILE]typescriptreact:file="components/popular-packages.tsx" isFixed="true" isQuickEdit="true" import { Badge } from "@/components/ui/badge" import { Button } from "@/components/ui/button" import { Card, CardContent, CardFooter, CardHeader } from "@/components/ui/card" import { ClockIcon, StarIcon, UsersIcon, ChevronRightIcon, MapPinIcon } from "lucide-react" import Image from "next/image" import Link from "next/link" export function PopularPackages() { const packages = [ { id: 1, title: "Bali Adventure Package", location: "Bali, Indonesia", image: "/placeholder.svg?height=400&width=600", price: 1299, duration: 7, rating: 4.8, reviews: 124, featured: true, tags: ["Beach", "Adventure", "Cultural"], }, { id: 2, title: "Greek Islands Explorer", location: "Santorini & Mykonos, Greece", image: "/placeholder.svg?height=400&width=600", price: 1899, duration: 10, rating: 4.9, reviews: 89, featured: false, tags: ["Island", "Luxury", "Romantic"], }, { id: 3, title: "Japan Cultural Tour", location: "Tokyo, Kyoto & Osaka, Japan", image: "/placeholder.svg?height=400&width=600", price: 2499, duration: 12, rating: 4.7, reviews: 156, featured: false, tags: ["Cultural", "City", "Food"], }, { id: 4, title: "Peruvian Highlights", location: "Lima, Cusco & Machu Picchu, Peru", image: "/placeholder.svg?height=400&width=600", price: 1799, duration: 9, rating: 4.6, reviews: 78, featured: true, tags: ["Adventure", "Historical", "Nature"], }, { id: 5, title: "Safari Experience", location: "Kenya & Tanzania", image: "/placeholder.svg?height=400&width=600", price: 3299, duration: 14, rating: 4.9, reviews: 112, featured: false, tags: ["Wildlife", "Nature", "Adventure"], }, { id: 6, title: "Thailand Beach Getaway", location: "Phuket & Krabi, Thailand", image: "/placeholder.svg?height=400&width=600", price: 1199, duration: 8, rating: 4.5, reviews: 94, featured: false, tags: ["Beach", "Relaxation", "Island"], }, ] return (

Popular Packages

Our most booked travel experiences

View all packages

{packages.map((pkg) => (

{pkg.featured && ( Featured )}

{pkg.tags.map((tag) => ( {tag} ))}

{pkg.title}

{pkg.location}

{pkg.rating} ({pkg.reviews} reviews)

{pkg.duration} days

2-4

Starting from

${pkg.price}

))}

) } [V0_FILE]typescriptreact:file="components/testimonials.tsx" import { Card, CardContent } from "@/components/ui/card" import { StarIcon } from "lucide-react" import Image from "next/image" export function Testimonials() { const testimonials = [ { id: 1, name: "Sarah Johnson", location: "New York, USA", avatar: "/placeholder.svg?height=100&width=100", rating: 5, text: "Our Bali trip was absolutely perfect! The itinerary was well-balanced with adventure and relaxation. Our guide was knowledgeable and friendly. Will definitely book with TravelEase again!", package: "Bali Adventure Package", }, { id: 2, name: "Michael Chen", location: "Toronto, Canada", avatar: "/placeholder.svg?height=100&width=100", rating: 5, text: "The Greek Islands Explorer package exceeded our expectations. The accommodations were luxurious, and the private tours gave us insights we wouldn't have discovered on our own.", package: "Greek Islands Explorer", }, { id: 3, name: "Emma Rodriguez", location: "London, UK", avatar: "/placeholder.svg?height=100&width=100", rating: 4, text: "Japan Cultural Tour was an amazing experience. The attention to detail in the itinerary allowed us to experience both traditional and modern Japan. Highly recommend!", package: "Japan Cultural Tour", }, ] return (

What Our Travelers Say

Real experiences from travelers who have explored the world with us

{testimonials.map((testimonial) => (

{testimonial.name}

{testimonial.location}

{[...Array(5)].map((_, i) => ( ))}

"{testimonial.text}"

Package: {testimonial.package}

))}

) } [V0_FILE]typescriptreact:file="components/newsletter.tsx" import { Button } from "@/components/ui/button" import { Input } from "@/components/ui/input" export function Newsletter() { return (

Get Travel Inspiration & Special Offers

Subscribe to our newsletter and be the first to know about exclusive deals and new destinations.

By subscribing, you agree to our Privacy Policy and consent to receive updates from our company.

) } [V0_FILE]typescriptreact:file="components/footer.tsx" import { Button } from "@/components/ui/button" import { Separator } from "@/components/ui/separator" import { FacebookIcon, GlobeIcon, InstagramIcon, TwitterIcon, YoutubeIcon } from "lucide-react" import Link from "next/link" export function Footer() { return ( ) } [V0_FILE]typescriptreact:file="components/ui/separator.tsx" "use client" import * as React from "react" import * as SeparatorPrimitive from "@radix-ui/react-separator" import { cn } from "@/lib/utils" const Separator = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, orientation = "horizontal", decorative = true, ...props }, ref) => ( )) Separator.displayName = SeparatorPrimitive.Root.displayName export { Separator } [V0_FILE]typescriptreact:file="lib/utils.ts" import { type ClassValue, clsx } from "clsx" import { twMerge } from "tailwind-merge" export function cn(...inputs: ClassValue[]) { return twMerge(clsx(inputs)) } [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))", }, }, 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 }, }, }, animation: { "accordion-down": "accordion-down 0.2s ease-out", "accordion-up": "accordion-up 0.2s ease-out", }, }, }, plugins: [require("tailwindcss-animate")], } [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: 201 96% 32%; --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: 201 96% 32%; --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: 201 96% 32%; --primary-foreground: 210 40% 98%; --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: 212.7 26.8% 83.9%; } } @layer base { * { @apply border-border; } body { @apply bg-background text-foreground; } }

About

Tags

Share

More from kanagita142-gmailcom

More Templates Like This

About

Tags

Share

About

Tags

Share

More from kanagita142-gmailcom

More Templates Like This