From c7479b1aa6997c943da7bc6b4bb652c14f2a9e92 Mon Sep 17 00:00:00 2001
From: Arina Yakovenko <yakovenko_arina@ma-al.com>
Date: Fri, 13 Jun 2025 15:58:43 +0200
Subject: [PATCH] login/registration/reset pages

---
 assets/main.css                               |   1 +
 components/CountryCurrencySelector.vue        | 153 +++++++-------
 components/HeaderBlock.vue                    | 186 +++++-------------
 .../section/business-page/BusinessReasons.vue |  16 +-
 .../section/contact-page/ContactMain.vue      |  24 +--
 .../section/investment-page/InvestmentFaq.vue |  65 +++---
 .../investment-page/InvestmentZone.vue        | 113 ++++-------
 components/section/login-page/LoginMain.vue   |  52 +++++
 .../registration-page/RegistrationMain.vue    | 103 ++++++++++
 .../reset-password-page/ResetPasswordMain.vue |  41 ++++
 layouts/default.vue                           |   6 +-
 package.json                                  |   1 +
 pnpm-lock.yaml                                |   3 +
 public/logo-footer-dark.svg                   |   8 +-
 stores/menuStore.ts                           |  16 +-
 stores/store.ts                               |  26 +++
 16 files changed, 443 insertions(+), 371 deletions(-)
 create mode 100644 components/section/login-page/LoginMain.vue
 create mode 100644 components/section/registration-page/RegistrationMain.vue
 create mode 100644 components/section/reset-password-page/ResetPasswordMain.vue

diff --git a/assets/main.css b/assets/main.css
index 3fcc456..9ad6646 100644
--- a/assets/main.css
+++ b/assets/main.css
@@ -21,6 +21,7 @@
   --color-accent-green-light: #004F3D;
   --color-accent-green-dark: #008567;
 
+  --color-gray: #6B6B6B;
   /* button */
   --color-button: #9a7f62;
   --color-button-hover: #b7946d;
diff --git a/components/CountryCurrencySelector.vue b/components/CountryCurrencySelector.vue
index 3b6aff7..88f166b 100644
--- a/components/CountryCurrencySelector.vue
+++ b/components/CountryCurrencySelector.vue
@@ -1,125 +1,112 @@
 <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"
+  <div class="flex flex-col gap-2 relative" ref="dropdownRef">
+    <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 }}
+      block @click="isOpen = !isOpen">
+      {{ menuStore.selectedCountry }}/{{ menuStore.selectedCurrency?.iso_code }}
     </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="absolute ring-0 top-12 p-0 m-0 border-none w-48" v-if="isOpen">
+      <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-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 }}
+            <p>{{ $t("country") }}</p>
+            <div
+              class="bg-inherit w-full ring-0 cursor-pointer focus:ring-0 outline-none focus-visible:ring-0 space-y-1">
+              <div class="p-0" @click="openDrop('country')">
+                <div class="flex items-center gap-2 text-xl font-medium uppercase text-text-light dark:text-text-dark">
+                  {{ menuStore.selectedCountry }} <span> <i
+                      class="uil uil-angle-down text-2xl font-light cursor-pointer"></i></span>
                 </div>
-              </template>
+              </div>
 
-              <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">
+              <div v-if="dropCountry"
+                class="rounded-[5px] data-highlighted:not-data-disabled:before:bg-button/50 bg-inherit ring-0 cursor-pointer w-full focus:ring-0 outline-none focus-visible:ring-0 border border-button py-[10px] px-[5px]">
+                <div class="overflow-auto h-[200px] w-full">
+                  <p @click="() => {
+                    menuStore.selectedCountry = item.iso_code
+                    dropCountry = false
+                  }"
+                    class="w-full hover:bg-block dark:hover:bg-button pl-2 py-2 text-base text-text-light dark:text-text-dark rounded-[5px]"
+                    v-for="item in menuStore.countryList">
                     {{ item?.name }}
                   </p>
                 </div>
-              </template>
-            </USelect>
+              </div>
+            </div>
           </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-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
+              class="bg-inherit w-full ring-0 cursor-pointer focus:ring-0 outline-none focus-visible:ring-0 space-y-1">
+              <div class="p-0" @click="openDrop()">
+                <div class="flex items-center gap-2 text-xl font-medium uppercase text-text-light dark:text-text-dark">
+                  {{ menuStore.selectedCurrency?.iso_code }}<span> <i
+                      class="uil uil-angle-down text-2xl font-light cursor-pointer"></i></span>
                 </div>
-              </template>
+              </div>
 
-              <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">
+              <div v-if="dropCurrency"
+                class="rounded-[5px] data-highlighted:not-data-disabled:before:bg-button/50 bg-inherit ring-0 cursor-pointer w-full focus:ring-0 outline-none focus-visible:ring-0 border border-button py-[10px] px-[5px]">
+                <div class="overflow-auto w-full">
+                  <p @click="() => {
+                    menuStore.selectedCurrency = item
+                    dropCurrency = false
+                  }"
+                    class="w-full hover:bg-block dark:hover:bg-button pl-1 py-2 text-base text-text-light dark:text-text-dark rounded-[5px]"
+                    v-for="item in menuStore.currencies">
                     {{ item?.name }}
                   </p>
                 </div>
-              </template>
-            </USelect>
+              </div>
+            </div>
           </div>
         </div>
       </div>
-    </template>
-  </UCollapsible>
+    </div>
+  </div>
 </template>
 
 <script setup lang="ts">
+import { onClickOutside } from "@vueuse/core";
 const isOpen = ref(false);
 const menuStore = useMenuStore();
 
-const selectedCountry = ref();
-const selectedCurrency = ref();
+const dropdownRef = ref(null);
+
+const dropCountry = ref(false)
+const dropCurrency = ref(false)
+
+function openDrop(type?: string) {
+  if (type === 'country') {
+    dropCurrency.value = false
+    dropCountry.value = !dropCountry.value
+  } else {
+    dropCountry.value = false
+    dropCurrency.value = !dropCurrency.value
+  }
+}
 
 watchEffect(() => {
   if (
-    !selectedCountry.value &&
+    !menuStore.selectedCountry &&
     menuStore.countryList &&
     menuStore.countryList.length > 0
   ) {
-    selectedCountry.value = menuStore.countryList[0].iso_code;
+    menuStore.selectedCountry = menuStore.countryList[0].iso_code;
   }
   if (
-    !selectedCurrency.value &&
+    !menuStore.selectedCurrency &&
     menuStore.currencies &&
     menuStore.currencies.length > 0
   ) {
-    selectedCurrency.value = menuStore.currencies[0].iso_code;
+    menuStore.selectedCurrency = menuStore.currencies[0];
   }
 });
+
+onClickOutside(dropdownRef, () => {
+  isOpen.value = false
+  dropCurrency.value = false
+  dropCountry.value = false
+});
 </script>
