rubix/src/components/BuildPage/Tools.jsx

/* 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 read from "../../assets/images/read.png";
import support from "../../assets/images/support.png";
import access from "../../assets/images/access.png";
import wallet from "../../assets/images/wallet.png";
import arrow from "../../assets/images/toolArrow.png";

const items = [
  {
    id: 1,
    img: read,
    title: "Read our </br> Resources",
  },
  {
    id: 2,
    img: support,
    title: "Reach Out To Us </br> For Support",
  },
  {
    id: 3,
    img: access,
    title: "Access The </br> Developer Portal",
  },
  {
    id: 4,
    img: wallet,
    title: "Wallet",
  },
];

const Tools = () => {
  return (
    <Box
      //   height={"80vh"}
      backgroundImage={`url(${banner})`}
      backgroundSize={"cover"}
      backgroundRepeat={"no-repeat"}
      padding={"5rem"}
      sx={{
        "@media (max-width: 1024px)": {
          height: "auto",
        },
        "@media (max-width: 600px)": {
          fontSize: "28px",
        },
      }}
    >
      <Container maxW="container.xl">
        <Text
          fontFamily={"Mona Sans"}
          fontWeight={"600"}
          fontSize={"38px"}
          color={"#fff"}
        >
          Tools And Resources To Help You Succeed
        </Text>
      </Container>
      <Container
        maxW="container.xl"
        justifyContent={"center"}
        marginTop={"3rem"}
        textAlign={"center"}
      >
        <SimpleGrid
          spacing={4}
          templateColumns="repeat(auto-fill, minmax(250px, 1fr))"
        >
          {items.map((item) => (
            <>
              <Box
                backgroundImage={
                  "-webkit-gradient(linear, left bottom, left top, color-stop(0.33, #8d54f866), color-stop(0.67, #f8697a9e));"
                }
                padding={"1px"}
                borderRadius={"10px"}
                key={item.id}
              >
                <Card
                  background={"#131313"}
                  borderRadius={"10px"}
                  height={"100%"}
                >
                  <CardHeader display={"flex"} justifyContent={"center"} paddingBottom={"15px"}>
                    <Image height={"70px"} src={item.img} />
                    {/* <Heading size="md"></Heading> */}
                  </CardHeader>
                  <CardBody
                    padding={"0px"}
                    display={"grid"}
                    placeContent={"center"}
                  >
                    <Text
                      color={"#fff"}
                      fontFamily={"Poppins"}
                      fontSize={"18px"}
                      textAlign={"center"}
                      fontWeight={"400"}
                      dangerouslySetInnerHTML={{ __html: item.title }}
                    />
                  </CardBody>
                  <CardFooter justifyContent={"center"} cursor={"pointer"} paddingTop={"15px"}>
                    <Image
                      src={arrow}
                      transition="all .5s"
                      _hover={{
                        transform: "rotate(45deg)",
                      }}
                    />
                  </CardFooter>
                </Card>
              </Box>
            </>
          ))}
        </SimpleGrid>
        <Button
          position={"relative"}
          backgroundColor={"transparent"}
          cursor={"pointer"}
          transition="0.3s ease-in"
          color={"#fff"}
          width={"216px"}
          height={"54px"}
          fontFamily={"Poppins"}
          fontWeight={"400"}
          border={"1px solid white"}
          borderRadius={"10px"}
          fontSize={"18px"}
          zIndex={"1"}
          overflow={"hidden"}
          marginTop={"4rem"}
          textAlign={"center"}
          sx={{
            "::before": {
              content: '""',
              position: "absolute",
              top: "50%",
              left: "50%",
              transform: "translate(-50%, -50%)",
              width: "65px",
              height: "65px",
              borderRadius: "50%",
              transition: "0.35s ease-in",
              zIndex: -1,
              bgGradient:
                "radial-gradient(circle, #ffffff, #eee2f2, #e7c3dc, #e5a3ba, #de858e)",
              opacity: "0",
            },
            "&:hover::before": {
              width: "100%",
              height: "120%",
              borderRadius: "0px",
              opacity: "1",
            },
          }}
          _hover={{
            color: "#000",
            border: "none",
            zIndex: 1,
          }}
        >
          Learn Now
        </Button>
      </Container>
    </Box>
  );
};

export default Tools;