what-is and tools sections

components/WhatIs.vue

@@ -0,0 +1,70 @@
+<template>
+  <section 
+  :id="id"
+  class="flex flex-col-reverse lg:flex-row gap-8 lg:gap-21 rounded-3xl mb-8 px-4 py-12 md:p-12 lg:p-16 bg-gradient-conic-2 ">
+    <div class="flex flex-col lg:w-3/5">
+      <div class="flex flex-col">
+        <h2 class="text-4xl font-bold mb-6">{{ title }}</h2>
+        <p class="mb-8 text-lg" v-html="description"></p>
+      </div>
+
+      <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>
+        </li>
+      </ul>
+      <NuxtLink v-if="button" :to="button.link" class=" w-fit">
+          <ButtonCTA :color="button.color" class="uppercase">
+            {{ button.label }}
+          </ButtonCTA>
+        </NuxtLink>
+    </div>
+    <div class="lg:w-2/5 h-full">
+      <img 
+        v-if="image"
+        :src="`/img/${image.src}`"
+        :alt="image.alt"
+        class="w-full h-full object-cover"
+      />
+    </div>
+  </section>
+</template>
+
+<script>
+export default {
+  props: {
+    id: {
+      type: String,
+      default: "",
+    },
+    title: {
+      type: String,
+      default: "",
+    },
+    description: {
+      type: String,
+      default: "",
+    },
+    image: {
+      type: Object,
+      default: () => ({
+        src: "",
+        alt: "",
+      }),
+    },
+    items: {
+      type: Array,
+      default: () => [],
+    },
+    button: {
+      type: Object,
+      default: () => ({
+        label: "",
+        link: "",
+      }),
+    },
+  },
+  
+};
+</script>