From 3d91d7f1bbd728993c570b5f309fa78afe46e482 Mon Sep 17 00:00:00 2001
From: Arina Yakovenko <yakovenko_arina@ma-al.com>
Date: Fri, 6 Jun 2025 15:50:06 +0200
Subject: [PATCH] invest page

---
 assets/main.css                               |  7 +-
 components/CountryCurrencySelector.vue        |  4 +-
 components/HeaderBlock.vue                    | 20 ++--
 components/LangSwitcher.vue                   |  2 +-
 components/MapBlock.vue                       |  2 +-
 .../section/investment-page/InvestmentFaq.vue | 82 +++++++++++++++
 .../investment-page/InvestmentSave.vue        | 99 +++++++++++++++++++
 .../investment-page/InvestmentZone.vue        | 76 ++++++++++----
 components/section/main-page/MainBlocks.vue   |  2 +-
 components/section/main-page/MainProducts.vue |  2 +-
 components/ui/ButtonArrow.vue                 |  4 +-
 components/ui/Container.vue                   |  2 +-
 pages/index.vue                               | 59 ++++++-----
 public/Arrow 4 (1).svg                        |  3 +
 public/Arrow 4.svg                            |  3 +
 stores/store.ts                               | 44 ++++++---
 16 files changed, 331 insertions(+), 80 deletions(-)
 create mode 100644 components/section/investment-page/InvestmentFaq.vue
 create mode 100644 components/section/investment-page/InvestmentSave.vue
 create mode 100644 public/Arrow 4 (1).svg
 create mode 100644 public/Arrow 4.svg

diff --git a/assets/main.css b/assets/main.css
index 87ad809..6ab061c 100644
--- a/assets/main.css
+++ b/assets/main.css
@@ -16,7 +16,7 @@
   --color-text-light: #1a1a1a;
   --color-text-dark: #fffefb;
 
-  --color-bg-block: #E8E7E0;
+  --color-block: #E8E7E0;
 
   --color-accent-green-light: #004F3D;
   --color-accent-green-dark: #008567;
@@ -25,7 +25,6 @@
   --color-button: #9a7f62;
   --color-button-hover: #b7946d;
   --color-button-disabled: #c5c5c5;
-  --color-button-white: #E8E7E0;
 }
 
 @layer utilities {
@@ -56,6 +55,10 @@
   .space-25-55 {
     @apply space-y-[25px] sm:space-y-[55px]
   }
+
+  .space-25-75 {
+    @apply space-y-[25px] sm:space-y-[75px]
+  }
 }
 
 .main {
diff --git a/components/CountryCurrencySelector.vue b/components/CountryCurrencySelector.vue
index a44a6a0..3b6aff7 100644
--- a/components/CountryCurrencySelector.vue
+++ b/components/CountryCurrencySelector.vue
@@ -35,7 +35,7 @@
                 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',
+                item: 'hover:bg-block dark:hover:bg-button rounded-[5px] data-highlighted:not-data-disabled:before:bg-button/50',
               }"
             >
               <template #leading="{ modelValue }">
@@ -70,7 +70,7 @@
                 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',
+                item: 'hover:bg-block dark:hover:bg-button rounded-[5px] data-highlighted:not-data-disabled:before:bg-button/50',
               }"
             >
               <template #leading="{ modelValue }">
diff --git a/components/HeaderBlock.vue b/components/HeaderBlock.vue
index a52a649..ff00481 100644
--- a/components/HeaderBlock.vue
+++ b/components/HeaderBlock.vue
@@ -11,7 +11,7 @@
               v-for="(item, index) in menuStore.menu"
               @click="menuStore.navigateToItem(item)"
               :key="index"
-              class="hover:text-text-light/80 dark:hover:text-text-dark/70 cursor-pointer text-lg transition-all"
+              class="hover:text-text-light/80 dark:hover:text-text-dark/70 cursor-pointer text-lg transition-all text-inter"
             >
               0{{ index + 1 }} <br />
               {{ item.name }}
@@ -97,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="leading-[70%] text-lg">
+                <div class="leading-[70%] text-inter">
                   <span class="mr-4">0{{ index + 1 }}</span>
                   {{ item.name }}
                 </div>
