59 lines
2.4 KiB
Vue
59 lines
2.4 KiB
Vue
<template>
|
|
<div class="min-h-[100vh] flex flex-col bg-[#F0F0F0] pb-12">
|
|
<LayoutsStoveHeader />
|
|
|
|
<Transition name="fade">
|
|
<div v-if="!isLoading" class="flex-1 flex items-center justify-center p-25">
|
|
<div class="flex flex-col items-center gap-6 w-full">
|
|
<!-- Stove Logo -->
|
|
<div class="flex items-center justify-center h-7">
|
|
<img
|
|
src="/images/common/logo-stove.svg"
|
|
alt="Stove"
|
|
class="h-full w-auto"
|
|
/>
|
|
</div>
|
|
|
|
<!-- Error Icon and Text -->
|
|
<div class="flex flex-col items-center gap-4 w-full">
|
|
<!-- Error Icon -->
|
|
<div class="flex items-center justify-center">
|
|
<img
|
|
src="/images/common/img_error.png"
|
|
alt="Error"
|
|
class="w-40 h-40 md:w-60 md:h-60"
|
|
/>
|
|
</div>
|
|
|
|
<!-- Error Text -->
|
|
<div class="flex flex-col items-center gap-2 w-full">
|
|
<h1 class="font-medium text-xl md:text-2xl leading-[1.5] tracking-[-0.03em] text-center text-[#1F1F1F] m-0">
|
|
<span v-dompurify-html="tm('Error_404_Not_Found')"></span>
|
|
</h1>
|
|
<p v-dompurify-html="tm('Error_404_Not_Found2')" class="font-normal text-sm md:text-base leading-[1.7] md:leading-[1.625] tracking-[-0.03em] text-center text-[#666666] m-0"></p>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Home Button -->
|
|
<AtomsLocaleLink to="/brand" class="flex items-center justify-center font-medium text-sm leading-[1.4] tracking-[-0.03em] text-white bg-[#FC4420] border border-black/10 rounded-lg px-10 h-12 cursor-pointer transition-all duration-300 backdrop-blur-[30px] shadow-[0px_0.9131946563720703px_1.4666459560394287px_0px_rgba(0,0,0,0.06),0px_2.194533586502075px_3.5245540142059326px_0px_rgba(0,0,0,0.09)] hover:bg-[#E03D1C] hover:shadow-[0px_0.9131946563720703px_1.4666459560394287px_0px_rgba(0,0,0,0.06),0px_2.194533586502075px_3.5245540142059326px_0px_rgba(0,0,0,0.09),0px_4.1321120262146px_6.636422634124756px_0px_rgba(0,0,0,0.12)] active:translate-y-px">
|
|
<span v-dompurify-html="tm('Error_Official_Page')"></span>
|
|
</AtomsLocaleLink>
|
|
|
|
</div>
|
|
</div>
|
|
</Transition>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
const { tm } = useI18n()
|
|
|
|
const isLoading = ref(true)
|
|
|
|
onMounted(() => {
|
|
nextTick(() => {
|
|
isLoading.value = false
|
|
})
|
|
})
|
|
|
|
</script> |