rubix/src/components/ResourcesPage/EventSection.jsx

import { Badge, Box, Container, Text } from "@chakra-ui/react";

const EventSection = () => {
  return (
    <Box
      height={"80vh"}
      backgroundColor={"#000"}
      display={"grid"}
      alignContent={"center"}
      sx={{
        "@media (max-width: 1024px)": {
          height: "70vh",
        },
        "@media (max-width: 600px)": {
          height: "85vh",
        },
      }}
    >
      <Container
        maxW="container.xl"
        textAlign={"left"}
        marginTop={"2rem"}
        paddingLeft={"3.5rem"}
        sx={{
          "@media (max-width: 500px)": {
            paddingLeft: "1rem",
          },
        }}
      >
        <Badge
          backgroundColor={"transparent"}
          color={"#fff"}
          fontWeight={"500"}
          fontFamily={"Mona Sans"}
          fontSize={"20px"}
          marginBottom={"1.5rem"}
        >
          RESOURCES
        </Badge>
        <Text
          as={"h2"}
          fontWeight={700}
          fontSize={"52px"}
          color={"#fff"}
          lineHeight={"62px"}
          letterSpacing={"1px"}
          sx={{
            "@media (max-width: 996px)": {
              fontSize: "46px",
            },
            "@media (max-width: 600px)": {
              fontSize: "40px",
              marginBottom: "0rem",
              lineHeight: "54px",
            },
          }}
        >
          Resources From{" "}
          <Text as={"span"} color="#DE858E">
            Rubix
          </Text>
        </Text>
        <Box
          marginTop={"1.5rem"}
          sx={{
            "@media (max-width: 500px)": {
              width: "100%",
            },
          }}
        >
          <Text
            color={"#fff"}
            fontSize={"20px"}
            fontWeight={"400"}
            lineHeight={"37.5px"}
            fontFamily={"Poppins"}
            // textTransform={"capitalize"}
            sx={{
              "@media (max-width: 1024px)": {
                fontSize: "22px",
              },
              "@media (max-width: 500px)": {
                fontSize: "16px",
                lineHeight: "28px",
              },
            }}
          >
            Stay up to date on what’s happening with Rubix,
            <br /> learn about upcoming events and access <br /> important
            resources.
          </Text>
        </Box>
      </Container>
    </Box>
  );
};

export default EventSection;