Vula Builder
50 lines
2.3 KiB
TypeScript
50 lines
2.3 KiB
TypeScript
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>
|
||
)
|
||
}
|