✨ feat(IGAL-EST): adicionar secao de formulario

app/components/FormSection.vue

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