wip ods page

components/TextWithIconAndButtons.vue

@@ -21,11 +21,18 @@
       <img v-if="icon" :src="`/svg/${icon}`" :alt="`icon-${icon}`" class="w-15 h-15" />
       <h2 class="font-bold max-w-4xl">{{ title }}</h2>
       <p class="text-2xl max-w-3xl" v-html="subtitle"></p>
-      <NuxtLink v-if="button" :to="button.link">
-        <ButtonCTA :color="button.color" class="uppercase mt-6">
-          {{ button.label }}
-        </ButtonCTA>
-      </NuxtLink>
+      <div class="flex flex-col md:flex-row items-center justify-center gap-4">
+        <NuxtLink v-if="button" :to="button.link">
+          <ButtonCTA :color="button.color" class="uppercase mt-6">
+            {{ button.label }}
+          </ButtonCTA>
+        </NuxtLink>
+        <NuxtLink v-if="button2" :to="button2.link">
+          <ButtonCTA :color="button2.color" class="uppercase mt-6">
+            {{ button2.label }}
+          </ButtonCTA>
+        </NuxtLink>
+      </div>
     </div>
   </section>
 </template>
@@ -68,6 +75,10 @@ export default {
         link: "",
         color: "button",
       }),
+    },
+    button2: {
+      type: Object,
+      default: null,
     }
   },
   

data/es/consumo-cuidado.json

