fix: add turn
This commit is contained in:
reza karimi
+160
-57
@@ -1,61 +1,164 @@
|
||||
import React,{useState} from 'react';
|
||||
import {
|
||||
MDBBtn,
|
||||
MDBIcon,
|
||||
MDBModal,
|
||||
MDBModalBody, MDBModalContent,
|
||||
MDBModalDialog,
|
||||
MDBModalFooter,
|
||||
MDBModalHeader, MDBModalTitle
|
||||
} from "mdb-react-ui-kit";
|
||||
import React from 'react'
|
||||
import { FiArrowUpLeft, FiCalendar, FiClock } from 'react-icons/fi'
|
||||
|
||||
const Paralax = () => {
|
||||
const [basicModal, setBasicModal] = useState(false);
|
||||
if (basicModal){
|
||||
setTimeout(()=> {
|
||||
setBasicModal(false)
|
||||
},2000)
|
||||
}
|
||||
const appointmentUrl =
|
||||
'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'
|
||||
|
||||
return (
|
||||
<div className='bg-image mt-5 d-flex flex-md-column flex-sm-column ' style={{ maxWidth: '1080rem' }}>
|
||||
<img style={{ width: '100%' }} src={''} alt="Picture of the author" />
|
||||
<div className='mask' style={{ backgroundColor: 'rgba(0, 0, 0, 0.6)' }}>
|
||||
<div className='d-flex flex-md-column flex-sm-column justify-content-center align-items-center h-100 dana'>
|
||||
<h2 className='text-white p-5 mb-0'>
|
||||
<MDBBtn onClick={() => setBasicModal(true)} size='lg' color='success'>
|
||||
دریافت نوبت آنلاین
|
||||
<MDBIcon style={{ paddingLeft: "15px",paddingTop: "5px",maxWidth: "100px",maxHeight: '50px' }} className='me-2 ' icon='clock' />
|
||||
</MDBBtn>
|
||||
</h2>
|
||||
{/*<h3 style={{marginRight: "5%"}} className='text-white mb-0'> 021 - 2842 6945 تماس تلفنی </h3>*/}
|
||||
</div>
|
||||
</div>
|
||||
{process.browser &&
|
||||
<MDBModal show={basicModal} tabIndex='-1'>
|
||||
<MDBModalDialog>
|
||||
<MDBModalContent>
|
||||
<MDBModalHeader>
|
||||
<MDBModalTitle className={'d-flex justify-content-start'} >این بخش در حال حاضر دسترس نیست </MDBModalTitle>
|
||||
<MDBBtn className='btn-close left left-align d-flex justify-content-end' color='none' onClick={() => setBasicModal(false)}></MDBBtn>
|
||||
</MDBModalHeader>
|
||||
<MDBModalBody className={'d-flex justify-content-around'}>
|
||||
<MDBIcon className='ms-1 text-danger' icon='exclamation' size='7x' />
|
||||
</MDBModalBody>
|
||||
const Paralax = () => (
|
||||
<section className='appointment-section' dir='rtl' aria-labelledby='appointment-title'>
|
||||
<div className='appointment-content'>
|
||||
<span className='appointment-kicker'>
|
||||
<FiCalendar aria-hidden='true' />
|
||||
نوبت‌دهی بیمارستان مهر پرند
|
||||
</span>
|
||||
<h2 id='appointment-title'>دریافت نوبت، در چند قدم ساده</h2>
|
||||
<p>
|
||||
برای مشاهده اطلاعات نوبت‌دهی و دریافت نوبت آنلاین، به صفحه اختصاصی
|
||||
بیمارستان مهر پرند در سامانه دکترهامی بروید.
|
||||
</p>
|
||||
<div className='appointment-actions'>
|
||||
<a className='appointment-button' href={appointmentUrl}>
|
||||
<FiClock aria-hidden='true' />
|
||||
دریافت نوبت آنلاین
|
||||
<FiArrowUpLeft className='button-arrow' aria-hidden='true' />
|
||||
</a>
|
||||
<span className='appointment-hint'>ورود مستقیم به سامانه نوبت‌دهی</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<MDBModalFooter className={'d-flex justify-content-around'}>
|
||||
<MDBBtn color='secondary' onClick={() => setBasicModal(false)}>
|
||||
بستن
|
||||
</MDBBtn>
|
||||
</MDBModalFooter>
|
||||
</MDBModalContent>
|
||||
</MDBModalDialog>
|
||||
</MDBModal>
|
||||
}
|
||||
<style jsx>{`
|
||||
.appointment-section {
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
width: calc(100% - 40px);
|
||||
max-width: 1240px;
|
||||
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