28 lines
1.2 KiB
TypeScript
28 lines
1.2 KiB
TypeScript
"use client";
|
|
import type { HeroBlock } from "@/types/page";
|
|
|
|
export default function HeroBlockView({ title, subtitle, backgroundImage, ctaText, ctaLink }: HeroBlock) {
|
|
return (
|
|
<section
|
|
className="relative h-[56vh] flex flex-col justify-center items-center text-white text-center rounded-2xl overflow-hidden"
|
|
style={{
|
|
backgroundImage: backgroundImage ? `url(${backgroundImage})` : undefined,
|
|
backgroundSize: "cover",
|
|
backgroundPosition: "center"
|
|
}}
|
|
>
|
|
<div className="backdrop-brightness-75 p-6 w-full h-full flex flex-col justify-center items-center">
|
|
<h1 className="text-4xl md:text-5xl font-semibold mb-4">{title}</h1>
|
|
{subtitle && <p className="mt-2 opacity-90 text-lg md:text-xl max-w-2xl">{subtitle}</p>}
|
|
{ctaText && (
|
|
<a
|
|
href={ctaLink ?? "#"}
|
|
className="mt-8 inline-block px-8 py-3 rounded-xl bg-white/90 text-black hover:bg-white transition-all duration-200 font-medium"
|
|
>
|
|
{ctaText}
|
|
</a>
|
|
)}
|
|
</div>
|
|
</section>
|
|
);
|
|
}
|