{{ define "hero" }}{{ partial "hero.html" (dict "title" "Challenges") }}{{ end }}
{{ define "main" }}
    <section class="max-w-4xl container mx-auto py-8 px-4 text-center text-lg">
        <p>
            Developers from around the world think Pulumi is an amazing IaC tool that increases developer velocity and tames the complexity of modern cloud scale. Try it out for
            yourself by taking a Pulumi Challenge!
        </p>
    </section>

    <section id="challenges" class="w-full relative overflow-visible">
        <!-- Only do the 2x2 layout at tablet width (md) and up. -->
        <ul class="md:flex flex-wrap list-none justify-center p-0">
            <li class="md:w-1/2">
                <div>
                    <div class="w-full p-4 my-2">
                        <div class="card text-center py-16 px-8 relative bg-white">
                            <h4>GPT Your IaC</h4>
                            <p class="my-8">
                                Use Pulumi AI to deploy the craziest and most complicated architecture that you can imagine. Best PulumiAI generated stack wins a grand prize!
                            </p>
                            <div class="flex flex-col lg:flex-row justify-center items-center">
                                <div class="my-2 mx-2 w-full lg:w-auto">
                                    <a href="/challenge/ai-architecture/" class="w-full block btn-secondary">Start</a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </li>
        </ul>
    </section>

    <div class="bg-gray-100">
        <section id="challenges" class="w-full relative overflow-visible">
            <h2 class="container mx-auto text-center py-20 mt-28 px-6">Past Challenges</h2>
            <!-- Only do the 2x2 layout at tablet width (md) and up. -->
            <ul class="md:flex flex-wrap list-none justify-center items-start p-0">
                <li class="md:w-1/2">
                    <div>
                        <div class="w-full p-4 my-2">
                            <div class="card text-center py-16 px-8 relative bg-white">
                                <h4>Startup in a Box</h4>
                                <p class="my-8">Build and deploy your very own landing site to the cloud, complete with CDN and Checkly!</p>
                                <div class="flex flex-col lg:flex-row justify-center items-center">
                                    <div class="my-2 mx-2 w-full lg:w-auto">
                                        <a href="/challenge/startup-in-a-box/" class="w-full block btn-secondary">Start</a>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </li>
                <li class="md:w-1/2">
                    <div>
                        <div class="w-full p-4 my-2">
                            <div class="card text-center py-16 px-8 relative bg-white">
                                <h4>One Quickstart to Rule them All</h4>
                                <p class="my-8">Stand up a serverless app on AWS API Gateway and Lambda with a single command using Pulumi Architecture Templates!</p>
                                <div class="flex flex-col lg:flex-row justify-center items-center">
                                    <div class="my-2 mx-2 w-full lg:w-auto">
                                        <a href="/challenge/one-quickstart/" class="w-full block btn-secondary">Start</a>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </li>
                <li class="md:w-1/2">
                    <div>
                        <div class="w-full p-4 my-2">
                            <div class="card text-center py-16 px-8 relative bg-white">
                                <h4>Deployments Mini-Challenge</h4>
                                <p class="my-8">Create cloud infrastructure with a git push using Pulumi Deployments!</p>
                                <div class="flex flex-col lg:flex-row justify-center items-center">
                                    <div class="my-2 mx-2 w-full lg:w-auto">
                                        <a href="/challenge/deployments/" class="w-full block btn-secondary">Start</a>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </li>
                <li class="md:w-1/2">
                    <div>
                        <div class="w-full p-4 my-2">
                            <div class="card text-center py-16 px-8 relative bg-white">
                                <h4>Holiday Shopping</h4>
                                <p class="my-8">Create a simple shopping list app using AWS Fargate and MongoDB Atlas!</p>
                                <div class="flex flex-col lg:flex-row justify-center items-center">
                                    <div class="my-2 mx-2 w-full lg:w-auto">
                                        <a href="/challenge/holiday-shopping/" class="w-full block btn-secondary">Start</a>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </li>
            </ul>
        </section>
    </div>
{{ end }}