Vula Builder
84 lines
3.9 KiB
TypeScript
84 lines
3.9 KiB
TypeScript
'use client'
|
|
|
|
import Image from "next/image"
|
|
|
|
const founderImg = "https://images.pexels.com/photos/14538746/pexels-photo-14538746.jpeg?auto=compress&cs=tinysrgb&h=350"
|
|
const bushveldImg = "https://images.pexels.com/photos/6146178/pexels-photo-6146178.jpeg?auto=compress&cs=tinysrgb&h=650&w=940"
|
|
|
|
export default function OurStorySection() {
|
|
return (
|
|
<section data-vula-section="ourstory" id="our-story" className="py-20 lg:py-28" style={{ backgroundColor: "#ffffff" }}>
|
|
<div className="container mx-auto px-4">
|
|
<div className="grid grid-cols-1 lg:grid-cols-2 gap-12 items-center">
|
|
{/* Text side */}
|
|
<div>
|
|
<span className="inline-block text-[#16a34a] text-sm md:text-base tracking-widest uppercase font-semibold mb-3">
|
|
Founded in 2015
|
|
</span>
|
|
<h2 className="text-3xl md:text-5xl font-bold leading-tight mb-6" style={{ color: "#211c0d" }}>
|
|
A Family's Vision, A Village's Welcome
|
|
</h2>
|
|
<div className="space-y-4 text-base leading-relaxed" style={{ color: "#211c0d/80" }}>
|
|
<p>
|
|
vaVenda Lodge was born from a single belief: that the most authentic travel experiences
|
|
are shared around a table, under a thatched roof, with the sounds of the bushveld as your soundtrack.
|
|
Our founder, Makhado Ravele, returned to his ancestral land in the Soutpansberg mountains with a dream
|
|
to welcome the world into his home.
|
|
</p>
|
|
<p>
|
|
Every detail — from the hand-stamped clay walls to the indigenous garden paths — is a tribute to the
|
|
Venda people's deep connection with nature. We partner with local artisans, storytellers, and guides
|
|
to ensure every guest leaves with more than a tan: they take home a piece of Venda soul.
|
|
</p>
|
|
<blockquote className="border-l-4 pl-4 italic text-lg" style={{ borderColor: "#d4af37", color: "#211c0d" }}>
|
|
"I am because we are." — Ubuntu philosophy, echoed in every interaction at vaVenda.
|
|
</blockquote>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Image side */}
|
|
<div className="relative">
|
|
<div className="aspect-[4/3] rounded-2xl overflow-hidden shadow-xl">
|
|
<Image
|
|
src={bushveldImg}
|
|
alt="Limpopo bushveld at sunrise"
|
|
fill
|
|
sizes="(max-width: 768px) 100vw, 50vw"
|
|
className="object-cover"
|
|
/>
|
|
</div>
|
|
<div className="absolute -bottom-6 -left-6 w-36 h-36 rounded-full overflow-hidden border-4 border-white shadow-lg">
|
|
<Image
|
|
src={founderImg}
|
|
alt="Makhado Ravele, founder of vaVenda Lodge"
|
|
fill
|
|
sizes="144px"
|
|
className="object-cover"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Stats bar */}
|
|
<div className="grid grid-cols-2 md:grid-cols-4 gap-8 mt-20 pt-12 border-t" style={{ borderColor: "#e2dfd4" }}>
|
|
{[
|
|
{ label: "Suites", value: "6" },
|
|
{ label: "Venda Artisans Featured", value: "12" },
|
|
{ label: "Years Open", value: "9" },
|
|
{ label: "Languages Spoken", value: "5" },
|
|
].map((stat) => (
|
|
<div key={stat.label} className="text-center">
|
|
<p className="text-4xl font-bold" style={{ color: "#d4af37" }}>{stat.value}</p>
|
|
<p className="text-sm uppercase tracking-wider mt-1" style={{ color: "#211c0d/60" }}>{stat.label}</p>
|
|
</div>
|
|
))}
|
|
</div>
|
|
|
|
{/* Contact snippet */}
|
|
<div className="mt-12 text-center text-sm" style={{ color: "#211c0d/60" }}>
|
|
<p>Makhado, Limpopo, South Africa · +27 15 001 2345 · info@vavendalodge.co.za</p>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
)
|
|
} |