{{ template "headersMenu.html" . }}

<section class="flex relative justify-center items-center py-32 min-h-screen" id="home">

	<div class="px-4 py-9 2xl:container 2xl:mx-auto md:py-12 lg:px-20 md:px-6">
		<!--- more free and premium Tailwind CSS components at https://tailwinduikit.com/ --->
		<div id="viewerButton" class="flex justify-center w-full">
			<button onclick="openView()" class="px-4 py-2 font-bold text-white bg-indigo-600 rounded shadow-md focus:outline-none focus:ring-2 focus:ring-offset-2">{{ "Produit numéro 1" | t }}</button>
		</div>
		<div id="viewerBox" class="hidden p-4 bg-white shadow shadow-md shadow-lg lg:p-10 md:p-6 dark:bg-gray-800">
		<div class="flex justify-end">
			<button onclick="closeView()" aria-label="Close" class="focus:outline-none focus:ring-2 focus:ring-gray-800">
			<i class="fa fa-close fa-2x"></i>
			</button>
		</div>
		<div class="flex justify-center mt-3 md:mt-4 lg:mt-0 lg:flex-row items-strech lg:space-x-8">
			<div class="flex justify-between px-2 py-20 lg:w-1/2 items-strech md:py-6 md:px-6 lg:py-24">
			<div class="flex items-center">
				<button onclick="goPrev()" aria-label="slide back" class="focus:outline-none focus:ring-2 focus:ring-gray-800">
				<svg class="w-10 h-10 lg:w-16 lg:h-16" viewBox="0 0 64 64" fill="none" xmlns="http://www.w3.org/2000/svg">
					<path d="M40 16L24 32L40 48" stroke="#1F2937" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
				</svg>
				</button>
			</div>
			<div class="slider">
				<div class="slide-ana lg:relative">
				<div class="flex" style="transform: translateX(-100%)">
					<img src="/cdn/gui/assets/images/app/classic01.png" alt="A black chair with wooden legs" class="w-full h-full" />
				</div>
				<div class="flex" style="transform: translateX(0%)">
					<img src="/cdn/gui/assets/images/app/classic02.png" alt="A black chair with wooden legs" class="w-full h-full" />
				</div>
				<div class="flex" style="transform: translateX(100%)">
					<img src="/cdn/gui/assets/images/app/classic03.png" alt="A black chair with wooden legs" class="w-full h-full" />
				</div>
				</div>
			</div>
			<div class="flex items-center">
				<button onclick="goNext()" aria-label="slide forward" class="focus:outline-none focus:ring-2 focus:ring-gray-800">
				<svg class="w-10 h-10 lg:w-16 lg:h-16" viewBox="0 0 64 64" fill="none" xmlns="http://www.w3.org/2000/svg">
					<path d="M24 16L40 32L24 48" stroke="#1F2937" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
				</svg>
				</button>
			</div>
			</div>
			<div class="flex flex-col justify-center pb-8 mt-7 lg:w-1/2 md:mt-8 lg:mt-0 lg:pb-0">
			<h1 class="text-3xl font-semibold text-gray-800 lg:text-4xl dark:text-white">Bar Stool</h1>
			<p class="mt-2 text-base leading-normal text-gray-600 dark:text-white">You don't just want to be comfortable sitting in a bar stool—you want to be comfortable shimmying it up to the bar, closer to your lover, or back slightly to include a third person in the conversation.</p>
			<p class="mt-8 text-3xl font-medium text-gray-600 dark:text-white md:mt-10"></p>
			<div class="flex-row items-center mt-8 space-y-4 md:flex md:space-y-0 md:space-x-6 lg:space-x-8 md:mt-16">
				<button class="py-6 w-full text-base font-medium leading-none text-white uppercase bg-gray-800 border border-gray-800 md:w-1/2 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-800 dark:bg-white dark:text-gray-900 dark:hover:bg-gray-200">{{ "Ajouter au panier" | t }}</button>
				<button class="py-6 w-full text-base font-medium leading-none text-gray-800 uppercase bg-transparent border border-gray-800 md:w-1/2 dark:text-white focus:outline-none focus:ring-2 focus:ring-offset-2 dark:bg-transparent dark:border-white focus:ring-gray-800 hover:bg-gray-200 hover:text-black dark:hover:bg-gray-600">{{ "Voir en détails" | t }}</button>
			</div>
			<div class="mt-6">
				<button class="text-xl text-gray-800 underline capitalize dark:text-white dark:hover:text-gray-200 hover:text-gray-500 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-800">{{ "Organiser une visio" | t }}</button>
			</div>
			</div>
		</div>
		</div>
	</div>
</section>
  <style>.slider {
	width: 200px;
	height: 400px;
	position: relative;
	overflow: hidden;
  }
  
  .slide-ana {
	height: 360px;
  }
  
  .slide-ana > div {
	width: 100%;
	height: 100%;
	position: absolute;
	transition: all 0.7s;
  }
  
  @media (min-width: 200px) and (max-width: 639px) {
	.slider {
	  height: 300px;
	  width: 170px;
	}
  }
  </style>
  <script>// more free and premium Tailwind CSS components at https://tailwinduikit.com/
  let slides = document.querySelectorAll(".slide-ana>div");
  let slideSayisi = slides.length;
  let prev = document.getElementById("prev");
  let next = document.getElementById("next");
  for (let index = 0; index < slides.length; index++) {
	const element = slides[index];
	element.style.transform = "translateX(" + 100 * index + "%)";
  }
  let loop = 0 + 1000 * slideSayisi;
  
  function goNext() {
	loop++;
	for (let index = 0; index < slides.length; index++) {
	  const element = slides[index];
	  element.style.transform =
		"translateX(" + 100 * (index - (loop % slideSayisi)) + "%)";
	}
  }
  
  function goPrev() {
	loop--;
	for (let index = 0; index < slides.length; index++) {
	  const element = slides[index];
	  element.style.transform =
		"translateX(" + 100 * (index - (loop % slideSayisi)) + "%)";
	}
  }
  
  function openView() {
	document.getElementById("viewerButton").classList.add("hidden");
	document.getElementById("viewerBox").classList.remove("hidden");
  }
  function closeView() {
	document.getElementById("viewerBox").classList.add("hidden");
	document.getElementById("viewerButton").classList.remove("hidden");
  }
  </script>

{{ template "footer.html" . }}