From 1bbd92f3f181657cb151df3c3f76f01a7622c1ed Mon Sep 17 00:00:00 2001
From: Vula Builder <deploy@vula.app>
Date: Tue, 28 Jul 2026 07:32:31 +0000
Subject: [PATCH] Deploy

---
 .../IndigenousBotanicalsStorySection.tsx      | 63 +++++++++++++++++++
 1 file changed, 63 insertions(+)
 create mode 100644 src/components/sections/IndigenousBotanicalsStorySection.tsx

diff --git a/src/components/sections/IndigenousBotanicalsStorySection.tsx b/src/components/sections/IndigenousBotanicalsStorySection.tsx
new file mode 100644
index 0000000..4b91d6e
--- /dev/null
+++ b/src/components/sections/IndigenousBotanicalsStorySection.tsx
@@ -0,0 +1,63 @@
+'use client'
+
+import Image from 'next/image'
+
+export default function IndigenousBotanicalsStorySection() {
+  return (
+    <section data-vula-section="indigenousbotanicalsstory" id="indigenous-botanicals" className="py-24 bg-[#fff] relative overflow-hidden">
+      <div className="container mx-auto px-4">
+        <div className="grid lg:grid-cols-2 gap-12 items-center">
+          <div className="relative">
+            <div className="relative h-[500px] lg:h-[600px] rounded-2xl overflow-hidden shadow-xl">
+              {/* Use provided content image – first one */}
+              <Image
+                src="https://images.pexels.com/photos/33783/olive-oil-salad-dressing-cooking-olive.jpg?auto=compress&cs=tinysrgb&h=350"
+                alt="Marula fruit being harvested"
+                fill
+                sizes="(max-width: 1024px) 100vw, 50vw"
+                className="object-cover"
+              />
+            </div>
+            {/* Overlapping fact badge */}
+            <div className="absolute -bottom-6 -right-6 bg-[#ea580c] text-white px-6 py-3 rounded-full rotate-3 shadow-lg">
+              <span className="font-bold text-sm">Cold-pressed daily</span>
+            </div>
+          </div>
+          <div className="space-y-8">
+            <h2 className="text-4xl lg:text-5xl font-bold text-[#21140d] leading-tight">Rooted in Indigenous Wisdom</h2>
+            <p className="text-lg text-[#8b5a3c] font-serif italic">Three generations of African skincare knowledge meet modern cold-press technique.</p>
+            <div className="space-y-6">
+              <div className="flex gap-4">
+                <div className="w-16 h-16 rounded-full bg-[#16a34a]/20 flex items-center justify-center flex-shrink-0">
+                  <span className="text-2xl">🌿</span>
+                </div>
+                <div>
+                  <h3 className="font-bold text-[#21140d]">Marula – Resilience Oil</h3>
+                  <p className="text-[#21140d]/80">Cold-pressed from wild-harvested kernels in Limpopo, marula oil delivers deep hydration and protects against harsh UV.</p>
+                </div>
+              </div>
+              <div className="flex gap-4">
+                <div className="w-16 h-16 rounded-full bg-[#ea580c]/20 flex items-center justify-center flex-shrink-0">
+                  <span className="text-2xl">🍵</span>
+                </div>
+                <div>
+                  <h3 className="font-bold text-[#21140d]">Rooibos – Antioxidant Shield</h3>
+                  <p className="text-[#21140d]/80">Fermented in the Cederberg mountains, rooibos soothes inflammation and brightens skin tone naturally.</p>
+                </div>
+              </div>
+              <div className="flex gap-4">
+                <div className="w-16 h-16 rounded-full bg-[#8b5a3c]/20 flex items-center justify-center flex-shrink-0">
+                  <span className="text-2xl">🌸</span>
+                </div>
+                <div>
+                  <h3 className="font-bold text-[#21140d]">Buchu – Purifying Essence</h3>
+                  <p className="text-[#21140d]/80">Grown in the fynbos of the Western Cape, buchu leaf oil unclogs pores and restores balance to combination skin.</p>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+  )
+}
\ No newline at end of file