---
import BaseLayout from '../layouts/BaseLayout.astro';
import { SITE_TITLE, SITE_DESCRIPTION } from '../consts';
---

<BaseLayout>
	<div class="container mx-auto px-6 py-20 max-w-4xl">
		<h1 class="text-6xl font-bold mb-6">{SITE_TITLE}</h1>
		<p class="text-xl text-[var(--theme-text-muted)] mb-12">{SITE_DESCRIPTION}</p>

		<div class="grid gap-6">
			<a
				href="/blog"
				class="border border-[var(--theme-border-strong)] px-6 py-4 hover:border-brand-accent hover:bg-brand-accent/5 transition-all"
			>
				<h2 class="text-2xl font-bold mb-2">Blog</h2>
				<p class="text-[var(--theme-text-muted)]">Read posts and articles</p>
			</a>

			<a
				href="/contact"
				class="border border-[var(--theme-border-strong)] px-6 py-4 hover:border-brand-accent hover:bg-brand-accent/5 transition-all"
			>
				<h2 class="text-2xl font-bold mb-2">Contact</h2>
				<p class="text-[var(--theme-text-muted)]">Get in touch</p>
			</a>
		</div>
	</div>
</BaseLayout>
