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

{{ define "main" }}
    <div class="container mx-auto text-center my-12 px-4 text-xl text-gray-900">
        <div class="max-w-2xl mx-auto">
            {{ .Params.overview }}
        </div>
    </div>

    <section id="capabilities" class="relative my-8">
        <div class="shape-background product-stats-section">
            <div class="shape-container">
                <div class="dot-background-container">
                    <div class="dot-background-overlay"></div>
                    <div class="dot-background no-animate"></div>
                </div>
            </div>
        </div>

        <div class="container mx-auto bg-white">
            <div class="flex flex-col lg:flex-row lg:flex-wrap">
                {{ range $feature := .Params.capabilities }}
                    <div class="w-full lg:w-1/3 px-8 mt-8 lg:mb-0 text-center">
                        {{ partial "color-icon.html" (dict "icon" $feature.icon "icon_color" $feature.icon_color) }}
                        <h5>{{ $feature.title }}</h5>
                        <p class="key-feature-description">{{ $feature.description | markdownify }}</p>
                    </div>
                {{ end }}
            </div>
        </div>
    </section>

    <section id="migration-sources" class="w-full my-32 relative">
        <div class="shape-background home-build-section">
            <div class="shape-container">
                <div class="circle-left"></div>
                <div class="circle-center"></div>
                <div class="circle-right"></div>
            </div>
        </div>

        <div class="w-full">
            <div class="large-container mx-auto">
                <div class="w-full flex flex-wrap justify-center items-stretch">
                    {{ range $item := .Params.migrations }}
                        <div class="w-full md:w-1/2 lg:w-1/4 my-8 lg:my-0">
                            <div class="w-full h-full px-4">
                                <div class="h-full flex flex-col card py-6 px-4 bg-white relative">
                                    <p class="text-center mt-0 font-semibold text-black text-xl">{{ $item.title }}</p>

                                    <div class="flex flex-col flex-grow items-center justify-center pb-2">
                                        <div class="w-48 mx-auto">
                                            <span class="w-full h-full flex">
                                                {{ if $item.image }}
                                                    <img src="{{ $item.image }}" class="h-32 px-2 pb-2">
                                                {{ end }}
                                                {{ if $item.summary }}
                                                    <p class="text px-2 pb-2">{{ $item.summary }}</p>
                                                {{ end }}
                                            </span>
                                        </div>
                                    </div>

                                    <div class="mt-4 text-center">
                                        <ul class="list-none p-0">
                                            <li class="my-2">
                                                <p>
                                                    <a href="{{ $item.selfServeUrl }}">Self-Serve Migration &rarr;</a>
                                                </p>
                                            </li>
                                            <li class="my-2">
                                                <p>
                                                    {{ if $item.selfServeWebUrl }}
                                                        <a href="{{ $item.selfServeWebUrl }}">Online Migration Tool &rarr;</a>
                                                    {{ end }}
                                                </p>
                                            </li>
                                            <li class="mb-8">
                                                <p>
                                                    {{ if $item.comparisonUrl }}
                                                        <a href="{{ $item.comparisonUrl }}">Compare Features &rarr;</a>
                                                    {{ end }}
                                                </p>
                                            </li>
                                            <li class="my-2">
                                                <p class="w-full relative z-0">
                                                    <a href="/contact/?form=tf-migration" class="btn btn-primary">
                                                        Contact Expert Services
                                                    </a>
                                                </p>
                                            </li>
                                        </ul>
                                    </div>
                                </div>
                            </div>
                        </div>
                    {{ end }}
                </div>
            </div>
        </div>
    </section>

    <section id="offers" class="relative my-8">
        <div class="shape-background product-stats-section">
            <div class="shape-container">
                <div class="dot-background-container">
                    <div class="dot-background-overlay"></div>
                    <div class="dot-background no-animate"></div>
                </div>
            </div>
        </div>

        <div class="container mx-auto bg-white">
            <div class="flex flex-col lg:flex-row lg:flex-wrap">
                {{ range $offer := .Params.offers }}
                    <div class="w-full lg:w-1/2 px-8 mt-8 lg:mb-0 text-center">
                        {{ partial "color-icon.html" (dict "icon" $offer.icon "icon_color" $offer.icon_color) }}
                        <h5>{{ $offer.title }}</h5>
                        <p class="key-feature-description">{{ $offer.description | markdownify }}</p>
                        <p>
                            <a href="{{ $offer.link }}" class="inline-block btn-secondary">
                                Learn More
                            </a>
                        </p>
                    </div>
                {{ end }}
            </div>
        </div>
    </section>

    <section id="case-studies" class="w-full my-32 relative">
        <div class="shape-background cloud-engineering-case-studies-section">
            <div class="shape-container">
                <div class="circle-left"></div>
            </div>
        </div>

        <div class="w-full">
            <h2 class="text-center mb-16">{{ .Params.case_studies.title }}</h2>
            <div class="large-container mx-auto">
                <div class="w-full flex flex-wrap justify-center items-stretch">
                    {{ range $item := .Params.case_studies.items }}
                        <div class="w-full md:w-1/2 lg:w-1/4 my-8 lg:my-0">
                            <div class="w-full h-full px-4">
                                <div class="h-full flex flex-col card p-6 bg-white relative">
                                    <p class="text-left mt-0 italic font-semibold text-black">{{ $item.quote | markdownify }}</p>
                                    <div class="flex flex-col flex-grow items-center justify-end pb-8">
                                        <div class="w-48 mx-auto">
                                            {{ partial "customer-logo.html" (dict "logo" $item.company) }}
                                        </div>
                                    </div>

                                    <div class="my-4 text-center">
                                        <p>
                                            <a href="{{ $item.link }}" class="inline-block btn-secondary">
                                                Read Case Study
                                            </a>
                                        </p>
                                    </div>
                                </div>
                            </div>
                        </div>
                    {{ end }}
                </div>
            </div>
        </div>
    </section>

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