Merge branch 'feature/IGAL-JOY-adicionar-secao-parceria' of joycekepler/sfp_front_nuxt_iguassu_alliance into development

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="max-w-[198] 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">
+                {{ 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/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>