sfp_front_nuxt_iguassu_alliance/app/components/SectionPartnership.vue

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