Merge branch 'IGAL-JOY-ajustes-na-landing' of joycekepler/sfp_front_nuxt_iguassu_alliance into development

app/assets/main.css

@@ -13,10 +13,6 @@ body {
   color: #0A0B09;
 }
 
-.font-inter {
-  font-family: 'Inter', sans-serif;
-}
-
 .text-gradient {
   @apply bg-radial from-white to-[#E3FA6D] bg-clip-text text-transparent;
 }
@@ -24,4 +20,5 @@ body {
 :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/PartnershipCard.vue

@@ -1,11 +1,11 @@
 <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="max-w-[198] absolute inset-0 flex flex-col justify-center items-center gap-3 px-4">
+        <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="text-white text-center text-[17px] font-bold uppercase leading-tight">
+            <p class="max-w-[198] text-white text-center text-[17px] font-bold uppercase leading-tight">
                 {{ title }}
             </p>
         </div>

app/components/SectionGallery.vue

@@ -45,14 +45,14 @@ import { ref } from 'vue'
 const current = ref(0)
 
 const images: { src: string | null }[] = [
-  { src: '/img/group_2.png' },
-  { src: '/img/group_2.png' },
-  { src: '/img/group_2.png' },
-  { src: '/img/group_2.png' },
-  { src: '/img/group_2.png' },
-  { src: '/img/group_2.png' },
-  { src: '/img/group_2.png' },
-  { src: '/img/group_2.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' },
+  { src: '/img/group.png' },
 ]
 
 const xMap = [0, 320, 570]

app/components/SectionHero.vue

@@ -1,5 +1,5 @@
 <template>
-  <section class="bg-[url('/img/hero_bg.png')] bg-cover h-screen flex justify-center">
+  <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">

app/components/SectionPartnership.vue

@@ -1,5 +1,5 @@
 <template>
-  <section class="bg-[url('img/partnership_bg.png')] bg-cover py-24 flex flex-col items-center justify-center gap-10">
+  <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" />

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

@@ -1,5 +1,5 @@
 <template>
-  <section class="relative bg-[url('img/section_tertiary_bg.svg')] bg-cover py-28 flex items-center justify-center overflow-hidden">
+  <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

app/components/SectionTertiaryCard.vue

@@ -1,5 +1,5 @@
 <template>
-    <div class="w-full h-[285px] px-10 py-5 bg-[url('/img/section_tertiary_card_bg.svg')] bg-cover border border-[#E3FA6D80] rounded-[10px] flex flex-col gap-[9px]">
+    <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 }}