From c7d71ddb21cb87c481725ce32d3a88437c67de4a Mon Sep 17 00:00:00 2001
From: Arina Yakovenko <yakovenko_arina@ma-al.com>
Date: Thu, 5 Jun 2025 15:53:41 +0200
Subject: [PATCH] investment page/curency switcher

---
 assets/main.css                               |  17 +-
 components/CountryCurrencySelector.vue        | 125 +++++++++++++
 components/CurrSelector.vue                   |  71 --------
 components/FooterBlock.vue                    |   2 +-
 components/HeaderBlock.vue                    |  40 +++--
 components/LangSwitcher.vue                   |  10 +-
 components/MapBlock.vue                       |   6 +-
 .../investment-page/InvestmentMain.vue        |  91 ++++++++++
 .../section/investment-page/InvestmentWhy.vue |  43 +++++
 .../investment-page/InvestmentZone.vue        | 169 ++++++++++++++++++
 components/section/main-page/MainBlocks.vue   |  10 +-
 components/section/main-page/MainHero.vue     |   2 +-
 components/section/main-page/MainProducts.vue |   2 +-
 components/ui/ButtonArrow.vue                 |   2 +-
 layouts/default.vue                           |   9 +-
 pages/[id]/[slug].vue                         |  44 ++---
 stores/mapStore.ts                            |  28 ---
 17 files changed, 515 insertions(+), 156 deletions(-)
 create mode 100644 components/CountryCurrencySelector.vue
 delete mode 100644 components/CurrSelector.vue
 create mode 100644 components/section/investment-page/InvestmentMain.vue
 create mode 100644 components/section/investment-page/InvestmentWhy.vue
 create mode 100644 components/section/investment-page/InvestmentZone.vue

diff --git a/assets/main.css b/assets/main.css
index 77dd73c..87ad809 100644
--- a/assets/main.css
+++ b/assets/main.css
@@ -18,7 +18,8 @@
 
   --color-bg-block: #E8E7E0;
 
-  --color-accent-green: #004F3D;
+  --color-accent-green-light: #004F3D;
+  --color-accent-green-dark: #008567;
 
   /* button */
   --color-button: #9a7f62;
@@ -33,19 +34,27 @@
   }
 
   .h2-bold-bounded {
-    @apply font-bounded text-[24px] leading-[80%] font-bold sm:text-[36px] md:text-[40px];
+    @apply font-bounded text-[24px] leading-[150%] md:leading-[120%] font-bold sm:text-[36px] md:text-[40px];
   }
 
   .h4-uppercase-bold-inter {
     @apply font-inter text-base leading-[150%] font-bold uppercase sm:text-[20px] md:text-[24px];
   }
 
+  .text-bold-24 {
+    @apply font-inter text-[17px] sm:text-[21px] md:text-2xl leading-[150%] font-bold;
+  }
+
   .text-inter {
     @apply font-inter text-sm sm:text-lg leading-[150%];
   }
 
-  .text-bold-24 {
-    @apply font-inter text-[17px] sm:text-[21px] md:text-2xl leading-[150%] font-bold;
+  .space-25-55-75 {
+    @apply space-y-[25px] sm:space-y-[55px] md:space-y-[75px]
+  }
+
+  .space-25-55 {
+    @apply space-y-[25px] sm:space-y-[55px]
   }
 }
 
