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);
}
.bg-banner-about {
background: url(../public/assets/images/banner-about.png);
}
.bg-banner-home::after {
content: "";
position: absolute;
@@ -271,6 +275,11 @@ html {
}
}
.padding-responsive {
padding-left: 16px;
padding-right: 16px;
}
@media (min-width: 640px) {
.padding-responsive {
padding-left: 52px;
components/aboutUs/Head.js
+2 -2
View File
@@ -3,14 +3,14 @@ import React from 'react'
function Head() {
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
src='/assets/images/logo-2.png'
height={46}
width={46}
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>
)
}
components/aboutUs/Services.js
+9 -12
View File
@@ -3,30 +3,27 @@ import UnderlineLG from '../icons/UnderlineLG';
import TickOrangeA from '../icons/TickOrangeA';
const ourServices = [
'برگزاری دوره های آنلاین',
'معرفی بهترین باشگاه های گردشگری',
'معرفی بهترین باشگاه های گردشگری',
'ارتباط با راهنمایان گردشگری',
'معرفی جاذبه های گردشگری',
'ارتباط با راهنمایان گردشگری',
'برگزاری تور ها و برنامه های متنوع',
'معرفی بومگردی های سراسر کشور',
'برگزاری تور ها و برنامه های متنوع'
'جستجوی سریع پزشک ',
'جستجوی کلینیک و مراکز درمانی',
'نوبت گیری راحت و آسان',
'دشبورد تخصصی بیمار',
'دشبورد تخصصی پزشک',
'نوبت گیری راحت و آسان'
]
function Services() {
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'>
<AnimationTextHead name='zoom-in-up' text='خدمات ما'>
<UnderlineLG />
</AnimationTextHead>
</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) => (
<li
key={idx}
className='flex items-center justify-start gap-[8px]'
className='flex items-start justify-start gap-[8px]'
>
<TickOrangeA />
<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() {
return (
<div className="pt-[120px] mt-[56px] padding-responsive">
<div
className="pt-[120px] mt-[56px]
px-0 md:px-[80px] lg:px-[108px]
"
>
<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 />
</div>
)
components/clinic/components/contact/modal/Content.js
+1 -1
View File
@@ -19,7 +19,7 @@ function Content({ handleClose }) {
</div>
</div>
<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) => (
<li className="flex items-center flex-col justify-center gap-1">
<Image
components/clinic/components/contact/modal/index.js
+1 -1
View File
@@ -41,7 +41,7 @@ function ModalSearchCity({ open, setOpen, handleClose, children }) {
<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)]"
>
<Content onClose={handleClose} />
<Content handleClose={handleClose} />
</div>
</Drawer>
</>
components/contactUs/Call.js
+2 -2
View File
@@ -11,12 +11,12 @@ function Call() {
return (
<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]
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] leading-[26px] text-[16px] font-normal mt-6"
className="text-[#FAFAFA] leading-[26px] text-[14px] md:text-[16px] font-normal mt-6"
>سامانه نوبت 724 به مردم کمک می کند تا دسترسی آسان تر و سریع تری به خدمات پزشکی و درمانی داشته باشند.</p>
<ul className="flex flex-col mt-[68px] justify-start items-start gap-[32px]">
<ContentContact
components/contactUs/Connect.js
+12 -7
View File
@@ -1,12 +1,13 @@
import Field from "@/app/component/Field"
import { Button } from "@mui/material"
import ArrowLeftC from "../icons/ArrowLeftC"
import ArrowLeftC from "../icons/ArrowLeftC";
import { Button } from "@mui/material";
import FieldLabel from "./FieldLabel";
import Field from "@/app/component/Field";
function Connect() {
return (
<div
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 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>
</div>
<div className="mt-[40px] flex flex-col gap-[20px]">
<div className="flex flex-col sm:flex-row items-center justify-center gap-4">
<Field title='نام و نام خانوادگی' type='text' />
<Field title='شماره موبایل' type='text' />
<div className="flex flex-col sm:flex-row items-center justify-center gap-[24px] sm:gap-[21px] md:gap-18px] lg:gap-[16px]">
<FieldLabel title='نام و نام خانوادگی'>
<Field title='احسان احمدی' type='text' />
</FieldLabel>
<FieldLabel title='شماره موبایل'>
<Field title='09121056987' type='text' />
</FieldLabel>
</div>
<div>
<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 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>
)
}
components/register/SignInPage.js
+16 -10
View File
@@ -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>
)
}
components/register/element/OTPForm.js
+3 -2
View File
@@ -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]'}
`}
/>
components/register/index.js
+8 -5
View File
@@ -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>
public/assets/images/banner-about.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 18 KiB