<script lang="ts">
	let { data } = $props();
</script>

<svelte:head>
	<title>Pounce</title>
</svelte:head>

<div class="flex flex-col items-center justify-center px-4 py-20">
	<h1 class="text-4xl font-bold text-gray-900 mb-4">Pounce on your tasks</h1>
	<p class="text-lg text-gray-600 mb-8 text-center max-w-xl">
		An open source kanban board for your team. Create boards, organize tasks, and track progress in real-time.
	</p>
	<div class="flex gap-3">
		<a
			href="/auth/register"
			class="rounded-lg bg-[var(--color-primary)] px-6 py-3 text-white font-medium hover:bg-[var(--color-primary-hover)] transition"
		>
			Get Started
		</a>
		<a
			href="/boards"
			class="rounded-lg border border-gray-300 px-6 py-3 text-gray-700 font-medium hover:bg-gray-100 transition"
		>
			Browse Boards
		</a>
	</div>
</div>
