remove folder pages

components/section/MainHero.vue

@@ -0,0 +1,43 @@
+<template>
+  <UiContainer>
+    <div class="space-y-[30px] sm:space-y-[53px]">
+      <h1 class="h1">
+        {{ component.section_lang_data.title }}
+      </h1>
+      <div
+        class="h-[465px] sm:h-[509px] xl:h-[509px] w-full rounded-[20px] bg-cover bg-center transition-transform duration-300 group-hover:scale-105 xl:block"
+        :style="{
+          backgroundImage: `url('/api/files/${component.image_collection}/${component.section_id}/${component.section_img[0]}?thumb=1200x0')`,
+          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"
+      >
+        <h3 class="h4-uppercase-bold-inter sm:min-w-[45%]">
+          {{ component.section_lang_data.title_second }}
+        </h3>
+        <div class="flex w-full items-start justify-center sm:justify-end">
+          <UiButtonArrow :arrow="true" type="fill">{{
+            component.section_lang_data.button
+          }}</UiButtonArrow>
+        </div>
+      </div>
+    </div>
+  </UiContainer>
+</template>
+
+<script lang="ts" setup>
+const props = defineProps<{ component: Component }>();
+type Component = {
+  image_collection: string;
+  section_id: string;
+  section_img: string;
+  section_lang_data: {
+    title: string;
+    title_second: string;
+    button: string;
+  };
+};
+</script>