diff --git a/components/HeaderBlock.vue b/components/HeaderBlock.vue
index ff00481..f57672e 100644
--- a/components/HeaderBlock.vue
+++ b/components/HeaderBlock.vue
@@ -4,26 +4,16 @@
     <div class="w-full border-b border-border">
       <UiContainer>
         <div class="hidden h-[120px] w-full items-center gap-[145px] xl:flex">
-          <ul
-            class="flex items-center justify-between whitespace-nowrap w-full"
-          >
-            <li
-              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 text-inter"
-            >
+          <ul class="flex items-center justify-between whitespace-nowrap w-full">
+            <li v-for="(item, index) in menuStore.menu" @click="menuStore.navigateToItem(item)" :key="index"
+              :class="['hover:text-accent-green-light dark:hover:text-accent-green-dark cursor-pointer text-lg transition-all text-inter', route.params.slug === item.link_rewrite && 'text-accent-green-light dark:text-accent-green-dark font-bold underline']">
               0{{ index + 1 }} <br />
               {{ item.name }}
             </li>
           </ul>
           <ClientOnly v-if="!colorMode?.forced">
-            <img
-              class="cursor-pointer"
-              :src="isDark ? '/logo-dark.svg' : '/logo.svg'"
-              alt="logo"
-              @click="menuStore.navigateToItem()"
-            />
+            <img class="cursor-pointer" :src="isDark ? '/logo-dark.svg' : '/logo.svg'" alt="logo"
+              @click="menuStore.navigateToItem()" />
           </ClientOnly>
           <div class="w-full flex items-center justify-between">
             <div class="flex items-center gap-[30px]">
@@ -36,8 +26,7 @@
             </div>
             <ThemeSwitcher />
             <button
-              class="hover:bg-button-hover bg-button cursor-pointer rounded-xl px-6 py-3 font-medium text-white transition-all text-inter"
-            >
+              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>
           </div>
@@ -46,18 +35,12 @@
     </div>
 
     <!-- md -->
-    <div
-      class="hidden w-full md:flex md:flex-col xl:hidden items-center justify-center"
-    >
+    <div class="hidden w-full md:flex md:flex-col xl:hidden items-center justify-center">
       <div class="w-full border-border border-b">
         <UiContainer class="h-[116px] flex items-center justify-between">
           <ClientOnly v-if="!colorMode?.forced">
-            <img
-              class="cursor-pointer"
-              :src="isDark ? '/logo-dark.svg' : '/logo.svg'"
-              alt="logo"
-              @click="menuStore.navigateToItem()"
-            />
+            <img class="cursor-pointer" :src="isDark ? '/logo-dark.svg' : '/logo.svg'" alt="logo"
+              @click="menuStore.navigateToItem()" />
           </ClientOnly>
           <div class="flex items-center gap-6">
             <div class="flex items-center gap-[30px]">
@@ -69,51 +52,30 @@
               <CountryCurrencySelector />
             </div>
             <ThemeSwitcher />
-            <i
-              variant="subtle"
-              block
-              class="uil uil-apps text-[33px] cursor-pointer"
-              @click="open = !open"
-            ></i>
+            <i variant="subtle" block class="uil uil-apps text-[33px] cursor-pointer" @click="open = !open"></i>
           </div>
         </UiContainer>
       </div>
-      <UCollapsible
-        :ui="{ content: 'w-full' }"
-        v-model:open="open"
-        class="w-full"
-      >
+      <UCollapsible :ui="{ content: 'w-full' }" v-model:open="open" class="w-full">
         <template #content>
           <div class="w-full border-border border-b pt-6 pb-8">
             <UiContainer class="flex flex-col gap-[30px]">
-              <div
-                v-for="(item, index) in menuStore.menu"
-                @click="
-                  () => {
-                    menuStore.navigateToItem(item);
-                    open = false;
-                  }
-                "
-                :key="index"
-                class="flex items-center justify-between transition-all hover:text-text-light/80 dark:hover:text-text-dark/70 cursor-pointer"
-              >
+              <div v-for="(item, index) in menuStore.menu" @click="
+                () => {
+                  menuStore.navigateToItem(item);
+                  open = false;
+                }
+              " :key="index"
+                :class="['flex items-center justify-between transition-all hover:text-accent-green-light dark:hover:text-accent-green-dark cursor-pointer', route.params.slug === item.link_rewrite && 'text-accent-green-light dark:text-accent-green-dark font-bold underline']">
                 <div class="leading-[70%] text-inter">
                   <span class="mr-4">0{{ index + 1 }}</span>
                   {{ item.name }}
                 </div>
                 <!-- <i class="uil uil-arrow-up-right text-[35px]"></i> -->
-                <svg
-                  class=""
-                  width="20"
-                  height="20"
-                  viewBox="0 0 26 26"
-                  fill="none"
-                  xmlns="http://www.w3.org/2000/svg"
-                >
+                <svg class="" width="20" height="20" viewBox="0 0 26 26" fill="none" xmlns="http://www.w3.org/2000/svg">
                   <path
                     d="M25.1274 1.87258C25.1274 1.3203 24.6797 0.872582 24.1274 0.872584L15.1274 0.872583C14.5751 0.872583 14.1274 1.3203 14.1274 1.87258C14.1274 2.42487 14.5751 2.87258 15.1274 2.87258L23.1274 2.87258L23.1274 10.8726C23.1274 11.4249 23.5751 11.8726 24.1274 11.8726C24.6797 11.8726 25.1274 11.4249 25.1274 10.8726L25.1274 1.87258ZM1.5 24.5L2.20711 25.2071L24.8345 2.57969L24.1274 1.87258L23.4203 1.16548L0.792893 23.7929L1.5 24.5Z"
-                    fill="currentColor"
-                  />
+                    fill="currentColor" />
                 </svg>
               </div>
             </UiContainer>
@@ -123,69 +85,42 @@
     </div>
 
     <!-- sm -->
-    <div
-      class="hidden w-full items-center justify-between sm:flex sm:flex-col md:hidden"
-    >
+    <div class="hidden w-full items-center justify-between sm:flex sm:flex-col md:hidden">
       <div class="w-full border-border border-b">
         <UiContainer class="h-[84px] flex items-center justify-between">
           <ClientOnly v-if="!colorMode?.forced">
-            <img
-              class="cursor-pointer"
-              :src="isDark ? '/logo-dark.svg' : '/logo.svg'"
-              alt="logo"
-              @click="menuStore.navigateToItem()"
-            />
+            <img class="cursor-pointer" :src="isDark ? '/logo-dark.svg' : '/logo.svg'" alt="logo"
+              @click="menuStore.navigateToItem()" />
           </ClientOnly>
           <div class="flex items-center gap-6">
             <div class="flex items-center gap-[30px]">
               <i class="uil uil-user text-[31px] cursor-pointer"></i>
               <i class="uil uil-shopping-cart text-[31px] cursor-pointer"></i>
             </div>
-            <i
-              variant="subtle"
-              block
-              class="uil uil-apps text-[30px] cursor-pointer"
-              @click="open = !open"
-            ></i>
+            <i variant="subtle" block class="uil uil-apps text-[30px] cursor-pointer" @click="open = !open"></i>
           </div>
         </UiContainer>
       </div>
