rubix/src/components/BuildPage/BuildBanner.jsx

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

const BannerContent = [
  {
    heading1: `Build Next-Gen dApps`,
    heading2: `with Rubix`,
  },
  {
    subheading: `Whether you are developing a Web3 app or expanding your Web2 app to incorporate Web3 features, 
    building with Rubix is simple, fast, and easy.`,
  },
  {
    btn: `Build Now`,
  },
];

const BuildBanner = () => {
  return (
    <Box
      height={"100vh"}
      backgroundImage={`url(${banner})`}
      backgroundRepeat={"no-repeat"}
      backgroundSize={"cover"}
      display={"grid"}
      placeContent={"center"}
      sx={{
        "@media (max-width: 1024px)": {
          height: "70vh",
        },
        "@media (max-width: 600px)": {
          height: "85vh",
        },
      }}
    >
      <Container
        maxW="container.xl"
        textAlign={"left"}
        marginTop={"2rem"}
        paddingLeft={"4rem"}
        sx={{
          "@media (max-width: 435px)": {
            paddingLeft: "2rem",
          },
        }}
      >
        <Box
          width={"90%"}
          sx={{
            "@media (max-width: 435px)": {
              width: "100%",
            },
          }}
        >
          <Text
            as={"h2"}
            fontWeight={700}
            fontSize={"60px"}
            textTransform={"upperCase"}
            color={"#DE858E"}
            sx={{
              "@media (max-width: 996px)": {
                fontSize: "35px",
              },
              "@media (max-width: 600px)": {
                fontSize: "28px",
                marginBottom: "2rem",
              },
              "@media (max-width: 412px)": {
                fontSize: "24px",
                marginTop: "2rem",
              },
            }}
          >
            {BannerContent[0].heading1} <br />
            <span
              style={{
                color: "#fff",
                fontWeight: "600",
              }}
            >
              {BannerContent[0].heading2}
            </span>
          </Text>
          <Box marginTop={"1.5rem"} width={"80%"}>
            <Text
              color={"#fff"}
              fontSize={"25px"}
              fontWeight={"400"}
              lineHeight={"37.5px"}
              fontFamily={"Poppins"}
              sx={{
                "@media (max-width: 1024px)": {
                  fontSize: "22px",
                },
                "@media (max-width: 600px)": {
                  fontSize: "17px",
                },
              }}
            >
              {BannerContent[1].subheading}
            </Text>
          </Box>
        </Box>
      </Container>
      <Container
        maxW="container.xl"
        textAlign={"left"}
        marginTop={"3rem"}
        paddingLeft={"4rem"}
        sx={{
          "@media (max-width: 435px)": {
            paddingLeft: "2rem",
          },
          "@media (max-width: 375px)": {
            marginTop: "1rem",
          },
        }}
      >
        <Button
          position={"relative"}
          backgroundColor={"transparent"}
          cursor={"pointer"}
          transition="0.3s ease-in-out"
          color={"#fff"}
          width={"227px"}
          height={"60px"}
          fontFamily={"Poppins"}
          fontWeight={"400"}
          border={"1px solid white"}
          borderRadius={"10px"}
          fontSize={"20px"}
          zIndex={"1"}
          overflow={"hidden"}
          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",
            },
          }}
          _hover={{
            color: "#000",
            border: "none",
            zIndex: 1,
          }}
        >
          {BannerContent[2].btn}
        </Button>
      </Container>
    </Box>
  );
};

export default BuildBanner;