responsive page about-us & contact-us & item clinic

2024-08-21 21:45:45 +03:30
parent dfd7360be5
commit c62fb78f8c
14 changed files with 98 additions and 54 deletions
@@ -2,6 +2,7 @@ import { Button } from "@mui/material"
 import ArrowRightS from "../icons/ArrowRightS"
 import OTPForm from "./element/OTPForm"
 import ArrowLeftOrangeS from "../icons/ArrowLeftOrangeS"
+import Link from "next/link"

 function SetCodePage({ setIsSendMsg }) {

@@ -11,18 +12,19 @@ function SetCodePage({ setIsSendMsg }) {
    }

    return (
-        <div className='rounded-[16px] mt-[32px] border border-solid border-[#EFEFEF] bg-[#FFF] p-[40px] pb-[48px] min-w-[425px]'>
+        <div className='rounded-[16px] mt-[51px] sm:mt-[45px] md:mt-[39px] lg:mt-[32px] border border-solid sm:border-[#EFEFEF] bg-transparent sm:bg-[#FFF] 
+        p-0 border-transparent sm:p-[40px] sm:pb-[48px] w-full sm:w-fit sm:min-w-[425px]'>
            <div
                className="cursor-pointer"
                onClick={() => setIsSendMsg(false)}
            >
                <ArrowRightS />
            </div>
-            <p className='text-[#525252] mt-4 text-[18px] font-bold'>کد تایید را وارد نمایید</p>
-            <p className='text-[#616161] mt-[24px] text-[14px] font-normal text-right'>
+            <p className='text-[#525252] mt-[10px] sm:mt-[12px] md:mt-[14px] lg:mt-[16px] text-[18px] font-bold'>کد تایید را وارد نمایید</p>
+            <p className='text-[#616161] mt-[16px] sm:mt-[19px] md:mt-[22px] lg:mt-[24px] text-[14px] font-normal text-right'>
                کد تایید برای شماره 09013261200 ارسال شد.
            </p>
-            <div className='mt-[32px] mb-[48px]'>
+            <div className='mt-[26px] sm:mt-[28px] md:mt-[30px] lg:mt-[32px] mb-[56px] sm:mb-[47px] md:mb-[38px] lg:mb-[30px]'>
                <div className="w-full mb-[27px] flex items-center justify-center gap-2 sm:gap-6" dir='ltr'>
                    <OTPForm handleOTP={handleOTP} />
                    <OTPForm handleOTP={handleOTP} />
@@ -35,12 +37,14 @@ function SetCodePage({ setIsSendMsg }) {
                    <ArrowLeftOrangeS />
                </Button>
            </div>
-            <Button
-                fullWidth
-                variant='contained'
-                onClick={() => setIsSendMsg(true)}
-                className='!rounded-[8px] !bg-[#5559CE]'
-            >تایید</Button>
+            <Link href='/'>
+                <Button
+                    fullWidth
+                    variant='contained'
+                    onClick={() => setIsSendMsg(true)}
+                    className='!rounded-[8px] !bg-[#5559CE]'
+                >تایید</Button>
+            </Link>
        </div>
    )
 }
@@ -1,25 +1,31 @@
 import Field from '@/app/component/element/Field'
 import { Button } from '@mui/material'
+import Link from 'next/link'
 import React from 'react'

 function SignInPage({ setIsSendMsg }) {
    return (
-        <div className='rounded-[16px] mt-[32px] border border-solid border-[#EFEFEF] bg-[#FFF] p-[40px] pb-[48px] min-w-[425px]'>
+        <div className='rounded-[16px] mt-[64px] sm:mt-[53px] md:mt-[43px] lg:mt-[32px] border border-solid sm:border-[#EFEFEF] bg-transparent sm:bg-[#FFF] 
+        p-0 border-transparent sm:p-[40px] sm:pb-[48px] w-full sm:w-fit sm:min-w-[425px]'>
            <p className='text-[#525252] text-[18px] font-bold'>ورود یا ثبت نام در نوبت 724</p>
-            <p className='text-[#616161] text-[14px] mt-[48px] font-normal'>شماره همراه خود را وارد نمایید.</p>
-            <div className='mt-[24px] mb-[32px]'>
+            <p className='text-[#616161] text-[14px] mt-[40px] sm:mt-[43px] md:mt-[46px] lg:mt-[48px] font-normal'>شماره همراه خود را وارد نمایید.</p>
+            <div className='mt-[16px] sm:mt-[19px] md:mt-[22px] lg:mt-[24px] mb-[40px] sm:mb-[37px] md:mb-[36px] lg:mb-[32px]'>
                <Field
                    type='number'
                    title='شماره همراه'
                />
            </div>
-            <Button
-                fullWidth
-                variant='contained'
-                onClick={() => setIsSendMsg(true)}
-                className='!rounded-[8px] !bg-[#5559CE]'
-            >ورود</Button>
-            <p className='text-[#525252] text-[14px] font-normal text-center mt-[76px]'><span className='text-[#F17732] underline'>قوانین استفاده</span> از نوبت 724 را می پذیرم.</p>
+            <Link href='/signin'>
+                <Button
+                    fullWidth
+                    variant='contained'
+                    onClick={() => setIsSendMsg(true)}
+                    className='!rounded-[8px] !bg-[#5559CE]'
+                >ورود</Button>
+            </Link>
+            <p className='text-[#525252] text-[14px] font-normal text-center mt-[49px] sm:mt-[58px] md:mt-[67px] lg:mt-[76px]'>
+                <span className='text-[#F17732] underline'>قوانین استفاده</span> از نوبت 724 را می پذیرم.
+            </p>
        </div>
    )
 }
@@ -18,9 +18,10 @@ function OTPForm({ handleOTP }) {
                    e.target.value = ''
                }
            }}
