<template>
	<div class="not-found-404">
		<OthersHeader :title="$t('PageNotFound')" />
		<div class="content">
			<h2>404</h2>
			<h1>{{ $t('PageNotFoundTitle') }}</h1>
			<p>{{ $t('PageNotFoundDesc') }}</p>
		</div>
	</div>
</template>
<script setup lang="ts">
	import { computed, ref } from 'vue'
	import OthersHeader from './others-header.vue'
</script>

<style scoped lang="less">
	.not-found-404 {
		border-top: var(--main-header-height) solid #000;
		background-color: #f9f9f9;
		> .content {
			max-width: 1230px;
			width: 100%;
			margin: 0 auto;
			padding: 120px 15px;
			line-height: 1.6;
			color: #333;
			font-weight: 400;
			display: flex;
			flex-direction: column;
			align-items: center;
			color: #222;
			> h2 {
				font-size: 100px;
				font-weight: 600;
				letter-spacing: 2px;
				background-image: url('@/assets/images/404.png');
				background-size: auto 100%;
				background-clip: text;
				-webkit-background-clip: text;
				-webkit-text-fill-color: transparent;
				animation: bgImageAnim 7s linear infinite;
				@keyframes bgImageAnim {
					0% {
						background-position-y: 0;
					}
					100% {
						background-position-y: -200px;
					}
				}
			}
			> h1 {
				font-size: 24px;
				margin-bottom: 5px;
				text-transform: uppercase;
			}
			> p {
				color: #333;
				margin-bottom: 20px;
			}
		}
	}
</style>
