rubix/src/components/Community/CommunityBanner.jsx

/* eslint-disable no-unused-vars */
/* eslint-disable react/prop-types */
/* eslint-disable react/no-unknown-property */
import { Box, Button, Container, Text } from "@chakra-ui/react";
import banner from "../../assets/images/communityBanner.webp";
import { useGetCommunitiesBannerQuery } from "../../Redux/slice/communityBannerSlice";

const BannerContent = [
  {
    heading1: `Welcome To The`,
    heading2: `Rubix Community`,
  },
  {
    subheading: `This is a space for enterprises, dApp developers, stakeholders 
    and blockchain advocates to aggregate resources and ideas to make a difference
     through our green blockchain technology.`,
  },
  {
    btn: `Explore our community`,
  },
];

const CommunityBanner = ({ onClick }) => {
  const { data } = useGetCommunitiesBannerQuery();
  const content = data?.data.rows;
  const filteredContent = content?.filter((item) => item.status === true);
  console.log(filteredContent);

  return (
    <>
      {filteredContent?.map((item) => (
        <Box
          key={item.id}
          height={"100vh"}
          backgroundImage={`url(https://rubix.betadelivery.com/${item.banner_image})`}
          backgroundRepeat={"no-repeat"}
          backgroundSize={"cover"}
          display={"grid"}
          alignContent={"center"}
          justifyContent={"left"}
          sx={{
            "@media (max-width: 1024px)": {
              height: "70vh",
            },
            "@media (max-width: 600px)": {
              height: "85vh",
            },
          }}
        >
          <Container
            alignItems={"center"}
            display={"flex"}
            height={"100vh"}
            alignContent={"center"}
            paddingTop={"10%"}
            maxW="container.xl"
            textAlign={"left"}
            marginTop={"2rem"}
            paddingLeft={"6.5rem"}
            sx={{
              "@media (max-width: 1024px)": {
                paddingLeft: "2.5rem", // Correctly target paddingLeft instead of padding
              },
              "@media (max-width: 500px)": {
                paddingLeft: "1rem", // Correctly target paddingLeft instead of padding
              },
            }}
          >
            <Box
              width={"100%"}
              sx={{
                "@media (max-width: 500px)": {
                  width: "100%",
                },
              }}
            >
              <Text
                as={"h2"}
                fontWeight={700}
                fontSize={"52px"}
                // textTransform={"upperCase"}
                color={"#DE858E"}
                lineHeight={"62px"}
                letterSpacing={"1px"}
                width={"65%"}
                sx={{
                  "@media (max-width: 996px)": {
                    fontSize: "46px",
                  },
                  "@media (max-width: 600px)": {
                    fontSize: "40px",
                    marginBottom: "0rem",
                    lineHeight: "54px",
                    width: "100%",
                  },
                }}
              >
                <span
                  style={{
                    color: "rgb(222, 133, 142)",
                  }}
                >
                  {item.Heading}
                </span>
              </Text>
              <Box
                marginTop={"1.5rem"}
                width={"65%"}
                sx={{
                  "@media (max-width: 500px)": {
                    width: "100%",
                  },
                }}
              >
                <Text
                  color={"#fff"}
                  fontSize={"20px"}
                  fontWeight={"400"}
                  lineHeight={"37.5px"}
                  fontFamily={"Poppins"}
                  textTransform={"capitalize"}
                  sx={{
                    "@media (max-width: 1024px)": {
                      fontSize: "22px",
                    },
                    "@media (max-width: 500px)": {
                      fontSize: "16px",
                      lineHeight: "28px",
                    },
                  }}
                >
                  {item.sub_heading}
                </Text>
              </Box>
              <Button
                onClick={onClick}
                position={"relative"}
                backgroundColor={"transparent"}
                cursor={"pointer"}
                transition="0.3s ease-in-out"
                color={"#fff"}
                // width={"280px"}
                height={"54px"}
                fontFamily={"Poppins"}
                fontWeight={"400"}
                border={"1px solid white"}
                borderRadius={"10px"}
                fontSize={"18px"}
                zIndex={"1"}
                overflow={"hidden"}
                marginTop={"2rem"}
                paddingInline={"4rem"}
                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)": {
                    fontSize: "14px",
                    width: "230px",
                    height: "44px",
                    marginTop: "2rem",
                    bgGradient:
                      "radial-gradient(circle, #ffffff, #eee2f2, #e7c3dc, #e5a3ba, #de858e)",
                    color: "#000",
                    fontWeight: "600",
                  },
                }}
                _hover={{
                  color: "#000",
                  border: "1px solid white",
                  zIndex: 1,
                }}
              >
                {item.CTO_button_title}
              </Button>
            </Box>
          </Container>
        </Box>
      ))}
    </>
  );
};

export default CommunityBanner;