add map/products

components/section/main-page/MainBlocks.vue

@@ -34,16 +34,31 @@
         <div
           class="hidden sm:block absolute bottom-0 right-0 pt-2 pl-2 bg-bg-light dark:bg-bg-dark rounded-tl-2xl"
         >
-          <ButtonArrow>{{ item.title }}</ButtonArrow>
+          <UiButtonArrow>{{ item.title }}</UiButtonArrow>
+        </div>
+      </div>
+      <UiButtonArrow 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>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-2 h-2 rounded-[2px] bg-accent-green"></div>
+          <p>Partners</p>
+        </div>
+        <div class="flex items-center gap-2">
+          <div class="w-2 h-2 rounded-[2px] bg-accent-green"></div>
+          <p>Customers</p>
         </div>
       </div>
-      <ButtonArrow class="sm:hidden mx-auto">{{ item.title }}</ButtonArrow>
     </div>
   </UiContainer>
 </template>
 
 <script lang="ts" setup>
-const props = defineProps<{ component: Component }>();
 type Component = {
   image_collection: string;
   section_id: string;
@@ -56,4 +71,33 @@ type Component = {
     }
   ];
 };
+
+interface Partner {
+  code: string;
+  country_iso: string;
+  region_iso: string;
+  first_name: string;
+  last_name: string;
+  job_position: string;
+  commissioning_entity_name: string;
+}
+
+const props = defineProps<{
+  component: Component;
+  data: Object;
+  infoData: Object;
+}>();
+
+const countryISOs = ref("");
+const isDefault = ref<boolean>(true);
+const activeCountry = ref<string>("");
+
+let partnersList = ref([] as Partner[]);
+let partnersCountries = ref([] as any[]);
+
+const backToEurope = () => {
+  isDefault.value = true;
+  activeCountry.value = "";
+  partnersList.value = [];
+};
 </script>