Seed: event template (15 files)
This commit is contained in:
@@ -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>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user