chore: auth number screen responsive styles

src/features/auth/components/StepEnterNumber.tsx

@@ -1,6 +1,7 @@
 import Button from '@/components/button/PrimaryButton';
 import InputField from '@/components/input/InputField';
 import { AUTH_PAGE_ELEMENT } from '@/enums';
+import Image from 'next/image';
 import React from 'react'
 
 type Props = {
@@ -11,25 +12,38 @@ type Props = {
 
 function StepEnterNumber({ onSubmit, onChange, value }: Props) {
     return (
-        <form onSubmit={onSubmit} className='p-6 h-full flex flex-col justify-between'>
+        <form onSubmit={onSubmit} className='p-6 h-full'>
-            <div className='block'>
+            <div className='h-full flex flex-col lg:flex-row justify-between'>
-                <img src='/assets/images/login-banner.png' />
+                <Image  
-                <div className='pt-4' dir='rtl'>
+                    className='object-cover w-full max-h-full md:max-h-1/2 lg:max-h-full lg:w-1/2'
-                    <h6 className='text-lg font-bold'>ورود به سیستم</h6>
+                    objectFit=''
-                    <p className='mt-3 text-[13px]'>برای ورود شماره همراه خود را وارد نمایید.</p>
+                    src={'/assets/images/login-banner.png'} 
+                    alt='login banner'
+                    width={100}
+                    height={100}
+                    unoptimized={true}
+                    />
+                <div className='w-full lg:max-w-1/2 h-full lg:px-9 lg:py-7 flex flex-col justify-between lg:justify-center lg:gap-10'>
+                    <div className='w-full'>
+                        <div className='pt-4' dir='rtl'>
+                            <h6 className='text-lg font-bold'>ورود به سیستم</h6>
+                            <p className='mt-3 text-[13px]'>برای ورود شماره همراه خود را وارد نمایید.</p>
+                        </div>
+                        <InputField
+                            inputMode='tel'
+                            autoComplete='tel'
+                            className='mt-10 w-full'
+                            htmlFor={AUTH_PAGE_ELEMENT.INPUT_PHONE}
+                            labelText='شماره همراه'
+                            value={value}
+                            placeholder='09120000000'
+                            onChange={onChange}
+                            type='tel' />
+                    </div>
+                    <Button type='submit'>بعدی</Button>
                 </div>
-                <InputField
+
-                    inputMode='tel'
-                    autoComplete='tel'
-                    className='mt-10'
-                    htmlFor={AUTH_PAGE_ELEMENT.INPUT_PHONE}
-                    labelText='شماره همراه'
-                    value={value}
-                    placeholder='09120000000'
-                    onChange={onChange}
-                    type='tel' />
             </div>
-            <Button type='submit'>بعدی</Button>
         </form>
     )
 }