Updated

frontend/pages/signin.vue

@@ -21,13 +21,12 @@ type LoginInfo = {
 // meta
 
 definePageMeta({
+    layout: "none",
     middleware: ["check-is-not-logged-in"]
 });
 
 // state
 
-const { $gsap: gsap } = useNuxtApp();
-
 const { addToast } = useToast();
 
 const { updateToken, updateRefreshToken } = useAuth();
@@ -150,21 +149,6 @@ const resetForm = () => {
     showOtp.value = false;
 };
 
-// const onMouseMove = (e: MouseEvent) => {
-//     const heylmzEyesElement = document.querySelector("#heylmz-eyes") as HTMLDivElement;
-//     const boundry = heylmzEyesElement.getBoundingClientRect();
-//
-//     console.log(e.clientX, heylmzEyesElement.clientWidth, boundry.left, e.clientX - heylmzEyesElement.clientWidth);
-//
-//     const moveX = e.clientX - heylmzEyesElement.clientWidth + 60;
-//     const moveY = e.clientY - heylmzEyesElement.clientHeight - 155;
-//
-//     gsap.to("#heylmz-eyes", {
-//         x: moveX,
-//         y: moveY
-//     });
-// };
-
 </script>
 
 <template>
@@ -179,8 +163,7 @@ const resetForm = () => {
         <div class="flex items-center justify-center flex-col size-full">
 
             <img
-                id="heylmz-eyes"
-                class="aspect-square w-[300px] translate-y-[100px]"
+                class="aspect-square w-[300px] translate-y-[100px] animate-fade-in"
                 src="/img/heymlz-seat.gif"
                 alt=""
             />
@@ -188,30 +171,28 @@ const resetForm = () => {
             <div
                 class="max-w-[600px] w-full p-6 h-[400px] flex flex-col items-center bg-white  border shadow-black/10 justify-center border-slate-300 rounded-xl"
             >
-                <h1 class="typo-hero-2 mt-8">فرم ورود</h1>
+                <h1 class="typo-h-5 mt-8">شماره خود را وارد کنید</h1>
 
                 <form @submit.prevent class="max-w-[500px] w-full mt-12">
-                    <div v-if="!showOtp" class="flex items-center gap-2 w-full">
-                        <Input
-                            data-testid="phone-input"
-                            class="w-full"
-                            v-model="loginInfo.phone"
-                            placeholder="9380123456"
-                            dir="ltr"
-                            :error="formValidator$.phone.$error"
-                        >
-                            <template #startItem>
-                                <span class="text-slate-500"> +98 </span>
-                            </template>
-                        </Input>
-                        <div class="flex items-center gap-1">
-                            <Icon
-                                class="translate-y-[-1px]"
-                                name="twemoji:flag-iran"
-                                size="24"
-                            />
-                        </div>
-                    </div>
+                    <Input
+                        v-if="!showOtp"
+                        class="w-full tracking-[2px]"
+                        v-model="loginInfo.phone"
+                        placeholder="9380123456"
+                        dir="ltr"
+                        :error="formValidator$.phone.$error"
+                    >
+                        <template #startItem>
+                            <div class="flex items-center gap-3">
+                                <Icon
+                                    class="translate-y-[-1px] static-icon"
+                                    name="twemoji:flag-iran"
+                                    size="24"
+                                />
+                                <span class="text-slate-500 typo-label-sm"> +98 </span>
+                            </div>
+                        </template>
+                    </Input>
 
                     <OtpInput
                         v-else