---
interface Props {
    title: string;
    subtitle?: string | null;
}

const { title, subtitle } = Astro.props;
---

<div class="my-12 text-center opacity-0 animate-fadeInUp">
    <h1 class="text-4xl md:text-5xl font-bold text-gray-800 mb-4 leading-tight opacity-0 animate-fadeInUp">
        {title}
    </h1>
    {subtitle && (
            <p class="text-lg text-gray-600 max-w-3xl mx-auto leading-relaxed opacity-0 animate-fadeInUp delay-200">
                {subtitle}
            </p>
    )}
</div>
