ods and foro pages

pages/[langcode]/certifica-t.vue

@@ -1,16 +1,50 @@
 <template>
-  <div>
-    <h1>Certifica T</h1>
-    <p>Herramienta para el diagnóstico en sostenibilidad.</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';
+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>
+}
+</script>

pages/[langcode]/foro.vue

@@ -1,16 +1,45 @@
 <template>
-  <div>
-    <h1>Foro</h1>
-    <p>Espacio de participación e intercambio entre entidades.</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}/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>
+}
+</script>