remove folder pages

components/section/MainBlocks.vue

@@ -0,0 +1,86 @@
+<template>
+  <UiContainer
+    class="flex flex-wrap items-center justify-between gap-[30px] sm:gap-y-[55px] xl:gap-y-[100px]"
+  >
+    <div
+      class="w-full flex flex-col gap-[25px] xl:max-w-[48%] md:mx-10 xl:m-0"
+      v-for="(item, index) in component.section_lang_data"
+      :key="index"
+    >
+      <!-- xl -->
+      <div class="hidden xl:flex xl:h-[330px] flex-col justify-between">
+        <div class="space-y-[55px]">
+          <h2 class="h2-bold-bounded">{{ item.title }}</h2>
+          <p>{{ item.description }}</p>
+        </div>
+        <h4 class="h4-uppercase-bold-inter">{{ item.sub_title }}</h4>
+      </div>
+
+      <!-- sm/md -->
+      <div class="xl:hidden flex flex-col gap-y-[25px] sm:gap-y-[55px]">
+        <h2 class="h2-bold-bounded">{{ item.title }}</h2>
+        <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/files/${component.image_collection}/${component.section_id}/${component.section_img[index]}?thumb=640x0')`,
+          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"
+        >
+          <UiButtonArrow :arrow="true">{{ item.title }}</UiButtonArrow>
+        </div>
+      </div>
+      <UiButtonArrow :arrow="true" class="sm:hidden mx-auto">{{
+        item.title
+      }}</UiButtonArrow>
+    </div>
+
+    <!-- Map block with same layout rules -->
+    <div
+      class="w-full xl:max-w-[48%] md:mx-10 xl:m-0 flex flex-col gap-4 items-center"
+    >
+      <h1 class="text-sm sm:text-xl uppercase">
+        Jsme tu pro vás napříč Evropou
+      </h1>
+      <MapBlock />
+      <div class="flex items-center gap-4 w-full justify-end">
+        <div class="flex items-center gap-2">
+          <div class="w-3 h-3 rounded-[2.8px] bg-button"></div>
+          <p>Partners</p>
+        </div>
+        <div class="flex items-center gap-2">
+          <div class="w-3 h-3 rounded-[2.8px] bg-block"></div>
+          <p>Customers</p>
+        </div>
+      </div>
+    </div>
+  </UiContainer>
+</template>
+
+<script lang="ts" setup>
+type Component = {
+  image_collection: string;
+  section_id: string;
+  section_img: string;
+  section_lang_data: [
+    {
+      title: string;
+      description: string;
+      sub_title: string;
+    }
+  ];
+};
+
+const props = defineProps<{
+  component: Component;
+  data: Object;
+  infoData: Object;
+}>();
+</script>