diff --git a/src/pages/Details.tsx b/src/pages/Details.tsx
new file mode 100644
index 0000000..3d9d84c
--- /dev/null
+++ b/src/pages/Details.tsx
@@ -0,0 +1,129 @@
+import { Card, CardContent } from "@/components/ui/card";
+import { Button } from "@/components/ui/button";
+import { MapPin, Clock, Shirt, Car, Plane, ParkingCircle, Church, PartyPopper, UtensilsCrossed, Music, Hotel, ExternalLink } from "lucide-react";
+import Header from "@/components/Header";
+import Footer from "@/components/Footer";
+
+const schedule = [
+  { time: "4:00 PM", title: "Ceremony", desc: "Exchange of vows at the garden pavilion", icon: Church },
+  { time: "5:00 PM", title: "Cocktail Hour", desc: "Drinks and canapes on the terrace", icon: PartyPopper },
+  { time: "6:30 PM", title: "Dinner", desc: "Three-course seated dinner in the ballroom", icon: UtensilsCrossed },
+  { time: "8:30 PM", title: "Dancing", desc: "Live band and dancing until midnight", icon: Music },
+];
+
+export default function DetailsPage() {
+  return (
+    <div className="min-h-screen bg-white dark:bg-stone-950">
+      <Header />
+
+      <section className="pt-32 pb-24 bg-gradient-to-b from-rose-50 to-white dark:from-stone-900 dark:to-stone-950">
+        <div className="mx-auto max-w-4xl px-6">
+          <p className="text-rose-400 text-sm uppercase tracking-[0.2em] text-center mb-2">Everything You Need to Know</p>
+          <h1 className="font-serif text-4xl sm:text-5xl text-center text-stone-800 dark:text-white mb-16 animate-fade-up">Wedding Details</h1>
+
+          {/* Ceremony & Reception */}
+          <div className="grid md:grid-cols-2 gap-8 mb-16">
+            <Card className="border-border/50 backdrop-blur-sm bg-card/80 overflow-hidden">
+              <div className="h-3 bg-gradient-to-r from-rose-400 to-pink-300" />
+              <CardContent className="pt-8 pb-6 text-center">
+                <Church className="h-8 w-8 text-rose-400 mx-auto mb-4" />
+                <h3 className="font-serif text-xl text-stone-800 dark:text-white mb-4">Ceremony</h3>
+                <p className="font-medium text-stone-700 dark:text-stone-200">Rosewood Manor Garden Pavilion</p>
+                <p className="text-sm text-stone-500 dark:text-stone-400 mt-1">123 Garden Lane, Napa Valley, CA 94558</p>
+                <div className="flex items-center justify-center gap-2 mt-3 text-sm text-rose-400">
+                  <Clock className="h-4 w-4" /> 4:00 PM
+                </div>
+                <div className="mt-4 h-40 rounded-lg bg-gradient-to-br from-rose-100 to-pink-50 dark:from-stone-700 dark:to-stone-600 flex items-center justify-center">
+                  <MapPin className="h-6 w-6 text-rose-300" />
+                  <span className="text-sm text-stone-400 ml-2">Map</span>
+                </div>
+              </CardContent>
+            </Card>
+
+            <Card className="border-border/50 backdrop-blur-sm bg-card/80 overflow-hidden">
+              <div className="h-3 bg-gradient-to-r from-pink-300 to-rose-400" />
+              <CardContent className="pt-8 pb-6 text-center">
+                <PartyPopper className="h-8 w-8 text-rose-400 mx-auto mb-4" />
+                <h3 className="font-serif text-xl text-stone-800 dark:text-white mb-4">Reception</h3>
+                <p className="font-medium text-stone-700 dark:text-stone-200">Rosewood Manor Ballroom</p>
+                <p className="text-sm text-stone-500 dark:text-stone-400 mt-1">123 Garden Lane, Napa Valley, CA 94558</p>
+                <div className="flex items-center justify-center gap-2 mt-3 text-sm text-rose-400">
+                  <Shirt className="h-4 w-4" /> Black Tie Optional
+                </div>
+                <div className="mt-4 h-40 rounded-lg bg-gradient-to-br from-pink-100 to-rose-50 dark:from-stone-700 dark:to-stone-600 flex items-center justify-center">
+                  <MapPin className="h-6 w-6 text-rose-300" />
+                  <span className="text-sm text-stone-400 ml-2">Map</span>
+                </div>
+              </CardContent>
+            </Card>
+          </div>
+
+          {/* Schedule */}
+          <div className="mb-16">
+            <h2 className="font-serif text-2xl text-center text-stone-800 dark:text-white mb-10 animate-fade-up">Schedule of the Day</h2>
+            <div className="relative max-w-lg mx-auto stagger">
+              <div className="absolute left-6 top-0 bottom-0 w-px bg-rose-200 dark:bg-stone-700" />
+              {schedule.map((item, i) => (
+                <div key={i} className="relative flex gap-6 mb-10 last:mb-0 animate-fade-up" style={{ animationDelay: `\${i * 150}ms` }}>
+                  <div className="w-12 h-12 rounded-full bg-rose-100 dark:bg-stone-700 flex items-center justify-center shrink-0 z-10 border-2 border-white dark:border-stone-950">
+                    <item.icon className="h-5 w-5 text-rose-400" />
+                  </div>
+                  <div className="pt-2">
+                    <span className="text-sm text-rose-400 font-medium">{item.time}</span>
+                    <h3 className="font-serif text-lg text-stone-800 dark:text-white">{item.title}</h3>
+                    <p className="text-sm text-stone-500 dark:text-stone-400">{item.desc}</p>
+                  </div>
+                </div>
+              ))}
+            </div>
+          </div>
+
+          {/* Accommodation */}
+          <div className="mb-16">
+            <h2 className="font-serif text-2xl text-center text-stone-800 dark:text-white mb-10 animate-fade-up">Where to Stay</h2>
+            <div className="grid md:grid-cols-2 gap-6">
+              {[
+                { name: "The Vintage Inn", distance: "0.5 miles from venue", price: "$220-$350/night" },
+                { name: "Napa River Inn", distance: "2 miles from venue", price: "$160-$280/night" },
+              ].map((h, i) => (
+                <Card key={i} className="border-border/50 backdrop-blur-sm bg-card/80 hover:-translate-y-1 hover:shadow-lg transition-all duration-300">
+                  <CardContent className="pt-6 pb-4">
+                    <Hotel className="h-6 w-6 text-rose-400 mb-3" />
+                    <h3 className="font-serif text-lg text-stone-800 dark:text-white">{h.name}</h3>
+                    <p className="text-sm text-stone-500 dark:text-stone-400 mt-1">{h.distance}</p>
+                    <p className="text-sm text-rose-400 font-medium mt-1">{h.price}</p>
+                    <Button variant="outline" size="sm" className="mt-4 rounded-full border-rose-200 text-rose-500 hover:bg-rose-50 dark:border-stone-600 dark:hover:bg-stone-700 text-xs">
+                      Book Now <ExternalLink className="h-3 w-3 ml-1" />
+                    </Button>
+                  </CardContent>
+                </Card>
+              ))}
+            </div>
+          </div>
+
+          {/* Travel */}
+          <div>
+            <h2 className="font-serif text-2xl text-center text-stone-800 dark:text-white mb-10 animate-fade-up">Getting There</h2>
+            <div className="grid sm:grid-cols-3 gap-6">
+              {[
+                { icon: Car, title: "By Car", desc: "Take Highway 29 North. The venue is 1 hour from San Francisco via the Golden Gate Bridge." },
+                { icon: ParkingCircle, title: "Parking", desc: "Complimentary valet parking is available for all guests at the main entrance." },
+                { icon: Plane, title: "Airport", desc: "SFO International Airport is 60 miles south. Oakland Airport is 55 miles away." },
+              ].map((item, i) => (
+                <Card key={i} className="border-rose-100 dark:border-stone-700 bg-white dark:bg-stone-800">
+                  <CardContent className="pt-6 pb-4 text-center">
+                    <item.icon className="h-6 w-6 text-rose-400 mx-auto mb-3" />
+                    <h3 className="font-medium text-stone-800 dark:text-white text-sm mb-2">{item.title}</h3>
+                    <p className="text-xs text-stone-500 dark:text-stone-400 leading-relaxed">{item.desc}</p>
+                  </CardContent>
+                </Card>
+              ))}
+            </div>
+          </div>
+        </div>
+      </section>
+
+      <Footer />
+    </div>
+  );
+}
\ No newline at end of file