sfp_front_nuxt_iguassu_alliance/app/components/SectionTertiary.vue

<template>
  <section class="relative bg-[url('/img/section_tertiary_bg.svg')] bg-cover py-16 lg:py-28 flex items-center justify-center px-4">
    <div class="relative z-10 lg:w-[525px] flex flex-col justify-center gap-10 lg:ml-24">
      <h2 class="lg:max-w-[452px] text-4xl md:text-[46px] lg:text-[50px] uppercase font-semibold text-gradient leading-tight">
        IMERSÃO IGUASSU ALLIANCE
      </h2>
      <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-1 gap-5 w-full">
        <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="hidden lg:block relative lg:-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>