{{ define "main" }}
    <header class="container mx-auto py-8 border-b border-gray-300 text-center max-w-2xl px-4">
        <h1>{{ .Title }}</h1>

        {{ if .Params.description }}
            <p class="text-xl text-gray-600">
                {{ .Params.description }}
            </p>
        {{ end }}
    </header>
    <section class="container mx-auto max-w-3xl py-8 px-4">
        {{ .Content }}
    </section>

    <section class="text-gray-300 text-gray-200 py-16 px-4">
        <div class="container mx-auto md:flex justify-center">
            <div class="md:w-1/3 flex md:ml-6 mb-16 md:mb-0">
                <div class="mr-12">
                    <img class="h-16 -mt-2" src="/icons/icon-book.svg" />
                </div>
                <div>
                    <h3>Learn more</h3>
                    <p class="mb-8">Download our whitepaper to learn more about our product architecture and security practices.</p>
                    <a class="btn btn-secondary" href="{{ .Resources.GetMatch "pulumi-cloud-security-whitepaper.pdf" }}" target="_blank">Download Whitepaper</a>
                </div>
            </div>
            <div class="md:w-1/3 flex md:ml-6">
                <div class="mr-12">
                    <img class="h-16" src="/icons/icon-dialogue.svg" />
                </div>
                <div>
                    <h3>Talk to a human</h3>
                    <p class="mb-8">Have questions about Pulumi? We're happy to help.</p>
                    <a class="btn btn-secondary" href="/contact/">Talk to a human</a>
                </div>
            </div>
        </div>
    </section>
{{ end }}