---
import Layout from '~/layouts/BaseLayout.astro';
import { getHomePermalink } from '~/utils/permalinks';

const title = `Error 404`;
---

<Layout meta={{ title }}>
	<section class="flex items-center h-full p-16">
		<div class="container flex flex-col items-center justify-center px-5 mx-auto my-8">
			<div class="max-w-md text-center">
				<h2 class="mb-8 font-bold text-9xl">
					<span class="sr-only">Error</span>
					<span class="bg-clip-text text-transparent bg-gradient-to-r from-primary-500 to-secondary-500">404</span>
				</h2>
				<p class="text-3xl font-semibold md:text-3xl">Sorry, we couldn't find this page.</p>
				<p class="mt-4 mb-8 text-lg text-gray-600 dark:text-slate-400">
					But dont worry, you can find plenty of other things on our homepage.
				</p>
				<a rel="noopener noreferrer" href={getHomePermalink()} class="btn ml-4">Back to homepage</a>
			</div>
		</div>
	</section>
</Layout>
