From 233248308c5defbca320e75b5074d5ef93ae0434 Mon Sep 17 00:00:00 2001
From: Vula Builder <deploy@vula.app>
Date: Sat, 27 Jun 2026 09:51:16 +0000
Subject: [PATCH] Deploy

---
 src/components/sections/HeroSection.tsx | 40 +++++++++++++++++++++++++
 1 file changed, 40 insertions(+)
 create mode 100644 src/components/sections/HeroSection.tsx

diff --git a/src/components/sections/HeroSection.tsx b/src/components/sections/HeroSection.tsx
new file mode 100644
index 0000000..a6e458b
--- /dev/null
+++ b/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/3498/italian-pizza-restaurant-italy.jpg?auto=compress&cs=tinysrgb&h=650&w=940"
+  const headline = "Bona Vista"
+  const subtitle = "A Rome-based restaurant that blends traditional Italian recipes with a nature-inspired, earthy brand identity —."
+
+  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-[#2E7D32]" />
+      )}
+      <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-[#8BC34A] text-black px-8 py-4 text-lg font-semibold rounded-lg hover:opacity-90 transition-opacity"
+        >
+          View Our Menu
+        </Link>
+      </div>
+    </section>
+  )
+}