button with image

components/section/MainBlocks.vue

@@ -17,22 +17,12 @@
         <p>{{ item.description }}</p>
         <h4 class="h4-uppercase-bold-inter">{{ item.sub_title }}</h4>
       </div>
-
-      <div
-        class="h-[235px] sm:h-[350px] w-full rounded-[20px] bg-cover bg-center transition-transform duration-300 group-hover:scale-105 xl:block relative"
-        :style="{
-          backgroundImage: `url('/api/public/file/${component.img[index]}_l.webp')`,
-          backgroundSize: 'cover',
-          backgroundPosition: 'center',
-        }">
-        <div
-          class="hidden sm:block absolute bottom-0 right-0 pt-2 pl-2 bg-bg-light dark:bg-bg-dark rounded-tl-2xl">
+      <UiImgWrapper :src="`/api/public/file/${component.img[index]}_l.webp`">
+        <template #button>
           <UiButtonArrow :arrow="true">{{ item.title }}</UiButtonArrow>
-        </div>
-      </div>
-      <UiButtonArrow :arrow="true" class="sm:hidden mx-auto">{{
-        item.title
-        }}</UiButtonArrow>
+        </template>
+      </UiImgWrapper>
+
     </div>
 
     <!-- Map block with same layout rules -->