49 lines
2.0 KiB
TypeScript
49 lines
2.0 KiB
TypeScript
"use client";
|
|
|
|
import { Container } from "@/components/container";
|
|
import { Heading } from "@/components/heading";
|
|
import { Subheading } from "@/components/subheading";
|
|
import { Button } from "@/components/ui/button";
|
|
import { motion } from "framer-motion";
|
|
import Link from "next/link";
|
|
|
|
export function Hero() {
|
|
return (
|
|
<section className="relative h-[90vh] flex items-center justify-center overflow-hidden bg-neutral-900">
|
|
<div className="absolute inset-0 z-0">
|
|
<div className="absolute inset-0 bg-black/50 z-10" />
|
|
<img
|
|
src="https://images.unsplash.com/photo-1514362545857-3bc16549766b?q=80&w=2070&auto=format&fit=crop"
|
|
alt="Restaurant Ambience"
|
|
className="w-full h-full object-cover"
|
|
/>
|
|
</div>
|
|
|
|
<Container className="relative z-20 text-center text-white">
|
|
<motion.div
|
|
initial={{ opacity: 0, y: 20 }}
|
|
animate={{ opacity: 1, y: 0 }}
|
|
transition={{ duration: 0.8 }}
|
|
>
|
|
<Heading as="h1" className="text-5xl md:text-7xl font-serif mb-6 text-amber-50">
|
|
Lumière Dining
|
|
</Heading>
|
|
<Subheading className="text-xl md:text-2xl text-amber-100/80 max-w-2xl mx-auto mb-10">
|
|
Experience the art of French gastronomy in the heart of Paris.
|
|
Elegant flavors, warm atmosphere, unforgettable moments.
|
|
</Subheading>
|
|
|
|
<div className="flex flex-col sm:flex-row gap-4 justify-center">
|
|
<Button size="lg" className="bg-amber-600 hover:bg-amber-700 text-white border-none text-lg px-8 py-6 h-auto" asChild>
|
|
<Link href="#reservation">Book a Table</Link>
|
|
</Button>
|
|
<Button size="lg" variant="outline" className="border-amber-100 text-amber-100 hover:bg-amber-900/30 hover:text-white text-lg px-8 py-6 h-auto" asChild>
|
|
<Link href="#menu">View Menu</Link>
|
|
</Button>
|
|
</div>
|
|
</motion.div>
|
|
</Container>
|
|
</section>
|
|
);
|
|
}
|