{{/*  Home Template File  */}}
{{ define "main" }}
{{ if eq .Site.Language.Lang "fr" }}
  <!-- Dein spezifischer Inhalt für Französisch -->
  <div class="container">
    <div class="bg-white  my-5 text-slate-900 px-4 py-3 " role="alert">
      <div class="flex">
        <div class="py-1"><svg class="fill-current h-6 w-6 text-teal-500 mr-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M2.93 17.07A10 10 0 1 1 17.07 2.93 10 10 0 0 1 2.93 17.07zm12.73-1.41A8 8 0 1 0 4.34 4.34a8 8 0 0 0 11.32 11.32zM9 11V9h2v6H9v-4zm0-6h2v2H9V5z"/></svg></div>
        <div>
          <p class="font-bold">Communiqué important</p>
          <p class="text-sm">En raison de la situation particulière en Suisse, nous convertissons partiellement notre service d'assistance téléphonique en HomeOffice. Par conséquent, notre numéro de téléphone ne sera pas toujours disponible dans les prochains jours.
            <br>Veuillez nous contacter pour le moment uniquement par <strong>E-mail et système de Tiquet</strong>, afin que votre demande nous parvienne et que nous puissions vous aidez.
            <br>Nous vous remercions de votre compréhension et espérons que la situation reviendra bientôt à la normale.
            <br>Votre équipe d'assistance VeruA ** Administration et facturation<br><br></p>
        </div>
      </div>
    </div>
  </div>
{{ end }}
  <!-- Hero Slider -->
    <section class="hero-slider h-screen md:h-1/4">
      <div class="verua-slider-wrapper">
        <div class="verua-slider h-screen" 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 }}