Deploy

src/components/sections/KasiHeroSection.tsx

@@ -0,0 +1,93 @@
+'use client'
+
+import { useState, useEffect } from 'react'
+import Image from 'next/image'
+import Link from 'next/link'
+import Button from '@/components/ui/Button'
+import { useVulaContent } from '@/hooks/useVulaContent'
+
+export default function KasiHeroSection() {
+  const { items, loading } = useVulaContent('hero_banners')
+  const [current, setCurrent] = useState(0)
+  const len = items.length
+
+  useEffect(() => {
+    if (len < 2) return
+    const t = setInterval(() => setCurrent((c) => (c + 1) % len), 6000)
+    return () => clearInterval(t)
+  }, [len])
+
+  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 (len === 0) return null
+
+  const d = items[current].data as {
+    title?: string
+    subtitle?: string
+    cta_text?: string
+    cta_url?: string
+    image?: string
+  }
+
+  return (
+    <section
+      id="kasi-hero"
+      data-vula-section="kasihero"
+      data-vula-cms="hero_banners"
+      className="relative h-[70vh] lg:h-[85vh] overflow-hidden bg-[#18181b]"
+    >
+      {/* Background image */}
+      <div className="absolute inset-0">
+        <Image
+          src={d.image || 'https://images.pexels.com/photos/4903412/pexels-photo-4903412.jpeg?auto=compress&cs=tinysrgb&h=650&w=940'}
+          alt={d.title || 'Kasi Wear banner'}
+          fill
+          sizes="100vw"
+          className="object-cover opacity-70"
+        />
+      </div>
+
+      {/* Overlay content */}
+      <div className="absolute inset-0 flex items-center justify-center bg-gradient-to-r from-black/60 to-transparent">
+        <div className="text-center px-6 max-w-3xl">
+          {d.title && (
+            <h1 className="text-4xl md:text-6xl lg:text-7xl font-black uppercase text-white leading-tight">
+              {d.title}
+            </h1>
+          )}
+          {d.subtitle && (
+            <p className="mt-4 text-lg md:text-xl text-gray-200 max-w-xl mx-auto">
+              {d.subtitle}
+            </p>
+          )}
+          <div className="mt-8">
+            <Link href={d.cta_url || '/products'}>
+              <Button variant="default" size="lg" className="bg-[#dc2626] hover:bg-red-700 text-white border-0">
+                {d.cta_text || 'Shop the look'}
+              </Button>
+            </Link>
+          </div>
+        </div>
+      </div>
+
+      {/* Dots */}
+      {len > 1 && (
+        <div className="absolute bottom-6 left-1/2 -translate-x-1/2 flex gap-3">
+          {items.map((_, i) => (
+            <button
+              key={i}
+              onClick={() => setCurrent(i)}
+              className={`w-3 h-3 rounded-full transition-all duration-300 ${
+                i === current ? 'bg-[#d4af37] scale-125' : 'bg-white/50'
+              }`}
+              aria-label={`Go to slide ${i + 1}`}
+            />
+          ))}
+        </div>
+      )}
+    </section>
+  )
+}