diff options
| -rw-r--r-- | src/pages/404.page.vue | 25 |
1 files changed, 11 insertions, 14 deletions
diff --git a/src/pages/404.page.vue b/src/pages/404.page.vue index b8cba46..4ec1cb4 100644 --- a/src/pages/404.page.vue +++ b/src/pages/404.page.vue @@ -1,23 +1,20 @@ <script setup lang="ts"> +import { Coffee } from '@vicons/tabler'; import { useHead } from '@vueuse/head'; useHead({ title: 'Page not found - IT Tools' }); </script> <template> - <div class="e404-wrapper"> - <n-result status="404" title="404 Not Found" description="Sorry, this page does not seem to exist"> - <template #footer> - <router-link to="/" #="{ navigate, href }" custom> - <n-button tag="a" :href="href" secondary type="success" @click="navigate"> Back home </n-button> - </router-link> - </template> - </n-result> + <div mt-20 flex flex-col items-center> + <n-icon :component="Coffee" size="100" depth="3" /> + + <n-h1 m-0 mt-3>404 Not Found</n-h1> + <n-text mt-4 block depth="3">Sorry, this page does not seem to exist</n-text> + <n-text mb-8 block depth="3">Maybe the cache is doing tricky things, try force-refreshing?</n-text> + + <router-link to="/" #="{ navigate, href }" custom> + <n-button tag="a" :href="href" secondary @click="navigate"> Back home </n-button> + </router-link> </div> </template> - -<style scoped> -.e404-wrapper { - padding-top: 150px; -} -</style> |