ods and foro pages

assets/css/main.css

@@ -57,6 +57,7 @@
   --spacing-21.8: 21.875rem; /* 350px */
   --spacing-22.3: 22.313rem; /* 393px */
   --spacing-25.6: 25.688rem; /* 411px */
+  --spacing-29: 29rem; /* 464px */
   --spacing-124.2: 31.063rem; /* 497px */
   --spacing-44.8: 44.813rem; /* 717px */
 

components/CardTool.vue

@@ -2,7 +2,7 @@
   <div
     class="flex flex-col gap-4 rounded-3xl"
     :class="{
-      'border-2 border-white min-h-20.3': color === 'transparent',
+      'border-4 border-white min-h-20.3': color === 'transparent' || color === 'number',
       'shadow-tool-card hover:border-4 border-white transition-all duration-300 ease-in-out min-h-21.8 min-w-80 max-w-80': color !== 'transparent',
       'bg-consumo-base hover:bg-linear-to-t hover:from-consumo-base hover:to-consumo-extra-light': color === 'consumo',
       'bg-iguales-base hover:bg-linear-to-t hover:from-iguales-base hover:to-iguales-extra-light': color === 'iguales',
@@ -22,6 +22,10 @@
         />
         <!-- <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>
@@ -39,7 +43,7 @@
         <!-- <img v-else src="" alt="imagen-error"> -->
         <!-- TODO: Add a fallback image -->
       </div>
-      <div class="flex flex-col gap-4 items-center">
+      <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>
       </div>
@@ -69,6 +73,10 @@ export default {
           alt: "",
         }),
     },
+    index: {
+        type: String,
+        default: null
+    },
     link: {
         type: String,
         default: null

components/Quote.vue

@@ -1,7 +1,8 @@
 <template>
   <section
     :id="id"
-    class="flex p-8 md:p-12 mb-8 rounded-3xl h-69">
+    class="flex flex-col lg:flex-row gap-y-4 p-4 md:py-12 mb-8 rounded-3xl h-full lg:h-69">
+
     <div v-if="shapes.shape_1" class="h-38 w-1/4 flex items-start justify-center">
       <img
         :src="`/img/${shapes.shape_1}`"
@@ -11,19 +12,14 @@
 
     <div class="flex flex-col items-center justify-center gap-4 md:gap-8 w-full">
       <h2 
-        class="font-semibold italic"
+        class="font-semibold italic text-center"
         :class="{
-          'text-consumo-dark': textColor === 'consumo',
           'text-iguales-dark': textColor === 'iguales',
-          'text-aula-dark': textColor === 'aula',
-          'text-certifica-dark': textColor === 'certifica',
-          'text-foro-dark': textColor === 'foro',
-          'text-ods-dark': textColor === 'ods',
         }" v-html="content">
       </h2>
     </div>
     
-    <div v-if="shapes.shape_2" class="h-38 w-1/4 mt-auto">
+    <div v-if="shapes.shape_2" class="h-38 w-1/4 ml-auto lg:mt-auto">
       <img 
       :src="`/img/${shapes.shape_2}`" 
       alt="hero background shape right" 

components/SectionWithCards.vue

@@ -7,19 +7,24 @@
     'bg-linear-to-t from-consumo-extra-light to-background-light': bgColor === 'consumo',
     'bg-linear-to-t from-iguales-extra-light to-background-light': bgColor === 'iguales',
     'bg-linear-to-t from-aula-extra-light to-background-light': bgColor === 'aula',
-    'bg-linear-to-t from-certifica-extra-light to-background-light': bgColor === 'certifica',
+    'bg-linear-to-t from-certifica-light to-background-light': bgColor === 'certifica',
-    'bg-linear-to-t from-foro-extra-light to-background-light': bgColor === 'foro',
+    'bg-linear-to-t from-foro-light to-background-light': bgColor === 'foro',
     'bg-linear-to-t from-ods-extra-light to-background-light': bgColor === 'ods',
   }">
