rubix/src/components/MobileComponent/MobileCommunityCard.jsx

/* eslint-disable no-unused-vars */
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:
      "Expert at balancing risk-taking with sound business judgment in decision-making.",
    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:
      "Master at handling complex tasks and gives 100% effort all the time.",
    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: "0rem",
            },
          }}
        >
          <Text
            as={"h2"}
            paddingTop={"3rem"}
            paddingBottom={"3rem"}
            fontWeight={700}
            fontSize={"38px"}
            textAlign={"center"}
            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: "8rem", position: "relative" }}
          >
            {individuals.map((item, i) => (
              <SwiperSlide
                // height={"100vh"}
                background={"#101015"}
                backgroundSize={"cover"}
                backgroundRepeat={"no-repeat"}
                key={i}
              >
                <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;