{{ define "hero" }}
    <header>
        <div class="container mx-auto p-4 text-center m-24 mb-12 max-w-5xl">
            <h1 class="text-5xl">{{ .Params.hero.title }}</h1>
            <p class="mt-10 text-2xl">{{ .Params.hero.description }}</p>
        </div>
    </header>
{{ end }}

{{ define "main" }}
    <section id="backgrounds" class="container mx-auto">
        {{ range .Params.backgrounds }}
            <div class="flex flex-col lg:flex-row my-4 lg:my-12">
                <div class="w-full mb-12 order-last lg:order-first lg:mb-0 lg:w-5/12 p-4 lg:px-16">
                    <h2 class="text-2xl font-bold">{{ .name }}</h2>
                    <p class="mb-12">{{ .description }}</p>
                    <a href="{{ .image }}" class="btn-primary" download> Download </a>
                </div>
                <div class="w-full order-first lg:order-last lg:w-7/12">
                    <img src="{{ .image }}" alt="{{ .name }}" />
                </div>
            </div>
        {{ end }}
    </section>

    <section id="get-started" class="py-16 px-4 lg:px-0">
        <div class="container mx-auto max-w-5xl md:flex my-8 align-top justify-center text-center">
            <div class="mr-4">
                <h2>Get Started with Pulumi</h2>
                <p class="text-lg">Use Pulumi's open source SDK to create, deploy, and manage infrastructure on any cloud.</p>
            </div>
        </div>
        <div class="container mx-auto max-w-5xl">
            <div class="flex max-w-full">
                <a
                    id="get-started-aws"
                    class="btn bg-white border border-gray-300 hover:bg-white hover:border-gray-400 p-5 mb-5 flex justify-center w-1/2 mr-4"
                    href="{{ relref . "/docs/clouds/aws/get-started" }}"
                    track-click
                >
                    <img class="h-10" src="/logos/tech/aws.svg" alt="AWS" />
                </a>
                <a
                    id="get-started-azure"
                    class="btn bg-white border border-gray-300 hover:bg-white hover:border-gray-400 p-5 mb-5 flex justify-center w-1/2 ml-4"
                    href="{{ relref . "/docs/clouds/azure/get-started" }}"
                    track-click
                >
                    <img class="h-10" src="/logos/tech/azure.svg" alt="Azure" />
                </a>
            </div>
            <div class="flex flex-row max-w-full">
                <a
                    id="get-started-gcp"
                    class="btn bg-white border border-gray-300 hover:bg-white hover:border-gray-400 p-5 mb-5 flex justify-center w-1/2 mr-4"
                    href="{{ relref . "/docs/clouds/gcp/get-started" }}"
                    track-click
                >
                    <img class="h-10" src="/logos/tech/gcp.svg" alt="Google Cloud" />
                </a>
                <a
                    id="get-started-kubernetes"
                    class="btn bg-white border border-gray-300 hover:bg-white hover:border-gray-400 p-5 mb-5 flex justify-center w-1/2 ml-4"
                    href="{{ relref . "/docs/clouds/kubernetes/get-started" }}"
                    track-click
                >
                    <img class="h-10" src="/logos/tech/k8s.svg" alt="Kubernetes" />
                </a>
            </div>
        </div>
    </section>
{{ end }}