{{ define "main" }}
  <!-- Banner -->
  {{ with .Params.banner }}
    <section class="section {{ .section_class }}">
      {{ with .bg_img }}
      {{ $res := resources.Get .img }}
      <div class="absolute inset-0 bg-cover bg-center bg-no-repeat {{ .bg_class }} {{ if .parallax }} bg-fixed parallax-bg {{ end }}"
        style="background-image: url('{{ $res.RelPermalink }}')"></div>
      {{ end }}

      <div class="container relative mx-auto" style="z-index: 12;">
        <div class="row justify-center">
          {{ if not .hide_banner_img }}
          <div class="col-12">
            {{ partial "image" (dict "Src" .image "Alt" "Banner image" "Loading" "eager" "Class" "mx-auto lg:!max-w-[800px]" "DisplayXL" "800x" ) }}
          </div>
          {{ end }}
          

          {{ if .triple_section }}
          {{ partial "components/triple_section.html" . }}
          {{ end }}

          <div class="lg:col-7 md:col-9 mb-8 text-center">
            <h1 class="mb-8 text-h2 lg:-texth2">
              {{ .title | markdownify }}
            </h1>
            <p class="mb-8 text-white">
              {{ .content | markdownify }}
            </p>
            {{ with .button }}
              {{ if .enable }}
                <a class="{{ .class }}"
                  href="{{ .link | absURL }}"
                  {{ if strings.HasPrefix .link `http` }}
                    target="_blank" rel="noopener"
                  {{ end }}>
                  {{ .label }}
                  <i class="{{ .icon }}"></i>
                </a>
              {{ end }}
            {{ end }}
            {{ with .button2 }}
            {{ if .enable }}
              <a class="{{ .class }}"
                href="{{ .link | absURL }}"
                {{ if strings.HasPrefix .link `http` }}
                  target="_blank" rel="noopener"
                {{ end }}>
                {{ .label }}
                <i class="{{ .icon }}"></i>
              </a>
            {{ end }}
          {{ end }}
          {{ if .content_bottom }}
          <p class="{{ .content_bottom_class }}">
            {{ .content_bottom | markdownify }}
          </p>
          {{ end }}
          </div>
        </div>
      </div>
      {{ with .transition }}
      {{ if .end }}
      <div class="relative bg-center bg-top bg-cover bg-no-repeat dark:hidden block {{ .end_class }}"
        style="height: 100px;z-index:12;mask-image: url('{{ .end }}');background-color: {{ .end_color }};{{ .end_style | safeCSS }}">
      </div>
      {{ end }}
      {{ if .end_dark }}
      <div class="relative bg-center bg-top bg-cover bg-no-repeat dark:block hidden {{ .end_class }}"
        style="height: 100px;z-index:12;mask-image: url('{{ .end_dark }}');background-color: {{ .end_dark_color }};{{ .end_style | safeCSS }}">
      </div>
      {{ end }}
      {{ end }}
    </section>
  {{ end }}
  <!-- /Banner -->
  
  <!-- Features -->
  {{ partial "components/features.html" . }}
  <!-- /Features -->

  <!-- Modals -->
  {{ partial "components/modals.html" . }}
  <!-- /Modals -->

  
{{ end }}