website/themes/hugoplate/layouts/index.html

82 lines
3 KiB
HTML
Executable file

{{/* Home Template File */}}
{{ define "main" }}
<!-- 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 }}