aula-virtual page

components/CardCourse.vue

@@ -0,0 +1,41 @@
+<template>
+  <div 
+  class="flex flex-col rounded-3xl border-4 border-white min-h-64 w-full"
+  :class="{
+    'bg-consumo-extra-light': color === 'consumo',
+      'bg-iguales-extra-light': color === 'iguales',
+      'bg-aula-extra-light': color === 'aula',
+      'bg-certifica-extra-light': color === 'certifica',
+      'bg-foro-extra-light': color === 'foro',
+      'bg-ods-extra-light': color === 'ods',
+    }">
+    <div class="flex flex-col gap-2 bg-white px-6 py-8 rounded-b-2xl mt-auto min-h-44">
+      <h4 class="text-5.5 font-semibold uppercase">{{ title }}</h4>
+      <p class="text-base" v-html="description"></p>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    color: {
+      type: String,
+      default: "consumo",
+    },
+    title: {
+        type: String,
+        default: ''
+    },
+    description: {
+        type: String,
+        default: ''
+    }
+  },
+  computed: {
+    langcode() {
+      return this.$store.getters.langcode;
+    },
+  },
+}
+</script>