@@ -169,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="leading-[70%] text-lg">
+                <div class="leading-[70%] text-inter">
                   <span class="mr-4">0{{ index + 1 }}</span>
                   {{ item.name }}
                 </div>
@@ -189,19 +189,19 @@
                 </svg>
               </div>
               <div class="flex items-center justify-between">
-                <p class="leading-[70%] text-lg">
+                <p class="leading-[70%] text-inter">
                   {{ $t("change_language") }}
                 </p>
                 <LangSwitcher />
               </div>
               <div class="flex items-center justify-between">
-                <p class="leading-[70%] text-lg">
+                <p class="leading-[70%] text-inter">
                   {{ $t("change_currency_country") }}
                 </p>
                 <CountryCurrencySelector />
               </div>
               <div class="flex items-center justify-between">
-                <p class="leading-[70%] text-lg">
+                <p class="leading-[70%] text-inter">
                   {{ $t("change_theme") }}
                 </p>
                 <ThemeSwitcher />
@@ -254,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="leading-[70%] text-lg">
+                <div class="leading-[70%] text-inter">
                   <span class="mr-4">0{{ index + 1 }}</span>
                   {{ item.name }}
                 </div>
@@ -274,19 +274,19 @@
                 </svg>
               </div>
               <div class="flex items-center justify-between">
-                <p class="leading-[70%] text-lg">
+                <p class="leading-[70%] text-lg text-inter">
                   {{ $t("change_language") }}
                 </p>
                 <LangSwitcher />
               </div>
               <div class="flex items-center justify-between">
-                <p class="leading-[70%] text-lg">
+                <p class="leading-[70%] text-lg text-inter">
                   {{ $t("change_currency_country") }}
                 </p>
                 <CountryCurrencySelector />
               </div>
               <div class="flex items-center justify-between">
-                <p class="leading-[70%] text-lg">
+                <p class="leading-[70%] text-lg text-inter">
                   {{ $t("change_theme") }}
                 </p>
                 <ThemeSwitcher />
diff --git a/components/LangSwitcher.vue b/components/LangSwitcher.vue
index d13c506..3c9efce 100644
--- a/components/LangSwitcher.vue
+++ b/components/LangSwitcher.vue
@@ -12,7 +12,7 @@
       leading:
         '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',
+      item: 'hover:bg-block dark:hover:bg-button rounded-[5px] data-highlighted:not-data-disabled:before:bg-button/50',
     }"
     @update:model-value="setLocale"
   >
