Deploy

src/components/sections/SowetoHeroSection.tsx

@@ -0,0 +1,79 @@
+'use client'
+
+import { useVulaContent } from '@/hooks/useVulaContent'
+import Image from 'next/image'
+import Button from '@/components/ui/Button'
+
+export default function SowetoHeroSection() {
+  const { items, loading } = useVulaContent('hero_banners')
+
+  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
+    subtitle?: string
+    cta_text?: string
+    cta_url?: string
+    image?: string
+  }
+
+  return (
+    <section
+      id="hero"
+      data-vula-section="sowetohero"
+      data-vula-cms="hero_banners"
+      className="relative min-h-[90vh] flex overflow-hidden"
+    >
+      {/* Left solid block — ink black */}
+      <div className="w-1/2 bg-[#18181b] flex items-center justify-center p-12">
+        <div className="max-w-lg text-left">
+          <h1 className="font-['Archivo_Black'] uppercase text-6xl lg:text-7xl leading-tight text-white">
+            {d.title || 'FROM THE TOWNSHIP'}
+            <span className="text-[#dc2626] block">TO THE WORLD</span>
+          </h1>
+          {d.subtitle && (
+            <p className="mt-6 text-lg text-white/80 uppercase tracking-widest">{d.subtitle}</p>
+          )}
+          {d.cta_text && (
+            <Button
+              variant="default"
+              size="lg"
+              className="mt-8 bg-[#dc2626] hover:bg-[#b02020] text-white border-2 border-white shadow-[6px_6px_0_0_#d4af37] transition-all duration-200 ease-out"
+              onClick={() => {
+                if (d.cta_url) window.location.href = d.cta_url
+              }}
+            >
+              {d.cta_text}
+            </Button>
+          )}
+        </div>
+      </div>
+
+      {/* Right block — brand color (accent red) + image overlay */}
+      <div className="w-1/2 bg-[#dc2626] relative">
+        {d.image && (
+          <div className="absolute inset-0">
+            <Image
+              src={d.image}
+              alt={d.title || 'Hero banner'}
+              fill
+              sizes="50vw"
+              className="object-cover opacity-70"
+            />
+          </div>
+        )}
+      </div>
+
+      {/* Decorative offset shadow */}
+      <div className="absolute bottom-0 left-0 right-0 h-2 bg-[#d4af37]" />
+    </section>
+  )
+}