diff --git a/components/CountryCurrencySelector.vue b/components/CountryCurrencySelector.vue
new file mode 100644
index 0000000..a44a6a0
--- /dev/null
+++ b/components/CountryCurrencySelector.vue
@@ -0,0 +1,125 @@
+<template>
+  <UCollapsible
+    class="flex flex-col gap-2 relative"
+    :ui="{
+      root: 'relative',
+      content:
+        'absolute z-50 w-auto ring-0 left-1/2 top-12 transform -translate-x-1/2 p-0 m-0 border-none',
+    }"
+  >
+    <UButton
+      color="neutral"
+      variant="subtle"
+      trailing-icon="i-lucide-chevron-down"
+      class="bg-bg-light dark:bg-bg-dark m-0 ring-0 text-xl font-medium uppercase cursor-pointer hover:bg-inherit text-text-light dark:text-text-dark"
+      block
+      @click="isOpen = !isOpen"
+    >
+      {{ selectedCountry }}/{{ selectedCurrency }}
+    </UButton>
+
+    <template #content v-if="isOpen" class="">
+      <div
+        class="border border-button px-4 py-[10px] rounded-[5px] bg-bg-light dark:bg-bg-dark"
+      >
+        <div class="p-0 flex flex-col gap-4 bg-bg-light dark:bg-bg-dark">
+          <div class="flex flex-col items-start gap-1">
+            <p>{{ $t("lang") }}</p>
+            <USelect
+              v-model="selectedCountry"
+              :items="menuStore.countryList"
+              class="w-32"
+              value-key="iso_code"
+              :ui="{
+                base: 'bg-inherit ring-0 cursor-pointer w-auto focus:ring-0 outline-none focus-visible:ring-0',
+                viewport: 'ring-0',
+                content: 'bg-bg-light dark:bg-bg-dark border border-button',
+                leading: 'p-0',
+                item: 'hover:bg-bg-block dark:hover:bg-button rounded-[5px] data-highlighted:not-data-disabled:before:bg-button/50',
+              }"
+            >
+              <template #leading="{ modelValue }">
+                <div
+                  class="flex items-center gap-2 text-xl font-medium uppercase text-text-light dark:text-text-dark"
+                >
+                  {{ modelValue }}
+                </div>
+              </template>
+
+              <template
+                #item="{ item }"
+                class="bg-inherit ring-0 cursor-pointer w-auto focus:ring-0 outline-none focus-visible:ring-0 !border !border-button"
+              >
+                <div class="flex items-center gap-2 cursor-pointer w-full">
+                  <p class="text-base text-text-light dark:text-text-dark">
+                    {{ item?.name }}
+                  </p>
+                </div>
+              </template>
+            </USelect>
+          </div>
+          <div class="flex flex-col items-start gap-[6px]">
+            <p>{{ $t("currency") }}</p>
+            <USelect
+              v-model="selectedCurrency"
+              :items="menuStore.currencies"
+              class="w-32"
+              value-key="iso_code"
+              :ui="{
+                base: 'bg-inherit ring-0 cursor-pointer w-auto focus:ring-0 outline-none focus-visible:ring-0',
+                viewport: 'ring-0',
+                content: 'bg-bg-light dark:bg-bg-dark border border-button',
+                leading: 'p-0',
+                item: 'hover:bg-bg-block dark:hover:bg-button rounded-[5px] data-highlighted:not-data-disabled:before:bg-button/50',
+              }"
+            >
+              <template #leading="{ modelValue }">
+                <div
+                  class="flex items-center gap-2 text-xl font-medium uppercase text-text-light dark:text-text-dark"
+                >
+                  {{ modelValue }}
+                </div>
+              </template>
+
+              <template
+                #item="{ item }"
+                class="bg-inherit ring-0 cursor-pointer w-auto focus:ring-0 outline-none focus-visible:ring-0 !border !border-button"
+              >
+                <div class="flex items-center gap-2 cursor-pointer w-full">
+                  <p class="text-base text-text-light dark:text-text-dark">
+                    {{ item?.name }}
+                  </p>
+                </div>
+              </template>
+            </USelect>
+          </div>
+        </div>
+      </div>
+    </template>
+  </UCollapsible>
+</template>
+
+<script setup lang="ts">
+const isOpen = ref(false);
+const menuStore = useMenuStore();
+
+const selectedCountry = ref();
+const selectedCurrency = ref();
+
+watchEffect(() => {
+  if (
+    !selectedCountry.value &&
+    menuStore.countryList &&
+    menuStore.countryList.length > 0
+  ) {
+    selectedCountry.value = menuStore.countryList[0].iso_code;
+  }
+  if (
+    !selectedCurrency.value &&
+    menuStore.currencies &&
+    menuStore.currencies.length > 0
+  ) {
+    selectedCurrency.value = menuStore.currencies[0].iso_code;
+  }
+});
+</script>
diff --git a/components/CurrSelector.vue b/components/CurrSelector.vue
deleted file mode 100644
index 79d7563..0000000
--- a/components/CurrSelector.vue
+++ /dev/null
@@ -1,71 +0,0 @@
-<template>
-  <UCollapsible
-    v-model="isOpen"
-    class="flex flex-col gap-2"
-    :ui="{
-      content: 'absolute top-20',
-    }"
-  >
-    <UButton
-      color="neutral"
-      variant="subtle"
-      trailing-icon="i-lucide-chevron-down"
-      class="m-0 bg-bg-dark ring-0 text-xl font-medium uppercase cursor-pointer hover:bg-inherit"
-      block
-      @click="isOpen = !isOpen"
-    >
-      {{ selectedCountry }}/{{ selectedCurrency }}
-    </UButton>
-
-    <template #content>
-      <div class="flex flex-col">
-        <USelect
-          v-model="selectedCountry"
-          :items="menuStore.countryList"
-          class="w-48"
-          value-key="iso_code"
-        >
-          <template #leading="{ modelValue }">
-            <div class="flex items-center gap-2 text-xl font-medium uppercase">
-              {{ modelValue }}
-            </div>
-          </template>
-
-          <template #item="{ item }">
-            <div class="flex items-center gap-2 cursor-pointer w-full">
-              <p class="text-xl font-medium">{{ item?.name }}</p>
-            </div>
-          </template>
-        </USelect>
-        <USelect
-          v-model="selectedCurrency"
-          :items="menuStore.currencies"
-          class="w-48"
-          value-key="iso_code"
-        >
-          <template #leading="{ modelValue }">
-            <div class="flex items-center gap-2 text-xl font-medium uppercase">
-              {{ modelValue }}
-            </div>
-          </template>
-
-          <template #item="{ item }">
-            <div class="flex items-center gap-2 cursor-pointer w-full">
-              <p class="text-xl font-medium">{{ item?.name }}</p>
-            </div>
-          </template>
-        </USelect>
-      </div>
-    </template>
-  </UCollapsible>
-</template>
-
-<script setup lang="ts">
-import { useI18n } from "#imports";
-
-const isOpen = ref(false);
-const menuStore = useMenuStore();
-
-const selectedCountry = ref(menuStore.countryList[0].iso_code);
-const selectedCurrency = ref(menuStore.currencies[0].iso_code);
-</script>
diff --git a/components/FooterBlock.vue b/components/FooterBlock.vue
index 8ea2764..9bcdb5f 100644
--- a/components/FooterBlock.vue
+++ b/components/FooterBlock.vue
@@ -11,7 +11,7 @@
         >
           <h3 class="h4-uppercase-bold-inter">{{ item.title }}</h3>
           <div
