ProgramCard.vue 1.8 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344
  1. <template>
  2. <div class="w-[75%] p-4 border border-border rounded-lg">
  3. <div class="flex items-center justify-between">
  4. <div class="flex items-center gap-2">
  5. <NuxtImg src="/img/green_coffee.svg" />
  6. <h6 class="font-medium text-text text-sm">Mentoria Completa</h6>
  7. </div>
  8. <div class="bg-primary rounded-lg px-3 py-1 flex justify-center">
  9. <span class="text-xs text-white-2">Mais popular</span>
  10. </div>
  11. </div>
  12. <p class="my-8 text-sm text-text-2">Programa completo de mentoria para produção de café especial</p>
  13. <div class="flex flex-col items-center text-[34px] m-4">
  14. <h2 class="text-text">R$ 0,00</h2>
  15. <h2 class="text-primary font-bold">GRATUITO</h2>
  16. </div>
  17. <ul class="flex flex-col gap-4">
  18. <li class="flex gap-1 items-center">
  19. <UIcon name="i-mdi-check-circle-outline" class="text-primary" size="18px" />
  20. <span class="text-text-2 text-sm">12 Meses de acompanhamento</span>
  21. </li>
  22. <li class="flex gap-1 items-center">
  23. <UIcon name="i-mdi-check-circle-outline" class="text-primary" size="18px" />
  24. <span class="text-text-2 text-sm">Lives semanais ao vivo</span>
  25. </li>
  26. <li class="flex gap-1 items-center">
  27. <UIcon name="i-mdi-check-circle-outline" class="text-primary" size="18px" />
  28. <span class="text-text-2 text-sm">Comunidade exclusiva</span>
  29. </li>
  30. <li class="flex gap-1 items-center">
  31. <UIcon name="i-mdi-check-circle-outline" class="text-primary" size="18px" />
  32. <span class="text-text-2 text-sm">Conteúdo adicional mensal</span>
  33. </li>
  34. </ul>
  35. <UButton
  36. label="Inscrever-se Agora"
  37. class="text-white rounded-lg w-full h-10 mt-5 cursor-pointer hover:bg-primary/85 transition duration-300"
  38. />
  39. </div>
  40. </template>