-      <UCollapsible
-        :ui="{ content: 'w-full' }"
-        v-model:open="open"
-        class="w-full"
-      >
+      <UCollapsible :ui="{ content: 'w-full' }" v-model:open="open" class="w-full">
         <template #content>
           <div class="w-full border-border border-b pt-6 pb-8">
             <UiContainer class="flex flex-col gap-[30px]">
-              <div
-                v-for="(item, index) in menuStore.menu"
-                @click="
-                  () => {
-                    menuStore.navigateToItem(item);
-                    open = false;
-                  }
-                "
-                :key="index"
-                class="flex items-center justify-between transition-all hover:text-text-light/80 dark:hover:text-text-dark/70 cursor-pointer"
-              >
+              <div v-for="(item, index) in menuStore.menu" @click="
+                () => {
+                  menuStore.navigateToItem(item);
+                  open = false;
+                }
+              " :key="index"
+                :class="['flex items-center justify-between transition-all hover:text-accent-green-light dark:hover:text-accent-green-dark cursor-pointer', route.params.slug === item.link_rewrite && 'text-accent-green-light dark:text-accent-green-dark font-bold underline']">
                 <div class="leading-[70%] text-inter">
                   <span class="mr-4">0{{ index + 1 }}</span>
                   {{ item.name }}
                 </div>
                 <!-- <i class="uil uil-arrow-up-right text-[35px]"></i> -->
-                <svg
-                  class=""
-                  width="20"
-                  height="20"
-                  viewBox="0 0 26 26"
-                  fill="none"
-                  xmlns="http://www.w3.org/2000/svg"
-                >
+                <svg class="" width="20" height="20" viewBox="0 0 26 26" fill="none" xmlns="http://www.w3.org/2000/svg">
                   <path
                     d="M25.1274 1.87258C25.1274 1.3203 24.6797 0.872582 24.1274 0.872584L15.1274 0.872583C14.5751 0.872583 14.1274 1.3203 14.1274 1.87258C14.1274 2.42487 14.5751 2.87258 15.1274 2.87258L23.1274 2.87258L23.1274 10.8726C23.1274 11.4249 23.5751 11.8726 24.1274 11.8726C24.6797 11.8726 25.1274 11.4249 25.1274 10.8726L25.1274 1.87258ZM1.5 24.5L2.20711 25.2071L24.8345 2.57969L24.1274 1.87258L23.4203 1.16548L0.792893 23.7929L1.5 24.5Z"
-                    fill="currentColor"
-                  />
+                    fill="currentColor" />
                 </svg>
               </div>
               <div class="flex items-center justify-between">
@@ -217,60 +152,35 @@
       <div class="w-full border-border border-b">
         <UiContainer class="h-[84px] flex items-center justify-between">
           <ClientOnly v-if="!colorMode?.forced">
-            <img
-              class="cursor-pointer"
-              :src="isDark ? '/logo-dark.svg' : '/logo.svg'"
-              alt="logo"
-              @click="menuStore.navigateToItem()"
-            />
+            <img class="cursor-pointer" :src="isDark ? '/logo-dark.svg' : '/logo.svg'" alt="logo"
+              @click="menuStore.navigateToItem()" />
           </ClientOnly>
           <div class="flex items-center gap-6">
             <i class="uil uil-shopping-cart text-[31px] cursor-pointer"></i>
-            <i
-              variant="subtle"
-              block
-              class="uil uil-apps text-[30px] cursor-pointer"
-              @click="open = !open"
-            ></i>
+            <i variant="subtle" block class="uil uil-apps text-[30px] cursor-pointer" @click="open = !open"></i>
           </div>
         </UiContainer>
       </div>
-      <UCollapsible
-        :ui="{ content: 'w-full' }"
-        v-model:open="open"
-        class="w-full"
-      >
+      <UCollapsible :ui="{ content: 'w-full' }" v-model:open="open" class="w-full">
         <template #content>
           <div class="w-full border-border border-b pt-6 pb-8">
             <UiContainer class="flex flex-col gap-[30px]">
-              <div
-                v-for="(item, index) in menuStore.menu"
-                @click="
-                  () => {
-                    menuStore.navigateToItem(item);
-                    open = false;
-                  }
-                "
-                :key="index"
-                class="flex items-center justify-between transition-all hover:text-text-light/80 dark:hover:text-text-dark/70 cursor-pointer"
-              >
+              <div v-for="(item, index) in menuStore.menu" @click="
+                () => {
+                  menuStore.navigateToItem(item);
+                  open = false;
+                }
+              " :key="index"
+                :class="['flex items-center justify-between transition-all hover:text-accent-green-light dark:hover:text-accent-green-dark cursor-pointer', route.params.slug === item.link_rewrite && 'text-accent-green-light dark:text-accent-green-dark font-bold underline']">
                 <div class="leading-[70%] text-inter">
                   <span class="mr-4">0{{ index + 1 }}</span>
                   {{ item.name }}
                 </div>
                 <!-- <i class="uil uil-arrow-up-right text-[35px]"></i> -->
-                <svg
-                  class=""
-                  width="20"
-                  height="20"
-                  viewBox="0 0 26 26"
-                  fill="none"
-                  xmlns="http://www.w3.org/2000/svg"
-                >
+                <svg class="" width="20" height="20" viewBox="0 0 26 26" fill="none" xmlns="http://www.w3.org/2000/svg">
                   <path
                     d="M25.1274 1.87258C25.1274 1.3203 24.6797 0.872582 24.1274 0.872584L15.1274 0.872583C14.5751 0.872583 14.1274 1.3203 14.1274 1.87258C14.1274 2.42487 14.5751 2.87258 15.1274 2.87258L23.1274 2.87258L23.1274 10.8726C23.1274 11.4249 23.5751 11.8726 24.1274 11.8726C24.6797 11.8726 25.1274 11.4249 25.1274 10.8726L25.1274 1.87258ZM1.5 24.5L2.20711 25.2071L24.8345 2.57969L24.1274 1.87258L23.4203 1.16548L0.792893 23.7929L1.5 24.5Z"
-                    fill="currentColor"
-                  />
+                    fill="currentColor" />
                 </svg>
               </div>
               <div class="flex items-center justify-between">
@@ -306,6 +216,8 @@ const menuStore = useMenuStore();
 const open = ref(false);
 const colorMode = useColorMode();
 
