Seed: restaurant template (17 files)
This commit is contained in:
@@ -0,0 +1,198 @@
|
|||||||
|
import { Link } from "react-router-dom";
|
||||||
|
import { Button } from "@/components/ui/button";
|
||||||
|
import { Card, CardContent } from "@/components/ui/card";
|
||||||
|
import { Badge } from "@/components/ui/badge";
|
||||||
|
import {
|
||||||
|
ArrowRight, Eye, UtensilsCrossed, Star, Wine, Quote
|
||||||
|
} from "lucide-react";
|
||||||
|
import Header from "@/components/Header";
|
||||||
|
import Footer from "@/components/Footer";
|
||||||
|
|
||||||
|
const highlights = [
|
||||||
|
{ name: "Wagyu Beef Tenderloin", desc: "A5 wagyu, bone marrow butter, roasted root vegetables, red wine jus", price: "$62", gradient: "from-amber-800/30 to-stone-700/30" },
|
||||||
|
{ name: "Seared Scallops", desc: "Pan-seared diver scallops, cauliflower purée, truffle vinaigrette", price: "$24", gradient: "from-stone-700/30 to-amber-900/30" },
|
||||||
|
{ name: "Valrhona Chocolate Fondant", desc: "Warm dark chocolate cake, vanilla bean ice cream, gold leaf", price: "$16", gradient: "from-amber-900/30 to-stone-800/30" },
|
||||||
|
];
|
||||||
|
|
||||||
|
const testimonials = [
|
||||||
|
{ name: "James & Katherine", text: "An extraordinary dining experience. Every dish was a masterpiece. The tasting menu was the highlight of our trip.", source: "Google Reviews" },
|
||||||
|
{ name: "Sophie Laurent", text: "Impeccable service and the most beautiful presentation I have ever seen. The wine pairing was exquisite.", source: "TripAdvisor" },
|
||||||
|
{ name: "Michael Chen", text: "Worth every penny. The wagyu was the best I have had outside of Japan. Already planning our return visit.", source: "Yelp" },
|
||||||
|
];
|
||||||
|
|
||||||
|
export default function IndexPage() {
|
||||||
|
return (
|
||||||
|
<div className="min-h-screen bg-background text-foreground antialiased">
|
||||||
|
<Header />
|
||||||
|
|
||||||
|
{/* ── HERO ── */}
|
||||||
|
<section className="relative min-h-screen flex items-center justify-center overflow-hidden bg-gradient-to-b from-stone-950 via-amber-950/20 to-stone-950">
|
||||||
|
<div className="absolute inset-0 pointer-events-none">
|
||||||
|
<div className="absolute top-1/3 left-1/2 -translate-x-1/2 w-[600px] h-[600px] rounded-full bg-amber-600 opacity-10 blur-[150px]" />
|
||||||
|
<div className="absolute top-1/4 left-1/4 w-[400px] h-[400px] rounded-full bg-amber-500 opacity-10 blur-[120px]" />
|
||||||
|
<div className="absolute bottom-1/4 right-1/4 w-[350px] h-[350px] rounded-full bg-rose-600 opacity-10 blur-[120px]" />
|
||||||
|
</div>
|
||||||
|
<div className="absolute inset-0 opacity-[0.03]" style={{ backgroundImage: "url(\"data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E\")" }} />
|
||||||
|
<div className="relative z-10 mx-auto max-w-4xl px-6 text-center">
|
||||||
|
<div className="text-5xl text-amber-400/10 font-serif mb-4 select-none">✧</div>
|
||||||
|
<div className="flex items-center justify-center gap-3 mb-6 text-amber-400/60 text-sm tracking-[0.3em]">
|
||||||
|
<span>—</span><span>✦</span><span>—</span>
|
||||||
|
</div>
|
||||||
|
<Badge variant="secondary" className="mb-6 px-4 py-1.5 text-xs tracking-widest uppercase bg-amber-900/30 text-amber-300 border-amber-700/30 backdrop-blur">
|
||||||
|
Est. 1987
|
||||||
|
</Badge>
|
||||||
|
<h1 className="text-4xl sm:text-5xl md:text-6xl lg:text-7xl font-serif tracking-wide text-white leading-[1.1]">A Culinary Journey Through Timeless Flavors</h1>
|
||||||
|
<p className="mx-auto mt-6 max-w-xl text-lg text-stone-400 leading-relaxed">Experience refined dining where heritage meets innovation. Every dish tells a story crafted with passion, precision, and the finest seasonal ingredients.</p>
|
||||||
|
<div className="mt-10 flex flex-col sm:flex-row items-center justify-center gap-4">
|
||||||
|
<Button asChild size="lg" className="rounded-none px-10 text-sm tracking-widest uppercase bg-amber-700 hover:bg-amber-600 text-white shadow-lg shadow-amber-900/30 active:scale-[0.98]">
|
||||||
|
<Link to="/reservations">Reserve a Table <ArrowRight className="ml-2 h-4 w-4" /></Link>
|
||||||
|
</Button>
|
||||||
|
<Button asChild variant="outline" size="lg" className="rounded-none px-10 text-sm tracking-widest uppercase border-stone-600 text-stone-200 hover:bg-stone-800 active:scale-[0.98]">
|
||||||
|
<Link to="/menu">View Menu</Link>
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
{/* ── SIGNATURE DISHES ���─ */}
|
||||||
|
<section className="py-24 bg-stone-50 dark:bg-stone-950">
|
||||||
|
<div className="mx-auto max-w-6xl px-6">
|
||||||
|
<div className="text-center mb-16 animate-fade-up">
|
||||||
|
<div className="flex items-center justify-center gap-3 mb-4 text-amber-600/60 text-sm tracking-[0.3em]">
|
||||||
|
<span>—</span><UtensilsCrossed className="h-4 w-4" /><span>—</span>
|
||||||
|
</div>
|
||||||
|
<h2 className="text-3xl sm:text-4xl font-serif tracking-wide">Signature Dishes</h2>
|
||||||
|
<p className="mt-3 text-muted-foreground">Chef's selection of our most celebrated creations</p>
|
||||||
|
</div>
|
||||||
|
<div className="grid md:grid-cols-3 gap-8 stagger">
|
||||||
|
{highlights.map((d, i) => (
|
||||||
|
<div key={i} className="group text-center">
|
||||||
|
{i === 0 && <Badge className="mb-2 bg-amber-700 text-white text-[10px] uppercase tracking-wider border-0">Chef's Pick</Badge>}
|
||||||
|
<div className={`aspect-square rounded-sm bg-gradient-to-br \${d.gradient} mb-6 transition-transform duration-500 group-hover:scale-105 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-8 -right-8 w-32 h-32 rounded-full bg-amber-600/20 blur-2xl" />
|
||||||
|
</div>
|
||||||
|
<h3 className="text-xl font-serif font-medium">{d.name}</h3>
|
||||||
|
<p className="mt-2 text-sm text-muted-foreground italic">{d.desc}</p>
|
||||||
|
<span className="inline-block mt-3 text-amber-700 dark:text-amber-400 font-semibold">{d.price}</span>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
<div className="text-center mt-12">
|
||||||
|
<Button asChild variant="outline" className="rounded-none tracking-widest uppercase text-xs px-8 active:scale-[0.98]">
|
||||||
|
<Link to="/menu">View Full Menu <ArrowRight className="ml-2 h-4 w-4" /></Link>
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
{/* ── ABOUT PREVIEW ── */}
|
||||||
|
<section className="py-24">
|
||||||
|
<div className="mx-auto max-w-7xl px-6">
|
||||||
|
<div className="grid lg:grid-cols-2 gap-16 items-center">
|
||||||
|
<div className="animate-fade-up">
|
||||||
|
<div className="flex items-center gap-3 mb-4 text-amber-600/60 text-sm tracking-[0.3em]">
|
||||||
|
<span>—</span><Star className="h-4 w-4" /><span>—</span>
|
||||||
|
</div>
|
||||||
|
<h2 className="text-3xl sm:text-4xl font-serif tracking-wide mb-6">Our Story</h2>
|
||||||
|
<p className="text-muted-foreground leading-relaxed mb-4">For over three decades, Aurum has been a sanctuary for those who appreciate the art of fine dining. Founded by Chef Marcus Bellini, our kitchen is guided by one philosophy: let exceptional ingredients speak for themselves.</p>
|
||||||
|
<div className="grid grid-cols-3 gap-6 mt-10 mb-8">
|
||||||
|
<div className="text-center">
|
||||||
|
<div className="text-3xl font-serif font-bold text-amber-700 dark:text-amber-400">35+</div>
|
||||||
|
<div className="text-sm text-muted-foreground mt-1">Years</div>
|
||||||
|
</div>
|
||||||
|
<div className="text-center">
|
||||||
|
<div className="text-3xl font-serif font-bold text-amber-700 dark:text-amber-400">2</div>
|
||||||
|
<div className="text-sm text-muted-foreground mt-1">Michelin Stars</div>
|
||||||
|
</div>
|
||||||
|
<div className="text-center">
|
||||||
|
<div className="text-3xl font-serif font-bold text-amber-700 dark:text-amber-400">400+</div>
|
||||||
|
<div className="text-sm text-muted-foreground mt-1">Wines</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<Button asChild variant="outline" className="rounded-none tracking-widest uppercase text-xs px-8 active:scale-[0.98]">
|
||||||
|
<Link to="/about">Our Story <ArrowRight className="ml-2 h-4 w-4" /></Link>
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
<div className="relative">
|
||||||
|
<div className="aspect-[4/5] rounded-sm bg-gradient-to-br from-amber-800/30 via-stone-700/30 to-amber-900/30 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 -top-10 -left-10 w-40 h-40 rounded-full bg-amber-500/15 blur-3xl" />
|
||||||
|
<div className="absolute -bottom-10 -right-10 w-36 h-36 rounded-full bg-amber-700/20 blur-2xl" />
|
||||||
|
</div>
|
||||||
|
<div className="absolute inset-0 translate-x-4 translate-y-4 -z-10 border-2 border-amber-700/30 rounded-sm" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
{/* ── GALLERY ── */}
|
||||||
|
<section className="py-24 bg-stone-50 dark:bg-stone-950">
|
||||||
|
<div className="mx-auto max-w-7xl px-6">
|
||||||
|
<div className="text-center mb-16 animate-fade-up">
|
||||||
|
<h2 className="text-3xl sm:text-4xl font-serif tracking-wide">Gallery</h2>
|
||||||
|
<p className="mt-3 text-muted-foreground">A glimpse into the Aurum experience</p>
|
||||||
|
</div>
|
||||||
|
<div className="grid grid-cols-2 lg:grid-cols-3 gap-4">
|
||||||
|
{[0, 1, 2, 3, 4, 5].map((i) => (
|
||||||
|
<div key={i} className={`group relative overflow-hidden rounded-sm cursor-pointer animate-fade-in \${i === 0 || i === 5 ? "lg:col-span-2" : ""}`}>
|
||||||
|
<div className={`\${i === 0 || i === 5 ? "aspect-[2/1]" : "aspect-square"} bg-gradient-to-br from-amber-800/20 via-stone-600/20 to-stone-800/20 transition-transform duration-500 group-hover:scale-105 hover:brightness-110 relative overflow-hidden`}>
|
||||||
|
<div className="absolute inset-0 opacity-[0.03]" 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>
|
||||||
|
<span className="absolute bottom-2 right-2 text-xs text-white/60 bg-black/40 px-2 py-0.5 rounded backdrop-blur-sm">{i+1}/6</span>
|
||||||
|
<div className="absolute inset-0 bg-black/0 group-hover:bg-black/40 transition-all duration-300 flex items-center justify-center">
|
||||||
|
<Eye className="h-8 w-8 text-white opacity-0 group-hover:opacity-100 transition-opacity duration-300 drop-shadow-lg" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
{/* ── TESTIMONIALS ── */}
|
||||||
|
<section className="py-24">
|
||||||
|
<div className="mx-auto max-w-6xl px-6">
|
||||||
|
<div className="text-center mb-16 animate-fade-up">
|
||||||
|
<h2 className="text-3xl sm:text-4xl font-serif tracking-wide">What Our Guests Say</h2>
|
||||||
|
</div>
|
||||||
|
<div className="grid md:grid-cols-3 gap-8 stagger">
|
||||||
|
{testimonials.map((t, i) => (
|
||||||
|
<Card key={i} className="backdrop-blur-sm bg-stone-900/80 border-stone-700/50 border-t-2 border-amber-700/30 rounded-sm hover:-translate-y-1 hover:shadow-xl transition-all duration-300">
|
||||||
|
<CardContent className="pt-6">
|
||||||
|
<div className="flex gap-0.5 mb-4">
|
||||||
|
{[...Array(5)].map((_, j) => (
|
||||||
|
<Star key={j} className="h-4 w-4 fill-amber-400 text-amber-400" />
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
<Quote className="h-8 w-8 text-amber-600/20 mb-4" />
|
||||||
|
<p className="text-muted-foreground italic leading-relaxed">"{t.text}"</p>
|
||||||
|
<div className="mt-4 pt-4 border-t border-stone-200 dark:border-stone-800">
|
||||||
|
<div className="font-medium text-sm">{t.name}</div>
|
||||||
|
<div className="text-xs text-muted-foreground">{t.source}</div>
|
||||||
|
</div>
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
{/* ── RESERVATION CTA ── */}
|
||||||
|
<section className="py-24 bg-gradient-to-b from-stone-950 to-amber-950/30">
|
||||||
|
<div className="mx-auto max-w-3xl px-6 text-center">
|
||||||
|
<div className="flex items-center justify-center gap-3 mb-6 text-amber-400/60 text-sm tracking-[0.3em]">
|
||||||
|
<span>—</span><Wine className="h-4 w-4" /><span>—</span>
|
||||||
|
</div>
|
||||||
|
<h2 className="text-3xl sm:text-4xl font-serif tracking-wide text-white mb-4">Join Us for an Unforgettable Evening</h2>
|
||||||
|
<p className="text-stone-400 mb-10">Reserve your table and experience the art of fine dining</p>
|
||||||
|
<Button asChild size="lg" className="rounded-none px-10 text-sm tracking-widest uppercase bg-amber-700 hover:bg-amber-600 text-white active:scale-[0.98]">
|
||||||
|
<Link to="/reservations">Book a Table <ArrowRight className="ml-2 h-4 w-4" /></Link>
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<Footer />
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
Reference in New Issue
Block a user