rubix/src/components/LearnPage/LearnBanner.jsx

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

const BannerContent = [
  {
    head:'Powerful',
    heading1: ` blockchain tools`,
    heading2: `for developers`,
  },
  {
    subheading: `Rubix allows developers to build on a fast, secure, 
    and scalable chain that has a unique approach to data sharing, 
    objects, and energy efficiency, so developers have a license to be creative.`,
  },
  {
    btn: `Learn Now`,
  },
];

const LearnBanner = () => {
  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
        alignItems={"center"}
        display={"flex"}
        height={"100vh"}
        alignContent={"center"}
        paddingTop={"10%"}
        maxW="container.xl"
        textAlign={"left"}
        marginTop={"2rem"}
        paddingLeft={"3.5rem"}
        sx={{
          "@media (max-width: 435px)": {
            paddingLeft: "2rem",
          },
        }}
      >
        <Box
          width={"90%"}
          sx={{
            "@media (max-width: 435px)": {
              width: "100%",
            },
          }}
        >   
           
          <Text
            as={"h2"}
            fontWeight={700}
            fontSize={"52px"}
            textTransform={"Capitalize"}
            color={"#DE858E"}
            lineHeight={"62px"}
            letterSpacing={"1px"}
            sx={{
              "@media (max-width: 996px)": {
                fontSize: "35px",
              },
              "@media (max-width: 600px)": {
                fontSize: "28px",
                marginBottom: "2rem",
              },
              "@media (max-width: 412px)": {
                fontSize: "24px",
                marginTop: "2rem",
              },
            }}
          >
            <span
              style={{
                color: "#fff",
              }}
            >{BannerContent[0].head}</span>
            {BannerContent[0].heading1} <br />
            <span
              style={{
                color: "#fff",
              }}
            >
              {BannerContent[0].heading2}
            </span>
          </Text>
          <Box marginTop={"10px"} width={"80%"}>
            <Text
              color={"#fff"}
              fontSize={"20px"}
              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>
          <Button
            position={"relative"}
            backgroundColor={"transparent"}
            cursor={"pointer"}
            transition="0.3s ease-in-out"
            color={"#fff"}
            width={"216px"}
            marginTop={"2rem"}
            height={"56px"}
            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>
        </Box>
      </Container>
    </Box>
  );
};

export default LearnBanner;