---
import { Icon } from 'astro-iconify';
import Copynpm from '~/components/copynpm.astro';
---

<section class="h-screen flex flex-col astro relative">
	<div class="relative flex flex-col-reverse justify-end h-full content-center grid pt-0">
		<div class="flex flex-col w-screen p-8">
			<h2 class="flex flex-col items-center gap-2">
				<div class="font-extrabold tracking-tighter text-center text-8xl gradient-text">
					Astro. Reactive.
				</div>
			</h2>
			<div
				class="mt-8 flex justify-center flex-col items-center astro-lg:flex-row astro-lg:justify-center"
			>
				<a
					href="https://docs.astro-reactive.dev/en/api/form/form-component/"
					class="flex items-center w-4/5 astro-md:w-1/2 justify-center bg-blue-500 hover:bg-blue-400 hover:text-white text-white font-bold py-2 px-4 border-b-4 border-blue-700 hover:border-blue-500 rounded transition-colors astro-lg:w-auto"
				>
					<span class="pr-2">Get Started</span>
					<Icon name="mdi:arrow-right" width="20px" height="20px" />
				</a>
				<Copynpm />
			</div>
		</div>
	</div>
</section>

<style>
	@keyframes float {
		0% {
			transform: translate3d(0, 0, 0);
		}

		100% {
			transform: translate3d(0, 30px, 0);
		}
	}

	@media (prefers-reduced-motion: reduce) {
		:global(#starfield) {
			@apply hidden;
		}

		#splash-bg-fallback {
			@apply block;
		}
	}
</style>