From 5dc2cdd618709cb4ff5decaa0ecf95711490df6d Mon Sep 17 00:00:00 2001
From: Vula Builder <deploy@vula.app>
Date: Tue, 14 Jul 2026 17:42:07 +0000
Subject: [PATCH] Deploy

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

diff --git a/src/components/sections/CapeDutchHomesteadHeroSection.tsx b/src/components/sections/CapeDutchHomesteadHeroSection.tsx
new file mode 100644
index 0000000..e4a9d13
--- /dev/null
+++ b/src/components/sections/CapeDutchHomesteadHeroSection.tsx
@@ -0,0 +1,42 @@
+import Image from 'next/image'
+import Button from '@/components/ui/Button'
+
+export default function CapeDutchHomesteadHeroSection() {
+  return (
+    <section data-vula-section="capedutchhomesteadhero" id="hero" className="relative min-h-screen flex items-center justify-center overflow-hidden">
+      {/* Background image */}
+      <div className="absolute inset-0">
+        <Image
+          src="https://images.pexels.com/photos/38201182/pexels-photo-38201182.jpeg?auto=compress&cs=tinysrgb&h=650&w=940"
+          alt="Whitewashed Cape Dutch homestead with fruit trees in bloom"
+          fill
+          sizes="100vw"
+          className="object-cover"
+          priority
+        />
+      </div>
+
+      {/* Overlay */}
+      <div className="absolute inset-0 bg-[#2c331f]/60" />
+
+      {/* Content */}
+      <div className="relative z-10 text-center text-white px-6 max-w-3xl">
+        <h1 className="text-4xl md:text-6xl font-bold leading-tight mb-6">
+          Baked before sunrise, gone by noon.
+        </h1>
+        <p className="text-lg md:text-xl mb-8 text-[#f4f5f2] opacity-90">
+          Welcome to Die Opstal — a restored Cape Dutch homestead on the Franschhoek wine route.
+        </p>
+        <Button size="lg" className="bg-[#6b8e23] hover:bg-[#5a7a1d] text-white rounded-full px-10 py-4 text-lg">
+          <a href="#rooms">Explore Our Farmstay</a>
+        </Button>
+      </div>
+
+      {/* Floating chip card */}
+      <div className="absolute bottom-8 right-8 bg-white rounded-[22px] shadow-2xl p-5 max-w-[220px]">
+        <p className="text-sm font-semibold text-[#36454F]">Fresh from the farm</p>
+        <p className="text-xs text-[#2c331f] mt-1">Free-range eggs and orchard fruit every morning.</p>
+      </div>
+    </section>
+  )
+}