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,9 +12,19 @@ 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  
+                    className='object-cover w-full max-h-full md:max-h-1/2 lg:max-h-full lg:w-1/2'
+                    objectFit=''
+                    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>
@@ -21,7 +32,7 @@ function StepEnterNumber({ onSubmit, onChange, value }: Props) {
                         <InputField
                             inputMode='tel'
                             autoComplete='tel'
-                    className='mt-10'
+                            className='mt-10 w-full'
                             htmlFor={AUTH_PAGE_ELEMENT.INPUT_PHONE}
                             labelText='شماره همراه'
                             value={value}
@@ -30,6 +41,9 @@ function StepEnterNumber({ onSubmit, onChange, value }: Props) {
                             type='tel' />
                     </div>
                     <Button type='submit'>بعدی</Button>
+                </div>
+
+            </div>
         </form>
     )
 }