-    <div class="flex flex-col justify-center items-center w-full">
+    <div 
+    :class="{
+      'flex flex-col justify-center items-center w-full': titlePosition === 'center',
+      'flex flex-col items-start w-full': titlePosition === 'left',
+    }">
       <h2 class="font-bold mb-6">{{ title }}</h2>
-      <p class="text-lg text-center" v-html="description"></p>
+      <p v-if="description" class="text-lg text-center" v-html="description"></p>
     </div>
 
     <ul  class="grid grid-cols-12 gap-8 mx-auto">
       <li 
         v-for="(item, index) in cards" :key="`cards-${id}-${index}`" 
         :class="{
+          'col-span-12 lg:col-span-6': display === 'col-2',
           'col-span-12 md:col-span-6 lg:col-span-4': display === 'col-3',
           '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',
@@ -34,6 +39,14 @@
         />
       </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>
+      <NuxtLink v-if="buttonSection?.button" :to="buttonSection?.button?.link">
+        <ButtonCTA :color="buttonSection?.button?.color" class="uppercase mt-6">
+          {{ buttonSection?.button?.label }}
+        </ButtonCTA>
+      </NuxtLink>
+    </div>
   </section>
 </template>
 
@@ -44,6 +57,10 @@ export default {
       type: String,
       default: "",
     },
+    titlePosition: {
+      type: String,
+      default: "center",
+    },
     title: {
       type: String,
       default: "",
@@ -64,6 +81,14 @@ export default {
       type: Array,
       default: () => [],
     },
+    hasButton: {
+      type: Boolean,
+      default: false,
+    },
+    buttonSection: {
+      type: Object,
+      default: null
+    },
   },
   
 };

components/TextWithImage.vue

@@ -6,20 +6,18 @@
       'bg-background-light': bgColor === 'light'
     }">
     <div 
-      class="flex flex-col lg:flex-row"
+      class="flex justify-between"
       :class="{
-        'lg:flex-row': position === 'left',
+        'flex-col lg:flex-row gap-4': position === 'left',
-        'lg:flex-row-reverse': position === 'right',
+        'flex-col lg:flex-row-reverse': position === 'right',
         'items-center gap-12': image.display === 'circle',
-        'items-center lg:items-start gap-8': image.display === 'normal' && position === 'left',
-        'items-center lg:items-start justify-between gap-8': image.display === 'normal' && position === 'right'
       }">
 
       <div 
         v-if="image"
         :class="{
           'h-20.1 w-20.1 rounded-full overflow-hidden border-4 border-white': image.display === 'circle',
-          'h-fit lg:h-20.9 w-full lg:w-fit': image.display === 'normal'
+          'h-fit w-full lg:w-auto': image.display === 'normal'
         }">
         <img 
           :src="`/img/${image.src}`"
@@ -45,7 +43,12 @@
           </li>
         </ul>
         <ul v-if="list" class="flex flex-col gap-4">
-          <li v-for="(item, index) in list" :key="`item-list-${id}-${index}`">
+          <li
+            v-for="(item, index) in list" 
+            :key="`item-list-${id}-${index}`"
+            :class="{
+              'list-disc ml-6': hasBullets,
+            }">
             <p class="text-lg" v-html="item"></p>
           </li>
         </ul>
@@ -73,6 +76,10 @@ export default {
       type: Array,
       default: () => []
     },
+    hasBullets: {
+      type: Boolean,
+      default: false
+    },
     position: {
       type: String,
       default: 'left'
@@ -92,9 +99,3 @@ export default {
   }
 }
 </script>
-
-<style scoped>
-.custom-clip {
-  clip-path: polygon(0 10%, 100% 0%, 100% 90%, 0% 100%);
-}
-</style>

data/es/certifica-t.json

