Deploy

2026-07-26 17:04:57 +00:00
parent dc64019346
commit 3e24a1455c
1 changed files with 68 additions and 0 deletions
@@ -0,0 +1,68 @@
+import Image from 'next/image'
+import Link from 'next/link'
+import Button from '@/components/ui/Button'
+
+export default function OurStorySection() {
+  return (
+    <section data-vula-section="ourstory" id="our-story" 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">
+          {/* Image side — overlapping feeling */}
+          <div className="relative">
+            <div className="relative overflow-hidden rounded-2xl shadow-[0_20px_50px_-12px_rgba(0,0,0,0.25)]">
+              <Image
+                src="https://images.pexels.com/photos/5998268/pexels-photo-5998268.jpeg?auto=compress&cs=tinysrgb&h=650&w=940"
+                alt="Zulwini Lodge — traditional Zulu welcome ceremony at sunset"
+                width={800}
+                height={500}
+                className="object-cover w-full h-full"
+              />
+              {/* rotated sticker badge */}
+              <div className="absolute -top-4 -right-4 w-28 h-28 bg-[#ea580c] rounded-full flex items-center justify-center rotate-12 shadow-lg">
+                <span className="text-white font-bold text-sm text-center leading-tight">
+                  Family-run<br />since 2012
+                </span>
+              </div>
+            </div>
+            {/* offset second image */}
+            <div className="absolute -bottom-8 -left-8 w-64 h-48 rounded-2xl overflow-hidden shadow-xl rotate-[-3deg] hidden lg:block border-4 border-white">
+              <Image
+                src="https://images.pexels.com/photos/34814937/pexels-photo-34814937.jpeg?auto=compress&cs=tinysrgb&h=350"
+                alt="Lodge infinity pool blending into the bushveld horizon"
+                fill
+                sizes="256px"
+                className="object-cover"
+              />
+            </div>
+          </div>
+
+          {/* Text side */}
+          <div>
+            <p className="text-sm uppercase tracking-[0.2em] text-[#ea580c] font-semibold mb-2">
+              Our Story
+            </p>
+            <h2 className="text-3xl md:text-4xl font-bold text-[#21140d] mb-6" style={{ fontFamily: 'Bricolage Grotesque, sans-serif' }}>
+              Born from a love of Zululand
+            </h2>
+            <div className="space-y-4 text-[#21140d]/80" style={{ fontFamily: "Lora, serif", fontStyle: "italic" }}>
+              <p>
+                Zulwini Lodge began in 2012 when the Mthembu family transformed their 500-hectare family farm into an exclusive bush retreat, determined to share the raw beauty of northern KwaZulu-Natal with the world. Every suite is named after a Zulu clan — Indlovu, Nkosi, Mvula — and furnished with hand-carved headboards and woven 
+                {`'`}ilala palm lampshades sourced from the nearby Hluhluwe community.
+              </p>
+              <p>
+                We work with three local women's cooperatives who supply the beadwork and pottery that adorn each room. Solar power heats all water, and 60% of our produce comes from our own permaculture garden — the rest from neighbouring farms within a 20 km radius. The result is a lodge that treads lightly and welcomes warmly, in the true spirit of ubuntu.
+              </p>
+            </div>
+            <div className="mt-8">
+              <Link href="#about">
+                <Button variant="outline" className="border-[#ea580c] text-[#ea580c] hover:bg-[#ea580c] hover:text-white transition-all duration-200 ease-out">
+                  Read the full story
+                </Button>
+              </Link>
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+  )
+}