hms-licht-ton/frontend/error.vue

<template>
  <div class="min-h-screen flex flex-col">
    <AppHeader />
    <main id="main-content" class="flex-1" role="main">
      <div class="max-w-md mx-auto px-4 py-24 text-center">
        <div class="text-8xl font-bold mb-4" style="color: var(--secondary)">404</div>
        <h1 class="text-2xl font-semibold mb-2" style="color: var(--text)">Seite nicht gefunden</h1>
        <p class="mb-8" style="color: var(--secondary)">Die angeforderte Seite existiert nicht.</p>
        <NuxtLink to="/" class="hms-btn hms-btn-primary">Zur Startseite</NuxtLink>
      </div>
    </main>
    <AppFooter />
  </div>
</template>

<script setup lang="ts">
import type { NuxtError } from "#app";

const props = defineProps<{ error: NuxtError }>();

useHead({
  title: `${props.error.statusCode} – HMS Licht & Ton`,
  meta: [
    { name: "robots", content: "noindex, nofollow, noarchive, nosnippet" },
  ],
});
</script>