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

<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 text-2xl font-semibold break-words opacity-0"
          id="featured-projects"
        >
          404
        </h2>
        <h3
          class="animate-reveal mt-2 font-bold opacity-0 [animation-delay:0.1s]"
        >
          Content not found
        </h3>
      </div>
      <div class="animate-reveal opacity-0 [animation-delay:0.2s]">
        <Button href="/" link="Go home" />
      </div>
    </div>
  </section>
</Layout>