rubix/src/components/Community/Connect.jsx

/* eslint-disable no-undef */
/* eslint-disable no-unused-vars */
import {
  Box,
  Button,
  Card,
  CardBody,
  CardFooter,
  CardHeader,
  Container,
  Heading,
  Image,
  SimpleGrid,
  Text,
} from "@chakra-ui/react";
import banner from "../../assets/images/Statsbanner.png";
import tel from "../../assets/images/tel.png";
import red from "../../assets/images/red.png";
import git from "../../assets/images/git.png";
import twitch from "../../assets/images/twitch.png";
import twit from "../../assets/images/twit.png";
import face from "../../assets/images/face.png";
import lin from "../../assets/images/lin.png";
import { Link } from "react-router-dom";

const items = [
  {
    id: 1,
    head: `Innovator Dialogue`,
    logo1: tel,
    logo2: red,
    social1: `Telegram`,
    social2: `Reddit`,
  },
  {
    id: 2,
    head: `Developer Resources`,
    logo1: git,
    logo2: twitch,
    social1: `GitHub`,
    social2: `Discord`,
  },
  {
    id: 3,
    head: `Social Media`,
    logo1: twit,
    logo2: face,
    logo3: lin,
    social1: `Twitter`,
    social2: `Facebook`,
    social3: `LinkedIn`,
  },
];

const Connect = () => {
  return (
    <Box
      //   height={"80vh"}
      //   backgroundImage={`url(${banner})`}
      //   backgroundSize={"cover"}
      //   backgroundRepeat={"no-repeat"}
      backgroundColor={"#101015"}
      backgroundSize={"cover"}
      backgroundRepeat={"no-repeat"}
    >
      <Container
         maxW={"container.xl"}
         padding={"0 5rem"}
         paddingBottom={"2rem"}
         sx={{
           "@media (max-width: 1024px)": {
             padding: "3rem",
           },
           "@media (max-width: 435px)": {},
         }}
      >
        <Text
          className="rubix-text-title"
          fontFamily={"Mona Sans"}
          fontWeight={"700"}
          //   fontSize={"40px"}
          color={"#fff"}
          marginBottom={"35px"}
        >
          Connect with Rubix community
        </Text>
          <SimpleGrid
            spacing={4}
            templateColumns="repeat(auto-fill, minmax(300px, 1fr))"
          >
            {items.map((item) => (
              <>
                <Box
                  padding={"1px"}
                  borderRadius={"10px"}
                  key={item.id}
                  _hover={{
                    backgroundImage:
                      "-webkit-gradient(linear, left bottom, left top, color-stop(0.33, #8D54F8), color-stop(0.67, #F8697A))",
                  }}
                >
                  <Card
                    background={"#000"}
                    borderRadius={"10px"}
                    minH={"270px"}
                    border={"1px solid #454545"}
                  >
                    <CardHeader
                      textAlign={"center"}
                      paddingBottom={"0px"}
                      marginTop={"2rem"}
                    >
                      {/* <Image src={item.img} /> */}
                      <Heading
                        size="md"
                        className="rubix-text-large"
                        fontWeight={"500"}
                      >
                        {item.head}
                      </Heading>
                    </CardHeader>
                    <CardBody
                      padding={"0px"}
                      display={"flex"}
                      alignItems={"center"}
                      justifyContent={"center"}
                      gap={"2.5rem"}
                    >
                      <Link placeContent={"center"}>
                        <Box>
                          <Image src={item.logo1} margin={"0 auto 20px auto"} />
                        </Box>
                        <Text className="rubix-text-small" fontWeight={"400"}>
                          {item.social1}
                        </Text>
                      </Link>
                      <Link placeContent={"center"}>
                        <Image src={item.logo2} margin={"0 auto 20px auto"} />
                        <Text className="rubix-text-small" fontWeight={"400"}>
                          {item.social2}
                        </Text>
                      </Link>
                      {item.social3 ? (
                        <Link display={"grid"} placeContent={"center"}>
                          <Image src={item.logo3} margin={"0 auto 20px auto"} />
                          <Text className="rubix-text-small" fontWeight={"400"}>
                            {item.social3}
                          </Text>
                        </Link>
                      ) : (
                        ""
                      )}
                    </CardBody>
                  </Card>
                </Box>
              </>
            ))}
          </SimpleGrid>
      </Container>
    </Box>
  );
};

export default Connect;