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, { useEffect } from "react";
import { Box, Button, Image, Text } from "@chakra-ui/react";
import pdf from "../../assets/pdf/Rubix.pdf";
import cardimg from "../../assets/images/CardImg.png";

// eslint-disable-next-line react/prop-types
const UseCase = ({ useCase, bannerImage, bannerHeading, bannerSubHeading }) => {
  useEffect(() => {
    window.scrollTo(0, 0);
  }, []);
  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,
            documents,
          }) => (
            <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 }) => (
                <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>
              ))}

              {documents?.map((item) => (
                <Box marginBottom={"2rem"} key={item.id}>
                  <Box
                    width={"420px"}
                    background={"#404040"}
                    borderRadius={"10px"}
                    minHeight={"340px"}
                    padding={"15px"}
                    sx={{
                      "@media (max-width: 600px)": {
                        width: "100%",
                        minHeight: "0",
                      },
                    }}
                  >
                    <Image src={cardimg} />
                    <Box padding={"1rem"}>
                      <Text
                        color={"#fff"}
                        fontSize={"25px"}
                        marginBottom={"20px"}
                        minHeight={"40px"}
                        maxWidth={"420px"}
                      >
                        {item.title}
                      </Text>
                      <Box
                        display={"flex"}
                        alignItems={"center"}
                        _hover={
                          {
                            //   flexDirection: "column-reverse",
                          }
                        }
                      >
                        <Box
                          position={"relative"}
                          width={"10%"}
                          _before={{
                            content: '""',
                            width: "100%",
                            position: "absolute",
                            left: "0",
                            borderBottom: "2px solid #DE858E",
                            borderRadius: "5px",
                            zIndex: "2",
                          }}
                        ></Box>
                        <a download="RubiX_WhitePaper.pdf" href={pdf}>
                          <Button
                            position={"relative"}
                            backgroundColor={"transparent"}
                            color={"#fff"}
                            fontFamily={"Poppins"}
                            fontWeight={"400"}
                            _hover={{
                              backgroundColor: "transparent",
                            }}
                          >
                            View Document
                          </Button>
                        </a>
                      </Box>
                    </Box>
                  </Box>
                </Box>
              ))}
            </Box>
          )
        )}
      </Box>
    </div>
  );
};

export default UseCase;