feat: :sparkles: add navegacao no btn de inscrever no programa

app/components/ProgramCard.vue

@@ -3,42 +3,55 @@
     <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">Mentoria Completa</h6>
+        <h6 class="font-medium text-text text-xs md:text-sm">{{ program.title }}</h6>
       </div>
-      <div class="bg-primary rounded-lg px-3 py-1 flex justify-center">
+      <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">Programa completo de mentoria para produção de café especial</p>
+
+    <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">
-      <h2 class="text-text line-through">R$ 0,00</h2>
-      <h2 class="text-primary font-bold">GRATUITO</h2>
+      <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 class="flex gap-1 items-center">
+      <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">12 Meses de acompanhamento</span>
+        <span class="text-text-2 text-xs md:text-sm">{{ feature }}</span>
       </li>
+    </ul>
 
-      <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-xs md:text-sm">Lives semanais ao vivo</span>
-      </li>
+    <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>
 
-      <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-xs md:text-sm">Comunidade exclusiva</span>
-      </li>
+<script setup lang="ts">
+const {program} = defineProps({
+  program: {
+    type: Object,
+    required: true,
+  }
+});
 
-      <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-xs md:text-sm">Conteúdo adicional mensal</span>
-      </li>
-    </ul>
+const config = useRuntimeConfig();
+const quasarAppUrl = config.public.url + '/register/' + program.id;
 
-    <UButton 
-      label="Inscrever-se Agora" 
-      class="text-white rounded-lg w-full h-10 text-xs md:text-sm mt-5 cursor-pointer hover:bg-primary/85 transition duration-300" 
-    />
-  </div>
-</template>
+const goToRegisterPage = () => {
+  window.open(quasarAppUrl, '_blank');
+};
+</script>

app/pages/index.vue

@@ -20,8 +20,9 @@
         <h2 class="text-text font-bold text-2xl md:text-[34px]">Nossos programas</h2>
         <p class="text-text-2 mt-2 text-sm md:text-base">Escolha o programa ideal para você de acordo com seu nível de experiência</p>
       </div>
+      
       <div class="flex justify-center items-center mt-6 md:mt-12">
-        <ProgramCard />
+        <ProgramCard :program="program" />
       </div>
     </div>
 
@@ -47,4 +48,19 @@ useHead({
 definePageMeta({
   layout: 'default',
 });
+
+const program = {
+  id: 1,
+  title: 'Mentoria Completa',
+  description: 'Programa completo de mentoria para produção de café especial.',
+  price: 0,
+  originalPrice: 0,
+  isPopular: true,
+  features: [
+    '12 Meses de acompanhamento',
+    'Lives semanais ao vivo',
+    'Comunidade exclusiva',
+    'Conteúdo adicional mensal',
+  ]
+}
 </script>

nuxt.config.ts

@@ -14,4 +14,9 @@ export default defineNuxtConfig({
   vite: {
     plugins: [tailwindcss()]
   },
+  runtimeConfig: {
+    public: {
+      url: 'http://localhost:9000'
+    }
+  }
 })