sfp_front_nuxt_iguassu_alliance/app/components/SectionTertiary.vue

<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 Ciudad del Este
      </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>