"use client"; import React, { useState } from "react"; import { motion, type Variants } from "framer-motion"; import { Search, MapPin, Calendar, Users, Plane } from "lucide-react"; import { clsx, type ClassValue } from "clsx"; import { twMerge } from "tailwind-merge"; function cn(...inputs: ClassValue[]) { return twMerge(clsx(inputs)); } export interface GlobalTravelHeroProps { badgeText?: string; headline?: string; description?: string; primaryCtaText?: string; className?: string; } const staggerContainer: Variants = { hidden: { opacity: 0 }, visible: { opacity: 1, transition: { staggerChildren: 0.1, delayChildren: 0.1 }, }, }; const fadeUpVariants: Variants = { hidden: { opacity: 0, y: 20 }, visible: { opacity: 1, y: 0, transition: { duration: 0.8, ease: [0.16, 1, 0.3, 1] } }, }; export function GlobalTravelHero({ badgeText = "Explore the Unexplored", headline = "Your journey begins where the map ends.", description = "Experience curated world expeditions designed for the modern explorer. From hidden lagoons to majestic peaks, we craft stories, not just trips.", primaryCtaText = "Search", className, }: GlobalTravelHeroProps) { const [destination, setDestination] = useState(""); const destinations = [ { id: 1, name: "Maldives", title: "Deep Blue", img: "https://picsum.photos/id/1011/1000/1500", offset: false }, { id: 2, name: "Swiss Alps", title: "Snow Peak", img: "https://picsum.photos/id/1015/1000/1500", offset: true }, { id: 3, name: "Sahara", title: "Golden Dunes", img: "https://picsum.photos/id/1016/1000/1500", offset: false }, { id: 4, name: "Japan", title: "Kyoto Spirit", img: "https://picsum.photos/id/1018/1000/1500", offset: true } ]; return (

{badgeText} {headline} {description}

setDestination(e.target.value)} />

Select dates

Add guests

{destinations.map((dest, idx) => (

{dest.name}

{dest.title}

))}

); } export default function GlobalTravelHeroDemo() { return (

); }