41 lines
1.3 KiB
TypeScript
41 lines
1.3 KiB
TypeScript
import React from "react";
|
|
|
|
type SmallHeroProps = {
|
|
title: string;
|
|
subtitle?: string;
|
|
backgroundImage?: string; // Optional background image
|
|
};
|
|
|
|
const SmallHero = ({title, subtitle, backgroundImage}: SmallHeroProps) => {
|
|
return (
|
|
<div
|
|
className="w-full py-20 text-center flex flex-col items-center justify-center bg-cover bg-center"
|
|
style={{
|
|
backgroundColor: backgroundImage ? "transparent" : "var(--primary-bg)", // Fallback if no image
|
|
color: "var(--primary-text)",
|
|
backgroundImage: backgroundImage ? `url(${backgroundImage})` : "none",
|
|
backgroundSize: "cover",
|
|
backgroundPosition: "center",
|
|
backgroundBlendMode: "overlay",
|
|
transition: "background-color 0.4s ease-in-out, color 0.4s ease-in-out",
|
|
}}
|
|
>
|
|
<h1 className="text-3xl sm:text-4xl font-bold"
|
|
data-aos="fade-up"
|
|
>
|
|
{title}
|
|
</h1>
|
|
{subtitle &&
|
|
<p className="mt-2 text-lg text-[var(--secondary-text)]"
|
|
data-aos="fade-up"
|
|
data-aos-delay="200"
|
|
>
|
|
{subtitle}
|
|
</p>
|
|
}
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default SmallHero;
|