text-with-image adapt to new design

assets/css/main.css

@@ -49,8 +49,10 @@
   --spacing-32: 2rem; /* 32px */
   --spacing-10.2: 10.25rem; /* 164px */
   --spacing-20.1: 20.168rem; /* 322px */
+  --spacing-20.9: 20.938rem; /* 335px */
   --spacing-21.8: 21.875rem; /* 350px */
   --spacing-25.6: 25.688rem; /* 411px */
+  --spacing-124.2: 31.063rem; /* 497px */
   --spacing-44.8: 44.813rem; /* 717px */
 
 }
@@ -233,19 +235,6 @@ h5 {
     var(--Background--bg-light, #F9F4F2);
 }
 
-.bg-gradient-conic-hero {
-  background: conic-gradient(
-  from 290deg at 10% 35%,
-  var(--Color-base--color-certifica-base, rgba(202, 240, 63, 0.10)) 0deg,
-  var(--Color-base--color-consumo-base, rgba(242, 140, 140, 0.10)) 90deg,
-  var(--Color-base--color-aula-base, rgba(92, 170, 204, 0.10)) 180deg,
-  var(--Color-base--color-ods-base, rgba(57, 182, 137, 0.10)) 270deg,
-  var(--Color-base--color-certifica-base, rgba(202, 240, 63, 0.10)) 360deg
-);
-background-color: var(--Background--bg-light, #f9f4f2);
-background-repeat: no-repeat;
-background-size: cover;
-}
 
 .bg-gradient-conic-2 {
   min-height: 100%;
@@ -261,3 +250,31 @@ background-size: cover;
     background-repeat: no-repeat;
     background-size: cover;
   }
+
+.bg-gradient-conic-3 {
+  background: conic-gradient(from 185deg at 9.57% 56.1%, var(--Color-base--color-certifica-base, rgba(202, 240, 63, 0.10)) 53.653846979141235deg, var(--Color-base--color-consumo-base, rgba(242, 140, 140, 0.10)) 155.76923489570618deg, var(--Color-base--color-aula-base, rgba(92, 170, 204, 0.10)) 233.65383625030518deg, rgba(57, 182, 137, 0.10) 304.61538791656494deg), 
+  var(--Background--bg-light, #F9F4F2);
+  background-repeat: no-repeat;
+  background-size: cover;
+}
+  
+  .bg-gradient-conic-hero {
+    background: conic-gradient(
+    from 290deg at 10% 35%,
+    var(--Color-base--color-certifica-base, rgba(202, 240, 63, 0.10)) 0deg,
+    var(--Color-base--color-consumo-base, rgba(242, 140, 140, 0.10)) 90deg,
+    var(--Color-base--color-aula-base, rgba(92, 170, 204, 0.10)) 180deg,
+    var(--Color-base--color-ods-base, rgba(57, 182, 137, 0.10)) 270deg,
+    var(--Color-base--color-certifica-base, rgba(202, 240, 63, 0.10)) 360deg
+    );
+    background-color: var(--Background--bg-light, #f9f4f2);
+    background-repeat: no-repeat;
+    background-size: cover;
+  }
+
+.bg-gradient-conic-cards {
+  background: conic-gradient(from 185deg at 9.57% 56.1%, var(--Color-base--color-certifica-base, rgba(202, 240, 63, 0.05)) 53.653846979141235deg, var(--Color-base--color-consumo-base, rgba(242, 140, 140, 0.05)) 155.76923489570618deg, var(--Color-base--color-aula-base, rgba(92, 170, 204, 0.05)) 233.65383625030518deg, rgba(57, 182, 137, 0.05) 304.61538791656494deg), 
+  var(--Background--bg-light, #F9F4F2);
+  background-repeat: no-repeat;
+  background-size: cover;
+}

components/HeroPages.vue

@@ -0,0 +1,71 @@
+<template>
+  <section
+    :id="id"
+    class="relative flex flex-col p-4 md:p-12 mb-8 items-center justify-center gap-4 md:gap-8 text-center  rounded-3xl"
+    :class="{
+        'bg-consumo-base bg-linear-to-t from-consumo-base to-consumo-extra-light': bgColor === 'consumo',
+        'bg-iguales-base bg-linear-to-t from-iguales-base to-iguales-extra-light': bgColor === 'iguales',
+        'bg-aula-base bg-linear-to-t from-aula-base to-aula-extra-light': bgColor === 'aula',
+        'bg-certifica-base bg-linear-to-t from-certifica-base to-certifica-extra-light': bgColor === 'certifica',
+        'bg-foro-base bg-linear-to-t from-foro-base to-foro-extra-light': bgColor === 'foro',
+        'bg-ods-base bg-linear-to-t from-ods-base to-ods-extra-light': bgColor === 'ods',
+      }">
+    
+    <img 
+    
+      v-if="bgImage" 
+      :src="`/img/${bgImage.src}`" 
+      :alt="bgImage.alt" 
+      class="absolute left-0 bottom-0 w-full h-auto" >
+
+    <div class=" flex flex-col items-center z-10 gap-6">
+      <h1 class="font-bold max-w-4xl">{{ title }}</h1>
+      <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>
+  </section>
+</template>
+
+<script>
+
+export default {
+  props: {
+    id: {
+      type: String,
+      default: "",
+    },
+    title: {
+      type: String,
+      default: "",
+    },
+    subtitle: {
+      type: String,
+      default: "",
+    },
+    bgColor: {
+      type: String,
+      default: "consumo",
+    },
+    bgImage: {
+      type: Object,
+      default: () => ({
+        src: "",
+        alt: "",
+      }),
+    },
+    button: {
+      type: Object,
+      default: () => ({
+        label: "",
+        link: "",
+        color: "button",
+      }),
+    }
+  },
+  
+};
+</script>

components/NavBar.vue

@@ -35,11 +35,11 @@
               v-show="dropdownOpen"
               class="absolute right-0 mt-2 w-56 bg-white rounded-3xl shadow-lg p-4 space-y-2 z-50 text-sm text-center"
             >
-              <li><NuxtLink :to="`/${langcode}/consumo`" class="block hover:bg-button hover:text-white px-2 py-1 rounded-t-2xl">CONSUMO CUIDADO</NuxtLink></li>
+              <li><NuxtLink :to="`/${langcode}/consumo-cuidado`" class="block hover:bg-button hover:text-white px-2 py-1 rounded-t-2xl">CONSUMO CUIDADO</NuxtLink></li>
               <li><NuxtLink :to="`/${langcode}/aula-virtual`" class="block hover:bg-button hover:text-white px-2 py-1">AULA VIRTUAL</NuxtLink></li>
               <li><NuxtLink :to="`/${langcode}/iguales`" class="block hover:bg-button hover:text-white px-2 py-1">IGUALES</NuxtLink></li>
               <li><NuxtLink :to="`/${langcode}/ods`" class="block hover:bg-button hover:text-white px-2 py-1">ODS</NuxtLink></li>
-              <li><NuxtLink :to="`/${langcode}/certifica`" class="block hover:bg-button hover:text-white px-2 py-1">CERTIFICA-T</NuxtLink></li>
+              <li><NuxtLink :to="`/${langcode}/certifica-t`" class="block hover:bg-button hover:text-white px-2 py-1">CERTIFICA-T</NuxtLink></li>
               <li><NuxtLink :to="`/${langcode}/foro`" class="block hover:bg-button hover:text-white px-2 py-1 rounded-b-2xl">FORO</NuxtLink></li>
             </ul>
           </transition>
@@ -78,11 +78,11 @@
           <li class="p-2"><NuxtLink :to="`/${langcode}/`">INICIO</NuxtLink></li>
           <li class="p-2"><NuxtLink :to="`/${langcode}/nosotras`">NOSOTRAS</NuxtLink></li>
           <li class="p-2 border-b">HERRAMIENTAS</li>
-          <li class="p-2"><NuxtLink :to="`/${langcode}/consumo`">CONSUMO CUIDADO</NuxtLink></li>
-          <li class="p-2"><NuxtLink :to="`/${langcode}/aula`">AULA VIRTUAL</NuxtLink></li>
+          <li class="p-2"><NuxtLink :to="`/${langcode}/consumo-cuidado`">CONSUMO CUIDADO</NuxtLink></li>
+          <li class="p-2"><NuxtLink :to="`/${langcode}/aula-virtual`">AULA VIRTUAL</NuxtLink></li>
           <li class="p-2"><NuxtLink :to="`/${langcode}/iguales`">IGUALES</NuxtLink></li>
           <li class="p-2"><NuxtLink :to="`/${langcode}/ods`">ODS</NuxtLink></li>
-          <li class="p-2"><NuxtLink :to="`/${langcode}/certifica`">CERTIFICA-T</NuxtLink></li>
+          <li class="p-2"><NuxtLink :to="`/${langcode}/certifica-t`">CERTIFICA-T</NuxtLink></li>
           <li class="p-2"><NuxtLink :to="`/${langcode}/foro`">FORO</NuxtLink></li>
         </ul>
       </div>

components/SectionWithCards.vue

@@ -1,7 +1,7 @@
 <template>
   <section 
   :id="id"
-  class="flex flex-col gap-8 lg:gap-21 rounded-3xl mb-8 px-4 pt-12 pb-16 md:p-16 md:pb-24 bg-gradient-conic-2 ">
+  class="flex flex-col gap-8 lg:gap-21 rounded-3xl mb-8 px-4 pt-12 pb-16 md:p-16 md:pb-24 bg-gradient-conic-cards ">
     <div class="flex flex-col justify-center items-center w-full">
       <h2 class="text-4xl font-bold mb-6">{{ title }}</h2>
       <p class="mb-8 text-lg">{{ description }}</p>

components/TextWithImage.vue

@@ -1,21 +1,45 @@
 <template>
-  <section class="rounded-3xl mb-8 px-4 py-12 md:p-12 lg:p-16 bg-gradient-conic-2">
-    <div class="flex flex-col lg:flex-row gap-x-12 gap-y-4 mx-auto container justify-center items-center"
+  <section 
+    class="rounded-3xl mb-8 px-4 py-12 md:p-12 lg:p-16"
     :class="{
-        'items-center justify-center': position === 'left',
-        'flex-row-reverse items-center justify-center': position === 'right'
+      'bg-gradient-conic-2': bgColor === 'conic-2',
+      'bg-background-light': bgColor === 'light'
     }">
-      <div class="h-20.1 w-20.1 rounded-full overflow-hidden border-2 border-white">
-        <img 
+    <div 
+      class="flex flex-col lg:flex-row"
+      :class="{
+        'lg:flex-row': position === 'left',
+        'lg:flex-row-reverse': position === 'right',
+        'items-center gap-12': image.display === 'circle',
+        'items-start': image.display === 'normal' && position === 'left',
+        'items-start justify-between': 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-20.9 w-fit': image.display === 'normal'
+        }">
+        <img 
           :src="`/img/${image.src}`"
           :alt="image.alt"
-        class="w-full h-full object-cover"
+          class="w-full h-full"
+          :class="{
+            'object-cover': image.display === 'circle',
+            'object-contain': image.display === 'normal'
+          }"
         />
       </div>
-      <div class="flex flex-col gap-4 w-full lg:w-2/3">
+
+      <div 
+        class="flex flex-col gap-4 w-full"
+        :class="{
+          'lg:w-2/3': image.display === 'circle',
+          'lg:w-1/2': image.display === 'normal',
+        }">
         <h2 class="font-bold ">{{ title }}</h2>
