Deploy

src/components/sections/ShopTheLookCTASection.tsx

@@ -0,0 +1,40 @@
+'use client'
+
+import Image from 'next/image'
+import Link from 'next/link'
+import Button from '@/components/ui/Button'
+
+export default function ShopTheLookCTASection() {
+  return (
+    <section data-vula-section="shopthelookcta" id="shop-cta" className="grid grid-cols-1 md:grid-cols-2 min-h-[70vh] border-b-[3px] border-black">
+      {/* Image side — bold product visual */}
+      <div className="relative h-[50vh] md:h-auto overflow-hidden border-r-0 md:border-r-[3px] border-black">
+        <Image
+          src="https://images.pexels.com/photos/4903412/pexels-photo-4903412.jpeg?auto=compress&cs=tinysrgb&h=650&w=940"
+          alt="Urban streetwear look — Mzansi Urban"
+          fill
+          sizes="(max-width:768px) 100vw, 50vw"
+          className="object-cover grayscale contrast-125"
+        />
+      </div>
+
+      {/* Text side — bold CTA */}
+      <div className="flex flex-col justify-center items-start p-8 md:p-16 bg-black text-white">
+        <h2 className="text-5xl md:text-7xl font-['Archivo_Black'] uppercase leading-[0.9] tracking-tight mb-6">
+          <span className="block">Own Your</span>
+          <span className="block text-[#16a34a]">City.</span>
+          <span className="block">Wear Your</span>
+          <span className="block" style={{ WebkitTextStroke: "2px #16a34a", color: "transparent" }}>Vibe.</span>
+        </h2>
+        <p className="text-lg md:text-xl font-mono uppercase mb-8 max-w-md text-[#e7eaef]">
+          Limited drops. Real fabric. Soweto soul.
+        </p>
+        <Link href="/products">
+          <Button variant="default" size="lg" className="bg-[#16a34a] text-black border-2 border-[#16a34a] shadow-[6px_6px_0_0_white] hover:shadow-[3px_3px_0_0_white] transition-all duration-200 ease-out uppercase tracking-widest text-sm">
+            Shop the Drop
+          </Button>
+        </Link>
+      </div>
+    </section>
+  )
+}