Deploy

2026-07-15 09:25:28 +00:00
parent f477a33499
commit affc95d7d7
1 changed files with 52 additions and 0 deletions
@@ -0,0 +1,52 @@
+import Image from "next/image"
+
+export default function OurFamilyRootsSection() {
+  return (
+    <section data-vula-section="ourfamilyroots" id="family-roots" className="py-20 bg-white">
+      <div className="container mx-auto px-4">
+        <div className="grid grid-cols-1 lg:grid-cols-2 gap-12 items-center">
+          <div>
+            <h2 className="font-heading text-3xl md:text-4xl text-[#1b210d] mb-6">Built by Hand, Rooted in Love</h2>
+            <div className="font-body text-base text-[#1b210d]/80 leading-relaxed space-y-4">
+              <p>
+                Jan and Marietjie first saw this stretch of Limpopo bush in 2003. The knobthorn trees, the dawn chorus of hornbills, the way the light turned golden at dusk — they knew they had found home.
+              </p>
+              <p>
+                They built the first chalet with their own hands, timber by timber, while raising three children under canvas. By 2010, Thornveld opened its doors — eight self-catering chalets, each with a view of the wild.
+              </p>
+              <p>
+                Today, guests arrive as strangers and leave as family. Jan still leads the morning walks; Marietjie bakes the rusks for sundowners. This is not a hotel — it is their home, and you are welcome.
+              </p>
+            </div>
+            {/* Timeline with hairline dividers */}
+            <div className="mt-8 space-y-3">
+              {[
+                { year: "2003", event: "Discovered the land" },
+                { year: "2005", event: "First chalet built" },
+                { year: "2010", event: "Opened to guests" },
+                { year: "2020", event: "Expanded to 8 chalets" }
+              ].map((item, i) => (
+                <div key={i} className="flex gap-4 border-b border-[#dee2d4] pb-3">
+                  <span className="font-heading text-[#6b8e23] font-bold min-w-[60px]">{item.year}</span>
+                  <span className="font-body italic text-[#8b5a3c]">{item.event}</span>
+                </div>
+              ))}
+            </div>
+          </div>
+          <div className="relative aspect-[4/3] lg:aspect-auto lg:h-[500px] w-full overflow-hidden rounded-xl shadow-md rotate-1">
+            <Image
+              src="https://images.pexels.com/photos/37769918/pexels-photo-37769918.jpeg?auto=compress&cs=tinysrgb&h=350"
+              alt="Jan and Marietjie on the main deck with the bushveld behind them"
+              fill
+              className="object-cover"
+              sizes="(max-width: 1024px) 100vw, 50vw"
+            />
+            <div className="absolute bottom-4 left-4 bg-[#f5f5dc]/90 text-[#1b210d] px-4 py-2 rounded-lg text-sm font-body italic shadow-md">
+              The family deck, where stories are shared.
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+  )
+}