---
import Layout from '../layouts/Layout.astro';
---
<!-- Big demo using SVG -->
<Layout title="Learn AWS - The easy way">
	<section class="newsletter relative sm:py-16">
		<div aria-hidden="true" class="hidden sm:block">
			<svg class="absolute top-8 -right-8 -ml-3" width="404" height="392" fill="none" viewBox="0 0 404 392">
				<defs>
					<pattern id="8228f071-bcee-4ec8-905a-2a059a2cc4fb" x="0" y="0" width="20" height="20"
						patternUnits="userSpaceOnUse">
						<rect x="0" y="0" width="4" height="4" class="text-gray-200" fill="currentColor" />
					</pattern>
				</defs>
				<rect width="404" height="392" fill="url(#8228f071-bcee-4ec8-905a-2a059a2cc4fb)" />
			</svg>
		</div>
		<div class="mx-auto max-w-md px-4 sm:max-w-3xl sm:px-6 lg:max-w-7xl lg:px-8">
			<div class="relative rounded-2xl px-6 py-10 bg-indigo-600 overflow-hidden shadow-xl sm:px-12 sm:py-20">
				<div aria-hidden="true" class="absolute inset-0 -mt-72 sm:-mt-32 md:mt-0">
					<svg class="absolute inset-0 h-full w-full" preserveAspectRatio="xMidYMid slice"
						xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 1463 360">
						<path class="text-indigo-500 text-opacity-40" fill="currentColor"
							d="M-82.673 72l1761.849 472.086-134.327 501.315-1761.85-472.086z" />
						<path class="text-indigo-700 text-opacity-40" fill="currentColor"
							d="M-217.088 544.086L1544.761 72l134.327 501.316-1761.849 472.086z" />
					</svg>
				</div>
				<div class="relative grid justify-items-center">
					<div class="sm:text-center">
						<h2 class="text-3xl font-extrabold text-white tracking-tight sm:text-4xl">
              Struggling to	learn AWS?<br /> We are here to save you</h2>
						<p class="mt-6 mx-auto max-w-2xl text-lg text-indigo-50">We are working hard to launch
							some awesome courses which will teach you AWS Lambda, DynamoDB, App Sync, CDK, SES,
							SNS, Event Bridge and what not</p>
						<h4 class="mt-6 mx-auto max-w-2xl text-xl text-indigo-50 font-bold">Get notified when we launch
							our creative AWS Course</h4>
					</div>
					<form action="#" class="mt-12 sm:mx-auto sm:max-w-lg" id="subscribe-form">
						<div class="flex-1 mr-4 sm:col-span-3 mb-4 w-80">
							<label for="cta-name" class="sr-only">Name</label>
							<input id="cta-name" autocomplete="name" type="text" name="name" required minlength={3}
								maxlength={15}
								class="block w-full border border-transparent rounded-md px-5 py-3 text-base text-gray-900 placeholder-gray-500 shadow-sm focus:outline-none focus:border-transparent focus:ring-2 focus:ring-white focus:ring-offset-2 focus:ring-offset-indigo-600"
								placeholder="Your name">
						</div>
						<div class="flex-1 mr-4 sm:col-span-4 mb-4 w-80">
							<label for="cta-email" class="sr-only">Email address</label>
							<input id="cta-email" type="email" autocomplete="email" name="email" required
								class="block w-full border border-transparent rounded-md px-5 py-3 text-base text-gray-900 placeholder-gray-500 shadow-sm focus:outline-none focus:border-transparent focus:ring-2 focus:ring-white focus:ring-offset-2 focus:ring-offset-indigo-600"
								placeholder="Your email">
						</div>
            <label class="text-white" id="error-msg"></label>
						<div class="grid justify-items-center">
							<div class="sm:mt-4 mr-4 w-80">
								<button type="submit"
                  id="submit-btn"
									class="block w-full rounded-md border border-transparent px-5 py-3 bg-indigo-500 text-base font-medium text-white shadow hover:bg-indigo-400 focus:outline-none focus:ring-2 focus:ring-white focus:ring-offset-2 focus:ring-offset-indigo-600 sm:px-10">Take me in!</button>
							</div>
						</div>
					</form>
				</div>
			</div>
		</div>

	</section>
</Layout>