jyswee/olive-grove
1
0
Fork 0
forked from vibeasite-templates/template-restaurant
Code Pull Requests Activity

Seed: restaurant template (17 files)

Browse Source
This commit is contained in:
jyswee
2026-07-23 22:10:21 +00:00
parent ffb3992377
commit 04cee03626
1 changed files with 147 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/pages/Events.tsx
+147
View File
@@ -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>
);
}