Vula Builder
31 lines
2.1 KiB
TypeScript
31 lines
2.1 KiB
TypeScript
import Image from 'next/image'
|
|
import Link from 'next/link'
|
|
|
|
export default function AboutKasiDripSection() {
|
|
return (
|
|
<section data-vula-section="aboutkasidrip" id="about-kasi-drip" className="bg-white text-[#18181b]">
|
|
<div className="grid lg:grid-cols-2">
|
|
<div className="relative min-h-[50vh] border-b-4 border-[#18181b] lg:min-h-[70vh] lg:border-b-0 lg:border-r-4">
|
|
<Image src="https://images.pexels.com/photos/19218014/pexels-photo-19218014.jpeg?auto=compress&cs=tinysrgb&h=350" alt="Kasi Drip crew in Durban" fill sizes="(max-width: 1024px) 100vw, 50vw" className="object-cover" unoptimized />
|
|
</div>
|
|
<div className="flex flex-col justify-center bg-[#18181b] px-6 py-14 text-white lg:px-14">
|
|
<p className="mb-4 text-sm font-black uppercase tracking-[0.3em] text-[#fbbf24]">Born in Durban</p>
|
|
<h2 className="text-4xl font-black uppercase leading-none sm:text-5xl">From kasi streets to streetwear statement.</h2>
|
|
<p className="mt-5 max-w-xl text-lg text-white/80">
|
|
Kasi Drip started in Durban's townships, where style is survival and every corner has a story. We print those stories on heavyweight tees, oversized hoodies and caps that move from the block to the global front row.
|
|
</p>
|
|
<p className="mt-4 max-w-xl text-white/70">
|
|
Limited numbered drops. No restocks. When it's gone, it's gone — same as the moment.
|
|
</p>
|
|
<div className="mt-8 flex flex-wrap gap-3">
|
|
<div className="border-2 border-[#fbbf24] bg-[#fbbf24] px-4 py-3 font-black uppercase text-[#18181b]">Durban, KZN</div>
|
|
<div className="border-2 border-white px-4 py-3 font-black uppercase">Est. 2019</div>
|
|
</div>
|
|
<Link href="/products" className="mt-8 inline-flex w-fit items-center justify-center border-2 border-[#fbbf24] bg-[#fbbf24] px-8 py-4 text-sm font-black uppercase tracking-wider text-[#18181b] shadow-[6px_6px_0_0_#ea580c] transition-all duration-200 ease-out hover:-translate-y-0.5 hover:shadow-[8px_8px_0_0_#ea580c]">
|
|
Shop the story
|
|
</Link>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
)
|
|
} |