59 lines
2.1 KiB
TypeScript
59 lines
2.1 KiB
TypeScript
'use client';
|
|
|
|
import React, {useContext} from "react";
|
|
import {ThemeContext} from "@/components/provider/ThemeProvider";
|
|
import {themeColors} from "@/components/Helper/ThemeColors";
|
|
import {motion} from "framer-motion";
|
|
|
|
type SmallHeroProps = {
|
|
title: string;
|
|
subtitle?: string;
|
|
backgroundImage?: string;
|
|
blurBackground?: boolean;
|
|
};
|
|
|
|
const SmallHero = ({title, subtitle, backgroundImage, blurBackground}: SmallHeroProps) => {
|
|
const {theme} = useContext(ThemeContext);
|
|
const colors = themeColors[theme];
|
|
|
|
const primaryTextColor = backgroundImage ? "#ffffff" : colors.primaryText;
|
|
const secondaryTextColor = backgroundImage ? "rgba(255, 255, 255, 0.8)" : "#6B7280"; // Tailwind gray-500
|
|
|
|
return (
|
|
<div className="relative w-full py-36 overflow-hidden">
|
|
{backgroundImage && blurBackground && (
|
|
<div
|
|
className="absolute inset-0 bg-cover bg-center blur-sm scale-[1.05] z-0 will-change-transform"
|
|
style={{backgroundImage: `url(${backgroundImage})`}}
|
|
/>
|
|
)}
|
|
|
|
{/* Text content */}
|
|
<div className="relative z-10 px-6 sm:px-12 max-w-5xl mx-auto">
|
|
<motion.h1
|
|
className="text-3xl sm:text-4xl font-bold text-left"
|
|
initial={{opacity: 0, y: 20}}
|
|
animate={{opacity: 1, y: 0}}
|
|
transition={{duration: 0.6}}
|
|
style={{color: primaryTextColor}}
|
|
>
|
|
{title}
|
|
</motion.h1>
|
|
{subtitle && (
|
|
<motion.p
|
|
className="mt-3 text-lg text-left"
|
|
initial={{opacity: 0, y: 10}}
|
|
animate={{opacity: 1, y: 0}}
|
|
transition={{duration: 0.6, delay: 0.2}}
|
|
style={{color: secondaryTextColor}}
|
|
>
|
|
{subtitle}
|
|
</motion.p>
|
|
)}
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default SmallHero;
|