mip-website/pages/components/SalesTeam.js

import React from 'react';
import {
    MDBBtn,
    MDBCard,
    MDBCardBody,
    MDBCardText,
    MDBCardTitle, MDBCol,
    MDBContainer,
    MDBRow,
    MDBTypography
} from "mdb-react-ui-kit";
import { Swiper, SwiperSlide } from 'swiper/react';
import SwiperCore, { Autoplay } from 'swiper';
import * as PropTypes from "prop-types";
import Adib_user from '../../public/resource/avatar/sales/Adib_user.jpg'
import Babagoli from '../../public/resource/avatar/sales/Babagoli.png'
import Talebi from '../../public/resource/avatar/sales/Talebi.png'
import Namaki from '../../public/resource/avatar/sales/namaki.png'
import { Badge, Box, Image, Img } from "@chakra-ui/react";
import { MdPhone } from "react-icons/md";
import Link from "next/link";
import Req from "../../public/resource/parallax/Asset 1.svg";



SwiperCore.use([Autoplay]);

function MDBCardImage(props) {
    return null;
}

MDBCardImage.propTypes = {
    src: PropTypes.string,
    alt: PropTypes.string,
    position: PropTypes.string
};
const SalesTeam = () => {
    const users = [
        { id: 1, name: 'سیمین ادیب', call: '09933924405', img: Adib_user, job: 'کارشناس فروش' },
        { id: 2, name: ' فاطمه باباگلی', call: '09195013991', img: Babagoli, job: 'کارشناس فروش' },
        { id: 3, name: ' مریم طالبی ', call: '09184894952', img: Talebi, job: 'کارشناس فروش' },
        // {id:4, name: '   دکتر اسماعیلی  ', call: '09204943950', img: Namaki, job: 'مدیر فروش سهام'},
    ]
    // return (
    //     <MDBContainer className={''}>

    //         <div className={'mb-5'}>
    //             <Link href={'/recruitment'}>
    //                 <div className={'cursor-pointer hover-shadow'}>
    //                     <Img className={'rounded'} loading={'lazy'} src={Req} />
    //                 </div>
    //             </Link>
    //         </div>
    //         <div className={'flex flex-col align-items-center justify-content-center'}>
    //             <h4 className={'bk-med'}>  کارشناسان فروش سهام</h4>
    //             <p className={'bk-light text-gray'}>خرید و فروش سهام ، پاسخ به سوالات ، مشاوره خرید</p>
    //         </div>
    //         <Swiper
    //             spaceBetween={20}
    //             slidesPerView={3}
    //             className={'text-center'}
    //             // onSlideChange={() => console.log('slide change')}
    //             // onSwiper={(swiper) => console.log(swiper)}
    //             autoplay={{
    //                 "delay": 2500,
    //                 "disableOnInteraction": false
    //             }}
    //             breakpoints={{
    //                 "640": {
    //                     "slidesPerView": 1,
    //                     "spaceBetween": 0
    //                 },
    //                 "360": {
    //                     "slidesPerView": 1,
    //                     "spaceBetween": 0
    //                 },
    //                 "320": {
    //                     "slidesPerView": 1,
    //                     "spaceBetween": 0
    //                 },
    //                 "596": {
    //                     width: 1080,
    //                     "slidesPerView": 2,
    //                     "spaceBetween": 20
    //                 },
    //                 "526": {
    //                     "slidesPerView": 2,
    //                     "spaceBetween": 20
    //                 },

    //                 "996": {
    //                     "slidesPerView": 2,
    //                     "spaceBetween": 20
    //                 },
    //                 "860": {
    //                     "slidesPerView": 2,
    //                     "spaceBetween": 20
    //                 },
    //                 "768": {
    //                     "slidesPerView": 2,
    //                     "spaceBetween": 20
    //                 },
    //                 "972": {
    //                     "slidesPerView": 3,
    //                     "spaceBetween": 20
    //                 },
    //                 "1024": {
    //                     "slidesPerView": 3,
    //                     "spaceBetween": 20
    //                 }
    //             }}
    //         >
    //             {users.map((item) => (
    //                 <SwiperSlide className={'flex justify-content-center'}>
    //                     <Box width={250} className={'shadow-2-strong hover-shadow m-2'} maxW='sm' borderWidth='1px' borderRadius='lg' overflow='hidden'>
    //                         <Image src={item.img} alt={'بیمارستان مهر پرند'} />
    //                         <Box p='6'>
    //                             <Box
    //                                 textAlign={'center'}
    //                                 mt='1'
    //                                 fontWeight='semibold'
    //                                 as='h4'
    //                                 className={'bk'}
    //                                 lineHeight='tight'
    //                                 isTruncated
    //                             >
    //                                 {item.name}
    //                             </Box>
    //                             <p style={{ fontSize: 12 }} className={'text-gray'}>{item.job}</p>
    //                             <Box textAlign={'center'}>
    //                                 <Box as='span' color='gray.600' fontSize='sm'>
    //                                     <div className={'bg-dark-teal py-2 text-white p-1 rounded-pill   '}>
    //                                         <a className={'text-white'} href={'tel:' + item.call}>
    //                                             <MdPhone className={'bg-white p-1 mr-2 text-lg rounded-circle text-black'} />
    //                                             {item.call}
    //                                         </a>
    //                                     </div>
    //                                 </Box>
    //                             </Box>
    //                         </Box>
    //                     </Box>
    //                 </SwiperSlide>
    //             ))}
    //         </Swiper>
    //         <MDBContainer className={'mt-5'}>
    //             <div className={'p-2 rounded-5  lg:flex-row-reverse  md:flex md:flex-col md:justify-center text-center  dana'} style={{ backgroundColor: '#A7F3D0', borderLeft: '4px solid #34D399', borderRight: '4px solid #34D399' }}>
    //                 <div>
    //                     <MDBTypography className={'ml-2 RTL text-base md:text-[1.25rem]'} style={{ fontWeight: 'bold', lineHeight: 2 }} variant='h5'>مشاوره تلفنی خرید سهام   </MDBTypography>
    //                 </div>
    //                 <div>
    //                     <MDBTypography className={'mr-2 text-base md:text-[1.25rem]'} style={{ fontWeight: 'bold', lineHeight: 2 }} variant='h5'>021 - 53457000  </MDBTypography>
    //                 </div>
    //             </div>
    //         </MDBContainer>
    //     </MDBContainer>
    // );

    return null
};

export default SalesTeam;