Intro.astro

---
import BlurFade from "@ui/blur-fade";
import WordRotate from "@ui/word-rotate";
import Emoji from "astro-emoji";
interface Props {
  name: string;
  titles: string[];
  fade_delay: number;
}
const { name, titles, fade_delay } = Astro.props;
---

<section id="hero">
  <div class="mx-auto w-full max-w-2xl space-y-8">
    <div class="gap-2 flex justify-between">
      <div class="flex-col flex flex-1 space-y-1.5">
        <BlurFade client:load delay={fade_delay * 1} inView>
          <span
            class="text-3xl text-pretty font-bold tracking-tighter sm:text-5xl xl:text-6xl/none"
          >
            Hi, I&apos;m {name}
            <Emoji symbol="👋" label="wave" />
          </span>
        </BlurFade>
        <BlurFade client:load delay={fade_delay * 2} inView>
          <span
            class="text-xl text-pretty tracking-tighter sm:text-3xl xl:text-4xl/none"
          >
            <WordRotate client:visible words={titles} duration={2000} />
          </span>
        </BlurFade>
      </div>
    </div>
  </div>
</section>