-            className={`w-12 h-12 border border-solid border-[#ADB5BD] rounded-[6px] text-center transition-all duration-500 ease-out
+            className={`border border-solid border-[#ADB5BD] rounded-[6px] text-center transition-all duration-500 ease-out
            outline-none focus:!border-[1px] focus:!border-solid focus:!border-[#5559CE]
-            focus:!outline-[1px] focus:!outline-solid focus:!outline-[#5559CE] 
+            focus:!outline-[1px] focus:!outline-solid focus:!outline-[#5559CE]
+            w-[43px] h-[43px] sm:w-[45px] sm:h-[45px] md:w-[47px] md:h-[47px] lg:w-[48px] lg:h-[48px] 
            ${code && '!border-[1px] !border-solid !border-[#5559CE]'}
            `}
        />
@@ -4,8 +4,11 @@ const about = ['سوالات متداول', 'تماس با ما', 'درباره

 function RegisterPage({ children }) {
    return (
-        <div className="flex padding-responsive items-center justify-center flex-col !bg-contain !bg-no-repeat !bg-top place-items-center h-screen w-full">
-            <div className="flex items-center justify-center gap-[5px]">
+        <div
+            className="flex padding-responsive items-center justify-start sm:justify-center flex-col !bg-contain !bg-no-repeat 
+        !bg-top place-items-center h-screen w-full"
+        >
+            <div className="flex items-center justify-center gap-[5px] mt-[32px] sm:mt-0">
                <Image
                    src='/assets/images/logo.png'
                    width={40}
@@ -15,11 +18,11 @@ function RegisterPage({ children }) {
                <p className="text-[#5559CE] text-[20px] font-bold">نوبت ۷۲۴</p>
            </div>
            {children}
-            <div className="w-full mt-[127px]">
+            <div className="fixed sm:relative bottom-0 left-0 bg-[#FAFAFA] w-full mt-[127px] pb-[50px]">
                <div className="bg-border-t-gradient-sign h-px w-full"></div>
-                <div className="flex items-center justify-center gap-[56px] mt-[36px]">
+                <div className="flex items-center justify-center gap-[32px] sm:gap-[40px] md:gap-[48px] lg:gap-[56px] mt-[36px]">
                    {about.map((item, idx) => (
-                        <p className="text-[#494CB3] text-[16px] font-normal" key={idx}>{item}</p>
+                        <p className="text-[#494CB3] text-[14px] md:text-[16px] font-normal" key={idx}>{item}</p>
                    ))}
                </div>
            </div>