{{ define "hero" }}
    <header class="page-hero">
        <img class="mx-auto mb-6 w-full" src="/images/reinvent/reinvent-hero.png" />
    </header>
{{ end }}

{{ define "main" }}
    <div class="container w-2/3 mt-16 text-center mx-auto relative">
        <img src="/images/mascot/backpack-pulumipus.svg" alt="" style="transform:scale(-0.5,0.5); top:-128px; left:-280px" class="absolute hidden lg:block" />
        <h5>We will be at AWS re:Invent, November 27-December 1: <b>Booth #779</b></h5>
        <h5>Join us to find out how Pulumi’s Infrastructure as Code reduces cloud complexity, accelerates development velocity and helps companies scale and innovate.</h5>
    </div>

    <section id="links" class="container mx-auto my-16 text-center">
        <div class="container mx-auto">
            <div class="flex flex-wrap items-stretch justify-center">
                {{ range $item := .Params.links.items }}
                    <div class="w-full lg:w-1/2 p-4 my-2">
                        <div class="card h-full relative flex flex-col bg-white p-8">
                            <h5>{{ $item.heading }}</h5>
                            <p class="flex-1">{{ $item.description | markdownify }}</p>
                            <div class="mt-4">
                                <a href="{{ $item.link }}" target="_blank" class="btn-secondary" style="white-space: nowrap;">{{ $item.action }}</a>
                            </div>
                        </div>
                    </div>
                {{ end }}
            </div>
        </div>
    </section>

    <section id="workshops" style="background-color: #805AC3;">
        <div class="container mx-auto py-12">
            <h3 class="px-4 text-white">Workshops</h3>
            <div class="flex flex-wrap items-stretch justify-center">
                {{ range $item := .Params.workshops.items }}
                    <div class="w-full lg:w-1/2 p-4 my-2">
                        <div class="card h-full relative flex flex-col bg-white p-8">
                            <h6>{{ $item.title }}</h6>
                            {{ if $item.date }}
                                <div class="my-0 py-1 inline-block mr-3 text-gray-600">
                                    <i class="fas fa-calendar mr-2"></i>
                                    {{ $item.date }}
                                </div>
                            {{ end }}
                            <div class="flex-grow flex flex-col justify-start mt-3">
                                <p class="text-gray-700">
                                    {{ $item.description }}
                                </p>
                            </div>
                            <div class="mt-8">
                                <a href="{{ $item.link }}" target="_blank" class="btn-secondary btn-disabled">{{ $item.action }}<i class="fa fa-arrow-right ml-2"></i></a>
                            </div>
                        </div>
                    </div>
                {{ end }}
            </div>
        </div>
    </section>

    <section id="templates" class="container mx-auto my-16 text-center">
        <div class=" text-center mx-auto my-8">
            <h3>Pulumi Templates for Common Use Cases</h3>
            <p>
                Pulumi templates are the fastest way to deploy infrastructure. Templates come with predefined infrastructure as code so you can get started instantly. Find some of
                our templates below, and Happy Templating!
            </p>
        </div>
        <div class="container mx-auto">
            <div class="flex flex-wrap items-stretch justify-center">
                {{ range $item := .Params.templates.items }}
                    <div class="lg:w-1/3 md:w-1/2 w-full my-4">
                        <div class="card h-full relative flex flex-col bg-white pb-8 mx-4">
                            <img class="rounded h-40 mx-auto" src="{{ $item.image }}" />
                            <h5 class="mt-4">{{ $item.heading }}</h5>
                            <p class="flex-1 px-8 pb-4">{{ $item.description }}</p>
                            <div>
                                <a href="{{ $item.link }}" target="_blank" style="font-size: 0.9rem" class="btn-secondary">{{ $item.action }}</a>
                            </div>
                        </div>
                    </div>
                {{ end }}
            </div>
        </div>
    </section>

    {{ partial "virtual-communities" . }}

    {{ partial "help-links" . }}
{{ end }}