37 lines
1.3 KiB
TypeScript
37 lines
1.3 KiB
TypeScript
'use client';
|
|
|
|
import {motion} from 'framer-motion';
|
|
|
|
export default function SubpageHero({
|
|
title,
|
|
subtitle,
|
|
}: Readonly<{
|
|
title: string;
|
|
subtitle?: string;
|
|
}>) {
|
|
return (
|
|
<section className="relative min-h-[35vh] flex items-center bg-white px-6 md:px-16 lg:px-36 pt-24">
|
|
<div className="z-10 flex flex-col gap-y-2 max-w-6xl mx-auto w-full">
|
|
<motion.h1
|
|
initial={{opacity: 0, y: 20}}
|
|
animate={{opacity: 1, y: 0}}
|
|
transition={{duration: 0.6}}
|
|
className="text-4xl font-extrabold text-gray-900 leading-snug text-balance"
|
|
>
|
|
{title}
|
|
</motion.h1>
|
|
{subtitle && (
|
|
<motion.p
|
|
initial={{opacity: 0, y: 20}}
|
|
animate={{opacity: 1, y: 0}}
|
|
transition={{duration: 0.6, delay: 0.1}}
|
|
className="text-lg text-gray-600"
|
|
>
|
|
{subtitle}
|
|
</motion.p>
|
|
)}
|
|
</div>
|
|
</section>
|
|
);
|
|
}
|