{{ define "hero" }}
    <header class="page-hero">
        <div class="dot-background-container mt-4 mb-8">
            <img class="mx-auto w-full md:h-full hidden md:block" src="/images/microsoft-build/hero.png" />
        </div>
        <div class="page-hero-title">
            <h1 class="small-title text-white">
                <span><span style="font-size: 2.5rem" data-text="{{ .Params.display_title }}">{{ .Params.display_title | markdownify }}</span></span>
            </h1>
        </div>
    </header>
{{ end }}

{{ define "main" }}
    <div class="container w-2/3 mt-8 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>Meet us at Microsoft Build, <b>Room 434</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 bg-white p-8">
                            <h5>{{ $item.heading }}</h5>
                            <p>{{ $item.description | markdownify }}</p>
                            <div class="mt-8">
                                <a href="{{ $item.link }}" target="_blank" class="btn-secondary btn-disabled">{{ $item.action }}</a>
                            </div>
                        </div>
                    </div>
                {{ end }}
            </div>
        </div>
    </section>

    <section id="pulumiup-ad" class="relative">
        <div class="dot-background-container">
            <div class="dot-background"></div>
        </div>
        <div class="dot-overlay"></div>

        <div class="text-center py-16 relative" style="background-color:rgba(255,255,255,.8)">
            <img src="/images/pulumiup-2023/logo.png" alt="Pulumi UP" class="mx-auto" />
            <h5 class="mt-4 text-gray-700">Virtual Conference | June 15, 2023</h5>
            <div class="container banner-description mx-auto mb-12 w-1/2 relative">
                <p>
                    PulumiUP is a free, virtual conference open to all interested in platform engineering, infrastructure as code, software development, modern applications, or
                    Pulumi.
                </p>
                <p>
                    Whether you're a seasoned engineer or just curious to learn about infrastructure as Code, at PulumiUP you can hear industry leaders and attend guest sessions,
                    demos, and panel sessions.
                </p>
                <img src="/images/pulumiup-2023/pulumipus-theme.png" alt="" class="hidden lg:block absolute bottom-0" style="right:-190px" />
            </div>
            <a href="/pulumi-up" target="_blank" style="z-index: 1" class="btn-primary">Register for PulumiUP</a>
        </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 bg-white pb-8 mx-4">
                            <img class="rounded h-40 mx-auto" src="{{ $item.image }}" />
                            <div class="px-6 py-4">
                                <h5 class="mt-4">{{ $item.heading }}</h5>
                                <p>{{ $item.description }}</p>
                                <div class="mt-8">
                                    <a href="{{ $item.link }}" target="_blank" style="font-size: 0.9rem" class="btn-secondary">{{ $item.action }}</a>
                                </div>
                            </div>
                        </div>
                    </div>
                {{ end }}
            </div>
        </div>
    </section>

    <section id="knowledge" class="container mx-auto my-16 text-center">
        <div class="text-center mx-auto my-8">
            <h3>Build Your Knowledge on Best Practices</h3>
            <p>There are new trends in the rapidly evolving cloud native ecosystem. Be in the know, select a webinar below.</p>
        </div>
        <div class="container mx-auto">
            <div class="flex flex-wrap flex-row justify-center">
                {{ range $item := .Params.knowledge.items }}
                    <a href="{{ $item.link }}" target="_blank"><img class="h-80 p-4" src="{{ $item.image }}" /></a>
                {{ end }}
            </div>
        </div>
    </section>

    {{ partial "virtual-communities" . }}

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