Slick slider added to Client page

src/components/MobileComponent/PartnerMobile.jsx

@@ -0,0 +1,190 @@
+/* eslint-disable no-unused-vars */
+// "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,
+  responsive: [
+    {
+      breakpoint: 768,
+      settings: {
+        slidesToShow: 2,
+        slidesToScroll: 1,
+      },
+    },
+    {
+      breakpoint: 576,
+      settings: {
+        slidesToShow: 1,
+        slidesToScroll: 0,
+      },
+    },
+  ],
+};
+
+const imgWidth = {
+  width: "165px",
+  height: "82px",
+  objectFit: "contain",
+};
+
+const Content = {
+  heading: `Look Who's Building on Rubix`,
+};
+
+export default function PartnerMobile() {
+  const [slider, setSlider] = useState(null);
+
+  const top = useBreakpointValue({ base: "90%", md: "50%" });
+  const side = useBreakpointValue({ base: "30%", md: "10px" });
+
+  return (
+    <Box
+      position={"relative"}
+      width={"full"}
+      overflow={"hidden"}
+      height={"auto"}
+      background={"#101015"}
+      backgroundSize={"cover"}
+      backgroundRepeat={"no-repeat"}
+      padding={"2rem"}
+      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"}
+            alignItems={"center"}
+            justifyContent={"space-between"}
+            sx={{
+              "@media (max-width: 996px)": {},
+            }}
+          >
+            <Image src={chainx} sx={imgWidth} />
+            <Image src={jupiter} sx={imgWidth} />
+          </Box>
+          <Box
+            display={"flex"}
+            alignItems={"center"}
+            justifyContent={"space-between"}
+          >
+            <Image src={finalo} sx={imgWidth} />
+            <Image src={ymca} sx={imgWidth} />
+          </Box>
+        </Box>
+        {/* Box2     */}
+
+        {/* </Container> */}
+      </Slider>
+    </Box>
+  );
+}