---
import Layout from "@layouts/Layout.astro";
import { SITE } from "@consts";
import { Icon } from "astro-icon/components";
---

<Layout title="404" description={SITE.DESCRIPTION}>
  <section class="mb-32" id="postHero" aria-labelledby="featured-projects">
    <div
      class="flex flex-col items-start justify-between gap-6 md:flex-row md:items-center"
    >
      <div>
        <h2
          class="animate-reveal break-words text-4xl font-medium opacity-0"
          id="featured-projects"
        >
          404
        </h2>
        <h3
          class="mt-2 animate-reveal text-xl font-bold opacity-0 [animation-delay:0.3s]"
        >
          Content not found
        </h3>
      </div>
      <div class="animate-reveal opacity-0 [animation-delay:0.6s]">
        <a
          href="/"
          class="flex items-center gap-1 rounded bg-secondary px-3.5 py-2.5 text-sm font-semibold text-primary"
        >
          <p>Go back home</p>
          <Icon
            name="mdi:arrow-u-left-top"
            title="Send me an email"
            class="h-4 w-auto"
          />
        </a>
      </div>
    </div>
  </section>
</Layout>