<script setup lang="ts">
import { RouterLink } from "vue-router"
</script>

<template>
  <div
    class="flex min-h-screen flex-col items-center justify-center gap-4 bg-surface text-foreground p-4">
    <h1 class="text-6xl font-bold text-muted">404</h1>
    <p class="text-lg">Page not found</p>
    <p class="text-sm text-muted">The page you are looking for does not exist or has been moved.</p>
    <RouterLink
      to="/"
      class="mt-4 rounded-md bg-primary px-4 py-2 text-sm text-white hover:bg-primary-hover transition-colours">
      Back to home
    </RouterLink>
  </div>
</template>
