Make signin page responsive

frontend/components/global/OtpInput.vue

@@ -131,7 +131,7 @@ watch(() => status.value, (value) => {
                 :key="id"
                 :index="index"
                 :autofocus="autofocus ? index === 0 ? true : 'off' : 'off'"
-                class="disabled:text-slate-400 focus-within:border-black transition-all size-16 bg-slate-50 typo-label-lg rounded-lg text-center border-[1.5px] border-slate-200 outline-none"
+                class="disabled:text-slate-400 focus-within:border-black transition-all size-12 sm:size-16 bg-slate-50 typo-label-lg rounded-md sm:rounded-lg text-center border-[1.5px] border-slate-200 outline-none"
             />
         </PinInputRoot>
     </div>

frontend/pages/signin.vue

@@ -159,24 +159,20 @@ const resetForm = () => {
             }"
         />
         <div
-            class="flex items-center justify-center flex-col size-full -translate-y-1/6"
+            class="flex items-center justify-center flex-col size-full translate-y-[-100px]"
         >
-            <video
-                class="aspect-square w-[450px] translate-y-[157px] animate-fade-in"
-                src="/video/heymlz/heymlz-handshake-full.webm"
+            <img
+                class="aspect-square w-[250px] sm:w-[325px] translate-y-[90px] sm:translate-y-[120px] animate-fade-in"
+                src="/img/heymlz/heymlz-signin.gif"
                 :style="{
                     filter: 'drop-shadow(0px 4px 20px rgba(0, 0, 0, 0.15))',
                 }"
-                autoplay
-                playsinline
-                webkit-playsinline
-                muted
             />
 
             <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-3xl"
+                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"
             >
-                <h1 class="typo-h-5 mt-8">شماره خود را وارد کنید</h1>
+                <h1 class="typo-h-6 sm:typo-h-5 mt-8">شماره خود را وارد کنید</h1>
 
                 <form @submit.prevent class="max-w-[500px] w-full mt-12">
                     <Input
@@ -219,7 +215,7 @@ const resetForm = () => {
                     <Button
                         data-testid="send-otp-code-button"
                         v-if="!showOtp"
-                        class="rounded-full w-full mt-4"
+                        class="rounded-full w-full mt-4 max-sm:h-[45px]"
                         type="submit"
                         @click="handleLogin"
                         :loading="sendOtpIsPending"
@@ -230,7 +226,7 @@ const resetForm = () => {
 
                     <div v-else class="flex items-center w-full gap-4 mt-4">
                         <Button
-                            class="rounded-full w-full mt-4"
+                            class="rounded-full w-full mt-4 max-sm:h-[45px]"
                             type="button"
                             variant="secondary"
                             @click="resetForm"
@@ -239,7 +235,7 @@ const resetForm = () => {
                             تغییر شماره
                         </Button>
                         <Button
-                            class="rounded-full w-full mt-4"
+                            class="rounded-full w-full mt-4 max-sm:h-[45px]"
                             type="submit"
                             @click="resendOtp"
                             :loading="signInIsPending || sendOtpIsPending"