mirror of
https://github.com/BeamMP/BeamMP-Website.git
synced 2026-05-19 08:00:30 +00:00
Starystars67
31 lines
1.4 KiB
Vue
31 lines
1.4 KiB
Vue
<script setup>
|
|
import { RouterLink } from 'vue-router'
|
|
</script>
|
|
|
|
<template>
|
|
<section class="min-h-[60vh] flex items-center justify-center">
|
|
<div class="text-center px-6 py-10 sm:px-8 sm:py-12 rounded-xl border border-neutral-200/30 bg-white/60 dark:bg-neutral-900/60 backdrop-blur-md shadow-sm space-y-4">
|
|
<div class="flex items-center justify-center gap-3">
|
|
<span class="inline-flex items-center justify-center rounded-full bg-orange-600/10 text-orange-600 dark:text-orange-400 w-12 h-12 text-xl font-bold">404</span>
|
|
<h1 class="text-2xl sm:text-3xl font-bold tracking-tight">{{ $t("message.404.title") }}</h1>
|
|
</div>
|
|
|
|
<p class="text-neutral-600 dark:text-neutral-300 max-w-prose mx-auto">
|
|
{{ $t("message.404.description") }}
|
|
</p>
|
|
<div class="flex flex-wrap items-center justify-center gap-3 pt-2">
|
|
<RouterLink
|
|
to="/"
|
|
class="inline-flex px-4 py-2 rounded-md bg-orange-600 hover:bg-orange-500 text-white text-sm font-medium">
|
|
{{ $t("message.404.return_home") }}
|
|
</RouterLink>
|
|
<RouterLink
|
|
to="/servers"
|
|
class="inline-flex px-4 py-2 rounded-md border border-neutral-300/60 dark:border-neutral-700/60 text-sm font-medium text-neutral-800 dark:text-neutral-200 hover:bg-neutral-100 dark:hover:bg-neutral-800">
|
|
{{ $t("message.home.hero.browse_servers") }}
|
|
</RouterLink>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</template>
|