iguales page

assets/css/main.css

@@ -8,6 +8,7 @@
   --color-consumo-base: #F28C8C;
   --color-consumo-light: #F6B1B1;
   --color-consumo-extra-light: #FAD1D1;
+  --color-iguales-dark: #682B8E;
   --color-iguales-base: #C98EEF;
   --color-iguales-light: #DAB2F4;
   --color-iguales-extra-light: #E9D2F9;
@@ -47,7 +48,9 @@
 
   /* Spacing */
   --spacing-32: 2rem; /* 32px */
+  --spacing-38: 9.5rem; /* 154px */
   --spacing-10.2: 10.25rem; /* 164px */
+  --spacing-69: 17.375rem; /* 278px */
   --spacing-20.1: 20.168rem; /* 322px */
   --spacing-20.3: 20.313rem; /* 326px */
   --spacing-20.9: 20.938rem; /* 335px */

components/HeroPages.vue

@@ -1,7 +1,7 @@
 <template>
   <section
     :id="id"
-    class="relative flex flex-col p-8 md:p-12 mb-8 items-center justify-center gap-4 md:gap-8 text-center  rounded-3xl"
+    class="relative flex flex-col p-8 md:p-12 mb-8 items-center justify-center gap-4 md:gap-8 text-center overflow-hidden 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',

components/Quote.vue

@@ -0,0 +1,61 @@
+<template>
+  <section
+    :id="id"
+    class="flex p-8 md:p-12 mb-8 rounded-3xl 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}`" 
+      alt="hero background shape right" 
+      class="h-full w-full object-contain" >
+    </div>
+
+    <div class="flex flex-col items-center justify-center gap-4 md:gap-8 w-full">
+      <h2 
+        class="font-semibold italic"
+        :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">
+      <img 
+      :src="`/img/${shapes.shape_2}`" 
+      alt="hero background shape right" 
+      class="h-full w-full object-contain" >
+    </div>
+  </section>
+</template>
+
+<script>
+
+export default {
+  props: {
+    id: {
+      type: String,
+      default: "",
+    },
+    content: {
+      type: String,
+      default: "",
+    },
+    textColor: {
+      type: String,
+      default: "consumo",
+    },
+    shapes: {
+      type: Object,
+      default: () => ({
+        shape_1: "",
+        shape_2: "",
+      }),
+    },
+  },
+  
+};
+</script>

components/TextWithIconAndButton.vue

@@ -1,7 +1,7 @@
 <template>
   <section
     :id="id"
-    class="relative flex flex-col p-8 md:p-12 mb-8 items-center justify-center gap-4 md:gap-8 text-center  rounded-3xl"
+    class="relative flex flex-col p-8 md:p-12 mb-8 items-center justify-center gap-4 md:gap-8 text-center overflow-hidden rounded-3xl"
     :class="{
         'bg-consumo-base bg-linear-to-b from-consumo-light to-consumo-extra-light': bgColor === 'consumo',
         'bg-iguales-base bg-linear-to-b from-iguales-light to-iguales-extra-light': bgColor === 'iguales',
@@ -15,7 +15,7 @@
       v-if="bgImage" 
       :src="`/img/${bgImage.src}`" 
       :alt="bgImage.alt" 
-      class="absolute left-0 top-10 w-full h-auto" >
+      class="absolute left-0 top-0 w-full h-full" >
 
     <div class=" flex flex-col items-center z-10 gap-6">
       <img v-if="icon" :src="`/svg/${icon}`" :alt="`icon-${icon}`" class="w-15 h-15" />

data/es/iguales.json

