{{ define "main" }}
    {{ $pageContext := . }}


    <section id="overview" class="star-wars overflow-hidden">
        <div class="h-full flex justify-center items-center">
            <div class="title-animation">
                <p class="title-part">Pulumi</p>
                <div class="subtitle">The Cloud Awakens</div>
                <p class="title-part">Up</p>
            </div>
        </div>

        <div class="fade"></div>
        <div class="crawl">
            <div class="title">
                <p>PulumiUP</p>
                <h1>The Cloud Awakens</h1>
            </div>

            <p class="mb-24">
                Frustration brought on by vast complexity has engulfed the cloud community. With hundreds of cloud providers, thousands of services, and almost unlimited ways to
                interact with those services, Cloud Engineers are faced with an almost impossible task.
            </p>

            <p>
                While Tech Twitter endlessly debates the correct approach to ease complexity, Pulumi has secretly dispatched a platypus, the guardian of simplicity and productivity
                in the cloud, to settle the debate....
            </p>
        </div>
    </section>

    <section id="register" class="container mx-auto text-center mt-8 px-6 lg:px-0">
        <div class="w-5/6 lg:max-w-2xl mx-auto text-center">
            <div class="pulumiup-overview-date-block">
                <p class="text-black">MAY 4 - 5, 2022 <span class="font-normal">|</span> ONLINE</p>
            </div>
        </div>

        <div class="max-w-2xl mx-auto">
            <p>May the fourth be with the cloud community.</p>

            <p>PulumiUP is a free, virtual conference open to all interested in cloud engineering, cloud infrastructure, software development, modern applications, or Pulumi.</p>

            <p>
                Whether you're a seasoned cloud engineer or just curious to learn about cloud engineering, at PulumiUP you can hear industry leaders and attend guest sessions,
                demos, and panel sessions.
            </p>
        </div>

        <div class="mt-8 h-24">
            <a class="btn-primary" href="https://www.youtube.com/playlist?list=PLyy8Vx2ZoWlpcvhSsUXdT5CXjRwAaM_My" target="_blank" rel="noopener noreferrer">Watch now</a>
        </div>

        <div class="date-countdown-container">
            <div class="card bg-white inline-block mx-auto p-3">
                <div class="date-countdown flex items-center lg:items-end">
                    <img class="h-28" src="/logos/brand/twitter-summary.png" alt="Pulumi" />
                    <pulumi-date-countdown
                        date-string="{{ .Params.event_date }}"
                        value-label-class="block font-normal text-xl"
                        container-class="flex flex-wrap justify-center items-center"
                        text-class="px-3 text-5xl font-bold m-0 mb-2"
                    >
                    </pulumi-date-countdown>
                </div>
            </div>
        </div>
    </section>

    <section id="sessions" class="white-background">
        <div class="container mx-auto py-24">
            <h2 class="text-black px-6">Innovation & Future-Forward Thoughts on Cloud</h2>

            <div class="flex flex-wrap justify-center items-stretch">
                {{ $registrationData := .Params.registration.main }}
                {{ $people := .Site.Data.team.team }}
                {{ range .Params.sessions }}
                    <div class="w-full lg:w-1/2 p-3">
                        <div class="card h-full bg-white overflow-hidden">
                            <div class="flex flex-col h-full pb-3">
                                <div class="bg-black w-full p-6 pb-3">
                                    <div class="w-full lg:h-full">
                                        <div class="flex justify-center items-start">
                                            {{ range $presenter := .presenters }}
                                                {{ $presenterData := index $people $presenter }}
                                                <div class="w-1/4 pr-2">
                                                    <img
                                                        class="rounded-md"
                                                        src="/images/team/{{ $presenter }}.jpg"
                                                        alt="{{ $presenterData.name }}"
                                                        title="{{ $presenterData.name }}"
                                                    />
                                                    <div class="text-white text-sm text-center mt-2">
                                                        {{ $presenterData.name }}
                                                    </div>
                                                </div>
                                            {{ end }}
                                        </div>
                                    </div>
                                </div>

                                <div class="flex flex-col h-full p-6">
                                    <h5 class="mt-0 mt-4">
                                        {{ .title }}
                                    </h5>
                                    <p>
                                        {{ .description }}
                                    </p>
                                    <div class="flex-grow text-center mt-8 flex justify-center items-end">
                                        <a
                                            class="btn-secondary"
                                            href="https://www.youtube.com/playlist?list=PLyy8Vx2ZoWlpcvhSsUXdT5CXjRwAaM_My"
                                            target="_blank"
                                            rel="noopener noreferrer"
                                            >Watch now</a
                                        >
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                {{ end }}
            </div>
        </div>
    </section>

    <section id="workshops" class="container mx-auto py-16">
        <h2>Workshops</h2>

        <div class="flex flex-wrap justify-center items-stretch">
            {{ range .Params.workshops }}
                <div class="w-full lg:w-1/2 p-3">
                    <div class="card bg-gray-800 p-6 text-black h-full">
                        <h3>{{ .title }}</h3>
                        <p>{{ .description }}</p>
                        <div class="my-8">
                            <a href="{{ .url }}" class="btn-secondary">
                                <span class="text-violet-600">Register Now &#8594;</span>
                            </a>
                        </div>
                    </div>
                </div>
            {{ end }}
        </div>
    </section>

    <section id="why" class="why-attend text-center container mx-auto py-24 px-6 lg:px-0">
        <h2>Why Attend</h2>
        <p>Get ready to be inspired, challenged, and transformed. Learn from experts and success stories about early adopters.</p>

        <div class="flex flex-col lg:flex-row">
            <div class="w-full lg:w-1/3 px-8 mt-8 lg:mb-0">
                {{ partial "color-icon.html" (dict "icon" "lightning" "icon_color" "yellow") }}
                <p class="key-feature-description">
                    Learn from cloud engineering experts about how they manage and solve frustrations with handling cloud complexity all the way from cloud native applications to
                    structuring engineering orgs to be productive with the cloud.
                </p>
            </div>

            <div class="w-full lg:w-1/3 px-8 mt-8 lg:mb-0">
                {{ partial "color-icon.html" (dict "icon" "lock" "icon_color" "purple") }}
                <p class="key-feature-description">
                    Unlock the power of the cloud with thought-provoking presentations that are designed to help you transform your organization, your business, and yourself.
                    Access open source code on Github and get involved with the community.
                </p>
            </div>

            <div class="w-full lg:w-1/3 px-8 mt-8 lg:mb-0">
                {{ partial "color-icon.html" (dict "icon" "rocketship" "icon_color" "salmon") }}
                <p class="key-feature-description">
                    You will learn how top-performing cloud engineering teams and organizations are leveraging the cloud to drive remarkable success and how to implement their
                    techniques within your own organization or team.
                </p>
            </div>
        </div>

        <div class="mt-16 text-center">
            <a class="btn-primary" href="https://www.youtube.com/playlist?list=PLyy8Vx2ZoWlpcvhSsUXdT5CXjRwAaM_My" target="_blank" rel="noopener noreferrer">Watch now</a>
        </div>

        <div class="py-16">
            <div class="max-w-3xl card white-background mx-auto p-6 text-left">
                <h3>Who Should Attend</h3>
                <p>Business leaders, engineering managers, developers, and anyone who is interested in learning more about the cloud and cloud engineering.</p>

                <ul>
                    <li>Infrastructure and platform engineers</li>
                    <li>Software engineers and developers</li>
                    <li>Solutions architects</li>
                    <li>Technical leaders (CIOs, CTOs, VPs, Directors)</li>
                    <li>Everyone else interested in cloud engineering</li>
                </ul>
            </div>
        </div>
    </section>

    <section class="my-0 mb-16 py-12 overflow-hidden px-3 white-background">
        <div class="container mx-auto text-center">
            <h3 class="text-center mb-10 hidden lg:block">{{ .Params.customer_logos.title }}</h3>
            <h6 class="text-center mb-10 lg:hidden">{{ .Params.customer_logos.title }}</h6>
            <div class="flex flex-wrap items-center justify-center">
                {{ range $logo := .Params.customer_logos.logos }}
                    <div class="w-3/4 lg:w-1/6 p-10">
                        {{ $imgClass := "w-full" }}
                        {{ if eq $logo "aws-logo.svg" }}
                            {{ $imgClass = "w-2/3 mx-auto" }}
                        {{ end }}


                        <img class="{{ $imgClass }}" src="/images/pulumiup/sponsors/{{ $logo }}" />
                    </div>
                {{ end }}
            </div>
        </div>
    </section>

    <section id="schedule" class="container mx-auto py-16 px-6 lg:px-0">
        <h2>Schedule At A Glance</h2>
        <p>Time not work for you? Register and we'll share the on-demand version when its available.</p>

        {{ range .Params.schedule_overview }}
            <div class="flex flex-wrap my-8">
                <div class="w-full lg:w-1/4 border-b lg:border-b-0 lg:border-r border-white">
                    <p class="text-3xl">{{ .day }}</p>
                    <p>{{ .time }}</p>
                    <p></p>
                </div>

                <div class="w-full lg:w-3/4 lg:pl-6">
                    <p class="text-3xl">{{ .title }}</p>
                    <p>
                        {{ .description | markdownify }}
                    </p>
                </div>
            </div>
        {{ end }}
    </section>

    <section id="about-pulumi" class="white-background py-16">
        <div class="max-w-4xl mx-auto px-6">
            <h2>About Pulumi</h2>

            <p>
                Pulumi's cloud engineering platform brings infrastructure, developer, and security teams together through a unified software engineering process that tames cloud
                complexity and accelerates innovation. Using the Pulumi platform, teams can build, deploy, and manage modern cloud applications faster and with more confidence,
                using any language, any architecture and any cloud. Pulumi lets teams build Universal Infrastructure as Code using popular programming languages (Python,
                JavaScript, TypeScript, Go, .NET/C#, Java) and markup languages (YAML, JSON, CUE). It enables deploying infrastructure and applications together through a unified
                delivery process. Finally, teams can manage cloud applications with Policy as Code, better visibility, and controls.
            </p>

            <div class="mt-8">
                <a class="btn-primary" href="https://www.youtube.com/playlist?list=PLyy8Vx2ZoWlpcvhSsUXdT5CXjRwAaM_My" target="_blank" rel="noopener noreferrer">Watch now</a>
            </div>
        </div>
    </section>

    <section id="ctas" class="container mx-auto py-16">
        <div class="flex flex-wrap items-stretch">
            <div class="w-full lg:w-1/2 p-3">
                <div class="h-full card white-background p-6">
                    <h3>Connect with Peers on GitHub</h3>
                    <p class="mb-8">Pulumi open source code is available to all. Explore what we are working on and interact with the community.</p>
                    <a href="https://github.com/pulumi/pulumi" target="_blank" rel="noopener noreferrer" class="btn-primary">github.com/pulumi</a>
                </div>
            </div>

            <div class="w-full lg:w-1/2 p-3">
                <div class="h-full card white-background p-6">
                    <h3>Live Q&A with Pulumi DAs</h3>
                    <p class="mb-8">Ask questions when then conference is happening, get answers, and join discussions.</p>
                    <a href="https://twitter.com/hashtag/PulumiUP" target="_blank" rel="noopener noreferrer" class="btn-primary">#PulumiUP</a>
                </div>
            </div>
        </div>
    </section>
{{ end }}