103 lines
3.9 KiB
TypeScript
103 lines
3.9 KiB
TypeScript
interface HeroSectionProps {
|
|
headline: string
|
|
subheadline: string | null
|
|
ctaLabel: string
|
|
ctaUrl: string
|
|
isLoading?: boolean
|
|
backgroundImage?: string | null
|
|
}
|
|
|
|
export default function HeroSection({
|
|
headline,
|
|
subheadline,
|
|
ctaLabel,
|
|
ctaUrl,
|
|
isLoading = false,
|
|
backgroundImage,
|
|
}: HeroSectionProps) {
|
|
if (isLoading) {
|
|
return (
|
|
<section
|
|
aria-label="Carregando hero"
|
|
className="relative min-h-[600px] flex items-center justify-center pt-14"
|
|
style={{
|
|
background:
|
|
'radial-gradient(ellipse 80% 50% at 50% -20%, rgba(94,106,210,0.08) 0%, transparent 60%), #08090a',
|
|
}}
|
|
>
|
|
<div className="w-full max-w-[800px] mx-auto px-6 text-center animate-pulse">
|
|
{/* Headline skeleton */}
|
|
<div className="h-16 md:h-20 lg:h-24 bg-surface-secondary rounded-lg w-3/4 mx-auto mb-6" />
|
|
{/* Subheadline skeleton */}
|
|
<div className="h-6 bg-surface-secondary rounded w-1/2 mx-auto mb-3" />
|
|
<div className="h-6 bg-surface-secondary rounded w-2/5 mx-auto mb-10" />
|
|
{/* CTA skeleton */}
|
|
<div className="h-11 bg-surface-secondary rounded w-36 mx-auto" />
|
|
</div>
|
|
</section>
|
|
)
|
|
}
|
|
|
|
return (
|
|
<section
|
|
aria-label="Hero principal"
|
|
className="relative min-h-[600px] flex items-center justify-center pt-14 overflow-hidden"
|
|
style={!backgroundImage ? {
|
|
background:
|
|
'radial-gradient(ellipse 80% 50% at 50% -20%, rgba(94,106,210,0.08) 0%, transparent 60%), #08090a',
|
|
} : undefined}
|
|
>
|
|
{/* Imagem de fundo */}
|
|
{backgroundImage && (
|
|
<>
|
|
<img
|
|
src={backgroundImage}
|
|
alt=""
|
|
aria-hidden="true"
|
|
className="absolute inset-0 w-full h-full object-cover"
|
|
onError={(e) => { (e.currentTarget as HTMLImageElement).style.display = 'none' }}
|
|
/>
|
|
{/* Overlay escuro para legibilidade */}
|
|
<div
|
|
className="absolute inset-0"
|
|
style={{ background: 'linear-gradient(to bottom, rgba(0,0,0,0.55) 0%, rgba(0,0,0,0.35) 50%, rgba(0,0,0,0.65) 100%)' }}
|
|
/>
|
|
</>
|
|
)}
|
|
<div className="w-full max-w-[800px] mx-auto px-6 text-center py-20 md:py-28">
|
|
<h1
|
|
className="
|
|
text-[40px] md:text-[48px] lg:text-[72px]
|
|
font-medium text-textPrimary leading-tight
|
|
tracking-display-xl
|
|
mb-6
|
|
"
|
|
style={{ fontFeatureSettings: '"cv01", "ss03"' }}
|
|
>
|
|
{headline}
|
|
</h1>
|
|
|
|
{subheadline && (
|
|
<p className="text-lg md:text-xl text-textSecondary font-light leading-relaxed mb-10 max-w-[560px] mx-auto">
|
|
{subheadline}
|
|
</p>
|
|
)}
|
|
|
|
<a
|
|
href={ctaUrl}
|
|
className="
|
|
inline-flex items-center justify-center
|
|
px-6 py-3
|
|
bg-brand-indigo hover:bg-accent-hover
|
|
text-white font-semibold text-sm
|
|
rounded transition-colors duration-200
|
|
focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent-violet focus-visible:ring-offset-2 focus-visible:ring-offset-mkt-black
|
|
"
|
|
aria-label={ctaLabel}
|
|
>
|
|
{ctaLabel}
|
|
</a>
|
|
</div>
|
|
</section>
|
|
)
|
|
}
|