diff --git a/src/pages/Venue.tsx b/src/pages/Venue.tsx
new file mode 100644
index 0000000..fd29a97
--- /dev/null
+++ b/src/pages/Venue.tsx
@@ -0,0 +1,139 @@
+import { Link } from "react-router-dom";
+import { Card, CardContent } from "@/components/ui/card";
+import { Badge } from "@/components/ui/badge";
+import { Users, Accessibility, Wifi, Plane, Train, Car, MapPin, Building, Layers, Star } from "lucide-react";
+import Header from "@/components/Header";
+import Footer from "@/components/Footer";
+
+const infoCards = [
+  { icon: Users, label: "Capacity", value: "2,500", desc: "Main hall seats 2,000 with additional breakout rooms for workshops and panels." },
+  { icon: Accessibility, label: "Accessibility", value: "Fully Accessible", desc: "Wheelchair ramps, elevators, accessible restrooms, and reserved seating on all levels." },
+  { icon: Wifi, label: "WiFi", value: "High-Speed", desc: "Dedicated 1Gbps conference WiFi network with separate speaker and attendee SSIDs." },
+];
+
+const travelOptions = [
+  { icon: Plane, title: "By Air", desc: "SFO International Airport is 20 minutes away. BART runs directly to the venue area." },
+  { icon: Train, title: "By Train", desc: "Caltrain and BART stations are within a 5-minute walk. Take BART to Powell Street." },
+  { icon: Car, title: "By Car", desc: "Parking available at 5th & Mission Garage ($35/day). Rideshare drop-off on Howard St." },
+];
+
+const hotels = [
+  { name: "The St. Regis", distance: "0.2 miles from venue", price: "$350–$500/night" },
+  { name: "Hotel Nikko", distance: "0.4 miles from venue", price: "$200–$320/night" },
+  { name: "Axiom Hotel", distance: "0.5 miles from venue", price: "$150–$240/night" },
+];
+
+export default function VenuePage() {
+  return (
+    <div className="min-h-screen bg-slate-950 text-white">
+      <Header />
+
+      {/* Hero */}
+      <section className="pt-32 pb-24 text-center px-6">
+        <h1 className="text-5xl font-black tracking-tight mb-4 animate-fade-up">The Apex Centre</h1>
+        <p className="text-slate-400 flex items-center justify-center gap-2"><MapPin className="h-4 w-4" />747 Howard Street, San Francisco, CA 94103</p>
+      </section>
+
+      {/* Image Placeholder */}
+      <section className="px-6 pb-24">
+        <div className="mx-auto max-w-5xl">
+          <div className="aspect-video rounded-2xl bg-gradient-to-br from-slate-800 to-slate-900 border border-slate-800 relative overflow-hidden flex items-center justify-center">
+            <div className="absolute inset-0 bg-gradient-to-t from-slate-950/60 to-transparent rounded-2xl z-10" />
+            <div className="absolute inset-0 opacity-[0.07]" style={{ backgroundImage: "radial-gradient(circle, #94a3b8 1px, transparent 1px)", backgroundSize: "20px 20px" }} />
+            <div className="absolute top-1/4 left-1/3 w-40 h-40 bg-indigo-500/20 rounded-full blur-3xl" />
+            <div className="absolute bottom-1/3 right-1/4 w-32 h-32 bg-cyan-400/15 rounded-full blur-3xl" />
+            <div className="relative z-20 text-center text-slate-500">
+              <Building className="h-16 w-16 mx-auto mb-4 opacity-50" />
+              <p className="text-sm">Venue Photo</p>
+            </div>
+          </div>
+        </div>
+      </section>
+
+      {/* Info Cards */}
+      <section className="px-6 pb-24">
+        <div className="mx-auto max-w-5xl grid md:grid-cols-3 gap-6 stagger">
+          {infoCards.map((card, i) => (
+            <Card key={i} className="backdrop-blur-sm bg-slate-900/80 border-slate-800 hover:-translate-y-1 hover:shadow-xl transition-all duration-300">
+              <CardContent className="p-6 text-center">
+                <card.icon className="h-8 w-8 text-indigo-400 mx-auto mb-3" />
+                <div className="font-semibold text-white mb-1">{card.label}</div>
+                <div className="text-lg font-bold text-indigo-400 mb-2">{card.value}</div>
+                <p className="text-sm text-slate-400">{card.desc}</p>
+              </CardContent>
+            </Card>
+          ))}
+        </div>
+      </section>
+
+      {/* Getting There */}
+      <section className="px-6 pb-24">
+        <div className="mx-auto max-w-5xl">
+          <h2 className="text-3xl font-black tracking-tight text-center mb-10 animate-fade-up">Getting There</h2>
+          <div className="grid md:grid-cols-3 gap-6">
+            {travelOptions.map((opt, i) => (
+              <Card key={i} className="bg-slate-900/50 border-slate-800 hover:border-indigo-500/50 transition-colors">
+                <CardContent className="p-6">
+                  <opt.icon className="h-8 w-8 text-cyan-400 mb-4" />
+                  <h3 className="font-semibold text-white mb-2">{opt.title}</h3>
+                  <p className="text-sm text-slate-400">{opt.desc}</p>
+                </CardContent>
+              </Card>
+            ))}
+          </div>
+        </div>
+      </section>
+
+      {/* Accommodation */}
+      <section className="px-6 pb-24">
+        <div className="mx-auto max-w-5xl">
+          <h2 className="text-3xl font-black tracking-tight text-center mb-10 animate-fade-up">Accommodation</h2>
+          <div className="grid md:grid-cols-3 gap-6 stagger">
+            {hotels.map((h, i) => (
+              <Card key={i} className="bg-slate-900/50 border-slate-800 hover:border-indigo-500/50 hover:-translate-y-1 hover:shadow-xl transition-all duration-300">
+                <CardContent className="p-6">
+                  <Building className="h-6 w-6 text-indigo-400 mb-3" />
+                  <div className="flex gap-0.5 mb-2">{[...Array(4)].map((_, i) => <Star key={i} className="h-3 w-3 fill-amber-400 text-amber-400" />)}</div>
+                  <h3 className="font-semibold text-white mb-1">{h.name}</h3>
+                  <p className="text-sm text-slate-400 mb-2">{h.distance}</p>
+                  <Badge variant="outline" className="border-slate-700 text-slate-300">{h.price}</Badge>
+                </CardContent>
+              </Card>
+            ))}
+          </div>
+        </div>
+      </section>
+
+      {/* Map Placeholder */}
+      <section className="px-6 pb-24">
+        <div className="mx-auto max-w-5xl">
+          <div className="aspect-[2/1] rounded-2xl bg-slate-200 border border-slate-300 flex items-center justify-center">
+            <div className="text-center text-slate-500">
+              <MapPin className="h-12 w-12 mx-auto mb-3 opacity-50" />
+              <p className="text-sm">Interactive Map</p>
+            </div>
+          </div>
+        </div>
+      </section>
+
+      {/* Floor Plan */}
+      <section className="px-6 pb-24">
+        <div className="mx-auto max-w-5xl text-center">
+          <h2 className="text-3xl font-black tracking-tight mb-4 animate-fade-up">Floor Plan</h2>
+          <p className="text-slate-400 mb-8">The venue features a main hall, three breakout rooms, a workshop lab, and a networking lounge.</p>
+          <div className="aspect-video rounded-2xl bg-gradient-to-br from-slate-800 to-slate-900 border border-slate-800 relative overflow-hidden flex items-center justify-center">
+            <div className="absolute inset-0 opacity-[0.07]" style={{ backgroundImage: "radial-gradient(circle, #94a3b8 1px, transparent 1px)", backgroundSize: "20px 20px" }} />
+            <div className="absolute top-1/3 right-1/4 w-36 h-36 bg-indigo-500/15 rounded-full blur-3xl" />
+            <div className="absolute bottom-1/4 left-1/3 w-28 h-28 bg-cyan-400/10 rounded-full blur-3xl" />
+            <div className="relative text-center text-slate-500">
+              <Layers className="h-12 w-12 mx-auto mb-3 opacity-50" />
+              <p className="text-sm">Floor Plan Diagram</p>
+            </div>
+          </div>
+        </div>
+      </section>
+
+      <Footer />
+    </div>
+  );
+}
\ No newline at end of file