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>

components/CardTool.vue

@@ -22,20 +22,15 @@
         />
         <!-- <img v-else src="" alt="imagen-error"> -->
         <!-- TODO: Add a fallback image -->
-         <p 
-          v-if="index"
-          class="w-full h-full rounded-full text-2xl font-bold"
-        >{{ index }}</p>
       </div>
       <div class="flex flex-col gap-4 items-center">
         <p class="text-5.5 font-semibold uppercase">{{ title }}</p>
         <p class="text-center text-base" v-html="description"></p>
       </div>
     </NuxtLink>
-    <div v-if="!link" class="flex flex-col gap-4 p-8 items-center">
-      <div class="h-25 w-25">
+    <div v-if="!link" class="flex flex-col gap-4 p-8 items-center w-full">
+      <div v-if="image" class="h-25 w-25">
         <img 
-          v-if="image"
           :src="`/img/${image.src}`"
           :alt="image.alt"
           class="w-full h-full object-cover"
@@ -43,6 +38,10 @@
         <!-- <img v-else src="" alt="imagen-error"> -->
         <!-- TODO: Add a fallback image -->
       </div>
+      <div v-if="number" class="h-15 w-15">
+        <h3 class="w-full h-full rounded-full border font-bold flex items-center justify-center">
+        {{ number }}</h3>
+      </div>
       <div class="flex flex-col gap-4 items-center text-center">
         <p class="text-5.5 font-semibold uppercase">{{ title }}</p>
         <p class="text-center text-base" v-html="description"></p>
@@ -68,12 +67,9 @@ export default {
     },
     image: {
         type: Object,
-        default: () => ({
-          src: "",
-          alt: "",
-        }),
+        default: null,
     },
-    index: {
+    number: {
         type: String,
         default: null
     },

components/SectionWithCards.vue

@@ -29,18 +29,26 @@
           'col-span-12 lg:col-span-4': display === 'col-3-transparent',
           'col-span-12 md:col-span-6 lg:col-span-3': display === 'col-4',
         }">
-        <CardTool 
+        <CardTool
+          v-if="cardsType === 'colored' || cardsType === 'number' || cardsType === 'transparent'"
           :color="item.color"
           :title="item.title"
           :description="item.description"
           :image="item.image"
           :link="item.link"
+          :number="item.number"
           class=""
         />
+        <CardCourse
+          v-if="cardsType === 'course'"
+          :color="item.color"
+          :title="item.title"
+          :description="item.description"
+        />
       </li>
     </ul>
     <div v-if="hasButton && buttonSection" class="flex flex-col justify-center items-center mt-8">
-      <h4 class="font-semibold uppercase">{{ buttonSection.title }}</h4>
+      <h4 v-if="buttonSection.title" class="font-semibold uppercase">{{ buttonSection.title }}</h4>
       <NuxtLink v-if="buttonSection?.button" :to="buttonSection?.button?.link">
         <ButtonCTA :color="buttonSection?.button?.color" class="uppercase mt-6">
           {{ buttonSection?.button?.label }}
@@ -77,6 +85,10 @@ export default {
       type: String,
       default: "",
     },
