iguales page

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" />