-            class="text-inter cursor-pointer hover:text-text-light/80 dark:hover:text-text-dark/70 transition-all"
+            class="cursor-pointer hover:text-text-light/80 dark:hover:text-text-dark/70 transition-all text-inter"
             v-for="(el, indexEl) in item.items"
             :key="indexEl"
           >
diff --git a/components/HeaderBlock.vue b/components/HeaderBlock.vue
index 30eb9ed..a52a649 100644
--- a/components/HeaderBlock.vue
+++ b/components/HeaderBlock.vue
@@ -30,11 +30,13 @@
               <i class="uil uil-user text-[31px] cursor-pointer"></i>
               <i class="uil uil-shopping-cart text-[31px] cursor-pointer"></i>
             </div>
-            <LangSwitcher />
-            <CurrSelector />
+            <div class="flex">
+              <LangSwitcher />
+              <CountryCurrencySelector />
+            </div>
             <ThemeSwitcher />
             <button
-              class="hover:bg-button-hover bg-button cursor-pointer rounded-xl px-6 py-3 font-medium text-white transition-all"
+              class="hover:bg-button-hover bg-button cursor-pointer rounded-xl px-6 py-3 font-medium text-white transition-all text-inter"
             >
               E-shop
             </button>
@@ -62,7 +64,10 @@
               <i class="uil uil-user text-[31px] cursor-pointer"></i>
               <i class="uil uil-shopping-cart text-[31px] cursor-pointer"></i>
             </div>
-            <LangSwitcher />
+            <div class="flex">
+              <LangSwitcher />
+              <CountryCurrencySelector />
+            </div>
             <ThemeSwitcher />
             <i
               variant="subtle"
@@ -92,7 +97,7 @@
                 :key="index"
                 class="flex items-center justify-between transition-all hover:text-text-light/80 dark:hover:text-text-dark/70 cursor-pointer"
               >
-                <div class="text-inter leading-[70%] text-lg">
+                <div class="leading-[70%] text-lg">
                   <span class="mr-4">0{{ index + 1 }}</span>
                   {{ item.name }}
                 </div>
@@ -164,7 +169,7 @@
                 :key="index"
                 class="flex items-center justify-between transition-all hover:text-text-light/80 dark:hover:text-text-dark/70 cursor-pointer"
               >
