diff --git a/src/pages/Index.tsx b/src/pages/Index.tsx
new file mode 100644
index 0000000..f40c9b6
--- /dev/null
+++ b/src/pages/Index.tsx
@@ -0,0 +1,198 @@
+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 {
+  ArrowRight, Eye, UtensilsCrossed, Star, Wine, Quote
+} from "lucide-react";
+import Header from "@/components/Header";
+import Footer from "@/components/Footer";
+
+const highlights = [
+  { name: "Wagyu Beef Tenderloin", desc: "A5 wagyu, bone marrow butter, roasted root vegetables, red wine jus", price: "$62", gradient: "from-amber-800/30 to-stone-700/30" },
+  { name: "Seared Scallops", desc: "Pan-seared diver scallops, cauliflower purée, truffle vinaigrette", price: "$24", gradient: "from-stone-700/30 to-amber-900/30" },
+  { name: "Valrhona Chocolate Fondant", desc: "Warm dark chocolate cake, vanilla bean ice cream, gold leaf", price: "$16", gradient: "from-amber-900/30 to-stone-800/30" },
+];
+
+const testimonials = [
+  { name: "James & Katherine", text: "An extraordinary dining experience. Every dish was a masterpiece. The tasting menu was the highlight of our trip.", source: "Google Reviews" },
+  { name: "Sophie Laurent", text: "Impeccable service and the most beautiful presentation I have ever seen. The wine pairing was exquisite.", source: "TripAdvisor" },
+  { name: "Michael Chen", text: "Worth every penny. The wagyu was the best I have had outside of Japan. Already planning our return visit.", source: "Yelp" },
+];
+
+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-b from-stone-950 via-amber-950/20 to-stone-950">
+        <div className="absolute inset-0 pointer-events-none">
+          <div className="absolute top-1/3 left-1/2 -translate-x-1/2 w-[600px] h-[600px] rounded-full bg-amber-600 opacity-10 blur-[150px]" />
+          <div className="absolute top-1/4 left-1/4 w-[400px] h-[400px] rounded-full bg-amber-500 opacity-10 blur-[120px]" />
+          <div className="absolute bottom-1/4 right-1/4 w-[350px] h-[350px] rounded-full bg-rose-600 opacity-10 blur-[120px]" />
+        </div>
+        <div className="absolute inset-0 opacity-[0.03]" style={{ backgroundImage: "url(\"data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E\")" }} />
+        <div className="relative z-10 mx-auto max-w-4xl px-6 text-center">
+          <div className="text-5xl text-amber-400/10 font-serif mb-4 select-none">✧</div>
+          <div className="flex items-center justify-center gap-3 mb-6 text-amber-400/60 text-sm tracking-[0.3em]">
+            <span>—</span><span>✦</span><span>—</span>
+          </div>
+          <Badge variant="secondary" className="mb-6 px-4 py-1.5 text-xs tracking-widest uppercase bg-amber-900/30 text-amber-300 border-amber-700/30 backdrop-blur">
+            Est. 1987
+          </Badge>
+          <h1 className="text-4xl sm:text-5xl md:text-6xl lg:text-7xl font-serif tracking-wide text-white leading-[1.1]">A Culinary Journey Through Timeless Flavors</h1>
+          <p className="mx-auto mt-6 max-w-xl text-lg text-stone-400 leading-relaxed">Experience refined dining where heritage meets innovation. Every dish tells a story crafted with passion, precision, and the finest seasonal ingredients.</p>
+          <div className="mt-10 flex flex-col sm:flex-row items-center justify-center gap-4">
+            <Button asChild size="lg" className="rounded-none px-10 text-sm tracking-widest uppercase bg-amber-700 hover:bg-amber-600 text-white shadow-lg shadow-amber-900/30 active:scale-[0.98]">
+              <Link to="/reservations">Reserve a Table <ArrowRight className="ml-2 h-4 w-4" /></Link>
+            </Button>
+            <Button asChild variant="outline" size="lg" className="rounded-none px-10 text-sm tracking-widest uppercase border-stone-600 text-stone-200 hover:bg-stone-800 active:scale-[0.98]">
+              <Link to="/menu">View Menu</Link>
+            </Button>
+          </div>
+        </div>
+      </section>
+
+      {/* ── SIGNATURE DISHES ���─ */}
+      <section className="py-24 bg-stone-50 dark:bg-stone-950">
+        <div className="mx-auto max-w-6xl px-6">
+          <div className="text-center mb-16 animate-fade-up">
+            <div className="flex items-center justify-center gap-3 mb-4 text-amber-600/60 text-sm tracking-[0.3em]">
+              <span>—</span><UtensilsCrossed className="h-4 w-4" /><span>—</span>
+            </div>
+            <h2 className="text-3xl sm:text-4xl font-serif tracking-wide">Signature Dishes</h2>
+            <p className="mt-3 text-muted-foreground">Chef's selection of our most celebrated creations</p>
+          </div>
+          <div className="grid md:grid-cols-3 gap-8 stagger">
+            {highlights.map((d, i) => (
+              <div key={i} className="group text-center">
+                {i === 0 && <Badge className="mb-2 bg-amber-700 text-white text-[10px] uppercase tracking-wider border-0">Chef's Pick</Badge>}
+                <div className={`aspect-square rounded-sm bg-gradient-to-br \${d.gradient} mb-6 transition-transform duration-500 group-hover:scale-105 relative overflow-hidden`}>
+                  <div className="absolute inset-0 opacity-[0.04]" style={{ backgroundImage: "radial-gradient(circle, currentColor 1px, transparent 1px)", backgroundSize: "16px 16px" }} />
+                  <div className="absolute -bottom-8 -right-8 w-32 h-32 rounded-full bg-amber-600/20 blur-2xl" />
+                </div>
+                <h3 className="text-xl font-serif font-medium">{d.name}</h3>
+                <p className="mt-2 text-sm text-muted-foreground italic">{d.desc}</p>
+                <span className="inline-block mt-3 text-amber-700 dark:text-amber-400 font-semibold">{d.price}</span>
+              </div>
+            ))}
+          </div>
+          <div className="text-center mt-12">
+            <Button asChild variant="outline" className="rounded-none tracking-widest uppercase text-xs px-8 active:scale-[0.98]">
+              <Link to="/menu">View Full Menu <ArrowRight className="ml-2 h-4 w-4" /></Link>
+            </Button>
+          </div>
+        </div>
+      </section>
+
+      {/* ── ABOUT PREVIEW ── */}
+      <section className="py-24">
+        <div className="mx-auto max-w-7xl px-6">
+          <div className="grid lg:grid-cols-2 gap-16 items-center">
+            <div className="animate-fade-up">
+              <div className="flex items-center gap-3 mb-4 text-amber-600/60 text-sm tracking-[0.3em]">
+                <span>—</span><Star className="h-4 w-4" /><span>—</span>
+              </div>
+              <h2 className="text-3xl sm:text-4xl font-serif tracking-wide mb-6">Our Story</h2>
+              <p className="text-muted-foreground leading-relaxed mb-4">For over three decades, Aurum has been a sanctuary for those who appreciate the art of fine dining. Founded by Chef Marcus Bellini, our kitchen is guided by one philosophy: let exceptional ingredients speak for themselves.</p>
+              <div className="grid grid-cols-3 gap-6 mt-10 mb-8">
+                <div className="text-center">
+                  <div className="text-3xl font-serif font-bold text-amber-700 dark:text-amber-400">35+</div>
+                  <div className="text-sm text-muted-foreground mt-1">Years</div>
+                </div>
+                <div className="text-center">
+                  <div className="text-3xl font-serif font-bold text-amber-700 dark:text-amber-400">2</div>
+                  <div className="text-sm text-muted-foreground mt-1">Michelin Stars</div>
+                </div>
+                <div className="text-center">
+                  <div className="text-3xl font-serif font-bold text-amber-700 dark:text-amber-400">400+</div>
+                  <div className="text-sm text-muted-foreground mt-1">Wines</div>
+                </div>
+              </div>
+              <Button asChild variant="outline" className="rounded-none tracking-widest uppercase text-xs px-8 active:scale-[0.98]">
+                <Link to="/about">Our Story <ArrowRight className="ml-2 h-4 w-4" /></Link>
+              </Button>
+            </div>
+            <div className="relative">
+              <div className="aspect-[4/5] rounded-sm bg-gradient-to-br from-amber-800/30 via-stone-700/30 to-amber-900/30 relative overflow-hidden">
+                <div className="absolute inset-0 opacity-[0.04]" style={{ backgroundImage: "radial-gradient(circle, currentColor 1px, transparent 1px)", backgroundSize: "16px 16px" }} />
+                <div className="absolute -top-10 -left-10 w-40 h-40 rounded-full bg-amber-500/15 blur-3xl" />
+                <div className="absolute -bottom-10 -right-10 w-36 h-36 rounded-full bg-amber-700/20 blur-2xl" />
+              </div>
+              <div className="absolute inset-0 translate-x-4 translate-y-4 -z-10 border-2 border-amber-700/30 rounded-sm" />
+            </div>
+          </div>
+        </div>
+      </section>
+
+      {/* ── GALLERY ── */}
+      <section className="py-24 bg-stone-50 dark:bg-stone-950">
+        <div className="mx-auto max-w-7xl px-6">
+          <div className="text-center mb-16 animate-fade-up">
+            <h2 className="text-3xl sm:text-4xl font-serif tracking-wide">Gallery</h2>
+            <p className="mt-3 text-muted-foreground">A glimpse into the Aurum experience</p>
+          </div>
+          <div className="grid grid-cols-2 lg:grid-cols-3 gap-4">
+            {[0, 1, 2, 3, 4, 5].map((i) => (
+              <div key={i} className={`group relative overflow-hidden rounded-sm cursor-pointer animate-fade-in \${i === 0 || i === 5 ? "lg:col-span-2" : ""}`}>
+                <div className={`\${i === 0 || i === 5 ? "aspect-[2/1]" : "aspect-square"} bg-gradient-to-br from-amber-800/20 via-stone-600/20 to-stone-800/20 transition-transform duration-500 group-hover:scale-105 hover:brightness-110 relative overflow-hidden`}>
+                  <div className="absolute inset-0 opacity-[0.03]" style={{ backgroundImage: "radial-gradient(circle, currentColor 1px, transparent 1px)", backgroundSize: "16px 16px" }} />
+                  <div className="absolute -bottom-6 -right-6 w-24 h-24 rounded-full bg-amber-600/15 blur-2xl" />
+                </div>
+                <span className="absolute bottom-2 right-2 text-xs text-white/60 bg-black/40 px-2 py-0.5 rounded backdrop-blur-sm">{i+1}/6</span>
+                <div className="absolute inset-0 bg-black/0 group-hover:bg-black/40 transition-all duration-300 flex items-center justify-center">
+                  <Eye className="h-8 w-8 text-white opacity-0 group-hover:opacity-100 transition-opacity duration-300 drop-shadow-lg" />
+                </div>
+              </div>
+            ))}
+          </div>
+        </div>
+      </section>
+
+      {/* ── TESTIMONIALS ── */}
+      <section className="py-24">
+        <div className="mx-auto max-w-6xl px-6">
+          <div className="text-center mb-16 animate-fade-up">
+            <h2 className="text-3xl sm:text-4xl font-serif tracking-wide">What Our Guests Say</h2>
+          </div>
+          <div className="grid md:grid-cols-3 gap-8 stagger">
+            {testimonials.map((t, i) => (
+              <Card key={i} className="backdrop-blur-sm bg-stone-900/80 border-stone-700/50 border-t-2 border-amber-700/30 rounded-sm hover:-translate-y-1 hover:shadow-xl transition-all duration-300">
+                <CardContent className="pt-6">
+                  <div className="flex gap-0.5 mb-4">
+                    {[...Array(5)].map((_, j) => (
+                      <Star key={j} className="h-4 w-4 fill-amber-400 text-amber-400" />
+                    ))}
+                  </div>
+                  <Quote className="h-8 w-8 text-amber-600/20 mb-4" />
+                  <p className="text-muted-foreground italic leading-relaxed">"{t.text}"</p>
+                  <div className="mt-4 pt-4 border-t border-stone-200 dark:border-stone-800">
+                    <div className="font-medium text-sm">{t.name}</div>
+                    <div className="text-xs text-muted-foreground">{t.source}</div>
+                  </div>
+                </CardContent>
+              </Card>
+            ))}
+          </div>
+        </div>
+      </section>
+
+      {/* ── RESERVATION CTA ── */}
+      <section className="py-24 bg-gradient-to-b from-stone-950 to-amber-950/30">
+        <div className="mx-auto max-w-3xl px-6 text-center">
+          <div className="flex items-center justify-center gap-3 mb-6 text-amber-400/60 text-sm tracking-[0.3em]">
+            <span>—</span><Wine className="h-4 w-4" /><span>—</span>
+          </div>
+          <h2 className="text-3xl sm:text-4xl font-serif tracking-wide text-white mb-4">Join Us for an Unforgettable Evening</h2>
+          <p className="text-stone-400 mb-10">Reserve your table and experience the art of fine dining</p>
+          <Button asChild size="lg" className="rounded-none px-10 text-sm tracking-widest uppercase bg-amber-700 hover:bg-amber-600 text-white active:scale-[0.98]">
+            <Link to="/reservations">Book a Table <ArrowRight className="ml-2 h-4 w-4" /></Link>
+          </Button>
+        </div>
+      </section>
+
+      <Footer />
+    </div>
+  );
+}
\ No newline at end of file