<script>
	import MetaData from '$lib/components/Layouts/MetaData.svelte';
</script>

<MetaData
	title="Erreur 404"
	description="Sur cette page, tu voie juste une foutu erreur 404, tu crois que je suis une théière ?"
/>

<div
	class="flex min-h-[50dvh] flex-col items-center justify-center bg-background px-4 py-12 sm:px-6 lg:px-8"
>
	<div class="mx-auto max-w-md text-center">
		<div class="mx-auto h-12 w-12 text-primary" />
		<h1 class="mt-4 text-6xl font-bold tracking-tight text-foreground sm:text-7xl">404</h1>
		<p class="mt-4 text-muted-foreground">
			Oups, il semble que la page que vous recherchez n'existe pas.
		</p>
		<div class="mt-6">
			<a
				href="/"
				class="inline-flex items-center rounded-md bg-primary px-4 py-2 text-sm font-medium text-primary-foreground shadow-sm transition-colors hover:bg-primary/90 focus:outline-none focus:ring-2 focus:ring-primary focus:ring-offset-2"
			>
				<button
					type="button"
					class="text-black bg-gradient-to-br from-red-500 to-yellow-400 hover:bg-gradient-to-bl focus:ring-4 focus:outline-none focus:ring-pink-200 dark:focus:ring-pink-800 font-medium rounded-lg text-sm px-5 py-2.5 text-center me-2 mb-2"
				>
					Retourner à l'Accueil
				</button>
			</a>
		</div>
	</div>
</div>
