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 -->

components/section/MainHero.vue

@@ -10,18 +10,15 @@
           backgroundImage: `url('/api/public/file/${component.img[0]}_l.webp')`,
           backgroundSize: 'cover',
           backgroundPosition: 'center',
-        }"
-      />
-      <div
-        class="flex flex-col items-center space-y-[30px] sm:flex-row sm:items-start md:space-y-0 xl:items-center"
-      >
+        }" />
+      <div class="flex flex-col items-center space-y-[30px] sm:flex-row sm:items-start md:space-y-0 xl:items-center">
         <h3 class="h4-uppercase-bold-inter sm:min-w-[45%]">
           {{ component.front_section_lang[0].data.title_second }}
         </h3>
         <div class="flex w-full items-start justify-center sm:justify-end">
           <UiButtonArrow :arrow="true" type="fill">{{
             component.front_section_lang[0].data.button
-          }}</UiButtonArrow>
+            }}</UiButtonArrow>
         </div>
       </div>
     </div>
@@ -29,22 +26,25 @@
 </template>
 
 <script lang="ts" setup>
-defineProps<{ component: {
-  id: number
-  name: string
-  img: string[]
-  component_name: string
-  is_no_lang: boolean
-  page_name: string
-  front_section_lang: {
-    data: {
-      title: string
-      button: string
-      title_second: string
-    }
-    id_front_section: number
-    id_lang: number
-  }[]
-} }>();
+defineProps<{
+  component: {
+    id: number
+    name: string
+    img: string[]
+    component_name: string
+    is_no_lang: boolean
+    page_name: string
+    front_section_lang: {
+      data: {
+        title: string
+        button: string
+        title_second: string
+      }
+      id_front_section: number
+      id_lang: number
+    }[]
+  }
+}>();
+
 
 </script>