sfp_front_nuxt_iguassu_alliance/app/components/FormSection.vue

 <template>
    <section class="w-full bg-[#F6FFE9] py-12 md:py-18 md:px-10">
        <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 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="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>
                    <NuxtImg src="/img/logo-expansao-sem-fronteiras1.png"
                        class="w-[260px] md:w-[320px] lg:w-[397px]"
                    />
                </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]"
                        />

                        <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, ArrowUpRight} from "lucide-vue-next"
import { Icon } from '@iconify/vue'
</script>