75 lines
2.1 KiB
Plaintext
75 lines
2.1 KiB
Plaintext
---
|
|
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="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>
|