---
import Layout from '~/layouts/Layout.astro';
import { getHomePermalink } from '~/utils/permalinks';

const title = `Error 404`;
---

<Layout metadata={{ title }}>
  <section class="flex items-center h-full p-16">
    <div class="container flex flex-col items-center justify-center px-5 mx-auto my-8">
      <div class="max-w-md text-center">
        <h2 class="mb-8 font-bold text-9xl">
          <span class="sr-only">Error</span>
          <span class="text-primary">404</span>
        </h2>
        <p class="text-3xl font-semibold md:text-3xl">Sorry, we couldn't find this page.</p>
        <p class="mt-4 mb-8 text-lg text-muted dark:text-slate-400">
          But dont worry, you can find plenty of other things on our homepage.
        </p>
        <a rel="noopener noreferrer" href={getHomePermalink()} class="btn ml-4">Back to homepage</a>
      </div>
    </div>
  </section>
</Layout>