sfp_front_nuxt_viver_cafe_landing/app/components/ProgramCard.vue

<template>
  <div class="w-full sm:w-[90%] lg: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-xs md:text-sm">{{ program.title }}</h6>
      </div>
      <div v-if="program.isPopular" class="bg-primary rounded-lg px-3 py-1 flex justify-center">
        <span class="text-[10px] md:text-xs text-white-2">Mais popular</span>
      </div>
    </div>

    <p class="my-8 text-xs md:text-sm text-text-2">{{ program.description }}</p>

    <div class="flex flex-col items-center text-2xl md:text-[34px] m-4">
      <template v-if="program.price === 0">
        <h2 class="text-text line-through">R$ {{ program.originalPrice.toFixed(2).replace('.', ',') }}</h2>
        <h2 class="text-primary font-bold">GRATUITO</h2>
      </template>
      <template v-else>
        <h2 class="text-primary font-bold">R$ {{ program.price.toFixed(2) }}</h2>
      </template>
    </div>

    <ul class="flex flex-col gap-4">
      <li v-for="(feature, index) in program.features" :key="index" class="flex gap-1 items-center">
        <UIcon name="i-mdi-check-circle-outline" class="text-primary" size="18px" />  
        <span class="text-text-2 text-xs md:text-sm">{{ feature }}</span>
      </li>
    </ul>

    <div
      class="bg-primary hover:bg-primary/85 transition duration-300 w-full h-10 mt-5 rounded-lg cursor-pointer flex items-center justify-center"
      @click="goToRegisterPage"
    >
      <span class="text-white text-xs md:text-sm font-medium">
        Inscrever-se Agora
      </span>
    </div>
  </div>
</template>

<script setup lang="ts">
const {program} = defineProps({
  program: {
    type: Object,
    required: true,
  }
});

const config = useRuntimeConfig();
const quasarAppUrl = config.public.url + '/register/' + program.id;

const goToRegisterPage = () => {
  window.open(quasarAppUrl, '_blank');
};
</script>