Merge branch 'feature/IGAL-JOY-adicionar-secao-galeria' of joycekepler/sfp_front_nuxt_iguassu_alliance into development

app/components/SectionGallery.vue

@@ -0,0 +1,109 @@
+<template>
+  <section class="bg-[#050f05] py-16 flex flex-col items-center gap-20 overflow-hidden">
+    <h2 class="max-w-[1021px] text-[45px] text-center font-semibold text-white leading-13">
+      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">
+      <div class="flex gap-3">
+        <button 
+          v-for="(img, i) in images" 
+          :key="i" @click="goTo(i)" 
+          :class="[
+          'w-[152px] 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-[280px] flex items-center justify-center">
+        <div 
+          v-for="(img, i) in images" 
+          :key="i" 
+          :style="getCardStyle(i)"
+          class="absolute overflow-hidden transition-all duration-500 ease-in-out"
+        >
+          <img v-if="img.src" :src="img.src" class="w-full h-full object-cover" />
+        </div>
+      </div>
+
+      <div class="flex gap-10">
+        <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_2.png' },
+  { src: '/img/group_2.png' },
+  { src: '/img/group_2.png' },
+  { src: '/img/group_2.png' },
+  { src: '/img/group_2.png' },
+  { src: '/img/group_2.png' },
+  { src: '/img/group_2.png' },
+  { src: '/img/group_2.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]
+  return {
+    transform: `translateX(${x}px)`,
+    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>