Vula Builder
32 lines
1.7 KiB
TypeScript
32 lines
1.7 KiB
TypeScript
'use client'
|
|
import Image from 'next/image'
|
|
import { useVulaContent } from '@/hooks/useVulaContent'
|
|
|
|
export default function HeroSection() {
|
|
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
|
|
|
|
return (
|
|
<section id="hero" data-vula-section="hero" data-vula-cms="hero_banners" className="relative overflow-hidden bg-gray-900 text-white">
|
|
{items.slice(0, 1).map((item) => {
|
|
const d = item.data as { title?: string; subtitle?: string; cta_text?: string; cta_url?: string; image?: string }
|
|
return (
|
|
<div key={item.id} className="relative min-h-[480px] flex items-center">
|
|
{d.image && <Image src={d.image} alt={d.title || ''} fill className="object-cover opacity-40" />}
|
|
<div className="relative z-10 max-w-6xl mx-auto px-4 sm:px-6 lg:px-8 py-24">
|
|
{d.title && <h2 className="text-4xl sm:text-5xl font-bold mb-4 max-w-2xl">{d.title}</h2>}
|
|
{d.subtitle && <p className="text-xl text-gray-200 mb-8 max-w-xl">{d.subtitle}</p>}
|
|
{d.cta_text && (
|
|
d.cta_url
|
|
? <a href={d.cta_url} className="inline-flex items-center px-8 py-3 bg-white text-gray-900 font-bold rounded-full hover:bg-gray-100 transition-colors">{d.cta_text}</a>
|
|
: <button className="inline-flex items-center px-8 py-3 bg-white text-gray-900 font-bold rounded-full hover:bg-gray-100 transition-colors">{d.cta_text}</button>
|
|
)}
|
|
</div>
|
|
</div>
|
|
)
|
|
})}
|
|
</section>
|
|
)
|
|
}
|