| 12345678910111213141516171819202122232425262728293031323334353637383940414243444546 |
- <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>
|
