Deploy

2026-07-14 17:42:08 +00:00
parent 21f4d2902d
commit 62e742f025
1 changed files with 62 additions and 0 deletions
@@ -0,0 +1,62 @@
+import Image from 'next/image'
+import Button from '@/components/ui/Button'
+
+export default function FranschhoekHeritageStorySection() {
+  return (
+    <section data-vula-section="franschhoekheritagestory" id="our-story" className="py-20 bg-white">
+      <div className="container mx-auto px-4 max-w-7xl">
+        <div className="flex flex-col lg:flex-row gap-12 items-center">
+          {/* Text */}
+          <div className="flex-1 max-w-lg">
+            <span className="inline-block text-sm uppercase tracking-widest text-[#6b8e23] mb-2">Die Opstal · Since 1927</span>
+            <h2 className="text-3xl md:text-5xl font-bold text-[#2c331f] mb-6">
+              From neglect to nurture: a 1920s story.
+            </h2>
+            <p className="text-base text-[#2c331f]/80 leading-relaxed mb-4">
+              When we first saw Die Opstal, the gables were crumbling, the orchard overgrown,
+              and the yellowwood floors buried under decades of dust. We spent two years
+              restoring every door frame, every window sash, and every fireplace — keeping
+              the soul of the original homestead intact.
+            </p>
+            <p className="text-base text-[#2c331f]/80 leading-relaxed mb-4">
+              Today, breakfast is made from free-range eggs laid by our own chickens, peaches
+              from the orchard, and sourdough baked in the wood‑fired oven. The hens scratch
+              under the fig trees while guests sip coffee on the stoep, watching the mist burn
+              off the Franschhoek mountains.
+            </p>
+            <p className="text-sm text-[#36454F] font-medium">
+              This is not a hotel. It is a home we are honoured to share.
+            </p>
+            <div className="mt-6">
+              <Button className="bg-[#6b8e23] hover:bg-[#5a7a1d] text-white rounded-full px-8 py-3">
+                <a href="#book-now">Come experience the rhythm</a>
+              </Button>
+            </div>
+          </div>
+
+          {/* Image with floating chip */}
+          <div className="flex-1 relative">
+            <div
+              className="overflow-hidden"
+              style={{ borderRadius: '999px 999px 24px 24px' }}
+            >
+              <Image
+                src="https://images.pexels.com/photos/7696509/pexels-photo-7696509.jpeg?auto=compress&cs=tinysrgb&h=350"
+                alt="Restored Cape Dutch homestead with mountain backdrop"
+                width={600}
+                height={400}
+                className="object-cover w-full h-auto"
+              />
+            </div>
+
+            {/* Floating chip */}
+            <div className="absolute -bottom-4 -left-4 bg-white rounded-[22px] shadow-2xl p-4 max-w-[200px]">
+              <p className="text-sm font-semibold text-[#36454F]">Farm fresh every day</p>
+              <p className="text-xs text-[#2c331f] mt-1">Free-range eggs and orchard fruit daily.</p>
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+  )
+}