From 010c5a18a034b35f825e7f233dd17d5f99d77475 Mon Sep 17 00:00:00 2001
From: Vula Builder <deploy@vula.app>
Date: Sat, 1 Aug 2026 17:20:25 +0000
Subject: [PATCH] Deploy

---
 .../sections/AboutKasiDripSection.tsx         | 31 +++++++++++++++++++
 1 file changed, 31 insertions(+)
 create mode 100644 src/components/sections/AboutKasiDripSection.tsx

diff --git a/src/components/sections/AboutKasiDripSection.tsx b/src/components/sections/AboutKasiDripSection.tsx
new file mode 100644
index 0000000..7172795
--- /dev/null
+++ b/src/components/sections/AboutKasiDripSection.tsx
@@ -0,0 +1,31 @@
+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>
+  )
+}
\ No newline at end of file