From a2db817133366272041ad55adb61d5d9abef3aa7 Mon Sep 17 00:00:00 2001
From: Arina Yakovenko <yakovenko_arina@ma-al.com>
Date: Fri, 4 Jul 2025 16:01:44 +0200
Subject: [PATCH] pre registration

---
 components/HeaderBlock.vue                 | 279 +++++++--------------
 components/section/FooterBlock.vue         |  54 +---
 components/section/LoginMain.vue           |   3 +-
 components/section/MainHero.vue            |   2 +-
 components/section/PreRegistrationMain.vue | 254 +++++++++++++++++++
 components/section/RegistrationMain.vue    | 267 ++++++++++----------
 components/ui/CheckoutInput.vue            |  55 ++--
 stores/menuStore.ts                        |   9 +-
 8 files changed, 511 insertions(+), 412 deletions(-)
 create mode 100644 components/section/PreRegistrationMain.vue

diff --git a/components/HeaderBlock.vue b/components/HeaderBlock.vue
index fe60d68..3cb890b 100644
--- a/components/HeaderBlock.vue
+++ b/components/HeaderBlock.vue
@@ -4,37 +4,25 @@
     <div class="w-full border-b border-border">
       <UiContainer class="relative">
         <div class="hidden h-[120px] w-full items-center gap-[145px] xl:flex">
-          <ul
-            class="flex items-center justify-between gap-5 whitespace-nowrap w-full"
-          >
-            <li
-              v-for="(item, index) in menuStore.menu"
-              :key="item.id"
-              :class="[
-                'hover:text-accent-green-light dark:hover:text-accent-green-dark cursor-pointer text-lg transition-all text-inter',
-                route.params.id == item.id.toString()
-                  ? 'text-accent-green-light dark:text-accent-green-dark font-bold underline'
-                  : false,
-              ]"
-              @click="menuStore.navigateToItem(item)"
-            >
+          <ul class="flex items-center justify-between gap-5 whitespace-nowrap w-full">
+            <li v-for="(item, index) in menuStore.menu" :key="item.id" :class="[
+              'hover:text-accent-green-light dark:hover:text-accent-green-dark cursor-pointer text-lg transition-all text-inter',
+              route.params.id == item.id.toString()
+                ? 'text-accent-green-light dark:text-accent-green-dark font-bold underline'
+                : false,
+            ]" @click="menuStore.navigateToItem(item)">
               0{{ index + 1 }} <br>
               {{ item.front_menu_lang[0].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]">
               <div>
-                <i v-if="!userStore.isLogged"
-                   class="uil uil-user text-[31px] cursor-pointer"
+                <i v-if="!userStore.isLogged" class="uil uil-user text-[31px] cursor-pointer"
                    @click="menuStore.navigateToItem(menuStore.menuItems?.find((item) => item.id === 11))"></i>
                 <div v-else class="py-[6px] px-3 border border-block rounded-sm">
                   {{ userStore.user }}
@@ -47,15 +35,12 @@
               <CountryCurrencySelector />
             </div>
             <ThemeSwitcher />
-            <button
-              :class="[
-                'cursor-pointer transition-all text-inter whitespace-nowrap',
-                route.params.id == '5'
-                  ? 'text-accent-green-light dark:text-accent-green-dark font-bold pb-1 border-b-2'
-                  : 'hover:bg-button-hover bg-button text-white font-medium rounded-xl px-6 py-3',
-              ]"
-              @click="menuStore.navigateToShop"
-            >
+            <button :class="[
+              'cursor-pointer transition-all text-inter whitespace-nowrap',
+              route.params.id == '5'
+                ? 'text-accent-green-light dark:text-accent-green-dark font-bold pb-1 border-b-2'
+                : 'hover:bg-button-hover bg-button text-white font-medium rounded-xl px-6 py-3',
+            ]" @click="menuStore.navigateToShop">
               {{ $t("eshop") }}
             </button>
           </div>
@@ -64,35 +49,22 @@
     </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]">
               <div>
-                <i
-                  v-if="!userStore.isLogged"
-                  class="uil uil-user text-[31px] cursor-pointer"
-                  @click="
-                    menuStore.navigateToItem(
-                      menuStore.menuItems?.find((item) => item.id === 11),
-                    )
-                  "
-                />
-                <div
-                  v-else
-                  class="py-[6px] px-3 border border-block rounded-sm"
-                >
+                <i v-if="!userStore.isLogged" class="uil uil-user text-[31px] cursor-pointer" @click="
+                  menuStore.navigateToItem(
+                    menuStore.menuItems?.find((item) => item.id === 11),
+                  )
+                " />
+                <div v-else class="py-[6px] px-3 border border-block rounded-sm">
                   {{ userStore.user }}
                 </div>
               </div>
@@ -103,54 +75,33 @@
               <CountryCurrencySelector />
             </div>
             <ThemeSwitcher />
-            <i
-              variant="subtle"
-              block
-              class="uil uil-apps text-[33px] cursor-pointer"
-              @click="open = !open"
-            />
+            <i variant="subtle" block class="uil uil-apps text-[33px] cursor-pointer" @click="open = !open" />
           </div>
         </UiContainer>
       </div>
