{{ define "hero" }}
    <header class="home-page-hero">
        <div class="dot-background-container pointer-events-none">
            <div class="dot-background"></div>
        </div>
        <div class="dot-overlay"></div>
        <div class="home-page-hero-content pb-12">
            <h1 class="flex flex-col items-center">
                <span class="rainbow-text inline-block text-center">Pulumi ESC</span>
            </h1>
            <p class="text-center leading-7">Environments, Secrets, and Configuration</p>
        </div>
    </header>
{{ end }}

{{ define "main" }}
    {{ $pageContext := . }}
    <section id="overview" class="container mx-auto my-16 lg:mt-16 lg:mb-8 px-6">
        <div class="lg:flex">
            <div class="lg:w-1/2 lg:order-last mb-8 lg:mb-0 relative h-full">
                <div class="rounded-xl shadow-2xl relative h-0 overflow-hidden" style="padding-bottom: 50.25%;">
                    <iframe
                        src="https://www.youtube.com/embed/MtV_LPZKNP8?si=y2G2NXlrKBQSLGUd?rel=0"
                        style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; border:0;"
                        allowfullscreen=""
                        title="Pulumi ESC Introduction"
                        srcdoc="<style>*{padding:0;margin:0;overflow:hidden}html,body{height:100%}img{position:absolute;width:100%;top:0;bottom:0;margin:auto}</style><a href=https://www.youtube.com/embed/MtV_LPZKNP8?si=y2G2NXlrKBQSLGUd?autoplay=1><img src='/images/video-cards/esc-intro.png' alt='Introducing Pulumi ESC: Environments, Secrets, and Configuration'></a>"
                    ></iframe>
                </div>
            </div>
            <div class="lg:w-1/2 lg:pr-16">
                <h3>Centralized environments, secrets, and configuration management for cloud applications and infrastructure</h3>
                <p>
                    Today’s cloud environments access a multitude of configurations – including network settings, deployment options, API Keys, and other important secrets like database credentials –  from many different types of cloud infrastructure and SaaS services. Every team stores configuration settings like these in different locations, from secrets managers to plaintext files. This sprawl results in uncontrolled and untraceable configurations, causing operational bottlenecks, outages due to human error, and security breaches. Pulumi ESC enables you to centrally manage all configuration and secrets across your organization.
                </p>
                <div class="my-8">
                    <a class="btn-primary" href="/docs/pulumi-cloud/esc/get-started/">Get Started</a>
                </div>
            </div>
        </div>
    </section>

    <section id="benefits" class="container mx-auto text-center my-16 px-6">
        <div class="max-w-5xl mx-auto text-center px-6">
            <h2>Benefits of Pulumi ESC</h2>
        </div>
        <div class="flex flex-wrap justify-content items-stretch text-left my-4">
            {{ range $item := .Params.benefits.items }}
                <div class="w-full lg:w-1/3 p-3">
                    <div class="h-full card bg-white p-12">
                        <div class="icon-section mb-8 text-center">
                            {{ partial "color-icon.html" (dict "icon" $item.icon "icon_color" $item.icon_color) }}
                        </div>
                        <div>
                            <h5>{{ $item.title }}</h5>
                        </div>
                        <div class="mt-6">
                            <p>{{ $item.description | markdownify }}</p>
                        </div>
                    </div>
                </div>
            {{ end }}
        </div>
    </section>

    <section id="info-graphic" class="container mx-auto my-16">
        <div class="max-w-5xl mx-auto text-center px-6">
            <h2>How Pulumi ESC works</h2>
        </div>
        <div class="rounded-xl bg-white mb-4">
            <img class="block z-10" src="/images/product/esc-diagram.png" alt="Pulumi ESC architecture diagram" />
        </div>
        <div class="flex flex-wrap justify-content items-stretch text-left my-4">
            {{ range $item := .Params.diagram.items }}
                <div class="w-full lg:w-1/4 p-2">
                    <div class="h-full card bg-white p-4">
                        <div class="icon-section mb-8">
                            <img src="/images/product/esc-legend-{{ $item.number }}.svg" alt="#{{ $item.number }}" />
                        </div>
                        <div class="mt-6">
                            <p>{{ $item.description }}</p>
                        </div>
                    </div>
                </div>
            {{ end }}
        </div>
    </section>

    <section id="screenshot" class="container mx-auto my-16">
        <div class="max-w-5xl mx-auto text-center py-8">
            <h2>Centrally manage all environments</h2>
        </div>
        <div class="flex flex-wrap items-stretch">
            <div class="w-full lg:w-3/4">
                <img src="/images/product/esc-screenshot.png" alt="screenshot of Pulumi ESC management console" />
            </div>
            <div class="w-full lg:w-1/4 p-4">
                {{ range $item := .Params.screenshot.items }}
                    <div class="card bg-white p-4 my-4">
                        <div>
                            <h5>{{ $item.title }}</h5>
                        </div>
                        <div class="mt-6">
                            <p>{{ $item.description }}</p>
                        </div>
                    </div>
                {{ end }}
            </div>
        </div>
    </section>

    <section id="screenshot" class="container mx-auto my-16">
        <div class="max-w-5xl mx-auto text-center pb-4">
            <h2>Natively integrated with your infrastructure</h2>
        </div>
        <div class="hidden lg:block">
            <div class="flex flex-wrap justify-content items-stretch text-left my-2">
                <div class="w-1/2 p-4">
                    <div class="h-full card bg-white p-12">
                        <div class="icon-section mb-8">
                            {{ partial "color-icon.html" (dict "icon" "lock" "icon_color" "salmon") }}
                        </div>
                        <div>
                            <h5>Use any secrets source</h5>
                        </div>
                        <div class="mt-6">
                            <p>Pull configuration and secrets from any source, static or dynamic. Seamlessly adopt industry best practices of using short-lived, dynamic secrets that are more secure. </p>
                        </div>
                    </div>
                </div>
                <div class="w-1/2 p-4">
                    <div class="h-full card bg-white p-12">
                        <div class="icon-section mb-8">
                            {{ partial "color-icon.html" (dict "icon" "security" "icon_color" "purple") }}
                        </div>
                        <div>
                            <h5>Access from anywhere</h5>
                        </div>
                        <div class="mt-6">
                            <p>Consume configuration and secrets in an environment from any application or tool. You can use ESC for all your configuration and secrets needs independently of Pulumi’s core infrastructure as code offerings.  </p>
                        </div>
                    </div>
                </div>
            </div>
            <div class="flex flex-wrap justify-content items-stretch text-left my-2">
                <div class="w-1/2 p-4">
                    <img src="/images/product/esc-secrets-sources.png" alt="Secret sources examples" />
                </div>
                <div class="w-1/2 p-4">
                    <img src="/images/product/esc-execution-environments.png" alt="Exectution environments examples" />
                </div>
            </div>
        </div>
        <div class="block lg:hidden">
            <div class="w-full p-4">
                <div class="h-full card bg-white p-12">
                    <div class="icon-section mb-8">
                        {{ partial "color-icon.html" (dict "icon" "lock" "icon_color" "salmon") }}
                    </div>
                    <div>
                        <h5>Use any secrets source</h5>
                    </div>
                    <div class="mt-6">
                        <p>Pull configuration and secrets from any source, static or dynamic. Seamlessly adopt industry best practices of using short-lived, dynamic secrets that are more secure. </p>
                    </div>
                </div>
            </div>
            <div class="w-full p-4 mb-4">
                <div class="">
                    <img src="/images/product/esc-secrets-sources.png" alt="Secret sources examples" />
                </div>
            </div>
            <div class="w-full p-4">
                <div class="h-full card bg-white p-12">
                    <div class="icon-section mb-8">
                        {{ partial "color-icon.html" (dict "icon" "security" "icon_color" "purple") }}
                    </div>
                    <div>
                        <h5>Access from anywhere</h5>
                    </div>
                    <div class="mt-6">
                        <p>Consume configuration and secrets in any environment and from any application or tool. You can use Pulumi ESC for all your configuration and secrets needs independently of Pulumi’s core infrastructure as code offerings.</p>
                    </div>
                </div>
            </div>
            <div class="w-full p-4">
                <div class="">
                    <img src="/images/product/esc-execution-environments.png" alt="Exectution environments examples" />
                </div>
            </div>
        </div>
    </section>

    <section id="screenshot" class="container mx-auto my-16">
        <div class="max-w-5xl mx-auto text-center">
            <h2>Frequently asked questions</h2>
        </div>
        <ul class="list-none p-0 mx-5 xl:ml-12" data-faq-type="faq-pricing">
            <li class="accordion-item text-2xl py-3">
                {{ partial "accordian-header" (dict "text" "What is Pulumi ESC (Environments, Secrets and Configuration)?" "large_header" true) }}
                <div class="accordion-item-body-no-animation text-base">
                    <p>
                        Pulumi ESC (Environments, Secrets and Configuration), is an <a href="https://github.com/pulumi/esc">open source project</a> and managed service of Pulumi Cloud that enables teams to manage hierarchical collections of configuration and secrets and consume them from a variety of different infrastructure and application services.
                    </p>
                    <p>
                        {{ "Pulumi ESC integrates with Pulumi Cloud identity and RBAC to provide rich control over access to secret configuration within an organization. Pulumi ESC supports multiple configuration providers, enabling static key/value configuration as well as dynamically retrieved configuration and secrets via OIDC and additional providers like 1Password and Vault.  Pulumi ESC is available via the new `esc` CLI, Pulumi Cloud, the Pulumi Cloud REST API, and Pulumi IaC stack configuration." | markdownify }}
                    </p>
                </div>
            </li>
            <li class="accordion-item text-2xl py-3">
                {{ partial "accordian-header" (dict "text" "What is an environment?" "large_header" true) }}
                <div class="accordion-item-body-no-animation text-base">
                    <p>
                        An environment describes a collection of secrets and configuration values. It is typically intended to capture the configuration needed to work with a particular environment - for example the production environment for your key customer or line of business service.
                    </p>
                    <p>An environment is represented by a YAML document. This document has two top level entries:</p>
                    <p class="ml-8">
                        {{ "`imports`: An optional set of other environments that this environment derives from, enabling composition of environments and avoiding repetition across environments." | markdownify}}
                    </p>
                    <p class="ml-8">
                        {{ "`values`: An arbitrary nested collection of key/value pairs representing top level configuration values. " | markdownify}}
                    </p>
                </div>
            </li>
            <li class="accordion-item text-2xl py-3">
                {{ partial "accordian-header" (dict "text" "What secrets and configuration can I manage with Pulumi ESC?" "large_header" true) }}
                <div class="accordion-item-body-no-animation text-base">
                    <p>
                        Pulumi ESC enables teams to manage hierarchical collections of configuration and secrets (“environments”) and consume them from a variety of different infrastructure and application services. Examples include the management of AWS configurations and secrets, API keys, database credentials, and environment-specific variables such as service endpoints and AWS regions.
                    </p>
                </div>
            </li>
            <li class="accordion-item text-2xl py-3">
                {{ partial "accordian-header" (dict "text" "What secrets and configuration providers are supported?" "large_header" true) }}
                <div class="accordion-item-body-no-animation text-base">
                    <ul>
                        <li>AWS OIDC</li>
                        <li>AWS Secrets Manager</li>
                        <li>Azure OIDC</li>
                        <li>Azure KeyVault</li>
                        <li>GCP OIDC</li>
                        <li>GCP Secrets Manager</li>

                    </ul>
                </div>
            </li>
            <li class="accordion-item text-2xl py-3">
                {{ partial "accordian-header" (dict "text" "How are secrets stored and transmitted securely?" "large_header" true) }}
                <div class="accordion-item-body-no-animation text-base">
                    <p>
                        Pulumi ESC encrypts all data at rest using AWS S3 encryption. All API routes serving the Pulumi ESC API are HTTPS, and authenticated via Pulumi Access Token.
                    </p>
                </div>
            </li>
            <li class="accordion-item text-2xl py-3">
                {{ partial "accordian-header" (dict "text" "Who can use and manage secrets in ESC and how do they authenticate?" "large_header" true) }}
                <div class="accordion-item-body-no-animation text-base">
                    <p>
                        Users and automation can authenticate with a Pulumi Access Token. They can use personal, team or organization tokens.
                    </p>
                </div>
            </li>
    </section>

    <section id="get-started" class="container px-6 lg:px-0 mx-auto my-28 px-6">
        <div class="w-full bg-violet-600 card p-6 lg:p-16 lg:pt-24 text-center">
            <div class="max-w-xl mx-auto">
                <h2 class="text-white hidden lg:block px-0 lg:px-16">Get started today</h2>
                <h4 class="text-white mt-0 lg:hidden">Get started today</h4>
                <p class="text-white">Follow the Getting Started guide to begin using Pulumi ESC</p>
                <div class="mt-16">
                    <a class="btn-secondary" href="/docs/pulumi-cloud/esc/get-started/">Get Started</a>
                </div>
            </div>
        </div>
    </section>
{{ end }}