vula-projects/vula-b60f0248
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Deploy

Browse Source
This commit is contained in:
Vula Builder
2026-07-28 12:39:45 +00:00
parent 7a020c9a4f
commit 486e585874
1 changed files with 59 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/sections/RootedHeritageStorySection.tsx
+59
View File
@@ -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>
)
}