+const route = useRoute()
+
 const isDark = computed({
   get() {
     return colorMode.value === "dark";
diff --git a/components/section/business-page/BusinessReasons.vue b/components/section/business-page/BusinessReasons.vue
index fbd2c99..54afb2f 100644
--- a/components/section/business-page/BusinessReasons.vue
+++ b/components/section/business-page/BusinessReasons.vue
@@ -73,16 +73,16 @@
           <div class="p-[25px] md:p-[50px] bg-block rounded-2xl space-y-[30px] xl:ml-40 xl:w-[65%]">
             <div class="flex gap-[30px]">
               <input :placeholder="$t('first_name')" type="text"
-                class="border border-text-dark placeholder:text-button rounded-lg px-3 py-1.5 w-full" />
+                class="border border-text-dark placeholder:text-button rounded-lg px-3 py-1.5 w-full focus:outline-none focus:ring-0 focus:border-2 text-button" />
               <input :placeholder="$t('email')" type="text"
-                class="border border-text-dark placeholder:text-button rounded-lg px-3 py-1.5 w-full" />
+                class="border border-text-dark placeholder:text-button rounded-lg px-3 py-1.5 w-full focus:outline-none focus:ring-0 focus:border-2 text-button" />
             </div>
-            <textarea :placeholder="$t('form_textarea')"
-              class="border h-[145px] border-text-dark placeholder:text-button rounded-lg px-3 py-1.5 w-full" />
+            <textarea :placeholder="$t('form_question')"
+              class="border h-[145px] border-text-dark placeholder:text-button rounded-lg px-3 py-1.5 w-full focus:outline-none focus:ring-0 focus:border-2 text-button" />
 
             <div class="w-full flex justify-center sm:justify-start">
               <UiButtonArrow type="border">{{
-                $t("form_button")
+                $t("submit_form")
                 }}</UiButtonArrow>
             </div>
           </div>
@@ -92,15 +92,15 @@
             </h4>
             <div class="flex flex-col sm:flex-row items-center sm:items-start md:flex-col justify-between gap-[30px]">
               <div>
-                <p class="text-[#6B6B6B]">{{ $t("phone") }}</p>
+                <p class="text-gray">{{ $t("phone") }}</p>
                 <p>+420 608 428 782</p>
               </div>
               <div>
-                <p class="text-[#6B6B6B]">{{ $t("email") }}</p>
+                <p class="text-gray">{{ $t("email") }}</p>
                 <p>web@yourgold.cz</p>
               </div>
               <div>
-                <p class="text-[#6B6B6B]">{{ $t("office_address") }}</p>
+                <p class="text-gray">{{ $t("office_address") }}</p>
                 <p>
                   Floriána Nováka 3 <br />
                   796 01 Prostějov <br />
diff --git a/components/section/contact-page/ContactMain.vue b/components/section/contact-page/ContactMain.vue
index 11eb478..14b283e 100644
--- a/components/section/contact-page/ContactMain.vue
+++ b/components/section/contact-page/ContactMain.vue
@@ -1,24 +1,24 @@
 <template>
     <UiContainer class="space-y-[45px]">
-        <div class="w-[50%] space-y-[25px]">
+        <div class="xl:w-[70%] space-y-[25px]">
             <h1 class="h1">{{ component.section_lang_data.title }}</h1>
-            <p class="">{{ component.section_lang_data.description }}</p>
+            <p v-html="component.section_lang_data.description"></p>
         </div>
         <div class="flex flex-col md:flex-row gap-8 md:gap-[30px] xl:gap-0">
             <div class="p-[25px] md:p-[50px] bg-block rounded-2xl space-y-[30px] xl:ml-40 xl:w-[65%]">
                 <div class="flex gap-[30px]">
                     <input :placeholder="$t('first_name')" type="text"
-                        class="border border-text-dark placeholder:text-button rounded-lg px-3 py-1.5 w-full" />
+                        class="border border-text-dark placeholder:text-button rounded-lg px-3 py-1.5 w-full focus:outline-none focus:ring-0 focus:border-2 text-button" />
                     <input :placeholder="$t('email')" type="text"
-                        class="border border-text-dark placeholder:text-button rounded-lg px-3 py-1.5 w-full" />
+                        class="border border-text-dark placeholder:text-button rounded-lg px-3 py-1.5 w-full focus:outline-none focus:ring-0 focus:border-2 text-button" />
                 </div>
-                <textarea :placeholder="$t('form_textarea')"
-                    class="border h-[145px] border-text-dark placeholder:text-button rounded-lg px-3 py-1.5 w-full" />
+                <textarea :placeholder="$t('form_question')"
+                    class="border h-[276px] border-text-dark placeholder:text-button rounded-lg px-3 py-1.5 w-full focus:outline-none focus:ring-0 focus:border-2 text-button" />
 
                 <div class="w-full flex justify-center sm:justify-start">
                     <UiButtonArrow type="border">{{
-                        $t("form_button")
-                    }}</UiButtonArrow>
+                        $t("submit_form")
+                        }}</UiButtonArrow>
                 </div>
             </div>
             <div class="space-y-[30px] xl:px-[50px] sm:px-10">
@@ -26,17 +26,17 @@
                     {{ $t('contact_info') }}
                 </h4>
                 <div
-                    class="flex flex-col sm:flex-row items-center sm:items-start md:flex-col justify-between gap-[30px]">
+                    class="flex flex-col sm:flex-row items-center sm:items-start md:flex-col justify-between gap-[15px] sm:gap-[30px]">
                     <div>
-                        <p class="text-[#6B6B6B]">{{ $t("phone") }}</p>
+                        <p class="text-gray">{{ $t("phone") }}</p>
                         <p>+420 608 428 782</p>
                     </div>
                     <div>
-                        <p class="text-[#6B6B6B]">{{ $t("email") }}</p>
+                        <p class="text-gray">{{ $t("email") }}</p>
                         <p>web@yourgold.cz</p>
                     </div>
                     <div>
-                        <p class="text-[#6B6B6B]">{{ $t("office_address") }}</p>
+                        <p class="text-gray">{{ $t("office_address") }}</p>
                         <p>
                             Floriána Nováka 3 <br />
                             796 01 Prostějov <br />
diff --git a/components/section/investment-page/InvestmentFaq.vue b/components/section/investment-page/InvestmentFaq.vue
index cc01c90..a41458f 100644
--- a/components/section/investment-page/InvestmentFaq.vue
+++ b/components/section/investment-page/InvestmentFaq.vue
@@ -4,29 +4,22 @@
       <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"
+        <div v-for="(item, index) in component.section_lang_data.faq" :key="index"
           @click="active = active === index ? 0 : index"
-          class="flex gap-8 sm:gap-20 md:gap-40 xl:gap-60 cursor-pointer"
-        >
+          class="flex gap-8 sm:gap-20 md:gap-40 xl:gap-60 cursor-pointer">
           <h4 class="h4-uppercase-bold-inter">
             <span v-if="index + 1 < 10">0</span>{{ index + 1 }}
           </h4>
-          <div
-            :class="[
-              'flex justify-between w-full transition-all duration-300 gap-2 sm:gap-10 md:gap-2',
-              active === index && 'pb-10 border-b border-bg-dark',
-            ]"
-          >
+          <div :class="[
+            'flex justify-between w-full transition-all duration-300 gap-2 sm:gap-10 md:gap-2',
+            active === index && 'pb-10 border-b border-bg-dark dark:border-bg-light',
+          ]">
             <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',
-                ]"
-              >
+              <h4 :class="[
+                'h4-uppercase-bold-inter transition-colors duration-300',
+                active === index &&
+                'text-accent-green-light dark:text-accent-green-dark',
+              ]">
                 {{ item.label }}
               </h4>
 