-      <UCollapsible
-        v-model:open="open"
-        :ui="{ content: 'w-full' }"
-        class="w-full"
-      >
+      <UCollapsible v-model:open="open" :ui="{ content: 'w-full' }" 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"
-                :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.front_menu_lang[0].link_rewrite
-                    && 'text-accent-green-light dark:text-accent-green-dark font-bold underline',
-                ]"
-                @click="
-                  () => {
-                    menuStore.navigateToItem(item);
-                    open = false;
-                  }
-                "
-              >
+              <div v-for="(item, index) in menuStore.menu" :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.front_menu_lang[0].link_rewrite
+                  && 'text-accent-green-light dark:text-accent-green-dark font-bold underline',
+              ]" @click="
+                () => {
+                  menuStore.navigateToItem(item);
+                  open = false;
+                }
+              ">
                 <div class="leading-[70%] text-inter">
                   <span class="mr-4">0{{ index + 1 }}</span>
                   {{ item.front_menu_lang[0].name }}
                 </div>
                 <!-- <i class="uil uil-arrow-up-right text-[35px]"></i> -->
-                <svg
-                  width="20"
-                  height="20"
-                  viewBox="0 0 26 26"
-                  fill="none"
-                  xmlns="http://www.w3.org/2000/svg"
-                >
+                <svg 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>
@@ -160,88 +111,54 @@
     </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]">
               <div>
-                <i
-                  v-if="!userStore.isLogged"
-                  class="uil uil-user text-[31px] cursor-pointer"
-                  @click="
-                    menuStore.navigateToItem(
-                      menuStore.menuItems?.find((item) => item.id === 11),
-                    )
-                  "
-                />
-                <div
-                  v-else
-                  class="py-[6px] px-3 border border-block rounded-sm"
-                >
+                <i v-if="!userStore.isLogged" class="uil uil-user text-[31px] cursor-pointer" @click="
+                  menuStore.navigateToItem(
+                    menuStore.menuItems?.find((item) => item.id === 11),
+                  )
+                " />
+                <div v-else class="py-[6px] px-3 border border-block rounded-sm">
                   {{ userStore.user }}
                 </div>
               </div>
               <CartPopup />
             </div>
-            <i
-              variant="subtle"
-              block
-              class="uil uil-apps text-[30px] cursor-pointer"
-              @click="open = !open"
-            />
+            <i variant="subtle" block class="uil uil-apps text-[30px] cursor-pointer" @click="open = !open" />
           </div>
         </UiContainer>
       </div>
-      <UCollapsible
-        v-model:open="open"
-        :ui="{ content: 'w-full' }"
-        class="w-full"
-      >
+      <UCollapsible v-model:open="open" :ui="{ content: 'w-full' }" 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"
-                :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.front_menu_lang[0].link_rewrite
-                    && 'text-accent-green-light dark:text-accent-green-dark font-bold underline',
-                ]"
-                @click="
-                  () => {
-                    menuStore.navigateToItem(item);
-                    open = false;
-                  }
-                "
-              >
+              <div v-for="(item, index) in menuStore.menu" :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.front_menu_lang[0].link_rewrite
+                  && 'text-accent-green-light dark:text-accent-green-dark font-bold underline',
+              ]" @click="
+                () => {
+                  menuStore.navigateToItem(item);
+                  open = false;
+                }
+              ">
                 <div class="leading-[70%] text-inter">
                   <span class="mr-4">0{{ index + 1 }}</span>
                   {{ item.front_menu_lang[0].name }}
                 </div>
                 <!-- <i class="uil uil-arrow-up-right text-[35px]"></i> -->
-                <svg
-                  width="20"
-                  height="20"
-                  viewBox="0 0 26 26"
-                  fill="none"
-                  xmlns="http://www.w3.org/2000/svg"
-                >
+                <svg 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">
@@ -273,74 +190,46 @@
       <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>
-              <i
-                class="uil uil-user text-[30px] cursor-pointer"
-                @click="
-                  !userStore.isLogged
-                    && menuStore.navigateToItem(
-                      menuStore.menuItems?.find((item) => item.id === 11),
-                    )
-                "
-              />
+              <i class="uil uil-user text-[30px] cursor-pointer" @click="
+                !userStore.isLogged
+                  && menuStore.navigateToItem(
+                    menuStore.menuItems?.find((item) => item.id === 11),
+                  )
+              " />
             </div>
             <CartPopup />
-            <i
-              variant="subtle"
-              block
-              class="uil uil-apps text-[30px] cursor-pointer"
-              @click="open = !open"
-            />
+            <i variant="subtle" block class="uil uil-apps text-[30px] cursor-pointer" @click="open = !open" />
           </div>
         </UiContainer>
       </div>
-      <UCollapsible
-        v-model:open="open"
-        :ui="{ content: 'w-full' }"
-        class="w-full"
-      >
+      <UCollapsible v-model:open="open" :ui="{ content: 'w-full' }" 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"
-                :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.front_menu_lang[0].link_rewrite
-                    && 'text-accent-green-light dark:text-accent-green-dark font-bold underline',
-                ]"
-                @click="
-                  () => {
-                    menuStore.navigateToItem(item);
-                    open = false;
-                  }
-                "
-              >
+              <div v-for="(item, index) in menuStore.menu" :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.front_menu_lang[0].link_rewrite
+                  && 'text-accent-green-light dark:text-accent-green-dark font-bold underline',
+              ]" @click="
+                () => {
+                  menuStore.navigateToItem(item);
+                  open = false;
+                }
+              ">
                 <div class="leading-[70%] text-inter">
                   <span class="mr-4">0{{ index + 1 }}</span>
                   {{ item.front_menu_lang[0].name }}
                 </div>
                 <!-- <i class="uil uil-arrow-up-right text-[35px]"></i> -->
