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>