File size: 3,043 Bytes
8059bf0 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 | <template>
<div
class="relative flex min-h-screen items-center justify-center overflow-hidden bg-gray-50 px-4 dark:bg-dark-950"
>
<!-- Background Decoration -->
<div class="pointer-events-none absolute inset-0 overflow-hidden">
<div
class="absolute -right-40 -top-40 h-80 w-80 rounded-full bg-primary-400/10 blur-3xl"
></div>
<div
class="absolute -bottom-40 -left-40 h-80 w-80 rounded-full bg-primary-500/10 blur-3xl"
></div>
</div>
<div class="relative z-10 w-full max-w-md text-center">
<!-- 404 Display -->
<div class="mb-8">
<div class="relative inline-block">
<span class="text-[12rem] font-bold leading-none text-gray-100 dark:text-dark-800"
>404</span
>
<div class="absolute inset-0 flex items-center justify-center">
<div
class="flex h-24 w-24 items-center justify-center rounded-2xl bg-gradient-to-br from-primary-500 to-primary-600 shadow-lg shadow-primary-500/30"
>
<svg
class="h-12 w-12 text-white"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
stroke-width="1.5"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
d="M12 9v3.75m-9.303 3.376c-.866 1.5.217 3.374 1.948 3.374h14.71c1.73 0 2.813-1.874 1.948-3.374L13.949 3.378c-.866-1.5-3.032-1.5-3.898 0L2.697 16.126zM12 15.75h.007v.008H12v-.008z"
/>
</svg>
</div>
</div>
</div>
</div>
<!-- Text Content -->
<div class="mb-8">
<h1 class="mb-3 text-2xl font-bold text-gray-900 dark:text-white">
{{ t('errors.pageNotFound') }}
</h1>
<p class="text-gray-500 dark:text-dark-400">
The page you are looking for doesn't exist or has been moved.
</p>
</div>
<!-- Action Buttons -->
<div class="flex flex-col justify-center gap-3 sm:flex-row">
<button @click="goBack" class="btn btn-secondary">
<Icon name="arrowLeft" size="md" class="mr-2" />
Go Back
</button>
<router-link to="/dashboard" class="btn btn-primary">
<Icon name="home" size="md" class="mr-2" />
Go to Dashboard
</router-link>
</div>
<!-- Help Link -->
<p class="mt-8 text-sm text-gray-400 dark:text-dark-500">
Need help?
<a
href="#"
class="text-primary-600 transition-colors hover:text-primary-500 dark:text-primary-400 dark:hover:text-primary-300"
>
Contact support
</a>
</p>
</div>
</div>
</template>
<script setup lang="ts">
import { useI18n } from 'vue-i18n'
import { useRouter } from 'vue-router'
import Icon from '@/components/icons/Icon.vue'
const { t } = useI18n()
const router = useRouter()
function goBack(): void {
router.back()
}
</script>
|