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 justify-center gap-3 flex-wrap max-w-full">
        <NuxtImg src="/img/logo_expansao.svg" class="w-[140px] md:w-[254px] max-w-full h-auto" />
        <NuxtImg src="/img/logo_expansao.png" class="w-[200px] md:w-[397px] max-w-full h-auto" />
      </div>
      <h1 class="text-[26px] md:text-[40px] lg:text-[50px] uppercase font-semibold text-gradient px-4 md:px-0">
        parceiro oficial do programa Expansão Sem Fronteiras!
      </h1>
      <p class="text-base md:text-xl lg:text-2xl text-white font-medium px-4 md:px-0 leading-relaxed">
        Para garantir o seu sucesso, aplicamos os <span class="text-[#00FF00]">8 Pilares Fundamentais:</span>
      </p>
    </div>
    
    <div class="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-4 gap-5">
      <PartnershipCard
        v-for="(card, index) in cards"
        :key="index"
        :image="card.image"
        :tag="card.tag"
        :title="card.title"
      />
    </div>

    <CtaButton class="justify-center m-4 md:mt-0" />
  </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>