{{ define "main" }}

{{ with .Params.section1 }}
<section class="section-1 bg-cover" style='background-image: url("{{ .topImage }}");'>
    <div class="title-div common-layout">
        <h1 class="title-center-h1">{{ .title }}</h1>
        <p class="common-p">{{ .content }}</p>
    </div>
</section>
{{ end }}

<section class="section-2">
    {{ with .Params.section2 }}
    <div class="common-layout">
        <div class="left-div">
            <div class="common-content">{{ .title }}</div>
            <p class="common-p">{{ .content }}</p>
            <img class='img-1' src="{{ .bg2 | relURL }}" alt="{{ i18n "icon" }}">
            <img class='img-2' src="{{ .bg3 | relURL }}" alt="{{ i18n "icon" }}">
        </div>
        <div class="right-div">
            <img src="{{ .mapImage | relURL }}" alt="{{ .title }}">
            <div class='btn-div div-1'>
                <p>{{ .name1 }}</p>
                <div>
                    <img src="{{ .icon1 | relURL }}" alt="{{ .name1 }}">
                </div>
            </div>
            <div class='btn-div div-2'>
                <p>{{ .name2 }}</p>
                <div>
                    <img src="{{ .icon2 | relURL }}" alt="{{ .name2 }}">
                </div>
            </div>
            <div class='btn-div div-3'>
                <p>{{ .name3 }}</p>
                <div>
                    <img src="{{ .icon3 | relURL }}" alt="{{ .name3 }}">
                </div>
            </div>
        </div>
    </div>
    <img src="{{ .bg1 | relURL }}" alt="{{ i18n "icon" }}">
    {{ end }}
</section>

<section class="section-3">
    {{ with .Params.section3 }}
    {{ $tip := .tip }}
    <div class="common-layout">
        <h2 class="title-black-h2">{{ .title }}</h2>
        <ul class="partner-ul common-flex-layout">
            {{ range .partnerType }}
                <li>
                    <h3 class="common-content">{{ .title }}</h3>
                    <p class="common-p">{{ .content }}</p>
                    <div>
                        <a class="common-green-a" href="{{ .link }}">{{ $tip }}</a>
                    </div>
                </li>
            {{ end }}
        </ul>
    </div>
    {{ end }}
</section>

<section class="section-4">
    {{ with .Params.section4 }}
    <div class="common-layout">
        <h2 class="title-black-h2">{{ .title }}</h2>
        <ul class="partner-ul">
            {{ range .featuredPartnerList }}
                <li>
                    <img src="{{ .icon | relURL }}" alt="{{ .content }}">
                    <div class='type'>{{ .partnerType }}</div>
                    <div class='content'>{{ .content }}</div>
                </li>
            {{ end }}
        </ul>
    </div>
    {{ end }}
</section>
{{ end }}