hamed/nobat724_front
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
Ehsan
2024-08-21 21:45:45 +03:30
parent dfd7360be5
commit c62fb78f8c
14 changed files with 98 additions and 54 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/globals.css
+9
View File
@@ -167,6 +167,10 @@ html {
background: url(../public/assets/images/banner-footer.png); background: url(../public/assets/images/banner-footer.png);
} }
.bg-banner-about {
background: url(../public/assets/images/banner-about.png);
}
.bg-banner-home::after { .bg-banner-home::after {
content: ""; content: "";
position: absolute; position: absolute;
@@ -271,6 +275,11 @@ html {
} }
} }
.padding-responsive {
padding-left: 16px;
padding-right: 16px;
}
@media (min-width: 640px) { @media (min-width: 640px) {
.padding-responsive { .padding-responsive {
padding-left: 52px; padding-left: 52px;
components/aboutUs/Head.js
+2 -2
View File
@@ -3,14 +3,14 @@ import React from 'react'
function Head() { function Head() {
return ( return (
<div className='bg-[#5559C2] rounded-lg w-full py-[24px] flex flex-col items-center justify-center gap-[16px]'> <div className='bg-[#5559C2] rounded-none md:rounded-lg w-full py-[24px] flex flex-col items-center justify-center gap-[13px] md:gap-[16px]'>
<Image <Image
src='/assets/images/logo-2.png' src='/assets/images/logo-2.png'
height={46} height={46}
width={46} width={46}
alt='logo' alt='logo'
/> />
<p className="text-[#FAFAFA] text-[24px] font-bold">درباره نوبت ۷۲۴</p> <p className="text-[#FAFAFA] text-[16px] sm:text-[18px] md:text-[22px] lg:text-[24px] font-bold">درباره نوبت ۷۲۴</p>
</div> </div>
) )
} }
components/aboutUs/Services.js
+9 -12
View File
@@ -3,30 +3,27 @@ import UnderlineLG from '../icons/UnderlineLG';
import TickOrangeA from '../icons/TickOrangeA'; import TickOrangeA from '../icons/TickOrangeA';
const ourServices = [ const ourServices = [
'برگزاری دوره های آنلاین', 'جستجوی سریع پزشک ',
'معرفی بهترین باشگاه های گردشگری', 'جستجوی کلینیک و مراکز درمانی',
'معرفی بهترین باشگاه های گردشگری', 'نوبت گیری راحت و آسان',
'ارتباط با راهنمایان گردشگری', 'دشبورد تخصصی بیمار',
'معرفی جاذبه های گردشگری', 'دشبورد تخصصی پزشک',
'ارتباط با راهنمایان گردشگری', 'نوبت گیری راحت و آسان'
'برگزاری تور ها و برنامه های متنوع',
'معرفی بومگردی های سراسر کشور',
'برگزاری تور ها و برنامه های متنوع'
] ]
function Services() { function Services() {
return ( return (
<div className='mt-[40px] px-[12%]'> <div className='mt-[16px] sm:mt-[24px] md:mt-[32px] lg:mt-[40px] px-[12%]'>
<div className='flex justify-center'> <div className='flex justify-center'>
<AnimationTextHead name='zoom-in-up' text='خدمات ما'> <AnimationTextHead name='zoom-in-up' text='خدمات ما'>
<UnderlineLG /> <UnderlineLG />
</AnimationTextHead> </AnimationTextHead>
</div> </div>
<ul className='mt-[40px] grid grid-cols-3 gap-x-[72px] gap-y-[56px]'> <ul className='mt-[20px] sm:mt-[26px] md:mt-[33px] lg:mt-[40px] flex flex-wrap gap-x-[72px] gap-y-[20px] sm:gap-y-[32px] md:gap-y-[44px] lg:gap-y-[56px]'>
{ourServices.map((item, idx) => ( {ourServices.map((item, idx) => (
<li <li
key={idx} key={idx}
className='flex items-center justify-start gap-[8px]' className='flex items-start justify-start gap-[8px]'
> >
<TickOrangeA /> <TickOrangeA />
<p className='text-[#525252] text-[16px] font-medium'>{item}</p> <p className='text-[#525252] text-[16px] font-medium'>{item}</p>
components/aboutUs/index.js
+11 -2
View File
@@ -3,9 +3,18 @@ import Services from "./Services";
function AboutUsPage() { function AboutUsPage() {
return ( return (
<div className="pt-[120px] mt-[56px] padding-responsive"> <div
className="pt-[120px] mt-[56px]
px-0 md:px-[80px] lg:px-[108px]
"
>
<Head /> <Head />
<p className="text-[#525252] text-[16px] font-normal text-center px-[15%] mt-[32px] leading-10">لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ، و با استفاده از طراحان گرافیک است، چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است، و برای شرایط فعلی تکنولوژی مورد نیاز، و کاربردهای متنوع با هدف بهبود ابزارهای کاربردی می باشد، کتابهای زیادی در شصت و سه درصد گذشته حال و آینده، شناخت فراوان جامعه و متخصصان را می طلبد، تا با نرم افزارها شناخت بیشتری را برای طراحان رایانه ای علی الخصوص طراحان خلاقی، و فرهنگ پیشرو در زبان فارسی ایجاد کرد، در این صورت می توان امید داشت که تمام و دشواری موجود در ارائه راهکارها، و شرایط سخت تایپ به پایان رسد و زمان مورد نیاز شامل حروفچینی دستاوردهای اصلی، و جوابگوی سوالات پیوسته اهل دنیای موجود طراحی اساسا مورد استفاده قرار گیرد.</p> <p
className="
text-[#525252] text-[16px] font-normal mt-[32px] leading-10
px-[16px] sm:px-[52px] md:px-[15%] text-justify md:text-center
"
>لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ، و با استفاده از طراحان گرافیک است، چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است، و برای شرایط فعلی تکنولوژی مورد نیاز، و کاربردهای متنوع با هدف بهبود ابزارهای کاربردی می باشد، کتابهای زیادی در شصت و سه درصد گذشته حال و آینده، شناخت فراوان جامعه و متخصصان را می طلبد، تا با نرم افزارها شناخت بیشتری را برای طراحان رایانه ای علی الخصوص طراحان خلاقی، و فرهنگ پیشرو در زبان فارسی ایجاد کرد، در این صورت می توان امید داشت که تمام و دشواری موجود در ارائه راهکارها، و شرایط سخت تایپ به پایان رسد و زمان مورد نیاز شامل حروفچینی دستاوردهای اصلی، و جوابگوی سوالات پیوسته اهل دنیای موجود طراحی اساسا مورد استفاده قرار گیرد.</p>
<Services /> <Services />
</div> </div>
) )
components/clinic/components/contact/modal/Content.js
+1 -1
View File
@@ -19,7 +19,7 @@ function Content({ handleClose }) {
</div> </div>
</div> </div>
<span className="bg-[#EFEFEF] block h-px w-full mt-[12px] mb-[22px]"></span> <span className="bg-[#EFEFEF] block h-px w-full mt-[12px] mb-[22px]"></span>
<ul className="flex items-center justify-center gap-[32px] md:gap-[36px] lg:gap-[40px] mx-[72px]"> <ul className="flex items-center justify-center gap-[32px] md:gap-[36px] lg:gap-[40px] mx-auto flex-wrap md:flex-nowrap md:mx-[72px]">
{maps.map((item, idx) => ( {maps.map((item, idx) => (
<li className="flex items-center flex-col justify-center gap-1"> <li className="flex items-center flex-col justify-center gap-1">
<Image <Image
components/clinic/components/contact/modal/index.js
+1 -1
View File
@@ -41,7 +41,7 @@ function ModalSearchCity({ open, setOpen, handleClose, children }) {
<div <div
className="!pt-[12px] !pb-[28px] !px-[24px] !bg-[#FAFAFA] !rounded-[8px] !overflow-hidden !shadow-[0px_1px_24.8px_0px_rgba(155,_155,_155,_0.27)]" className="!pt-[12px] !pb-[28px] !px-[24px] !bg-[#FAFAFA] !rounded-[8px] !overflow-hidden !shadow-[0px_1px_24.8px_0px_rgba(155,_155,_155,_0.27)]"
> >
<Content onClose={handleClose} /> <Content handleClose={handleClose} />
</div> </div>
</Drawer> </Drawer>
</> </>
components/contactUs/Call.js
+2 -2
View File
@@ -11,12 +11,12 @@ function Call() {
return ( return (
<div data-aos="flip-left" <div data-aos="flip-left"
className="lg:min-w-[calc(50%_+_70px)] bg-[#5559C2] lg:pl-[18%] h-fit pt-[16px] sm:pt-[29px] md:pt-[42px] lg:pt-[55px] className="lg:min-w-[calc(50%_+_70px)] bg-banner-about !bg-center !bg-no-repeat !bg-cover lg:pl-[18%] h-fit pt-[16px] sm:pt-[29px] md:pt-[42px] lg:pt-[55px]
bg-contact rounded-[8px] pb-[30px] sm:pb-[42px] md:pb-[55px] bg-contact rounded-[8px] pb-[30px] sm:pb-[42px] md:pb-[55px]
overflow-hidden lg:pb-[171px] px-[16px] sm:px-[27px] md:px-[39px] lg:px-[48px]"> overflow-hidden lg:pb-[171px] px-[16px] sm:px-[27px] md:px-[39px] lg:px-[48px]">
<p className="text-[#FAFAFA] text-[20px] font-bold">تماس با ما</p> <p className="text-[#FAFAFA] text-[20px] font-bold">تماس با ما</p>
<p <p
className="text-[#FAFAFA] leading-[26px] text-[16px] font-normal mt-6" className="text-[#FAFAFA] leading-[26px] text-[14px] md:text-[16px] font-normal mt-6"
>سامانه نوبت 724 به مردم کمک می کند تا دسترسی آسان تر و سریع تری به خدمات پزشکی و درمانی داشته باشند.</p> >سامانه نوبت 724 به مردم کمک می کند تا دسترسی آسان تر و سریع تری به خدمات پزشکی و درمانی داشته باشند.</p>
<ul className="flex flex-col mt-[68px] justify-start items-start gap-[32px]"> <ul className="flex flex-col mt-[68px] justify-start items-start gap-[32px]">
<ContentContact <ContentContact
components/contactUs/Connect.js
+12 -7
View File
@@ -1,12 +1,13 @@
import Field from "@/app/component/Field" import ArrowLeftC from "../icons/ArrowLeftC";
import { Button } from "@mui/material" import { Button } from "@mui/material";
import ArrowLeftC from "../icons/ArrowLeftC" import FieldLabel from "./FieldLabel";
import Field from "@/app/component/Field";
function Connect() { function Connect() {
return ( return (
<div <div
className="lg:min-w-[calc(50%_+_70px)] w-full lg:translate-x-[140px] bg-[#FFF] lg:p-[32px] className="lg:min-w-[calc(50%_+_70px)] w-full lg:translate-x-[140px] bg-[#FFF] lg:p-[32px]
shadow-[0px_0px_28.6px_0px_rgba(147,_147,_147,_0.25)] mt-8 p-[16px] sm:p-[21px] md:p-[27px]" shadow-[0px_0px_28.6px_0px_rgba(147,_147,_147,_0.25)] mt-[16px] lg:mt-0 p-[16px] sm:p-[21px] md:p-[27px]"
> >
<div data-aos="zoom-in"> <div data-aos="zoom-in">
<div className="flex flex-col justify-center items-center gap-[10px]"> <div className="flex flex-col justify-center items-center gap-[10px]">
@@ -14,9 +15,13 @@ function Connect() {
<p className="text-[#525252] text-[14px] font-normal">نظرات و پیشنهادات خود را با ما در میان بگذارید.</p> <p className="text-[#525252] text-[14px] font-normal">نظرات و پیشنهادات خود را با ما در میان بگذارید.</p>
</div> </div>
<div className="mt-[40px] flex flex-col gap-[20px]"> <div className="mt-[40px] flex flex-col gap-[20px]">
<div className="flex flex-col sm:flex-row items-center justify-center gap-4"> <div className="flex flex-col sm:flex-row items-center justify-center gap-[24px] sm:gap-[21px] md:gap-18px] lg:gap-[16px]">
<Field title='نام و نام خانوادگی' type='text' /> <FieldLabel title='نام و نام خانوادگی'>
<Field title='شماره موبایل' type='text' /> <Field title='احسان احمدی' type='text' />
</FieldLabel>
<FieldLabel title='شماره موبایل'>
<Field title='09121056987' type='text' />
</FieldLabel>
</div> </div>
<div> <div>
<Field title='پیام شما...' type='text' multiline={true} /> <Field title='پیام شما...' type='text' multiline={true} />
components/contactUs/FieldLabel.js
+10
View File
@@ -0,0 +1,10 @@
function FieldLabel({ children, title }) {
return (
<div className="flex flex-col items-start justify-start w-full gap-[12px] md:gap-[14px] lg:gap-[16px]">
<p className="text-[#525252] text-[14px] font-medium">{title}</p>
{children}
</div>
)
}
export default FieldLabel
components/register/SetCodePage.js
+14 -10
View File
@@ -2,6 +2,7 @@ import { Button } from "@mui/material"
import ArrowRightS from "../icons/ArrowRightS" import ArrowRightS from "../icons/ArrowRightS"
import OTPForm from "./element/OTPForm" import OTPForm from "./element/OTPForm"
import ArrowLeftOrangeS from "../icons/ArrowLeftOrangeS" import ArrowLeftOrangeS from "../icons/ArrowLeftOrangeS"
import Link from "next/link"
function SetCodePage({ setIsSendMsg }) { function SetCodePage({ setIsSendMsg }) {
@@ -11,18 +12,19 @@ function SetCodePage({ setIsSendMsg }) {
} }
return ( 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 <div
className="cursor-pointer" className="cursor-pointer"
onClick={() => setIsSendMsg(false)} onClick={() => setIsSendMsg(false)}
> >
<ArrowRightS /> <ArrowRightS />
</div> </div>
<p className='text-[#525252] mt-4 text-[18px] font-bold'>کد تایید را وارد نمایید</p> <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-[24px] text-[14px] font-normal text-right'> <p className='text-[#616161] mt-[16px] sm:mt-[19px] md:mt-[22px] lg:mt-[24px] text-[14px] font-normal text-right'>
کد تایید برای شماره 09013261200 ارسال شد. کد تایید برای شماره 09013261200 ارسال شد.
</p> </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'> <div className="w-full mb-[27px] flex items-center justify-center gap-2 sm:gap-6" dir='ltr'>
<OTPForm handleOTP={handleOTP} /> <OTPForm handleOTP={handleOTP} />
<OTPForm handleOTP={handleOTP} /> <OTPForm handleOTP={handleOTP} />
@@ -35,12 +37,14 @@ function SetCodePage({ setIsSendMsg }) {
<ArrowLeftOrangeS /> <ArrowLeftOrangeS />
</Button> </Button>
</div> </div>
<Button <Link href='/'>
fullWidth <Button
variant='contained' fullWidth
onClick={() => setIsSendMsg(true)} variant='contained'
className='!rounded-[8px] !bg-[#5559CE]' onClick={() => setIsSendMsg(true)}
>تایید</Button> className='!rounded-[8px] !bg-[#5559CE]'
>تایید</Button>
</Link>
</div> </div>
) )
} }
components/register/SignInPage.js
+16 -10
View File
@@ -1,25 +1,31 @@
import Field from '@/app/component/element/Field' import Field from '@/app/component/element/Field'
import { Button } from '@mui/material' import { Button } from '@mui/material'
import Link from 'next/link'
import React from 'react' import React from 'react'
function SignInPage({ setIsSendMsg }) { function SignInPage({ setIsSendMsg }) {
return ( 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-[#525252] text-[18px] font-bold'>ورود یا ثبت نام در نوبت 724</p>
<p className='text-[#616161] text-[14px] mt-[48px] font-normal'>شماره همراه خود را وارد نمایید.</p> <p className='text-[#616161] text-[14px] mt-[40px] sm:mt-[43px] md:mt-[46px] lg:mt-[48px] font-normal'>شماره همراه خود را وارد نمایید.</p>
<div className='mt-[24px] mb-[32px]'> <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 <Field
type='number' type='number'
title='شماره همراه' title='شماره همراه'
/> />
</div> </div>
<Button <Link href='/signin'>
fullWidth <Button
variant='contained' fullWidth
onClick={() => setIsSendMsg(true)} variant='contained'
className='!rounded-[8px] !bg-[#5559CE]' onClick={() => setIsSendMsg(true)}
>ورود</Button> className='!rounded-[8px] !bg-[#5559CE]'
<p className='text-[#525252] text-[14px] font-normal text-center mt-[76px]'><span className='text-[#F17732] underline'>قوانین استفاده</span> از نوبت 724 را می پذیرم.</p> >ورود</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> </div>
) )
} }
components/register/element/OTPForm.js
+2 -1
View File
@@ -18,9 +18,10 @@ function OTPForm({ handleOTP }) {
e.target.value = '' 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] 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]'} ${code && '!border-[1px] !border-solid !border-[#5559CE]'}
`} `}
/> />
components/register/index.js
+8 -5
View File
@@ -4,8 +4,11 @@ const about = ['سوالات متداول', 'تماس با ما', 'درباره
function RegisterPage({ children }) { function RegisterPage({ children }) {
return ( 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
<div className="flex items-center justify-center gap-[5px]"> 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 <Image
src='/assets/images/logo.png' src='/assets/images/logo.png'
width={40} width={40}
@@ -15,11 +18,11 @@ function RegisterPage({ children }) {
<p className="text-[#5559CE] text-[20px] font-bold">نوبت ۷۲۴</p> <p className="text-[#5559CE] text-[20px] font-bold">نوبت ۷۲۴</p>
</div> </div>
{children} {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="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) => ( {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>
</div> </div>
public/assets/images/banner-about.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 18 KiB