-                <div class="text-inter leading-[70%] text-lg">
+                <div class="leading-[70%] text-lg">
                   <span class="mr-4">0{{ index + 1 }}</span>
                   {{ item.name }}
                 </div>
@@ -184,13 +189,19 @@
                 </svg>
               </div>
               <div class="flex items-center justify-between">
-                <p class="text-inter leading-[70%] text-lg">
+                <p class="leading-[70%] text-lg">
                   {{ $t("change_language") }}
                 </p>
                 <LangSwitcher />
               </div>
               <div class="flex items-center justify-between">
-                <p class="text-inter leading-[70%] text-lg">
+                <p class="leading-[70%] text-lg">
+                  {{ $t("change_currency_country") }}
+                </p>
+                <CountryCurrencySelector />
+              </div>
+              <div class="flex items-center justify-between">
+                <p class="leading-[70%] text-lg">
                   {{ $t("change_theme") }}
                 </p>
                 <ThemeSwitcher />
@@ -243,7 +254,7 @@
                 :key="index"
                 class="flex items-center justify-between transition-all hover:text-text-light/80 dark:hover:text-text-dark/70 cursor-pointer"
               >
-                <div class="text-inter leading-[70%] text-lg">
+                <div class="leading-[70%] text-lg">
                   <span class="mr-4">0{{ index + 1 }}</span>
                   {{ item.name }}
                 </div>
@@ -263,13 +274,19 @@
                 </svg>
               </div>
               <div class="flex items-center justify-between">
-                <p class="text-inter leading-[70%] text-lg">
+                <p class="leading-[70%] text-lg">
                   {{ $t("change_language") }}
                 </p>
                 <LangSwitcher />
               </div>
               <div class="flex items-center justify-between">
-                <p class="text-inter leading-[70%] text-lg">
+                <p class="leading-[70%] text-lg">
+                  {{ $t("change_currency_country") }}
+                </p>
+                <CountryCurrencySelector />
+              </div>
+              <div class="flex items-center justify-between">
+                <p class="leading-[70%] text-lg">
                   {{ $t("change_theme") }}
                 </p>
                 <ThemeSwitcher />
@@ -282,6 +299,7 @@
   </div>
 </template>
 <script lang="ts" setup>
+import CountryCurrencySelector from "./CountryCurrencySelector.vue";
 import LangSwitcher from "./LangSwitcher.vue";
 
 const menuStore = useMenuStore();
diff --git a/components/LangSwitcher.vue b/components/LangSwitcher.vue
index c59a05a..d13c506 100644
--- a/components/LangSwitcher.vue
+++ b/components/LangSwitcher.vue
@@ -10,7 +10,7 @@
       viewport: 'ring-0',
       content: 'bg-bg-light dark:bg-bg-dark w-auto ring-0 border border-button',
       leading:
-        'left-1/2 top-1/2 transform -translate-x-1/2 -translate-y-1/2 p-0',
+        'left-1/2 top-1/2 transform -translate-x-1/2 -translate-y-1/2 pr-6',
       group: 'px-[5px] py-[10px]',
       item: 'hover:bg-bg-block dark:hover:bg-button rounded-[5px] data-highlighted:not-data-disabled:before:bg-button/50',
     }"
@@ -28,7 +28,11 @@
           :name="item.icon as string"
           class="size-5 rounded-full border border-button/40"
         />
-        <p class="text-xl font-medium uppercase">{{ item.code }}</p>
+        <p
+          class="text-xl font-medium uppercase text-text-light dark:text-text-dark opacity-100"
+        >
+          {{ item.code }}
+        </p>
       </div>
     </template>
   </USelect>
@@ -39,6 +43,8 @@ import { useI18n } from "#imports";
 
 const { locale, locales, setLocale } = useI18n();
 
