init

src/components/elements/SectionHeader.astro

@@ -0,0 +1,19 @@
+---
+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-3xl font-brand text-center tracking-normal text-neutral-800 dark:text-neutral-100 sm:text-4xl lg: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>