Update components/hero.tsx

components/hero.tsx

@@ -0,0 +1,48 @@
+"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>
+  );
+}