pre registration

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
+          <ul class="flex items-center justify-between gap-5 whitespace-nowrap w-full">
-            class="flex items-center justify-between gap-5 whitespace-nowrap w-full"
+            <li v-for="(item, index) in menuStore.menu" :key="item.id" :class="[
-          >
-            <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)">
-              @click="menuStore.navigateToItem(item)"
-            >
               0{{ index + 1 }} <br>
               {{ item.front_menu_lang[0].name }}
             </li>
           </ul>
           <ClientOnly v-if="!colorMode?.forced">
-            <img
+            <img class="cursor-pointer" :src="isDark ? '/logo-dark.svg' : '/logo.svg'" alt="logo"
-              class="cursor-pointer"
+                 @click="menuStore.navigateToItem()">
-              :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"
+                <i v-if="!userStore.isLogged" class="uil uil-user text-[31px] cursor-pointer"
-                   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
+            <button :class="[
-              :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">
-              @click="menuStore.navigateToShop"
-            >
               {{ $t("eshop") }}
             </button>
           </div>
@@ -64,35 +49,22 @@
     </div>
 
     <!-- md -->
-    <div
+    <div class="hidden w-full md:flex md:flex-col xl:hidden items-center justify-center">
-      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
+            <img class="cursor-pointer" :src="isDark ? '/logo-dark.svg' : '/logo.svg'" alt="logo"
-              class="cursor-pointer"
+                 @click="menuStore.navigateToItem()">
-              :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
+                <i v-if="!userStore.isLogged" class="uil uil-user text-[31px] cursor-pointer" @click="
-                  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">
-                <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
+            <i variant="subtle" block class="uil uil-apps text-[33px] cursor-pointer" @click="open = !open" />
-              variant="subtle"
-              block
-              class="uil uil-apps text-[33px] cursor-pointer"
-              @click="open = !open"
-            />
           </div>
         </UiContainer>
       </div>
-      <UCollapsible
+      <UCollapsible v-model:open="open" :ui="{ content: 'w-full' }" class="w-full">
-        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
+              <div v-for="(item, index) in menuStore.menu" :key="index" :class="[
-                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="
-                @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
+                <svg width="20" height="20" viewBox="0 0 26 26" fill="none" xmlns="http://www.w3.org/2000/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
+    <div class="hidden w-full items-center justify-between sm:flex sm:flex-col md:hidden">
-      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
+            <img class="cursor-pointer" :src="isDark ? '/logo-dark.svg' : '/logo.svg'" alt="logo"
-              class="cursor-pointer"
+                 @click="menuStore.navigateToItem()">
-              :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
+                <i v-if="!userStore.isLogged" class="uil uil-user text-[31px] cursor-pointer" @click="
-                  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">
-                <div
-                  v-else
-                  class="py-[6px] px-3 border border-block rounded-sm"
-                >
                   {{ userStore.user }}
                 </div>
               </div>
               <CartPopup />
             </div>
-            <i
+            <i variant="subtle" block class="uil uil-apps text-[30px] cursor-pointer" @click="open = !open" />
-              variant="subtle"
-              block
-              class="uil uil-apps text-[30px] cursor-pointer"
-              @click="open = !open"
-            />
           </div>
         </UiContainer>
       </div>
-      <UCollapsible
+      <UCollapsible v-model:open="open" :ui="{ content: 'w-full' }" class="w-full">
-        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
+              <div v-for="(item, index) in menuStore.menu" :key="index" :class="[
-                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="
-                @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
+                <svg width="20" height="20" viewBox="0 0 26 26" fill="none" xmlns="http://www.w3.org/2000/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
+            <img class="cursor-pointer" :src="isDark ? '/logo-dark.svg' : '/logo.svg'" alt="logo"
-              class="cursor-pointer"
+                 @click="menuStore.navigateToItem()">
-              :src="isDark ? '/logo-dark.svg' : '/logo.svg'"
-              alt="logo"
-              @click="menuStore.navigateToItem()"
-            >
           </ClientOnly>
           <div class="flex items-center gap-6">
             <div>
