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

<template>
  <section class="px-10 py-16 text-center">
    <div class="text-6xl font-bold text-donut-muted">404</div>
    <h1 class="text-2xl font-semibold mt-2 text-donut-text">Page introuvable</h1>
    <p class="text-donut-muted mt-2">L'URL demandée n'existe pas (ou plus).</p>
    <RouterLink
      to="/"
      class="inline-block mt-6 bg-donut-text text-white rounded-lg px-4 py-2 text-sm font-medium hover:bg-black transition-colors"
    >
      Retour à l'accueil
    </RouterLink>
  </section>
</template>
