diff --git a/src/pages/Index.tsx b/src/pages/Index.tsx
new file mode 100644
index 0000000..bbd20bd
--- /dev/null
+++ b/src/pages/Index.tsx
@@ -0,0 +1,231 @@
+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>
+  );
+}
\ No newline at end of file