-              <i
+              <i class="uil uil-user text-[30px] cursor-pointer" @click="
-                class="uil uil-user text-[30px] cursor-pointer"
-                @click="
                 !userStore.isLogged
                   && menuStore.navigateToItem(
                     menuStore.menuItems?.find((item) => item.id === 11),
                   )
-                "
+              " />
-              />
             </div>
             <CartPopup />
-            <i
+            <i variant="subtle" block class="uil uil-apps text-[30px] cursor-pointer" @click="open = !open" />
-              variant="subtle"
-              block
-              class="uil uil-apps text-[30px] cursor-pointer"
-              @click="open = !open"
-            />
           </div>
         </UiContainer>
       </div>
-      <UCollapsible
+      <UCollapsible v-model:open="open" :ui="{ content: 'w-full' }" class="w-full">
-        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
+              <div v-for="(item, index) in menuStore.menu" :key="index" :class="[
-                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="
-                @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
+                <svg width="20" height="20" viewBox="0 0 26 26" fill="none" xmlns="http://www.w3.org/2000/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">

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"
+        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>
+          <div v-for="(item, key) in contact" :key="key">
-          <div
+            <h3 v-if="key == 'header'" class="h4-uppercase-bold-inter">
-            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"
-            >
               {{ item }}
             </h3>
-            <div v-else
+            <div v-else class="transition-all text-inter">
-                 class="transition-all text-inter"
-            >
               {{ item }}
             </div>
           </div>
-          <div class="text-red-500">
+          <a href="/lei_certificate_aurrie.pdf" target="_blank" rel="noopener noreferrer">{{ $t("Footer.Lei") }}</a>
-            arina - doadj tu icone i style
-          </div>
-          <a
-            href="/lei_certificate_aurrie.pdf"
-            target="_blank"
-            rel="noopener noreferrer"
-          >{{ $t("Footer.Lei") }}</a>
         </div>
 
-        <div
+        <div v-for="(section, index) in docs" :key="index" class="flex flex-col gap-[25px] sm:gap-8 max-w-[280px]">
-          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"
+          <div v-for="(item, key) in section.data" :key="key">
-               :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
-              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
+        <img class="cursor-pointer w-[70%] sm:w-[50%] xl:w-[30%]"
-          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()">
-          :src="isDark ? '/logo-footer-dark.svg' : '/logo-footer.svg'"
-          alt="logo"
-          @click="menuStore.navigateToItem()"
-        >
       </ClientOnly>
     </UiContainer>
   </div>

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>

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"
             >

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>

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,89 +8,55 @@
           </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]">
+            <CheckoutInput :id="1" v-model="user.data.name" :validation="nameValidation"
-              <p class="pl-6">
+                           :validation-text="$t('enter_correct_data')" :placeholder="$t('first_name')">
               {{ $t("first_name") }}
-              </p>
+            </CheckoutInput>
-              <input
+            <CheckoutInput :id="1" v-model="user.data.surname" :validation="surnameValidation"
-                :placeholder="$t('first_name')"
+                           :validation-text="$t('enter_correct_data')" :placeholder="$t('last_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>
+            </CheckoutInput>
-              <input
+            <CheckoutInput :id="1" v-model="user.data.email" :validation="emailValidation"
-                :placeholder="$t('last_name')"
+                           :validation-text="$t('enter_correct_data')" :placeholder="$t('email')">
-                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>
+            </CheckoutInput>
-              <input
+            <div ref="dropdownRef" class="space-y-[15px]">
-                :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]"
-            >
               <p class="pl-6">
                 {{ $t("phone") }}
               </p>
