---
import AnimatedText from "@/components/ui/AnimatedText.astro";
const { title, description } = Astro.props;
---

<div class="relative z-20 w-full mx-auto mt-12 mb-16 text-center">
  <h2
    class="text-4xl font-brand text-center tracking-normal  sm:text-5xl"
  >
    <AnimatedText delay={0.2} stagger={0.08} content={title} />
  </h2>
  {description && (
    <div
      class="mt-3 text-sm leading-6  sm:mt-4 lg:mt-6 sm:leading-7 lg:leading-8 sm:text-base lg:text-lg text-neutral-700 dark:text-neutral-300 max-w-full lg:max-w-3xl m-auto"
    >
      <AnimatedText delay={0.6} stagger={0.03} content={description} />
    </div>
  )}
</div>