{{ define "hero" }}
    {{ partial "hero" (dict "title" "Cloud Engineering with Serverless") }}
{{ end }}

{{ define "main" }}
    <section id="overview" class="my-16">
        <div class="flex flex-wrap container mx-auto">
            <div class="w-full order-last lg:mt-0 lg:order-first lg:w-1/2 px-5">
                <h2>{{ .Params.hero.title }}</h2>
                <p class="mr-4">{{ .Params.hero.body | markdownify }}</p>
            </div>
            <div class="w-full order-first lg:order-last mt-8 lg:mt-0 lg:w-1/2 lg:mt-0">
                <div class="rounded shadow-md" style="position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden;">
                    {{ partial "code" (dict "code" .Params.hero.code "lang" "js" "mode" "dark" "chrome" true) }}
                </div>
            </div>
        </div>
    </section>

    <section id="what-is-serverless" class="py-16 px-4">
        <div class="container md:mx-auto md:max-w-4xl">
            <h3>What is Serverless?</h3>
            <p>
                Serverless, or function-based, computing enables you to build and run applications and services without thinking about the server infrastructure on which the
                functions depend. 'Serverless' applications of course require servers (typically cloud infrastructure, or Kubernetes clusters), but don't require you to provision,
                scale, and manage any servers.
            </p>
            <p>
                The reduced operational overhead of serverless computing means teams can focus on the business and application logic they need: the development of products vs the
                management of the infrastructure for them.
            </p>
        </div>
    </section>
    <section id="serverless-building-blocks" class="py-16 px-4">
        <div class="container md:mx-auto md:max-w-4xl">
            <h3>Building Blocks of Serverless Programming</h3>
            <p>
                Building serverless applications can be considered to be a composition of a series of standardized building blocks. For instance, serverless services can provide
                compute, storage, data storage, messaging/queues and orchestration. With just those blocks, extremely powerful applications can be composed and delivered with
                minimal infrastructure concerns.
            </p>

            <table>
                <thead>
                    <th>Building Block</th>
                    <th>AWS</th>
                    <th>Azure</th>
                    <th>Google Cloud</th>
                </thead>
                <tbody>
                    <tr>
                        <td><a href="#code-api" class="link">API</a></td>
                        <td>Lambda</td>
                        <td>Functions</td>
                        <td>Cloud Functions</td>
                    </tr>
                    <tr>
                        <td><a href="#code-bucket" class="link">Storage</a></td>
                        <td>S3</td>
                        <td>Blob Storage</td>
                        <td>Cloud Storage</td>
                    </tr>
                    <tr>
                        <td><a href="#code-table" class="link">Data Storage</a></td>
                        <td>DynamoDB</td>
                        <td>Cosmos DB</td>
                        <td>Cloud Datatable</td>
                    </tr>
                    <tr>
                        <td><a href="#code-timer" class="link">Timer</a></td>
                        <td>CloudWatch</td>
                        <td>Monitor</td>
                        <td>Stackdriver Monitoring</td>
                    </tr>
                    <tr>
                        <td><a href="#code-queue" class="link">Queue</a></td>
                        <td>SQS</td>
                        <td>Queue Storage</td>
                        <td>Cloud Pub/Sub</td>
                    </tr>
                    <tr>
                        <td><a href="#code-topic" class="link">Topic</a></td>
                        <td>SNS</td>
                        <td>Queue Storage</td>
                        <td>Cloud Pub/Sub</td>
                    </tr>
                </tbody>
            </table>
            <p>Pulumi makes it simple to interact with serverless services available from the major cloud vendors, and with Kubernetes.</p>
        </div>
    </section>
    <section id="code" class="py-16 px-4">
        {{ range .Params.examples }}
            <div id="{{ .id }}" class="container md:mx-auto md:flex md:my-12">
                <div class="md:w-1/2 md:pr-24">
                    <h3>{{ .title }}</h3>
                    <p>
                        {{ .body | markdownify | safeHTML }}
                    </p>
                    <p class="my-8">
                        <a data-track="cta-{{ .cta.label | urlize }}" class="btn-primary" href="{{ .cta.url }}">
                            {{ .cta.label }}
                        </a>
                    </p>
                </div>
                <div class="md:w-1/2">
                    {{ partial "code" (dict "code" .code "lang" "js" "mode" "dark") }}
                </div>
            </div>
        {{ end }}
    </section>

    {{ partial "how-pulumi-works.html" . }}

    {{ partial "get-started.html" . }}

    {{ partial "hand-raise-section" . }}
{{ end }}