---
import Layout from '../layouts/Layout.astro';
import LeftRightSplit from '../structure/LeftRightSplit.astro';
import NavLink from '../widgets/NavLink.astro';
---

<Layout title="The Clog">
	<main>
		<LeftRightSplit class="px-4 align-center">
			<div slot="left" class="text-center w-full my-auto">
				<p>The Coding Blog</p>
				<h1 class="text-4xl font-bold text-brand-3">Welcome to The Clog</h1>
				<p>A practical coding blog in the form of journal entries and articles.</p>
				<div>
					<NavLink href="/journal">Journal</NavLink>
					<NavLink href="/articles">Articles</NavLink>
				</div>
			</div>
			<div slot="right" class="h-auto max-h-dvh max-w-full w-full my-auto">
				<img  src="/hero.png" class="object-contain" />
			</div>
		</LeftRightSplit>
		<!-- <Hero
			badge="The Coding Blog"
			heading="Welcome to The Clog"
			text="A practical coding blog in the form of journal entries and articles."
			buttons={[
				{ text: 'Journal', href: '/journal', contrast: true },
				{ text: 'Articles', href: '/articles', contrast: true },
			]}
			structure="split"
			image="/hero.png"
			class:list={["p-space-6"]}
		/> -->
	</main>
</Layout>