From 3f60a2765623933c98c41c1664c179cc113e6e01 Mon Sep 17 00:00:00 2001
From: Vula Builder <deploy@vula.app>
Date: Mon, 27 Jul 2026 17:52:37 +0000
Subject: [PATCH] Deploy

---
 .../sections/SowetoRootsSection.tsx           | 73 +++++++++++++++++++
 1 file changed, 73 insertions(+)
 create mode 100644 src/components/sections/SowetoRootsSection.tsx

diff --git a/src/components/sections/SowetoRootsSection.tsx b/src/components/sections/SowetoRootsSection.tsx
new file mode 100644
index 0000000..cc353b8
--- /dev/null
+++ b/src/components/sections/SowetoRootsSection.tsx
@@ -0,0 +1,73 @@
+import Image from 'next/image'
+
+export default function SowetoRootsSection() {
+  const storyImages = [
+    'https://images.pexels.com/photos/4956184/pexels-photo-4956184.jpeg?auto=compress&cs=tinysrgb&h=650&w=940',
+    'https://images.pexels.com/photos/38487458/pexels-photo-38487458.jpeg?auto=compress&cs=tinysrgb&h=350'
+  ]
+
+  return (
+    <section data-vula-section="sowetoroots" id="our-story" className="py-20 bg-[#18181b] text-white">
+      <div className="container mx-auto px-4">
+        <div className="grid grid-cols-1 lg:grid-cols-2 gap-10 items-center">
+          {/* Left — narrative text */}
+          <div className="space-y-6">
+            <h2 className="font-['Archivo_Black'] uppercase text-4xl lg:text-5xl leading-tight">
+              SOWETO ROOTS
+            </h2>
+            <p className="text-lg text-white/80 leading-relaxed">
+              Mzansi Wear was born in the heart of Soweto, where street corners pulse with creativity and the rhythm of the township shapes every stitch. Our founder, Thabo Mokoena, learned the craft of African-print tailoring from his grandmother in Orlando West. Each hoodie, cap, and tee carries the story of a community that refuses to be ignored.
+            </p>
+            <p className="text-white/70">
+              We blend traditional Shweshwe and Ankara fabrics with modern streetwear silhouettes — because heritage isn't old, it's now.
+            </p>
+            <div className="pt-4 border-t-2 border-[#d4af37]">
+              <p className="italic text-[#d4af37]">
+                "Our prints are a declaration. We wear our roots on our sleeves, literally."
+              </p>
+              <p className="text-sm text-white/60 mt-2">— Thabo Mokoena, Founder</p>
+            </div>
+          </div>
+
+          {/* Right — stacked images with offset shadow */}
+          <div className="relative h-[500px] lg:h-[600px]">
+            <div className="absolute top-0 left-0 w-3/4 h-3/4 z-10 border-2 border-white shadow-[8px_8px_0_0_#dc2626]">
+              <Image
+                src={storyImages[0]}
+                alt="Soweto streetscape"
+                fill
+                sizes="(max-width: 1024px) 75vw, 37.5vw"
+                className="object-cover"
+              />
+            </div>
+            <div className="absolute bottom-0 right-0 w-2/3 h-2/3 border-2 border-white shadow-[-6px_6px_0_0_#d4af37]">
+              <Image
+                src={storyImages[1]}
+                alt="African print fabric detail"
+                fill
+                sizes="(max-width: 1024px) 66vw, 33vw"
+                className="object-cover"
+              />
+            </div>
+          </div>
+        </div>
+      </div>
+
+      {/* Marquee-style stat strip */}
+      <div className="mt-20 border-y-2 border-white bg-[#dc2626] py-4 overflow-hidden">
+        <div className="flex gap-12 uppercase tracking-widest text-white text-xl font-bold whitespace-nowrap animate-marquee">
+          <span>Rooted in Soweto</span>
+          <span>African Prints</span>
+          <span>Limited drops</span>
+          <span>Street culture</span>
+          <span>Proudly Mzansi</span>
+          <span>Rooted in Soweto</span>
+          <span>African Prints</span>
+          <span>Limited drops</span>
+          <span>Street culture</span>
+          <span>Proudly Mzansi</span>
+        </div>
+      </div>
+    </section>
+  )
+}
\ No newline at end of file