diff --git a/components/MapBlock.vue b/components/MapBlock.vue
index f738210..d5e5046 100644
--- a/components/MapBlock.vue
+++ b/components/MapBlock.vue
@@ -290,7 +290,7 @@ onMounted(async () => {
       [classItem.split("_").length - 1].toLowerCase();
 
     mapStore.customersList.forEach(
-      (item) => item === code && (element.style.fill = "var(--color-bg-block)")
+      (item) => item === code && (element.style.fill = "var(--color-block)")
     );
 
     mapStore.partnersList.forEach(
diff --git a/components/section/investment-page/InvestmentFaq.vue b/components/section/investment-page/InvestmentFaq.vue
new file mode 100644
index 0000000..1eabd27
--- /dev/null
+++ b/components/section/investment-page/InvestmentFaq.vue
@@ -0,0 +1,82 @@
+<template>
+  <UiContainer>
+    <div class="space-25-55">
+      <h2 class="h2-bold-bounded">{{ component.section_lang_data.title }}</h2>
+
+      <div class="flex flex-col gap-10">
+        <div
+          v-for="(item, index) in component.section_lang_data.faq"
+          :key="index"
+          @click="active = active === index ? null : index"
+          class="flex gap-60 cursor-pointer"
+        >
+          <p>{{ index }}</p>
+          <div
+            :class="[
+              'flex justify-between w-full transition-all duration-300',
+              active === index && 'pb-10 border-b border-bg-dark',
+            ]"
+          >
+            <div class="max-w-[1200px] flex flex-col gap-6">
+              <h4
+                :class="[
+                  'h4-uppercase-bold-inter transition-colors duration-300',
+                  active === index &&
+                    'text-accent-green-light dark:text-accent-green-dark',
+                ]"
+              >
+                {{ item.label }}
+              </h4>
+
+              <transition name="fade-slide">
+                <p
+                  v-if="active === index"
+                  class="transition-all duration-300 ease-in-out"
+                >
+                  {{ item.content }}
+                </p>
+              </transition>
+            </div>
+
+            <svg
+              width="20"
+              height="20"
+              viewBox="0 0 20 21"
+              fill="none"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                :d="
+                  active === index
+                    ? 'M1.29289 17.4628L0.585786 18.1699L2 19.5841L2.70711 18.877L1.29289 17.4628ZM19.9706 1.19936C19.9706 0.647074 19.5228 0.199359 18.9706 0.199359L9.97056 0.19936C9.41828 0.199359 8.97056 0.647075 8.97056 1.19936C8.97056 1.75164 9.41828 2.19936 9.97056 2.19936L17.9706 2.19936L17.9706 10.1994C17.9706 10.7516 18.4183 11.1994 18.9706 11.1994C19.5228 11.1994 19.9706 10.7516 19.9706 10.1994L19.9706 1.19936ZM2 18.1699L2.70711 18.877L19.6777 1.90647L18.9706 1.19936L18.2635 0.492253L1.29289 17.4628L2 18.1699Z'
+                    : 'M2.7364 1.49211L2.0293 0.785005L0.615083 2.19922L1.32219 2.90633L2.7364 1.49211ZM18.9999 20.1698C19.5521 20.1698 19.9999 19.7221 19.9999 19.1698L19.9999 10.1698C19.9999 9.6175 19.5521 9.16978 18.9999 9.16978C18.4476 9.16978 17.9999 9.6175 17.9999 10.1698L17.9999 18.1698L9.99986 18.1698C9.44758 18.1698 8.99986 18.6175 8.99986 19.1698C8.99986 19.7221 9.44757 20.1698 9.99986 20.1698L18.9999 20.1698ZM2.0293 2.19922L1.32219 2.90633L18.2928 19.8769L18.9999 19.1698L19.707 18.4627L2.7364 1.49211L2.0293 2.19922Z'
+                "
+                fill="#1A1A1A"
+              />
+            </svg>
+          </div>
+        </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;
+    faq: [
+      {
+        label: string;
+        content: string;
+      }
+    ];
+  };
+};
+
+const active = ref(0);
+</script>
diff --git a/components/section/investment-page/InvestmentSave.vue b/components/section/investment-page/InvestmentSave.vue
new file mode 100644
index 0000000..42d5be7
--- /dev/null
+++ b/components/section/investment-page/InvestmentSave.vue
@@ -0,0 +1,99 @@
+<template>
+  <UiContainer class="space-y-[50px] sm:space-y-[30px] xl:space-y-[100px]">
+    <div class="space-25-55">
+      <div class="space-25-75">
+        <h4 class="h4-uppercase-bold-inter">
+          {{ component.section_lang_data.main_title }}
+        </h4>
+        <div
+          class="w-full h-full flex flex-col items-stretch gap-4 xl:flex-row space-25-55 xl:!space-y-0"
+        >
+          <div
+            class="flex flex-col space-y-[55px] xl:space-y-0 xl:justify-between"
+          >
+            <p>{{ component.section_lang_data.main_description }}</p>
+            <p>{{ component.section_lang_data.section_title }}</p>
+            <ul>
+              <li
+                class=""
+                v-for="(item, index) in component.section_lang_data
+                  .section_items"
+                :key="index"
+              >
+                <span>{{ index + 1 }}. </span>{{ item }}
+              </li>
+            </ul>
+          </div>
+          <div
+            class="w-full xl:max-w-[690px] h-[200px] sm:h-[390px] 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>
+      <div class="flex items-center justify-center">
+        <div
+          class="flex flex-col items-center p-3 sm:p-6 md:p-8 xl:p-11 border border-block rounded-2xl gap-5"
+        >
+          <h4
+            class="h4-uppercase-bold-inter text-accent-green-light dark:text-accent-green-dark"
+          >
+            20 {{ $t("years") }}
+          </h4>
+          <img
+            class="dark:hidden"
+            :src="`/api/files/${component.image_collection}/${component.section_id}/${component.section_img[2]}?thumb=640x0')`"
+            alt=""
+          />
+          <img
+            class="hidden dark:block"
+            :src="`/api/files/${component.image_collection}/${component.section_id}/${component.section_img[3]}?thumb=640x0')`"
+            alt=""
+          />
+        </div>
+      </div>
+    </div>
+    <div class="flex flex-col gap-4 xl:flex-row space-25-55">
+      <div class="flex flex-col space-25-55 xl:justify-between">
+        <p>{{ component.section_lang_data.info_description }}</p>
+        <h4 class="h4-uppercase-bold-inter">
+          {{ component.section_lang_data.info_title }}
+        </h4>
+        <div
+          v-html="component.section_lang_data.info_description_second"
+          class=""
+        ></div>
+      </div>
+      <div
+        class="w-full xl:max-w-[690px] h-[170px] sm:h-[360px] 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>
+  </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: string;
+    main_description: string;
+    section_title: string;
+    section_items: [];
+
+    info_description: string;
+    info_title: string;
+    info_description_second: string;
+  };
+};
+</script>
diff --git a/components/section/investment-page/InvestmentZone.vue b/components/section/investment-page/InvestmentZone.vue
index fa19635..d73069d 100644
--- a/components/section/investment-page/InvestmentZone.vue
+++ b/components/section/investment-page/InvestmentZone.vue
@@ -1,5 +1,5 @@
 <template>
