Deploy

2026-07-27 18:06:15 +00:00
parent b2e6913dab
commit 409b2aaf28
1 changed files with 49 additions and 0 deletions
@@ -0,0 +1,49 @@
+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-[#101418] py-16 lg:py-24">
+      <div className="max-w-7xl mx-auto px-4 lg:px-8 grid lg:grid-cols-2 gap-8 items-center">
+        <div className="relative h-[400px] lg:h-[500px] overflow-hidden border-2 border-white/20 shadow-[6px_6px_0_0_#16a34a]">
+          <Image
+            src="https://images.pexels.com/photos/35633192/pexels-photo-35633192.jpeg?auto=compress&cs=tinysrgb&h=350"
+            alt="Soweto streets - Mzansi Urban roots"
+            fill
+            sizes="(max-width: 1024px) 100vw, 50vw"
+            className="object-cover"
+          />
+          <div className="absolute inset-0 bg-gradient-to-t from-black/60 to-transparent" />
+        </div>
+        <div className="text-white space-y-6">
+          <h2 className="text-4xl md:text-5xl font-[900] uppercase tracking-tight leading-tight">
+            From Vilakazi Street
+            <span className="block text-[#16a34a]">to the World</span>
+          </h2>
+          <div className="w-16 h-1 bg-[#16a34a]" />
+          <p className="text-lg md:text-xl leading-relaxed text-white/80">
+            Mzansi Urban was born in Soweto — where shweshwe prints meet raw street energy.
+            We take the bold patterns our grandmothers wore and remix them into hoodies, caps,
+            and tees that speak township swagger. Every drop is limited — once it's gone, it's
+            gone. No restocks, just originals.
+          </p>
+          <p className="text-base md:text-lg text-white/60">
+            Our crew of designers and artisans work out of a small workshop on Vilakazi Street,
+            hand‑checking every stitch. When you wear Mzansi Urban, you're not just wearing a
+            print — you're wearing a piece of Soweto's story.
+          </p>
+          <Link href="/products">
+            <Button
+              variant="outline"
+              size="lg"
+              className="border-2 border-white text-white hover:bg-[#16a34a] hover:border-[#16a34a] uppercase tracking-wider shadow-[4px_4px_0_0_#16a34a]"
+            >
+              Explore the Collection
+            </Button>
+          </Link>
+        </div>
+      </div>
+    </section>
+  )
+}