<template>
  <div>
    <div class="container">
      <div
        class="text-primary-500 flex flex-col items-center text-center px-4 py-24 md:flex-row md:justify-start md:items-start md:text-left md:px-0 md:py-[200px]"
      >
        <h1
          class="text-9xl font-bold md:text-[200px] lg:text-[240px] xl:text-[270px] md:leading-[300px]"
        >
          4O4
        </h1>
        <div class="mt-8 md:mt-0 md:ml-40 md:pt-10">
          <h2 class="text-3xl md:text-7xl">Hoppla!</h2>
          <p class="text-base mt-4 md:text-3xl md:mt-12 md:font-bold">
            Hier ist wohl eine Seite verloren gegangen. Zurück zur Startseite
            und nutzen Sie unsere Suchfunktion.
          </p>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
// Renders the error page.
// Do not use $texts or any other composables that require runtime data here.
// See ./layouts/minimal.vue for more information.
// This page only exists in one language, so all the texts in all languages
// are hardcoded.
definePageMeta({
  layout: 'minimal',
})

useHead({
  title: 'Error | Blokkli Starterkit',
  meta: [
    {
      name: 'robots',
      content: 'noindex',
    },
  ],
})

await renderPageDependencies()
</script>
