Yago Veloso
854a08783e
- Implemented a new error.vue component to handle 404 errors. - Added an SVG illustration for the 404 error page. - Included a message prompting users to return to the homepage. - Integrated a button for easy navigation back to the homepage.
46 lines
1.4 KiB
Vue
46 lines
1.4 KiB
Vue
<script setup lang="ts">
|
|
import type { NuxtError } from "#app";
|
|
|
|
const props = defineProps({
|
|
error: Object as () => NuxtError,
|
|
});
|
|
|
|
const handleError = () => clearError({ redirect: "/" });
|
|
</script>
|
|
|
|
<template>
|
|
<section class="min-h-screen flex justify-center">
|
|
<div class="container mx-auto flex md:flex-row flex-col items-center">
|
|
<div class="lg:max-w-lg lg:w-full md:w-1/2 w-5/6 mb-10 md:mb-0">
|
|
<img
|
|
class="object-cover object-center rounded"
|
|
alt="hero"
|
|
src="~/assets/img/404-error.svg"
|
|
/>
|
|
</div>
|
|
<div
|
|
class="lg:grow md:w-1/2 lg:pl-24 md:pl-16 flex flex-col md:items-start md:text-left items-center text-center gap-2"
|
|
>
|
|
<img
|
|
src="~/assets/img/logo.svg"
|
|
alt="Estúdio AANY"
|
|
class="max-w-64 pb-5"
|
|
/>
|
|
<h1
|
|
class="text-balance sm:text-4xl text-3xl mb-4 font-medium text-gray-900"
|
|
>
|
|
Se perdeu no caminho?
|
|
</h1>
|
|
<p class="mb-8 leading-relaxed text-balance">
|
|
Parece que a página que você está procurando não existe. Que tal
|
|
voltar para a página inicial e começar de novo?
|
|
</p>
|
|
<div class="flex justify-center">
|
|
<UButton size="xl" @click="handleError"
|
|
>Voltar para a página inicial</UButton
|
|
>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</template>
|