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 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="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>

        <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>
            <div class="flex flex-col items-center md:items-start gap-4 flex-1">
            </div>
        </div>
    </section>   
</template>

<script setup lang="ts">
import {Phone, Calendar, MapPin} from "lucide-vue-next"
import { Icon } from '@iconify/vue'
</script>