|
|
@@ -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>
|
joykepler