forked from vibeasite-templates/template-restaurant
Seed: restaurant template (17 files)
This commit is contained in:
@@ -0,0 +1,147 @@
|
|||||||
|
import { useState } from "react";
|
||||||
|
import { toast } from "sonner";
|
||||||
|
import { Button } from "@/components/ui/button";
|
||||||
|
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
|
||||||
|
import { Input } from "@/components/ui/input";
|
||||||
|
import { Textarea } from "@/components/ui/textarea";
|
||||||
|
import { Badge } from "@/components/ui/badge";
|
||||||
|
import { ArrowRight, Users, Wine, ChefHat, Calendar, CheckCircle2 } from "lucide-react";
|
||||||
|
import Header from "@/components/Header";
|
||||||
|
import Footer from "@/components/Footer";
|
||||||
|
|
||||||
|
const rooms = [
|
||||||
|
{ name: "The Cellar", capacity: "12", desc: "An intimate underground space with exposed brick walls and a curated wine display. Perfect for exclusive dinners.", gradient: "from-amber-800/30 to-stone-700/30" },
|
||||||
|
{ name: "The Gallery", capacity: "24", desc: "Elegant room featuring rotating art installations with floor-to-ceiling windows overlooking the garden.", gradient: "from-stone-700/30 to-amber-900/30" },
|
||||||
|
{ name: "The Terrace", capacity: "40", desc: "Our largest private space with retractable roof, perfect for celebrations and corporate gatherings.", gradient: "from-amber-900/30 to-stone-800/30" },
|
||||||
|
];
|
||||||
|
|
||||||
|
const events = [
|
||||||
|
{ title: "Wine Dinner Series", desc: "Monthly five-course dinner paired with wines from a featured vineyard. An evening of discovery and indulgence.", badge: "Monthly" },
|
||||||
|
{ title: "Chef’s Table Experience", desc: "An exclusive 8-seat experience at the kitchen counter with a bespoke tasting menu narrated by the chef.", badge: "Quarterly" },
|
||||||
|
{ title: "Cooking Masterclass", desc: "Learn signature techniques from our executive chef in a hands-on class with lunch and wine included.", badge: "Seasonal" },
|
||||||
|
];
|
||||||
|
|
||||||
|
export default function EventsPage() {
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="min-h-screen bg-background text-foreground antialiased">
|
||||||
|
<Header />
|
||||||
|
|
||||||
|
<section className="relative pt-32 pb-16 bg-gradient-to-b from-stone-950 to-background">
|
||||||
|
<div className="relative z-10 mx-auto max-w-4xl px-6 text-center">
|
||||||
|
<h1 className="text-4xl sm:text-5xl font-serif tracking-wide text-white animate-fade-up">Private Dining & Events</h1>
|
||||||
|
<p className="mt-4 text-stone-400 max-w-xl mx-auto animate-fade-up">Host your next special occasion in one of our exclusive private dining rooms</p>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
{/* ── PRIVATE DINING ROOMS ── */}
|
||||||
|
<section className="py-24">
|
||||||
|
<div className="mx-auto max-w-6xl px-6">
|
||||||
|
<h2 className="text-3xl font-serif tracking-wide text-center mb-16 animate-fade-up">Private Dining</h2>
|
||||||
|
<div className="grid md:grid-cols-3 gap-8 stagger">
|
||||||
|
{rooms.map((r, i) => (
|
||||||
|
<Card key={i} className="rounded-sm backdrop-blur-sm bg-stone-900/80 border-stone-700/50 overflow-hidden hover:-translate-y-1 hover:shadow-xl transition-all duration-300">
|
||||||
|
<div className={`aspect-video bg-gradient-to-br \${r.gradient} 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-6 -right-6 w-24 h-24 rounded-full bg-amber-600/15 blur-2xl" />
|
||||||
|
</div>
|
||||||
|
<CardHeader>
|
||||||
|
<CardTitle className="font-serif">{r.name}</CardTitle>
|
||||||
|
<div className="flex items-center gap-1 text-sm text-muted-foreground">
|
||||||
|
<Users className="h-3.5 w-3.5" /> Up to {r.capacity} guests
|
||||||
|
</div>
|
||||||
|
</CardHeader>
|
||||||
|
<CardContent>
|
||||||
|
<p className="text-sm text-muted-foreground">{r.desc}</p>
|
||||||
|
<Button variant="outline" className="mt-4 rounded-none tracking-widest uppercase text-xs w-full active:scale-[0.98]">
|
||||||
|
Inquire <ArrowRight className="ml-2 h-3.5 w-3.5" />
|
||||||
|
</Button>
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
{/* ── SPECIAL EVENTS ── */}
|
||||||
|
<section className="py-24 bg-muted/30">
|
||||||
|
<div className="mx-auto max-w-6xl px-6">
|
||||||
|
<h2 className="text-3xl font-serif tracking-wide text-center mb-16 animate-fade-up">Special Events</h2>
|
||||||
|
<div className="grid md:grid-cols-3 gap-8 stagger">
|
||||||
|
{events.map((e, i) => (
|
||||||
|
<Card key={i} className="rounded-sm border-stone-200 dark:border-stone-800 border-l-2 border-l-amber-700/30 hover:-translate-y-1 hover:shadow-xl transition-all duration-300">
|
||||||
|
<CardContent className="pt-6">
|
||||||
|
<Badge variant="secondary" className="mb-3 text-xs bg-amber-900/20 text-amber-700 dark:text-amber-400 border-0">{e.badge}</Badge>
|
||||||
|
<h3 className="text-xl font-serif font-medium mb-2">{e.title}</h3>
|
||||||
|
<p className="text-sm text-muted-foreground">{e.desc}</p>
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
{/* ── CATERING ── */}
|
||||||
|
<section className="py-24">
|
||||||
|
<div className="mx-auto max-w-3xl px-6 text-center">
|
||||||
|
<ChefHat className="h-10 w-10 mx-auto text-amber-600 mb-4" />
|
||||||
|
<h2 className="text-3xl font-serif tracking-wide mb-4">Off-Site Catering</h2>
|
||||||
|
<p className="text-muted-foreground mb-8 max-w-xl mx-auto">Bring the Aurum experience to your venue. Our catering team creates bespoke menus for events of any size, from intimate dinner parties to grand celebrations.</p>
|
||||||
|
<Button className="rounded-none bg-amber-700 hover:bg-amber-600 text-white tracking-widest uppercase text-xs px-8 active:scale-[0.98]">
|
||||||
|
Request a Quote <ArrowRight className="ml-2 h-4 w-4" />
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
{/* ── INQUIRY FORM ── */}
|
||||||
|
<section className="py-24 bg-muted/30">
|
||||||
|
<div className="mx-auto max-w-2xl px-6">
|
||||||
|
<h2 className="text-3xl font-serif tracking-wide text-center mb-12 animate-fade-up">Event Inquiry</h2>
|
||||||
|
<Card className="border-stone-200 dark:border-stone-800 rounded-none shadow-lg">
|
||||||
|
<CardContent className="p-8">
|
||||||
|
<form onSubmit={(e) => { e.preventDefault(); toast.success("Inquiry sent! Our events team will contact you shortly."); e.currentTarget.reset(); }} className="space-y-6">
|
||||||
|
<div className="grid sm:grid-cols-2 gap-4">
|
||||||
|
<div>
|
||||||
|
<label className="text-sm font-medium uppercase tracking-wider text-muted-foreground mb-2 block">Name</label>
|
||||||
|
<Input required placeholder="Your name" className="rounded-none border-stone-300 dark:border-stone-700" />
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<label className="text-sm font-medium uppercase tracking-wider text-muted-foreground mb-2 block">Email</label>
|
||||||
|
<Input required type="email" placeholder="your@email.com" className="rounded-none border-stone-300 dark:border-stone-700" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="grid sm:grid-cols-2 gap-4">
|
||||||
|
<div>
|
||||||
|
<label className="text-sm font-medium uppercase tracking-wider text-muted-foreground mb-2 block">Event Type</label>
|
||||||
|
<select className="flex h-10 w-full rounded-none border border-stone-300 dark:border-stone-700 bg-background px-3 py-2 text-sm">
|
||||||
|
{["Private Dinner", "Corporate Event", "Wedding Reception", "Birthday Celebration", "Wine Dinner", "Other"].map((t) => (
|
||||||
|
<option key={t}>{t}</option>
|
||||||
|
))}
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<label className="text-sm font-medium uppercase tracking-wider text-muted-foreground mb-2 block">Guest Count</label>
|
||||||
|
<Input type="number" placeholder="Number of guests" className="rounded-none border-stone-300 dark:border-stone-700" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<label className="text-sm font-medium uppercase tracking-wider text-muted-foreground mb-2 block">Preferred Date</label>
|
||||||
|
<Input required type="date" className="rounded-none border-stone-300 dark:border-stone-700" />
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<label className="text-sm font-medium uppercase tracking-wider text-muted-foreground mb-2 block">Message</label>
|
||||||
|
<Textarea placeholder="Tell us about your event..." className="rounded-none border-stone-300 dark:border-stone-700 min-h-[100px]" />
|
||||||
|
</div>
|
||||||
|
<Button type="submit" className="w-full rounded-none bg-amber-700 hover:bg-amber-600 text-white tracking-widest uppercase text-sm py-6 active:scale-[0.98]">
|
||||||
|
Submit Inquiry <ArrowRight className="ml-2 h-4 w-4" />
|
||||||
|
</Button>
|
||||||
|
</form>
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<Footer />
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
Reference in New Issue
Block a user