Deploy

src/components/sections/HeroBannerSection.tsx

@@ -0,0 +1,78 @@
+'use client'
+import { useEmDashContent } from '@/hooks/useEmDashContent'
+import Image from 'next/image'
+import Button from '@/components/ui/Button'
+
+export default function HeroBannerSection() {
+  const { items, loading } = useEmDashContent('hero_banners')
+
+  if (loading) {
+    return (
+      <div className="flex justify-center py-16">
+        <div className="w-8 h-8 rounded-full border-2 border-[#18181b] border-t-transparent animate-spin" />
+      </div>
+    )
+  }
+
+  if (items.length === 0) return null
+
+  return (
+    <>
+      {items.map((item) => {
+        const d = item.data as {
+          title?: string
+          subtitle?: string
+          cta_text?: string
+          cta_url?: string
+          image?: string
+        }
+        return (
+          <section
+            key={item.id}
+            id="hero-banner"
+            data-vula-section="herobanner"
+            data-vula-cms="hero_banners"
+            className="relative h-[80vh] lg:h-[90vh] flex items-center justify-center bg-[#18181b] overflow-hidden"
+          >
+            {d.image && (
+              <div className="absolute inset-0">
+                <Image
+                  src={d.image}
+                  alt={d.title || 'Hero banner'}
+                  fill
+                  className="object-cover opacity-60"
+                  sizes="100vw"
+                  priority
+                />
+              </div>
+            )}
+            <div className="relative z-10 text-center px-4 max-w-3xl">
+              {d.title && (
+                <h1 className="text-5xl md:text-7xl font-bold text-white uppercase tracking-tight leading-tight">
+                  {d.title}
+                </h1>
+              )}
+              {d.subtitle && (
+                <p className="mt-4 text-lg md:text-xl text-gray-300 max-w-xl mx-auto">
+                  {d.subtitle}
+                </p>
+              )}
+              {d.cta_text && d.cta_url && (
+                <div className="mt-8">
+                  <Button
+                    variant="default"
+                    size="lg"
+                    className="bg-[#dc2626] hover:bg-[#b91c1c] text-white px-8 py-4 rounded-lg font-semibold shadow-[var(--shadow-lifted)] transition-all duration-200 ease-out"
+                    href={d.cta_url}
+                  >
+                    {d.cta_text}
+                  </Button>
+                </div>
+              )}
+            </div>
+          </section>
+        )
+      })}
+    </>
+  )
+}