@@ -0,0 +1,127 @@
+[
+  {
+    "component": "HeroPages",
+    "props": {
+      "id": "hero-pages-certifica-t",
+      "title": "Certifica-T",
+      "subtitle": "<span class='font-semibold'>Tu camino hacia la sostenibilidad certificada.</span></br>Autodiagnóstico y recursos para certificar tu sostenibilidad.",
+      "bgColor": "certifica",
+      "bgImage": {
+        "src": "hero-certifica-t-formas.png",
+        "alt": "Certifica-t Imagenes Fondo"
+      },
+      "button": {
+        "label": "EXPLORAR LA HERRAMIENTA",
+        "link": "",
+        "color": "button"
+      }
+    }
+  },
+  {
+    "component": "TextWithImage",
+    "id": "por-que-certifica-t",
+    "props": {
+      "title": "¿Por qué Certifica-T?",
+      "paragraphs": [
+        "<strong>Certificar es comunicar con evidencia.</strong></br>En un contexto donde producir de forma sostenible es una necesidad urgente y línea vertebral del trabajo de las entidades de la economía social, muchas de ellas no dan el paso a la certificación oficial por desconocimiento, por la complejidad en el acceso o falta de recursos.",
+        "<strong>Certifica-T nace para facilitar ese camino</strong>, ofreciendo materiales y guías prácticas que permiten empezar a construir tu <strong>memoria de sostenibilidad</strong> y acercarte a los estándares oficiales más reconocidos.",
+        "Una herramienta pensada para cooperativas, asociaciones, pequeñas empresas y otras entidades de economía social comprometidas con la sostenibilidad que quieran <strong>avanzar con autonomía hacia la certificación ambiental</strong> y el reconocimiento a su compromiso por un futuro más sostenible."
+      ],
+      "position": "right",
+      "bgColor": "light",
+      "image": {
+        "src": "agricultor-con-tablet.png",
+        "alt": "Agricultor con tablet en campo",
+        "display": "normal"
+      }
+    }
+  },
+  {
+    "component": "SectionWithCards",
+    "props": {
+      "id": "que-encontraras-certifica-t",
+      "title": "¿Qué encontrarás en Certifica-T?",
+      "description": "Todo lo que necesitas para empezar tu camino hacia la certificación.",
+      "display": "col-2",
+      "bgColor": "certifica",
+      "cards": [
+        {
+          "color": "transparent",
+          "title": "Autodiagnóstico inicial",
+          "description": "Evalúa tu situación actual y descubre los posibles itinerarios de certificación ambiental según tus capacidades.",
+          "image": {
+            "src": "search-check.png",
+            "alt": "Búsqueda de verificación"
+          }
+        },
+        {
+          "color": "transparent",
+          "title": "Materiales Formativos",
+          "description": "Accede a recursos para redactar tu memoria de sostenibilidad, conocer los distintos certificados y los pasos requeridos hacia la certificación.",
+          "image": {
+            "src": "book-open.png",
+            "alt": "Libro abierto"
+          }
+        }
+      ]
+    }
+  },
+  {
+    "component": "Quote",
+    "props": {
+      "id": "quote-certifica-t",
+      "content": "La igualdad no se presume, se demuestra.</br>Y para demostrarla, hace falta evaluarla.",
+      "textColor": "certifica-t",
+      "shapes": {
+        "shape_1": "formas-cita-certifica-t.png",
+        "shape_2": "formas-cita-cierre-certifica-t.png"
+      }
+    }
+  },
+  {
+    "component": "TextWithImage",
+    "id": "a-quien-va-dirigido-certifica-t",
+    "props": {
+      "title": "¿A quién va dirigido?",
+      "paragraphs": [
+        "Certifica-T está pensada para entidades de economía social que quieren visibilizar su compromiso con la sostenibilidad:"
+      ],
+      "list": [
+        "<strong>Cooperativas, asociaciones y fundaciones</strong> que deseen revisar sus prácticas desde una perspectiva sostenible y avanzar en mejorar su compromiso.",
+        "<strong>Equipos técnicos y responsables de igualdad</strong> que necesitan una herramienta ágil para identificar qué certificados son adecuados para su proyecto y cómo alcanzarlos.",
+        "<strong>Organizaciones</strong> que cumplen o deben cumplir normativa en materia de sostenibilidad y buscan información sobre cuáles son las mejores herramientas.",
+        "<strong>Entidades con interés en formarse y mejorar</strong> a partir de propuestas concretas, ajustadas a su contexto y capacidades."
+      ],
+      "position": "left",
+      "bgColor": "light",
+      "image": {
+        "src": "manos-con-granos.png",
+        "alt": "Manos con granos",
+        "display": "normal"
+      }
+    }
+  },
+  {
+    "component": "TextWithIconAndButtons",
+    "props": {
+      "id": "quieres-empezar-certifica-t",
+      "title": "¿Quieres empezar o saber más sobre certificaciones ambientales?",
+      "subtitle": "Diagnostica tu entidad y accede a propuestas ajustadas para avanzar hacia la igualdad.",
+      "bgColor": "certifica",
+      "bgImage": {
+        "src": "hero-certifica-t-formas.png",
+        "alt": "certifica-t Imagenes Fondo"
+      },
+      "button": {
+        "label": "Explorar la herramienta",
+        "link": "",
+        "color": "button"
+      },
+      "button2": {
+        "label": "Ir al aula virtual",
+        "link": "",
+        "color": "button"
+      }
+    }
+  }
+]

