rubix/src/components/Community/CommunityCard.jsx

import {
  Box,
  Card,
  CardBody,
  CardHeader,
  Container,
  Heading,
  Image,
  SimpleGrid,
  Text,
} from "@chakra-ui/react";
import React from "react";
import CommCard from "../Card/CommCard";
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";


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 CommunityCard = () => {
  return (
    <>
      <Box backgroundColor={"#101015"}>
        <Container
          maxW={"container.xl"}
          padding={"0 5rem"}
          paddingBottom={"5rem"}
          sx={{
            "@media (max-width: 1024px)": {
              padding: "3rem",
            },
            "@media (max-width: 435px)": {},
          }}
        >
          <Text
            as={"h2"}
            paddingTop={"3rem"}
            paddingBottom={"2rem"}
            fontWeight={700}
            fontSize={"40px"}
            textAlign={"left"}
            textTransform={"capitalize"}
            color={"#fff"}
            sx={{
              "@media (max-width: 435px)": {
                fontSize: "35px",
              },
              "@media (max-width: 375px)": {
                fontSize: "28px",
                textAlign: "center",
              },
            }}
          >
            Rubix Community
          </Text>
          <SimpleGrid
            spacing={10}
            templateColumns="repeat(auto-fill, minmax(250px, 1fr))"
          >
            {individuals.map((item) => (
              <CommCard
                key={item.id}
                location={item.location}
                name={item.name}
                jobTitle={item.jobTitle}
                description={item.description}
                imageUrl={item.imageUrl}
              />
            ))}
          </SimpleGrid>
        </Container>
      </Box>
    </>
  );
};

export default CommunityCard;