Deploy

src/components/sections/ShopTheVibeSection.tsx

@@ -0,0 +1,38 @@
+import Link from 'next/link'
+import Button from '@/components/ui/Button'
+import { ArrowRight } from 'lucide-react'
+
+export default function ShopTheVibeSection() {
+  return (
+    <section data-vula-section="shopthevibe" id="shop-vibe" className="relative overflow-hidden bg-[#18181b] text-white py-24 lg:py-32">
+      {/* Background image with overlay */}
+      <div className="absolute inset-0">
+        <img
+          src="https://images.pexels.com/photos/38487458/pexels-photo-38487458.jpeg?auto=compress&cs=tinysrgb&w=1200&h=600&fit=crop"
+          alt="African print fabric pattern"
+          className="w-full h-full object-cover opacity-30"
+        />
+        <div className="absolute inset-0 bg-gradient-to-r from-[#18181b]/80 to-[#18181b]/50" />
+      </div>
+
+      <div className="relative z-10 container mx-auto px-6 text-center">
+        <h2 className="text-4xl md:text-6xl lg:text-7xl font-black uppercase tracking-tight mb-4">
+          <span className="block">Your Style</span>
+          <span className="block text-[#d4af37] -webkit-text-stroke-1">Your Roots</span>
+        </h2>
+        <p className="text-lg md:text-xl text-white/80 max-w-2xl mx-auto mb-8 leading-relaxed">
+          Limited drops of authentic African-print streetwear — crafted in Soweto, worn worldwide.
+        </p>
+        <Link href="/products">
+          <Button
+            size="lg"
+            className="bg-[#d4af37] hover:bg-[#b8962e] text-[#18181b] font-bold text-lg px-10 py-4 rounded-none border-2 border-[#d4af37] hover:border-white transition-all duration-200"
+          >
+            Shop All Streetwear
+            <ArrowRight className="ml-2 w-5 h-5" />
+          </Button>
+        </Link>
+      </div>
+    </section>
+  )
+}