text-with-image and logo sections

components/LogosWithText.vue

@@ -0,0 +1,47 @@
+<template>
+  <section 
+  :id="id"
+  class="flex flex-col gap-12 mb-8 px-4 pt-8 pb-16 max-w-3xl mx-auto">
+    <div class="flex flex-col justify-center items-center w-full">
+      <h2 class=" font-bold mb-6">{{ title }}</h2>
+      <p class="text-lg text-center">{{ description }}</p>
+    </div>
+
+    <ul  class="grid grid-cols-12 gap-8">
+      <li 
+        v-for="(item, index) in logos" :key="`logos-${id}-${index}`" 
+        class="col-span-12 md:col-span-4 h-20 flex justify-center items-center">
+        <img 
+          v-if="item"
+          :src="`/img/${item.src}`"
+          :alt="item.alt"
+          class="w-full h-full object-cover grayscale"
+        />
+      </li>
+    </ul>
+  </section>
+</template>
+
+<script>
+export default {
+  props: {
+    id: {
+      type: String,
+      default: "",
+    },
+    title: {
+      type: String,
+      default: "",
+    },
+    description: {
+      type: String,
+      default: "",
+    },
+     logos: {
+      type: Array,
+      default: () => [],
+    },
+  },
+  
+};
+</script>

components/TextWithImage.vue

@@ -0,0 +1,56 @@
+<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"
+      :class="{
+        'items-center justify-center': position === 'left',
+        'flex-row-reverse items-center justify-center': position === 'right'
+      }">
+      <div class="h-20.1 w-20.1 rounded-full overflow-hidden border-2 border-white">
+        <img 
+        v-if="image"
+        :src="`/img/${image.src}`"
+        :alt="image.alt"
+        class="w-full h-full object-cover"
+      />
+      </div>
+      <div class="flex flex-col gap-4 w-full lg:w-2/3">
+        <h2 class="font-bold ">{{ title }}</h2>
+        <ul 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>
+        </ul>
+      </div>
+    </div>
+  </section>
+</template>
+
+<script>
+export default {
+  props: {
+    id: {
+      type: String,
+      default: ""
+    },
+    title: {
+      type: String,
+      default: 'title'
+    },
+    paragraphs: {
+      type: Array,
+      default: () => ['description']
+    },
+    position: {
+      type: String,
+      default: 'left'
+    },
+    image: {
+      type: Object,
+      default: () => ({
+        src: '',
+        alt: ''
+      })
+    }
+  }
+}
+</script>

components/WhatIs.vue

@@ -11,7 +11,7 @@
       <ul  class="flex flex-col gap-4 mb-8">
         <li v-for="(item, index) in items" :key="`item-${index}`" class="flex items-center gap-4">
           <img v-if="item.icon" :src="`/svg/${item.icon}`" :alt="`icon-${item.icon}`" class="w-8 h-8" />
-          <p v-html="item.content"></p>
+          <p class="text-lg" v-html="item.content"></p>
         </li>
       </ul>
       <NuxtLink v-if="button" :to="`/${langcode}/${button.link}`" class=" w-fit">