mip-website/pages/page/Directors.js

import React from 'react'
import AppContainer from '../appContainer'
import Image from 'next/image'
import {
  MDBCard,
  MDBCardBody,
  MDBCardHeader,
  MDBCardImage,
  MDBCardText,
  MDBCol,
  MDBContainer,
  MDBIcon,
  MDBRow,
  MDBTypography
} from 'mdb-react-ui-kit'

const Directors = () => {
  const Parallax = ({ quality }) => {
    return `../resource/parallax/Directors.jpg`
  }
  const DataUsers = [
    {
      id: 1,
      name: ' دکتر محمد جواد نمکی ',
      position: 'مدیر عامل و موسس',
      more: 'متخصص بیهوشی',
      img: '/resource/avatar/user-2.jpg'
    },
    {
      id: 2,
      name: 'پوریا نمکی',
      position: 'مدیر مالی و اداری',
      more: ' عضو هیئت مدیره ',
      img: '/resource/avatar/user-1.jpg'
    },
    {
      id: 3,
      name: '    مهندس احمدی ',
      position: '   مهندس عمران',
      more: ' مدیر ساخت',
      img: '/resource/avatar/user-4.png'
    },
    {
      id: 5,
      name: '    مهندس هاشمی ',
      position: 'مهندس ایمنی ',
      more: '  ',
      img: '/resource/avatar/user-6.png'
    },
    {
      id: 6,
      name: 'دکتر علی  اسماعیلی ',
      position: ' متخصص اطفال ',
      more: '  ',
      img: '/resource/avatar/user-9.png'
    },
    {
      id: 7,
      name: '    مهندس رضاپناه ',
      position: 'مهندس برق ',
      more: '  ',
      img: '/resource/avatar/user-7.png'
    },
    {
      id: 9,
      name: 'دکتر سجاد نمکی ',
      position: ' عضو هیئت مدیره ',
      more: 'متخصص پوست و زیبابی  ',
      img: '/resource/avatar/user-3.jpg'
    }
  ]
  return (
    <AppContainer title={' تیم پروژه بیمارستان مهر پرند'}>
      <div className='parallax-container'>
        <h2 className={'center-align text-white  header_back service-text dana font-weight-bold'}>
          {' '}
          تیم پروژه بیمارستان{' '}
        </h2>
        <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'> 
      <MDBRow className='row-cols-1 mt-5 mb-5 row-cols-sm-1 row-cols-md-2 row-cols-lg-4 g-4'>
          {DataUsers.map(item => (
            <MDBCol key={item.id}>
              <div class='card-team'>
                <div class='slide slide1'>
                  <div class='content'>
                    <MDBCardImage src={item.img} />
                  </div>
                </div>

                <div class='slide slide2'>
                  <div class='content mt-3 flex flex-col gap-1'>
                    <h3 className='mt-3'>{item.name}</h3>
                    <p>{item.position}</p>
                    <p>{item.more}</p>
                  </div>
                </div>
              </div>
            </MDBCol>
          ))}
        </MDBRow>
      </div>
    </AppContainer>
  )
}

export default Directors