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

{{ define "main" }}
    <section id="keynote" class="max-w-5xl mx-auto text-center my-8 px-6">
        <h1 class="font-display text-4xl">Cloud Engineering Days</h1>
        <h2 class="font-display text-2xl">
            <b>Opening Keynote - Founder/CEO Joe Duffy and CTO Luke Hoban</b>
        </h2>
        <div class="w-3/4 mx-auto py-8" style="position: relative; padding-bottom: 40.25%; height: 0; overflow: hidden;">
            <iframe
                src="https://www.youtube.com/embed/9B19Vuaq40A?rel=0"
                style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; border:0;"
                allowfullscreen=""
            ></iframe>
        </div>
        <div class="py-8 text-left">
            <p>
                Joe Duffy and Luke Hoban discuss the newest innovations in infrastructure as code and modern applications and how pioneering engineering organizations use these
                techniques to ship faster, more reliably, and at a greater scale.
            </p>
            <b>Discover what's new:</b>
            <ul>
                <li><a href="{{ relref . "/product/pulumi-deployments" }}">Pulumi Deployments</a>: groundbreaking advancements in Deployments-as-a-Service technology by Pulumi</li>
                <li>
                    <a href="{{ relref . "/templates" }}">Pulumi Templates</a>: new templates providing architecture-specific starting points for the most common infrastructure as
                    code use cases on AWS, Azure, and Google Cloud.
                </li>
                <li>
                    <a href="{{ relref . "/blog/pulumi-yaml-ga" }}">Pulumi YAML GA</a>: now Generally Available as part of its 1.0 release, enabling everyone in an organization to
                    use Pulumi to manage cloud infrastructure.
                </li>
                <li>
                    <a href="{{ relref . "/blog/project-config-mvp" }}">Project Level Configuration</a>: new support across all Pulumi languages makes it easier to manage complex
                    configurations as cloud projects scale up.
                </li>
            </ul>
        </div>
    </section>

    <div class="page-hero">
        <div class="dot-background-container">
            <div class="dot-background"></div>
        </div>
        <div class="dot-overlay"></div>
        <div class="page-hero-title">
            <h2 class="py-8">
                <span><span class="rainbow-text">Customer Stories</span></span>
            </h2>
        </div>
    </div>

    <section id="customer_stories" class="container mx-auto my-0">
        <div class="benefits-section relative">
            <div class="flex flex-wrap items-stretch justify-center">
                {{ range $item := .Params.customer_stories.items }}
                    <div class="w-full lg:w-1/2 p-4 my-2">
                        <div class="card h-full relative bg-white">
                            <div class="text-center flex flex-row justify-center relative">
                                <img class="mx-auto w-full rounded-t-xl" src="{{ $item.banner }}" />
                            </div>
                            <div class="px-8 py-8">
                                <div>
                                    <h5>{{ $item.title }}</h5>
                                </div>
                                <div class="description">
                                    <p>{{ $item.description | markdownify }}</p>
                                </div>
                                {{ if $item.link }}
                                    <div class="mt-8">
                                        <a href="{{ $item.link }}" class="btn-secondary">Watch Now</a>
                                    </div>
                                {{ end }}
                            </div>
                        </div>
                    </div>
                {{ end }}
            </div>
        </div>
    </section>

    <section id="recommended" class="min-w-full pb-16 pt-8 mt-8 bg-salmon-200">
        <div class="container mx-auto">
            <h3 class="text-center">{{ .Params.recommended.title }}</h3>
            <div class="flex flex-wrap flex-row justify-center">
                {{ range $item := .Params.recommended.items }}
                    <a href="{{ $item.link }}"><img class="h-64 p-8" src="{{ $item.image }}" /></a>
                {{ end }}
            </div>
        </div>
    </section>

    <section id="workshops" class="min-w-full py-8 bg-black">
        <div class="container mx-auto">
            <h3 class="text-center text-white">{{ .Params.workshops.title }}</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 p-1 bg-gradient-to-t from-fuchsia-600 to-orange-600">
                            <div class="card h-full relative bg-white">
                                <div class="px-8 py-8">
                                    <div>
                                        <h5>{{ $item.title }}</h5>
                                    </div>
                                    <div class="description">
                                        <p>{{ $item.description }}</p>
                                    </div>
                                    <div class="mt-8">
                                        <a href="{{ $item.link }}" target="_blank" class="btn-secondary btn-disabled">{{ $item.link_text }}</a>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                {{ end }}
            </div>
        </div>
    </section>

    <section id="social-media" class="min-w-full my-0 bg-salmon-600">
        <div class="container mx-auto py-8">
            <h4 class="text-center text-white">Join the Conversation</h4>
            <div class="text-center">
                <div class="text-center flex flex-row justify-center">
                    {{ range $item := .Params.media.items }}
                        <a href="{{ $item.link }}" class="mx-2">
                            <img src="{{ $item.image }}" alt="{{ $item.name }}" />
                        </a>
                    {{ end }}
                </div>
            </div>
        </div>
    </section>

    <section id="partner-logos" class="min-w-full mt-8 bg-white">
        <h3 class="text-center">Our Partners</h3>
        <div class="container mx-auto my-12 flex align-center justify-evenly">
            {{ range $item := .Params.partners.items }}
                <img class="object-contain h-16 mb-4" src="{{ $item.logo }}" alt="{{ $item.name }}" />
            {{ end }}
        </div>
    </section>

    <section id="speakers" class="my-8 pb-8 text-center min-w-full">
        <h3>Speakers</h3>
        <div class="flex flex-wrap justify-center mx-16">
            {{ range $speaker := .Params.speakers }}
                <div class="flex flex-col md:flex-row w-full md:w-1/3 items-center text-center md:text-left md:items-start mt-4 pr-4">
                    <div class="speaker-image lg:mr-2">
                        <img src="{{ $speaker.photo }}" alt="{{ $speaker.name }}" title="{{ $speaker.name }}" />
                    </div>
                    <div class="flex flex-col justify-center h-full">
                        <h5 class="ml-2">{{ $speaker.name }}</h5>
                        <p class="ml-2 my-0">{{ $speaker.title }}, {{ $speaker.company }}</p>
                    </div>
                </div>
            {{ end }}
        </div>
    </section>
{{ end }}