rubix/src/components/HomePage/Partner.jsx

// "use client";
import {
  Box,
  Container,
  IconButton,
  Image,
  Text,
  useBreakpointValue,
} from "@chakra-ui/react";
import { ArrowBackIcon, ArrowForwardIcon } from "@chakra-ui/icons";
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/jupiter.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";
import Slider from "react-slick";
import { useState } from "react";

// Settings for the slider
const settings = {
  dots: true,
  arrows: false,
  fade: false,
  infinite: true,
  autoplay: true,
  speed: 500,
  autoplaySpeed: 5000,
  slidesToShow: 1,
  slidesToScroll: 1,
};

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

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

const Content = {
  heading: `Look Who's Building on Rubix`,
};

export default function Partner() {
  const [slider, setSlider] = useState(null);

  const top = useBreakpointValue({ base: "90%", md: "50%" });
  const side = useBreakpointValue({ base: "30%", md: "10px" });

  /* The `const cards` array is storing objects where each object contains an `img` property that holds
  the path to an image file. These image paths are then used to display images in the slider
  component later in the code. Each object in the array represents a different image that will be
  displayed in the slider. */
  //   const cards = [
  //     {
  //       img: chainx,
  //     },
  //     {
  //       img: ensurity,
  //     },
  //     {
  //       img: exr,
  //     },
  //     {
  //       img: finalo,
  //     },
  //     {
  //       img: iskon,
  //     },
  //     {
  //       img: jupiter,
  //     },
  //     {
  //       img: ondc,
  //     },
  //     {
  //       img: smartcity,
  //     },
  //     {
  //       img: ymca,
  //     },
  //     {
  //       img: bescom,
  //     },
  //   ];

  return (
    <Box
      position={"relative"}
      width={"full"}
      overflow={"hidden"}
      height={"auto"}
      background={"#101015"}
      backgroundSize={"cover"}
      backgroundRepeat={"no-repeat"}
      padding={"3rem"}
      sx={{
        "@media (max-width: 1024px)": {
          height: "auto",
        },
        "@media (max-width: 996px)": {
          paddingBottom: "3rem",
        },
      }}
    >
      {/* CSS files for react-slick */}
      <link
        rel="stylesheet"
        type="text/css"
        href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick.min.css"
      />
      <link
        rel="stylesheet"
        type="text/css"
        href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick-theme.min.css"
      />
      {/* Left Icon */}
      <IconButton
        aria-label="left-arrow"
        colorScheme="messenger"
        borderRadius="full"
        position="absolute"
        left={side}
        top={top}
        transform={"translate(0%, -50%)"}
        zIndex={2}
        onClick={() => slider?.slickPrev()}
        background={"#DE858E"}
        _hover={{
          background: "#DE858E",
        }}
      >
        <ArrowBackIcon />
      </IconButton>
      {/* Right Icon */}
      <IconButton
        aria-label="right-arrow"
        colorScheme="messenger"
        borderRadius="full"
        position="absolute"
        right={side}
        top={top}
        transform={"translate(0%, -50%)"}
        zIndex={2}
        onClick={() => slider?.slickNext()}
        background={"#DE858E"}
        _hover={{
          background: "#DE858E",
        }}
      >
        <ArrowForwardIcon />
      </IconButton>
      <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>
      {/* Slider */}

      <Slider
        {...settings}
        ref={(slider) => setSlider(slider)}
        style={{ marginBottom: "4rem" }}
      >
        {/* Box1     */}
        {/* <Container maxW="container.lg"> */}
        <Box>
          <Box
            display={"flex"}
            justifyContent={"center"}
            alignItems={"center"}
            gap={"2rem"}
            // flexWrap={"wrap"}
            marginBottom={"8rem"}
            sx={{
              "@media (max-width: 996px)": {},
            }}
          >
            <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={"center"}
            alignItems={"center"}
            gap={"2rem"}
            sx={{
              "@media (max-width: 996px)": {},
            }}
          >
            <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>
        </Box>
        {/* Box2     */}
        <Box>
          <Box
            display={"flex"}
            justifyContent={"center"}
            alignItems={"center"}
            gap={"2rem"}
            marginBottom={"8rem"}
            sx={{
              "@media (max-width: 996px)": {},
            }}
          >
            <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={"center"}
            alignItems={"center"}
            gap={"2rem"}
            sx={{
              "@media (max-width: 996px)": {},
            }}
          >
            <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>
        </Box>
        {/* </Container> */}
      </Slider>
    </Box>
  );
}