slide

superpage/src/components/ClientsLogo.astro

@@ -0,0 +1,74 @@
+---
+import { Container } from '~/components/Container'
+import { ChevronLeftIcon, ChevronRightIcon } from '@heroicons/react/24/solid'
+
+import Natura from '~/assets/logos/natura.svg'
+import Nissan from '~/assets/logos/nissan.svg'
+import Kordsa from '~/assets/logos/kordsa.svg'
+import Manserv from '~/assets/logos/manserv.svg'
+import Semeq from '~/assets/logos/semeq.svg'
+
+const SVGLogos = [Natura, Nissan, Kordsa, Manserv, Semeq]
+---
+
+<Container className="py-6 xl:py-24 lg:text-center space-y-2.5 lg:space-y-6">
+  <h2 class="text-pretty font-semibold text-4xl">
+    Alguns clientes que acreditam em nós
+  </h2>
+  <div id="carousel" class="relative">
+    <button
+      id="prev"
+      class="inset-y-0 left-0 px-1.5 absolute cursor-pointer lg:hidden"
+    >
+      <ChevronLeftIcon className="w-6" />
+    </button>
+    <button
+      id="next"
+      class="inset-y-0 right-0 px-1.5 absolute cursor-pointer lg:hidden"
+    >
+      <ChevronRightIcon className="w-6" />
+    </button>
+    <div
+      class="flex max-lg:overflow-x-scroll max-lg:snap-x snap-mandatory scroll-smooth scrollbar-hide space-x-4 lg:gap-8 lg:justify-center"
+    >
+      {
+        SVGLogos.map((Logo, idx) => (
+          <div
+            class="snap-center flex-shrink-0 max-lg:w-full flex justify-center itens-center"
+            key={idx}
+          >
+            <Logo
+              class="size-48 lg:size-34 fill-white"
+              id={`slide${idx + 1}`}
+            />
+          </div>
+        ))
+      }
+    </div>
+  </div>
+</Container>
+
+<script type="module">
+  const carousel = document.getElementById('carousel')
+  const slides = carousel.querySelectorAll('.snap-center')
+  let currentIndex = 0
+
+  const scrollToSlide = (index) => {
+    if (index >= 0 && index < slides.length) {
+      slides[index].scrollIntoView({
+        behavior: 'smooth',
+        block: 'nearest',
+        inline: 'center',
+      })
+      currentIndex = index
+    }
+  }
+
+  document.getElementById('prev').addEventListener('click', () => {
+    scrollToSlide(currentIndex - 1)
+  })
+
+  document.getElementById('next').addEventListener('click', () => {
+    scrollToSlide(currentIndex + 1)
+  })
+</script>