Deploy

src/components/sections/IngredientStorySection.tsx

@@ -0,0 +1,56 @@
+'use client';
+import Image from 'next/image';
+
+export default function IngredientStorySection() {
+  const ingredients = [
+    {
+      name: 'Marula',
+      benefit: 'Deep hydration & antioxidant protection',
+      origin: 'Wild-harvested from baobab trees in Limpopo',
+      image: 'https://images.pexels.com/photos/36813177/pexels-photo-36813177.jpeg?auto=compress&cs=tinysrgb&h=350'
+    },
+    {
+      name: 'Rooibos',
+      benefit: 'Calms redness & fights inflammation',
+      origin: 'Cederberg region, hand-picked and fermented',
+      image: 'https://images.pexels.com/photos/28371334/pexels-photo-28371334.jpeg?auto=compress&cs=tinysrgb&h=350'
+    },
+    {
+      name: 'Buchu',
+      benefit: 'Antimicrobial & purifying for problem skin',
+      origin: 'Clanwilliam fynbos, carefully distilled',
+      image: 'https://images.pexels.com/photos/36813177/pexels-photo-36813177.jpeg?auto=compress&cs=tinysrgb&h=350'
+    }
+  ];
+
+  return (
+    <section data-vula-section="ingredientstory" id="ingredient-story" className="py-20 bg-[#f4f5f2]">
+      <div className="max-w-7xl mx-auto px-4">
+        <h2 className="text-3xl md:text-4xl font-bold text-[#2c331f] text-center mb-4">Three Botanicals, One Purpose</h2>
+        <p className="text-center text-[#8b5a3c] mb-12 max-w-2xl mx-auto">
+          Every jar tells a story of heritage — cold-pressed from nature&apos;s finest ingredients, grown by communities who have used them for generations.
+        </p>
+        <div className="grid md:grid-cols-3 gap-8">
+          {ingredients.map((item) => (
+            <div key={item.name} className="group bg-white rounded-[28px] shadow-lg overflow-hidden hover:shadow-xl transition-shadow duration-300">
+              <div className="relative h-48 overflow-hidden">
+                <Image
+                  src={item.image}
+                  alt={item.name}
+                  fill
+                  className="object-cover group-hover:scale-105 transition-transform duration-500"
+                  sizes="(max-width: 768px) 100vw, 33vw"
+                />
+              </div>
+              <div className="p-6">
+                <h3 className="text-2xl font-bold text-[#2c331f] mb-2">{item.name}</h3>
+                <p className="text-sm text-[#6b8e23] font-semibold mb-2">{item.benefit}</p>
+                <p className="text-[#2c331f] text-sm">{item.origin}</p>
+              </div>
+            </div>
+          ))}
+        </div>
+      </div>
+    </section>
+  );
+}