Merge branch 'IGAL-JOY-adiciona-secao-destinos' of joycekepler/sfp_front_nuxt_iguassu_alliance into development

app/components/DestinationCard.vue

@@ -0,0 +1,29 @@
+<template>
+  <div
+    class="rounded-2xl bg-cover bg-position-[center_80%] border border-[#E3FA6D] relative w-full"
+    :class="bgPositionClass"
+    :style="{ backgroundImage: `url('${image}')` }"
+  >
+    <div class="bg-[url('/img/destinations_card_bg.svg')] bg-cover bg-top bg-no-repeat absolute bottom-0 w-full h-1/3 md:h-1/4 rounded-t-xl rounded-b-2xl bg-[#080E00] flex flex-col justify-center items-center">
+      <span v-if="label" class="text-sm lg:text-xl text-gradient font-semibold leading-tight">
+        {{ label }}
+      </span>
+      <span class="text-xl md:text-2xl lg:text-3xl text-gradient font-semibold leading-tight">
+        {{ name }}
+      </span>
+      <span v-if="date" class="text-sm lg:text-xl text-gradient font-semibold">
+        {{ date }}
+      </span>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+defineProps<{
+  image: string
+  name: string
+  label?: string
+  date?: string
+  bgPositionClass?: string
+}>()
+</script>

app/components/SectionDestinations.vue

@@ -0,0 +1,46 @@
+<template>
+  <section class="bg-[url('/img/destinations_bg.png')] bg-cover bg-center py-12 md:py-16 lg:py-26 flex justify-center lg:justify-end">
+    <div class="w-full px-4 lg:w-[85%] xl:w-8/10 lg:px-2 flex flex-col gap-6 md:gap-10">
+      <div class="flex flex-col gap-2 lg:gap-5">
+        <h1 class="text-3xl md:text-4xl lg:text-[45px] font-bold uppercase text-white lg:leading-6">
+          Próximos destinos...
+        </h1>
+        <p class="text-base md:text-lg lg:text-xl text-white font-medium">
+          Veja as oportunidades que temos pela Frente!
+        </p>
+      </div>
+      <div class="grid grid-cols-1 md:grid-cols-2 lg:flex lg:flex-row lg:items-center lg:justify-between gap-4 md:gap-6 xl:gap-8">
+        <div class="md:col-span-2 lg:contents">
+          <DestinationCard
+            image="/img/paraguay.png"
+            name="Em breve Paraguay"
+            date="18/19 de Maio"
+            class="h-[260px] sm:h-[300px] lg:h-[390px] lg:w-[630px] bg-position-[center_15%]! md:bg-position-[center_20%] lg:bg-position-[center_40%]"
+          />
+        </div>
+        <DestinationCard
+          image="/img/china.jpg"
+          label="Em breve"
+          name="China"
+          class="h-40 sm:h-50 lg:h-[280px] lg:w-md"
+          bg-position-class="md:bg-bottom lg:bg-position-[center_380%]"
+        />
+        <DestinationCard
+          image="/img/dubai.jpg"
+          label="Em breve"
+          name="Dubai"
+          class="h-40 md:h-50 lg:h-[280px] lg:w-md"
+          bg-position-class="md:bg-bottom lg:bg-position-[center_800%]"
+        />
+      </div>
+      <button
+        class="self-stretch lg:self-start group bg-linear-to-r from-[#8DC63F] to-[#5F980F] text-white text-base md:text-lg lg:text-[23px] font-semibold flex justify-center items-center gap-4 border border-[#E3FA6D] rounded-lg py-3 px-8 transition-all duration-300 ease-in-out hover:scale-[1.03] hover:shadow-[0_0_28px_rgba(227,250,109,0.45)] hover:brightness-110 cursor-pointer">
+        Fale com um especialista agora!
+        <NuxtImg 
+          src="/img/cta_btn_icon.svg"
+          class="w-6 md:w-8 lg:w-10 transition-transform duration-300 group-hover:translate-x-1.5" 
+        />
+      </button>
+    </div>
+  </section>
+</template>

app/pages/index.vue

@@ -6,7 +6,7 @@
   <SectionRoadMap />
   <SectionExecutors />
   <SectionGallery />
-  <!-- <SectionDestinations /> -->
+  <SectionDestinations />
   <FormSection />
   <FaqSection />
 </template>

public/img/destinations_card_bg.svg

@@ -0,0 +1,45 @@
+<svg width="632" height="118" viewBox="0 0 632 118" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g filter="url(#filter0_ii_307_2007)">
+<g clip-path="url(#clip0_307_2007)">
+<rect x="-4.58691" y="0.611328" width="640.956" height="117.315" rx="12.2203" fill="#080E00"/>
+<g opacity="0.5" filter="url(#filter1_f_307_2007)" style="mix-blend-mode:screen">
+<path d="M383.123 96.8239L-186.264 -27.5964L130.022 -64.8394L444.559 89.2635L383.123 96.8239Z" fill="url(#paint0_linear_307_2007)"/>
+</g>
+</g>
+<rect x="-4.89242" y="0.30582" width="641.567" height="117.926" rx="12.5258" stroke="url(#paint1_radial_307_2007)" stroke-width="0.611017"/>
+</g>
+<defs>
+<filter id="filter0_ii_307_2007" x="-5.19775" y="0" width="642.178" height="163.8" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dy="8.76055"/>
+<feGaussianBlur stdDeviation="2.84718"/>
+<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
+<feColorMatrix type="matrix" values="0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.18 0"/>
+<feBlend mode="normal" in2="shape" result="effect1_innerShadow_307_2007"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dy="45.2628"/>
+<feGaussianBlur stdDeviation="25.9531"/>
+<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0.543363 0 0 0 0 0.68244 0 0 0 0 1 0 0 0 0.1 0"/>
+<feBlend mode="normal" in2="effect1_innerShadow_307_2007" result="effect2_innerShadow_307_2007"/>
+</filter>
+<filter id="filter1_f_307_2007" x="-250.043" y="-128.619" width="758.382" height="289.223" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feGaussianBlur stdDeviation="31.8897" result="effect1_foregroundBlur_307_2007"/>
+</filter>
+<linearGradient id="paint0_linear_307_2007" x1="17.4605" y1="44.3044" x2="64.1821" y2="-88.0766" gradientUnits="userSpaceOnUse">
+<stop stop-color="#8DC63F"/>
+<stop offset="1" stop-color="#101410" stop-opacity="0.01"/>
+</linearGradient>
+<radialGradient id="paint1_radial_307_2007" cx="0" cy="0" r="1" gradientTransform="matrix(-239.414 148.573 -941.403 -1280.55 330.172 45.3764)" gradientUnits="userSpaceOnUse">
+<stop stop-color="white"/>
+<stop offset="1" stop-color="#E3FA6D"/>
+</radialGradient>
+<clipPath id="clip0_307_2007">
+<rect x="-4.58691" y="0.611328" width="640.956" height="117.315" rx="12.2203" fill="white"/>
+</clipPath>
+</defs>
+</svg>