59 lines
1.9 KiB
TypeScript
59 lines
1.9 KiB
TypeScript
'use client'
|
|
|
|
import {motion} from 'framer-motion'
|
|
import clsx from 'clsx'
|
|
|
|
type SmallHeroProps = {
|
|
title: string
|
|
subtitle?: string
|
|
backgroundImage?: string
|
|
blurBackground?: boolean
|
|
className?: string
|
|
}
|
|
|
|
const SmallHero = ({
|
|
title,
|
|
subtitle,
|
|
backgroundImage,
|
|
blurBackground,
|
|
className = 'py-36'
|
|
}: SmallHeroProps) => {
|
|
const hasImage = !!backgroundImage
|
|
|
|
const baseTextColor = hasImage ? 'text-white' : 'text-foreground'
|
|
const subtitleTextColor = hasImage ? 'text-white/80' : 'text-muted-foreground'
|
|
|
|
return (
|
|
<div className={clsx('relative w-full overflow-hidden', className)}>
|
|
{hasImage && blurBackground && (
|
|
<div
|
|
className="absolute inset-0 bg-cover bg-center blur-sm scale-[1.05] z-0 will-change-transform"
|
|
style={{backgroundImage: `url(${backgroundImage})`}}
|
|
/>
|
|
)}
|
|
|
|
<div className="relative z-10 px-6 sm:px-12 max-w-6xl mx-auto">
|
|
<motion.h1
|
|
className={clsx('text-3xl sm:text-4xl font-bold text-left', baseTextColor)}
|
|
initial={{opacity: 0, y: 20}}
|
|
animate={{opacity: 1, y: 0}}
|
|
transition={{duration: 0.6}}
|
|
>
|
|
{title}
|
|
</motion.h1>
|
|
{subtitle && (
|
|
<motion.p
|
|
className={clsx('mt-3 text-lg text-left', subtitleTextColor)}
|
|
initial={{opacity: 0, y: 10}}
|
|
animate={{opacity: 1, y: 0}}
|
|
transition={{duration: 0.6, delay: 0.2}}
|
|
>
|
|
{subtitle}
|
|
</motion.p>
|
|
)}
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
export default SmallHero |