Deploy

src/components/sections/BrandStorySection.tsx

@@ -0,0 +1,45 @@
+import Button from '@/components/ui/Button'
+import Image from 'next/image'
+import Link from 'next/link'
+
+export default function BrandStorySection() {
+  return (
+    <section data-vula-section="brandstory" id="brand-story" className="bg-[#18181b] py-20 px-4">
+      <div className="container mx-auto max-w-7xl">
+        <div className="grid grid-cols-1 lg:grid-cols-2 gap-12 items-center">
+          {/* Left — striking image */}
+          <div className="relative aspect-[4/5] overflow-hidden border-2 border-[#d4af37] shadow-[8px_8px_0_0_#d4af37]">
+            <Image
+              src="https://images.pexels.com/photos/4956191/pexels-photo-4956191.jpeg?auto=compress&cs=tinysrgb&h=350"
+              alt="Soweto creative in Mzansi Style gear"
+              fill
+              sizes="(max-width: 1024px) 100vw, 50vw"
+              className="object-cover"
+            />
+          </div>
+          {/* Right — brand manifesto */}
+          <div className="space-y-6">
+            <h2 className="font-['Archivo_Black'] uppercase text-5xl sm:text-6xl text-white leading-tight">
+              Born in<br />
+              <span className="text-[#d4af37]">Soweto</span>,
+              <br />
+              Worn by the <span className="text-[#dc2626]">World</span>
+            </h2>
+            <p className="text-gray-300 text-base sm:text-lg leading-relaxed max-w-xl">
+              Mzansi Style fuses traditional Shweshwe motifs with raw, modern streetwear. We celebrate the energy of urban youth culture — from Soweto to Sandton to Brooklyn. Every hoodie, cap, and tee is cut from limited runs, stitched with African pride, and built for those who move with confidence.
+            </p>
+            <Link href="#about">
+              <Button
+                variant="outline"
+                size="lg"
+                className="border-2 border-[#d4af37] text-[#d4af37] hover:bg-[#d4af37] hover:text-[#18181b] transition-all duration-200 ease-out uppercase tracking-widest"
+              >
+                Read Our Story
+              </Button>
+            </Link>
+          </div>
+        </div>
+      </div>
+    </section>
+  )
+}