Deploy

src/components/sections/HeroSection.tsx

@@ -0,0 +1,40 @@
+import Image from "next/image"
+import Link from "next/link"
+
+export default function HeroSection() {
+  const imageUrl = "https://images.pexels.com/photos/3184191/pexels-photo-3184191.jpeg?auto=compress&cs=tinysrgb&h=650&w=940"
+  const headline = "Pino's Italian Restaurant"
+  const subtitle = "A family-owned downtown Chicago Italian restaurant serving authentic wood-fired pizzas, fresh pasta, and traditional."
+
+  return (
+    <section data-vula-section="hero" id="hero" className="relative min-h-[80vh] overflow-hidden">
+      <style>{"@keyframes kenBurns { 0% { transform: scale(1) translate(0, 0); } 50% { transform: scale(1.08) translate(-1.5%, -1%); } 100% { transform: scale(1) translate(0, 0); } }"}</style>
+      {imageUrl ? (
+        <div className="absolute inset-0" style={{ animation: "kenBurns 16s ease-in-out infinite" }}>
+          <Image
+            src={imageUrl}
+            alt=""
+            fill
+            className="object-cover"
+            sizes="100vw"
+            priority
+          />
+        </div>
+      ) : (
+        <div className="absolute inset-0 bg-[#E91E63]" />
+      )}
+      <div className="absolute inset-0 bg-gradient-to-t from-black/70 via-black/40 to-black/20" />
+      <div className="relative z-10 flex flex-col items-center justify-center min-h-[80vh] text-center px-6 text-white">
+        <p className="uppercase tracking-widest text-sm mb-4 text-white/70">Authentic Cuisine</p>
+        <h1 className="text-5xl lg:text-6xl font-bold leading-tight mb-6 max-w-4xl">{headline}</h1>
+        <p className="text-xl text-white/80 max-w-2xl mb-8">{subtitle}</p>
+        <Link
+          href="#menu"
+          className="inline-block bg-[#FFEB3B] text-black px-8 py-4 text-lg font-semibold rounded-lg hover:opacity-90 transition-opacity"
+        >
+          View Our Menu
+        </Link>
+      </div>
+    </section>
+  )
+}