sfp_front_nuxt_viver_cafe_landing/app/components/ProgramCard.vue

<template>
  <div class="w-[75%] p-4 border border-border rounded-lg">
    <div class="flex items-center justify-between">
      <div class="flex items-center gap-2">
        <NuxtImg src="/img/green_coffee.svg" />
        <h6 class="font-medium text-text text-sm">Mentoria Completa</h6>
      </div>
      <div class="bg-primary rounded-lg px-3 py-1 flex justify-center">
        <span class="text-xs text-white-2">Mais popular</span>
      </div>
    </div>
    <p class="my-8 text-sm text-text-2">Programa completo de mentoria para produção de café especial</p>
    <div class="flex flex-col items-center text-[34px] m-4">
      <h2 class="text-text">R$ 0,00</h2>
      <h2 class="text-primary font-bold">GRATUITO</h2>
    </div>
    <ul class="flex flex-col gap-4">
      <li class="flex gap-1 items-center">
        <UIcon name="i-mdi-check-circle-outline" class="text-primary" size="18px" />  
        <span class="text-text-2 text-sm">12 Meses de acompanhamento</span>
      </li>

      <li class="flex gap-1 items-center">
        <UIcon name="i-mdi-check-circle-outline" class="text-primary" size="18px" />  
        <span class="text-text-2 text-sm">Lives semanais ao vivo</span>
      </li>

      <li class="flex gap-1 items-center">
        <UIcon name="i-mdi-check-circle-outline" class="text-primary" size="18px" />  
        <span class="text-text-2 text-sm">Comunidade exclusiva</span>
      </li>

      <li class="flex gap-1 items-center">
        <UIcon name="i-mdi-check-circle-outline" class="text-primary" size="18px" />  
        <span class="text-text-2 text-sm">Conteúdo adicional mensal</span>
      </li>
    </ul>

    <UButton 
      label="Inscrever-se Agora" 
      class="text-white rounded-lg w-full h-10 mt-5 cursor-pointer hover:bg-primary/85 transition duration-300" 
    />
  </div>
</template>