+const isOpen = ref(false);
+
 const selectedLocaleCode = ref(locale.value);
 const selectedIcon = ref(
   locales.value.find((item) => item.code === locale.value)?.icon
diff --git a/components/MapBlock.vue b/components/MapBlock.vue
index a58914d..f738210 100644
--- a/components/MapBlock.vue
+++ b/components/MapBlock.vue
@@ -258,11 +258,11 @@ import { onMounted } from "vue";
 import type { CountryList } from "~/types";
 
 const mapStore = useMapStore();
+const menuStore = useMenuStore();
 const color = useColorMode();
 
 onMounted(async () => {
-  // await mapStore.getCountList();
-  await mapStore.getCountries();
+  // await mapStore.getCountList()
 
   const map = document.getElementById("europe_map");
   if (!map) return;
@@ -304,7 +304,7 @@ onMounted(async () => {
     element.classList.forEach((className) => {
       let cl = className.split("_");
       if (cl.length == 3 && cl[2]) {
-        let cc = mapStore.countries?.find(
+        let cc = menuStore.countryList?.find(
           (x: CountryList) => x.iso_code == cl[2].toLowerCase()
         );
         if (cc) {
diff --git a/components/section/investment-page/InvestmentMain.vue b/components/section/investment-page/InvestmentMain.vue
new file mode 100644
index 0000000..fa0f1cb
--- /dev/null
+++ b/components/section/investment-page/InvestmentMain.vue
@@ -0,0 +1,91 @@
+<template>
+  <UiContainer class="space-y-[30px] xl:space-y-[55px]">
+    <div class="flex flex-col xl:flex-row items-stretch w-full h-full gap-5">
+      <div
+        class="flex flex-col justify-between items-center space-25-55 xl:gap-4 w-auto h-auto"
+      >
+        <h1 class="h1">
+          <span
+            v-for="(item, index) in component.section_lang_data.title"
+            :key="index"
+            :class="[
+              item.highlight
+                ? 'text-accent-green-light dark:text-accent-green-dark'
+                : '',
+              'inline',
+            ]"
+          >
+            {{ item.text }}
+            <span v-if="index !== component.section_lang_data.title.length - 1">
+            </span>
+          </span>
+        </h1>
+        <h4 class="h4-uppercase-bold-inter">
+          <span
+            v-for="(item, index) in component.section_lang_data.sub_title"
+            :key="index"
+            :class="{
+              'text-accent-green-light dark:text-accent-green-dark':
+                item.highlight,
+            }"
+          >
+            {{ item.text }}
+          </span>
+        </h4>
+        <p>{{ component.section_lang_data.description }}</p>
+      </div>
+      <div
+        class="w-full xl:max-w-[570px] h-[390px] sm:h-[506px] block rounded-2xl"
+        :style="{
+          backgroundImage: `url('/api/files/${component.image_collection}/${component.section_id}/${component.section_img[0]}?thumb=640x0')`,
+          backgroundSize: 'cover',
+          backgroundPosition: 'center',
+        }"
+      />
+    </div>
+    <div class="flex flex-col xl:flex-row items-stretch w-full h-full gap-5">
+      <div
+        class="w-full xl:max-w-[570px] h-[225px] block rounded-2xl"
+        :style="{
+          backgroundImage: `url('/api/files/${component.image_collection}/${component.section_id}/${component.section_img[1]}?thumb=640x0')`,
+          backgroundSize: 'cover',
+          backgroundPosition: 'center',
+        }"
+      />
+      <div
+        class="flex flex-col justify-between items-center space-25-55 xl:gap-4 w-auto h-auto"
+      >
+        <p>{{ component.section_lang_data.description_second }}</p>
+        <h4 class="h4-uppercase-bold-inter">
+          {{ component.section_lang_data.sub_title_second }}
+        </h4>
+      </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: [
+      {
+        text: string;
+        highlight: boolean;
+      }
+    ];
+    sub_title: [
+      {
+        text: string;
+        highlight: boolean;
+      }
+    ];
+    description: string;
+    description_second: string;
+    sub_title_second: string;
+  };
+};
+</script>
diff --git a/components/section/investment-page/InvestmentWhy.vue b/components/section/investment-page/InvestmentWhy.vue
new file mode 100644
index 0000000..2417067
--- /dev/null
+++ b/components/section/investment-page/InvestmentWhy.vue
@@ -0,0 +1,43 @@
+<template>
+  <UiContainer>
+    <div class="space-25-55-75 max-w-[1000px] mx-auto">
+      <h1 class="h2-bold-bounded">
+        <span
+          v-for="(item, index) in component.section_lang_data.title"
+          :key="index"
+          :class="[
+            item.highlight
+              ? 'text-accent-green-light dark:text-accent-green-dark'
+              : '',
+            'inline',
+          ]"
+        >
+          {{ item.text }}
+          <span v-if="index !== component.section_lang_data.title.length - 1">
+          </span>
+        </span>
+      </h1>
+      <h4 class="h4-uppercase-bold-inter">
+        {{ component.section_lang_data.description }}
+      </h4>
+    </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: [
+      {
+        text: string;
+        highlight: boolean;
+      }
+    ];
+    description: string;
+  };
+};
+</script>
diff --git a/components/section/investment-page/InvestmentZone.vue b/components/section/investment-page/InvestmentZone.vue
new file mode 100644
index 0000000..fa19635
--- /dev/null
+++ b/components/section/investment-page/InvestmentZone.vue
@@ -0,0 +1,169 @@
+<template>
+  <UiContainer class="space-y-[25px] sm:space-y-[75px]">
+    <h2 class="h2-bold-bounded">
+      <span
+        v-for="(item, index) in component.section_lang_data.main_title"
+        :key="index"
+        :class="[
+          item.highlight
+            ? 'text-accent-green-light dark:text-accent-green-dark'
+            : '',
+          'inline',
+        ]"
+      >
+        {{ item.text }}
+        <span
+          v-if="index !== component.section_lang_data.main_title.length - 1"
+        >
+        </span>
+      </span>
+    </h2>
+
+    <div class="space-25-55-75">
+      <p>{{ component.section_lang_data.main_description }}</p>
+      <h4 class="h4-uppercase-bold-inter">
+        {{ component.section_lang_data.section_title }}
+      </h4>
+    </div>
+
+    <!-- products -->
+    <div class="space-25-55-75 flex flex-col items-center">
+      <div
+        :class="[
+          'sm:mx-[50px] md:mx-0 xl:mx-[92px] flex items-stretch',
+          itemCount === 1 ? 'justify-center' : 'justify-between gap-2',
+        ]"
+      >
+        <div
+          v-for="(item, index) in productStore.productList"
+          :key="index"
+          class="w-[200px] sm:w-[260px] md:w-[290px] sm:py-5 sm:px-[15px] py-[15px] px-[10px] bg-button-white rounded-2xl flex flex-col items-center gap-5 sm:gap-7"
+        >
+          <img
+            :src="`https://www.yourgold.cz/api/public/file/${item.cover_picture_uuid}.webp`"
+            alt="pics"
+            class="max-h-[150px] sm:max-h-[180px] md:max-h-[205px]"
+          />
+          <div class="flex flex-col justify-between h-full">
+            <div class="flex flex-col gap-[10px] sm:gap-[15px] w-full">
+              <h3
+                class="text-[13px] sm:text-base md:text-lg text-xl font-bold leading-[150%] text-bg-dark"
+              >
+                {{ item.name }}
+              </h3>
+              <p class="text-[10px] sm:text-[12px] text-sm text-bg-dark">
+                {{ item.tax_name }}
+              </p>
+            </div>
+            <div class="flex items-center justify-between">
+              <p class="text-accent-green-light text-bold-24">
+                {{ item.formatted_price }}
+              </p>
+              <button
+                class="w-9 h-9 md:w-12 md:h-12 rounded-xl bg-button cursor-pointer hover:bg-button-hover transition-all flex items-center justify-center"
+              >
+                <i
+                  class="uil uil-shopping-cart text-[25px] md:text-[24px] text-bg-light"
+                ></i>
+              </button>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <UiButtonArrow class="mx-auto" type="fill">E-shop</UiButtonArrow>
+    </div>
+    <div class="flex items-stretch gap-2">
+      <div class="flex flex-col justify-between">
+        <div class="space-y-[55px]">
+          <p>{{ component.section_lang_data.section_description }}</p>
+          <h4 class="h4-uppercase-bold-inter">
+            {{ component.section_lang_data.info_title }}
+          </h4>
+          <p>{{ component.section_lang_data.info_description }}</p>
+        </div>
+        <h4 class="h4-uppercase-bold-inter">
+          {{ component.section_lang_data.cta_title }}
+        </h4>
+      </div>
+      <div
+        class="min-w-[680px] p-[50px] border border-button rounded-2xl block"
+      >
+        <h2 class="h2-bold-bounded mb-[80px]">
+          {{ component.section_lang_data.calculator_title }}
+        </h2>
+        <div class="mb-[44px]">
+          <div class="flex justify-between">
+            <p>{{ $t("monthly_savings") }}</p>
+            <p class="text-accent-green-light dark:accent-accent-green-dark font-bold">133,00 €</p>
+          </div>
+          <div class="flex justify-between">
+            <p>{{ $t("storage_period") }}</p>
+            <p class="text-accent-green-light dark:accent-accent-green-dark font-bold">133,00 €</p>
+          </div>
+        </div>
+        <div class="flex justify-between items-center">
+          <div class="">
+            <p>{{ $t("expected_value") }}</p>
+            <h2 class="h2-bold-bounded text-accent-green-light dark:text-accent-green-dark">
+              39 444,87 €
+            </h2>
+          </div>
+          <UiButtonArrow 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: {
+    main_title: [
+      {
+        text: string;
+        highlight: boolean;
+      }
+    ];
+    main_description: string;
+    section_title: string;
+    section_description: string;
+    info_title: string;
+    info_description: string;
+    cta_title: string;
+    calculator_title: string;
+    button: string;
+  };
+};
+
+const itemCount = ref(4);
+const productStore = useProductStore();
+
+async function updateItemCount() {
+  const width = window.innerWidth;
+  if (width >= 1800) itemCount.value = 5;
+  else if (width >= 1200) itemCount.value = 4;
+  else if (width >= 768) itemCount.value = 3;
+  else if (width >= 640) itemCount.value = 2;
+  else itemCount.value = 1;
+}
+
+watch(itemCount, async () => {
+  await productStore.getList(itemCount.value);
+});
+
+onMounted(async () => {
+  await updateItemCount();
+  window.addEventListener("resize", updateItemCount);
+});
+
+onBeforeUnmount(() => {
+  window.removeEventListener("resize", updateItemCount);
+});
+</script>
diff --git a/components/section/main-page/MainBlocks.vue b/components/section/main-page/MainBlocks.vue
index a5ac18f..7c1f3e3 100644
--- a/components/section/main-page/MainBlocks.vue
+++ b/components/section/main-page/MainBlocks.vue
@@ -1,6 +1,6 @@
 <template>
   <UiContainer
