sfp_front_nuxt_iguassu_alliance/app/components/SectionGallery.vue

<template>
  <section class="bg-[#050f05] py-12 md:py-16 flex flex-col items-center gap-20 overflow-hidden">
    <h2 class="max-w-[1021px] text-[22px] md:text-[32px] lg:text-[45px] text-center font-semibold text-white leading-snug md:leading-13 px-4">
      O programa não entrega apenas informação,
      <span class="text-gradient">conecta empresários ao ambiente onde decisões e oportunidades são construídas.</span>
    </h2>

    <div class="flex flex-col items-center gap-10 w-full">
      <div class="flex gap-3 w-full justify-start lg:justify-center overflow-x-auto lg:overflow-visible px-4 md:px-6 lg:px-0">
        <button 
          v-for="(img, i) in images" 
          :key="i" @click="goTo(i)" 
          :class="[
          'w-[110px] md:w-[130px] lg:w-[152px] h-[70px] md:h-[80px] lg:h-[76px] overflow-hidden transition-all shrink-0',
          current === i ? 'ring-2 ring-[#E3FA6D] opacity-100' : 'opacity-60 hover:opacity-80'
        ]">
          <img v-if="img.src" :src="img.src" class="w-full h-full object-cover" />
        </button>
      </div>

      <div class="relative w-full h-[220px] md:h-[240px] lg:h-[280px] flex items-center justify-center px-4 md:px-6 lg:px-0">
        <div 
          v-for="(img, i) in images" 
          :key="i" 
          :style="getCardStyle(i)"
          class="absolute overflow-hidden transition-all duration-500 ease-in-out origin-center"
        >
          <img v-if="img.src" :src="img.src" class="w-full h-full object-cover" />
        </div>
      </div>

      <div class="flex gap-10 mt-2">
        <button @click="prev"
          class="text-[#8DC63F] text-4xl hover:opacity-75 transition-opacity leading-none">‹</button>
        <button @click="next"
          class="text-[#8DC63F] text-4xl hover:opacity-75 transition-opacity leading-none">›</button>
      </div>
    </div>
  </section>
</template>

<script setup lang="ts">
import { ref } from 'vue'

const current = ref(0)

const images: { src: string | null }[] = [
  { src: '/img/group.png' },
  { src: '/img/group.png' },
  { src: '/img/group.png' },
  { src: '/img/group.png' },
  { src: '/img/group.png' },
  { src: '/img/group.png' },
  { src: '/img/group.png' },
  { src: '/img/group.png' },
]

const xMap = [0, 320, 570]
const wMap = [350, 270, 210]
const hMap = [280, 240, 210]
const opMap = [1, 0.8, 0.5]
const zMap = [10, 5, 1]

function normalizedOffset(i: number) {
  const len = images.length
  let offset = (i - current.value + len) % len
  if (offset > len / 2) offset -= len
  return offset
}

function getCardStyle(i: number) {
  const offset = normalizedOffset(i)
  const abs = Math.abs(offset)

  if (abs > 2) {
    const x = offset > 0 ? 650 : -650
    return {
      transform: `translateX(${x}px)`,
      width: '210px',
      height: '210px',
      opacity: '0',
      zIndex: '0',
      pointerEvents: 'none' as const,
    }
  }

  const x = offset < 0 ? -xMap[abs] : xMap[abs]
  const scale = window.innerWidth < 640 ? 0.75 : 1
  return {
    transform: `translateX(${x}px) scale(${scale})`,
    width: `${wMap[abs]}px`,
    height: `${hMap[abs]}px`,
    opacity: String(opMap[abs]),
    zIndex: String(zMap[abs]),
    outline: abs === 0 ? '2px solid #8DC63F' : 'none',
  }
}

function prev() {
  current.value = (current.value - 1 + images.length) % images.length
}

function next() {
  current.value = (current.value + 1) % images.length
}

function goTo(i: number) {
  current.value = i
}
</script>