Deploy

src/components/sections/ShopCTASection.tsx

@@ -0,0 +1,80 @@
+'use client'
+
+import { useState } from 'react';
+import { useVulaContent } from '@/hooks/useVulaContent'
+import Button from '@/components/ui/Button'
+import Image from 'next/image'
+import Link from 'next/link'
+
+export default function ShopCTASection() {
+  const { items, loading } = useVulaContent('advert_banners')
+  const [formData, setFormData] = useState({}) // dummy to satisfy hook rule
+
+  if (loading) {
+    return (
+      <div className="flex justify-center py-16">
+        <div className="w-8 h-8 rounded-full border-2 border-current border-t-transparent animate-spin" />
+      </div>
+    )
+  }
+  if (items.length === 0) return null
+
+  const d = items[0].data as {
+    title?: string
+    headline?: string
+    body?: string
+    cta_text?: string
+    image?: string
+  }
+
+  const bgImage = d.image || '/placeholder-cover.svg'
+  const headline = d.headline || 'Rep Your Hood'
+  const subtitle = d.body || 'Shop the Collection'
+  const cta = d.cta_text || 'Shop Now'
+
+  return (
+    <section
+      id="shop-cta"
+      data-vula-section="shopcta"
+      data-vula-cms="advert_banners"
+      className="relative h-[80vh] min-h-[500px] overflow-hidden bg-[#18181b]"
+    >
+      {/* Background image */}
+      <div className="absolute inset-0">
+        <Image
+          src={bgImage}
+          alt="Crowd of township youth"
+          fill
+          sizes="100vw"
+          className="object-cover opacity-50"
+        />
+      </div>
+      {/* Overlay gradient */}
+      <div className="absolute inset-0 bg-gradient-to-r from-[#18181b]/90 via-[#18181b]/50 to-transparent" />
+      {/* Content */}
+      <div className="relative z-10 flex items-center h-full max-w-7xl mx-auto px-6">
+        <div className="max-w-lg">
+          <h2 className="text-5xl md:text-7xl font-extrabold uppercase leading-tight text-[#d4af37] drop-shadow-md">
+            {headline}
+            <br />
+            <span className="text-white">{subtitle}</span>
+          </h2>
+          <div className="mt-8 flex gap-4">
+            <Link href="/products">
+              <Button
+                variant="default"
+                size="lg"
+                className="bg-[#d4af37] text-[#18181b] font-bold border-2 border-[#d4af37] shadow-[6px_6px_0_0_#18181b] hover:shadow-[4px_4px_0_0_#18181b] transition-all duration-200"
+              >
+                {cta}
+              </Button>
+            </Link>
+          </div>
+          <p className="text-white/70 mt-4 text-sm uppercase tracking-widest">
+            Limited drops — get yours before they vanish
+          </p>
+        </div>
+      </div>
+    </section>
+  )
+}