Deploy

2026-08-01 16:26:33 +00:00
parent cec6784eb6
commit 16d90fa3f4
1 changed files with 50 additions and 0 deletions
@@ -0,0 +1,50 @@
+'use client'
+
+import Image from 'next/image'
+
+export default function IndabaYethuSection() {
+  return (
+    <section data-vula-section="indabayethu" id="indaba-yethu" className="relative min-h-[90vh] bg-[#18181b] overflow-hidden">
+      {/* Background image with parallax effect via bg-fixed */}
+      <div className="absolute inset-0 bg-fixed bg-center bg-cover"
+        style={{
+          backgroundImage: `url('https://images.pexels.com/photos/35633192/pexels-photo-35633192.jpeg?auto=compress&cs=tinysrgb&h=800&w=1200')`
+        }}
+      />
+      <div className="absolute inset-0 bg-gradient-to-r from-black/80 via-black/60 to-transparent" />
+
+      <div className="relative z-10 flex items-center min-h-[90vh] px-6 lg:px-16">
+        <div className="max-w-2xl">
+          <span className="inline-block uppercase tracking-[0.3em] text-[#d4af37] text-sm font-bold mb-4 border-b-2 border-[#d4af37] pb-1">
+            Our Roots
+          </span>
+          <h2 className="text-4xl md:text-6xl font-black uppercase text-white leading-tight">
+            From Soweto Garage
+            <br />
+            <span className="text-[#dc2626]">to Your Wardrobe</span>
+          </h2>
+          <p className="mt-6 text-lg md:text-xl text-gray-200 leading-relaxed">
+            Kasi Wear started not just to sell, but to weave the spirit of e kasi into every stitch.
+            What began as a dream in a Soweto garage has grown into a movement that celebrates
+            African-print streetwear — hoodies, caps, and tees that carry our stories.
+            Each piece iyi-story, every drop a celebration of township pride.
+          </p>
+          <div className="mt-10 flex flex-wrap gap-8 text-white">
+            <div>
+              <p className="text-5xl font-black text-[#d4af37]">2018</p>
+              <p className="text-sm uppercase tracking-widest mt-1">Founded</p>
+            </div>
+            <div>
+              <p className="text-5xl font-black text-[#d4af37]">50+</p>
+              <p className="text-sm uppercase tracking-widest mt-1">Drops</p>
+            </div>
+            <div>
+              <p className="text-5xl font-black text-[#d4af37]">12K</p>
+              <p className="text-sm uppercase tracking-widest mt-1">Customers</p>
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+  )
+}