button with image

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>