mip-website/pages/stock-unit/index.jsx

import React from 'react'
import AppContainer from '../appContainer'
import Image from 'next/image'
import { MDBContainer, MDBIcon, MDBCard } from 'mdb-react-ui-kit'
import { SimpleGrid, MDBCardBody, Table, TableCaption, TableContainer, Tbody, Td, Th, Thead, Tr } from '@chakra-ui/react'
import Link from 'next/link'

const StockUnit = () => {
  const Parallax = ({ quality }) => {
    return `../resource/images/call-center.jpg`
  }
  return (
    <AppContainer title={' امور سهام'}>
      <div className='parallax-container'>
        <div
          style={{ fontSize: 30 }}
          className={'center-align text-white header_back service-text dana font-weight-bold'}
        >
          امور سهام
        </div>
        <Image
          loader={Parallax}
          src='Parallax.png'
          className={'responsive-img shadow-5'}
          alt='امور سهام بیمارستان مهر ایرانیان'
          width={3000}
          height={1300}
        />
      </div>
      <MDBContainer className={'mb-5 mt-5'}>
        <div className='my-4'>
        <SimpleGrid spacing={15} columns={[1, 2, 4]}>
        <Link href={'/stock-unit'}>
            <MDBCard className={'bg-neutral-100 fst-box hover:bg-neutral-200  cursor-pointer hover:shadow-2xl'}>
              <div className='flex justify-center p-4'>
                  درگاه سهامدارن 
              </div>
            </MDBCard>
          </Link>
          <Link href={'/stock-unit/stock-sales'}>
            <MDBCard className={'bg-neutral-100 fst-box hover:bg-neutral-200  cursor-pointer hover:shadow-2xl'}>
              <div className='flex justify-center p-4'>
                درخواست خرید سهام
              </div>
            </MDBCard>
          </Link>
          <Link href={'/stock-unit/stock-transfer'}>
            <MDBCard className={'bg-neutral-100 fst-box hover:bg-neutral-200  cursor-pointer hover:shadow-2xl'}>
              <div className='flex justify-center p-4'>
                درخواست انتقال سهام
              </div>
            </MDBCard>
          </Link>
    
          <Link href={'/stock-unit/stock-sales'}>
            <MDBCard className={'bg-neutral-100 fst-box hover:bg-neutral-200  cursor-pointer hover:shadow-2xl'}>
              <div className='flex justify-center p-4'>
                  درخواست فروش سهام  
              </div>
            </MDBCard>
          </Link>
          </SimpleGrid>
        </div>
  
          <TableContainer alignContent='center' alignItems='center'>
            <Table align='center' variant='striped'>
              <TableCaption className='bk-med'>پاسخگویی و مشاوره خرید سهام </TableCaption>
              <Thead alignContent='center'>
                <Tr alignContent='center' alignItems='center' className='text-center bg-gray-200'>
                  <Th className='text-center bk-med'>شماره تماس</Th>
                  <Th className='text-center bk-med'>کارشناس فروش </Th>
                </Tr>
              </Thead>
              <Tbody>
                <Tr>
                  <Td className='text-center'>
                    <a className='text-black' href='tel:02153457000'>
                      <MDBIcon className='mr-3' fas style={{ fontSize: '10px' }} icon='phone-alt' />
                      021-53457000 - 1023
                    </a>
                  </Td>
                  <Td className='text-center'> خانم باباگلی </Td>
                </Tr>
                <Tr>
                  <Td className='text-center'>
                    <a className='text-black' href='tel:02153457000'>
                      <MDBIcon className='mr-3' fas style={{ fontSize: '10px' }} icon='phone-alt' />
                      021-53457000 - 1024
                    </a>
                  </Td>
                  <Td className='text-center'> خانم طالبی </Td>
                </Tr>
                <Tr>
                  <Td className='text-center'>
                    <a className='text-black' href='tel:02153457000'>
                      <MDBIcon className='mr-3' fas style={{ fontSize: '10px' }} icon='phone-alt' />
                      021-53457000 - 1018
                    </a>
                  </Td>
                  <Td className='text-center'> خانم کهریزی </Td>
                </Tr>
                <Tr>
                  <Td className='text-center'>
                    <a className='text-black' href='tel:02153457000'>
                      <MDBIcon className='mr-3' fas style={{ fontSize: '10px' }} icon='phone-alt' />
                      021-53457000 - 1025
                    </a>
                  </Td>
                  <Td className='text-center'> خانم کاظمیان </Td>
                </Tr>
              </Tbody>
            </Table>
          </TableContainer>
      </MDBContainer>
    </AppContainer>
  )
}

export default StockUnit