Deploy

src/components/sections/BookYourFarmstaySection.tsx

@@ -0,0 +1,48 @@
+'use client'
+import Button from "@/components/ui/Button"
+import Image from "next/image"
+
+export default function BookYourFarmstaySection() {
+  return (
+    <section data-vula-section="bookyourfarmstay" id="book-now" className="relative overflow-hidden bg-[#c06a4e] py-20">
+      <div className="absolute inset-0">
+        <Image
+          src="https://images.pexels.com/photos/5692285/pexels-photo-5692285.jpeg?auto=compress&cs=tinysrgb&h=350"
+          alt="Homemade breakfast spread on a garden table"
+          fill
+          sizes="100vw"
+          className="object-cover opacity-20"
+        />
+      </div>
+      <div className="relative z-10 container mx-auto px-4 text-center">
+        <h2 className="text-4xl font-bold text-white mb-4">
+          Baked before sunrise,{" "}
+          <span className="text-[#f4d03f]">gone by noon.</span>
+        </h2>
+        <p className="text-white/90 max-w-2xl mx-auto mb-8 text-lg">
+          Reserve one of five rooms and wake to the scent of freshly baked bread and
+          fruit from our garden. Each morning begins with a homemade breakfast from
+          the garden — building anticipation for your Franschhoek escape.
+        </p>
+        <div className="flex flex-wrap justify-center gap-2 mb-8">
+          <span className="inline-flex items-center px-3 py-1 rounded-full bg-white/20 text-white text-sm">
+            · 5 rooms
+          </span>
+          <span className="inline-flex items-center px-3 py-1 rounded-full bg-white/20 text-white text-sm">
+            · Garden-to-table breakfast
+          </span>
+          <span className="inline-flex items-center px-3 py-1 rounded-full bg-white/20 text-white text-sm">
+            · Fresh farm eggs daily
+          </span>
+        </div>
+        <Button variant="default" size="lg" className="bg-white text-[#c06a4e] hover:bg-white/90 rounded-full px-10">
+          Book Your Farmstay
+        </Button>
+        <p className="text-white/70 mt-4 text-sm">Call +27 21 874 1234 to reserve directly</p>
+      </div>
+      <div className="absolute bottom-4 right-4 sm:bottom-8 sm:right-8 bg-white rounded-2xl shadow-2xl p-4 max-w-56">
+        <p className="text-sm font-medium text-gray-800">Only 5 rooms — book early for summer weekends.</p>
+      </div>
+    </section>
+  )
+}