rubix/src/components/LearnPage/LearnBanner.jsx

/* eslint-disable no-unused-vars */
/* eslint-disable react/prop-types */
import { Box, Button, Container, Text } from "@chakra-ui/react";
import banner from "../../assets/images/learnBanner.webp";
import { Link } from "react-router-dom";
import Loader from "../Loader/Loader";
import { useGetLearnPageQuery } from "../../Redux/slice/learPageSlice";
const API_URL = import.meta.env.VITE_API_BASE_URL;

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 = () => {
  const { data, isLoading, error } = useGetLearnPageQuery();
  const learnData = data?.data?.data;

  const highlightFirstPart = (heading) => {
    const words = heading.split(" ");
    const firstThreeWords = words.slice(0, 3).join(" ");
    const rest = words.slice(3).join(" ");
    return `<span style="color: rgb(222, 133, 142);">${firstThreeWords}</span> ${rest}`;
  };

  if (isLoading) {
    return (
      <div>
        <Loader />
      </div>
    );
  }

  if (error) {
    console.log(error.message);
  }
  return (
    <>
      {learnData?.map((item) => (
        <Box
          key={item.id}
          height={"100vh"}
          backgroundImage={`url(${API_URL}/${item.banner_image})`}
          backgroundRepeat={"no-repeat"}
          loading="lazy"
          backgroundSize={"cover"}
          display={"grid"}
          alignContent={"center"}
          justifyContent={"start"}
          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={"78%"}
              sx={{
                "@media (max-width: 435px)": {
                  width: "100%",
                },
              }}
            >
              <Text
                as={"h2"}
                fontWeight={700}
                fontSize={"52px"}
                textTransform={"Capitalize"}
                // color={"#DE858E"}
                color={"#fff"}
                lineHeight={"62px"}
                letterSpacing={"1px"}
                sx={{
                  "@media (max-width: 996px)": {
                    fontSize: "46px",
                  },
                  "@media (max-width: 600px)": {
                    fontSize: "40px",
                    marginBottom: "0rem",
                    lineHeight: "54px",
                  },
                }}
                dangerouslySetInnerHTML={{
                  __html: highlightFirstPart(item.Heading),
                }}
              />
              <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: 500px)": {
                      fontSize: "16px",
                      lineHeight: "28px",
                    },
                  }}
                >
                  {item.sub_heading}
                </Text>
              </Box>
              <Link
                to="https://learn.rubix.net/"
                target="_blank"
                rel="noopener noreferrer"
              >
                <Button
                  position={"relative"}
                  backgroundColor={"transparent"}
                  cursor={"pointer"}
                  transition="0.3s ease-in-out"
                  color={"#fff"}
                  width={"auto"}
                  marginTop={"2rem"}
                  height={"56px"}
                  fontFamily={"Poppins"}
                  fontWeight={"400"}
                  border={"1px solid white"}
                  borderRadius={"10px"}
                  fontSize={"20px"}
                  zIndex={"1"}
                  overflow={"hidden"}
                  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>
              </Link>
            </Box>
          </Container>
        </Box>
      ))}
    </>
  );
};

export default LearnBanner;