+    cardsType: {
+      type: String,
+      default: "transparent", // 'colored', 'number', 'transparent'
+    },
     cards: {
       type: Array,
       default: () => [],

data/es/aula-virtual.json

@@ -0,0 +1,104 @@
+[
+  {
+    "component": "HeroPages",
+    "props": {
+      "id": "hero-pages-aula-virtual",
+      "title": "Aula virtual",
+      "subtitle": "<span class='font-semibold'>Formándonos en desarrollo sostenible e inclusivo.</span></br>Un espacio formativo online abierto y gratuito.",
+      "bgColor": "aula",
+      "bgImage": {
+        "src": "hero-aula-formas.png",
+        "alt": "Aula Imagenes Fondo"
+      },
+      "button": {
+        "label": "entrar  al aula",
+        "link": "",
+        "color": "button"
+      }
+    }
+  },
+  {
+    "component": "TextWithImage",
+    "id": "aula-virtual-contenido",
+    "props": {
+      "title": "¿Qué encontrarás en el Aula Virtual?",
+      "paragraphs": [
+        "El Aula Virtual es un espacio formativo online, que ofrece <strong>cursos abiertos y gratuitos</strong> sobre temáticas clave para el desarrollo sostenible e inclusivo de las entidades de economía social.",
+        "Permite acceder a conocimientos prácticos sobre herramientas ya disponibles en el ecosistema Kit-Eco.Social, y da continuidad a los encuentros presenciales del proyecto."
+      ],
+      "position": "right",
+      "bgColor": "light",
+      "image": {
+        "src": "manos-sobre-ordenador.png",
+        "alt": "Manos sobre un ordenador",
+        "display": "normal"
+      }
+    }
+  },
+  {
+    "component": "SectionWithCards",
+    "props": {
+      "id": "pasos-aula-virtual",
+      "title": "Empieza en 3 pasos simples",
+      "display": "col-3-transparent",
+      "bgColor": "aula",
+      "cardsType": "number",
+      "cards": [
+        {
+          "color": "number",
+          "title": "Accede a la plataforma",
+          "description": "Haz clic en el botón <strong>“Entrar al Aula”</strong> para entrar en Moodle, la plataforma donde se alojan los cursos.",
+          "number": "1"
+        },
+        {
+          "color": "number",
+          "title": "Elige tu curso",
+          "description": "Explora el catálogo y <strong>selecciona el curso</strong> que mejor se adapte a tu entidad o a tu rol dentro de ella.",
+          "number": "2"
+        },
+        {
+          "color": "number",
+          "title": "Aprende a tu ritmo",
+          "description": "Accede al contenido <strong>cuando quieras</strong>. Sin horarios ni plazos.",
+          "number": "3"
+        }
+      ]
+    }
+  },
+  {
+    "component": "SectionWithCards",
+    "props": {
+      "id": "que-cursos-puedes-hacer",
+      "title": "¿Qué cursos puedes hacer?",
+      "description": "Cursos gratuitos para entidades sociales que quieren crecer, cooperar y transformarse.</br>Estos son algunos de los que encontrarás:",
+      "display": "col-3-transparent",
+      "cardsType": "course",
+      "bgColor": "aula",
+      "cards": [
+        {
+          "color": "ods",
+          "title": "Agenda 2030 y medición del impacto",
+          "description": "Aplica los ODS en tu entidad y mide tu progreso con la herramienta OpenODS."
+        },
+        {
+          "color": "consumo",
+          "title": "Vender en clave social",
+          "description": "Aprende a usar la plataforma Consumo Cuidado para ofrecer tus productos o servicios de forma ética y cooperativa."
+        },
+        {
+          "color": "iguales",
+          "title": "Igualdad y autodiagnóstico",
+          "description": "Incorpora la perspectiva de género y realiza un autodiagnóstico participativo para avanzar en igualdad."
+        }
+      ],
+      "hasButton": true,
+      "buttonSection": {
+        "button": {
+          "label": "Comienza tu formación",
+          "link": "",
+          "color": "button"
+        }
+      }
+    }
+  }
+]

data/es/certifica-t.json

@@ -44,6 +44,7 @@
       "description": "Todo lo que necesitas para empezar tu camino hacia la certificación.",
       "display": "col-2",
       "bgColor": "certifica",
+      "cardsType": "transparent",
       "cards": [
         {
           "color": "transparent",

data/es/consumo-cuidado.json

@@ -44,6 +44,7 @@
       "description": "Consumo Cuidado no es una tienda online tradicional.</br>Es una plataforma tipo escaparate digital descentralizado.",
       "display": "col-3-transparent",
       "bgColor": "consumo",
+      "cardsType": "transparent",
       "cards": [
         {
           "color": "transparent",

data/es/foro.json

@@ -42,6 +42,7 @@
       "description": "Un lugar para encontrar respuestas, aportar ideas y sumar experiencias.",
       "display": "col-3-transparent",
       "bgColor": "foro",
+      "cardsType": "transparent",
       "cards": [
         {
           "color": "transparent",

data/es/iguales.json

@@ -44,6 +44,7 @@
       "description": "Responde un formulario y recibe un itinerario con propuestas adaptadas a tu entidad.",
       "display": "col-3-transparent",
       "bgColor": "iguales",
+      "cardsType": "transparent",
       "cards": [
         {
           "color": "transparent",

data/es/index.json

@@ -63,6 +63,7 @@
       "description": "Elige la herramienta que mejor se adapte a tu entidad. Todas son gratuitas, prácticas y pensadas para organizaciones de economía social.",
       "display": "col-3",
       "bgColor": "gradient-conic",
+      "cardsType": "colored",
       "cards": [
         {
           "color": "consumo",

pages/[langcode]/aula-virtual.vue

@@ -1,16 +1,46 @@
 <template>
-  <div>
-    <h1>Aula Virtual</h1>
-    <p>Formaciones online gratuitas y accesibles.</p>
-  </div>
+  <main v-if="consumoComponents" class="min-h-screen relative mx-8">
+    <template v-for="(component, index) in consumoComponents" :key="`consumo-component-${component.component}-${index}`">
+      <component 
+        :is="component.component" 
+        v-if="component" 
+        v-bind="component.props" />
+    </template>
+  </main>
 </template>
 
 <script>
-  export default {
-    
+import HeroPages from '~/components/HeroPages.vue';
+import TextWithImage from '../../components/TextWithImage.vue';
+import SectionWithCards from '../../components/SectionWithCards.vue';
+
+export default {
+  components: {
+    HeroPages,
+    TextWithImage,
+    SectionWithCards
+  },
+  data() {
+    return {
+      consumoComponents: []
+    };
+  },
+  async created() {
+    const langcode = this.$route.params.langcode;
+    try {
+      const res = await import(`~/data/${langcode}/aula-virtual.json`);
+      this.consumoComponents = res.default;
+    } catch (err) {
+      console.error('Error al cargar contenido:', err);
+      this.consumoComponents = [
+        {
+          component: 'ErrorComponent',
+          props: {
+            message: 'Contenido no disponible',
+          },
+        },
+      ];
+    }
   }
-</script>
-
-<style lang="scss" scoped>
-
-</style>
+}
+</script>