52 lines
2.3 KiB
Vue
52 lines
2.3 KiB
Vue
<script setup lang="ts">
|
|
import type { NuxtError } from '#app'
|
|
|
|
defineProps<{ error: NuxtError }>()
|
|
const { t } = useI18n()
|
|
|
|
function handleError() {
|
|
clearError({ redirect: '/' })
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<div class="min-h-screen flex flex-col items-center justify-center gap-8 px-4 bg-white dark:bg-gray-950 relative overflow-hidden">
|
|
<!-- Decorative background -->
|
|
<div class="absolute inset-0 pointer-events-none" aria-hidden="true">
|
|
<div class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[600px] h-[400px] bg-brand-500/5 dark:bg-brand-500/10 rounded-full blur-3xl" />
|
|
<!-- Dot grid -->
|
|
<div class="absolute inset-0 opacity-[0.03] dark:opacity-[0.05]" style="background-image: radial-gradient(circle, currentColor 1px, transparent 1px); background-size: 32px 32px;" />
|
|
</div>
|
|
|
|
<div class="relative z-10 text-center space-y-8 max-w-lg">
|
|
<!-- Error code -->
|
|
<div class="relative">
|
|
<span class="font-mono text-sm text-brand-500 dark:text-brand-400 tracking-wider">// error</span>
|
|
<h1 class="text-[10rem] sm:text-[12rem] font-black leading-none tracking-tighter bg-gradient-to-b from-brand-400 via-brand-500 to-brand-700 bg-clip-text text-transparent select-none mt-2">
|
|
{{ error.statusCode }}
|
|
</h1>
|
|
<!-- Shadow glow behind -->
|
|
<span class="absolute inset-0 top-8 text-[10rem] sm:text-[12rem] font-black leading-none tracking-tighter text-brand-500/8 blur-md select-none" aria-hidden="true">
|
|
{{ error.statusCode }}
|
|
</span>
|
|
</div>
|
|
|
|
<div class="space-y-3">
|
|
<p class="text-xl sm:text-2xl font-bold bg-gradient-to-r from-gray-900 to-gray-600 dark:from-white dark:to-gray-400 bg-clip-text text-transparent">
|
|
{{ error.statusCode === 404 ? t('error.notFound') : t('error.generic') }}
|
|
</p>
|
|
<p class="text-gray-500 dark:text-gray-400 leading-relaxed">
|
|
{{ error.statusCode === 404
|
|
? 'The page you are looking for does not exist or has been moved.'
|
|
: 'Something unexpected happened. Please try again.'
|
|
}}
|
|
</p>
|
|
</div>
|
|
|
|
<UButton size="xl" icon="i-lucide-home" class="font-semibold" trailing-icon="i-lucide-arrow-right" @click="handleError">
|
|
{{ t('error.backHome') }}
|
|
</UButton>
|
|
</div>
|
|
</div>
|
|
</template>
|