-    class="flex flex-wrap items-center justify-between gap-[30px] sm:gap-y-[55px] xl:gap-y-[100px] mb-[55px] sm:mb-[100px]"
+    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"
@@ -11,7 +11,7 @@
       <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 class="text-inter">{{ item.description }}</p>
+          <p>{{ item.description }}</p>
         </div>
         <h4 class="h4-uppercase-bold-inter">{{ item.sub_title }}</h4>
       </div>
@@ -19,7 +19,7 @@
       <!-- 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 class="text-inter">{{ item.description }}</p>
+        <p>{{ item.description }}</p>
         <h4 class="h4-uppercase-bold-inter">{{ item.sub_title }}</h4>
       </div>
 
@@ -47,11 +47,11 @@
       <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 class="text-sm sm:text-lg">Partners</p>
+          <p>Partners</p>
         </div>
         <div class="flex items-center gap-2">
           <div class="w-3 h-3 rounded-[2.8px] bg-bg-block"></div>
-          <p class="text-sm sm:text-lg">Customers</p>
+          <p>Customers</p>
         </div>
       </div>
     </div>
diff --git a/components/section/main-page/MainHero.vue b/components/section/main-page/MainHero.vue
index 84806df..cfa7e59 100644
--- a/components/section/main-page/MainHero.vue
+++ b/components/section/main-page/MainHero.vue
@@ -1,6 +1,6 @@
 <template>
   <UiContainer>