@@ -37,35 +30,21 @@
               </transition>
             </div>
 
-            <svg
-              class="min-w-5 h-5 dark:text-bg-light"
-              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="currentColor"
-              />
+            <svg class="min-w-5 h-5 dark:text-bg-light" 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="currentColor" />
             </svg>
           </div>
         </div>
       </div>
-      <h4
-        class="h4-uppercase-bold-inter sm:text-start md:text-center xl:text-start xl:ml-66"
-      >
-        <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,
-          }"
-        >
+      <h4 class="h4-uppercase-bold-inter sm:text-start md:text-center xl:text-start xl:ml-66">
+        <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>
diff --git a/components/section/investment-page/InvestmentZone.vue b/components/section/investment-page/InvestmentZone.vue
index 8ae1db3..8824441 100644
--- a/components/section/investment-page/InvestmentZone.vue
+++ b/components/section/investment-page/InvestmentZone.vue
@@ -1,20 +1,14 @@
 <template>
   <UiContainer class="space-25-75">
     <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',
-        ]"
-      >
+      <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 v-if="index !== component.section_lang_data.main_title.length - 1">
         </span>
       </span>
     </h2>
@@ -28,27 +22,17 @@
 
     <!-- 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-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`"
-            alt="pics"
-            class="max-h-[150px] sm:max-h-[180px] md:max-h-[205px]"
-          />
+      <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-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`" 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"
-              >
+              <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">
@@ -60,26 +44,19 @@
                 {{ 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>
+                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 :arrow="true" class="mx-auto" type="fill"
-        >E-shop</UiButtonArrow
-      >
+      <UiButtonArrow :arrow="true" class="mx-auto" type="fill">E-shop</UiButtonArrow>
     </div>
 
     <!-- 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 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>
@@ -94,9 +71,7 @@
       </div>
 
       <!-- calculator -->
-      <div
-        class="w-full md:min-w-[680px] p-[25px] md:p-[50px] border border-button rounded-2xl block"
-      >
+      <div class="w-full md:min-w-[680px] p-[25px] md:p-[50px] border border-button rounded-2xl block">
         <h2 class="h2-bold-bounded text-center mb-10 sm:mb-20">
           {{ component.section_lang_data.calculator_title }}
         </h2>
@@ -104,49 +79,30 @@
           <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 class="text-accent-green-light dark:text-accent-green-dark font-bold">
+                {{ store.monthlySavings }} {{ menuStore.selectedCurrency?.sign }}
               </p>
             </div>
-            <input
-              v-model="store.monthlySavings"
-              type="range"
-              max="600"
-              class="w-full accent-button cursor-pointer"
-              @mouseup="store.getCalculator()"
-              @touchend="store.getCalculator()"
-            />
+            <input v-model="store.monthlySavings" type="range" max="600" :min="store.minValue"
+              class="w-full accent-button cursor-pointer" @mouseup="store.getCalculator()"
+              @touchend="store.getCalculator()" />
           </div>
           <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"
-              >
+              <p>{{ $t("storage_period_years") }}</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()"
-            />
+            <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 flex-col items-start sm:flex-row gap-6 sm:gap-1 justify-between sm: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"
-            >
-              € {{ store.totalInvestment }}
+            <p>{{ $t("expected_savings_value") }}</p>
+            <h2 class="h2-bold-bounded text-accent-green-light dark:text-accent-green-dark">
+              {{ menuStore.selectedCurrency?.sign }} {{ store.totalInvestment }}
             </h2>
           </div>
           <UiButtonArrow :arrow="true" type="fill" class="mx-auto sm:m-0">{{
@@ -183,6 +139,7 @@ type Component = {
 };
 
 const store = useStore();
+const menuStore = useMenuStore();
 
 const itemCount = ref(4);
 const productStore = useProductStore();
diff --git a/components/section/login-page/LoginMain.vue b/components/section/login-page/LoginMain.vue
new file mode 100644
index 0000000..9a944c7
--- /dev/null
+++ b/components/section/login-page/LoginMain.vue
@@ -0,0 +1,52 @@
+<template>
+    <UiContainer class="flex py-20 sm:py-14">
+        <div class="hidden xl:block rounded-2xl min-w-[60%] h-[830px]" :style="{
+            backgroundImage: `url('/api/files/${component.image_collection}/${component.section_id}/${component.section_img[0]}?thumb=1200x0')`,
+            backgroundSize: 'cover',
+            backgroundPosition: 'center',
+        }" />
+        <div class="w-full sm:w-[80%] mx-auto my-auto xl:w-full xl:px-12 ">
+            <div class="space-25-55">
+                <div class="flex justify-between">
+                    <h2 class="h2-bold-bounded">{{ $t('login') }}</h2>
+                    <button
+                        class="h-[40px] sm:h-[43px] px-[10px] sm:px-[17px] border border-gray dark:border-button-disabled text-gray dark:text-button-disabled hover:bg-gray transition-all hover:text-white rounded-[8px] cursor-pointer">{{
+                            $t('back_to_home') }}</button>
+                </div>
+                <div class="space-y-[15px]">
+                    <p class="pl-6">{{ $t('email') }}</p>
+                    <input :placeholder="$t('email')" type="text"
+                        class="border-2 border-block placeholder:text-gray dark:placeholder:text-button-disabled text-bg-dark dark:text-bg-light rounded-lg px-6 h-[50px] sm:h-[67px] w-full focus:outline-none focus:ring-0 focus:border-2" />
+                </div>
+                <div class="space-y-[15px]">
+                    <p class="pl-6">{{ $t('password') }}</p>
+                    <input :placeholder="$t('placeholder_password')" type="text"
+                        class="border-2 border-block placeholder:text-gray dark:placeholder:text-button-disabled text-bg-dark dark:text-bg-light rounded-lg px-6 h-[50px] sm:h-[67px] w-full focus:outline-none focus:ring-0 focus:border-2" />
+                </div>
+            </div>
+            <p class="text-button hover:text-button-hover transition-all font-medium mt-[30px] cursor-pointer">{{
+                $t('forgot_password_question')
+            }}</p>
+            <div class="py-[25px] sm:py-12 border-b border-gray flex justify-center w-full">
+                <UiButtonArrow type="fill" :arrow="true">{{ $t('login') }}</UiButtonArrow>
+            </div>
+            <div class="mt-[25px] sm:mt-[30px] w-full flex justify-center gap-3">
+                <p class="cursor-pointer hover:underline transition-all">{{
+                    $t('no_account')
+                }}</p>
+                <p class="text-button cursor-pointer hover:text-button-hover">{{
+                    $t('sign_up_now')
+                }}</p>
+            </div>
+        </div>
+    </UiContainer>
+</template>
+
+<script lang="ts" setup>
+defineProps<{ component: Component }>();
+type Component = {
+    image_collection: string;
+    section_id: string;
+    section_img: string;
+    section_lang_data: {};
+};</script>
\ No newline at end of file
diff --git a/components/section/registration-page/RegistrationMain.vue b/components/section/registration-page/RegistrationMain.vue
new file mode 100644
index 0000000..017338f
--- /dev/null
+++ b/components/section/registration-page/RegistrationMain.vue
@@ -0,0 +1,103 @@
+<template>
+    <UiContainer class="flex py-20 sm:py-14">
+        <div class="hidden xl:block rounded-2xl min-w-[40%] h-[830px]" :style="{
+            backgroundImage: `url('/api/files/${component.image_collection}/${component.section_id}/${component.section_img[0]}?thumb=1200x0')`,
+            backgroundSize: 'cover',
+            backgroundPosition: 'center',
+        }" />
+        <div class="w-full sm:w-[80%] mx-auto my-auto xl:w-full xl:px-12 ">
+            <div class="space-25-55">
+                <div class="flex justify-between">
+                    <h2 class="h2-bold-bounded">{{ $t('sign_up') }}</h2>
+                    <button
+                        class="h-[40px] sm:h-[43px] px-[10px] sm:px-[17px] border border-gray dark:border-button-disabled text-gray dark:text-button-disabled hover:bg-gray transition-all hover:text-white rounded-[8px] cursor-pointer">{{
+                            $t('back_to_home') }}</button>
+                </div>
+                <div class="space-y-[30px]">
+                    <p>Obecné informace</p>
+                    <div class="grid grid-cols-2 gap-[30px]">
+                        <div class="space-y-[15px]">
+                            <p class="pl-6">{{ $t('first_name') }}</p>
+                            <input :placeholder="$t('first_name')" type="text"
+                                class="border-2 border-block placeholder:text-gray dark:placeholder:text-button-disabled text-bg-dark dark:text-bg-light rounded-lg px-6 h-[50px] sm:h-[67px] w-full focus:outline-none focus:ring-0 focus:border-2" />
+                        </div>
+                        <div class="space-y-[15px]">
+                            <p class="pl-6">{{ $t('last_name') }}</p>
+                            <input :placeholder="$t('last_name')" type="text"
+                                class="border-2 border-block placeholder:text-gray dark:placeholder:text-button-disabled text-bg-dark dark:text-bg-light rounded-lg px-6 h-[50px] sm:h-[67px] w-full focus:outline-none focus:ring-0 focus:border-2" />
+                        </div>
+                        <div class="space-y-[15px]">
+                            <p class="pl-6">{{ $t('email') }}</p>
+                            <input :placeholder="$t('email')" type="text"
+                                class="border-2 border-block placeholder:text-gray dark:placeholder:text-button-disabled text-bg-dark dark:text-bg-light rounded-lg px-6 h-[50px] sm:h-[67px] w-full focus:outline-none focus:ring-0 focus:border-2" />
+                        </div>
+                        <div class="space-y-[15px]">
+                            <p class="pl-6">{{ $t('phone') }}</p>
+                            <div class="flex items-center border-2 border-block rounded-lg">
+                                <div
+                                    class="relative z-50 bg-inherit ring-0 cursor-pointer focus:ring-0 outline-none focus-visible:ring-0 space-y-1">
+                                    <div class="px-[25px]" @click="dropCountry = !dropCountry">
+                                        <div
+                                            class="flex items-center gap-2 text-xl font-medium uppercase text-text-light dark:text-text-dark">
+                                            {{ menuStore.selectedPhoneCountry.name }} <span> <i
+                                                    class="uil uil-angle-down text-2xl font-light cursor-pointer"></i></span>
+                                        </div>
+                                    </div>
+
+                                    <div v-if="dropCountry"
+                                        class="absolute bg-bg-light  rounded-[5px] data-highlighted:not-data-disabled:before:bg-button/50 ring-0 cursor-pointer w-full focus:ring-0 outline-none focus-visible:ring-0 border border-button py-[10px] px-[5px]">
+                                        <div class="overflow-auto h-[200px] w-full">
+                                            <p @click="() => {
+                                                menuStore.selectedPhoneCountry = item
+                                                dropCountry = false
+                                            }" class="w-full hover:bg-block dark:hover:bg-button pl-2 py-2 text-base text-text-light dark:text-text-dark rounded-[5px]"
+                                                v-for="item in menuStore.countryList">
+                                                {{ item.name }}
+                                            </p>
+                                        </div>
+                                    </div>
+                                </div>
+                                {{ menuStore.selectedPhoneCountry.call_prefix }}
+                                <input :placeholder="$t('phone')" type="text"
+                                    class="placeholder:text-gray dark:placeholder:text-button-disabled text-bg-dark dark:text-bg-light px-6 h-[50px] sm:h-[67px] w-full focus:outline-none focus:ring-0" />
+                            </div>
+                        </div>
+                        <div class="space-y-[15px]">
+                            <p class="pl-6">{{ $t('email') }}</p>
+                            <input :placeholder="$t('email')" type="text"
+                                class="border-2 border-block placeholder:text-gray dark:placeholder:text-button-disabled text-bg-dark dark:text-bg-light rounded-lg px-6 h-[50px] sm:h-[67px] w-full focus:outline-none focus:ring-0 focus:border-2" />
+                        </div>
+                        <div class="space-y-[15px]">
+                            <p class="pl-6">{{ $t('password') }}</p>
+                            <input :placeholder="$t('placeholder_password')" type="text"
+                                class="border-2 border-block placeholder:text-gray dark:placeholder:text-button-disabled text-bg-dark dark:text-bg-light rounded-lg px-6 h-[50px] sm:h-[67px] w-full focus:outline-none focus:ring-0 focus:border-2" />
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <div class="py-[25px] sm:py-12 border-b border-gray flex justify-center w-full">
+                <UiButtonArrow type="fill" :arrow="true">{{ $t('login') }}</UiButtonArrow>
+            </div>
+            <div class="mt-[25px] sm:mt-[30px] w-full flex justify-center gap-3">
+                <p class="cursor-pointer hover:underline transition-all">{{
+                    $t('is_account')
+                }}</p>
+                <p class="text-button cursor-pointer hover:text-button-hover">{{
+                    $t('login')
+                }}</p>
+            </div>
+        </div>
+    </UiContainer>
+</template>
+
+<script lang="ts" setup>
+defineProps<{ component: Component }>();
+type Component = {
+    image_collection: string;
+    section_id: string;
+    section_img: string;
+    section_lang_data: {};
+};
+const menuStore = useMenuStore()
+const dropCountry = ref()
+</script>
\ No newline at end of file
diff --git a/components/section/reset-password-page/ResetPasswordMain.vue b/components/section/reset-password-page/ResetPasswordMain.vue
new file mode 100644
index 0000000..f9ff466
--- /dev/null
+++ b/components/section/reset-password-page/ResetPasswordMain.vue
@@ -0,0 +1,41 @@
+<template>
+    <UiContainer class="flex py-10 sm:py-14 gap-10">
+        <div class="hidden xl:block rounded-2xl min-w-[50%] h-[830px]" :style="{
+            backgroundImage: `url('/api/files/${component.image_collection}/${component.section_id}/${component.section_img[0]}?thumb=1200x0')`,
+            backgroundSize: 'cover',
+            backgroundPosition: 'center',
+        }" />
+        <div class="w-full sm:w-[80%] mx-auto my-auto xl:w-full xl:px-12 ">
+            <div class="space-y-[55px]">
+                <div class="flex flex-col-reverse sm:flex-row justify-between items-start gap-7 sm:items-center">
+                    <h2 class="h2-bold-bounded">{{ $t('reset_password') }}</h2>
+                    <button
+                        class="whitespace-nowrap h-[40px] sm:h-[43px] px-[10px] sm:px-[17px] border border-gray dark:border-button-disabled text-gray dark:text-button-disabled hover:bg-gray transition-all hover:text-white rounded-[8px] cursor-pointer">{{
+                            $t('back_to_home') }}</button>
+                </div>
+                <div class="space-y-[30px]">
+                    <p>{{ component.section_lang_data.reset_password_description }}</p>
+                    <div class="space-y-[15px]">
+                        <p class="pl-6">{{ $t('email') }}</p>
+                        <input :placeholder="$t('email')" type="text"
+                            class="border-2 border-block placeholder:text-gray dark:placeholder:text-button-disabled text-bg-dark dark:text-bg-light rounded-lg px-6 h-[50px] sm:h-[67px] w-full focus:outline-none focus:ring-0 focus:border-2" />
+                    </div>
+                </div>
+            </div>
+            <div class="pt-[25px] sm:pt-12 flex justify-center w-full">
+                <UiButtonArrow type="fill" :arrow="true">{{ $t('confirm') }}</UiButtonArrow>
+            </div>
+        </div>
+    </UiContainer>
+</template>
+
+<script lang="ts" setup>
+defineProps<{ component: Component }>();
+type Component = {
+    image_collection: string;
+    section_id: string;
+    section_img: string;
+    section_lang_data: {
+        reset_password_description: string
+    };
+};</script>
\ No newline at end of file
diff --git a/layouts/default.vue b/layouts/default.vue
index 3aa8eb6..a2b9a47 100644
--- a/layouts/default.vue
+++ b/layouts/default.vue
@@ -1,11 +1,9 @@
 <template>
   <div
