|
|
@@ -1,75 +1,105 @@
|
|
|
<template>
|
|
|
<section class="w-full bg-[#F6FFE9] py-12 md:py-18 md:px-10">
|
|
|
- <div class="w-full max-w-[1200px] mx-auto flex flex-col lg:flex-row md:justify-between items-center md:items-start gap-6 md:gap-20 px-4 sm:px-0">
|
|
|
- <div class="flex flex-col items-center lg:items-start text-center lg:text-left gap-6 w-full">
|
|
|
- <NuxtImg src="/img/logo.png" class="w-[200px] md:w-[260px] lg:w-[298px]" />
|
|
|
- <h1 class="font-bold text-[28px] md:text-[36px] lg:text-[45px] leading-[120%]">
|
|
|
- O Mundo é Grande, <br class="hidden md:block" />
|
|
|
- Mas Cabe na Sua Mão
|
|
|
- </h1>
|
|
|
- <p class="font-medium text-[18px] md:text-[20px] lg:text-[24px] leading-[140%] max-w-[500px]">
|
|
|
- As vagas para a próxima imersão são extremamente limitadas para garantir
|
|
|
- a qualidade do networking e das visitas técnicas
|
|
|
- </p>
|
|
|
+ <div class="w-full max-w-[1200px] mx-auto px-4 flex flex-col sm:px-0 gap-10">
|
|
|
+ <NuxtImg src="/img/logo.png" class="w-[200px] md:w-[260px] lg:w-[298px] mx-auto lg:mx-0" />
|
|
|
+ <div class="flex flex-col lg:flex-row justify-between items-center lg:items-start gap-6 md:gap-20">
|
|
|
+ <div class="flex flex-col items-center lg:items-start text-center lg:text-left gap-6 w-full">
|
|
|
+ <h1 class="font-bold text-[28px] md:text-[36px] lg:text-[45px] leading-[120%]">
|
|
|
+ O Mundo é Grande, <br class="hidden md:block" />
|
|
|
+ Mas Cabe na Sua Mão
|
|
|
+ </h1>
|
|
|
+ <p class="font-medium text-[18px] md:text-[20px] lg:text-[24px] leading-[140%] max-w-[500px]">
|
|
|
+ As vagas para a próxima imersão são extremamente limitadas para garantir
|
|
|
+ a qualidade do networking e das visitas técnicas
|
|
|
+ </p>
|
|
|
|
|
|
- <div class="flex flex-col gap-3 mt-2">
|
|
|
- <div class="flex items-center gap-2">
|
|
|
- <Phone class="w-5 h-5 text-[#8AAB10]" />
|
|
|
- <span class="text-[16px] md:text-[18px] lg:text-[19px] font-medium">+55 (45) 9115-5325</span>
|
|
|
- </div>
|
|
|
- <div class="flex items-center gap-2">
|
|
|
- <Icon icon="mdi:instagram" class="w-5 h-5 text-[#8AAB10]" />
|
|
|
- <NuxtLink to="#" class="text-[16px] md:text-[18px] lg:text-[19px] font-medium">Instagram</NuxtLink>
|
|
|
- </div>
|
|
|
- <div class="flex items-center gap-2">
|
|
|
- <Icon icon="mdi:linkedin" class="w-5 h-5 text-[#8AAB10]" />
|
|
|
- <NuxtLink to="#" class="text-[16px] md:text-[18px] lg:text-[19px] font-medium">LinkedIn</NuxtLink>
|
|
|
- </div>
|
|
|
- <div class="flex items-center gap-2">
|
|
|
- <Calendar class="w-5 h-5 text-[#E3FA6D]" />
|
|
|
- <span class="text-[16px] md:text-[18px] lg:text-[19px] font-medium">18 e 19 de Maio</span>
|
|
|
- </div>
|
|
|
+ <div class="flex flex-col gap-3 mt-2">
|
|
|
+ <div class="flex items-center gap-2">
|
|
|
+ <Phone class="w-5 h-5 text-[#8AAB10]" />
|
|
|
+ <span class="text-[16px] md:text-[18px] lg:text-[19px] font-medium">+55 (45) 9115-5325</span>
|
|
|
+ </div>
|
|
|
+ <div class="flex items-center gap-2">
|
|
|
+ <Icon icon="mdi:instagram" class="w-5 h-5 text-[#8AAB10]" />
|
|
|
+ <NuxtLink to="#" class="text-[16px] md:text-[18px] lg:text-[19px] font-medium">Instagram</NuxtLink>
|
|
|
+ </div>
|
|
|
+ <div class="flex items-center gap-2">
|
|
|
+ <Icon icon="mdi:linkedin" class="w-5 h-5 text-[#8AAB10]" />
|
|
|
+ <NuxtLink to="#" class="text-[16px] md:text-[18px] lg:text-[19px] font-medium">LinkedIn</NuxtLink>
|
|
|
+ </div>
|
|
|
+ <div class="flex items-center gap-2">
|
|
|
+ <Calendar class="w-5 h-5 text-[#E3FA6D]" />
|
|
|
+ <span class="text-[16px] md:text-[18px] lg:text-[19px] font-medium">18 e 19 de Maio</span>
|
|
|
+ </div>
|
|
|
|
|
|
- <div class="flex items-center gap-2">
|
|
|
- <MapPin class="w-5 h-5 text-[#E3FA6D]" />
|
|
|
- <span class="text-[16px] md:text-[18px] lg:text-[19px] font-medium">Ciudad del Este, Paraguai</span>
|
|
|
- </div>
|
|
|
+ <div class="flex items-center gap-2">
|
|
|
+ <MapPin class="w-5 h-5 text-[#E3FA6D]" />
|
|
|
+ <span class="text-[16px] md:text-[18px] lg:text-[19px] font-medium">Ciudad del Este, Paraguai</span>
|
|
|
+ </div>
|
|
|
|
|
|
- <div class="flex items-center gap-2">
|
|
|
- <NuxtImg src="/img/status.png"
|
|
|
- class="w-5 h-5 text-[#E3FA6D]"/>
|
|
|
- <span class="text-[16px] md:text-[18px] lg:text-[19px] font-medium">Status:
|
|
|
- <span class="font-bold">Últimas vagas </span>para o grupo seleto.</span>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
+ <div class="flex items-center gap-2">
|
|
|
+ <NuxtImg src="/img/status.png"
|
|
|
+ class="w-5 h-5 text-[#E3FA6D]"/>
|
|
|
+ <span class="text-[16px] md:text-[18px] lg:text-[19px] font-medium">Status:
|
|
|
+ <span class="font-bold">Últimas vagas </span>para o grupo seleto.</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
|
|
|
- <div class="w-[120px] md:w-[180px] lg:w-[198px] h-[3px] bg-[#E3FA6D] mt-4"></div>
|
|
|
+ <div class="w-[120px] md:w-[180px] lg:w-[198px] h-[3px] bg-[#E3FA6D] mt-4"></div>
|
|
|
|
|
|
- <p class="font-semibold text-[18px] md:text-[20px] lg:text-[24px] mt-4">Em Parceria com:</p>
|
|
|
+ <p class="font-semibold text-[18px] md:text-[20px] lg:text-[24px] mt-4">Em Parceria com:</p>
|
|
|
|
|
|
- <div class="flex flex-col items-center lg:items-start gap-4 mt-2 w-full">
|
|
|
- <NuxtImg src="/img/logo-expansao-sem-fronteiras1.png"
|
|
|
- class="w-[260px] md:w-[320px] lg:w-[397px]"
|
|
|
- />
|
|
|
+ <div class="flex flex-col items-center lg:items-start gap-4 mt-2 w-full">
|
|
|
+ <NuxtImg src="/img/logo-expansao-sem-fronteiras1.png"
|
|
|
+ class="w-[260px] md:w-[320px] lg:w-[397px]"
|
|
|
+ />
|
|
|
|
|
|
- <div class="flex flex-col sm:flex-row items-center gap-4">
|
|
|
- <NuxtImg src="/img/logo-expansao-sem-fronteiras2.png"
|
|
|
- class="w-[180px] md:w-[220px] lg:w-[254px]"
|
|
|
- />
|
|
|
- <NuxtImg src="/img/logo-expansao-sem-fronteiras3.png"
|
|
|
- class="w-[220px] md:w-[300px] lg:w-[397px]"
|
|
|
- />
|
|
|
- </div>
|
|
|
- </div>
|
|
|
+ <div class="flex flex-col sm:flex-row items-center gap-4">
|
|
|
+ <NuxtImg src="/img/logo-expansao-sem-fronteiras2.png"
|
|
|
+ class="w-[180px] md:w-[220px] lg:w-[254px]"
|
|
|
+ />
|
|
|
+ <NuxtImg src="/img/logo-expansao-sem-fronteiras3.png"
|
|
|
+ class="w-[220px] md:w-[300px] lg:w-[397px]"
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="w-full flex justify-center lg:justify-end">
|
|
|
+ <form class="w-full max-w-[520px] flex flex-col gap-4">
|
|
|
+ <input type="text"
|
|
|
+ placeholder="Qual é seu nome e sobrenome?"
|
|
|
+ class="w-full min-h-[64px] md:min-h-[72px] rounded-lg border border-[#717171] bg-[#F1F1F1] px-5 text-[18px] outline-none shadow-[0px_38px_24px_rgba(0,0,0,0.2)] backdrop-blur-[70px]"
|
|
|
+ />
|
|
|
+ <input type="email"
|
|
|
+ placeholder="Qual seu e-mail?"
|
|
|
+ class="w-full min-h-[64px] md:min-h-[72px] rounded-lg border border-[#717171] bg-[#F1F1F1] px-5 text-[18px] outline-none shadow-[0px_38px_24px_rgba(0,0,0,0.2)] backdrop-blur-[70px]"
|
|
|
+ />
|
|
|
|
|
|
- </div>
|
|
|
- <div class="flex flex-col items-center md:items-start gap-4 flex-1">
|
|
|
+ <input type="tel"
|
|
|
+ placeholder="Qual o seu WhatsApp?"
|
|
|
+ class="w-full min-h-[64px] md:min-h-[72px] rounded-lg border border-[#717171] bg-[#F1F1F1] px-5 text-[18px] outline-none shadow-[0px_38px_24px_rgba(0,0,0,0.2)] backdrop-blur-[70px]"
|
|
|
+ />
|
|
|
+ <textarea rows="5"
|
|
|
+ placeholder="Mensagem"
|
|
|
+ class="w-full h-[180px] rounded-lg border border-[#717171] bg-[#F1F1F1] px-5 py-4 text-[18px] outline-none resize-none shadow-[0px_38px_24px_rgba(0,0,0,0.2)] backdrop-blur-[70px]"
|
|
|
+ ></textarea>
|
|
|
+
|
|
|
+ <div class="w-full max-w-[491px] h-[78px] rounded-[40.33px] bg-gradient-to-r from-[#8DC63F] to-[#5F980F] backdrop-blur-[32.5px] p-[2px]
|
|
|
+ flex items-center justify-between px-6 gap-2 self-center">
|
|
|
+ <button type="submit"
|
|
|
+ style="background: radial-gradient(146.87% 1091.55% at 52.23% 38.16%, #FFFFFF 0%, #E3FA6D 100%);"
|
|
|
+ class="flex-1 h-[55.93px] flex items-center justify-center rounded-[40.33px] font-semibold text-black">
|
|
|
+ Enviar
|
|
|
+ </button>
|
|
|
+ <ArrowUpRight class="text-[#E3FA6D] rounded-[4px]" />
|
|
|
+ </div>
|
|
|
+ </form>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</section>
|
|
|
</template>
|
|
|
|
|
|
<script setup lang="ts">
|
|
|
-import {Phone, Calendar, MapPin} from "lucide-vue-next"
|
|
|
+import {Phone, Calendar, MapPin, ArrowUpRight} from "lucide-vue-next"
|
|
|
import { Icon } from '@iconify/vue'
|
|
|
</script>
|
