rubix/src/components/HomePage/Client.jsx

import { Box, Container, Text, Image } from "@chakra-ui/react";
import chainx from "../../assets/images/chainx.png";
import ensurity from "../../assets/images/ensurity.png";
import exr from "../../assets/images/exr.png";
import finalo from "../../assets/images/finalo.png";
import iskon from "../../assets/images/iskon.png";
import jupiter from "../../assets/images/jupitermeta.png";
import ondc from "../../assets/images/ondc.png";
import smartcity from "../../assets/images/smartcity.png";
import ymca from "../../assets/images/ymca.png";
import bescom from "../../assets/images/bescom.png";

const imgWidth = {
  width: "150px",
  height: "82px",
  objectFit: "contain",
  filter: "grayscale(1)",
  transition: "0.5s",

  _hover: {
    filter: "grayscale(0)",
  },
};

const Client = () => {
  const Content = {
    heading: `Look Who's Building on Rubix`,
  };
  return (
    <Box
      height={"auto"}
      background={"#101015"}
      backgroundSize={"cover"}
      backgroundRepeat={"no-repeat"}
      padding={"3rem"}
      sx={{
        "@media (max-width: 1024px)": {
          height: "auto",
        },
        "@media (max-width: 996px)": {
          paddingBottom: "3rem",
        },
      }}
    >
      <Text
        as={"h2"}
        paddingTop={"2rem"}
        paddingBottom={"4rem"}
        fontWeight={700}
        fontSize={"40px"}
        textAlign={"center"}
        textTransform={"capitalize"}
        color={"#fff"}
        sx={{
          "@media (max-width: 435px)": {
            fontSize: "22px",
          },
          "@media (max-width: 412px)": {},
        }}
      >
        {Content.heading}
      </Text>
      <Container
        maxW="container.xl"
        display={"grid"}
        placeContent={"center"}
        paddingBottom={"3rem"}
        sx={{
          "@media (max-width: 1024px)": {
            height: "40vh",
          },
          "@media (max-width: 996px)": {
            height: "auto",
          },
        }}
      >
        <Box
          display={"flex"}
          // justifyContent={"space-between"}
          alignItems={"center"}
          // flexWrap={"wrap"}
          marginBottom={"8rem"}
          sx={{
            "@media (max-width: 996px)": {
              flexDirection: "column",
              rowGap: "3rem",
              marginBottom: "3rem",
            },
          }}
        >
          <Image src={chainx} sx={imgWidth} />
          <Image src={jupiter} sx={imgWidth} />
          <Image src={finalo} sx={imgWidth} />
          <Image src={ymca} sx={imgWidth} />
          <Image src={ondc} sx={imgWidth} />
        </Box>
        <Box
          display={"flex"}
          // justifyContent={"space-between"}
          alignItems={"center"}
          // flexWrap={"wrap"}
          sx={{
            "@media (max-width: 996px)": {
              flexDirection: "column",
              rowGap: "3rem",
            },
          }}
        >
          <Image src={ensurity} sx={imgWidth} />
          <Image src={exr} sx={imgWidth} />
          <Image src={iskon} sx={imgWidth} />
          <Image src={smartcity} sx={imgWidth} />
          <Image src={bescom} sx={imgWidth} />
        </Box>
      </Container>
    </Box>
  );
};

export default Client;