mip-website/pages/page/docs.js

import React from 'react';
import Image from "next/image";
import AppContainer from "../appContainer";
import {MDBContainer, MDBIcon, MDBTypography} from "mdb-react-ui-kit";

const Docs = () => {
    const Parallax = ({  quality }) => {
        return `../resource/parallax/files-bg.jpg`;
    }
    const dataFile = [
        // {id: 1,title: 'اساسنامه شرکت سهامی مهر ایرانیان پرند' ,url: '../resource/files/اساسنامه شرکت سهامی.pdf'},
        {id: 2,title: 'آگهی افزایش سرمایه بیمارستان مهر پرند' ,url: '../resource/files/آگهی افزایش سرمایه.pdf'},
        {id: 3,title: 'آگهی تغییرات روزنامه رسمی' ,url: '../resource/files/آگهی تغییرات روزنامه رسمی.jpg'},
        {id: 4,title: 'موافقت اصولی' ,url: '../resource/files/Agrement.pdf'},
        {id: 5,title: ' اساسنامه  شرکت سهامی خاص پزشکی مهر ایرانیان پرند' ,url: '../resource/files/اساسنامه شرکت سهامی خاص پزشکی مهرایرانیان پرند.pdf'},
    ]
    return (
        <AppContainer title={' اساسنامه شرکت'}>
            <div className="parallax-container">
                <div className={'d-flex'}>
                    <h1 className={'center-align text-white  header_back service-text dana  font-weight-bold'}> اسناد رسمی  شرکت پزشکی مهر ایرانیان پرند  </h1>
                </div>
                <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 mt-5 mb-5'> 
                <div className={'flex justify-content-center align-items-center w-100 mb-5 text-center'}>
                    <Image height={150} width={150} src={'/resource/icons/files.png'} />
                </div>
                {dataFile.map((fileItem) => (
                    <>
                        <MDBTypography key={fileItem.id} style={{direction: 'rtl',borderRadius: '6px solid',borderRight: '6px  solid #1266f1',borderLeft: 'none'}} note noteColor='primary'>
                            <MDBIcon className='ms-1' icon='download' size='sm' />
                            <a title={fileItem.title} download href={fileItem.url}>{fileItem.title}</a>
                        </MDBTypography>
                    </>
                ))}
            </div>
        </AppContainer>
    );
};

export default Docs;