Add english keyboard tip box

frontend/pages/signin.vue

@@ -166,7 +166,7 @@ const resetForm = () => {
             />
 
             <div
-                class="max-w-[600px] w-full p-6 h-[350px] sm:h-[400px] flex flex-col items-center bg-white border shadow-black/10 justify-center border-slate-300 rounded-3xl"
+                class="max-w-[600px] w-full p-6 h-[350px] sm:h-[430px] flex flex-col items-center bg-white border shadow-black/10 justify-center border-slate-300 rounded-3xl"
             >
                 <h1 class="typo-h-6 sm:typo-h-5 mt-12">
                     {{ showOtp ? "کد ارسالی را وارد کنید" : "شماره خود را وارد کنید" }}
@@ -205,10 +205,20 @@ const resetForm = () => {
                         @complete="handleLogin"
                     />
 
+                    <div
+                        class="flex justify-center gap-2 px-4 text-slate-500/80 rounded-lg mt-4"
+                    >
+                        <span class="text-xs lg:text-sm"> لطفا حروف را با کیبورد انگلیسی وارد کنید </span>
+                        <Icon
+                            name="ci:bi-info-circle"
+                            class="lg:text-xl"
+                        />
+                    </div>
+
                     <Button
                         data-testid="send-otp-code-button"
                         v-if="!showOtp"
-                        class="rounded-full w-full mt-4 max-sm:h-[45px]"
+                        class="rounded-full w-full mt-6 sm:mt-10 max-sm:h-[45px]"
                         type="submit"
                         @click="handleLogin"
                         :loading="sendOtpIsPending"
@@ -219,7 +229,7 @@ const resetForm = () => {
 
                     <div
                         v-else
-                        class="flex items-center w-full gap-4 mt-4"
+                        class="flex items-center w-full gap-4 mt-2 sm:mt-4"
                     >
                         <Button
                             class="rounded-full w-full mt-4 max-sm:h-[45px]"
@@ -241,7 +251,6 @@ const resetForm = () => {
                             {{ isResendOtpBlocked ? otpBlockerTimePassed : "" }}
                         </Button>
                     </div>
-
                     <NuxtLink
                         to="/"
                         class="flex items-center gap-2 justify-center mt-6"