iguales page

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>