-                <svg
-                  width="20"
-                  height="20"
-                  viewBox="0 0 26 26"
-                  fill="none"
-                  xmlns="http://www.w3.org/2000/svg"
-                >
+                <svg 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">
diff --git a/components/section/FooterBlock.vue b/components/section/FooterBlock.vue
index 43cd279..f5ce3a1 100644
--- a/components/section/FooterBlock.vue
+++ b/components/section/FooterBlock.vue
@@ -2,52 +2,26 @@
   <div class="border-t border-border pt-[75px]">
     <UiContainer class="flex flex-col gap-24">
       <div
-        class="grid grid-cols-1 md:grid-cols-2 gap-[75px] xl:gap-0 xl:grid-cols-none xl:grid-flow-col auto-cols-max justify-between"
-      >
-        <div>
-          <div
-            v-for="(item, key) in contact"
-            :key="key"
-            class="flex flex-col gap-[25px] sm:gap-8 max-w-[280px]"
-          >
-            <h3 v-if="key == 'header'"
-                class="h4-uppercase-bold-inter"
-            >
+        class="grid grid-cols-1 md:grid-cols-2 gap-[75px] xl:gap-0 xl:grid-cols-none xl:grid-flow-col auto-cols-max justify-between">
+        <div class="flex flex-col gap-[25px] sm:gap-8 max-w-[280px]">
+          <div v-for="(item, key) in contact" :key="key">
+            <h3 v-if="key == 'header'" class="h4-uppercase-bold-inter">
               {{ item }}
             </h3>
-            <div v-else
-                 class="transition-all text-inter"
-            >
+            <div v-else class="transition-all text-inter">
               {{ item }}
             </div>
           </div>
-          <div class="text-red-500">
-            arina - doadj tu icone i style
-          </div>
-          <a
-            href="/lei_certificate_aurrie.pdf"
-            target="_blank"
-            rel="noopener noreferrer"
-          >{{ $t("Footer.Lei") }}</a>
+          <a href="/lei_certificate_aurrie.pdf" target="_blank" rel="noopener noreferrer">{{ $t("Footer.Lei") }}</a>
         </div>
 
-        <div
-          v-for="(section, index) in docs"
-          :key="index"
-          class="flex flex-col gap-[25px] sm:gap-8 max-w-[280px]"
-        >
+        <div v-for="(section, index) in docs" :key="index" class="flex flex-col gap-[25px] sm:gap-8 max-w-[280px]">
           <h3 class="h4-uppercase-bold-inter">
             {{ section.translation }}
           </h3>
