what-is and tools sections

components/SectionWithCards.vue

@@ -0,0 +1,47 @@
+<template>
+  <section 
+  :id="id"
+  class="flex flex-col gap-8 lg:gap-21 rounded-3xl mb-8 px-4 pt-12 pb-16 md:p-16 md:pb-24 bg-gradient-conic-2 ">
+    <div class="flex flex-col justify-center items-center w-full">
+      <h2 class="text-4xl font-bold mb-6">{{ title }}</h2>
+      <p class="mb-8 text-lg">{{ description }}</p>
+    </div>
+
+    <ul  class="grid grid-cols-12 gap-8 mx-auto">
+      <li v-for="(item, index) in cards" :key="`cards-${id}-${index}`" class="col-span-12 md:col-span-6 lg:col-span-4">
+        <CardTool
+          :color="item.color"
+          :title="item.title"
+          :description="item.description"
+          :image="item.image"
+          :link="item.link"
+          class=""
+        />
+      </li>
+    </ul>
+  </section>
+</template>
+
+<script>
+export default {
+  props: {
+    id: {
+      type: String,
+      default: "",
+    },
+    title: {
+      type: String,
+      default: "",
+    },
+    description: {
+      type: String,
+      default: "",
+    },
+     cards: {
+      type: Array,
+      default: () => [],
+    },
+  },
+  
+};
+</script>