rubix/src/components/UseCase/UseCase.jsx

/* eslint-disable react/jsx-key */
/* eslint-disable react/prop-types */
/* eslint-disable no-unused-vars */
// eslint-disable-next-line no-unused-vars
import React from "react";
import { Box, Text } from "@chakra-ui/react";

// eslint-disable-next-line react/prop-types
const UseCase = ({ useCase, bannerImage, bannerHeading, bannerSubHeading }) => {
  return (
    <div>
      <Box
        height={"75vh"}
        width={"100%"}
        backgroundImage={`url(${bannerImage})`}
        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",
                },
              }}
            >
              {bannerHeading}
            </Text>
            <Text
              textAlign={"center"}
              className="rubix-fw-500"
              fontSize={"20px"}
              fontFamily={"Poppins"}
              color={"#fff"}
              sx={{
                "@media (max-width: 600px)": {
                  fontSize: "16px",
                },
              }}
              
            >
              {bannerSubHeading}
            </Text>
          </Box>
        </Box>
      </Box>

      <Box
        p={5}
        pb={14}
        backgroundColor={"#000000"}
        display={"flex"}
        justifyContent={"center"}
        flexDirection={"column"}
        alignItems={"center"}
        gap={16}
        w={"100%"}
      >
        {useCase.map(
          ({ useCaseHeading, useCaseSubHeading, useCaseDetails }) => (
            <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"}
              sx={{
                "@media (max-width: 600px)": {
                  width: "100%",
                },
              }}
              >
                <Text
                  style={{ marginBottom: 6 }}
                  className="rubix-fw-500"
                  fontSize="3xl"
                  textColor={"#ffffff"}
                  sx={{
                    "@media (max-width: 600px)": {
                      fontSize: "22px",
                    },
                  }}
                >
                  {useCaseHeading}
                </Text>
                <Text textColor={"#ffffff"} fontSize="xl" 
                sx={{
                  "@media (max-width: 600px)": {
                    fontSize: "14px",
                  },
                }}
                >
                  {useCaseSubHeading}
                </Text>
              </Box>

              {useCaseDetails.map(({ title, description }, index) => (
                <Box width={"75vw"}
                sx={{
                  "@media (max-width: 600px)": {
                    width: "100%",
                  },
                }}
                >
                  <Text
                    style={{ marginBottom: 6 }}
                    className="rubix-fw-500"
                    fontSize="2xl"
                    textColor={"#ffffff"}
                    sx={{
                      "@media (max-width: 600px)": {
                        fontSize: "16px",
                      },
                    }}
                  >
                    {title}
                  </Text>
                  <Text textColor={"#ffffff"} fontSize="lg"
                  sx={{
                    "@media (max-width: 600px)": {
                      fontSize: "14px",
                    },
                  }}
                  >
                    {description}
                  </Text>
                </Box>
              ))}
            </Box>
          )
        )}
      </Box>
    </div>
  );
};

export default UseCase;