-    <div class="space-y-[30px] sm:space-y-[53px] mb-[55px] sm:mb-[100px]">
+    <div class="space-y-[30px] sm:space-y-[53px]">
       <h1 class="h1">
         {{ component.section_lang_data.title }}
       </h1>
diff --git a/components/section/main-page/MainProducts.vue b/components/section/main-page/MainProducts.vue
index c2a33e5..8fe926e 100644
--- a/components/section/main-page/MainProducts.vue
+++ b/components/section/main-page/MainProducts.vue
@@ -29,7 +29,7 @@
             </p>
           </div>
           <div class="flex items-center justify-between">
-            <p class="text-accent-green text-bold-24">
+            <p class="text-accent-green-light text-bold-24">
               {{ item.formatted_price }}
             </p>
             <button
diff --git a/components/ui/ButtonArrow.vue b/components/ui/ButtonArrow.vue
index 480e881..c1de4d2 100644
--- a/components/ui/ButtonArrow.vue
+++ b/components/ui/ButtonArrow.vue
@@ -2,7 +2,7 @@
   <div class="group flex cursor-pointer items-center justify-start gap-2 whitespace-nowrap">
     <button
       :class="[
-        'text-inter h-[40px] cursor-pointer rounded-[10px] px-[22px] transition-all sm:h-[50px] md:h-[65px] md:rounded-[15px] md:px-[42px]',
+        'h-[40px] cursor-pointer rounded-[10px] px-[22px] transition-all sm:h-[50px] md:h-[65px] md:rounded-[15px] md:px-[42px]',
         type === 'fill'
           ? 'bg-button text-text-dark group-hover:bg-button-hover'
           : 'border-button text-button dark:border-button-white dark:text-button-white group-hover:border-button-hover group-hover:text-button-hover border',
