rubix/src/components/HomePage/Stats.jsx

import { Box, Container, Text } from "@chakra-ui/react";
import { useInView } from "react-intersection-observer";
import CountUp from "react-countup";
import banner from "../../assets/images/Statsbanner.png";

const StatsContent = {
  heading: `Key Statistics`,
};

const Stats = () => {
  const { ref, inView } = useInView({
    threshold: 0.5,
    triggerOnce: false,
  });
  return (
    <Box
      ref={ref}
      height={"auto"}
      backgroundImage={`url(${banner})`}
      backgroundSize={"cover"}
      backgroundRepeat={"no-repeat"}
      padding={"3rem"}
      sx={{
        "@media (max-width: 1024px)": {
          height: "auto",
        },
        "@media (max-width: 600px)": {
          fontSize: "28px",
        },
      }}
    >
      <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",
          },
        }}
      >
        {StatsContent.heading}
      </Text>
      <Container
        maxW="container.lg"
        display={"grid"}
        placeContent={"center"}
        paddingBottom="3rem"
        sx={{
          "@media (max-width: 996px)": {
            height: "auto",
            paddingBottom: "2rem",
          },
        }}
      >
        <Box
          display={"flex"}
          justifyContent={"center"}
          alignItems={"center"}
          gap={"8rem"}
          marginBottom={"6rem"}
          flexWrap={"wrap"}
          sx={{
            "@media (max-width: 1024px)": {},
            "@media (max-width: 996px)": {
              flexDirection: "column",
              gap: "4rem",
              marginBottom: "4rem",
            },
            "@media (max-width: 375px)": {
              gap: "2rem",
              marginBottom: "2rem",
            },
          }}
        >
          <Box
            color={"#fff"}
            textAlign={"center"}
            position={"relative"}
            _before={{
              content: "''",
              position: "absolute",
              height: "100%",
              right: "-70px",
              borderRight: "2px solid #EFEFEF",
              zIndex: "2",
            }}
            sx={{
              "@media (max-width: 1024px)": {},
              "@media (max-width: 996px)": {
                _before: {
                  borderRight: "none",
                },
              },
            }}
          >
            {inView && (
              <CountUp
                start={0}
                end={51400000}
                delay={0}
                style={{ fontSize: "40px", fontWeight: "700" }}
              />
            )}
            <Text
              textTransform={"uppercase"}
              sx={{
                "@media (max-width: 1024px)": {},
                "@media (max-width: 435px)": {
                  fontSize: "22px",
                },
                "@media (max-width: 375px)": {
                  fontSize: "16px",
                },
              }}
            >
              Total Capped Supply
            </Text>
          </Box>
          <Box
            color={"#fff"}
            ref={ref}
            textAlign={"center"}
            position={"relative"}
            _before={{
              content: "''",
              position: "absolute",
              height: "100%",
              right: "-70px",
              borderRight: "2px solid #EFEFEF",
              zIndex: "2",
            }}
            sx={{
              "@media (max-width: 1024px)": {},
              "@media (max-width: 996px)": {
                _before: {
                  borderRight: "none",
                },
              },
            }}
          >
            {inView && (
              <CountUp
                start={0}
                end={10247786}
                delay={0}
                style={{ fontSize: "40px", fontWeight: "700" }}
              />
            )}
            <Text
              textTransform={"uppercase"}
              sx={{
                "@media (max-width: 1024px)": {},
                "@media (max-width: 435px)": {
                  fontSize: "22px",
                },
                "@media (max-width: 375px)": {
                  fontSize: "16px",
                },
              }}
            >
              Digital Asset Tools mined
            </Text>
          </Box>
          <Box color={"#fff"} ref={ref} textAlign={"center"}>
            {inView && (
              <CountUp
                start={0}
                end={174015}
                delay={0}
                style={{ fontSize: "40px", fontWeight: "700" }}
              />
            )}
            <Text
              textTransform={"uppercase"}
              sx={{
                "@media (max-width: 1024px)": {},
                "@media (max-width: 435px)": {
                  fontSize: "22px",
                },
                "@media (max-width: 375px)": {
                  fontSize: "16px",
                },
              }}
            >
              Live Nodes
            </Text>
          </Box>
        </Box>

        <Box
          display={"flex"}
          justifyContent={"center"}
          alignItems={"center"}
          gap={"8rem"}
          sx={{
            "@media (max-width: 1024px)": {},
            "@media (max-width: 996px)": {
              flexDirection: "column",
              gap: "4rem",
            },
            "@media (max-width: 375px)": {
              gap: "2rem",
            },
          }}
        >
          <Box
            color={"#fff"}
            ref={ref}
            textAlign={"center"}
            position={"relative"}
            _before={{
              content: "''",
              position: "absolute",
              height: "100%",
              right: "-70px",
              borderRight: "2px solid #EFEFEF",
              zIndex: "2",
            }}
            sx={{
              "@media (max-width: 1024px)": {},
              "@media (max-width: 996px)": {
                _before: {
                  borderRight: "none",
                },
              },
            }}
          >
            {inView && (
              <CountUp
                start={0}
                end={51400000}
                delay={0}
                style={{ fontSize: "40px", fontWeight: "700" }}
              />
            )}
            <Text
              textTransform={"uppercase"}
              sx={{
                "@media (max-width: 1024px)": {},
                "@media (max-width: 435px)": {
                  fontSize: "22px",
                },
                "@media (max-width: 375px)": {
                  fontSize: "16px",
                },
              }}
            >
              Circulating Supply at level 4
            </Text>
          </Box>
          <Box color={"#fff"} ref={ref} textAlign={"center"}>
            {inView && (
              <CountUp
                start={0}
                end={10247786}
                delay={0}
                style={{ fontSize: "40px", fontWeight: "700" }}
              />
            )}
            <Text
              textTransform={"uppercase"}
              sx={{
                "@media (max-width: 1024px)": {},
                "@media (max-width: 435px)": {
                  fontSize: "22px",
                },
                "@media (max-width: 375px)": {
                  fontSize: "16px",
                },
              }}
            >
              Transacitons
            </Text>
          </Box>
        </Box>
      </Container>
    </Box>
  );
};

export default Stats;