-        <ul class="flex flex-col gap-6">
+        <ul v-if="paragraphs" class="flex flex-col gap-6">
           <li v-for="(paragraph, index) in paragraphs" :key="`paragraph-${id}-${index}`">
             <p class="text-lg" v-html="paragraph"></p>
           </li>
@@ -44,13 +68,24 @@ export default {
       type: String,
       default: 'left'
     },
+    bgColor: {
+      type: String,
+      default: 'conic-2'
+    },
     image: {
       type: Object,
       default: () => ({
         src: '',
-        alt: ''
+        alt: '',
+        display: ''
       })
     }
   }
 }
 </script>
+
+<style scoped>
+.custom-clip {
+  clip-path: polygon(0 10%, 100% 0%, 100% 90%, 0% 100%);
+}
+</style>

data/es/consumo-cuidado.json

@@ -0,0 +1,39 @@
+[
+  {
+    "component": "HeroPages",
+    "props": {
+      "id": "hero-pages",
+      "title": "Consumo Cuidado",
+      "subtitle": "<span class='font-semibold'>Marketplace de productos y servicios responsables.</span></br> Conecta con iniciativas alineadas con tus valores.",
+      "bgColor": "consumo",
+      "bgImage": {
+        "src": "hero-consumo-formas.png",
+        "alt": "Consumo Cuidado Imagenes Fondo"
+      },
+      "button": {
+        "label": "Entrar al Marketplace",
+        "link": "",
+        "color": "button"
+      }
+    }
+  },
+  {
+    "component": "TextWithImage",
+    "id": "que-es-consumo-cuidado",
+    "props": {
+      "title": "¿Qué es Consumo Cuidado?",
+      "paragraphs": [
+        "<strong>Consumo Cuidado</strong> es el marketplace de la economía social. Una plataforma colectiva donde cooperativas, asociaciones, entidades sociales y productoras responsables pueden ofrecer sus productos y servicios.",
+        "Frente a la dispersión actual de iniciativas, esta herramienta permite <strong>agrupar y visibilizar</strong> las propuestas de consumo transformador en un solo espacio, accesible y fácil de usar."
+      ],
+      "position": "right",
+      "bgColor": "light",
+
+      "image": {
+        "src": "bolsas.png",
+        "alt": "Bolsas de productos sostenibles",
+        "display": "normal"
+      }
+    }
+  }
+]

data/es/index.json

@@ -138,7 +138,8 @@
       "position": "left",
       "image": {
         "src": "hands.png",
-        "alt": "Puños unidos en un gesto de fuerza y unidad"
+        "alt": "Puños unidos en un gesto de fuerza y unidad",
+        "display": "circle"
       }
     }
   },

pages/[langcode]/consumo-cuidado.vue

@@ -1,16 +1,44 @@
 <template>
-  <div>
-    <h1>Consumo Cuidado</h1>
-    <p>Marketplace de productos y servicios responsables.</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';
 
+export default {
+  components: {
+    HeroPages,
+    TextWithImage
+  },
+  data() {
+    return {
+      consumoComponents: []
+    };
+  },
+  async created() {
+    const langcode = this.$route.params.langcode;
+    try {
+      const res = await import(`~/data/${langcode}/consumo-cuidado.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>