pivoine.art/layouts/404.html

{{ define "main" }}
<section class="min-h-screen flex flex-col items-center justify-center px-4">
  <div class="text-center">
    <h1 class="text-[clamp(8rem,20vw,16rem)] font-bold leading-none tracking-tight">404</h1>

    <p class="mt-8 text-xl md:text-2xl text-text-secondary font-mono tracking-widest uppercase">
      Signal Lost
    </p>

    <div class="mt-12">
      <a
        href="/"
        class="group inline-flex items-center gap-2 px-6 py-3 border border-border hover:border-accent hover:bg-accent hover:text-surface-0 transition-all duration-300"
      >
        Return home
        <svg
          class="w-4 h-4 group-hover:translate-x-1 transition-transform duration-300"
          fill="none"
          stroke="currentColor"
          viewBox="0 0 24 24"
        >
          <path
            stroke-linecap="round"
            stroke-linejoin="round"
            stroke-width="2"
            d="M17 8l4 4m0 0l-4 4m4-4H3"
          />
        </svg>
      </a>
    </div>
  </div>
</section>
{{ end }}