Deploy

src/components/sections/ReservationCTASection.tsx

@@ -0,0 +1,37 @@
+import Image from 'next/image'
+
+export default function ReservationCTASection() {
+  return (
+    <section data-vula-section="reservationcta" id="reserve" className="relative overflow-hidden py-24 lg:py-32">
+      {/* Background image */}
+      <div className="absolute inset-0">
+        <Image
+          src="https://images.pexels.com/photos/3498/italian-pizza-restaurant-italy.jpg?auto=compress&cs=tinysrgb&h=650&w=940"
+          alt="Intimate Italian restaurant tablescape"
+          fill
+          sizes="100vw"
+          className="object-cover"
+          priority
+        />
+      </div>
+      {/* Overlay */}
+      <div className="absolute inset-0 bg-gradient-to-b from-black/60 via-black/40 to-black/60" />
+      {/* Content */}
+      <div className="relative z-10 flex flex-col items-center justify-center text-center px-6 text-white min-h-[50vh]">
+        <h2 className="text-4xl md:text-5xl font-bold mb-6">
+          Reserve Your Table
+        </h2>
+        <p className="max-w-xl text-lg text-white/80 mb-10">
+          Experience a calm, authentic Italian meal in the heart of Rome.
+          We look forward to welcoming you.
+        </p>
+        <a
+          href="#contact"
+          className="inline-block bg-[#1B3A1F] text-white px-10 py-4 rounded-xl text-lg font-semibold shadow-[var(--shadow-lifted)] hover:opacity-90 transition-all duration-200 ease-out"
+        >
+          Reserve Your Table
+        </a>
+      </div>
+    </section>
+  )
+}