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>
  )
 }