68 lines
3.7 KiB
Plaintext
68 lines
3.7 KiB
Plaintext
|
---
|
||
|
|
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>
|