{{#> layout }}

<div class="max-w-screen-lg p-5 mx-auto font-extralight text-main lg:p-20">  
    <h1 class="mb-10 font-display font-extralight">We’re building a community of passionate developers &amp; advocates.</h1>

    <p class="mt-5 leading-relaxed">If you would like to get involved early, sign up for the our community below and we will let you know when it opens.</p>

    <form action="/signups" method="post" class="mt-10">
        <ul>
            <li class="flex flex-row mt-5 text-lg">
                <span class="relative w-6 mt-2 mr-5 checkbox__input">
                    <span class="absolute z-0 block checkbox__brackets">
                        <svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg" focusable="false">
                        <path d="M8 0H0V32H8V31H1V1H8V0Z" fill="white"/>
                        <path d="M24 31H31V1H24V0H32V32H24V31Z" fill="white"/>
                        </svg>
                    </span>
                    <input class="absolute z-10" type="checkbox" value=true name="wants_releases">
                    <span class="flex items-center justify-center checkbox__control">
                        <svg width="12" height="11" viewBox="0 0 12 11" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false">
                            <path d="M1 6.38905L4.33333 9.72239L11 0.833496" fill='none' stroke='currentColor' stroke-width="1" stroke-linecap="round"/>
                        </svg>
                    </span>
                </span>
                    
                <div class="flex-1 mt-1">
                    <label for="wants_releases">
                        <span class="radio__label">Let me know when there is a beta release I can try.</span>
                    </label>
                    <p class="text-sm leading-6 text-gray-400">
                        We'll put you on the list to play with an early beta and let you know when Zed launches.
                    </p>
                </div>
            </li>
            <li class="flex flex-row mt-5 text-lg">
                <span class="relative w-6 mt-2 mr-5 checkbox__input">
                    <span class="absolute z-0 block checkbox__brackets">
                        <svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg" focusable="false">
                        <path d="M8 0H0V32H8V31H1V1H8V0Z" fill="white"/>
                        <path d="M24 31H31V1H24V0H32V32H24V31Z" fill="white"/>
                        </svg>
                    </span>

                    <input class="absolute z-10" type="checkbox" value=true name="wants_updates">
                    <span class="flex items-center justify-center checkbox__control">
                        <svg width="12" height="11" viewBox="0 0 12 11" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false">
                            <path d="M1 6.38905L4.33333 9.72239L11 0.833496" fill='none' stroke='currentColor' stroke-width="1" stroke-linecap="round"/>
                        </svg>
                    </span>
                </span>
                    
                <div class="flex-1 mt-1">
                    <label for="wants_updates">
                        <span class="radio__label">I’m interested in following Zed's development</span>
                    </label>
                    <p class="text-sm leading-6 text-gray-400">
                        We'll send you occasional updates about our progress and share what we're learning along the way.
                    </p>
                </div>
            </li>
            <li class="flex flex-row mt-5 text-lg">
                <span class="relative w-6 mt-2 mr-5 checkbox__input">
                    <span class="absolute z-0 block checkbox__brackets">
                        <svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg" focusable="false">
                        <path d="M8 0H0V32H8V31H1V1H8V0Z" fill="white"/>
                        <path d="M24 31H31V1H24V0H32V32H24V31Z" fill="white"/>
                        </svg>
                    </span>

                    <input class="absolute z-10" type="checkbox" value=true name="wants_community">
                    
                    <span class="flex items-center justify-center checkbox__control">
                        <svg width="12" height="11" viewBox="0 0 12 11" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false">
                            <path d="M1 6.38905L4.33333 9.72239L11 0.833496" fill='none' stroke='currentColor' stroke-width="1" stroke-linecap="round"/>
                        </svg>
                    </span>
                </span>
                    
                <div class="flex-1 mt-1">
                    <label for="wants_community">
                        <span class="radio__label">I want to test early releases & join the Zed community</span>
                    </label>
                    <p class="text-sm leading-6 text-gray-400">
						We'll add you to the wait list to receive early builds and ask you to help us by testing them out.
                    </p>
                </div>
            </li>
        </ul>
        <div class="lg:flex lg:flex-row lg:mt-10">
            <input class="block w-full p-5 mt-10 bg-transparent border border-white font-extralight lg:mt-0 lg:mr-5" type="text" id="form-email" name="email_address" required minlength="4" placeholder="Your email">

            <input class="block w-full p-5 mt-5 bg-transparent border border-white font-extralight lg:mt-0" type="text" id="form-gh" name="github_login" placeholder="Github Username">
        </div>
        
        <textarea class="block w-full h-40 p-5 mt-5 leading-relaxed bg-transparent border border-white font-extralight" type="text" name="about" placeholder="Tell us a bit about yourself and your interest Zed.&#10;What does your dream code-editing experience look like?&#10;What is the one thing that you love or hate about your current editor?"></textarea>

        <button class="block mt-10 text-lg opacity-100 font-extralight hover:opacity-80">
            Join the waitlist &rarr;
        </button>

        <p class="mt-10 text-sm leading-relaxed text-gray-500">
            We're not gonna spam you &mdash; You can expect an email every 1 to 3 months from us if you sign up for updates and occasional emails about beta releases.
        </p>
    </form>
</div>

{{/layout}}