-  <UiContainer class="space-y-[25px] sm:space-y-[75px]">
+  <UiContainer class="space-25-75">
     <h2 class="h2-bold-bounded">
       <span
         v-for="(item, index) in component.section_lang_data.main_title"
@@ -37,7 +37,7 @@
         <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"
+          class="w-[200px] sm:w-[260px] md:w-[290px] sm:py-5 sm:px-[15px] py-[15px] px-[10px] bg-block 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`"
@@ -73,9 +73,13 @@
 
       <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]">
+
+    <!-- calculator-block -->
+    <div
+      class="flex flex-col xl:flex-row items-stretch gap-6 sm:gap-2 pt-5 sm:p-0 space-25-55"
+    >
+      <div class="flex flex-col space-y-[55px] sm:justify-between">
+        <div class="space-25-55">
           <p>{{ component.section_lang_data.section_description }}</p>
           <h4 class="h4-uppercase-bold-inter">
             {{ component.section_lang_data.info_title }}
@@ -86,30 +90,64 @@
           {{ component.section_lang_data.cta_title }}
         </h4>
       </div>
+
+      <!-- calculator -->
       <div
-        class="min-w-[680px] p-[50px] border border-button rounded-2xl block"
+        class="w-full md:min-w-[680px] p-[25px] md:p-[50px] border border-button rounded-2xl block"
       >
