diff --git a/assets/css/main.css b/assets/css/main.css
index 1a3fddd..07443e7 100644
--- a/assets/css/main.css
+++ b/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 */
diff --git a/components/HeroPages.vue b/components/HeroPages.vue
index 3c5fb7f..ceb97ee 100644
--- a/components/HeroPages.vue
+++ b/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',
diff --git a/components/Quote.vue b/components/Quote.vue
new file mode 100644
index 0000000..6e3fa3d
--- /dev/null
+++ b/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>
\ No newline at end of file
diff --git a/components/TextWithIconAndButton.vue b/components/TextWithIconAndButton.vue
index 3df3098..14d987a 100644
--- a/components/TextWithIconAndButton.vue
+++ b/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" />
diff --git a/data/es/iguales.json b/data/es/iguales.json
new file mode 100644
index 0000000..1465e1a
--- /dev/null
+++ b/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"
+      }
+    }
+  }
+]
\ No newline at end of file
diff --git a/pages/[langcode]/iguales.vue b/pages/[langcode]/iguales.vue
index d3b93cd..a1efe5f 100644
--- a/pages/[langcode]/iguales.vue
+++ b/pages/[langcode]/iguales.vue
@@ -1,16 +1,50 @@
 <template>
-  <div>
-    <h1>Iguales</h1>
-    <p>Herramienta para el diagnóstico en igualdad.</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 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>
-
-<style lang="scss" scoped>
-
-</style>
\ No newline at end of file
+}
+</script>
\ No newline at end of file
diff --git a/public/img/clipboard-list.png b/public/img/clipboard-list.png
new file mode 100644
index 0000000..1e8665a
Binary files /dev/null and b/public/img/clipboard-list.png differ
diff --git a/public/img/formas-cita-cierre.png b/public/img/formas-cita-cierre.png
new file mode 100644
index 0000000..0ba901f
Binary files /dev/null and b/public/img/formas-cita-cierre.png differ
diff --git a/public/img/formas-cita.png b/public/img/formas-cita.png
new file mode 100644
index 0000000..8ba8983
Binary files /dev/null and b/public/img/formas-cita.png differ
diff --git a/public/img/hero-iguales-formas.png b/public/img/hero-iguales-formas.png
new file mode 100644
index 0000000..1f430d3
Binary files /dev/null and b/public/img/hero-iguales-formas.png differ
diff --git a/public/img/meeting.png b/public/img/meeting.png
new file mode 100644
index 0000000..a1e1a60
Binary files /dev/null and b/public/img/meeting.png differ
diff --git a/public/img/people.png b/public/img/people.png
new file mode 100644
index 0000000..28b3ff0
Binary files /dev/null and b/public/img/people.png differ
diff --git a/public/img/route.png b/public/img/route.png
new file mode 100644
index 0000000..7dbc45d
Binary files /dev/null and b/public/img/route.png differ
diff --git a/public/img/search-check.png b/public/img/search-check.png
new file mode 100644
index 0000000..9e69e4e
Binary files /dev/null and b/public/img/search-check.png differ
diff --git a/public/svg/scale.svg b/public/svg/scale.svg
new file mode 100644
index 0000000..bd72238
--- /dev/null
+++ b/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>