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