fix: add turn
This commit is contained in:
reza karimi
+160
-57
@@ -1,61 +1,164 @@
|
|||||||
import React,{useState} from 'react';
|
import React from 'react'
|
||||||
import {
|
import { FiArrowUpLeft, FiCalendar, FiClock } from 'react-icons/fi'
|
||||||
MDBBtn,
|
|
||||||
MDBIcon,
|
|
||||||
MDBModal,
|
|
||||||
MDBModalBody, MDBModalContent,
|
|
||||||
MDBModalDialog,
|
|
||||||
MDBModalFooter,
|
|
||||||
MDBModalHeader, MDBModalTitle
|
|
||||||
} from "mdb-react-ui-kit";
|
|
||||||
|
|
||||||
const Paralax = () => {
|
const appointmentUrl =
|
||||||
const [basicModal, setBasicModal] = useState(false);
|
'https://dr-hami.ir/clinic/25/%D8%A8%DB%8C%D9%85%D8%A7%D8%B1%D8%B3%D8%AA%D8%A7%D9%86-%D9%85%D9%87%D8%B1%D8%A7%DB%8C%D8%B1%D8%A7%D9%86%DB%8C%D8%A7%D9%86'
|
||||||
if (basicModal){
|
|
||||||
setTimeout(()=> {
|
|
||||||
setBasicModal(false)
|
|
||||||
},2000)
|
|
||||||
}
|
|
||||||
|
|
||||||
return (
|
const Paralax = () => (
|
||||||
<div className='bg-image mt-5 d-flex flex-md-column flex-sm-column ' style={{ maxWidth: '1080rem' }}>
|
<section className='appointment-section' dir='rtl' aria-labelledby='appointment-title'>
|
||||||
<img style={{ width: '100%' }} src={''} alt="Picture of the author" />
|
<div className='appointment-content'>
|
||||||
<div className='mask' style={{ backgroundColor: 'rgba(0, 0, 0, 0.6)' }}>
|
<span className='appointment-kicker'>
|
||||||
<div className='d-flex flex-md-column flex-sm-column justify-content-center align-items-center h-100 dana'>
|
<FiCalendar aria-hidden='true' />
|
||||||
<h2 className='text-white p-5 mb-0'>
|
نوبت‌دهی بیمارستان مهر پرند
|
||||||
<MDBBtn onClick={() => setBasicModal(true)} size='lg' color='success'>
|
</span>
|
||||||
دریافت نوبت آنلاین
|
<h2 id='appointment-title'>دریافت نوبت، در چند قدم ساده</h2>
|
||||||
<MDBIcon style={{ paddingLeft: "15px",paddingTop: "5px",maxWidth: "100px",maxHeight: '50px' }} className='me-2 ' icon='clock' />
|
<p>
|
||||||
</MDBBtn>
|
برای مشاهده اطلاعات نوبت‌دهی و دریافت نوبت آنلاین، به صفحه اختصاصی
|
||||||
</h2>
|
بیمارستان مهر پرند در سامانه دکترهامی بروید.
|
||||||
{/*<h3 style={{marginRight: "5%"}} className='text-white mb-0'> 021 - 2842 6945 تماس تلفنی </h3>*/}
|
</p>
|
||||||
</div>
|
<div className='appointment-actions'>
|
||||||
</div>
|
<a className='appointment-button' href={appointmentUrl}>
|
||||||
{process.browser &&
|
<FiClock aria-hidden='true' />
|
||||||
<MDBModal show={basicModal} tabIndex='-1'>
|
دریافت نوبت آنلاین
|
||||||
<MDBModalDialog>
|
<FiArrowUpLeft className='button-arrow' aria-hidden='true' />
|
||||||
<MDBModalContent>
|
</a>
|
||||||
<MDBModalHeader>
|
<span className='appointment-hint'>ورود مستقیم به سامانه نوبت‌دهی</span>
|
||||||
<MDBModalTitle className={'d-flex justify-content-start'} >این بخش در حال حاضر دسترس نیست </MDBModalTitle>
|
</div>
|
||||||
<MDBBtn className='btn-close left left-align d-flex justify-content-end' color='none' onClick={() => setBasicModal(false)}></MDBBtn>
|
</div>
|
||||||
</MDBModalHeader>
|
|
||||||
<MDBModalBody className={'d-flex justify-content-around'}>
|
|
||||||
<MDBIcon className='ms-1 text-danger' icon='exclamation' size='7x' />
|
|
||||||
</MDBModalBody>
|
|
||||||
|
|
||||||
<MDBModalFooter className={'d-flex justify-content-around'}>
|
<style jsx>{`
|
||||||
<MDBBtn color='secondary' onClick={() => setBasicModal(false)}>
|
.appointment-section {
|
||||||
بستن
|
position: relative;
|
||||||
</MDBBtn>
|
display: flex;
|
||||||
</MDBModalFooter>
|
align-items: center;
|
||||||
</MDBModalContent>
|
width: calc(100% - 40px);
|
||||||
</MDBModalDialog>
|
max-width: 1240px;
|
||||||
</MDBModal>
|
min-height: 350px;
|
||||||
}
|
margin: 64px auto;
|
||||||
|
overflow: hidden;
|
||||||
|
border-radius: 28px;
|
||||||
|
color: #fff;
|
||||||
|
background-color: #0a3f49;
|
||||||
|
background-image: linear-gradient(to left, rgba(8, 52, 61, .99) 0%, rgba(8, 52, 61, .94) 39%, rgba(8, 52, 61, .18) 100%), url('/resource/parallax/Novat.jpg');
|
||||||
|
background-position: center;
|
||||||
|
background-size: cover;
|
||||||
|
box-shadow: 0 22px 50px rgba(13, 71, 76, .16);
|
||||||
|
font-family: dana-fanum, sans-serif;
|
||||||
|
}
|
||||||
|
.appointment-section::after {
|
||||||
|
position: absolute;
|
||||||
|
top: -90px;
|
||||||
|
right: -70px;
|
||||||
|
width: 300px;
|
||||||
|
height: 300px;
|
||||||
|
border: 1px solid rgba(173, 235, 226, .15);
|
||||||
|
border-radius: 50%;
|
||||||
|
content: '';
|
||||||
|
pointer-events: none;
|
||||||
|
}
|
||||||
|
.appointment-content {
|
||||||
|
position: relative;
|
||||||
|
z-index: 1;
|
||||||
|
width: min(100%, 660px);
|
||||||
|
padding: 52px 62px;
|
||||||
|
}
|
||||||
|
.appointment-kicker {
|
||||||
|
display: inline-flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 9px;
|
||||||
|
padding: 8px 13px;
|
||||||
|
border: 1px solid rgba(138, 229, 217, .35);
|
||||||
|
border-radius: 100px;
|
||||||
|
color: #bbf1e9;
|
||||||
|
background: rgba(255, 255, 255, .09);
|
||||||
|
font-size: 12px;
|
||||||
|
font-weight: 700;
|
||||||
|
}
|
||||||
|
h2 {
|
||||||
|
margin: 20px 0 14px;
|
||||||
|
color: #fff;
|
||||||
|
font-size: clamp(27px, 3.5vw, 42px);
|
||||||
|
font-weight: 800;
|
||||||
|
line-height: 1.5;
|
||||||
|
}
|
||||||
|
p {
|
||||||
|
max-width: 510px;
|
||||||
|
margin: 0;
|
||||||
|
color: #e2f0ee;
|
||||||
|
font-size: 15px;
|
||||||
|
line-height: 2;
|
||||||
|
}
|
||||||
|
.appointment-actions {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
gap: 16px;
|
||||||
|
margin-top: 27px;
|
||||||
|
}
|
||||||
|
.appointment-button {
|
||||||
|
display: inline-flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
gap: 11px;
|
||||||
|
min-height: 52px;
|
||||||
|
padding: 0 20px;
|
||||||
|
border-radius: 12px;
|
||||||
|
color: #104b51;
|
||||||
|
background: #fff;
|
||||||
|
font-size: 14px;
|
||||||
|
font-weight: 800;
|
||||||
|
text-decoration: none;
|
||||||
|
box-shadow: 0 9px 22px rgba(0, 0, 0, .13);
|
||||||
|
transition: transform .2s ease, background-color .2s ease;
|
||||||
|
}
|
||||||
|
.appointment-button:hover {
|
||||||
|
color: #104b51;
|
||||||
|
background: #dff7f2;
|
||||||
|
transform: translateY(-2px);
|
||||||
|
}
|
||||||
|
.appointment-button:focus-visible {
|
||||||
|
outline: 3px solid #8de5d9;
|
||||||
|
outline-offset: 4px;
|
||||||
|
}
|
||||||
|
.button-arrow {
|
||||||
|
margin-right: 4px;
|
||||||
|
font-size: 17px;
|
||||||
|
}
|
||||||
|
.appointment-hint {
|
||||||
|
color: #c9e2df;
|
||||||
|
font-size: 12px;
|
||||||
|
}
|
||||||
|
@media (max-width: 700px) {
|
||||||
|
.appointment-section {
|
||||||
|
width: calc(100% - 32px);
|
||||||
|
min-height: 390px;
|
||||||
|
margin: 46px auto;
|
||||||
|
border-radius: 22px;
|
||||||
|
background-image: linear-gradient(to left, rgba(8, 52, 61, .97), rgba(8, 52, 61, .78)), url('/resource/parallax/Novat.jpg');
|
||||||
|
background-position: 38% center;
|
||||||
|
}
|
||||||
|
.appointment-content {
|
||||||
|
padding: 34px 25px;
|
||||||
|
}
|
||||||
|
h2 {
|
||||||
|
margin-top: 18px;
|
||||||
|
font-size: clamp(25px, 7vw, 33px);
|
||||||
|
}
|
||||||
|
p {
|
||||||
|
font-size: 13px;
|
||||||
|
}
|
||||||
|
.appointment-actions {
|
||||||
|
align-items: flex-start;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 12px;
|
||||||
|
margin-top: 22px;
|
||||||
|
}
|
||||||
|
.appointment-button {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
`}</style>
|
||||||
|
</section>
|
||||||
|
)
|
||||||
|
|
||||||
</div>
|
export default Paralax
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
|
|
||||||
export default Paralax;
|
|
||||||
|
|||||||
Reference in New Issue
Block a user