@@ -98,7 +98,7 @@
     }
   },
   {
-    "component": "TextWithIconAndButton",
+    "component": "TextWithIconAndButtons",
     "props": {
       "id": "consumo-cuidado-cta",
       "title": "Conecta con quienes producen con cuidado.",

data/es/iguales.json

@@ -111,7 +111,7 @@
     }
   },
   {
-    "component": "TextWithIconAndButton",
+    "component": "TextWithIconAndButtons",
     "props": {
       "id": "iguales-cta",
       "title": "Evalúa tu compromiso con la igualdad.",

data/es/ods.json

@@ -0,0 +1,89 @@
+[
+  {
+    "component": "HeroPages",
+    "props": {
+      "id": "hero-pages-ods",
+      "title": "ODS",
+      "subtitle": "<span class='font-semibold'>Índice de Compromiso Social con la Agenda 2030</span></br>Una herramienta para medir, visibilizar y acelerar los ODS desde la economía social.",
+      "bgColor": "ods",
+      "bgImage": {
+        "src": "hero-ods-formas.png",
+        "alt": "ods Imagenes Fondo"
+      },
+      "button": {
+        "label": "comenzar autodianóstico",
+        "link": "",
+        "color": "button"
+      }
+    }
+  },
+  {
+    "component": "TextWithImage",
+    "id": "que-es-ods",
+    "props": {
+      "title": "ODS desde la economía social: evaluación y transparencia",
+      "paragraphs": [
+        "<strong>El Índice de Compromiso Social con los ODS</strong> es una herramienta de autoevaluación y transparencia que permite a las entidades de la economía social <strong>valorar, registrar y compartir su avance hacia la Agenda 2030</strong> de forma abierta, geolocalizada y adaptada a su realidad.",
+        "Esta herramienta está basada en la plataforma <strong>OpenODS Index</strong> y ha sido adaptada específicamente para nuestro sector, con una metodología validada por el <strong>PNUD</strong> y ajustada por <strong>COCETA</strong> a las características de las cooperativas de trabajo asociado.",
+        "Ahora, desde <strong>kit-ECO.SICIAL</strong>, trabajamos para ponerla <strong>al servicio de todas las entidades de la economía social.</strong>"
+      ],
+      "position": "right",
+      "bgColor": "light",
+      "image": {
+        "src": "bodegon-objetos-sostenibles.png",
+        "alt": "Bodegón de objetos sostenibles",
+        "display": "normal"
+      }
+    }
+  },
+  {
+    "component": "TextWithImage",
+    "id": "para-que-sirve-ods",
+    "props": {
+      "title": "¿Para qué sirve?",
+      "paragraphs": [
+        "Esta herramienta te permite mostrar de forma clara y accesible lo que tu entidad ya está haciendo por un desarrollo más justo y sostenible.
Con una metodología común, puedes generar datos públicos, actualizables y con enfoque territorial.",
+        "Con esta herramienta puedes:"
+      ],
+      "list": [
+        "<strong>Autoevaluar</strong> tu compromiso con los Objetivos de Desarrollo Sostenible.",
+        "<strong>Registrar y organizar</strong> tus acciones, planes y programas vinculados a los ODS.",
+        "<strong>Publicar un perfil abierto</strong> que muestra tu compromiso y evolución.",
+        "<strong>Geolocalizar</strong> tus iniciativas y situarlas en un mapa colectivo.",
+        "<strong>Incorporar información flexible</strong>, desde acciones puntuales hasta planes plurianuales.",
+        "<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>"
+      ],
+      "position": "left",
+      "bgColor": "light",
+      "image": {
+        "src": "empresarios-trabajando-en-grafico.png",
+        "alt": "Empresarios trabajando en gráfico",
+        "display": "normal"
+      }
+    }
+  },
+  {
+    "component": "TextWithIconAndButtons",
+    "props": {
+      "id": "ods-cta",
+      "title": "¿Quieres empezar o saber más?",
+      "subtitle": "Explora la herramienta o accede al aula virtual para formarte y poner en marcha el Índice en tu entidad.</br>Desde <strong>kit-ECO.SOCIAL</strong> te acompañamos en cada paso.",
+      "bgColor": "ods",
+      "bgImage": {
+        "src": "hero-ods-formas.png",
+        "alt": "ods Imagenes Fondo"
+      },
+      "button": {
+        "label": "Explorar la herramienta",
+        "link": "",
+        "color": "button"
+      },
+      "button2": {
+        "label": "Acceder al aula virtual",
+        "link": "",
+        "color": "button"
+      }
+    }
+  }
+]

pages/[langcode]/consumo-cuidado.vue

@@ -13,13 +13,13 @@
 import HeroPages from '~/components/HeroPages.vue';
 import TextWithImage from '../../components/TextWithImage.vue';
 import SectionWithCards from '../../components/SectionWithCards.vue';
-import TextWithIconAndButton from '../../components/TextWithIconAndButton.vue';
+import TextWithIconAndButtons from '../../components/TextWithIconAndButtons.vue';
 
 export default {
   components: {
     HeroPages,
     TextWithImage,
-    TextWithIconAndButton,
+    TextWithIconAndButtons,
     SectionWithCards
   },
   data() {

pages/[langcode]/iguales.vue

@@ -13,14 +13,14 @@
 import HeroPages from '~/components/HeroPages.vue';
 import TextWithImage from '../../components/TextWithImage.vue';
 import SectionWithCards from '../../components/SectionWithCards.vue';
-import TextWithIconAndButton from '../../components/TextWithIconAndButton.vue';
+import TextWithIconAndButtons from '../../components/TextWithIconAndButtons.vue';
 import Quote from '../../components/Quote.vue';
 
 export default {
   components: {
     HeroPages,
     TextWithImage,
-    TextWithIconAndButton,
+    TextWithIconAndButtons,
     SectionWithCards,
     Quote
   },

pages/[langcode]/ods.vue

@@ -1,16 +1,48 @@
 <template>
-  <div>
-    <h1>ODS</h1>
-    <p>Evalúa tu contribución a los ODS con OpenODS.</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';
+import TextWithIconAndButtons from '../../components/TextWithIconAndButtons.vue';
+
+export default {
+  components: {
+    HeroPages,
+    TextWithImage,
+    TextWithIconAndButtons,
+    SectionWithCards
+  },
+  data() {
+    return {
+      consumoComponents: []
+    };
+  },
+  async created() {
+    const langcode = this.$route.params.langcode;
+    try {
+      const res = await import(`~/data/${langcode}/ods.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>