|
|
@@ -1,35 +1,35 @@
|
|
|
<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">
|
|
|
+ <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">
|
|
|
- <div class="flex gap-3">
|
|
|
+ <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-[152px] h-[76px] overflow-hidden transition-all shrink-0',
|
|
|
+ '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-[280px] flex items-center justify-center">
|
|
|
+ <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"
|
|
|
+ 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">
|
|
|
+ <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"
|
|
|
@@ -85,8 +85,9 @@ function getCardStyle(i: number) {
|
|
|
}
|
|
|
|
|
|
const x = offset < 0 ? -xMap[abs] : xMap[abs]
|
|
|
+ const scale = window.innerWidth < 640 ? 0.75 : 1
|
|
|
return {
|
|
|
- transform: `translateX(${x}px)`,
|
|
|
+ transform: `translateX(${x}px) scale(${scale})`,
|
|
|
width: `${wMap[abs]}px`,
|
|
|
height: `${hMap[abs]}px`,
|
|
|
opacity: String(opMap[abs]),
|