data/es/foro.json

@@ -0,0 +1,112 @@
+[
+  {
+    "component": "HeroPages",
+    "props": {
+      "id": "hero-pages-foro",
+      "title": "Foro",
+      "subtitle": "<span class='font-semibold'>Espacio de intercooperación</span></br>Compartiendo buenas prácticas desde la economía social.",
+      "bgColor": "foro",
+      "bgImage": {
+        "src": "hero-foro-formas.png",
+        "alt": "Foro Imagenes Fondo"
+      },
+      "button": {
+        "label": "Entrar al espacio",
+        "link": "",
+        "color": "button"
+      }
+    }
+  },
+  {
+    "component": "TextWithImage",
+    "id": "conecta-otras-entidades",
+    "props": {
+      "title": "Conecta con otras entidades",
+      "paragraphs": [
+        "Este espacio es una <strong>red social interna</strong>, construida con software libre (Discourse), pensada para facilitar la <strong>intercooperación entre entidades</strong> de economía social. Aquí puedes relacionarte de forma horizontal, compartir aprendizajes y dudas, <strong>construir saberes colectivos</strong> y encontrar inspiración en las experiencias de otras personas y colectivos.",
+        "Es un entorno abierto y moderado, donde prima el cuidado, el respeto y el deseo de avanzar juntas hacia un modelo más justo y sostenible."
+      ],
+      "position": "right",
+      "image": {
+        "src": "amigos-haciendo-plan-de-negocios.jpg",
+        "alt": "Amigos haciendo un plan de negocios",
+        "display": "circle"
+      }
+    }
+  },
+  {
+    "component": "SectionWithCards",
+    "props": {
+      "id": "tu-red-de-apoyo",
+      "title": "Tu red de apoyo y conocimiento",
+      "description": "Un lugar para encontrar respuestas, aportar ideas y sumar experiencias.",
+      "display": "col-3-transparent",
+      "bgColor": "foro",
+      "cards": [
+        {
+          "color": "transparent",
+          "title": "Conecta con otras entidades",
+          "description": "Un formulario onRelaciónate en un entorno horizontal con personas y colectivos de la economía social.",
+          "image": {
+            "src": "heart-handshake.png",
+            "alt": "Corazón y apretón de manos"
+          }
+        },
+        {
+          "color": "transparent",
+          "title": "Comparte y consulta recursos",
+          "description": "Difunde tus aprendizajes y accede a herramientas compartidas por la comunidad",
+          "image": {
+            "src": "file-plus.png",
+            "alt": "Archivo con símbolo de suma"
+          }
+        },
+        {
+          "color": "transparent",
+          "title": "Aprende y aporta saberes colectivos",
+          "description": "Plantea dudas, responde a otras entidades y participa en la construcción de conocimiento común.",
+          "image": {
+            "src": "brain-circuit.png",
+            "alt": "Circuito cerebral"
+          }
+        },
+        {
+          "color": "transparent",
+          "title": "Explora las categorías",
+          "description": "Accede a debates organizados por temáticas: ODS, igualdad, aula virtual y más.",
+          "image": {
+            "src": "layout-grid.png",
+            "alt": "Colabora en iniciativas"
+          }
+        },
+        {
+          "color": "transparent",
+          "title": "Colabora en iniciativas",
+          "description": "Descubre proyectos y campañas que se gestan desde la intercooperación.",
+          "image": {
+            "src": "puzzle.png",
+            "alt": "Puzle"
+          }
+        },
+        {
+          "color": "transparent",
+          "title": "Tu aportación cuenta",
+          "description": "Tus aportes suman: las dinámicas de gamificación destacan a quienes más contribuyen.",
+          "image": {
+            "src": "trophy.png",
+            "alt": "Trofeo"
+          }
+        }
+      ],
+      "hasButton": true,
+      "buttonSection": {
+        "title": "¿Lista para sumarte al Espacio de intercooperación?",
+        "button": {
+          "label": "Entrar al espacio",
+          "link": "",
+          "color": "button"
+        }
+      }
+    }
+  }
+]