-        <h2 class="h2-bold-bounded mb-[80px]">
+        <h2 class="h2-bold-bounded text-center mb-10 sm:mb-20">
           {{ 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 class="mb-14 flex flex-col gap-8 sm:gap-14">
+          <div class="flex flex-col gap-4">
+            <div class="flex justify-between">
+              <p>{{ $t("monthly_savings") }}</p>
+              <p
+                class="text-accent-green-light dark:text-accent-green-dark font-bold"
+              >
+                {{ store.monthlySavings }}
+              </p>
+            </div>
+            <input
+              v-model="store.monthlySavings"
+              type="range"
+              max="600"
+              class="w-full accent-button cursor-pointer"
+              @mouseup="store.getCalculator()"
+              @touchend="store.getCalculator()"
+            />
           </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 class="flex flex-col gap-4">
+            <div class="flex justify-between">
+              <p>{{ $t("storage_period") }}</p>
+              <p
+                class="text-accent-green-light dark:text-accent-green-dark font-bold"
+              >
+                {{ store.storagePeriod }}
+              </p>
+            </div>
+            <input
+              v-model="store.storagePeriod"
+              type="range"
+              max="20"
+              class="w-full accent-button cursor-pointer"
+              @mouseup="store.getCalculator()"
+              @touchend="store.getCalculator()"
+            />
           </div>
         </div>
-        <div class="flex justify-between items-center">
+        <div
+          class="flex flex-col items-start sm:flex-row gap-6 sm:gap-1 justify-between sm: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
+              class="h2-bold-bounded text-accent-green-light dark:text-accent-green-dark"
+            >
+              € {{ store.totalInvestment }}
             </h2>
           </div>
-          <UiButtonArrow type="fill">{{
+          <UiButtonArrow type="fill" class="mx-auto sm:m-0">{{
             component.section_lang_data.button
           }}</UiButtonArrow>
         </div>
@@ -142,6 +180,8 @@ type Component = {
   };
 };
 
+const store = useStore();
+
 const itemCount = ref(4);
 const productStore = useProductStore();
 
diff --git a/components/section/main-page/MainBlocks.vue b/components/section/main-page/MainBlocks.vue
index 7c1f3e3..6bd0ed0 100644
--- a/components/section/main-page/MainBlocks.vue
+++ b/components/section/main-page/MainBlocks.vue
@@ -50,7 +50,7 @@
           <p>Partners</p>
         </div>
         <div class="flex items-center gap-2">
-          <div class="w-3 h-3 rounded-[2.8px] bg-bg-block"></div>
+          <div class="w-3 h-3 rounded-[2.8px] bg-block"></div>
           <p>Customers</p>
         </div>
       </div>
diff --git a/components/section/main-page/MainProducts.vue b/components/section/main-page/MainProducts.vue
index 8fe926e..ce60ac8 100644
--- a/components/section/main-page/MainProducts.vue
+++ b/components/section/main-page/MainProducts.vue
@@ -10,7 +10,7 @@
       <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"
+        class="w-[200px] sm:w-[260px] md:w-[290px] sm:py-5 sm:px-[15px] py-[15px] px-[10px] bg-block 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`"
diff --git a/components/ui/ButtonArrow.vue b/components/ui/ButtonArrow.vue
index c1de4d2..277b5b8 100644
--- a/components/ui/ButtonArrow.vue
+++ b/components/ui/ButtonArrow.vue
@@ -5,7 +5,7 @@
         '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',
+          : 'border-button text-button dark:border-block dark:text-block group-hover:border-button-hover group-hover:text-button-hover border',
 
       ]"
     >
@@ -16,7 +16,7 @@
         'flex h-[40px] w-[40px] items-center justify-center rounded-[10px] p-2.5 transition-all sm:h-[50px] sm:w-[50px] md:h-[65px] md:w-[65px] md:rounded-[15px]',
         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',
+          : 'border-button text-button dark:border-block dark:text-block group-hover:border-button-hover group-hover:text-button-hover border',
       ]"
     >
       <!-- <UIcon
diff --git a/components/ui/Container.vue b/components/ui/Container.vue
index c1fad8d..5204e31 100644
--- a/components/ui/Container.vue
+++ b/components/ui/Container.vue
@@ -1,6 +1,6 @@
 <template>
     <UContainer
-        class="mx-auto w-full max-w-[360px] px-[16px] sm:max-w-[768px] sm:px-[17px] md:max-w-[1000px] md:px-[24px] xl:max-w-[1920px] xl:px-[80px]">
+        class="mx-auto w-full max-w-[360px] px-4 sm:max-w-[768px] sm:px-[17px] md:max-w-[1000px] md:px-6 xl:max-w-[1920px] xl:px-20">
         <slot />
     </UContainer>
 </template>
diff --git a/pages/index.vue b/pages/index.vue
index 5b8819c..68e7472 100644
--- a/pages/index.vue
+++ b/pages/index.vue
@@ -1,32 +1,31 @@
 <template>
-    <div>
-      <KeepAlive>
-        <component
-          :is="component.componentInstance"
-          v-for="component in componentsList"
-          :key="component.name"
-          :component="component.component"
-        />
-      </KeepAlive>
-    </div>
-  </template>
-  
+  <KeepAlive>
+    <component
+      :is="component.componentInstance"
+      v-for="component in componentsList"
+      :key="component.name"
+      :component="component.component"
+    />
+    
+  </KeepAlive>
+</template>
+
 <script setup>
-  import { useStore } from "@/stores/store";
-  const menuStore = useMenuStore();
-  
-  const route = useRoute();
-  
-  route.params.id = menuStore.defaultMenu.id_page
-  route.params.slug = menuStore.defaultMenu.link_rewrite
-  
-  const store = useStore();
-  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
+import { useStore } from "@/stores/store";
+const menuStore = useMenuStore();
+
+const route = useRoute();
+
+route.params.id = menuStore.defaultMenu.id_page;
+route.params.slug = menuStore.defaultMenu.link_rewrite;
+
+const store = useStore();
+await store.getSections(route.params.id);
+
+onMounted(() => {
+  menuStore.openMenu = false;
+});
+
+useHead(menuStore.headMeta);
+const componentsList = await store.getComponents(route.params.id);
+</script>
diff --git a/public/Arrow 4 (1).svg b/public/Arrow 4 (1).svg
new file mode 100644
index 0000000..237e4b3
--- /dev/null
+++ b/public/Arrow 4 (1).svg	
@@ -0,0 +1,3 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M1.29289 17.4628L0.585786 18.1699L2 19.5841L2.70711 18.877L1.29289 17.4628ZM19.9706 1.19936C19.9706 0.647074 19.5228 0.199359 18.9706 0.199359L9.97056 0.19936C9.41828 0.199359 8.97056 0.647075 8.97056 1.19936C8.97056 1.75164 9.41828 2.19936 9.97056 2.19936L17.9706 2.19936L17.9706 10.1994C17.9706 10.7516 18.4183 11.1994 18.9706 11.1994C19.5228 11.1994 19.9706 10.7516 19.9706 10.1994L19.9706 1.19936ZM2 18.1699L2.70711 18.877L19.6777 1.90647L18.9706 1.19936L18.2635 0.492253L1.29289 17.4628L2 18.1699Z" fill="#1A1A1A"/>
+</svg>
diff --git a/public/Arrow 4.svg b/public/Arrow 4.svg
new file mode 100644
index 0000000..f6d627d
--- /dev/null
+++ b/public/Arrow 4.svg	
@@ -0,0 +1,3 @@
+<svg width="20" height="21" viewBox="0 0 20 21" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M2.7364 1.49211L2.0293 0.785005L0.615083 2.19922L1.32219 2.90633L2.7364 1.49211ZM18.9999 20.1698C19.5521 20.1698 19.9999 19.7221 19.9999 19.1698L19.9999 10.1698C19.9999 9.6175 19.5521 9.16978 18.9999 9.16978C18.4476 9.16978 17.9999 9.6175 17.9999 10.1698L17.9999 18.1698L9.99986 18.1698C9.44758 18.1698 8.99986 18.6175 8.99986 19.1698C8.99986 19.7221 9.44757 20.1698 9.99986 20.1698L18.9999 20.1698ZM2.0293 2.19922L1.32219 2.90633L18.2928 19.8769L18.9999 19.1698L19.707 18.4627L2.7364 1.49211L2.0293 2.19922Z" fill="#1A1A1A"/>
+</svg>
diff --git a/stores/store.ts b/stores/store.ts
index 5571fd7..3308a7f 100644
--- a/stores/store.ts
+++ b/stores/store.ts
@@ -6,8 +6,11 @@ export const useStore = defineStore("store", () => {
   const currentPageID = ref("");
   const pb = usePB();
   const { $i18n } = useNuxtApp();
-  const menuStore = useMenuStore()
-  const colorMode = useColorMode()
+
+  // calculator
+  const monthlySavings = ref(137);
+  const storagePeriod = ref(10);
+  const totalInvestment = ref()
 
   const components = ref({} as PBPageItem[]);
   const getSections = async (id: string) => {
@@ -61,19 +64,38 @@ export const useStore = defineStore("store", () => {
     return [];
   }
 
-  const isDark = computed({
-    get() {
-      return colorMode.value === "dark";
-    },
-    set(_isDark) {
-      colorMode.preference = _isDark ? "dark" : "light";
-    },
-  });
+  async function getCalculator() {
+    try {
+      const res = await fetch(
+        `http://127.0.0.1:4000/api/public/plan-prediction/easy/calculate?monthly_deposit=${monthlySavings.value}&years=${storagePeriod.value}`,
+        {
+          headers: {
+            "Content-Type": "application/json",
+          },
+        }
+      );
+
+      if (!res.ok) {
+        throw new Error(`HTTP error: ${res.status}`);
+      }
+
+      const data = await res.json();
+      totalInvestment.value = data.data.total_investement_value
+
+    } catch (error) {
+      console.error("getList error:", error);
+    }
+  }
+
+  getCalculator()
 
   return {
     currentPageID,
     components,
-    isDark,
+    totalInvestment,
+    monthlySavings,
+    storagePeriod,
+    getCalculator,
     getComponents,
     getSections,
   };