-    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"
-  >
+    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 />
     <div
-      class="flex-1 py-[25px] sm:py-[55px] md:py-[75px] space-y-[55px] sm:space-y-[75px] md:space-y-[100px] text-inter"
-    >
+      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/package.json b/package.json
index d17e389..56cd011 100644
--- a/package.json
+++ b/package.json
@@ -16,6 +16,7 @@
     "@nuxtjs/i18n": "^9.5.4",
     "@pinia/nuxt": "^0.11.0",
     "@tailwindcss/vite": "^4.1.8",
+    "@vueuse/core": "^13.3.0",
     "nuxt": "^3.17.4",
     "pocketbase": "^0.26.0",
     "tailwindcss": "^4.1.7",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index be052a2..ea74f19 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -26,6 +26,9 @@ importers:
       '@tailwindcss/vite':
         specifier: ^4.1.8
         version: 4.1.8(vite@6.3.5(@types/node@22.15.24)(jiti@2.4.2)(lightningcss@1.30.1)(terser@5.40.0)(yaml@2.8.0))
+      '@vueuse/core':
+        specifier: ^13.3.0
+        version: 13.3.0(vue@3.5.16(typescript@5.8.3))
       nuxt:
         specifier: ^3.17.4
         version: 3.17.4(@parcel/watcher@2.5.1)(@types/node@22.15.24)(db0@0.3.2)(encoding@0.1.13)(eslint@9.27.0(jiti@2.4.2))(ioredis@5.6.1)(lightningcss@1.30.1)(magicast@0.3.5)(optionator@0.9.4)(rollup@4.41.1)(terser@5.40.0)(typescript@5.8.3)(vite@6.3.5(@types/node@22.15.24)(jiti@2.4.2)(lightningcss@1.30.1)(terser@5.40.0)(yaml@2.8.0))(yaml@2.8.0)
