thelyoncompany.com/layouts/_default/about.html

{{ define "main" }}

<!-- start section -->
{{if .Params.mission.enable }}
{{with .Params.mission }}
<section class="section-padding" data-aos="fade-in" data-aos-delay="150">
  <div class="container">
    <div class="row align-items-center justify-content-around">
      <div class="col-lg-5 col-md-8 col-sm-10 mb-5">
        <h2 class="section-title">{{ .title | markdownify }}</h2>
        <p class="pb-20 border-bottom mb-20">{{ .content | markdownify }}</p>
        <ul class="check-list list-unstyled">
          {{ range .bulletpoints }}
          <li class="mb-15">
            <svg width="16" height="11" viewBox="0 0 18 13" class="text-primary mr-2" fill="none"
              xmlns="http://www.w3.org/2000/svg">
              <path d="M2 6.125L6.91892 11L16 2" stroke="currentColor" stroke-width="3" stroke-linecap="round"
                stroke-linejoin="round" /></svg>
            {{. | markdownify}}
          </li>
          {{ end }}
        </ul>
      </div>
      <div class="col-lg-5 col-md-8 col-sm-10">
        <div class="d-inline-block has-shadow shadow-right has-shapes">
          <img loading="lazy" class="img-fluid rounded-sm" src="{{ .image | absURL}}">
        </div>
      </div>
    </div>
  </div>
</section>
{{ end }}
{{ end }}
<!-- end section -->

<!-- start section -->
{{if .Params.funfacts.enable }}
{{with .Params.funfacts }}
<section class="section-padding pt-0">
  <div class="container">
    <div class="shadow px-4 pt-30">
      <div class="has-colored-text row no-gutters overflow-hidden">
        {{ range .funfacts_item }}
        <div class="col-lg-3 col-sm-6 text-center border-right border-md-0 mb-30" data-aos="fade-up">
          <p class="has-text-color mb-10 text-capitalize">{{ .name }}</p>
          <h2 class="text-black-200 font-weight-bold">
            <span class="jsCounter-2" data-count="{{ .count }}">0</span>{{.extension}}</h2>
        </div>
        {{ end }}
      </div>
    </div>
  </div>
</section>
{{ end }}
{{ end }}
<!-- end section -->

<!-- start section -->
{{if .Params.vision.enable }}
{{with .Params.vision }}
<section class="pt-120 pb-120 image-info-section has-shapes bg-light-gray has-bg-brash bg-brash-y overflow-hidden"
  style="background-image: url('{{`images/brushes/section-top.svg` | absURL}}'), url('{{`images/brushes/section-bottom.svg` | absURL}}');">
  <div class="container">
    <div class="row align-items-center justify-content-around">
      <div class="col-lg-5 col-md-8 col-sm-10">
        <div class="d-inline-block has-shadow shadow-left has-shapes">
          <img loading="lazy" class="img-fluid rounded-sm" src="{{ .image | absURL }}">
        </div>
      </div>
      <div class="col-lg-5 col-md-8 col-sm-10 mt-5 mt-lg-0">
        <h2 class="section-title">{{ .title | markdownify }}</h2>
        <p class="pb-20">{{ .content | markdownify }}</p>
      </div>
    </div>
  </div>
</section>
{{ end }}
{{ end }}
<!-- end section -->

<!-- start of growth-rate -->
{{if .Params.achivement.enable }}
{{with .Params.achivement }}
<section class="section-padding pb-50">
  <div class="container">
    <div class="row justify-content-center">
      <div class="col-xl-10">
        <div class="row align-items-center">
          <div class="col-lg-6">
            <h2 class="section-title">{{ .title | markdownify }}</h2>
            <p class="border-bottom pb-30 mr-0 mr-lg-5">{{ .content | markdownify }}</p>
            <div class="has-colored-text growth-rate-counter">
              {{ range .funfacts }}
              <div class="d-inline-block block-sm mr-30 mt-30">
                <h2 class="has-text-color font-weight-bold">
                  <span class="jsCounter" data-count="{{.count}}">0</span>{{.extension}}</h2>
                <p class="mt-10">{{ .name | markdownify }}</p>
              </div>
              {{ end }}
            </div>
          </div>
          <div class="col-lg-6 mt-5 mt-lg-0">
            <div class="row colored-icon-box">
              {{ range $i, $e:= .services }}
              <div class="col-sm-6" data-aos="fade-up" data-aos-delay="{{mul $i 100}}">
                <div class="icon-box text-center shadow px-3 px-md-5 px-lg-2 py-5 mb-30">
                  <i class="{{ .icon }} icon"></i>
                  <h4 class="font-weight-bold text-black-200">{{ .name | markdownify }}</h4>
                </div>
              </div>
              {{ end }}
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>
{{ end }}
{{ end }}
<!-- end of growth-rate -->

<!-- start of video-testimonials -->
{{if .Params.featured_testimonial.enable }}
{{with .Params.featured_testimonial }}
<section class="section-padding">
  <div class="container">
    <div class="row align-items-center">
      <div class="col-lg-6">
        <div class="has-video-popup">
          {{ if .video.enable }}
          {{ with .video }}
          <button type="button" class="video-play-btn" data-toggle="modal"
            data-src="{{ .video_embed_link | safeURL }}" data-target="#videoModal"><svg width="1.8em"
              height="1.8em" viewBox="0 0 16 16" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
              <path
                d="M11.596 8.697l-6.363 3.692c-.54.313-1.233-.066-1.233-.697V4.308c0-.63.692-1.01 1.233-.696l6.363 3.692a.802.802 0 0 1 0 1.393z" />
              </svg></button>
            {{ end }}
            {{ end }}
          <img loading="lazy" class="rounded img-fluid" src="{{ .image | absURL }}">
        </div>
      </div>
      <div class="col-lg-6 mt-5 mt-lg-0">
        <div class="pl-0 pl-lg-4">
          <h2 class="border-bottom pb-20 mb-20">{{ .quote | markdownify }}</h2>
          <p class="text-black-900">
            <span class="border-right pr-2 mr-2">{{ .name }}</span>
            <span>{{ .designation | markdownify }}</span>
          </p>
        </div>
      </div>
    </div>
  </div>
</section>
{{ end }}
{{ end }}
<!-- end of video-testimonials -->

{{ end }}