---
import { getHomePermalink } from '~/utils/permalinks';
---

<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>