{{ define "main" }}

{{"<!-- banner -->"| safeHTML}}
{{ with .Params.banner }}
{{ if .enable }}
<section class="hero-area" {{ partial `bg-image.html` (dict `Src` .bg_image) | safeHTMLAttr }}>
  <div class="container">
    <div class="row align-items-center justify-content-between">
      <div class="col-lg-6 ps-lg-0 text-lg-left">
        <h1 class="text-white position-relative" data-aos="fade-up" data-aos-delay="100">{{ .title | safeHTML }}<span class="watermark">{{ .watermark }}</span></h1>
        <p class="text-white pt-2 pb-3" data-aos="fade-up" data-aos-delay="200">{{ .content | markdownify }}</p>
        {{ if .button.enable }}
        {{ with .button }}
        <a href="{{ .link | absURL  }}" class="btn btn-outline-primary text-white" data-aos="fade-up" data-aos-delay="400">{{ .label }}</a>
        {{ end }}
        {{ end }}
      </div>
      <div class="col-lg-6 ps-lg-0 pt-5 pt-lg-0 text-lg-right text-center">
        <div>
          {{ partial "image.html" (dict "Src" .image "Alt" "illustration" "FetchPriority" "high" "Loading" "eager") }}
        </div>
      </div>
    </div>
  </div>
</section>
{{ end }}
{{ end }}
{{"<!-- /banner -->"| safeHTML}}

{{ if .Params.service.enable }}
  {{ with site.GetPage (string .Params.service.section)}}
  {{ partial "components/services.html" . }}
  {{ end }}
{{ end }}

{{"<!-- partner -->"| safeHTML}}
{{ with .Params.partner }}
{{ if .enable }}
<section>
  <div class="container">
    <div class="row">
      <div class="col-lg-12">
        <ul class="list-inline d-flex justify-content-between border-bottom border-top py-3 py-lg-5 align-items-center">
          {{ range .partner_logo }}
          <li class="list-inline-item">
            {{ partial "image.html" (dict "Src" . "Alt" "" "Class" `p-2` `Alt` `partner`) }}
          </li>
          {{ end }}
        </ul>
      </div>
    </div>
  </div>
</section>
{{ end }}
{{ end }}
{{"<!-- /partner -->"| safeHTML}}

{{"<!-- feature -->"| safeHTML}}
{{ with .Params.feature }}
{{ if .enable }}
<section class="section pb-0">
  <div class="container">
    <div class="row">
      <div class="col-lg-12 text-center">
        <p class="subtitle" data-aos="fade-up">{{ .subtitle }}</p>
        <h2 class="section-title" data-aos="fade-up" data-aos-delay="100">{{ .title }}</h2>
      </div>
      {{ range $index, $element:= .feature_item }}
      {{ $delay := mul $index 200 }}
      <div class="col-lg-4 col-md-6 mb-4" data-aos="fade-up" data-aos-delay="{{ $delay }}">
        <div class="hover-bg-primary text-center position-relative px-4 py-5 rounded-lg shadow">
          {{ partial "image.html" (dict "Src" .image "Alt" "feature image" "Class" "mb-3" ) }}
          <div class="mb-4 mt-4">{{ .content | markdownify }}</div>
        </div>
      </div>
      {{ end }}
    </div>
  </div>
</section>
{{ end }}
{{ end }}
{{"<!-- feature -->"| safeHTML}}

{{"<!-- about -->"| safeHTML}}
{{ with .Params.about }}
{{ if .enable }}
{{ range $i,$p := .about_item }}
<section class="section pb-8 pt-4">
  <div class="container">
    <div class="row align-items-center">
      {{ if not (modBool $i 2)}}
      <div class="col-lg-8 col-md-7 text-md-left order-md-1 order-2">
        <p class="subtitle" data-aos="fade-right">{{ .subtitle }}</p>
        <h2 class="section-title" data-aos="fade-right" data-aos-delay="100">{{ .title }}</h2>
        <div class="mb-4" data-aos="fade-right" data-aos-delay="150">{{ .content | markdownify | safeHTML }}</div>
        {{ if .button.enable }}
        {{ with .button }}
        <a href="{{ .link | absLangURL }}" class="btn btn-primary" data-aos="fade-right" data-aos-delay="200">{{
          .label }} <span class="screen-reader-text">details</span></a>
        {{ end }}
        {{ end }}
      </div>
      <div class="col-lg-4 col-md-5 text-center text-md-left order-1 order-md-2 mb-4 mb-md-0">
        <div data-aos="fade-left">
          {{ partial "image.html" (dict "Src" .image "Alt" "about-image" ) }}
        </div>
      </div>
      {{ else }}
      <div class="col-lg-4 col-md-5 text-center text-md-left mb-4 mb-md-0">
        <div data-aos="fade-right">
          {{ partial "image.html" (dict "Src" .image "Alt" "about image" ) }}
        </div>
      </div>
      <div class="col-lg-8 col-md-7 text-md-left">
        <p class="subtitle" data-aos="fade-left">{{ .subtitle }}</p>
        <h2 class="section-title" data-aos="fade-left" data-aos-delay="100">{{ .title }}</h2>
        <div class="mb-4" data-aos="fade-left" data-aos-delay="150">{{ .content | markdownify | safeHTML }}</div>
        {{ if .button.enable }}
        {{ with .button }}
        <a href="{{ .link | absLangURL }}" class="btn btn-primary" data-aos="fade-left" data-aos-delay="500">{{ .label }} <span class="screen-reader-text">details</span></a>
        {{ end }}
        {{ end }}
      </div>
      {{ end }}
    </div>
  </div>
</section>
{{ end }}
{{ end }}
{{ end }}
{{"<!-- about -->"| safeHTML}}

{{"<!-- download part start -->"| safeHTML}}
{{ with .Params.download }}
{{ if .enable }}
<section class="bg-triangles bg-gradient-primary">
  <div class="container">
    <div class="row">
      <div class="col-lg-6 text-lg-left">
        <div class="section">
          <h2 class="section-title text-white" data-aos="fade-up">{{ .title }}</h2>
          <p class="text-white mb-4" data-aos="fade-up" data-aos-delay="200">{{ .content | markdownify }}</p>
          <ul class="list-inline">
            <li class="list-inline-item mb-3 mb-lg-0">
              {{ with .playstore }}
              <a class="btn btn-white" href="{{ .link | safeURL }}" data-aos="zoom-in" data-aos-delay="400">
                <!-- {{ partial "image.html" (dict "Src" "images/icon/espocrm.svg" "Alt" "about-image" "Class" `me-2` )
                }} -->
                {{ .label }}
              </a>
              {{ end }}
            </li>
            <li class="list-inline-item">
              {{ with .appstore }}
              <a class="btn btn-outline-white" href="{{ .link | safeURL }}" data-aos="zoom-in" data-aos-delay="500"><i
                  class="fab fa-2x me-2" style="vertical-align: -5px;"></i>{{ .label }}</a>
              {{ end }}
            </li>
          </ul>
        </div>
      </div>
      <div class="col-lg-6 align-self-end">
        <div data-aos="fade-up" data-aos-delay="800">
          {{ partial "image.html" (dict "Src" .image "Alt" "mobile" "Class" `w-100`) }}
        </div>
      </div>
    </div>
  </div>
</section>
{{ end }}
{{ end }}
{{"<!-- download -->"| safeHTML}}

{{ end }}