-              <div class="flex items-center border-2 border-block rounded-lg">
+              <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"
+                    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="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"
+                        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']">
-                      <span
+                          <i class="uil uil-angle-down text-2xl font-light cursor-pointer" /></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 v-if="dropCountry"
-                    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">
-                    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
+                        <p v-for="item in menuStore.countries" :key="item.iso_code"
-                        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"
+                           :title="item.name" @click="
-                        @click="
                              () => {
                                menuStore.selectedPhoneCountry = item;
                                dropCountry = false;
                              }
-                        "
+                           ">
-                      >
                           {{ item.name }}
                         </p>
                       </div>
@@ -107,27 +65,21 @@
                   <p class="text-sm sm:text-xl font-normal">
                     {{ menuStore.selectedPhoneCountry.call_prefix }}
                   </p>
-                <input
+                  <input id="phone" v-model="user.data.phone" :placeholder="$t('phone')" type="text"
-                  id="phone"
+                         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">
-                  :placeholder="$t('phone')"
+                </div>
-                  type="text"
+                <p v-if="!phoneValidation && phoneValidation != null" class="mt-2 text-xs text-red-600">
-                  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"
+                  {{ $t('enter_correct_data') }}
-                >
+                </p>
               </div>
             </div>
             <div class="space-y-[15px]">
               <p class="pl-6">
                 {{ $t("account_type") }}
               </p>
-              <USelect
+              <USelect v-model="selectedType" :items="component.front_section_lang
-                v-model="selectedType"
-                :items="
-                  component.front_section_lang
                 && component.front_section_lang[0].data.account_types
-                "
+              " value-key="name" :searchable="false" :ui="{
-                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',
@@ -137,12 +89,10 @@
                   '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
+                      <i class="uil uil-angle-down text-2xl font-light cursor-pointer" /></span>
-                        class="uil uil-angle-down text-2xl font-light cursor-pointer"
-                      /></span>
                   </div>
                 </template>
 
                 <template #item="{ item }">
-                  <div
+                  <div class="flex items-center gap-2 cursor-pointer min-w-full">
-                    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
+              <input :placeholder="$t('placeholder_password')" type="text"
-                :placeholder="$t('placeholder_password')"
+                     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">
-                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
+      <div class="py-[25px] sm:py-12 border-b border-gray flex justify-center w-full">
-        class="py-[25px] sm:py-12 border-b border-gray flex justify-center w-full"
+        <UiButtonArrow type="fill" :arrow="true" @click="sendForm()">
-      >
-        <UiButtonArrow type="fill"
-                       :arrow="true"
-        >
           {{
             $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
 })

components/ui/CheckoutInput.vue

@@ -1,53 +1,32 @@
 <template>
   <div class="space-y-[15px]">
-    <p :for="`base-input-${id}`"
+    <p :for="`base-input-${id}`" class="pl-6">
-       class="pl-6"
-    >
       <slot />
     </p>
     <div class="flex flex-col">
       <div class="flex relative">
-        <input
+        <input :id="`base-input-${id}`" :value="modelValue" :type="!isPasswordVisible ? type : 'text'"
-          :id="`base-input-${id}`"
+               :placeholder="placeholder" :disabled="disabled"
-          :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')">
-          @focus="$emit('focus')"
+        <i v-if="disabled" class="uil uil-lock-alt text-[22px] absolute right-6 top-1/2 -translate-y-1/2 text-gray" />
-          @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
+        <div v-if="type === 'password'" class="order-2 ml-1.5 cursor-pointer" :title="!isPasswordVisible ? $t('show_password') : $t('hide_password')
-          v-if="type === 'password'"
+        " @click="isPasswordVisible = !isPasswordVisible">
-          class="order-2 ml-1.5 cursor-pointer"
+          <FaceObserver class="ml-4 text-xl leading-6" :is-password-visible="isPasswordVisible" />
-          :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">
+      <p v-if="!validation && validation != null" class="mt-2 text-xs text-red-600">
         {{ validationText }}
-            </p> -->
+      </p>
     </div>
   </div>
 </template>

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,
   }
 })