rubix/src/components/HomePage/WhitePaper.jsx

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

const SectionContent = {
  heading: `The Rubix White paper`,
  subContent: `Discover the endless potential of how the Rubix protocol can be used.`,
  btnContent: `Click to Download`,
};

const WhitePaper = () => {
  return (
    <Box
      height={"50vh"}
      backgroundImage={`url(${banner})`}
      backgroundSize={"cover"}
      backgroundRepeat={"no-repeat"}
    >
      <Text
        as={"h2"}
        paddingTop={"2rem"}
        paddingBottom={"2rem"}
        fontWeight={700}
        fontSize={"40px"}
        textAlign={"center"}
        textTransform={"capitalize"}
        color={"#fff"}
        sx={{
          "@media (max-width: 1024px)": {},
          "@media (max-width: 600px)": {
            fontSize: "28px",
          },
        }}
      >
        {SectionContent.heading}
      </Text>
      <Container
        maxW="container.sm"
        textAlign={"center"}
        display={"grid"}
        placeContent={"center"}
        height={"30vh"}
        paddingBottom={"3rem"}
      >
        <Text
          color={"#E4E4E4"}
          fontSize={"22px"}
          marginBottom={"2rem"}
          fontFamily={"Poppins"}
        >
          {SectionContent.subContent}
        </Text>
        <Button
          fontSize={"20px"}
          minW={"284px"}
          minH={"60px"}
          fontFamily={"Poppins"}
          backgroundColor={"transparent"}
          border={"1px solid #fff"}
          color={"#fff"}
          fontWeight={"400"}
          margin={"0 auto"}
          _hover={{
            backgroundColor: "transparent",
          }}
        >
          {SectionContent.btnContent}
        </Button>
      </Container>
    </Box>
  );
};

export default WhitePaper;