Deploy

2026-07-28 12:39:45 +00:00
parent 7a020c9a4f
commit 486e585874
1 changed files with 59 additions and 0 deletions
@@ -0,0 +1,59 @@
+import Image from 'next/image'
+import { Droplets, Leaf, Wind } from 'lucide-react'
+
+export default function RootedHeritageStorySection() {
+  return (
+    <section data-vula-section="rootedheritagestory" id="our-story" className="py-20 bg-[#f4f5f2]">
+      <div className="container mx-auto px-4">
+        <div className="grid grid-cols-1 lg:grid-cols-2 gap-12 items-center">
+          <div className="relative aspect-[4/3] rounded-3xl overflow-hidden shadow-xl">
+            <Image
+              src="https://images.pexels.com/photos/19902897/pexels-photo-19902897.jpeg?auto=compress&cs=tinysrgb&h=350"
+              alt="Rooibos fields in the Cederberg"
+              fill
+              className="object-cover"
+              sizes="(max-width: 768px) 100vw, 50vw"
+            />
+            <div className="absolute inset-0 bg-[#6b8e23]/20" />
+          </div>
+          <div>
+            <p className="text-sm uppercase tracking-widest text-[#8b5a3c] mb-2">Ubuhle Bendalo</p>
+            <h2 className="text-3xl md:text-4xl font-bold text-[#2c331f] mb-6">Rooted in Nature, Crafted by Hand</h2>
+            <div className="space-y-4 text-[#2c331f]/80 max-w-prose">
+              <p>Ngema Naturals was born in Pretoria, where we cold-press indigenous oils just as our grandmothers taught us – small batches, no shortcuts. Our marula is harvested from wild trees in KwaZulu-Natal; our rooibos comes from the Cederberg; our buchu is wildcrafted by the Cape.</p>
+              <p>Every bottle carries the wisdom of generations. We partner directly with women-led cooperatives to ensure fair wages and ethical sourcing.</p>
+              <div className="mt-8 grid grid-cols-3 gap-4">
+                <div className="bg-white rounded-xl p-4 shadow-sm text-center">
+                  <Leaf className="w-6 h-6 text-[#6b8e23] mx-auto mb-2" />
+                  <p className="text-sm font-semibold text-[#2c331f]">Wild Harvested</p>
+                </div>
+                <div className="bg-white rounded-xl p-4 shadow-sm text-center">
+                  <Droplets className="w-6 h-6 text-[#6b8e23] mx-auto mb-2" />
+                  <p className="text-sm font-semibold text-[#2c331f]">Cold-Pressed</p>
+                </div>
+                <div className="bg-white rounded-xl p-4 shadow-sm text-center">
+                  <Wind className="w-6 h-6 text-[#6b8e23] mx-auto mb-2" />
+                  <p className="text-sm font-semibold text-[#2c331f]">Small-Batch</p>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div className="mt-16 grid grid-cols-1 md:grid-cols-3 gap-6">
+          <div className="bg-white rounded-2xl p-6 shadow-sm">
+            <h3 className="font-bold text-[#2c331f] mb-2">Harvest</h3>
+            <p className="text-sm text-[#8b5a3c]">Sustainably picked at peak ripeness from wild trees and fynbos.</p>
+          </div>
+          <div className="bg-white rounded-2xl p-6 shadow-sm">
+            <h3 className="font-bold text-[#2c331f] mb-2">Cold-Press</h3>
+            <p className="text-sm text-[#8b5a3c]">Extracted within 48 hours to preserve antioxidants and aroma.</p>
+          </div>
+          <div className="bg-white rounded-2xl p-6 shadow-sm">
+            <h3 className="font-bold text-[#2c331f] mb-2">Bottle</h3>
+            <p className="text-sm text-[#8b5a3c]">Hand-poured into amber glass, sealed with a story.</p>
+          </div>
+        </div>
+      </div>
+    </section>
+  )
+}