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>
    );
};

export default SalesTeam;