---
import { Icon } from 'astro-iconify';
// import Starfield from "~/components/starfield.astro";
---

<section class="h-screen flex flex-col px-10 astro relative">
	<!--Starfield /-->
	<div class="flex">
		<div class="flex-1">
			<h1 class="text-6xl font-extrabold gradient-text">Native Astro Components</h1>
			<p>
				Lorem ipsum dolor sit amet consectetur adipisicing elit. Quasi facere, culpa corporis
				aspernatur obcaecati autem fugiat excepturi, possimus mollitia est veritatis eaque officiis
				quia porro nesciunt esse unde consequuntur in nobis at earum dolore quod magni ipsam. Quo
				necessitatibus modi sequi quas perspiciatis laborum enim
			</p>
		</div>
		<div class="flex-1 items-center justify-center md:flex hidden">
			<h1 class="sr-only">Astro Reactive</h1>
		</div>
	</div>
	<div class="benefits flex flex-col md:flex-row justify-between space-y-4 md:space-y-0 my-10">
		<img src="https://via.placeholder.com/200" alt="benefit 1" />
		<img src="https://via.placeholder.com/200" alt="benefit 2" />
		<img src="https://via.placeholder.com/200" alt="benefit 3" />
		<img src="https://via.placeholder.com/200" alt="benefit 4" />
	</div>
</section>

<style>
	.astro {
		padding-top: 7rem;
	}

	.astro-logo {
		width: 10rem;
		height: 10rem;
	}
</style>