{{ define "hero" }}
    <header class="home-page-hero shadow">
        <div class="home-page-hero-background">
            <div class="flex">
                <div class="w-full lg:w-1/2 p-6 home-page-hero-text">
                    <h1 class="flex flex-col items-center">
                        <span class="inline-block" data-text="{{ index (.Params.hero.title) 0 }}">{{ index (.Params.hero.title) 0 }}</span>
                        <span class="rainbow-text inline-block text-center" data-text="{{ index (.Params.hero.title) 1 }}">{{ index (.Params.hero.title) 1 }}</span>
                    </h1>

                    <p class="text-center leading-7">{{ .Params.hero.description | markdownify }}</p>

                    <div class="relative z-10 overlay-middle mt-8 flex text-center justify-center items-center flex-col mx-auto lg:mx-0 md:flex-row">
                        <a class="home-hero-btn-primary mr-0 md:mr-4 mb-3 md:mb-0" href="{{ .Params.hero.cta_link }}">{{ .Params.hero.cta_text }}</a>
                        <a class="btn-secondary home-hero-btn-secondary rounded-full cursor-pointer" href="{{ .Params.hero.secondary_cta_link }}">{{ .Params.hero.secondary_cta_text }}</a>
                    </div>
                </div>

                <div class="hidden lg:block lg:w-1/2 p-6 flex justify-center align-center">
                    <img src="/images/home/dancing-music.svg" />
                </div>
            </div>
        </div>
    </header>
{{ end }}

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

    <!-- Logos carousel -->
    <section class="container mx-auto text-center overflow-hidden px-3 mt-6">
        <h3 class="text-center mb-4">{{ .Params.customer_logos.title }}</h3>

        <div class="w-full order-first pb-16 items-center justify-center hidden lg:block">
            <pulumi-swiper slides="6" centered-slides="true" loop="true" autoplay="true" autoplay-delay="500" speed="2000">
                {{ range $logo := .Params.customer_logos.logos }}
                    <pulumi-swipeable>
                        <div class="p-6 flex flex-col flex-grow items-end h-24 justify-center">
                            {{ if $logo.link }}
                                <a class="w-full h-full" href="{{ $logo.link }}" target="_blank">
                                    {{ partial "customer-logo.html" (dict "logo" $logo.name) }}
                                </a>
                            {{ else }}
                                {{ partial "customer-logo.html" (dict "logo" $logo.name) }}
                            {{ end }}
                        </div>
                    </pulumi-swipeable>
                {{ end }}
            </pulumi-swiper>
        </div>

        <div class="w-full order-first pb-16 items-center justify-center block lg:hidden">
            <pulumi-swiper slides="3" centered-slides="true" loop="true" autoplay="true" autoplay-delay="500" speed="2000">
                {{ range $logo := .Params.customer_logos.logos }}
                    <pulumi-swipeable>
                        <div class="p-6 flex flex-col flex-grow items-end h-24 justify-center">
                            {{ if $logo.link }}
                                <a class="w-full h-full" href="{{ $logo.link }}" target="_blank">
                                    {{ partial "customer-logo.html" (dict "logo" $logo.name) }}
                                </a>
                            {{ else }}
                                {{ partial "customer-logo.html" (dict "logo" $logo.name) }}
                            {{ end }}
                        </div>
                    </pulumi-swipeable>
                {{ end }}
            </pulumi-swiper>
        </div>
    </section>

    <!-- Code and ship faster -->
    <section class="mb-8 p-6 lg:px-0 relative home-page-section">
        <div class="home-page-build-section-background">
            <div class="home-page-build-section-image"></div>
        </div>

        <div class="container mx-auto z-10 relative">
            <div class="w-full lg:w-2/3 mx-auto">
                <div class="text-center">
                    <h3>{{ .Params.code_faster.title }}</h3>
                    <p class="text-lg">{{ .Params.code_faster.description | markdownify }}</p>
                    {{ range $item := .Params.code_faster.items }}
                        <h6>{{ $item.title }}</h6>
                        <p>{{ $item.description | markdownify }}</p>
                    {{ end }}
                </div>
                <div class="card bg-white shadow-xl p-6 block">
                    <div>
                        <pulumi-chooser type="language" options="typescript,python,go,csharp,java,yaml">
                            <pulumi-choosable type="language" class="highlight" value="typescript">
                                <img
                                    class="mx-auto w-full"
                                    src="/images/home/typescript.svg"
                                    alt="Pulumi code being written in TypeScript showing autocomplete for creating a new S3 bucket"
                                />
                            </pulumi-choosable>

                            <pulumi-choosable type="language" class="highlight" value="python">
                                <img class="mx-auto w-full" src="/images/home/python.svg" alt="Pulumi code being written in Python showing autocomplete for creating a new S3 bucket" />
                            </pulumi-choosable>

                            <pulumi-choosable type="language" class="highlight" value="go">
                                <img class="mx-auto w-full" src="/images/home/go.svg" alt="Pulumi code being written in GO showing autocomplete for creating a new S3 bucket" />
                            </pulumi-choosable>

                            <pulumi-choosable type="language" class="highlight" value="csharp">
                                <img class="mx-auto w-full" src="/images/home/c-sharp.svg" alt="Pulumi code being written in C# showing autocomplete for creating a new S3 bucket" />
                            </pulumi-choosable>

                            <pulumi-choosable type="language" class="highlight" value="java">
                                <img class="mx-auto w-full" src="/images/home/java.svg" alt="Pulumi code being written in Java showing autocomplete for creating a new S3 bucket" />
                            </pulumi-choosable>

                            <pulumi-choosable type="language" class="highlight" value="yaml">
                                <img class="mx-auto w-full" src="/images/home/yaml.svg" alt="Pulumi code being written in YAML showing autocomplete for creating a new S3 bucket" />
                            </pulumi-choosable>
                        </pulumi-chooser>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- Panther quote -->
    <section class="w-full md:w-2/3 lg:w-1/2 mx-auto mt-16 px-6">
        {{ partial "home/quote.html" (dict "quote" .Params.customer_quotes.panther) }}
    </section>

    <!-- Tame configuration and secrets sprawl -->
    <section class="py-12 lg:my-12 px-6 lg:px-0 relative home-page-section">
        <div class="home-page-manage-section-background">
            <div class="home-page-manage-section-image"></div>
        </div>

        <div class="container mx-auto z-10 relative">
            <div class="w-full lg:w-2/3 mx-auto">
                <div class="z-10 px-8">
                    <h3>{{ .Params.secrets.title }}</h3>
                    <p class="text-lg">{{ .Params.secrets.description | markdownify }}</p>
                    <div class="mt-8">
                        <span class="text-lg">Learn more: </span>
                        <a href="/product/esc" class="underline text-lg">Pulumi ESC<i class="fa fa-arrow-right ml-2"></i></a>
                    </div>
                </div>

                <div class="flex items-center justify-center mt-8">
                    <img src="{{ .Params.secrets.image }}" alt="{{ .Params.secrets.alt }}" class="card shadow-xl" />
                </div>
            </div>
        </div>
    </section>

    <!-- Starburst quote -->
    <section class="w-full md:w-2/3 lg:w-1/2 mx-auto mt-16 px-6">
        {{ partial "home/quote.html" (dict "quote" .Params.customer_quotes.starburst) }}
    </section>

    <!-- Embed IaC Anywhere -->
    <section class="py-12 lg:my-12 px-6 lg:px-0 relative home-page-section">
        <div class="home-page-cloud-section-background">
            <div class="home-page-cloud-section-image"></div>
        </div>

        <div class="container mx-auto z-10 relative">
            <div class="w-full lg:w-2/3 mx-auto">
                <div class="z-10 px-8">
                    <h3>{{ .Params.embed.title }}</h3>
                    <div class="text-lg text-black">{{ .Params.embed.description | markdownify }}</div>
                    <div class="mt-8">
                        <span class="text-lg">Learn more: </span>
                        <a href="/blog/developer-portal-platform-teams/" class="underline text-lg">Pulumi For Platfrom Teams<i class="fa fa-arrow-right ml-2"></i></a>
                    </div>
                </div>

                <div class="flex items-center justify-center mt-8 px-8">
                    <div class="card bg-white shadow-xl p-6">
                        <img src="{{ .Params.embed.image }}" alt="{{ .Params.embed.alt }}" />
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- Snowflake quote -->
    <section class="w-full md:w-2/3 lg:w-1/2 mx-auto mt-16 px-6">
        {{ partial "home/quote.html" (dict "quote" .Params.customer_quotes.snowflake) }}
    </section>

    <!-- Boost productivity with AI -->
    <section class="py-12 lg:my-12 px-6 lg:px-0 relative home-page-section">
        <div class="home-page-science-section-background">
            <div class="home-page-science-section-image"></div>
        </div>

        <div class="container mx-auto z-10 relative">
            <div class="card bg-white shadow-xl p-6 w-full lg:w-2/3 mx-auto">
                <div class="z-10 px-8">
                    <h3>{{ .Params.ai.title }}</h3>
                    <p class="text-lg">{{ .Params.ai.description | markdownify }}</p>
                    <div class="mt-8">
                        <span class="text-lg">Try it out: </span>
                        <a href="/ai/" class="underline text-lg">Pulumi AI<i class="fa fa-arrow-right ml-2"></i></a>
                    </div>
                </div>

                <div class="flex items-center justify-center mt-8 w-full">
                    <div class="w-full">
                        <pulumi-chooser type="language" options="typescript,python,go,csharp,java,yaml">
                            <pulumi-choosable type="language" class="highlight" value="typescript">
                                <img
                                    class="mx-auto w-full"
                                    src="/images/home/ai-ts.svg"
                                    alt="AI prompted to 'Give me an AWS static website behind a CloudFront CDN' and outputting Pulumi code in TypeScript"
                                />
                            </pulumi-choosable>

                            <pulumi-choosable type="language" class="highlight" value="python">
                                <img
                                    class="mx-auto w-full"
                                    src="/images/home/ai-python.svg"
                                    alt="AI prompted to 'Give me an AWS static website behind a CloudFront CDN' and outputting Pulumi code in Python"
                                />
                            </pulumi-choosable>

                            <pulumi-choosable type="language" class="highlight" value="go">
                                <img
                                    class="mx-auto w-full"
                                    src="/images/home/ai-go.svg"
                                    alt="AI prompted to 'Give me an AWS static website behind a CloudFront CDN' and outputting Pulumi code in GO"
                                />
                            </pulumi-choosable>

                            <pulumi-choosable type="language" class="highlight" value="csharp">
                                <img
                                    class="mx-auto w-full"
                                    src="/images/home/ai-csharp.svg"
                                    alt="AI prompted to 'Give me an AWS static website behind a CloudFront CDN' and outputting Pulumi code in C#"
                                />
                            </pulumi-choosable>

                            <pulumi-choosable type="language" class="highlight" value="java">
                                <img
                                    class="mx-auto w-full"
                                    src="/images/home/ai-java.svg"
                                    alt="AI prompted to 'Give me an AWS static website behind a CloudFront CDN' and outputting Pulumi code in Java"
                                />
                            </pulumi-choosable>

                            <pulumi-choosable type="language" class="highlight" value="yaml">
                                <img
                                    class="mx-auto w-full"
                                    src="/images/home/ai-yaml.svg"
                                    alt="AI prompted to 'Give me an AWS static website behind a CloudFront CDN' and outputting Pulumi code in YAML"
                                />
                            </pulumi-choosable>
                        </pulumi-chooser>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- Built by engineers + tweets -->
    <section class="mt-16 mb-36 relative flex flex-col">
        <div class="container mx-auto px-3 overflow-hidden lg:overflow-visible">
            <div class="w-full bg-violet-600 rounded-xl shadow p-16 lg:pb-56 align-top">
                <h2 class="text-white text-center">Built by engineers for engineers. Open source.</h2>
                <div class="flex flex-col lg:flex-row items-center justify-center mb-4">
                    <a class="text-white text-lg bold underline flex self-start lg:self-auto mt-4 lg:mt-0 mx-auto lg:mx-0 lg:pr-1" href="https://slack.pulumi.com/"
                        >Join our community,
                    </a>
                    <p class="text-white text-lg mx-auto my-0 lg:mx-0 lg:my-auto">and let’s build together.</p>
                </div>
            </div>

            <div class="w-full order-first lg:hidden">
                <pulumi-swiper slides="1" centered-slides="true" initial-slide="3" loop="true" autoplay="true" autoplay-delay="5000" speed="1000">
                    {{ range $tweet := .Params.get_started.tweets }}
                        <pulumi-swipeable>
                            <div class="w-full px-4">
                                <div class="flex flex-col card p-6 bg-white">
                                    <p class="text-left mt-0 overflow-hidden">{{ $tweet.text }}</p>
                                    <div class="flex flex-grow items-end">
                                        <div>
                                            <img class="rounded-full w-12 h-12" src="{{ $tweet.avatar }}" />
                                        </div>
                                        <p class="ml-4 text-gray-600">{{ $tweet.username }}</p>
                                        <div class="flex-grow flex justify-end my-4">
                                            <img src="/logos/tech/twitter.svg" alt="Twitter" />
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </pulumi-swipeable>
                    {{ end }}
                </pulumi-swiper>
            </div>
            <div class="large-container mx-auto absolute -bottom-12 left-0 pt-12 hidden lg:block">
                <pulumi-swiper slides="3" centered-slides="true" initial-slide="3" loop="true" autoplay="true" autoplay-delay="4000" speed="1000">
                    {{ range $tweet := .Params.get_started.tweets }}
                        <pulumi-swipeable>
                            <div class="w-full px-4 text-left">
                                <div class="flex flex-col card p-6 bg-white h-60">
                                    <p class="flex-grow mt-0">{{ $tweet.text }}</p>
                                    <div class="flex items-center w-full pb-1">
                                        <a href="{{ $tweet.link }}" target="_blank" rel="noopener noreferrer">
                                            <!-- If the browser fails to load the Twitter avatar, just hide it. -->
                                            <div class="rounded-full border-none w-12 h-12 mr-4 overflow-hidden">
                                                <img src="{{ $tweet.avatar }}" onerror="$(this).hide();" />
                                            </div>
                                        </a>
                                        <a href="{{ $tweet.link }}" class="flex-grow text-gray-600 hover:text-gray-600 hover:underline" target="_blank" rel="noopener noreferrer">
                                            {{ $tweet.username }}
                                        </a>

                                        {{ if eq $tweet.source "twitter" }}
                                            <img class="w-8 h-8" src="/logos/tech/twitter.svg" alt="Twitter" />
                                        {{ end }}

                                        {{ if eq $tweet.source "reddit" }}
                                            <img class="w-8 h-8" src="/logos/tech/reddit.svg" alt="Reddit" />
                                        {{ end }}

                                        {{ if eq $tweet.source "linkedin" }}
                                            <img class="w-8 h-8" src="/logos/tech/linkedin.svg" alt="LinkedIn" />
                                        {{ end }}

                                        {{ if eq $tweet.source "blog" }}
                                            <i class="fas fa-blog text-gray-500 text-2xl"></i>
                                        {{ end }}
                                    </div>
                                </div>
                            </div>
                        </pulumi-swipeable>
                    {{ end }}
                </pulumi-swiper>
            </div>
        </div>
    </section>

    <!-- CTAs -->
    <section class="container mx-auto my-24 px-6">
        <div class="flex justify-center">
            <div class="card ready-cta w-full rounded-xl p-1 gradient">
                <div class="flex justify-center rounded-xl bg-purple-100">
                    <div class="p-8 md:p-16 lg:pt-28 lg:pb-28 inline-flex flex-col items-center">
                        <h2 class="mb-12 text-center">Ready to try Pulumi?</h2>
                        <div class="flex flex-col lg:flex-row self-stretch items-center lg:justify-between">
                            <div class="flex flex-col justify-center align-center text-center lg:ml-14 lg:mr-4 mb-14 lg:mb-0 z-0">
                                <a href="/docs/get-started/" class="btn-primary py-3">Get Started</a>
                                <p class="text-xs pt-1 my-0">Follow the step-by-step guide</p>
                            </div>
                            <div class="flex flex-col justify-center align-center text-center lg:mr-14 lg:ml-4">
                                <a href="docs/install/" class="btn-secondary py-3 px-6 whitespace-nowrap">Download Open Source</a>
                                <p class="text-xs pt-1 my-0">Download our open source SDK</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
{{ end }}