---
import Counter from "./examples/Counter.astro";
---

<section class="pt-24 pb-8 overflow-hidden relative z-10">
	<div class="mx-auto max-w-7xl px-4 sm:px-6">
		<div class="xl:grid xl:grid-cols-12 mx-auto xl:gap-16 justify-center">
			<div
				class="relative z-10 px-4 mb-8 sm:px-6 sm:text-center sm:mb-16 xl:mb-0 xl:px-0 xl:text-left xl:flex col-span-5"
			>
				<div class="xl:py-24">
					<h1 class="mt-4 text-4xl sm:mt-5 sm:text-6xl xl:mt-6 xl:text-6xl">
						<span>anywidget</span>
					</h1>
					<p
						class="mt-3 sm:mx-auto xl:mx-0 max-w-lg text-lg sm:text-2xl sm:mt-5"
					>
						custom jupyter widgets made easy
					</p>
					<div class="mt-5 sm:mt-8 sm:flex sm:justify-center xl:justify-start">
						<div>
							<a
								href="/en/getting-started/"
								class="text-base md:text-lg text-white hover:bg-primary-800 bg-primary-600 w-full flex items-center justify-center px-4 py-3 border border-transparent rounded-md -medium no-underline hover:no-underline"
							>
								Get Started
							</a>
						</div>
						<div class="relative mt-3 sm:mt-0 sm:ml-3">
							<div
								class="text-base md:text-lg font-mono bg-neutral-900 text-neutral-50 rounded-md flex items-center justify-center pl-3 pr-4 py-3 border border-transparent shadow-primary-700"
							>
								<svg
									xmlns="http://www.w3.org/2000/svg"
									class="text-secondary-500 mr-2"
									width="1em"
									height="1em"
									preserveAspectRatio="xMidYMid meet"
									viewBox="0 0 20 20"
									><path
										fill="currentColor"
										fill-rule="evenodd"
										d="M7.293 14.707a1 1 0 0 1 0-1.414L10.586 10L7.293 6.707a1 1 0 0 1 1.414-1.414l4 4a1 1 0 0 1 0 1.414l-4 4a1 1 0 0 1-1.414 0Z"
										clip-rule="evenodd"></path></svg
								>
								<span class="pr-4 select-all">pip install anywidget</span>
							</div>
						</div>
					</div>
				</div>
			</div>
			<div class="col-span-7">
				<Counter />
			</div>
		</div>
	</div>
</section>
