Deploy

src/components/sections/MzansiStorySection.tsx

@@ -0,0 +1,22 @@
+import Image from 'next/image'
+
+export default function MzansiStorySection() {
+  return (
+    <section data-vula-section="mzansistory" id="our-story" className="py-20 bg-[#101418] border-y-2 border-[#ea580c]">
+      <div className="container mx-auto px-4 grid grid-cols-1 lg:grid-cols-2 gap-0">
+        <div className="relative h-[400px] lg:h-auto">
+          <Image src="https://images.pexels.com/photos/2464687/pexels-photo-2464687.jpeg?auto=compress&cs=tinysrgb&h=350" alt="Mzansi street culture" fill className="object-cover grayscale contrast-150 border-2 border-[#d4af37] shadow-[8px_8px_0_0_#ea580c]" sizes="50vw" />
+        </div>
+        <div className="flex flex-col justify-center p-8 bg-[#ea580c] text-white">
+          <h2 className="text-4xl font-['Archivo_Black'] uppercase leading-tight">Born on the streets of <mark className="bg-[#16a34a] text-white px-2">South Africa</mark></h2>
+          <p className="mt-6 text-lg leading-relaxed">Mzansi isn't just a label — it's a movement. From Soweto to Sandton, we fuse global streetwear with local pride. Every stitch carries the energy of the township, the swagger of the city, and the soul of ubuntu.</p>
+          <p className="mt-4 text-lg">Our drops drop hard because we know the streets that raised us. <strong className="text-[#d4af37]">Built for the bold, worn by the real.</strong></p>
+          <div className="mt-8 flex items-center gap-4">
+            <div className="w-12 h-1 bg-[#d4af37]" />
+            <span className="uppercase text-sm tracking-widest">#MzansiFit</span>
+          </div>
+        </div>
+      </div>
+    </section>
+  )
+}