{{ define "hero" }}
    {{ partial "hero.html" (dict "title" .Params.title) }}
{{ end }}

{{ define "main" }}
    <!-- Overview -->
    <section class="container mx-auto my-16">
        <div class="flex flex-wrap">
            <div class="max-w-5xl mx-auto text-center my-16 px-6">
                <h2>{{ .Params.overview.title }}</h2>
                <p>{{ .Params.overview.description | markdownify }}</p>
            </div>
        </div>
    </section>

    <!-- Logos carousel -->
    <section class="container mx-auto text-center overflow-hidden px-3 mt-24">
        <h3 class="text-center mb-10">{{ .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>

    <!-- Benefits -->
    <section class="container mx-auto my-16 text-center">
        <h2>{{ .Params.benefits.title }}</h2>
        <div class="flex flex-wrap items-stretch justify-center">
            {{ range $benefit := .Params.benefits.benefits.items }}
                <div class="w-full h-full lg:w-1/3 px-8 mt-8 lg:mb-0">
                    <div class="lg:max-w-xs lg:mx-auto">
                        {{ partial "color-icon.html" (dict "icon" $benefit.icon "icon_color" $benefit.icon_color) }}
                        <h5>{{ $benefit.title }}</h5>
                        <p class="key-feature-description">{{ $benefit.description | markdownify }}</p>
                    </div>
                </div>
            {{ end }}
        </div>
    </section>

    <!-- Getting Started -->

    <section id="get-started" class="my-32 relative">
        <div class="shape-background product-get-started-section">
            <div class="shape-container">
                <div class="circle-center"></div>
                <div class="circle-right"></div>
            </div>
        </div>

        <div class="container mx-auto">
            <div class="w-full lg:w-2/3 px-4 py-2 lg:p-8 lg:px-4 mx-auto text-center">
                <div class="lg:shadow-2xl bg-violet-600 p-8 lg:px-24 lg:pt-4 g:pb-12 rounded-xl">
                    <h4 class="text-white">{{ .Params.get_started.get_started.title }}</h4>
                    <p class="mb-12 text-white">{{ .Params.get_started.get_started.description }}</p>
                    <a href="{{ relref . "/contact?form=sales" }}" class="btn-secondary">{{ .Params.get_started.get_started.cta_text }}</a>
                </div>
            </div>
        </div>
    </section>
{{ end }}