mip-website/pages/page/about.js

import React from 'react';
import AppContainer from "../appContainer";
import Image from "next/image";


const About = (props) => {
    const Parallax = ({  quality }) => {
        return `../resource/parallax/about.jpg`;
    }
    return (
        <div>
           <AppContainer title={'درباره بیمارستان  '}>
               <style jsx>{`
                   .progress-section {
                       margin: 3rem 0 4rem;
                       padding: clamp(1.5rem, 4vw, 2.5rem);
                       border: 1px solid #dcebea;
                       border-radius: 1.5rem;
                       background: linear-gradient(135deg, #f1faf9, #ffffff 65%);
                       box-shadow: 0 18px 45px rgba(18, 87, 90, 0.08);
                       direction: rtl;
                   }
                   .progress-heading {
                       display: flex;
                       align-items: center;
                       justify-content: space-between;
                       gap: 1.5rem;
                       margin-bottom: 2rem;
                   }
                   .progress-label {
                       display: block;
                       margin-bottom: 0.65rem;
                       color: #168182;
                       font-size: 0.85rem;
                       font-weight: 700;
                   }
                   .progress-heading h2 {
                       margin: 0;
                       color: #15383e;
                       font-size: clamp(1.4rem, 3vw, 2rem);
                       font-weight: 800;
                       line-height: 1.5;
                   }
                   .progress-value {
                       flex: 0 0 auto;
                       color: #147778;
                       font-size: clamp(2.5rem, 5vw, 3.5rem);
                       font-weight: 800;
                       line-height: 1;
                   }
                   .progress-track {
                       height: 16px;
                       overflow: hidden;
                       border-radius: 999px;
                       background: #dcebea;
                   }
                   .progress-fill {
                       width: 95%;
                       height: 100%;
                       border-radius: inherit;
                       background: linear-gradient(90deg, #29b6a8, #147778);
                   }
                   .progress-caption {
                       margin: 0.85rem 0 0;
                       color: #637b7f;
                       font-size: 0.9rem;
                   }
                   @media (max-width: 639px) {
                       .progress-heading {
                           align-items: flex-start;
                           gap: 1rem;
                       }
                       .progress-section {
                           margin: 2rem 0 3rem;
                           border-radius: 1rem;
                       }
                   }
               `}</style>
               <div className="parallax-container">
                   <h1 className={'center-align text-white service-text dana font-weight-bold'}> درباره بیمارستان  </h1>
                   <Image
                       loader={Parallax}
                       src="Parallax.png"
                       className={'responsive-img shadow-5'}
                       alt="درباره بیارستان مهر ایرانیان پرند "
                        width={3000}
                       height={1300}
                   />
               </div>
               <div className='lg:mx-20 sm:mx-5'> 
               <h5 style={{ marginTop: '2rem' }} className={'right-align font-weight-bold'}>
                       آشنایی اجمالی با بیمارستان مهرایرانیان
                       <hr />

                   </h5>
                   <p className={'right-align RTL'}>
                       بیمارستان تخصصی مهرایرانیان واقع در  اتوبان چهاربانده اصلی داخلی شهر پرند در بهترین موقعیت مکانی و در دل مسکن مهر،  با فضای درمانی به متراژ تقریبی 21.000 متر مربع همراه با 4000 متر پارکینگ طبقاتی، با هدف تبدیل شدن به یکی از قطب های درمانی منطقه در حال احداث می باشد. این بیمارستان که تنها بیمارستان تخصصی در کنار بزرگترین فرودگاه کشور است در فاز اولیه احداث دارای 96 تختخواب و دارای بخش های ICU،CCU،NICU،زایشگاه، اتاق های عمل، مرکز تصویربرداری،آزمایشگاه،داروخانه، اورژانس، بخش اسکوپی و گوارش، و دندانپزشکی عمومی و تخصصی می باشد. این بیمارستان در آینده نه چندان دور سهم بسزایی در بهداشت و درمان منطقه جنوب غرب تهران که شامل شهرهای پرند،رباط کریم،نسیم شهر و شهرک های تابعه است، خواهد داشت.
                       در حال حاضر این پروژه 95% پیشرفت فیزیکی داشته و طبقه همکف آن که شامل اورژانس و کلینیک های تخصصی است تا پایان آبان 1400 تکمیل خواهد شد.
                       مرحله راه اندازی بیمارستان با حداقل ظرفیت تا پایان سال 1402 و مرحله تکمیل و راه اندازی کامل بیمارستان با ظرفیت 200 تخت در سال 1403 انجام خواهد شد.

                   </p>
                   <section className='progress-section' aria-labelledby='progress-title'>
                       <div className='progress-heading'>
                           <div>
                               <span className='progress-label'>پیشرفت پروژه</span>
                               <h2 id='progress-title'>درصد پیشرفت کار</h2>
                           </div>
                           <strong className='progress-value'>۹۵٪</strong>
                       </div>
                       <div
                           className='progress-track'
                           role='progressbar'
                           aria-label='پیشرفت فیزیکی پروژه'
                           aria-valuenow={95}
                           aria-valuemin={0}
                           aria-valuemax={100}
                       >
                           <div className='progress-fill' />
                       </div>
                       <p className='progress-caption'>پیشرفت فیزیکی پروژه بیمارستان مهر ایرانیان</p>
                   </section>
               </div>
           </AppContainer>
        </div>
    );
};

export default About;