From 1fcaa1323a4e38fc41d865c97a11fa32e90aae1d Mon Sep 17 00:00:00 2001
From: Mahyar Khanbolooki <mahyarkhn@proton.me>
Date: Wed, 2 Jul 2025 19:15:40 +0330
Subject: [PATCH] chore: auth number screen responsive styles

---
 .../auth/components/StepEnterNumber.tsx       | 48 ++++++++++++-------
 1 file changed, 31 insertions(+), 17 deletions(-)

diff --git a/src/features/auth/components/StepEnterNumber.tsx b/src/features/auth/components/StepEnterNumber.tsx
index 3d562f4..80fee24 100644
--- a/src/features/auth/components/StepEnterNumber.tsx
+++ b/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'>
-            <div className='block'>
-                <img src='/assets/images/login-banner.png' />
-                <div className='pt-4' dir='rtl'>
-                    <h6 className='text-lg font-bold'>ورود به سیستم</h6>
-                    <p className='mt-3 text-[13px]'>برای ورود شماره همراه خود را وارد نمایید.</p>
+        <form onSubmit={onSubmit} className='p-6 h-full'>
+            <div className='h-full flex flex-col lg:flex-row justify-between'>
+                <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>
+                        </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>
     )
 }