{{/*  Home Template File  */}}
{{ define "main" }}
  <!-- Hero Slider -->
    <section class="hero-slider h-screen md:h-[750px]">
      <div class="verua-slider-wrapper">
        <div class="verua-slider h-screen md:h-[750px]" id="verua-slider">
          {{ range $i, $e:= .Params.heroslider }}
            <div class="slides h-screen md:h-full {{ if (eq $i 0) }}current{{ end }}" style="background-image:url('{{ .image }}')">
                    <h1 class="mb-4 text-4xl font-extrabold leading-none tracking-tight md:text-5xl lg:text-6xl">
                        {{ .title | markdownify }}
                      </h1>
            </div>
          {{ end }}
        </div>
      </div>
    </section>
    <script>
      window.onload = function(){
        // change slide every 5 seconds
        setInterval(nextSlide, 5000);
      }
      let slideNumber = 0;
      const prevSlide = () =>{
        const slides = document.getElementsByClassName('slides');
      const slider = document.getElementById("verua-slider");
        const currentSlide = slider.getElementsByClassName('current');
        currentSlide[0].classList.remove("current");
        if(slideNumber == 0){
          slideNumber = slides.length-1;
        }
        else{
            slideNumber = slideNumber-1;
        }
        slides[slideNumber].classList.add("current");
      }
      const nextSlide = () =>{
        const slides = document.getElementsByClassName('slides');
      const slider = document.getElementById("verua-slider");
        const currentSlide = slider.getElementsByClassName('current');
        currentSlide[0].classList.remove("current");
        if(slideNumber == (slides.length-1)){
          slideNumber = 0;
        }
        else{
            slideNumber = slideNumber+1;
        }
        slides[slideNumber].classList.add("current");
      }
      
    </script>
 <!-- /Hero Slider --> 

<!-- Key Features -->

    {{/*  <section class="flex flex-wrap items-start justify-center relative">  */}}
    <section class="mb lg:container lg:mx-auto relative flex flex-col justify-between  lg:flex-row  lg:-mt-[247px]">
      {{ range $i, $e:= .Params.keyfeatures }}
        
          <div class="w-full flex-1 lg:mt-8 p-8 lg:m-4 md:shadow-2xl lg:rounded-3xl {{ with .color }} bg-{{ . }} {{ end }} {{ with .textcolor }} text-{{ . }} {{ end }}">
          {{/*  <div class="flex-shrink-0 relative {{ with .color }} bg-{{ . }} {{ end }} m-6 {{ with .textcolor }} text-{{ . }} {{ end }} -mt-[250px] overflow-hidden rounded-lg max-w-96 shadow-lg p-8">  */}}
        
          {{ with .icon }}
          <div class="flex items-center justify-center">
            <i class="fas fa-{{ . }} fa-fw text-primary py-10" style="font-size:70px;"></i>
          </div>
          {{ end }}
          <h3 class="mb-4 {{ with .textcolor }} text-{{ . }} {{ end }}">
            {{ .title | markdownify }}
          </h2>
          <p class="mb-8 text-lg">
            {{ .content | markdownify }}
          </p>
        </div>
      {{ end }}
    </section>
<!-- /Key Features -->

{{ .Content }}



{{ end }}