mip-website/pages/components/Paralax.js

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