Deploy

src/components/sections/ShopTheVibeSection.tsx

@@ -0,0 +1,44 @@
+'use client'
+
+import Image from "next/image"
+import Link from "next/link"
+import Button from "@/components/ui/Button"
+
+export default function ShopTheVibeSection() {
+  return (
+    <section data-vula-section="shopthevibe" id="shop-cta" className="relative h-[70vh] min-h-[500px] overflow-hidden">
+      {/* Background image */}
+      <Image
+        src="https://images.pexels.com/photos/2259131/pexels-photo-2259131.jpeg?auto=compress&cs=tinysrgb&h=650&w=940"
+        alt="Mzansi streetwear lifestyle — young crew owning the vibe"
+        fill
+        className="object-cover brightness-[0.65] grayscale contrast-125"
+        sizes="100vw"
+        priority
+      />
+
+      {/* Overlay content */}
+      <div className="absolute inset-0 flex items-center">
+        <div className="container mx-auto px-4 sm:px-6 lg:px-8">
+          <div className="max-w-2xl">
+            <h2 className="text-4xl md:text-5xl lg:text-6xl font-black uppercase tracking-tight text-white"
+                style={{ WebkitTextStroke: "1px #ea580c" }}>
+              Own your
+              <span className="bg-[#ea580c] text-white px-2 ml-2">vibe</span>
+            </h2>
+            <p className="mt-4 text-lg md:text-xl text-white/90 max-w-md font-medium">
+              Real street style from Joburg to Cape Town. Drop culture that speaks your language.
+            </p>
+            <div className="mt-8 flex flex-wrap gap-4">
+              <Link href="/products">
+                <Button variant="default" size="lg" className="bg-[#ea580c] hover:bg-[#d4500a] text-white font-bold uppercase tracking-wider shadow-[6px_6px_0_0_#101418]">
+                  Shop the drop
+                </Button>
+              </Link>
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+  )
+}