---
import { Icon } from 'astro-icon';
---

<section class="relative">
	<div class="max-w-6xl mx-auto px-4 sm:px-6">
		<div class="py-12 md:py-20">
			<div class="max-w-3xl mx-auto text-center p-6 rounded-md shadow-xl dark:shadow-none">
				<h2 class="text-4xl md:text-4xl font-bold leading-tighter tracking-tighter mb-4 font-heading">
					<span>Astro</span> + <br class="block sm:hidden" /><span class="sm:whitespace-nowrap">Tailwind CSS</span>
				</h2>
				<p class="text-xl text-gray-600 dark:text-slate-400">
					Be very surprised by these huge fake numbers you are seeing on this page. <br class="hidden md:inline" />Don't
					waste more time! :P
				</p>

				<div class="mt-6">
					<a
						class="btn text-white bg-primary-600 hover:bg-primary-800 mb-4 sm:mb-0"
						href="https://github.com/onwidget/astrowind"
						target="_blank"
						rel="noopener"
					>
						<Icon name="tabler:download" class="w-5 h-5 mr-1 -ml-1.5" /> Get template
					</a>
				</div>
			</div>
		</div>
	</div>
</section>