---
import { Image } from "astro:assets";
import icon from "public/assets/icon.png";
---

<section class="animate-reveal opacity-0">
  <div class="mx-auto flex h-full self-center px-8 py-32">
    <div
      class="mx-auto my-auto max-w-xl text-center text-4xl tracking-tight text-balance text-white md:text-6xl"
    >
      <div
        class="text-secondary flex items-center justify-center gap-3 font-semibold"
      >
        Hi, I'm Troy,
        <Image
          src={icon}
          class="size-12 rounded-xl md:size-16"
          alt="Troy Lusty"
          loading="eager"
        />
      </div>
      <div class="text-tertiary font-serif font-light tracking-wide italic">
        digital designer.
      </div>
    </div>
  </div>
</section>