data/es/iguales.json

@@ -11,7 +11,7 @@
         "alt": "Iguales Imagenes Fondo"
       },
       "button": {
-        "label": "comenzar autodianóstico",
+        "label": "comenzar autodiagnóstico",
         "link": "",
         "color": "button"
       }
@@ -39,7 +39,7 @@
   {
     "component": "SectionWithCards",
     "props": {
-      "id": "herramientas",
+      "id": "como-funciona-iguales",
       "title": "¿Cómo funciona?",
       "description": "Responde un formulario y recibe un itinerario con propuestas adaptadas a tu entidad.",
       "display": "col-3-transparent",
@@ -82,8 +82,8 @@
       "content": "La igualdad no se presume, se demuestra.</br>Y para demostrarla, hace falta evaluarla.",
       "textColor": "iguales",
       "shapes": {
-        "shape_1": "formas-cita.png",
+        "shape_1": "formas-cita-iguales.png",
-        "shape_2": "formas-cita-cierre.png"
+        "shape_2": "formas-cita-cierre-iguales.png"
       }
     }
   },

data/es/ods.json

@@ -54,6 +54,7 @@
         "<strong>Aplicar una metodología compartida</strong>, validada por el <strong>PNUD</strong> y adaptada por <strong>COCETA</strong>.",
         "Contribuir a una red sectorial de <strong>conocimiento y transparencia.</strong>"
       ],
+      "hasBullets": true,
       "position": "left",
       "bgColor": "light",
       "image": {

pages/[langcode]/certifica-t.vue

@@ -1,16 +1,50 @@
 <template>
-  <div>
+  <main v-if="consumoComponents" class="min-h-screen relative mx-8">
-    <h1>Certifica T</h1>
+    <template v-for="(component, index) in consumoComponents" :key="`consumo-component-${component.component}-${index}`">
-    <p>Herramienta para el diagnóstico en sostenibilidad.</p>
+      <component 
-  </div>
+        :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';
+import TextWithIconAndButtons from '../../components/TextWithIconAndButtons.vue';
+import Quote from '../../components/Quote.vue';
 
+export default {
+  components: {
+    HeroPages,
+    TextWithImage,
+    TextWithIconAndButtons,
+    SectionWithCards,
+    Quote
+  },
+  data() {
+    return {
+      consumoComponents: []
+    };
+  },
+  async created() {
+    const langcode = this.$route.params.langcode;
+    try {
+      const res = await import(`~/data/${langcode}/certifica-t.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>

pages/[langcode]/foro.vue

@@ -1,16 +1,45 @@
 <template>
-  <div>
+  <main v-if="consumoComponents" class="min-h-screen relative mx-8">
-    <h1>Foro</h1>
+    <template v-for="(component, index) in consumoComponents" :key="`consumo-component-${component.component}-${index}`">
-    <p>Espacio de participación e intercambio entre entidades.</p>
+      <component 
-  </div>
+        :is="component.component" 
+        v-if="component" 
+        v-bind="component.props" />
+    </template>
+  </main>
 </template>
 
 <script>
+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}/foro.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>