diff --git a/pages/components/Paralax.js b/pages/components/Paralax.js
index 5543786..d4aadca 100644
--- a/pages/components/Paralax.js
+++ b/pages/components/Paralax.js
@@ -1,61 +1,164 @@
-import React,{useState} from 'react';
-import {
-    MDBBtn,
-    MDBIcon,
-    MDBModal,
-    MDBModalBody, MDBModalContent,
-    MDBModalDialog,
-    MDBModalFooter,
-    MDBModalHeader, MDBModalTitle
-} from "mdb-react-ui-kit";
-
-const Paralax = () => {
-    const [basicModal, setBasicModal] = useState(false);
-    if (basicModal){
-        setTimeout(()=> {
-            setBasicModal(false)
-        },2000)
-    }
-
-    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>
-
-                        <MDBModalFooter className={'d-flex justify-content-around'}>
-                            <MDBBtn  color='secondary' onClick={() => setBasicModal(false)}>
-                                بستن
-                            </MDBBtn>
-                        </MDBModalFooter>
-                    </MDBModalContent>
-                </MDBModalDialog>
-            </MDBModal>
-            }
-
-        </div>
-    );
-};
-
-
-export default  Paralax;
\ No newline at end of file
+import React from 'react'
+import { FiArrowUpLeft, FiCalendar, FiClock } from 'react-icons/fi'
+
+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'
+
+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>
+
+    <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>
+)
+
+export default Paralax