-          <div v-for="(item, key) in section.data"
-               :key="key"
-          >
-            <div
-              class="cursor-pointer hover:text-text-light/80 dark:hover:text-text-dark/70 transition-all text-inter"
-            >
-              <a target="_blank"
-                 :href="`/api/public/document/${item.name}`"
-              >{{
+          <div v-for="(item, key) in section.data" :key="key">
+            <div class="cursor-pointer hover:text-text-light/80 dark:hover:text-text-dark/70 transition-all text-inter">
+              <a target="_blank" :href="`/api/public/document/${item.name}`">{{
                 item.translation
               }}</a>
             </div>
@@ -56,12 +30,8 @@
       </div>
 
       <ClientOnly v-if="!colorMode?.forced">
-        <img
-          class="cursor-pointer w-[70%] sm:w-[50%] xl:w-[30%]"
-          :src="isDark ? '/logo-footer-dark.svg' : '/logo-footer.svg'"
-          alt="logo"
-          @click="menuStore.navigateToItem()"
-        >
+        <img class="cursor-pointer w-[70%] sm:w-[50%] xl:w-[30%]"
+             :src="isDark ? '/logo-footer-dark.svg' : '/logo-footer.svg'" alt="logo" @click="menuStore.navigateToItem()">
       </ClientOnly>
     </UiContainer>
   </div>
diff --git a/components/section/LoginMain.vue b/components/section/LoginMain.vue
index 3eb8506..209586c 100644
--- a/components/section/LoginMain.vue
+++ b/components/section/LoginMain.vue
@@ -46,7 +46,8 @@
         <p>
           {{ $t("no_account") }}
         </p>
-        <nuxt-link :to="{ name: `id-slug___${$i18n.locale}`, params: { id: menuStore.getRegistrationMenu()?.id, slug: menuStore.getRegistrationMenu()?.front_menu_lang.at(0)?.link_rewrite } }">
+        <nuxt-link
+          :to="{ name: `id-slug___${$i18n.locale}`, params: { id: menuStore.getPreRegistrationMenu()?.id, slug: menuStore.getPreRegistrationMenu()?.front_menu_lang.at(0)?.link_rewrite } }">
           <p class="text-button cursor-pointer hover:text-button-hover">
             {{ $t("sign_up_now") }}
           </p>
diff --git a/components/section/MainHero.vue b/components/section/MainHero.vue
index 8166275..5e5516d 100644
--- a/components/section/MainHero.vue
+++ b/components/section/MainHero.vue
@@ -19,7 +19,7 @@
           {{ component.front_section_lang[0].data.title_second }}
         </h3>
         <div class="flex w-full items-start justify-center sm:justify-end">
-          <nuxt-link :to="{ name: `id-slug___${$i18n.locale}`, params: { id: menuStore.getRegistrationMenu()?.id, slug: menuStore.getRegistrationMenu()?.front_menu_lang.at(0)?.link_rewrite } }">
+          <nuxt-link :to="{ name: `id-slug___${$i18n.locale}`, params: { id: menuStore.getPreRegistrationMenu()?.id, slug: menuStore.getPreRegistrationMenu()?.front_menu_lang.at(0)?.link_rewrite } }">
             <UiButtonArrow :arrow="true"
                            type="fill"
             >
diff --git a/components/section/PreRegistrationMain.vue b/components/section/PreRegistrationMain.vue
new file mode 100644
index 0000000..ca9f1b6
--- /dev/null
+++ b/components/section/PreRegistrationMain.vue
@@ -0,0 +1,254 @@
+<template>
+  <UiContainer class="flex py-[15px] xl:py-20 sm:py-0">
+    <div class="hidden xl:block rounded-2xl min-w-[40%] h-[830px]" :style="{
+      backgroundImage: `url('/api/public/file/${component.img[0]}_l.webp')`,
+      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 flex-wrap-reverse gap-y-4 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"
+            @click="menuStore.navigateToItem()">
+            {{ $t("back_to_home") }}
+          </button>
+        </div>
+        <div class="space-y-[25px] sm:space-y-[30px]">
+          <p>{{ $t("current_information") }}</p>
+          <div class="grid grid-cols-1 md:grid-cols-2 gap-[30px]">
+            <CheckoutInput :id="1" v-model="user.data.name" :validation="nameValidation"
+                           :validation-text="$t('enter_correct_data')" :placeholder="$t('first_name')">
+              {{ $t("first_name") }}
+            </CheckoutInput>
+            <CheckoutInput :id="1" v-model="user.data.surname" :validation="surnameValidation"
+                           :validation-text="$t('enter_correct_data')" :placeholder="$t('last_name')">
+              {{ $t("last_name") }}
+            </CheckoutInput>
+            <CheckoutInput :id="1" v-model="user.data.email" :validation="emailValidation"
+                           :validation-text="$t('enter_correct_data')" :placeholder="$t('email')">
+              {{ $t("email") }}
+            </CheckoutInput>
+            <div ref="dropdownRef" class="space-y-[15px]">
+              <p class="pl-6">
+                {{ $t("phone") }}
+              </p>
+              <div>
+                <div class="flex items-center border border-block rounded-lg">
+                  <div
+                    class="relative z-50 bg-inherit ring-0 cursor-pointer focus:ring-0 outline-none focus-visible:ring-0">
+                    <div class="px-[25px]" @click="dropCountry = !dropCountry">
+                      <div
+                        class="flex items-center gap-2 text-sm sm:text-xl uppercase text-text-light dark:text-text-dark">
+                        <span :class="[dropCountry && 'rotate-180', 'transition-all']">
+                          <i class="uil uil-angle-down text-2xl font-light cursor-pointer" /></span>
+                        <p class="text-sm sm:text-xl">
+                          {{ menuStore.selectedPhoneCountry.iso_code }}
+                        </p>
+                      </div>
+                    </div>
+
+                    <div v-if="dropCountry"
+                         class="mt-2 absolute bg-bg-light dark:bg-bg-dark rounded-[5px] ring-0 cursor-pointer w-[130px] sm:w-full border border-button py-[10px] px-[5px] overflow-hidden">
+                      <div class="overflow-y-auto h-[200px] w-full">
+                        <p v-for="item in menuStore.countries" :key="item.iso_code"
+                           class="w-full truncate whitespace-nowrap overflow-hidden hover:bg-block dark:hover:bg-button pl-2 py-2 text-base text-text-light dark:text-text-dark rounded-[5px]"
+                           :title="item.name" @click="
+                             () => {
+                               menuStore.selectedPhoneCountry = item;
+                               dropCountry = false;
+                             }
+                           ">
+                          {{ item.name }}
+                        </p>
+                      </div>
+                    </div>
+                  </div>
+                  <p class="text-sm sm:text-xl font-normal">
+                    {{ menuStore.selectedPhoneCountry.call_prefix }}
+                  </p>
+                  <input id="phone" v-model="user.data.phone" :placeholder="$t('phone')" type="text"
+                         class="text-sm sm:text-xl 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>
+                <p v-if="!phoneValidation && phoneValidation != null" class="mt-2 text-xs text-red-600">
+                  {{ $t('enter_correct_data') }}
+                </p>
+              </div>
+            </div>
+            <div class="space-y-[15px]">
+              <p class="pl-6">
+                {{ $t("account_type") }}
+              </p>
+              <USelect v-model="selectedType" :items="component.front_section_lang
+                && component.front_section_lang[0].data.account_types
+              " value-key="name" :searchable="false" :ui="{
+                base: 'bg-inherit ring-0 cursor-pointer w-auto focus:ring-0 outline-none focus-visible:ring-0 h-[50px] sm:h-[67px] w-full p-0',
+                trailing: 'hidden w-full',
+                viewport: 'ring-0 min-w-full',
+                content:
+                  'bg-bg-light dark:bg-bg-dark ring-0 border border-button',
+                leading:
+                  'left-1/2 top-1/2 transform -translate-x-1/2 -translate-y-1/2 p-0 w-full',
+                group: 'px-[5px] py-[10px]',
+                item: 'hover:bg-block dark:hover:bg-button rounded-[5px] data-highlighted:not-data-disabled:before:bg-button/50 min-w-full',
+              }">
+                <template #leading="{ modelValue }">
+                  <div
+                    class="flex items-center justify-between gap-2 uppercase text-sm sm:text-xl border border-block placeholder:text-gray dark:placeholder:text-button-disabled text-bg-dark dark:text-bg-light rounded-lg px-6 w-full h-[50px] sm:h-[67px]">
+                    <p class="truncate whitespace-nowrap">
+                      {{
+                        component.front_section_lang
+                          && component.front_section_lang[0].data.account_types.find(
+                            (item) => item.name === modelValue,
+                          )?.name
+                      }}
+                    </p>
+                    <span>
+                      <i class="uil uil-angle-down text-2xl font-light cursor-pointer" /></span>
+                  </div>
+                </template>
+
+                <template #item="{ item }">
+                  <div class="flex items-center gap-2 cursor-pointer min-w-full">
+                    <p
+                      class="truncate whitespace-nowrap text-sm sm:text-xl font-medium uppercase text-text-light dark:text-text-dark opacity-100">
+                      {{ item.name }}
+                    </p>
+                  </div>
+                </template>
+              </USelect>
+            </div>
+            <div class="space-y-[15px]">
+              <p class="pl-6">
+                {{ $t("partner_code") }}
+              </p>
+              <input :placeholder="$t('placeholder_password')" type="text"
+                     class="border 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" @click="sendForm()">
+          {{
+            $t("sign_up")
+          }}
+        </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>
+        <nuxt-link
+          :to="{ name: `id-slug___${$i18n.locale}`, params: { id: menuStore.getLoginMenu()?.id, slug: menuStore.getLoginMenu()?.front_menu_lang.at(0)?.link_rewrite } }">
+          <p class="text-button cursor-pointer hover:text-button-hover">
+            {{ $t("login") }}
+          </p>
+        </nuxt-link>
+      </div>
+    </div>
+  </UiContainer>
+</template>
+
+<script lang="ts" setup>
+import { onClickOutside } from '@vueuse/core'
+import CheckoutInput from '../ui/CheckoutInput.vue'
+import type { GenericResponse } from '~/types'
+
+const props = defineProps<{
+  component: {
+    id: number
+    name: string
+    img: string[]
+    component_name: string
+    is_no_lang: boolean
+    page_name: string
+    front_section_lang: {
+      data: {
+        account_types: {
+          id: number
+          name: string
+          value: string
+        }[]
+      }
+      id_front_section: number
+      id_lang: number
+    }[]
+  }
+}>()
+
+const menuStore = useMenuStore()
+const dropdownRef = ref(null)
+const dropCountry = ref()
+
+const user = ref({
+  data: {
+    name: '',
+    surname: '',
+    email: '',
+    phone: '',
+  },
+})
+
+const nameValidation = ref<boolean | null>(null)
+const surnameValidation = ref<boolean | null>(null)
+const emailValidation = ref<boolean | null>(null)
+const phoneValidation = ref<boolean | null>(null)
+const codeValidation = ref<boolean | null>(null)
+
+const selectedType = ref()
+if (props.component.front_section_lang)
+  selectedType.value
+    = props.component.front_section_lang[0].data.account_types[0].name
+
+const sendForm = async () => {
+  const phoneNum = `${menuStore.selectedPhoneCountry.call_prefix}${user.value.data.phone}`.replaceAll(' ', '').trim()
+  console.log(phoneNum)
+
+  nameValidation.value = validation(user.value.data.name, 1, 49)
+  surnameValidation.value = validation(user.value.data.surname, 1, 49)
+  emailValidation.value = validation(user.value.data.email, 1, 49, REGEX_EMAIL)
+  phoneValidation.value = validation(phoneNum, 1, 49, REGEX_PHONE)
+  // codeValidation.value = validation(vCode.value as string, 1, 49);
+
+  const selectedTypeValue = props.component.front_section_lang[0].data.account_types.find(item => item.name === selectedType.value)?.value
+
+  if (nameValidation.value && surnameValidation.value && emailValidation.value && phoneValidation.value && codeValidation) {
+    try {
+      await useMyFetch<GenericResponse<object>>(
+        `/api/public/register/new_link?customer_type=${selectedTypeValue}`,
+        {
+          method: 'POST',
+          headers: {
+            'Content-Type': 'application/json',
+          },
+          body: JSON.stringify({
+            email: user.value.data.email,
+            first_name: user.value.data.name,
+            last_name: user.value.data.surname,
+            phone_number: phoneNum,
+            // partner_code: vCode.value,
+            customer_type: selectedType.value,
+          }),
+          onErrorOccured: (_, status) => {
+            throw new Error(`HTTP error: ${status}`)
+          },
+        },
+      )
+    }
+
+    // successRegister.value = true;
+    // isLoader.value = false;
+    catch (error) {
+      console.error('getList error:', error)
+    }
+  }
+}
+
+onClickOutside(dropdownRef, () => {
+  dropCountry.value = false
+})
+</script>
diff --git a/components/section/RegistrationMain.vue b/components/section/RegistrationMain.vue
index a51ba83..0c38e86 100644
--- a/components/section/RegistrationMain.vue
+++ b/components/section/RegistrationMain.vue
@@ -1,13 +1,5 @@
 <template>
   <UiContainer class="flex py-[15px] xl:py-20 sm:py-0">
-    <div
-      class="hidden xl:block rounded-2xl min-w-[40%] h-[830px]"
-      :style="{
-        backgroundImage: `url('/api/public/file/${component.img[0]}_l.webp')`,
-        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 flex-wrap-reverse gap-y-4 justify-between">
@@ -16,133 +8,91 @@
           </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"
-            @click="menuStore.navigateToItem()"
-          >
+            @click="menuStore.navigateToItem()">
             {{ $t("back_to_home") }}
           </button>
         </div>
         <div class="space-y-[25px] sm:space-y-[30px]">
           <p>{{ $t("current_information") }}</p>
           <div class="grid grid-cols-1 md: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="text-sm sm:text-xl border 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="text-sm sm:text-xl 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="text-sm sm:text-xl border 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 ref="dropdownRef"
-                 class="space-y-[15px]"
-            >
+            <CheckoutInput :id="1" v-model="user.data.name" :validation="nameValidation"
+                           :validation-text="$t('enter_correct_data')" :placeholder="$t('first_name')">
+              {{ $t("first_name") }}
+            </CheckoutInput>
+            <CheckoutInput :id="1" v-model="user.data.surname" :validation="surnameValidation"
+                           :validation-text="$t('enter_correct_data')" :placeholder="$t('last_name')">
+              {{ $t("last_name") }}
+            </CheckoutInput>
+            <CheckoutInput :id="1" v-model="user.data.email" :validation="emailValidation"
+                           :validation-text="$t('enter_correct_data')" :placeholder="$t('email')">
+              {{ $t("email") }}
+            </CheckoutInput>
+            <div ref="dropdownRef" 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"
-                >
-                  <div class="px-[25px]"
-                       @click="dropCountry = !dropCountry"
-                  >
-                    <div
-                      class="flex items-center gap-2 text-sm sm:text-xl uppercase text-text-light dark:text-text-dark"
-                    >
-                      <span
-                        :class="[dropCountry && 'rotate-180', 'transition-all']"
-                      >
-                        <i
-                          class="uil uil-angle-down text-2xl font-light cursor-pointer"
-                        /></span>
-                      <p class="text-sm sm:text-xl">
-                        {{ menuStore.selectedPhoneCountry.iso_code }}
-                      </p>
-                    </div>
-                  </div>
-
+              <div>
+                <div class="flex items-center border border-block rounded-lg">
                   <div
-                    v-if="dropCountry"
-                    class="mt-2 absolute bg-bg-light dark:bg-bg-dark rounded-[5px] ring-0 cursor-pointer w-[130px] sm:w-full border border-button py-[10px] px-[5px] overflow-hidden"
-                  >
-                    <div class="overflow-y-auto h-[200px] w-full">
-                      <p
-                        v-for="item in menuStore.countries"
-                        :key="item.iso_code"
-                        class="w-full truncate whitespace-nowrap overflow-hidden hover:bg-block dark:hover:bg-button pl-2 py-2 text-base text-text-light dark:text-text-dark rounded-[5px]"
-                        :title="item.name"
-                        @click="
-                          () => {
-                            menuStore.selectedPhoneCountry = item;
-                            dropCountry = false;
-                          }
-                        "
-                      >
-                        {{ item.name }}
-                      </p>
+                    class="relative z-50 bg-inherit ring-0 cursor-pointer focus:ring-0 outline-none focus-visible:ring-0">
+                    <div class="px-[25px]" @click="dropCountry = !dropCountry">
+                      <div
+                        class="flex items-center gap-2 text-sm sm:text-xl uppercase text-text-light dark:text-text-dark">
+                        <span :class="[dropCountry && 'rotate-180', 'transition-all']">
+                          <i class="uil uil-angle-down text-2xl font-light cursor-pointer" /></span>
+                        <p class="text-sm sm:text-xl">
+                          {{ menuStore.selectedPhoneCountry.iso_code }}
+                        </p>
+                      </div>
+                    </div>
+
+                    <div v-if="dropCountry"
+                         class="mt-2 absolute bg-bg-light dark:bg-bg-dark rounded-[5px] ring-0 cursor-pointer w-[130px] sm:w-full border border-button py-[10px] px-[5px] overflow-hidden">
+                      <div class="overflow-y-auto h-[200px] w-full">
+                        <p v-for="item in menuStore.countries" :key="item.iso_code"
+                           class="w-full truncate whitespace-nowrap overflow-hidden hover:bg-block dark:hover:bg-button pl-2 py-2 text-base text-text-light dark:text-text-dark rounded-[5px]"
+                           :title="item.name" @click="
+                             () => {
+                               menuStore.selectedPhoneCountry = item;
+                               dropCountry = false;
+                             }
+                           ">
+                          {{ item.name }}
+                        </p>
+                      </div>
                     </div>
                   </div>
+                  <p class="text-sm sm:text-xl font-normal">
+                    {{ menuStore.selectedPhoneCountry.call_prefix }}
+                  </p>
+                  <input id="phone" v-model="user.data.phone" :placeholder="$t('phone')" type="text"
+                         class="text-sm sm:text-xl 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>
-                <p class="text-sm sm:text-xl font-normal">
-                  {{ menuStore.selectedPhoneCountry.call_prefix }}
+                <p v-if="!phoneValidation && phoneValidation != null" class="mt-2 text-xs text-red-600">
+                  {{ $t('enter_correct_data') }}
                 </p>
-                <input
-                  id="phone"
-                  :placeholder="$t('phone')"
-                  type="text"
-                  class="text-sm sm:text-xl 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("account_type") }}
               </p>
-              <USelect
-                v-model="selectedType"
-                :items="
-                  component.front_section_lang
-                    && component.front_section_lang[0].data.account_types
-                "
-                value-key="name"
-                :searchable="false"
-                :ui="{
-                  base: 'bg-inherit ring-0 cursor-pointer w-auto focus:ring-0 outline-none focus-visible:ring-0 h-[50px] sm:h-[67px] w-full p-0',
-                  trailing: 'hidden w-full',
-                  viewport: 'ring-0 min-w-full',
-                  content:
-                    'bg-bg-light dark:bg-bg-dark ring-0 border border-button',
-                  leading:
-                    'left-1/2 top-1/2 transform -translate-x-1/2 -translate-y-1/2 p-0 w-full',
-                  group: 'px-[5px] py-[10px]',
-                  item: 'hover:bg-block dark:hover:bg-button rounded-[5px] data-highlighted:not-data-disabled:before:bg-button/50 min-w-full',
-                }"
-              >
+              <USelect v-model="selectedType" :items="component.front_section_lang
+                && component.front_section_lang[0].data.account_types
+              " value-key="name" :searchable="false" :ui="{
+                base: 'bg-inherit ring-0 cursor-pointer w-auto focus:ring-0 outline-none focus-visible:ring-0 h-[50px] sm:h-[67px] w-full p-0',
+                trailing: 'hidden w-full',
+                viewport: 'ring-0 min-w-full',
+                content:
+                  'bg-bg-light dark:bg-bg-dark ring-0 border border-button',
+                leading:
+                  'left-1/2 top-1/2 transform -translate-x-1/2 -translate-y-1/2 p-0 w-full',
+                group: 'px-[5px] py-[10px]',
+                item: 'hover:bg-block dark:hover:bg-button rounded-[5px] data-highlighted:not-data-disabled:before:bg-button/50 min-w-full',
+              }">
                 <template #leading="{ modelValue }">
                   <div
-                    class="flex items-center justify-between gap-2 uppercase text-sm sm:text-xl border-2 border-block placeholder:text-gray dark:placeholder:text-button-disabled text-bg-dark dark:text-bg-light rounded-lg px-6 w-full h-[50px] sm:h-[67px]"
-                  >
+                    class="flex items-center justify-between gap-2 uppercase text-sm sm:text-xl border border-block placeholder:text-gray dark:placeholder:text-button-disabled text-bg-dark dark:text-bg-light rounded-lg px-6 w-full h-[50px] sm:h-[67px]">
                     <p class="truncate whitespace-nowrap">
                       {{
                         component.front_section_lang
@@ -152,19 +102,14 @@
                       }}
                     </p>
                     <span>
-                      <i
-                        class="uil uil-angle-down text-2xl font-light cursor-pointer"
-                      /></span>
+                      <i class="uil uil-angle-down text-2xl font-light cursor-pointer" /></span>
                   </div>
                 </template>
 
                 <template #item="{ item }">
-                  <div
-                    class="flex items-center gap-2 cursor-pointer min-w-full"
-                  >
+                  <div class="flex items-center gap-2 cursor-pointer min-w-full">
                     <p
-                      class="truncate whitespace-nowrap text-sm sm:text-xl font-medium uppercase text-text-light dark:text-text-dark opacity-100"
-                    >
+                      class="truncate whitespace-nowrap text-sm sm:text-xl font-medium uppercase text-text-light dark:text-text-dark opacity-100">
                       {{ item.name }}
                     </p>
                   </div>
@@ -175,21 +120,14 @@
               <p class="pl-6">
                 {{ $t("partner_code") }}
               </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"
-              >
+              <input :placeholder="$t('placeholder_password')" type="text"
+                     class="border 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"
-        >
+      <div class="py-[25px] sm:py-12 border-b border-gray flex justify-center w-full">
+        <UiButtonArrow type="fill" :arrow="true" @click="sendForm()">
           {{
             $t("sign_up")
           }}
@@ -199,7 +137,8 @@
         <p class="cursor-pointer hover:underline transition-all">
           {{ $t("is_account") }}
         </p>
-        <nuxt-link :to="{ name: `id-slug___${$i18n.locale}`, params: { id: menuStore.getLoginMenu()?.id, slug: menuStore.getLoginMenu()?.front_menu_lang.at(0)?.link_rewrite } }">
+        <nuxt-link
+          :to="{ name: `id-slug___${$i18n.locale}`, params: { id: menuStore.getLoginMenu()?.id, slug: menuStore.getLoginMenu()?.front_menu_lang.at(0)?.link_rewrite } }">
           <p class="text-button cursor-pointer hover:text-button-hover">
             {{ $t("login") }}
           </p>
@@ -211,6 +150,8 @@
 
 <script lang="ts" setup>
 import { onClickOutside } from '@vueuse/core'
+import CheckoutInput from '../ui/CheckoutInput.vue'
+import type { GenericResponse } from '~/types'
 
 const props = defineProps<{
   component: {
@@ -225,6 +166,7 @@ const props = defineProps<{
         account_types: {
           id: number
           name: string
+          value: string
         }[]
       }
       id_front_section: number
@@ -237,11 +179,70 @@ const menuStore = useMenuStore()
 const dropdownRef = ref(null)
 const dropCountry = ref()
 
+const user = ref({
+  data: {
+    name: '',
+    surname: '',
+    email: '',
+    phone: '',
+  },
+})
+
+const nameValidation = ref<boolean | null>(null)
+const surnameValidation = ref<boolean | null>(null)
+const emailValidation = ref<boolean | null>(null)
+const phoneValidation = ref<boolean | null>(null)
+const codeValidation = ref<boolean | null>(null)
+
 const selectedType = ref()
 if (props.component.front_section_lang)
   selectedType.value
     = props.component.front_section_lang[0].data.account_types[0].name
 
+const sendForm = async () => {
+  const phoneNum = `${menuStore.selectedPhoneCountry.call_prefix}${user.value.data.phone}`.replaceAll(' ', '').trim()
+  console.log(phoneNum)
+
+  nameValidation.value = validation(user.value.data.name, 1, 49)
+  surnameValidation.value = validation(user.value.data.surname, 1, 49)
+  emailValidation.value = validation(user.value.data.email, 1, 49, REGEX_EMAIL)
+  phoneValidation.value = validation(phoneNum, 1, 49, REGEX_PHONE)
+  // codeValidation.value = validation(vCode.value as string, 1, 49);
+
+  const selectedTypeValue = props.component.front_section_lang[0].data.account_types.find(item => item.name === selectedType.value)?.value
+
+  if (nameValidation.value && surnameValidation.value && emailValidation.value && phoneValidation.value && codeValidation) {
+    try {
+      await useMyFetch<GenericResponse<object>>(
+        `/api/public/register/new_link?customer_type=${selectedTypeValue}`,
+        {
+          method: 'POST',
+          headers: {
+            'Content-Type': 'application/json',
+          },
+          body: JSON.stringify({
+            email: user.value.data.email,
+            first_name: user.value.data.name,
+            last_name: user.value.data.surname,
+            phone_number: phoneNum,
+            // partner_code: vCode.value,
+            customer_type: selectedType.value,
+          }),
+          onErrorOccured: (_, status) => {
+            throw new Error(`HTTP error: ${status}`)
+          },
+        },
+      )
+    }
+
+    // successRegister.value = true;
+    // isLoader.value = false;
+    catch (error) {
+      console.error('getList error:', error)
+    }
+  }
+}
+
 onClickOutside(dropdownRef, () => {
   dropCountry.value = false
 })
diff --git a/components/ui/CheckoutInput.vue b/components/ui/CheckoutInput.vue
index a72826c..e0430ed 100644
--- a/components/ui/CheckoutInput.vue
+++ b/components/ui/CheckoutInput.vue
@@ -1,53 +1,32 @@
 <template>
   <div class="space-y-[15px]">
-    <p :for="`base-input-${id}`"
-       class="pl-6"
-    >
+    <p :for="`base-input-${id}`" class="pl-6">
       <slot />
     </p>
     <div class="flex flex-col">
       <div class="flex relative">
-        <input
-          :id="`base-input-${id}`"
-          :value="modelValue"
-          :type="!isPasswordVisible ? type : 'text'"
-          :placeholder="placeholder"
-          :disabled="disabled"
-          class="border border-block placeholder:text-gray dark:placeholder:text-button-disabled rounded-lg px-6 h-[50px] sm:h-[67px] w-full focus:outline-none focus:ring-0 focus:border-2"
-          @input="
-            $emit(
-              'update:modelValue',
-              ($event.target as HTMLInputElement).value,
-            )
-          "
-          @focus="$emit('focus')"
-          @blur="$emit('blur')"
-        >
-        <i
-          v-if="disabled"
-          class="uil uil-lock-alt text-[22px] absolute right-6 top-1/2 -translate-y-1/2 text-gray"
-        />
+        <input :id="`base-input-${id}`" :value="modelValue" :type="!isPasswordVisible ? type : 'text'"
+               :placeholder="placeholder" :disabled="disabled"
+               class="border border-block placeholder:text-gray dark:placeholder:text-button-disabled rounded-lg px-6 h-[50px] sm:h-[67px] w-full focus:outline-none focus:ring-0 focus:border-2"
+               @input="
+                 $emit(
+                   'update:modelValue',
+                   ($event.target as HTMLInputElement).value,
+                 )
+               " @focus="$emit('focus')" @blur="$emit('blur')">
+        <i v-if="disabled" class="uil uil-lock-alt text-[22px] absolute right-6 top-1/2 -translate-y-1/2 text-gray" />
 
-        <div
-          v-if="type === 'password'"
-          class="order-2 ml-1.5 cursor-pointer"
-          :title="
-            !isPasswordVisible ? $t('show_password') : $t('hide_password')
-          "
-          @click="isPasswordVisible = !isPasswordVisible"
-        >
-          <FaceObserver
-            class="ml-4 text-xl leading-6"
-            :is-password-visible="isPasswordVisible"
-          />
+        <div v-if="type === 'password'" class="order-2 ml-1.5 cursor-pointer" :title="!isPasswordVisible ? $t('show_password') : $t('hide_password')
+        " @click="isPasswordVisible = !isPasswordVisible">
+          <FaceObserver class="ml-4 text-xl leading-6" :is-password-visible="isPasswordVisible" />
         </div>
       </div>
 
       <!-- <p class="mt-2 text-xs text-red-600">{{ validationText }}</p> -->
 
-      <!-- <p v-if="!validation && validation != null" class="mt-2 text-xs text-red-600">
-                {{ validationText }}
-            </p> -->
+      <p v-if="!validation && validation != null" class="mt-2 text-xs text-red-600">
+        {{ validationText }}
+      </p>
     </div>
   </div>
 </template>
diff --git a/stores/menuStore.ts b/stores/menuStore.ts
index 74655e4..bbe9ccd 100644
--- a/stores/menuStore.ts
+++ b/stores/menuStore.ts
@@ -139,7 +139,7 @@ export const useMenuStore = defineStore('menuStore', () => {
     return menuItems.value?.find(item => item.id === 14)
   }
 
-  function getRegistrationMenu() {
+  function getPreRegistrationMenu() {
     return menuItems.value?.find(item => item.id === 4)
   }
 
@@ -167,6 +167,10 @@ export const useMenuStore = defineStore('menuStore', () => {
     return menuItems.value?.find(item => item.id === 10)
   }
 
+  function getRegistrationMenu() {
+    return menuItems.value?.find(item => item.id === 15)
+  }
+
   const getFirstImage = (size: 'l' | 'm' | 's' = 'm', needbaseurl: boolean) => {
     const req = useRequestEvent()
     const url = useRequestURL()
@@ -296,7 +300,7 @@ export const useMenuStore = defineStore('menuStore', () => {
     getLocales,
     getProductMenu,
     formatPrice,
-    getRegistrationMenu,
+    getPreRegistrationMenu,
     getLoginMenu,
     getInvestitionMenu,
     getAboutUsMenu,
@@ -304,5 +308,6 @@ export const useMenuStore = defineStore('menuStore', () => {
     getAboutGoldMenu,
     getContactMenu,
     getShopMenu,
+    getRegistrationMenu,
   }
 })