---
import Layout from '../layouts/Main.astro';
import NavItems from '../components/NavItems.astro';
import NavBar from '../components/NavBar.astro';
import Footer from '../components/Footer.astro';
export const prerender = false;
import { Waitlist as WaitlistAstro } from '@clerk/astro/components'
---
<Layout>
    <NavBar slot="navbar">
        <NavItems slot="navItems" />
    </NavBar>
    <div class="row mb-4" slot="page">
        <h1>Rigid's App Thing</h1>
        <h5 class="text-secondary">(working title)</h5>
        <div class="col-12 col-md-7">
            <h4 class="mt-3">Welcome!</h4>
            <p class="mt-2">
                This single-page web applictation is currently in a closed beta. Access to the beta will be limited, and the selection process will be highly curated. You are welcome to request access - if you do not get into the beta, don't worry, after the beta is complete, the app will be available to all users.</p>
            </p>
            <p class="my-2">
                If you would like to join the waitlist, please enter your email address. You will receive an email with instructions on how to access the app when it becomes available.
            </p>
            <p class="my-2">
                If you aren't interested in joining the waitlist, that is okay too! Feel free to play "Who's that Pokémon?" with the random Pokémon generator <a href="/404">here</a>. Refresh the page to see a new Pokémon!
            </p>            
        </div>
        <div class="col-12 col-md-4 offset-md-1 mx-2">
            <WaitlistAstro />
        </div>
    </div>
    <Footer slot="footer" />
</Layout>