@@ -0,0 +1,132 @@
+[
+  {
+    "component": "HeroPages",
+    "props": {
+      "id": "hero-pages-iguales",
+      "title": "Iguales",
+      "subtitle": "<span class='font-semibold'>Una herramienta para avanzar hacia la igualdad real en tu entidad</span></br>Evalúa y mejora la igualdad de forma sencilla.",
+      "bgColor": "iguales",
+      "bgImage": {
+        "src": "hero-iguales-formas.png",
+        "alt": "Iguales Imagenes Fondo"
+      },
+      "button": {
+        "label": "comenzar autodianóstico",
+        "link": "",
+        "color": "button"
+      }
+    }
+  },
+  {
+    "component": "TextWithImage",
+    "id": "que-es-iguales",
+    "props": {
+      "title": "¿Qué es “Iguales”?",
+      "paragraphs": [
+        "<strong>Una herramienta de autodiagnóstico y mejora sobre igualdad de género pensada específicamente para entidades de economía social.</strong></br>Aunque muchas entidades ya apuestan por un trabajo igualitario, a menudo la intención no basta. Iguales nace para apoyar ese compromiso, ofreciendo un espacio seguro y adaptado desde el que evaluar las medidas en marcha, detectar carencias y avanzar hacia una igualdad efectiva.",
+        "Además, puede ayudarte a iniciar o revisar tu <strong>Plan de Igualdad</strong>, con propuestas ajustadas a la normativa y a la realidad concreta de tu organización.",
+        "Con esta herramienta, también estarás contribuyendo al cumplimiento de los <strong>Objetivos de Desarrollo Sostenible</strong>, especialmente el <strong>ODS 5 (Igualdad de género)</strong>, reforzando tu papel transformador como entidad de la economía social."
+      ],
+      "position": "right",
+      "bgColor": "light",
+      "image": {
+        "src": "people.png",
+        "alt": "Personas abrandose",
+        "display": "normal"
+      }
+    }
+  },
+  {
+    "component": "SectionWithCards",
+    "props": {
+      "id": "herramientas",
+      "title": "¿Cómo funciona?",
+      "description": "Responde un formulario y recibe un itinerario con propuestas adaptadas a tu entidad.",
+      "display": "col-3-transparent",
+      "bgColor": "iguales",
+      "cards": [
+        {
+          "color": "transparent",
+          "title": "AUTODIAGNÓSTICO RÁPIDO",
+          "description": "Un formulario online para conocer qué medidas de igualdad estás aplicando y detectar posibles mejoras.",
+          "image": {
+            "src": "search-check.png",
+            "alt": "Búsqueda de verificación"
+          }
+        },
+        {
+          "color": "transparent",
+          "title": "ITINERARIO PERSONALIZADO",
+          "description": "Recibe en tu email un informe con recomendaciones ajustadas a tu realidad y obligaciones legales.",
+          "image": {
+            "src": "route.png",
+            "alt": "Ruta"
+          }
+        },
+        {
+          "color": "transparent",
+          "title": "PROPUESTAS CONCRETAS",
+          "description": "Te ayudamos a actuar: medidas voluntarias, formaciones, acciones de cumplimiento... según tus resultados.",
+          "image": {
+            "src": "clipboard-list.png",
+            "alt": "Lista de tareas"
+          }
+        }
+      ]
+    }
+  },
+  {
+    "component": "Quote",
+    "props": {
+      "id": "quote-iguales",
+      "content": "La igualdad no se presume, se demuestra.</br>Y para demostrarla, hace falta evaluarla.",
+      "textColor": "iguales",
+      "shapes": {
+        "shape_1": "formas-cita.png",
+        "shape_2": "formas-cita-cierre.png"
+      }
+    }
+  },
+  {
+    "component": "TextWithImage",
+    "id": "a-quien-va-dirigido-iguales",
+    "props": {
+      "title": "¿A quién va dirigido?",
+      "paragraphs": [
+        "“Iguales” está pensada para entidades de economía social que quieren pasar del compromiso a la acción en materia de igualdad:"
+      ],
+      "list": [
+        "<strong>Cooperativas, asociaciones y fundaciones</strong> que deseen revisar sus prácticas desde una perspectiva igualitaria.",
+        "<strong>Equipos técnicos y responsables de igualdad</strong> que necesitan una herramienta ágil para detectar puntos débiles y planificar mejoras.",
+        "<strong>Organizaciones que cumplen o deben cumplir normativa</strong> y buscan claridad sobre sus obligaciones reales y cómo abordarlas.",
+        "<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": "meeting.png",
+        "alt": "Reunión de trabajo",
+        "display": "normal"
+      }
+    }
+  },
+  {
+    "component": "TextWithIconAndButton",
+    "props": {
+      "id": "iguales-cta",
+      "title": "Evalúa tu compromiso con la igualdad.",
+      "subtitle": "Diagnostica tu entidad y accede a propuestas ajustadas para avanzar hacia la igualdad.",
+      "bgColor": "iguales",
+      "icon": "scale.svg",
+      "bgImage": {
+        "src": "hero-iguales-formas.png",
+        "alt": "Iguales Imagenes Fondo"
+      },
+      "button": {
+        "label": "Comenzar autodiagnóstico",
+        "link": "",
+        "color": "button"
+      }
+    }
+  }
+]

pages/[langcode]/iguales.vue

@@ -1,16 +1,50 @@
 <template>
-  <div>
+  <main v-if="consumoComponents" class="min-h-screen relative mx-8">
-    <h1>Iguales</h1>
+    <template v-for="(component, index) in consumoComponents" :key="`consumo-component-${component.component}-${index}`">
-    <p>Herramienta para el diagnóstico en igualdad.</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 TextWithIconAndButton from '../../components/TextWithIconAndButton.vue';
+import Quote from '../../components/Quote.vue';
+
+export default {
+  components: {
+    HeroPages,
+    TextWithImage,
+    TextWithIconAndButton,
+    SectionWithCards,
+    Quote
+  },
+  data() {
+    return {
+      consumoComponents: []
+    };
+  },
+  async created() {
+    const langcode = this.$route.params.langcode;
+    try {
+      const res = await import(`~/data/${langcode}/iguales.json`);
+      this.consumoComponents = res.default;
+    } catch (err) {
+      console.error('Error al cargar contenido:', err);
+      this.consumoComponents = [
+        {
+          component: 'ErrorComponent',
+          props: {
+            message: 'Contenido no disponible',
+          },
+        },
+      ];
+    }
   }
-</script>
+}
-
+</script>
-<style lang="scss" scoped>
-
-</style>

public/svg/scale.svg

@@ -0,0 +1,3 @@
+<svg width="61" height="61" viewBox="0 0 61 61" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M18 52.8789H43M30.5 7.87891V52.8789M8 17.8789H13C18 17.8789 25.5 15.3789 30.5 12.8789C35.5 15.3789 43 17.8789 48 17.8789H53M40.5 40.3789L48 20.3789L55.5 40.3789C53.325 42.0039 50.7 42.8789 48 42.8789C45.3 42.8789 42.675 42.0039 40.5 40.3789ZM5.5 40.3789L13 20.3789L20.5 40.3789C18.325 42.0039 15.7 42.8789 13 42.8789C10.3 42.8789 7.675 42.0039 5.5 40.3789Z" stroke="black" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>