Deploy

2026-07-28 07:32:31 +00:00
parent 744f027ba5
commit 1bbd92f3f1
1 changed files with 63 additions and 0 deletions
@@ -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>
  )
 }