rubix/src/components/Community/LearnMore.jsx

import { Box, Button, Container, Text } from "@chakra-ui/react";
import banner from "../../assets/images/moreBanner.png";

const SectionContent = {
  heading: `Connect with us to learn more!`,
  subContent: `With countless applications, there's a place for everyone in the Rubix community.`,
  btnContent: `Contact Us`,
  btnBild: "Build with Rubix",
};

const LearnMore = () => {
  return (
    <Box
      height={"auto"}
      backgroundImage={`url(${banner})`}
      backgroundSize={"cover"}
      backgroundRepeat={"no-repeat"}
      sx={{
        "@media (max-width: 1024px)": {
          height: "auto",
        },
        "@media (max-width: 600px)": {
          fontSize: "28px",
        },
      }}
    >
      <Text
        as={"h2"}
        paddingTop={"3rem"}
        paddingBottom={"1rem"}
        fontWeight={700}
        fontSize={"38px"}
        textAlign={"center"}
        textTransform={"capitalize"}
        color={"#fff"}
        sx={{
          "@media (max-width: 1024px)": {},
          "@media (max-width: 500px)": {
            fontSize: "20px",
            fontWeight: "500",
            marginBottom: "5px",
          },
        }}
      >
        {SectionContent.heading}
      </Text>
      <Container
        maxW="container.md"
        textAlign={"center"}
        display={"grid"}
        placeContent={"center"}
        // height={"30vh"}
        paddingBottom={"4rem"}
      >
        <Text
          color={"#E4E4E4"}
          fontSize={"22px"}
          marginBottom={"2rem"}
          fontFamily={"Poppins"}
          sx={{
            "@media (max-width: 500px)": {
              fontSize: "14px",
              fontWeight: "100",
              // marginBottom:'5px',
              marginBottom: "30px",
            },
          }}
        >
          {SectionContent.subContent}
        </Text>
        <Text>
          <Button
            fontSize={"20px"}
            //   minW={"284px"}
            height={"54px"}
            fontFamily={"Poppins"}
            backgroundColor={"transparent"}
            border={"1px solid #fff"}
            color={"#fff"}
            fontWeight={"400"}
            margin={"0 10px"}
            // transition="0.3s ease-in-out"
            zIndex={"1"}
            overflow={"hidden"}
            padding={"0 3rem"}
            sx={{
              "::before": {
                content: '""',
                position: "absolute",
                top: "50%",
                left: "50%",
                transform: "translate(-50%, -50%)",
                width: "65px",
                height: "65px",
                borderRadius: "50%",
                transition: "0.35s linear",
                zIndex: -1,
                bgGradient:
                  "radial-gradient(circle, #ffffff, #eee2f2, #e7c3dc, #e5a3ba, #de858e)",
                opacity: "0",
              },
              "&:hover::before": {
                width: "100%",
                height: "120%",
                borderRadius: "0px",
                opacity: "1",
              },
              "@media (max-width: 500px)": {
                padding: "5px 15px",
                height: "40px",
                fontSize: "14px",
                margin: "0 7px",
                bgGradient:
                  "radial-gradient(circle, #ffffff, #eee2f2, #e7c3dc, #e5a3ba, #de858e)",
                color: "#000",
                fontWeight: "600",
              },
            }}
            _hover={{
              color: "#000",
              border: "1px solid white",
              zIndex: 1,
            }}
          >
            {SectionContent.btnBild}
          </Button>
          <Button
            fontSize={"20px"}
            //   minW={"284px"}
            height={"54px"}
            fontFamily={"Poppins"}
            backgroundColor={"transparent"}
            border={"1px solid #fff"}
            color={"#fff"}
            fontWeight={"400"}
            margin={"0 10px"}
            // transition="0.3s ease-in-out"
            zIndex={"1"}
            overflow={"hidden"}
            padding={"0 3rem"}
            sx={{
              "::before": {
                content: '""',
                position: "absolute",
                top: "50%",
                left: "50%",
                transform: "translate(-50%, -50%)",
                width: "65px",
                height: "65px",
                borderRadius: "50%",
                transition: "0.35s linear",
                zIndex: -1,
                bgGradient:
                  "radial-gradient(circle, #ffffff, #eee2f2, #e7c3dc, #e5a3ba, #de858e)",
                opacity: "0",
              },
              "&:hover::before": {
                width: "100%",
                height: "120%",
                borderRadius: "0px",
                opacity: "1",
              },
              "@media (max-width: 500px)": {
                padding: "5px 15px",
                height: "40px",
                fontSize: "14px",
                margin: "0 7px",
                bgGradient:
                  "radial-gradient(circle, #ffffff, #eee2f2, #e7c3dc, #e5a3ba, #de858e)",
                color: "#000",
                fontWeight: "600",
              },
            }}
            _hover={{
              color: "#000",
              border: "1px solid white",
              zIndex: 1,
            }}
          >
            {SectionContent.btnContent}
          </Button>
        </Text>
      </Container>
    </Box>
  );
};

export default LearnMore;