rubix/src/components/MobileComponent/MobileCommunityCard.jsx

import React from "react";
import { Swiper, SwiperSlide } from "swiper/react";
import { Box, Container, SimpleGrid, Text, Image } from "@chakra-ui/react";
import "swiper/css";
import "swiper/css/pagination";
import imgOne from "../../assets/images/Component115.png";
import imgtwo from "../../assets/images/Component116.png";
import imgthree from "../../assets/images/Component117.png";
import imgfour from "../../assets/images/Component118.png";
import imgfive from "../../assets/images/Component119.png";
import imgsix from "../../assets/images/Component120.png";
import imgseven from "../../assets/images/Component121.png";
import imgeight from "../../assets/images/Component122.png";
import imgnine from "../../assets/images/Component123.png";
import imgten from "../../assets/images/Component128.png";
import imgeleven from "../../assets/images/Component127.png";
import linkedin from "../../assets/images/linkedin.png";
import games from "../../assets/images/discot.png";
import {Pagination,Navigation} from "swiper/modules"

const individuals = [
  {
    location: "india",
    name: "KC Reddy",
    jobTitle: "Founder/CTO",
    description:
      "A visionary poised to deliver trustless, secure internet and passwordless cyber security",
    imageUrl: imgOne,
  },
  {
    location: "india",
    name: "Ravi Srinivasa Murty",
    jobTitle: "Chief Strategy Officer",
    description:
      "Global business leader with a technology orientation and a vision to drive economic value.",
    imageUrl: imgtwo,
  },
  {
    location: "india",
    name: "Hari Krishnan",
    jobTitle: "Chief Growth Officer",
    description:
      "Deeply passionate about Cryptography, Zero Knowledge Proofs, and Number Theory.",
    imageUrl: imgthree,
  },
  {
    location: "india",
    name: "Eser Torun, CFA",
    jobTitle: "Chief Growth Officer",
    description:
      "Deeply passionate about Cryptography, Zero Knowledge Proofs, and Number Theory.",
    imageUrl: imgten,
  },
  {
    location: "india",
    name: "Gokul P S",
    jobTitle: "Core Blockchain Developer",
    description:
      "A proactive Web3 enthusiast ensuring the security and scalability of our 51.4M proofchains.",
    imageUrl: imgfour,
  },
  {
    location: "india",
    name: "Allen Iype P Cherian",
    jobTitle: "Blockchain Engineer",
    description:
      "A motivated and responsible B tech Graduate, with a strong work ethic.",
    imageUrl: imgfive,
  },
  {
    location: "india",
    name: "Nidhin M.",
    jobTitle: "Lead Engineer",
    description:
      "Developed revolutionary PoP protocol, P2P data transfer and transaction processing functions.",
    imageUrl: imgsix,
  },
  {
    location: "india",
    name: "Arnab Ghose",
    jobTitle: "Senior Blockchain Engineer",
    description:
      "Developed revolutionary PoP protocol, P2P data transfer and transaction processing functions.",
    imageUrl: imgeleven,
  },
  {
    location: "india",
    name: "ASHITA GUPTA",
    jobTitle: "Blockchain Developer",
    description:
      "Enthusiastic blockchain developer who pushes herself every day to excel at work.",
    imageUrl: imgseven,
  },
  {
    location: "india",
    name: "Vaishnav C H",
    jobTitle: "Blockchain Developer",
    description:
      "A very humble and talented Golang developer and mechatronics and blockchain engineer",
    imageUrl: imgeight,
  },
  {
    location: "india",
    name: "Maneesha Panda",
    jobTitle: "Blockchain Engineer",
    description:
      "A highly keen blockchain engineer with a zeal for innovation who brings new ideas to the table.",
    imageUrl: imgnine,
  },
  {
    location: "india",
    name: "Maneesha Panda",
    jobTitle: "Blockchain Engineer",
    description:
      "A highly keen blockchain engineer with a zeal for innovation who brings new ideas to the table.",
    imageUrl: imgnine,
  },
];

const MobileCommunityCard = () => {
  return (
    <>
      <Box backgroundColor={"#101015"}>
        <Container
          maxW={"container.xl"}
          padding={"0 5rem"}
          paddingBottom={"6rem"}
          sx={{
            "@media (max-width: 1024px)": {
              padding: "3rem",
            },
            "@media (max-width: 500px)": {
                padding:'0 1rem',
                paddingBottom:'5rem'
            },
          }}
        >
          <Text
            as={"h2"}
            paddingTop={"3rem"}
            paddingBottom={"3rem"}
            fontWeight={700}
            fontSize={"38px"}
            textAlign={"left"}
            textTransform={"capitalize"}
            color={"#fff"}
            sx={{
              "@media (max-width: 500px)": {
                fontSize: "22px",
                fontWeight:'400',
                marginBottom:'0px',
                paddingBottom:'30px'
              },
            }}
          >
            Rubix Community
          </Text>
            <Swiper   className="team-slider"
              spaceBetween={20}
              slidesPerView={2}
              navigation={true}
              pagination={{ clickable: true }} 
              modules={[ Navigation]} // Enables pagination and navigation modules
              autoplay={{ delay: 3000 }}
              onSlideChange={() => console.log("slide change")}
              onSwiper={(swiper) => console.log(swiper)}
              style={{paddingBottom:'60px',position:'relative'}}
              
            >
              {individuals.map((item) => (
                <SwiperSlide
                  // height={"100vh"}
                  background={"#101015"}
                  backgroundSize={"cover"}
                  backgroundRepeat={"no-repeat"}
                >
                  <Text>
                    <Text
                      position="relative"
                      overflow="hidden"
                      _hover={{
                        "&::before": {
                          content: '""',
                          position: "absolute",
                          top: 0,
                          left: 0,
                          width: "100%",
                          height: "100%",
                          background:
                            "linear-gradient(to bottom, #f8697a8c  0%, #8d54f86e  86%)",
                          borderRadius: "5px",
                        },
                      }}
                    >
                      <Image src={item.imageUrl} />
                    </Text>
                  </Text>
                  <Text
                    color={"#fff"}
                    fontSize={"16px"}
                    marginTop={"15px"}
                    maxWidth={"460px"}
                  >
                    {item.name}
                  </Text>
                  <Text fontSize={"12px"} color={"#DEDEDE"} margin={"4px 0px"}>
                    {item.jobTitle}
                  </Text>
                  <Text fontSize={"11px"} color={"#DEDEDE"} margin={"6px 0px"}>
                    {item.description}
                  </Text>
                  <Text display={"flex"} marginTop={"20px"}>
                    <img
                      src={linkedin}
                      style={{
                        minWidth: "34px",
                        height: "34px",
                        marginBottom: "10px",
                        marginRight: "10px",
                      }}
                    />
                    <img
                      src={games}
                      style={{ minWidth: "34px", height: "34px" }}
                    />
                  </Text>
                </SwiperSlide>
              ))}
            </Swiper>
        </Container>
      </Box>
    </>
  );
};

export default MobileCommunityCard;