diff --git a/public/logo-footer-dark.svg b/public/logo-footer-dark.svg
index bf89a2d..6d4fe4c 100644
--- a/public/logo-footer-dark.svg
+++ b/public/logo-footer-dark.svg
@@ -3,8 +3,8 @@
 <path d="M142 37.0003C142 47.0421 137.547 56.9797 130.02 64.0624C123.129 70.6173 114.329 74 104.258 74C83.9024 74 68 57.8248 68 36.7896C68 27.6972 71.8164 18.2898 78.4958 11.0999C84.9627 4.12274 94.6103 0 104.682 0C125.143 0 142 16.7038 142 37.0003ZM80.298 37.0003C80.298 45.3519 83.0546 51.8002 88.6732 56.6625C93.232 60.6797 99.1691 62.9001 104.894 62.9001C118.888 62.9001 129.596 51.6937 129.596 37.211C129.596 22.7284 118.782 11.0999 105 11.0999C91.2178 11.0999 80.298 22.3047 80.298 37.0003Z" fill="#FFFEFB"/>
 <path d="M173.212 1V47.9736C173.212 52.853 173.529 55.0802 174.481 56.8824C176.173 60.38 179.558 62.289 183.788 62.289C188.442 62.289 191.933 60.0618 193.519 56.0324C194.577 53.3825 194.683 52.2166 194.683 45.3237V1H206V46.7009C206 53.7007 205.471 57.4119 203.885 60.6981C200.394 68.3342 192.884 73 184.106 73C175.327 73 167.5 68.0161 164.01 60.1686C162.423 56.7756 162 53.5938 162 46.4896V1H173.212Z" fill="#FFFEFB"/>
 <path d="M242.113 1.5C248.88 1.5 253.607 2.45412 257.367 4.57337C263.918 8.17616 267.679 14.6413 267.679 22.2703C267.679 32.2317 261.556 40.0719 251.243 43.6763L268 66.2474L258.656 72.5L237.601 44.0987V71.8641H226V1.5H242.113ZM242.113 33.8216C245.98 33.8216 247.162 33.7148 248.773 33.0789C252.854 31.4891 255.325 27.3555 255.325 22.1635C255.325 15.6997 251.028 11.8852 243.724 11.8852H237.708V33.7148H242.113V33.8216Z" fill="#FFFEFB"/>
