{{ define "main" }}
<!-- Banner -->
{{ with .Params.banner }}
<section class="section pt-14">
  <div class="container">
    <div class="row justify-center">
      <div class="lg:col-7 md:col-9 mb-8 text-center">
        <h1 class="mb-4 text-h3 lg:text-h1">{{ .title | markdownify }}</h1>
        <p class="mb-8">{{ .content | markdownify }}</p>
        {{ with .button }} {{ if .enable }}
        <a
          class="btn btn-primary"
          href="{{ .link | absURL }}"
          {{
          if
          strings.HasPrefix
          .link
          `http`
          }}
          target="_blank"
          rel="noopener"
          {{
          end
          }}
        >
          {{ .label }}
          <i class="fa fa-arrow-right pl-2"></i>
        </a>
        {{ end }} {{ end }}
      </div>
      <div class="col-12">
        {{ partial "image" (dict "Src" .image "Alt" "Banner image" "Loading"
        "eager" "Class" "mx-auto lg:!max-w-[800px]" "DisplayXL" "800x" ) }}
      </div>
    </div>
  </div>
</section>
{{ end }}
<!-- /Banner -->


<!-- Features -->
{{ range $i, $e:= .Params.features }}
<section class="section-sm {{ if (modBool $i 2) }}bg-gradient{{ end }}">
  <div class="container">
    <div class="row items-center justify-between">
      <div
        class="mb:md-0 {{ if not (modBool $i 2) }}
              md:order-2
            {{ end }} md:col-5 mb-6"
      >
        {{ partial "image" (dict "Src" .image "Alt" "feature image" "DisplayXL"
        "520x" "DisplayLG" "425x" "DisplayMD" "360x") }}
      </div>
      <div
        class="{{ if not (modBool $i 2) }}
              md:order-1
            {{ end }} md:col-7 lg:col-6"
      >
        <h2 class="mb-4">{{ .title | markdownify }}</h2>
        <p class="mb-8 text-lg">{{ .content | markdownify }}</p>
        <ul>
          {{ range .bulletpoints }}
          <li class="relative mb-4 pl-6">
            <i class="fa fa-check absolute left-0 top-1.5"></i>
            {{ . | markdownify }}
          </li>
          {{ end }}
        </ul>
        {{ with .button }} {{ if .enable }}
        <a class="btn btn-primary mt-6" href="{{ .link | absURL }}">
          {{ .label }}
          <i class="fa fa-arrow-right pl-2"></i>
        </a>
        {{ end }} {{ end }}
      </div>
    </div>
  </div>
</section>
{{ end }}
<!-- /Features -->



<!-- Features2 -->
{{ range $i, $e:= .Params.features2 }}
<section class="section-sm {{ if (modBool $i 2) }}bg-gradient{{ end }}">
  <div class="container">
    <div class="row items-center justify-between">
      <div
        class="mb:md-0 {{ if not (modBool $i 2) }}
              md:order-2
            {{ end }} md:col-5 mb-6"
      >
        {{ partial "image" (dict "Src" .image "Alt" "feature image" "DisplayXL"
        "520x" "DisplayLG" "425x" "DisplayMD" "360x") }}
      </div>
      <div
        class="{{ if not (modBool $i 2) }}
              md:order-1
            {{ end }} md:col-7 lg:col-6"
      >
        <h2 class="mb-4">{{ .title | markdownify }}</h2>
        <p class="mb-8 text-lg">{{ .content | markdownify }}</p>
        <ul>
          {{ range .bulletpoints }}
          <li class="relative mb-4 pl-6">
            <i class="fa fa-check absolute left-0 top-1.5"></i>
            {{ . | markdownify }}
          </li>
          {{ end }}
        </ul>
        {{ with .button }} {{ if .enable }}
        <a class="btn btn-primary mt-6" href="{{ .link | absURL }}">
          {{ .label }}
          <i class="fa fa-arrow-right pl-2"></i>
        </a>
        {{ end }} {{ end }}
      </div>
    </div>
  </div>
</section>
{{ end }}
<!-- /Features2 -->

<!-- Features3 -->

{{ range $i, $e:= .Params.features2 }}
<section class="section-sm {{ if (modBool $i 2) }}bg-gradient{{ end }}">
  <div class="container">
    <div class="row items-center justify-between">
      <div
        class="mb:md-0 {{ if not (modBool $i 2) }}
              md:order-2
            {{ end }} md:col-5 mb-6"
      >
        {{ partial "image" (dict "Src" .image "Alt" "feature image" "DisplayXL"
        "520x" "DisplayLG" "425x" "DisplayMD" "360x") }}
      </div>
      <div
        class="{{ if not (modBool $i 2) }}
              md:order-1
            {{ end }} md:col-7 lg:col-6"
      >
        <h2 class="mb-4">{{ .title | markdownify }}</h2>
        <p class="mb-8 text-lg">{{ .content | markdownify }}</p>
        <ul>
          {{ range .bulletpoints }}
          <li class="relative mb-4 pl-6">
            <i class="fa fa-check absolute left-0 top-1.5"></i>
            {{ . | markdownify }}
          </li>
          {{ end }}
        </ul>
        {{ with .button }} {{ if .enable }}
        <a class="btn btn-primary mt-6" href="{{ .link | absURL }}">
          {{ .label }}
          <i class="fa fa-arrow-right pl-2"></i>
        </a>
        {{ end }} {{ end }}
      </div>
    </div>
  </div>
</section>
{{ end }}
<!-- /Features3 -->



{{ end }}