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 imgtweleve from "../../assets/images/kiran.jpg";
import { Pagination, Navigation } from "swiper/modules";
import { Link } from "react-router-dom";

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,
    link: `https://www.linkedin.com/in/kc-reddy-767a3463/`,
  },
  {
    name: "Vivek Tikoo",
    jobTitle: "Co-Founder & CEO| ChainX | RubiX",
    description:
      "Thought Leader in Web3 enabled Digital transformation with passion for execution",
    imageUrl: imgtweleve,
    link: `https://www.linkedin.com/in/vivektikoo/`,
  },
  {
    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,
    link: `https://www.linkedin.com/in/ravi-srinivasa-murty-7a46041/`,
  },
  {
    location: "india",
    name: "Hari Krishnan",
    jobTitle: "Head of Technology",
    description:
      "Deeply passionate about Cryptography, Zero Knowledge Proofs, and Number Theory.",
    imageUrl: imgthree,
    link: `https://www.linkedin.com/in/hari-krishnan-1691b6120/`,
  },
  {
    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,
    link: `https://www.linkedin.com/in/eser-torun-cfa?utm_source=share&utm_campaign=share_via&utm_content=profile&utm_medium=ios_app`,
  },
  {
    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,
    link: `https://www.linkedin.com/in/gokul-p-s-3a8445130/`,
  },
  {
    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,
    link: `https://www.linkedin.com/in/allen-iype-p-cherian/`,
  },
  {
    location: "india",
    name: "Nidhin M.",
    jobTitle: "Lead Engineer",
    description:
      "Developed revolutionary PoP protocol, P2P data transfer and transaction processing functions.",
    imageUrl: imgsix,
    link: `https://www.linkedin.com/in/nidhinmahesh/`,
  },
  {
    location: "india",
    name: "Arnab Ghose",
    jobTitle: "Senior Blockchain Engineer",
    description:
      "Master at handling complex tasks and gives 100% effort all the time.",
    imageUrl: imgeleven,
    link: `https://www.linkedin.com/in/arnabghose997?utm_source=share&utm_campaign=share_via&utm_content=profile&utm_medium=ios_app`,
  },
  {
    location: "india",
    name: "Ashita Gupta",
    jobTitle: "Blockchain Developer",
    description:
      "Enthusiastic blockchain developer who pushes herself every day to excel at work.",
    imageUrl: imgseven,
    link: `https://www.linkedin.com/in/ashita-gupta-5a0827167/`,
  },
  {
    location: "india",
    name: "Vaishnav C H",
    jobTitle: "Blockchain Developer",
    description:
      "A very humble and talented Golang developer and mechatronics and blockchain engineer",
    imageUrl: imgeight,
    link: `https://www.linkedin.com/in/vaishnav-c-h-134053221/`,
  },
  {
    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,
    link: `https://www.linkedin.com/in/maneesha-panda/`,
  },
];

const MobileCommunityCard = () => {
  const imgHeight = {
    minWidth: `162px`,
    height: "168px",
    borderRadius: "10px",
    objectFit: "cover",
  };
  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"}
            id="rubix-community"
            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}
                      sx={{
                        "@media (max-width: 820px)": {
                          height: "auto",
                          minW: "auto",
                        },
                        "@media (max-width: 600px)": {
                          style: { imgHeight },
                        },
                      }}
                    />
                  </Text>
                </Text>
                <Text
                  color={"#fff"}
                  fontSize={"16px"}
                  marginTop={"15px"}
                  maxWidth={"460px"}
                >
                  {item.name}
                </Text>
                <Text
                  fontSize={"12px"}
                  color={"#DEDEDE"}
                  margin={"4px 0px"}
                  minHeight={"25px"}
                >
                  {item.jobTitle}
                </Text>
                <Text
                  fontSize={"11px"}
                  color={"#DEDEDE"}
                  margin={"6px 0px"}
                  minHeight={"72px"}
                >
                  {item.description}
                </Text>
                <Text display={"flex"} marginTop={"20px"}>
                  <Link to={item.link}>
                    <img
                      src={linkedin}
                      style={{
                        minWidth: "34px",
                        height: "34px",
                        marginBottom: "10px",
                        marginRight: "10px",
                      }}
                    />
                  </Link>
                  {/* <img
                    src={games}
                    style={{ minWidth: "34px", height: "34px" }}
                  /> */}
                </Text>
              </SwiperSlide>
            ))}
          </Swiper>
        </Container>
      </Box>
    </>
  );
};

export default MobileCommunityCard;