-<path d="M378 32.5663V64.5535C370.792 70.149 362.736 73 354.043 73C333.9 73 318 57.0573 318 36.7884C318 16.5196 333.69 1 353.724 1C360.192 1 367.081 2.79497 372.277 5.7509L370.05 16.8363C365.492 13.9854 358.282 11.9795 352.559 11.9795C340.155 11.9795 330.401 23.4863 330.401 37.6324C330.401 51.7785 340.578 62.7592 353.724 62.7592C359.024 62.7592 364.324 61.3858 366.87 59.2747V42.8071H349.483L351.71 32.5663H378Z" fill="#E8E7E0"/>
-<path d="M472 37.0003C472 47.0421 467.546 56.9797 460.019 64.0624C453.129 70.6173 444.33 74 434.257 74C413.904 74 398 57.8248 398 36.7896C398 27.6972 401.818 18.2898 408.497 11.0999C414.963 4.12274 424.611 0 434.684 0C455.144 0 472 16.7038 472 37.0003ZM410.298 37.0003C410.298 45.3519 413.055 51.8002 418.674 56.6625C423.232 60.6797 429.171 62.9001 434.895 62.9001C448.888 62.9001 459.595 51.6937 459.595 37.211C459.595 22.7284 448.782 11.0999 435.001 11.0999C421.218 11.0999 410.298 22.3047 410.298 37.0003Z" fill="#E8E7E0"/>
-<path d="M503.571 1.5V62.0358H524V72.5H492V1.60709H503.571V1.5Z" fill="#E8E7E0"/>
-<path d="M559.868 1.5C566.085 1.5 570.695 2.35658 575.304 4.49821C587.744 10.1738 596 23.3463 596 37.5879C596 51.8318 587.206 65.4308 573.805 70.1428C568.98 71.8574 564.799 72.5 559.01 72.5H544V1.60673H559.868V1.5ZM557.937 61.7907C561.796 61.7907 564.371 61.4693 567.051 60.6132C577.236 57.5078 583.99 48.0838 583.99 37.2666C583.99 25.5956 576.27 15.7423 565.227 12.9583C562.654 12.3158 560.834 12.1017 557.078 12.1017H555.472L555.364 61.7907H557.937Z" fill="#E8E7E0"/>
+<path d="M378 32.5663V64.5535C370.792 70.149 362.736 73 354.043 73C333.9 73 318 57.0573 318 36.7884C318 16.5196 333.69 1 353.724 1C360.192 1 367.081 2.79497 372.277 5.7509L370.05 16.8363C365.492 13.9854 358.282 11.9795 352.559 11.9795C340.155 11.9795 330.401 23.4863 330.401 37.6324C330.401 51.7785 340.578 62.7592 353.724 62.7592C359.024 62.7592 364.324 61.3858 366.87 59.2747V42.8071H349.483L351.71 32.5663H378Z" fill="#9A7F62"/>
+<path d="M472 37.0003C472 47.0421 467.546 56.9797 460.019 64.0624C453.129 70.6173 444.33 74 434.257 74C413.904 74 398 57.8248 398 36.7896C398 27.6972 401.818 18.2898 408.497 11.0999C414.963 4.12274 424.611 0 434.684 0C455.144 0 472 16.7038 472 37.0003ZM410.298 37.0003C410.298 45.3519 413.055 51.8002 418.674 56.6625C423.232 60.6797 429.171 62.9001 434.895 62.9001C448.888 62.9001 459.595 51.6937 459.595 37.211C459.595 22.7284 448.782 11.0999 435.001 11.0999C421.218 11.0999 410.298 22.3047 410.298 37.0003Z" fill="#9A7F62"/>
+<path d="M503.571 1.5V62.0358H524V72.5H492V1.60709H503.571V1.5Z" fill="#9A7F62"/>
+<path d="M559.868 1.5C566.085 1.5 570.695 2.35658 575.304 4.49821C587.744 10.1738 596 23.3463 596 37.5879C596 51.8318 587.206 65.4308 573.805 70.1428C568.98 71.8574 564.799 72.5 559.01 72.5H544V1.60673H559.868V1.5ZM557.937 61.7907C561.796 61.7907 564.371 61.4693 567.051 60.6132C577.236 57.5078 583.99 48.0838 583.99 37.2666C583.99 25.5956 576.27 15.7423 565.227 12.9583C562.654 12.3158 560.834 12.1017 557.078 12.1017H555.472L555.364 61.7907H557.937Z" fill="#9A7F62"/>
 </svg>
diff --git a/stores/menuStore.ts b/stores/menuStore.ts
index 15392fe..768526b 100644
--- a/stores/menuStore.ts
+++ b/stores/menuStore.ts
@@ -36,7 +36,6 @@ export const useMenuStore = defineStore("menuStore", () => {
   const openMenu = ref(false);
   const openDropDown = ref(false);
 
-
   const defaultMenu = ref();
   const menu = ref<UIMenuItem[]>([]);
   const menuItems = ref<MenuListResponse>();
@@ -45,6 +44,11 @@ export const useMenuStore = defineStore("menuStore", () => {
   const countryList = ref<CountryList[]>();
   const currencies = ref<Currencies[]>();
 
+  // curr/country
+  const selectedCountry = ref();
+  const selectedPhoneCountry = ref();
+  const selectedCurrency = ref<Currencies>();
+
   const loadMenu = async () => {
     try {
       menuItems.value = (await pb
@@ -98,6 +102,8 @@ export const useMenuStore = defineStore("menuStore", () => {
 
       const data = await res.json();
       countryList.value = data.data
+      if (countryList.value)
+        selectedPhoneCountry.value = countryList.value[0]
 
     } catch (error) {
       console.error("getList error:", error);
@@ -121,7 +127,6 @@ export const useMenuStore = defineStore("menuStore", () => {
 
       const data = await res.json();
       currencies.value = data.data.items
-
     } catch (error) {
       console.error("getList error:", error);
     }
@@ -226,6 +231,10 @@ export const useMenuStore = defineStore("menuStore", () => {
     await loadMenu();
     await loadFooter();
   });
+
+  watch(selectedCurrency, () => {
+    store.getCalculator()
+  })
   return {
     menu,
     menuItems,
@@ -234,6 +243,9 @@ export const useMenuStore = defineStore("menuStore", () => {
     openDropDown,
     countryList,
     currencies,
+    selectedCountry,
+    selectedCurrency,
+    selectedPhoneCountry,
     loadMenu,
     loadFooter,
     getCountryList,
diff --git a/stores/store.ts b/stores/store.ts
index 3308a7f..1f07948 100644
--- a/stores/store.ts
+++ b/stores/store.ts
@@ -11,6 +11,7 @@ export const useStore = defineStore("store", () => {
   const monthlySavings = ref(137);
   const storagePeriod = ref(10);
   const totalInvestment = ref()
+  const minValue = ref()
 
   const components = ref({} as PBPageItem[]);
   const getSections = async (id: string) => {
@@ -87,7 +88,31 @@ export const useStore = defineStore("store", () => {
     }
   }
 
+  async function getMinValue() {
+    try {
+      const res = await fetch(
+        'http://127.0.0.1:4000/api/public/plan-prediction/free/minimum',
+        {
+          headers: {
+            "Content-Type": "application/json",
+          },
+        }
+      );
+
+      if (!res.ok) {
+        throw new Error(`HTTP error: ${res.status}`);
+      }
+
+      const data = await res.json();
+      minValue.value = data.data
+
+    } catch (error) {
+      console.error("getList error:", error);
+    }
+  }
+
   getCalculator()
+  getMinValue()
 
   return {
     currentPageID,
@@ -95,6 +120,7 @@ export const useStore = defineStore("store", () => {
     totalInvestment,
     monthlySavings,
     storagePeriod,
+    minValue,
     getCalculator,
     getComponents,
     getSections,