text-with-image adapt to new design

components/TextWithImage.vue

@@ -1,21 +1,45 @@
 <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"
+  <section 
+    class="rounded-3xl mb-8 px-4 py-12 md:p-12 lg:p-16"
+    :class="{
+      'bg-gradient-conic-2': bgColor === 'conic-2',
+      'bg-background-light': bgColor === 'light'
+    }">
+    <div 
+      class="flex flex-col lg:flex-row"
       :class="{
-        'items-center justify-center': position === 'left',
-        'flex-row-reverse items-center justify-center': position === 'right'
+        'lg:flex-row': position === 'left',
+        'lg:flex-row-reverse': position === 'right',
+        'items-center gap-12': image.display === 'circle',
+        'items-start': image.display === 'normal' && position === 'left',
+        'items-start justify-between': image.display === 'normal' && position === 'right'
       }">
-      <div class="h-20.1 w-20.1 rounded-full overflow-hidden border-2 border-white">
-        <img 
+
+      <div 
         v-if="image"
-        :src="`/img/${image.src}`"
-        :alt="image.alt"
-        class="w-full h-full object-cover"
-      />
+        :class="{
+          'h-20.1 w-20.1 rounded-full overflow-hidden border-4 border-white': image.display === 'circle',
+          'h-20.9 w-fit': image.display === 'normal'
+        }">
+        <img 
+          :src="`/img/${image.src}`"
+          :alt="image.alt"
+          class="w-full h-full"
+          :class="{
+            'object-cover': image.display === 'circle',
+            'object-contain': image.display === 'normal'
+          }"
+        />
       </div>
-      <div class="flex flex-col gap-4 w-full lg:w-2/3">
+
+      <div 
+        class="flex flex-col gap-4 w-full"
+        :class="{
+          'lg:w-2/3': image.display === 'circle',
+          'lg:w-1/2': image.display === 'normal',
+        }">
         <h2 class="font-bold ">{{ title }}</h2>
-        <ul class="flex flex-col gap-6">
+        <ul v-if="paragraphs" 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>
@@ -44,13 +68,24 @@ export default {
       type: String,
       default: 'left'
     },
+    bgColor: {
+      type: String,
+      default: 'conic-2'
+    },
     image: {
       type: Object,
       default: () => ({
         src: '',
-        alt: ''
+        alt: '',
+        display: ''
       })
     }
   }
 }
-</script>
+</script>
+
+<style scoped>
+.custom-clip {
+  clip-path: polygon(0 10%, 100% 0%, 100% 90%, 0% 100%);
+}
+</style>