231 lines
14 KiB
TypeScript
231 lines
14 KiB
TypeScript
import { Link } from "react-router-dom";
|
|
import { Button } from "@/components/ui/button";
|
|
import { Card, CardContent } from "@/components/ui/card";
|
|
import { Badge } from "@/components/ui/badge";
|
|
import { Input } from "@/components/ui/input";
|
|
import {
|
|
ArrowRight, MapPin, Star, Users, Globe, Clock, Shield, Headphones, Award, Quote, Search, CalendarDays
|
|
} from "lucide-react";
|
|
import Header from "@/components/Header";
|
|
import Footer from "@/components/Footer";
|
|
|
|
const destinations = [
|
|
{ name: "Bali", country: "Indonesia", price: "\$899", rating: "4.9", gradient: "from-blue-600/60 to-cyan-500/40" },
|
|
{ name: "Santorini", country: "Greece", price: "\$1,299", rating: "4.8", gradient: "from-amber-600/60 to-orange-400/40" },
|
|
{ name: "Machu Picchu", country: "Peru", price: "\$1,499", rating: "4.9", gradient: "from-emerald-600/60 to-teal-400/40" },
|
|
{ name: "Kyoto", country: "Japan", price: "\$1,199", rating: "4.7", gradient: "from-purple-600/60 to-violet-400/40" },
|
|
{ name: "Marrakech", country: "Morocco", price: "\$799", rating: "4.8", gradient: "from-rose-600/60 to-pink-400/40" },
|
|
{ name: "Queenstown", country: "New Zealand", price: "\$1,599", rating: "4.9", gradient: "from-sky-600/60 to-indigo-400/40" },
|
|
];
|
|
|
|
const packages = [
|
|
{ title: "Southeast Asia Explorer", duration: "14 Days", price: "\$2,499", highlights: ["Bangkok, Chiang Mai & Bali", "Luxury boutique hotels included", "Private guided temple tours"] },
|
|
{ title: "Mediterranean Cruise", duration: "10 Days", price: "\$3,299", highlights: ["Greece, Italy & Croatia", "All meals and drinks included", "Shore excursions at every port"] },
|
|
{ title: "African Safari Adventure", duration: "7 Days", price: "\$4,199", highlights: ["Serengeti & Ngorongoro Crater", "Luxury safari lodge accommodation", "Professional wildlife photographer guide"] },
|
|
];
|
|
|
|
const features = [
|
|
{ icon: Shield, title: "Secure Booking", desc: "Your payments and personal data are protected with enterprise-grade encryption and full refund guarantees." },
|
|
{ icon: Clock, title: "Flexible Plans", desc: "Free cancellation up to 48 hours before departure. Change dates anytime with no extra fees." },
|
|
{ icon: Headphones, title: "24/7 Support", desc: "Our multilingual travel experts are available around the clock to assist you anywhere in the world." },
|
|
{ icon: Award, title: "Award Winning", desc: "Recognized as a top travel agency by Conde Nast Traveler and Travel + Leisure four years running." },
|
|
];
|
|
|
|
const testimonials = [
|
|
{ name: "Sarah Mitchell", text: "The Bali trip was absolutely magical. Every detail was perfectly planned and the local guides were incredible.", trip: "Bali, Indonesia" },
|
|
{ name: "James Thornton", text: "Our Mediterranean cruise exceeded all expectations. The itinerary was perfect and the service was world-class.", trip: "Mediterranean Cruise" },
|
|
{ name: "Priya Sharma", text: "The safari adventure was a once-in-a-lifetime experience. We saw the Big Five on our very first game drive!", trip: "Tanzania Safari" },
|
|
];
|
|
|
|
export default function IndexPage() {
|
|
return (
|
|
<div className="min-h-screen bg-background text-foreground antialiased">
|
|
<Header />
|
|
|
|
{/* ── HERO ── */}
|
|
<section className="relative min-h-screen flex items-center justify-center overflow-hidden bg-gradient-to-br from-slate-950 via-blue-950/40 to-cyan-950/30">
|
|
<div className="absolute inset-0 pointer-events-none">
|
|
<div className="absolute top-1/4 left-1/2 -translate-x-1/2 w-[700px] h-[700px] rounded-full bg-blue-500 opacity-10 blur-[160px]" />
|
|
<div className="absolute bottom-1/4 left-1/4 w-[400px] h-[400px] rounded-full bg-cyan-400 opacity-10 blur-[120px]" />
|
|
<div className="absolute top-1/3 right-1/4 w-[350px] h-[350px] rounded-full bg-amber-500 opacity-8 blur-[120px]" />
|
|
</div>
|
|
<div className="relative z-10 mx-auto max-w-5xl px-6 text-center">
|
|
<Badge variant="secondary" className="mb-6 px-4 py-1.5 text-xs tracking-widest uppercase bg-blue-900/30 text-cyan-300 border-blue-700/30 backdrop-blur">
|
|
Award-Winning Travel Agency
|
|
</Badge>
|
|
<h1 className="text-4xl sm:text-5xl md:text-6xl lg:text-7xl font-bold tracking-tight text-white leading-[1.1] animate-fade-up">Discover Your Next Adventure</h1>
|
|
<p className="mx-auto mt-6 max-w-2xl text-lg text-slate-400 leading-relaxed">From pristine beaches to majestic mountains, we craft personalized journeys that create lifelong memories. Let us handle the details while you enjoy the experience.</p>
|
|
|
|
{/* Search bar */}
|
|
<div className="mx-auto mt-10 max-w-3xl bg-white/10 backdrop-blur-lg rounded-2xl p-3 border border-white/10">
|
|
<div className="grid sm:grid-cols-3 gap-3">
|
|
<div className="flex items-center gap-2 bg-white/10 rounded-xl px-4 py-3">
|
|
<MapPin className="h-4 w-4 text-cyan-400 shrink-0" />
|
|
<input placeholder="Destination" className="bg-transparent text-sm text-white placeholder:text-slate-400 outline-none w-full" />
|
|
</div>
|
|
<div className="flex items-center gap-2 bg-white/10 rounded-xl px-4 py-3">
|
|
<CalendarDays className="h-4 w-4 text-cyan-400 shrink-0" />
|
|
<input placeholder="Travel dates" className="bg-transparent text-sm text-white placeholder:text-slate-400 outline-none w-full" />
|
|
</div>
|
|
<Button className="bg-blue-600 hover:bg-blue-500 text-white rounded-xl font-semibold active:scale-[0.98] shadow-lg shadow-blue-600/20">
|
|
<Search className="mr-2 h-4 w-4" /> Search
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Trust row */}
|
|
<div className="mt-12 grid grid-cols-2 md:grid-cols-4 gap-6">
|
|
{[
|
|
{ val: "10K+", label: "Happy Travelers" },
|
|
{ val: "50+", label: "Destinations" },
|
|
{ val: "4.9", label: "Average Rating" },
|
|
{ val: "24/7", label: "Support" },
|
|
].map((s) => (
|
|
<div key={s.label} className="text-center">
|
|
<div className="text-2xl font-bold text-white">{s.val}</div>
|
|
<div className="text-xs text-slate-400 mt-1">{s.label}</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
{/* ── FEATURED DESTINATIONS ── */}
|
|
<section className="py-24 bg-gradient-to-b from-slate-950 to-slate-900">
|
|
<div className="mx-auto max-w-7xl px-6">
|
|
<div className="text-center mb-16">
|
|
<Badge variant="secondary" className="mb-4 px-3 py-1 text-xs tracking-widest uppercase bg-blue-900/30 text-cyan-300 border-blue-700/30">Popular</Badge>
|
|
<h2 className="text-3xl md:text-4xl font-bold text-white animate-fade-up">Featured Destinations</h2>
|
|
<p className="mt-3 text-slate-400 max-w-xl mx-auto">Handpicked destinations loved by travelers around the world.</p>
|
|
</div>
|
|
<div className="grid sm:grid-cols-2 lg:grid-cols-3 gap-6 stagger">
|
|
{destinations.map((d, i) => (
|
|
<Card key={i} className="group overflow-hidden border-slate-800 bg-slate-900/50 hover:border-blue-700/50 hover:-translate-y-1 hover:shadow-lg transition-all duration-300">
|
|
<div className={`relative h-52 bg-gradient-to-br \${d.gradient} flex items-end p-5`}>
|
|
<div className="absolute inset-0 bg-black/20 group-hover:bg-black/10 transition-colors" />
|
|
<div className="relative z-10">
|
|
<Badge className="mb-2 bg-white/20 text-white border-0 backdrop-blur text-xs">{d.country}</Badge>
|
|
<h3 className="text-xl font-bold text-white">{d.name}</h3>
|
|
</div>
|
|
</div>
|
|
<CardContent className="p-5">
|
|
<div className="flex items-center justify-between">
|
|
<div className="flex items-center gap-1 text-amber-400">
|
|
<Star className="h-4 w-4 fill-current" />
|
|
<span className="text-sm font-medium text-white">{d.rating}</span>
|
|
</div>
|
|
<div className="text-sm text-slate-400">from <span className="text-lg font-bold text-white">{d.price}</span></div>
|
|
</div>
|
|
<Button asChild variant="outline" className="w-full mt-4 border-slate-700 text-slate-200 hover:bg-blue-600 hover:text-white hover:border-blue-600 rounded-full active:scale-[0.98] transition-all">
|
|
<Link to="/destinations">Explore <ArrowRight className="ml-2 h-4 w-4" /></Link>
|
|
</Button>
|
|
</CardContent>
|
|
</Card>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
{/* ── POPULAR PACKAGES ── */}
|
|
<section id="packages" className="py-24 bg-slate-900">
|
|
<div className="mx-auto max-w-7xl px-6">
|
|
<div className="text-center mb-16">
|
|
<Badge variant="secondary" className="mb-4 px-3 py-1 text-xs tracking-widest uppercase bg-amber-900/30 text-amber-300 border-amber-700/30">Packages</Badge>
|
|
<h2 className="text-3xl md:text-4xl font-bold text-white animate-fade-up">Popular Travel Packages</h2>
|
|
<p className="mt-3 text-slate-400 max-w-xl mx-auto">All-inclusive packages designed for the perfect getaway.</p>
|
|
</div>
|
|
<div className="grid md:grid-cols-3 gap-8 stagger">
|
|
{packages.map((p, i) => (
|
|
<Card key={i} className="border-slate-800 bg-slate-950/50 hover:border-blue-700/50 hover:-translate-y-1 hover:shadow-lg transition-all duration-300">
|
|
<CardContent className="p-6">
|
|
<Badge className="mb-4 bg-blue-600/20 text-blue-300 border-blue-700/30 text-xs">{p.duration}</Badge>
|
|
<h3 className="text-xl font-bold text-white mb-3">{p.title}</h3>
|
|
<ul className="space-y-2 mb-6">
|
|
{p.highlights.map((h, j) => (
|
|
<li key={j} className="flex items-center gap-2 text-sm text-slate-400">
|
|
<div className="h-1.5 w-1.5 rounded-full bg-cyan-400 shrink-0" />
|
|
{h}
|
|
</li>
|
|
))}
|
|
</ul>
|
|
<div className="flex items-end justify-between">
|
|
<div>
|
|
<span className="text-xs text-slate-500">From</span>
|
|
<div className="text-2xl font-bold text-white">{p.price}</div>
|
|
<span className="text-xs text-slate-500">per person</span>
|
|
</div>
|
|
<Button asChild className="bg-blue-600 hover:bg-blue-500 text-white rounded-full px-6 text-sm active:scale-[0.98]">
|
|
<Link to="/contact">Book Now</Link>
|
|
</Button>
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
{/* ── WHY CHOOSE US ── */}
|
|
<section id="about" className="py-24 bg-gradient-to-b from-slate-900 to-slate-950">
|
|
<div className="mx-auto max-w-7xl px-6">
|
|
<div className="text-center mb-16">
|
|
<Badge variant="secondary" className="mb-4 px-3 py-1 text-xs tracking-widest uppercase bg-cyan-900/30 text-cyan-300 border-cyan-700/30">Why Us</Badge>
|
|
<h2 className="text-3xl md:text-4xl font-bold text-white animate-fade-up">Why Choose Wanderlust Travels</h2>
|
|
</div>
|
|
<div className="grid sm:grid-cols-2 lg:grid-cols-4 gap-8 stagger">
|
|
{features.map((f, i) => (
|
|
<div key={i} className="text-center group hover:-translate-y-1 hover:shadow-lg transition-all duration-300">
|
|
<div className="mx-auto mb-4 flex h-14 w-14 items-center justify-center rounded-2xl bg-blue-600/10 border border-blue-700/20 group-hover:bg-blue-600/20 transition-colors">
|
|
<f.icon className="h-6 w-6 text-cyan-400" />
|
|
</div>
|
|
<h3 className="text-lg font-semibold text-white mb-2">{f.title}</h3>
|
|
<p className="text-sm text-slate-400 leading-relaxed">{f.desc}</p>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
{/* ── TESTIMONIALS ── */}
|
|
<section className="py-24 bg-slate-950">
|
|
<div className="mx-auto max-w-7xl px-6">
|
|
<div className="text-center mb-16">
|
|
<Badge variant="secondary" className="mb-4 px-3 py-1 text-xs tracking-widest uppercase bg-amber-900/30 text-amber-300 border-amber-700/30">Reviews</Badge>
|
|
<h2 className="text-3xl md:text-4xl font-bold text-white animate-fade-up">What Travelers Say</h2>
|
|
</div>
|
|
<div className="grid md:grid-cols-3 gap-8 stagger">
|
|
{testimonials.map((t, i) => (
|
|
<Card key={i} className="border-slate-800 backdrop-blur-sm bg-card/80">
|
|
<CardContent className="p-6">
|
|
<Quote className="h-8 w-8 text-blue-500/30 mb-4" />
|
|
<p className="text-slate-300 leading-relaxed mb-4">{t.text}</p>
|
|
<div className="flex items-center gap-1 text-amber-400 mb-3">
|
|
{[...Array(5)].map((_, j) => <Star key={j} className="h-3.5 w-3.5 fill-current" />)}
|
|
</div>
|
|
<div className="text-sm font-semibold text-white">{t.name}</div>
|
|
<div className="text-xs text-slate-500">{t.trip}</div>
|
|
</CardContent>
|
|
</Card>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
{/* ── CTA ── */}
|
|
<section className="py-24 bg-gradient-to-r from-blue-950 via-blue-900 to-cyan-900 relative overflow-hidden">
|
|
<div className="absolute inset-0 pointer-events-none">
|
|
<div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[600px] h-[600px] rounded-full bg-cyan-400 opacity-10 blur-[150px]" />
|
|
</div>
|
|
<div className="relative z-10 mx-auto max-w-3xl px-6 text-center">
|
|
<h2 className="text-3xl md:text-4xl font-bold text-white mb-4 animate-fade-up">Start Planning Your Dream Trip</h2>
|
|
<p className="text-lg text-blue-200/70 mb-8">Let our travel experts craft the perfect itinerary for your next adventure. No commitment required.</p>
|
|
<Button asChild size="lg" className="bg-white text-blue-900 hover:bg-blue-50 rounded-full px-10 font-semibold shadow-xl active:scale-[0.98]">
|
|
<Link to="/contact">Start Planning <ArrowRight className="ml-2 h-4 w-4" /></Link>
|
|
</Button>
|
|
</div>
|
|
</section>
|
|
|
|
<Footer />
|
|
</div>
|
|
);
|
|
} |