diff --git a/layouts/default.vue b/layouts/default.vue
index 0e63a03..3aa8eb6 100644
--- a/layouts/default.vue
+++ b/layouts/default.vue
@@ -3,14 +3,9 @@
     class="bg-bg-light dark:bg-bg-dark text-text-light dark:text-text-dark font-inter flex min-h-screen flex-col overflow-hidden"
   >
     <HeaderBlock />
-    <!-- <ImageBlock>
     <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>Title</UiButtonArrow>
-      </div>
-    </ImageBlock> -->
-    <div class="flex-1 py-[25px] sm:py-[55px] md:py-[75px]">
+      class="flex-1 py-[25px] sm:py-[55px] md:py-[75px] space-y-[55px] sm:space-y-[75px] md:space-y-[100px] text-inter"
+    >
       <slot />
     </div>
     <FooterBlock />
diff --git a/pages/[id]/[slug].vue b/pages/[id]/[slug].vue
index a8a803b..809ad0b 100644
--- a/pages/[id]/[slug].vue
+++ b/pages/[id]/[slug].vue
@@ -1,24 +1,26 @@
 <template>
-    <div>
-      <KeepAlive>
-        <component :is="component.componentInstance" v-for="component in componentsList" :key="component.name" :component="component.component" />
-      </KeepAlive>
-    </div>
-  </template>
-  
-  <script setup>
-  import { useStore } from "@/stores/store";
-  const route = useRoute();
-  const store = useStore();
-  const menuStore = useMenuStore();
-  await store.getSections(route.params.id);
-  
-  onMounted(() => {
-    menuStore.openMenu = false;
-  });
-  
-  useHead(menuStore.headMeta);
+  <KeepAlive>
+    <component
+      :is="component.componentInstance"
+      v-for="component in componentsList"
+      :key="component.name"
+      :component="component.component"
+    />
+  </KeepAlive>
+</template>
 
-  const componentsList = await store.getComponents(route.params.id);
+<script setup>
+import { useStore } from "@/stores/store";
+const route = useRoute();
+const store = useStore();
+const menuStore = useMenuStore();
+await store.getSections(route.params.id);
+
+onMounted(() => {
+  menuStore.openMenu = false;
+});
+
+useHead(menuStore.headMeta);
+
+const componentsList = await store.getComponents(route.params.id);
 </script>
-  
\ No newline at end of file
diff --git a/stores/mapStore.ts b/stores/mapStore.ts
index d65c935..93a55ee 100644
--- a/stores/mapStore.ts
+++ b/stores/mapStore.ts
@@ -47,9 +47,6 @@ export const useMapStore = defineStore("mapStore", () => {
         "se"
     ]);
 
-    const countryList = ref<CountryList[]>()
-    const countries = ref<CountryList[]>()
-
     // async function getPartnersList() {
     //     try {
     //         const res = await fetch(
@@ -94,36 +91,11 @@ export const useMapStore = defineStore("mapStore", () => {
     //     }
     // }
 
-    async function getCountries() {
-        try {
-            const res = await fetch(
-                `http://127.0.0.1:4000/api/public/countries`,
-                {
-                    headers: {
-                        "Content-Type": "application/json",
-                    },
-                }
-            );
-
-            if (!res.ok) {
-                throw new Error(`HTTP error: ${res.status}`);
-            }
-
-            const data = await res.json();
-            countries.value = data.ata       
-        } catch (error) {
-            console.error("getList error:", error);
-        }
-    }
-
 
     return {
         partnersList,
         customersList,
-        // countryList,
-        countries,
         // getPartnersList,
         // getCustomerList,
-        getCountries
     };
 });