rubix/src/pages/Terms.jsx

/* eslint-disable no-unused-vars */
import { Avatar, Box, Image, Text } from "@chakra-ui/react";
import { Link } from "react-router-dom";
import { useGetTermsPageQuery } from "../Redux/slice/termsSlice";
import { useEffect } from "react";
import Loader from "../components/Loader/Loader";
const API_URL = import.meta.env.VITE_API_BASE_URL;

const Terms = () => {
  const { data, isLoading } = useGetTermsPageQuery();
  console.log(data?.data);
  const terms = data?.data;

  useEffect(() => {
    window.scrollTo(0, 0);
  }, []);

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

  return (
    <>
      {terms?.map((item) => (
        <>
          <Box
            key={item.id}
            height={"75vh"}
            width={"100%"}
            backgroundImage={`url(${API_URL} /${item.banner_image})`}
            backgroundRepeat={"no-repeat"}
            backgroundSize={"cover"}
            position="relative"
            sx={{
              "@media (max-width: 600px)": {
                height: "400px",
              },
            }}
          >
            <Box
              position="absolute"
              top={0}
              left={0}
              width="100%"
              height="100%"
              backgroundColor="rgba(0, 0, 0, 0.8)"
              display={"flex"}
              justifyContent={"center"}
              alignItems={"center"}
              flexDirection={"column"}
            >
              <Box
                w={"50vw"}
                sx={{
                  "@media (max-width: 600px)": {
                    width: "100vw",
                    padding: "2rem",
                  },
                }}
              >
                <Text
                  textAlign={"center"}
                  className="rubix-fw-700"
                  fontSize={"40px"}
                  fontFamily={"Mona Sans"}
                  color={"#fff"}
                  sx={{
                    "@media (max-width: 600px)": {
                      fontSize: "30px",
                    },
                  }}
                >
                  {item.title}
                </Text>
              </Box>
            </Box>
          </Box>

          <Box
            p={5}
            pb={14}
            backgroundColor={"#000000"}
            display={"flex"}
            justifyContent={"center"}
            flexDirection={"column"}
            alignItems={"center"}
            gap={16}
            w={"100%"}
          >
            <Box
              display={"flex"}
              justifyContent={"center"}
              flexDirection={"column"}
              alignItems={"start"}
              gap={7}
              pt={5}
              width={"85vw"}
              sx={{
                "@media (max-width: 600px)": {
                  width: "100%",
                },
              }}
            >
              {/* ========[ Head-Para ]====== */}
              <Box
                width={"65vw"}
                className="usecases"
                sx={{
                  "@media (max-width: 600px)": {
                    width: "100%",
                  },
                }}
              >
                <Text
                  pb={5}
                  className="rubix-text-small"
                  dangerouslySetInnerHTML={{ __html: item.content }}
                />
              </Box>
            </Box>
          </Box>
        </>
      ))}
    </>
  );
};

export default Terms;