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


    <div class="banner-image flex justify-center">
        <div class="text-center py-16">
            <img src="/images/pulumiup-2023/logo.svg" alt="Pulumi UP, virtual, free" class="mx-auto mt-16 h-40" />
            <h3 class="yellow-header-text">June 15, 2023</h3>
            <div class="banner-description mx-auto mb-12 w-1/2">
                <h4>The Global Infrastructure as Code Conference</h4>
                <p>
                    Join us virtually for a half-day of technical talks, best practices, and demos about the latest innovations in Infrastructure as Code, cloud application
                    development, and software engineering.
                </p>
            </div>
            <a class="btn-primary btn-primary-blue-bg" href="https://www.youtube.com/playlist?list=PLyy8Vx2ZoWlqkEzXbjUvE_CoEmBkT9Xoe" target="_blank">Watch On-Demand</a>
        </div>
    </div>

    <div class="below-banner-description mx-auto px-8 my-10 w-full flex-col">
        <h4>The Global Infrastructure as Code Conference</h4>
        <p>
            Join us virtually for a half-day of technical talks, best practices, and demos about the latest innovations in Infrastructure as Code, cloud application development,
            and software engineering.
        </p>
    </div>

    <section id="ai-panel" class="mb-12">
        <div class="container mx-auto text-center">
            <h2 class="text-center">AI and the Future of Cloud Development</h2>
            <p class="text-center mb-8">
                Get ready for the future of cloud development! Listen to industry experts in our unfiltered panel discussion on how AI is transforming the cloud native landscape.
                Stay ahead of the curve by hearing and learning from the best in the industry.
            </p>
            <div class="container justify-center flex flex-col lg:flex-row">
                {{ range .Params.panelists }}
                    <div class="mx-2 flex flex-row lg:flex-col my-2">
                        <img src="{{ .image }}" class="rounded-l-md lg:rounded-b-none lg:rounded-t-md" style="height: 220px; width: 220px;" />
                        <div class="light-blue-background w-full px-4 py-2 rounded-r-md lg:rounded-t-none lg:rounded-b-md text-left">
                            <h6>{{ .name }}</h6>
                            <p class="text-sm text-black my-2 flex-wrap">{{ .position }}</p>
                            <p class="text-sm text-black my-2">{{ .company }}</p>
                            <div class="flex flex-row my-4">
                                {{ range .socials }}
                                    <a href="{{ .link }}" target="_blank">
                                        <img src="/logos/tech/{{ .site }}.svg" alt="{{ .site }}" class="mr-2" href="{{ .link }}" />
                                    </a>
                                {{ end }}
                            </div>
                        </div>
                    </div>
                {{ end }}
            </div>
            <h6 class="py-4">Be a part of shaping the future of cloud infrastructure!</h6>
            <a class="btn-primary" href="https://www.youtube.com/playlist?list=PLyy8Vx2ZoWlqkEzXbjUvE_CoEmBkT9Xoe" target="_blank">Watch On-Demand</a>
        </div>
    </section>

    <section id="personas" class="light-blue-background">
        <div class="container mx-auto px-4 py-8 text-center">
            <h2>A MUST attend for...</h2>
            <div class="mx-auto py-4 flex flex-col lg:flex-row">
                {{ range .Params.personas.groups }}
                    <div class="w-full lg:w-1/4 flex flex-row lg:flex-col">
                        {{ range .items }}
                            <div class="flex flex-col lg:flex-row px-12 my-4">
                                <div class="w-14 flex justify-center"><img src="{{ .image }}" /></div>
                                <div class="flex-col lg:px-8 text-left">
                                    <p class="text-sm text-black text-left">{{ .name }}</p>
                                </div>
                            </div>
                        {{ end }}
                    </div>
                {{ end }}
            </div>
            <a class="btn-primary btn-primary-blue-bg" href="#schedule">See the Agenda</a>
        </div>
    </section>

    <section id="dev-stories" style="background: linear-gradient(180deg, #7BDEFF, #DBF4E4 100%);">
        <div class="container mx-auto px-4 pb-16 text-center">
            <h2>DevStories and Demos</h2>
            <p class="text-lg">
                PulumiUP isn't just another developer conference. Our brilliant speakers are engineers like you, who tackled challenges, successfully implemented solutions, and
                some even founded their own companies. Listen to their stories, their ideas, be inspired and learn from the best.
            </p>
            <div class="container flex flex-wrap justify-center">
                {{ range .Params.stories }}
                    <div class="p-2 w-full lg:w-1/2">
                        <div class="card mx-auto h-full bg-white p-4 flex">
                            <div class="w-full lg:w-1/3 flex-col">
                                <img class="w-full" src="{{ .photo }}" alt="{{ .name }}" />
                            </div>
                            <div class="w-full lg:w-2/3 pl-2 text-left">
                                <p class="text-md font-semibold my-0">{{ .title }}</p>
                                <p class="text-sm text-gray-600 my-2">{{ .description }}</p>
                                <div class="text-md my-2">{{ .name }}</div>
                                <div class="text-sm text-gray-700 my-2">{{ .position }}</div>
                                <img class="h-5 my-2" src="{{ .logo }}" alt="{{ .company }}" />
                            </div>
                        </div>
                    </div>
                {{ end }}
            </div>
            <h6 class="py-4">Don't miss out on this opportunity to improve your knowledge and skills in cloud infrastructure.</h6>
            <a class="btn-primary" href="https://www.youtube.com/playlist?list=PLyy8Vx2ZoWlqkEzXbjUvE_CoEmBkT9Xoe" target="_blank">Watch On-Demand</a>
        </div>
    </section>

    <section id="workshops" style="background: linear-gradient(180deg, #DBF4E4 0%, #7BDEFF 100%);">
        <div class="container mx-auto py-16">
            <h2 class="px-4 pb-8">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-white p-6 text-black h-full">
                            <h5>{{ .title }}</h5>
                            <span class="my-0 py-1 inline-block mr-3 text-gray-600">
                                <i class="fas fa-calendar mr-2"></i>
                                {{ .date }}
                            </span>
                            <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>
        </div>
    </section>

    <section id="why-attend" class="my-8 lg:my-16">
        <div class="container mx-auto">
            <h2 class="pl-8">Why Attend</h2>
            <div class="px-4 py-8 text-center flex flex-col lg:flex-row">
                <div class="w-full lg:w-1/2 p-4 text-left">
                    {{ .Params.why_attend.description | markdownify }}
                    <div class="my-12 flex justify-center lg:justify-start">
                        <a class="btn-primary" href="https://www.youtube.com/playlist?list=PLyy8Vx2ZoWlqkEzXbjUvE_CoEmBkT9Xoe" target="_blank">Watch On-Demand</a>
                    </div>
                </div>
                <div class="w-full lg:w-1/2 px-8">
                    {{ range .Params.why_attend.items }}
                        <div class="flex flex-col lg:flex-row px-4">
                            <img src="{{ .icon }}" class="hidden lg:block" />
                            <img src="{{ .icon }}" class="block lg:hidden w-14" />
                            <div class="flex-col lg:px-8 text-left">
                                <p class="text-xl font-bold text-left">{{ .title }}</p>
                                <p>{{ .description }}</p>
                            </div>
                        </div>
                    {{ end }}
                </div>
            </div>
        </div>
    </section>

    {{ partial "event-schedule.html" (dict "schedule" .Params.schedule "background_color" "#7bdeff") }}


    <section id="speakers" class="relative mb-8">
        <div class="dot-background-container">
            <div class="dot-background"></div>
        </div>
        <div class="dot-overlay"></div>

        <div class="w-full py-8" style="background-color:rgba(255,255,255,.8)">
            <div class="container mx-auto text-center">
                <h2 class="mb-8 text-center">Speakers</h2>
                <ul class="inline-flex flex-wrap list-none justify-center p-0 gap-x-8 gap-y-6">
                    {{ range .Params.speakers }}
                        <li class="about-card border-2 border-gray-300 bg-white rounded-md flex overflow-hidden relative">
                            <div class="flex">
                                <img class="about-card-photo" src="{{ .image }}" alt="{{ .name }}" />
                                <div class="flex flex-col w-full justify-center text-left ml-4">
                                    <div class="font-display font-medium text-gray-900 text-2xl mb-3">{{ .name }}</div>
                                    <div class="text-sm text-gray-700 mb-3">{{ .title }}</div>
                                    <img class="h-5 self-start" src="{{ .logo }}" alt="{{ .company }}" />
                                </div>
                            </div>
                        </li>
                    {{ end }}
                </ul>
            </div>
            <div class="my-16 flex justify-center">
                <a class="btn-primary btn-primary-blue-bg" href="https://www.youtube.com/playlist?list=PLyy8Vx2ZoWlqkEzXbjUvE_CoEmBkT9Xoe" target="_blank">Watch On-Demand</a>
            </div>
        </div>
    </section>

    <section id="sponsors" class="my-0 mb-16 py-4 lg:py-12 overflow-hidden px-3 white-background">
        <div class="container mx-auto text-center">
            <h2 class="text-center mb-10 hidden lg:block">{{ .Params.customer_logos.title }}</h2>
            <h6 class="text-center lg:hidden">{{ .Params.customer_logos.title }}</h6>
            {{ range $row := .Params.customer_logos.rows }}
                <div class="flex flex-wrap items-center justify-center">
                    {{ range $logo := $row.logos }}
                        <div class="w-3/4 lg:w-1/6 p-4 lg:p-10">
                            <a href="{{ $logo.link }}"><img class="w-full" src="/images/pulumiup-2023/sponsors/{{ $logo.logo }}" /></a>
                        </div>
                    {{ end }}
                </div>
            {{ end }}
        </div>
    </section>

    <!-- script for formcomplete -->
    <script>
        (function () {
            window._zi = { formId: "88e44d71-8b92-4b93-9aa9-6d6650e38250", formLoadTimeout: 4000 };
            var zi = document.createElement("script");
            zi.type = "text/javascript";
            zi.async = true;
            zi.src = "https://ws-assets.zoominfo.com/formcomplete.js";
            var s = document.getElementsByTagName("script")[0];
            s.parentNode.insertBefore(zi, s);
        })();
    </script>
{{ end }}