fix: resolver conflito de merge com development - manter secoes existentes e adicionar FormSection

app/assets/main.css

@@ -1,7 +1,7 @@
 @import "tailwindcss";
 @import "@nuxt/ui";
 
-@import url('https://fonts.googleapis.com/css2?family=Exo:ital,wght@0,100..900;1,100..900&display=swap');
+@import url('https://fonts.googleapis.com/css2?family=Exo:ital,wght@0,100..900;1,100..900&family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap');
 
 body {
   font-family: 'Exo', sans-serif;
@@ -11,4 +11,14 @@ body {
 ::selection {
   background: #C8E600;
   color: #0A0B09;
-}
+}
+
+.text-gradient {
+  @apply bg-radial from-white to-[#E3FA6D] bg-clip-text text-transparent;
+}
+
+:root {
+  --color-primary: #8AAB10;
+  --font-inter: 'Inter', sans-serif;
+}
+

app/components/AppHeader.vue

@@ -0,0 +1,30 @@
+<template>
+  <header class="absolute top-0 left-0 w-full z-50 bg-[#0A0B09]/85 backdrop-blur-sm">
+    <nav class="w-full flex items-center justify-center gap-10 h-[52px] px-8">
+      <NuxtLink
+        v-for="item in navItems"
+        :key="item.label"
+        :to="item.href"
+        class="relative text-xs font-semibold tracking-widest uppercase transition-colors duration-200 pb-1 whitespace-nowrap"
+        :class="[
+          item.active
+            ? 'text-[#E3FA6D] after:absolute after:bottom-0 after:left-0 after:w-full after:h-[2px] after:bg-[#E3FA6D]'
+            : 'text-white/80 hover:text-white'
+        ]"
+      >
+        {{ item.label }}
+      </NuxtLink>
+    </nav>
+  </header>
+</template>
+
+<script setup lang="ts">
+const navItems = [
+  { label: 'Home', href: '#hero', active: true },
+  { label: 'A Imersão', href: '#imersao', active: false },
+  { label: 'Metodologia', href: '#metodologia', active: false },
+  { label: 'Executores', href: '#executores', active: false },
+  { label: 'Próximos Destinos', href: '#destinos', active: false },
+  { label: 'Contato', href: '#contato', active: false },
+]
+</script>

app/components/FaqSection.vue

@@ -0,0 +1,68 @@
+<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 md: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 gap-4 md:items-start text-center md:text-left">
+                <span class="inline-flex items-center justify-center w-[127px] h-[53.05px] rounded-full
+                border-[1.55px] border-[#8DC63F] bg-[var(--color-primary)] text-white text-2xl font-bold">
+                FAQ</span>
+                <p style="font-family: var(--font-inter)"   class="font-semibold text-[40px] lg:text-[88px] leading-tight tracking-[-0.03em]">
+                    Perguntas <br class="hidden md:block">Frequentes
+                </p>
+            </div>
+            <div class="flex flex-col items-center md:items-start gap-4 flex-1">
+                <div v-for="(faq, index) in faqs"
+                :key="index"
+                class="w-full lg:max-w-[677px] bg-[#0C0D17] border border-white/10 rounded-3xl px-6 md:px-8 py-5 items-center">
+                    <div @click="toggleIsOpen(index)" class="flex items-center justify-between w-full cursor-pointer">
+                        <p class="font-inter font-normal text-[21.07px] leading-[24px] md:leading-[31.61px] text-white">
+                            {{ faq.question }}
+                        </p>
+                        <button class="text-white text-[22px] md:text-[26.34px] leading-none flex-end">
+                            {{ openIndex === index ? '-' : '+' }}
+                        </button>
+                    </div>
+                   <div v-if="openIndex == index" class="mt-4 text-white/70 text-sm md:text-base">
+                        <p>{{ faq.answer }}</p>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </section>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+
+    const openIndex = ref<number | null>(null)
+    function toggleIsOpen(indexClicked: number) {
+        openIndex.value = openIndex.value === indexClicked ? null  : indexClicked
+    }
+
+    const faqs = [
+    {
+    question: "A Kyon substitui todos os sistemas que uso hoje?",
+    answer:
+      "Lorem ipsum dolor sit amet consectetur adipisicing elit. Porro labore voluptatum unde nihil, iste illo voluptas nobis repudiandae nulla cupiditate harum sint magnam exercitationem reprehenderit fuga commodi accusamus libero, quasi earum. Rerum incidunt hic veritatis debitis ipsa, iure facere, dolorum ad cumque doloribus, ut numquam earum distinctio eos repellat quidem."
+    },
+    {
+    question: "Como funciona o Prontuário unificado?",
+    answer:
+      "Lorem ipsum dolor sit amet consectetur adipisicing elit. Porro labore voluptatum unde nihil, iste illo voluptas nobis repudiandae nulla cupiditate harum sint magnam exercitationem reprehenderit fuga commodi accusamus libero, quasi earum. Rerum incidunt hic veritatis debitis ipsa, iure facere, dolorum ad cumque doloribus, ut numquam earum distinctio eos repellat quidem."
+    },
+    {
+    question: "O agente de IA realmente atende pacientes no WhatsApp?",
+    answer:
+        "Lorem ipsum dolor sit amet consectetur adipisicing elit. Porro labore voluptatum unde nihil, iste illo voluptas nobis repudiandae nulla cupiditate harum sint magnam exercitationem reprehenderit fuga commodi accusamus libero, quasi earum. Rerum incidunt hic veritatis debitis ipsa, iure facere, dolorum ad cumque doloribus, ut numquam earum distinctio eos repellat quidem."
+    },
+    {
+    question: "A telemedicina é integrada ou preciso de outra plataforma?",
+    answer:
+      "Lorem ipsum dolor sit amet consectetur adipisicing elit. Porro labore voluptatum unde nihil, iste illo voluptas nobis repudiandae nulla cupiditate harum sint magnam exercitationem reprehenderit fuga commodi accusamus libero, quasi earum. Rerum incidunt hic veritatis debitis ipsa, iure facere, dolorum ad cumque doloribus, ut numquam earum distinctio eos repellat quidem."
+    },
+    {
+    question: "Como funciona a auditoria LGPD?",
+    answer:
+      "Lorem ipsum dolor sit amet consectetur adipisicing elit. Porro labore voluptatum unde nihil, iste illo voluptas nobis repudiandae nulla cupiditate harum sint magnam exercitationem reprehenderit fuga commodi accusamus libero, quasi earum. Rerum incidunt hic veritatis debitis ipsa, iure facere, dolorum ad cumque doloribus, ut numquam earum distinctio eos repellat quidem."
+    }
+    ]
+</script>

app/components/PartnershipCard.vue

@@ -0,0 +1,28 @@
+<template>
+    <div class="relative border-gradient w-[285px] h-[200px] flex items-center jusfiy-center">
+        <NuxtImg :src="image" class="w-full h-full object-cover" />
+        <div class="absolute inset-0 flex flex-col justify-center items-center gap-3 px-4">
+            <span class="bg-[#8DC63F] text-white text-[10px] font-bold uppercase px-3 py-1 rounded-full">
+                {{ tag }}
+            </span>
+            <p class="max-w-[198] text-white text-center text-[17px] font-bold uppercase leading-tight">
+                {{ title }}
+            </p>
+        </div>
+    </div>
+</template>
+
+<script setup lang="ts">
+defineProps<{
+    image: string;
+    tag: string;
+    title: string;
+}>();
+</script>
+
+<style scoped>
+.border-gradient {
+    border: 2px solid transparent;
+    border-image: linear-gradient(to right, #8DC63F, #5F980F) 1;
+}
+</style>

app/components/SectionExecutors.vue

@@ -0,0 +1,62 @@
+<template>
+  <section class="bg-[#F6FFE9] py-20 flex flex-col items-center gap-15">
+    <h2 class="text-[50px] uppercase text-[#080E00] font-semibold">
+      Os Executores
+    </h2>
+
+    <div class="w-full max-w-[1170px] flex flex-col gap-10 px-8">
+      <div
+        v-for="(executor, index) in executores"
+        :key="index"
+        class="flex gap-12 items-center"
+        :class="index % 2 === 1 ? 'flex-row-reverse' : 'flex-row'"
+      >
+        <div class="flex-1 flex flex-col gap-5">
+          <span class="self-start text-[10px] font-semibold text-[#F6FFE9] bg-[#8AAB10] border border-[#8DC63F] rounded-full py-2 px-4 uppercase tracking-wide">
+            {{ executor.tag }}
+          </span>
+          <h3 class="text-[40px] text-[#202121] font-semibold">
+            {{ executor.name }}
+          </h3>
+          <p class="text-lg text-[#202121] font-medium">
+            {{ executor.description }}
+          </p>
+        </div>
+
+        <div class="shrink-0 w-[496px] h-[620px] overflow-hidden">
+          <NuxtImg
+            :src="executor.image"
+            :alt="executor.name"
+            class="w-full h-full object-cover object-top"
+          />
+        </div>
+      </div>
+    </div>
+  </section>
+</template>
+
+<script setup lang="ts">
+const executores = [
+  {
+    tag: "Liderança empresarial e institucional",
+    name: "Dr. Faisal M. Ismail",
+    description:
+      "Empresário serial, Dr. Faisal M. Ismail construiu sua trajetória na intersecção entre negócios, instituições e desenvolvimento territorial. Presidente da Câmara Paraguaia de Franquias, Pós-graduado em Gestão Empresarial Internacional, Marketing, Docência do Ensino Superior e Coaching pelo IBC, lidera a expansão das franquias Odontolatina no Brasil e no Paraguai, acumulando experiência direta em projetos binacionais. Sua atuação se estende aos principais espaços de articulação empresarial e institucional da região. É membro do Conselho da Associação Comercial e Empresarial de Foz do Iguaçu, do Polo Internacional do Iguassu e membro fundador do CODEFOZ — Conselho de Desenvolvimento de Foz do Iguaçu. Também atuou como presidente da ACIFI e como diretor do Centro Cultural Beneficente Islâmico da Mesquita Omar Ibn Al Khattab. Palestrante internacional, escritor e mentor empresarial, participou da condução e acompanhamento de centenas de projetos nacionais e internacionais, consolidando uma capacidade rara de articulação entre empresas, entidades e território. Sua atuação social e voluntária complementa uma trajetória marcada pela construção de pontes institucionais que viabilizam negócios e expansão.",
+    image: "/img/executors_img_1.png",
+  },
+  {
+    tag: "Execução binacional e transformação empresarial",
+    name: "Ali do Amaral Pedrozo",
+    description:
+      "Empresário de tecnologia e um dos idealizadores do Programa Expansão Sem Fronteiras, Ali do Amaral construiu sua trajetória vivendo o ecossistema empresarial paraguaio por dentro. Com mais de 23 anos de experiência prática no país, iniciou sua atuação como profissional local e posteriormente fundou e liderou o provedor NETI Siempre Conectado, onde foi CEO por 12 anos, expandindo operações para Salto del Guaíra, Las Palomas, Puente Khyra e Katuete no departamento de Canindeyu no interior do Paraguai. Hoje é CEO da Softpar, software house especializada em soluções digitais, inteligência artificial e projetos de transformação empresarial, atuando na estruturação tecnológica de empresas em crescimento. Também é fundador do Eleva One Experience, evento que integra tecnologia, gestão e desenvolvimento humano para líderes e empresários. Sua atuação combina visão estratégica, execução tecnológica e relacionamento internacional, posicionando-o como uma ponte entre empresas brasileiras e o ambiente de negócios do Paraguai, conectando expansão à estrutura, eficiência e inovação.",
+    image: "/img/executors_img_2.png",
+  },
+  {
+    tag: "Relações Internacionais e Paradiplomacia",
+    name: "Jihad Ahmad Abu Ali",
+    description:
+      "Consultor internacional e especialista em governos locais e relações Árabe-China, Jihad Ahmad Abu Ali atua na liderança de processos de internacionalização que conectam territórios, instituições e empresas ao cenário global. Há mais de sete anos participa da articulação internacional de Foz do Iguaçu, transformando a paradiplomacia em resultados concretos. Fundador da Majlis Consultoria Internacional, trabalha na intersecção entre política, diplomacia e técnica, qualificando a presença de governos e organizações em novos mercados. Sua atuação inclui conexões estratégicas com países árabes e China, ampliando oportunidades de cooperação econômica e institucional. É Secretário-Adjunto da FEPAL, membro da Rede REPIT e referência na construção de pontes internacionais que facilitam acesso, posicionamento e expansão para empresas e iniciativas territoriais.",
+    image: "/img/executors_img_3.png",
+  },
+]
+</script>

app/components/SectionGallery.vue

@@ -0,0 +1,109 @@
+<template>
+  <section class="bg-[#050f05] py-16 flex flex-col items-center gap-20 overflow-hidden">
+    <h2 class="max-w-[1021px] text-[45px] text-center font-semibold text-white leading-13">
+      O programa não entrega apenas informação,
+      <span class="text-gradient">conecta empresários ao ambiente onde decisões e oportunidades são construídas.</span>
+    </h2>
+
+    <div class="flex flex-col items-center gap-10">
+      <div class="flex gap-3">
+        <button 
+          v-for="(img, i) in images" 
+          :key="i" @click="goTo(i)" 
+          :class="[
+          'w-[152px] h-[76px] overflow-hidden transition-all shrink-0',
+          current === i ? 'ring-2 ring-[#E3FA6D] opacity-100' : 'opacity-60 hover:opacity-80'
+        ]">
+          <img v-if="img.src" :src="img.src" class="w-full h-full object-cover" />
+        </button>
+      </div>
+
+      <div class="relative w-full h-[280px] flex items-center justify-center">
+        <div 
+          v-for="(img, i) in images" 
+          :key="i" 
+          :style="getCardStyle(i)"
+          class="absolute overflow-hidden transition-all duration-500 ease-in-out"
+        >
+          <img v-if="img.src" :src="img.src" class="w-full h-full object-cover" />
+        </div>
+      </div>
+
+      <div class="flex gap-10">
+        <button @click="prev"
+          class="text-[#8DC63F] text-4xl hover:opacity-75 transition-opacity leading-none">‹</button>
+        <button @click="next"
+          class="text-[#8DC63F] text-4xl hover:opacity-75 transition-opacity leading-none">›</button>
+      </div>
+    </div>
+  </section>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+
+const current = ref(0)
+
+const images: { src: string | null }[] = [
+  { src: '/img/group.png' },
+  { src: '/img/group.png' },
+  { src: '/img/group.png' },
+  { src: '/img/group.png' },
+  { src: '/img/group.png' },
+  { src: '/img/group.png' },
+  { src: '/img/group.png' },
+  { src: '/img/group.png' },
+]
+
+const xMap = [0, 320, 570]
+const wMap = [350, 270, 210]
+const hMap = [280, 240, 210]
+const opMap = [1, 0.8, 0.5]
+const zMap = [10, 5, 1]
+
+function normalizedOffset(i: number) {
+  const len = images.length
+  let offset = (i - current.value + len) % len
+  if (offset > len / 2) offset -= len
+  return offset
+}
+
+function getCardStyle(i: number) {
+  const offset = normalizedOffset(i)
+  const abs = Math.abs(offset)
+
+  if (abs > 2) {
+    const x = offset > 0 ? 650 : -650
+    return {
+      transform: `translateX(${x}px)`,
+      width: '210px',
+      height: '210px',
+      opacity: '0',
+      zIndex: '0',
+      pointerEvents: 'none' as const,
+    }
+  }
+
+  const x = offset < 0 ? -xMap[abs] : xMap[abs]
+  return {
+    transform: `translateX(${x}px)`,
+    width: `${wMap[abs]}px`,
+    height: `${hMap[abs]}px`,
+    opacity: String(opMap[abs]),
+    zIndex: String(zMap[abs]),
+    outline: abs === 0 ? '2px solid #8DC63F' : 'none',
+  }
+}
+
+function prev() {
+  current.value = (current.value - 1 + images.length) % images.length
+}
+
+function next() {
+  current.value = (current.value + 1) % images.length
+}
+
+function goTo(i: number) {
+  current.value = i
+}
+</script>

app/components/SectionHero.vue

@@ -0,0 +1,22 @@
+<template>
+  <section class="relative bg-[url('/img/hero_bg.png')] bg-cover h-screen flex justify-center">
+    <AppHeader />
+    <div class="w-[1241px] flex justify-between items-center absolute bottom-20">
+      <div class="flex flex-col gap-5 w-1/2">
+        <NuxtImg src="/img/logo.png" width="308" />
+        <h1 class="max-w-[620px] text-[46px] font-bold text-gradient">
+          Não apenas planeje. Execute sua expansão internacional com segurança.
+        </h1>
+      </div>
+      <div class="flex flex-col gap-5 w-1/2 max-w-[516px]">
+        <p class="text-white text-2xl font-medium">
+          A Iguassu Alliance conecta sua empresa ao ecossistema de negócios do Paraguai através da 3ª edição de programa estratégico.
+        </p>
+        <button class="group self-start bg-linear-to-r from-[#8DC63F] to-[#5F980F] text-white text-2xl font-semibold flex items-center gap-3 border border-[#E3FA6D] rounded-lg py-6 px-8 whitespace-nowrap 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 o um especialista agora!
+          <NuxtImg src="/img/cta_btn_icon.svg" width="30" class="transition-transform duration-300 group-hover:translate-x-1.5" />
+        </button>
+      </div>
+    </div>
+  </section>
+</template>

app/components/SectionPartnership.vue

@@ -0,0 +1,45 @@
+<template>
+  <section class="bg-[url('/img/partnership_bg.png')] bg-cover py-24 flex flex-col items-center justify-center gap-10">
+    <div class="max-w-[846px] flex flex-col items-center justify-center text-center gap-5">
+      <div class="flex items-center">
+        <NuxtImg src="/img/logo_expansao.svg" width="254" />
+        <NuxtImg src="/img/logo_expansao.png" width="397" />
+      </div>
+      <h1 class="text-[50px] uppercase font-semibold text-gradient">
+        parceiro oficial do programa Expansão Sem Fronteiras!
+      </h1>
+      <p class="text-2xl text-white font-medium">
+        Para garantir o seu sucesso, aplicamos os <span class="text-[#00FF00]">8 Pilares Fundamentais:</span>
+      </p>
+    </div>
+    
+    <div class="grid grid-cols-4 gap-5">
+      <PartnershipCard
+        v-for="(card, index) in cards"
+        :key="index"
+        :image="card.image"
+        :tag="card.tag"
+        :title="card.title"
+      />
+    </div>
+
+    <button class="group bg-linear-to-r from-[#8DC63F] to-[#5F980F] text-white 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" width="45" class="transition-transform duration-300 group-hover:translate-x-1.5" />
+    </button>
+  </section>
+
+</template>
+
+<script setup lang="ts">
+const cards = [
+  { image: "/img/partnership_img_1.png", tag: "Pilar 01", title: "Choque de Realidade (Mercado Local)" },
+  { image: "/img/partnership_img_2.png", tag: "Pilar 02", title: "Infraestrutura e Logística" },
+  { image: "/img/partnership_img_3.png", tag: "Pilar 03", title: "Engenharia Tributária e Fiscal" },
+  { image: "/img/partnership_img_4.png", tag: "Pilar 04", title: "Blindagem Jurídica e Marcas" },
+  { image: "/img/partnership_img_5.png", tag: "Pilar 05", title: "Sistema Bancário e Fluxo de Capital" },
+  { image: "/img/partnership_img_6.png", tag: "Pilar 06", title: "Visitas Técnicas In Loco" },
+  { image: "/img/partnership_img_7.png", tag: "Pilar 07", title: "Networking de Alto Nível (Decisores)" },
+  { image: "/img/partnership_img_8.png", tag: "Pilar 08", title: "Inteligência Cultural e Gastronomia" },
+]
+</script>

app/components/SectionRoadMap.vue

@@ -0,0 +1,11 @@
+<template>
+  <section class="bg-[url('/img/roadmap_bg.png')] bg-cover py-24 flex flex-col items-center gap-24">
+    <h1 class="max-w-[762px] text-[50px] uppercase font-semibold text-gradient text-center leading-tight">
+      É hora de viver os melhores anos da sua vida
+    </h1>
+
+    <div>
+      <NuxtImg src="/img/roadmap_img.png" width="950" />
+    </div>
+  </section>
+</template>

app/components/SectionSecondary.vue

@@ -1,17 +1,17 @@
 <template>
-  <section class="w-full bg-[#080E00] relative flex flex-col items-center justify-end">
-    <NuxtImg src="/img/hexagon.svg" width="100%" class="absolute z-0" />
-    <NuxtImg src="/img/hexagons_right.svg" class="absolute top-0 left-0 z-100" />
-    <NuxtImg src="/img/hexagons_left.svg" class="absolute bottom-0 right-0 z-100" />
-    <div class="bg-[#F6FFE9] rounded-[30px] flex flex-col gap-5 justify-center items-center text-center relative z-10 mt-auto px-4">
+  <section class="w-full bg-[#080E00] relative flex flex-col items-center justify-end overflow-hidden" :style="{ minHeight: '1556px' }">
+    <NuxtImg src="/img/hexagon.svg" width="1546" class="absolute inset-0 m-auto z-0 pointer-events-none" aria-hidden="true" />
+    <NuxtImg src="/img/hexagons_right.svg" class="absolute top-0 left-0 z-10 pointer-events-none" aria-hidden="true" />
+    <NuxtImg src="/img/hexagons_left.svg" class="absolute bottom-0 right-0 z-10 pointer-events-none" aria-hidden="true" />
+
+    <div class="bg-[#F6FFE9] rounded-t-[30px] flex flex-col gap-5 justify-center items-center text-center relative z-20 px-4 mx-auto">
       <NuxtImg src="/img/arrow_group.svg" width="220" />
       <NuxtImg src="/img/logo.png" width="330" />
-      <h1
-        class="max-w-[788px] text-6xl uppercase bg-linear-to-r to-[#474747] from-[#111111] bg-clip-text text-transparent font-semibold">
+      <h1 class="max-w-[788px] text-6xl uppercase bg-linear-to-r to-[#474747] from-[#111111] bg-clip-text text-transparent font-semibold">
         Onde a ESTRATÉGIA encontra a Execução!
       </h1>
       <p class="text-2xl text-[#202020] max-w-[532px]">
-        Muitos empresários conhecem a teoria, <span class="font-bold">mas poucos dominam o “como”.</span>
+        Muitos empresários conhecem a teoria, <span class="font-bold">mas poucos dominam o "como".</span>
       </p>
       <p class="text-2xl text-[#202020] max-w-[640px]">
         Utilizamos a metodologia consolidada do Expansão Sem Fronteiras <span class="font-bold">para entregar o que você
@@ -22,12 +22,12 @@
           <span class="text-xl text-[#A7A7A7] font-medium">{{ delivery }}</span>
         </div>
       </div>
-      <NuxtImg src="/img/group.png" width="800px" />
-      <NuxtImg src="/img/paraguay_flag.png" width="600" class="absolute bottom-0 left-1" />
+      <NuxtImg src="/img/group.png" width="800" />
     </div>
   </section>
 </template>
 
 <script setup lang="ts">
 const deliverys = ["Missão", "Legado", "Poder", "Impacto", "Movimento"];
-</script>
+</script>
+

app/components/SectionTertiary.vue

@@ -0,0 +1,43 @@
+<template>
+  <section class="relative bg-[url('/img/section_tertiary_bg.svg')] bg-cover py-28 flex items-center justify-center overflow-hidden">
+    <div class="relative z-10 w-[525px] flex flex-col justify-center gap-10 ml-24">
+      <h2 class="max-w-[452px] text-[50px] uppercase font-semibold text-gradient leading-tight">
+        IMERSÃO IGUASSU ALLIANCE
+      </h2>
+      <div class="flex flex-col gap-5">
+        <SectionTertiaryCard
+          v-for="(card, index) in cards" :key="index"
+          :title="card.title" 
+          :description="card.description" 
+        />
+      </div>
+    </div>
+
+    <NuxtImg 
+      src="/img/hexagons_photos.png" 
+      width="1000" 
+      class="relative -ml-45 z-0" 
+    />
+  </section>
+</template>
+
+<script setup lang="ts">
+const cards = [
+  {
+    title: "2 Dias de Imersão Intensiva:",
+    description: "Vivência prática nos centros de decisão"
+  },
+  {
+    title: "Visitas Técnicas Estratégicas:",
+    description: "Galpões, indústrias e infraestrutura logística."
+  },
+  {
+    title: "Networking de Alto Nível:",
+    description: "Jantares e reuniões com empresários locais"
+  },
+  {
+    title: "Roadmap de Expansão: ",
+    description: "Você sai com a clareza necessária para abrir sua operação e reduzir custos operacionais."
+  },
+];
+</script>

app/components/SectionTertiaryCard.vue

@@ -0,0 +1,18 @@
+<template>
+    <div class="w-full h-[285px] px-10 py-5 bg-[url('/img/section_tertiary_card_bg.png')] bg-cover border border-[#E3FA6D80] rounded-[10px] flex flex-col gap-[9px]">
+        <NuxtImg src="/img/card_tertiary_img.svg" width="106" />
+        <h3 class="text-[27px] font-bold text-gradient">
+            {{ title }}
+        </h3>
+        <p class="text-[22px] text-white max-w-[352px] leading-6.5">
+            {{ description }}
+        </p>
+    </div>
+</template>
+
+<script setup lang="ts">
+defineProps<{
+    title: string;
+    description: string;
+}>();
+</script>

app/pages/index.vue

@@ -1,4 +1,12 @@
 <template>
+  <SectionHero />
   <SectionSecondary />
+  <SectionTertiary />
+  <SectionPartnership />
+  <SectionRoadMap />
+  <SectionExecutors />
+  <SectionGallery />
+  <FaqSection />
+  <!-- <SectionDestinations /> -->
   <FormSection />
 </template>

nuxt.config.ts

@@ -14,7 +14,7 @@ export default defineNuxtConfig({
 
   app: {
     head: {
-      title: "Skeleton",
+      title: "Iguassu Alliance",
       link: [{ rel: "icon", type: "image/icon", href: "favicon.ico" }],
     },
   },

public/img/cta_btn_icon.svg

@@ -0,0 +1,10 @@
+<svg width="46" height="46" viewBox="0 0 46 46" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect width="45.9042" height="45.9042" rx="22.9521" fill="url(#paint0_linear_48_312)"/>
+<path d="M19.3507 19.3111V17.4905C19.3507 17.0077 19.5405 16.5446 19.8781 16.2032C20.2158 15.8617 20.6738 15.6699 21.1513 15.6699H30.5144C30.9919 15.6699 31.4499 15.8617 31.7876 16.2032C32.1253 16.5446 32.315 17.0077 32.315 17.4905V28.4141C32.315 28.8969 32.1253 29.36 31.7876 29.7014C31.4499 30.0429 30.9919 30.2347 30.5144 30.2347H21.1513C20.6738 30.2347 20.2158 30.0429 19.8781 29.7014C19.5405 29.36 19.3507 28.8969 19.3507 28.4141V26.5935M23.6722 26.5935L27.2733 22.9523L23.6722 19.3111M13.5889 22.9523H26.5531" stroke="#6DA71E" stroke-width="1.67747" stroke-linecap="round" stroke-linejoin="round"/>
+<defs>
+<linearGradient id="paint0_linear_48_312" x1="0" y1="22.9521" x2="45.9042" y2="22.9521" gradientUnits="userSpaceOnUse">
+<stop stop-color="white"/>
+<stop offset="1" stop-color="#E3FA6D"/>
+</linearGradient>
+</defs>
+</svg>

public/img/section_tertiary_bg.svg

@@ -0,0 +1,32 @@
+<svg width="1920" height="1722" viewBox="0 0 1920 1722" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_241_2125)">
+<rect width="1920" height="1722" fill="#080E00"/>
+<g style="mix-blend-mode:screen" clip-path="url(#clip1_241_2125)">
+<path d="M-2210.24 -94.5103L245.224 538.87L945.14 2901.78L-769.238 4770.31L-3224.7 4136.93L-3924.62 1774.02L-2210.24 -94.5103Z" stroke="#C8E600" stroke-width="108.723"/>
+<path d="M-1880.87 1017.45L-424.062 1341.88L-53.5181 2592.83L-1098.61 3658.35L-2555.42 3333.92L-2925.97 2082.97L-1880.87 1017.45Z" stroke="#C8E600" stroke-width="72.4821"/>
+</g>
+<g style="mix-blend-mode:screen" clip-path="url(#clip2_241_2125)">
+<path d="M5888.24 703.003L5654.56 3228.05L3433.51 4295.84L1315.5 2901.39L1549.18 376.344L3770.23 -691.446L5888.24 703.003Z" stroke="#C8E600" stroke-width="108.723"/>
+<path d="M4843.04 1205.49L4755.1 2695.39L3579.25 3260.69L2360.7 2398.9L2448.64 908.995L3624.49 343.695L4843.04 1205.49Z" stroke="#C8E600" stroke-width="72.4821"/>
+</g>
+<g opacity="0.1" filter="url(#filter0_f_241_2125)">
+<circle cx="199.758" cy="389.758" r="244.758" fill="#C8E600"/>
+</g>
+</g>
+<defs>
+<filter id="filter0_f_241_2125" x="-298.195" y="-108.195" width="995.905" height="995.905" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feGaussianBlur stdDeviation="126.597" result="effect1_foregroundBlur_241_2125"/>
+</filter>
+<clipPath id="clip0_241_2125">
+<rect width="1920" height="1722" fill="white"/>
+</clipPath>
+<clipPath id="clip1_241_2125">
+<rect width="5073.75" height="5653.61" fill="white" transform="translate(-4725 348.004) rotate(-16.4998)"/>
+</clipPath>
+<clipPath id="clip2_241_2125">
+<rect width="5073.75" height="5653.61" fill="white" transform="translate(5050.35 -1709) rotate(64.3236)"/>
+</clipPath>
+</defs>
+</svg>