From b1812288755c0780765ba11900b79b9bc55a43f0 Mon Sep 17 00:00:00 2001
From: rockyeverlast <rockyeverlast@gmail.com>
Date: Wed, 10 Apr 2024 12:08:14 +0530
Subject: [PATCH] Mobile responsive home page

---
 src/components/Card/HomeCard.jsx              |  12 +
 src/components/Card/MobileHomeCard.jsx        | 105 ++++++
 src/components/HomePage/HomeBanner.jsx        | 138 +++----
 src/components/HomePage/Partner.jsx           | 302 ++++++---------
 src/components/HomePage/Resources.jsx         |   6 +-
 .../MobileComponent/MobileSubnet2.jsx         |  53 ++-
 .../MobileComponent/MobileSubnet3.jsx         |   8 +-
 .../MobileComponent/PartnerMobile.jsx         | 349 ++++++++++++------
 .../MobileComponent/ResourcesMobile.jsx       |  51 +++
 src/index.css                                 |  26 ++
 src/pages/HomePage.jsx                        |   6 +-
 11 files changed, 643 insertions(+), 413 deletions(-)
 create mode 100644 src/components/Card/MobileHomeCard.jsx
 create mode 100644 src/components/MobileComponent/ResourcesMobile.jsx

diff --git a/src/components/Card/HomeCard.jsx b/src/components/Card/HomeCard.jsx
index 57ca2b2..92cc926 100644
--- a/src/components/Card/HomeCard.jsx
+++ b/src/components/Card/HomeCard.jsx
@@ -12,6 +12,12 @@ const HomeCard = ({ key, date, text }) => {
       }
       padding={"1px"}
       borderRadius={"10px"}
+      sx={{
+        "@media (max-width: 600px)": {
+          width: "90%",
+          margin: "0 auto",
+        },
+      }}
     >
       <Box
         width={"502px"}
@@ -19,6 +25,12 @@ const HomeCard = ({ key, date, text }) => {
         borderRadius={"10px"}
         minHeight={"502px"}
         key={key}
+        sx={{
+          "@media (max-width: 600px)": {
+            width: "100%",
+            minHeight: "0",
+          },
+        }}
       >
         <Image src={cardimg} />
         <Box padding={"1rem"}>
diff --git a/src/components/Card/MobileHomeCard.jsx b/src/components/Card/MobileHomeCard.jsx
new file mode 100644
index 0000000..c217828
--- /dev/null
+++ b/src/components/Card/MobileHomeCard.jsx
@@ -0,0 +1,105 @@
+/* eslint-disable react/prop-types */
+/* eslint-disable no-unused-vars */
+import { Box, Container, Text, Image, Button } from "@chakra-ui/react";
+import cardimg from "../../assets/images/CardImg.png";
+import { Badge } from "@chakra-ui/react";
+import "swiper/css";
+import "swiper/css/pagination";
+import "swiper/css/navigation";
+
+import { Navigation, Pagination } from "swiper/modules";
+import { Swiper, SwiperSlide } from "swiper/react";
+
+const MobileHomeCard = () => {
+  return (
+    <Box
+      backgroundImage={
+        "-webkit-gradient(linear, left bottom, left top, color-stop(0.33, #8D54F8), color-stop(0.67, #F8697A));"
+      }
+      padding={"1px"}
+      borderRadius={"10px"}
+      sx={{
+        "@media (max-width: 600px)": {
+          width: "90%",
+          margin: "0 auto",
+        },
+      }}
+    >
+      <Box
+        width={"502px"}
+        background={"#151419"}
+        borderRadius={"10px"}
+        minHeight={"502px"}
+        key={key}
+        sx={{
+          "@media (max-width: 600px)": {
+            width: "100%",
+            minHeight: "0",
+          },
+        }}
+      >
+        <Image src={cardimg} />
+        <Box padding={"1rem"}>
+          <Badge
+            backgroundColor={"#565263"}
+            color={"#fff"}
+            fontWeight={"400"}
+            borderRadius={"20px"}
+            padding={"3px 16px"}
+          >
+            INSIGHT
+          </Badge>
+
+          <Text fontSize={"12px"} color={"#979797"} margin={"25px 0px"}>
+            {date}
+          </Text>
+          <Text
+            color={"#fff"}
+            fontSize={"24px"}
+            marginBottom={"20px"}
+            minHeight={"73px"}
+            maxWidth={"460px"}
+          >
+            {text}
+          </Text>
+          <Box
+            display={"flex"}
+            alignItems={"center"}
+            _hover={
+              {
+                //   flexDirection: "column-reverse",
+              }
+            }
+          >
+            <Box
+              position={"relative"}
+              width={"10%"}
+              _before={{
+                content: '""',
+                width: "100%",
+                position: "absolute",
+                left: "0",
+                borderBottom: "1px solid #DE858E",
+                zIndex: "2",
+              }}
+            ></Box>
+            <Button
+              position={"relative"}
+              backgroundColor={"transparent"}
+              color={"#fff"}
+              fontFamily={"Poppins"}
+              fontWeight={"400"}
+              _hover={{
+                backgroundColor: "transparent",
+              }}
+            >
+              Read More
+            </Button>
+          </Box>
+        </Box>
+      </Box>
+    </Box>
+  );
+};
+
+export default MobileHomeCard;
diff --git a/src/components/HomePage/HomeBanner.jsx b/src/components/HomePage/HomeBanner.jsx
index 69ed6ca..74a6a16 100644
--- a/src/components/HomePage/HomeBanner.jsx
+++ b/src/components/HomePage/HomeBanner.jsx
@@ -62,74 +62,80 @@ const HomeBanner = () => {
         textAlign={"center"}
         paddingTop={"12%"}
       >
-        {BannerContent.map((item, index) => {
-          return (
-            <Box key={index}>
-              <Text
-                as={"h2"}
-                fontWeight={700}
-                fontSize={"52px"}
-                textTransform={"upperCase"}
-                color={"#DE858E"}
-                lineHeight={"62px"}
-                // letterSpacing={"1px"}
-                sx={{
-                  "@media (max-width: 996px)": {
-                    fontSize: "45px",
-                  },
-                  "@media (max-width: 600px)": {
+        <Box>
+          <Text
+            as={"h2"}
+            fontWeight={700}
+            fontSize={"52px"}
+            textTransform={"upperCase"}
+            color={"#DE858E"}
+            lineHeight={"62px"}
+            // letterSpacing={"1px"}
+            sx={{
+              "@media (max-width: 996px)": {
+                fontSize: "45px",
+              },
+              "@media (max-width: 600px)": {
+                fontSize: "38px",
+                marginBottom: "2rem",
+              },
+              "@media (max-width: 412px)": {
+                fontSize: "24px",
+                marginTop: "2rem",
+              },
+            }}
+          >
+            {BannerContent[0].heading1}
+            {!isSmallScreen ? (
+              <>
+                <br />
+                <span
+                  style={{
+                    color: "#fff",
+                    fontWeight: "500",
                     fontSize: "38px",
-                    marginBottom: "2rem",
-                  },
-                  "@media (max-width: 412px)": {
+                  }}
+                >
+                  {BannerContent[0].heading2}
+                </span>
+              </>
+            ) : (
+              <>
+                <br />
+                <span
+                  style={{
+                    color: "#fff",
+                    fontWeight: "500",
                     fontSize: "24px",
-                    marginTop: "2rem",
-                  },
-                }}
-              >
-                {item.heading1}
-                {!isSmallScreen ? (
-                  <span
-                    fontSize={"42px"}
-                    style={{
-                      color: "#fff",
-                      fontWeight: "500",
-                    }}
-                  >
-                    {item.heading2}
-                  </span>
-                ) : (
-                  <span
-                    style={{
-                      color: "#fff",
-                      fontWeight: "500",
-                      fontSize: "24px",
-                    }}
-                  >
-                    {item.heading2}
-                  </span>
-                )}
-              </Text>
-              <Text
-                color={"#fff"}
-                fontSize={"22px"}
-                fontWeight={"400"}
-                lineHeight={"37.5px"}
-                fontFamily={"Poppins"}
-                sx={{
-                  "@media (max-width: 1024px)": {
-                    fontSize: "22px",
-                  },
-                  "@media (max-width: 600px)": {
-                    fontSize: "17px",
-                  },
-                }}
-              >
-                {item.subheading}
-              </Text>
-            </Box>
-          );
-        })}
+                  }}
+                >
+                  {BannerContent[0].heading2}
+                </span>
+              </>
+            )}
+          </Text>
+          <Text
+            color={"#fff"}
+            fontSize={"22px"}
+            fontWeight={"400"}
+            lineHeight={"37.5px"}
+            fontFamily={"Poppins"}
+            width={"80%"}
+            margin={"20px auto 0 auto"}
+            sx={{
+              "@media (max-width: 1024px)": {
+                fontSize: "22px",
+              },
+              "@media (max-width: 600px)": {
+                fontSize: "17px",
+                width: "100%",
+              },
+            }}
+          >
+            {BannerContent[1].subheading}
+          </Text>
+        </Box>
+
         {BannerContent[2] && (
           <Button
             position={"relative"}
diff --git a/src/components/HomePage/Partner.jsx b/src/components/HomePage/Partner.jsx
index 2331170..e755fcf 100644
--- a/src/components/HomePage/Partner.jsx
+++ b/src/components/HomePage/Partner.jsx
@@ -28,7 +28,8 @@ import "swiper/css";
 import "swiper/css/pagination";
 import "swiper/css/navigation";
 
-import { Navigation } from "swiper/modules";
+import { Navigation, Pagination } from "swiper/modules";
+import { useState } from "react";
 
 const imgWidth = {
   width: "180px",
@@ -47,203 +48,130 @@ const Content = {
 };
 
 export default function Partner() {
-  const isSmallScreen = useMediaQuery("(max-width: 430px)");
-  console.log(isSmallScreen);
-
   return (
     <>
-      {isSmallScreen ? (
-        <Box
-          position={"relative"}
-          width={"full"}
-          overflow={"hidden"}
-          height={"auto"}
-          background={"#101015"}
-          backgroundSize={"cover"}
-          backgroundRepeat={"no-repeat"}
-          padding={"3rem"}
+      <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",
+          },
+        }}
+      >
+        <Text
+          as={"h2"}
+          paddingTop={"2rem"}
+          paddingBottom={"4rem"}
+          fontWeight={700}
+          fontSize={"40px"}
+          textAlign={"center"}
+          textTransform={"capitalize"}
+          color={"#fff"}
           sx={{
-            "@media (max-width: 1024px)": {
-              height: "auto",
-            },
-            "@media (max-width: 996px)": {
-              paddingBottom: "3rem",
+            "@media (max-width: 435px)": {
+              fontSize: "22px",
             },
+            "@media (max-width: 412px)": {},
           }}
         >
-          <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 */}
+          {Content.heading}
+        </Text>
+        {/* Slider */}
 
-          {/* Box1     */}
-          <Swiper
-            pagination={{
-              type: "fraction",
-            }}
-            navigation={true}
-            modules={[Navigation]}
-            loop={true}
-            style={{
-              marginBottom: "4rem",
-            }}
-          >
-            <SwiperSlide>
-              <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>
-            </SwiperSlide>
-            {/* Box2     */}
-            <SwiperSlide>
-              <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>
-            </SwiperSlide>
-          </Swiper>
-        </Box>
-      ) : (
-        <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",
-            },
+        {/* Box1     */}
+        <Swiper
+          pagination={true}
+          navigation={true}
+          modules={[Navigation, Pagination]}
+          loop={true}
+          style={{
+            paddingBottom: "4rem",
           }}
         >
-          <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 */}
-
-          {/* 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} />
+          <SwiperSlide>
+            <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>
-            <Box
-              display={"flex"}
-              alignItems={"center"}
-              justifyContent={"space-between"}
-            >
-              <Image src={finalo} sx={imgWidth} />
-              <Image src={ymca} sx={imgWidth} />
-            </Box>
-          </Box>
+          </SwiperSlide>
           {/* Box2     */}
-
-          {/* </Container> */}
-        </Box>
-      )}
+          <SwiperSlide>
+            <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>
+          </SwiperSlide>
+        </Swiper>
+      </Box>
     </>
   );
 }
diff --git a/src/components/HomePage/Resources.jsx b/src/components/HomePage/Resources.jsx
index 8eaf516..70ee745 100644
--- a/src/components/HomePage/Resources.jsx
+++ b/src/components/HomePage/Resources.jsx
@@ -43,11 +43,9 @@ const Resources = () => {
         color={"#fff"}
         sx={{
           "@media (max-width: 435px)": {
-            fontSize: "35px",
-          },
-          "@media (max-width: 375px)": {
-            fontSize: "28px",
+            fontSize: "26px",
           },
+          "@media (max-width: 375px)": {},
         }}
       >
         {Content.heading}
diff --git a/src/components/MobileComponent/MobileSubnet2.jsx b/src/components/MobileComponent/MobileSubnet2.jsx
index 3a658a2..c4a1579 100644
--- a/src/components/MobileComponent/MobileSubnet2.jsx
+++ b/src/components/MobileComponent/MobileSubnet2.jsx
@@ -1,3 +1,4 @@
+/* eslint-disable no-unused-vars */
 import { Box, Image, ListItem, Text, UnorderedList } from "@chakra-ui/react";
 import cube from "../../assets/images/cube.png";
 
@@ -48,18 +49,12 @@ const MobileSubnet2 = () => {
               textTransform={"capitalize"}
               color={"#fff"}
             >
-              P2P
+              01. Decentralisation
+            </Text>
+            <Text color={"#E1E1E1"}>
+              Rubix Decentralised Identity( DID) issued at L1 is the foundation
+              for building digital ownership enhancing applications.
             </Text>
-            <UnorderedList color={"#E1E1E1"}>
-              <ListItem>Only L1 powering full mobile nodes</ListItem>
-              <ListItem>
-                Mobile nodes with full state data will settle P2P . Consensus
-                provided by nearby node validators.
-              </ListItem>
-              <ListItem>
-                High scalability, Partition tolerance and portability
-              </ListItem>
-            </UnorderedList>
           </Box>
 
           <Box>
@@ -71,18 +66,14 @@ const MobileSubnet2 = () => {
               textTransform={"capitalize"}
               color={"#fff"}
             >
-              Self Sovereign
+              02. Ultra Scalability
+            </Text>
+            <Text color={"#E1E1E1"}>
+              Unlike monolithic chains which become centralized and introduce
+              latency to achieve high throughput, in the Rubix object chain
+              architecture, where mobile nodes have real time full state data,
+              the network TPS will increase with increase in numbers of nodes.
             </Text>
-            <UnorderedList color={"#E1E1E1"}>
-              <ListItem>
-                Permissioned subnets with no oracles and <br /> intermediaries
-              </ListItem>
-              <ListItem>INo block space ransom</ListItem>
-              <ListItem>
-                Zero risk of transactions being blocked out of <br />
-                chain.
-              </ListItem>
-            </UnorderedList>
           </Box>
 
           <Box>
@@ -94,16 +85,16 @@ const MobileSubnet2 = () => {
               textTransform={"capitalize"}
               color={"#fff"}
             >
-              Easier
+              03. Data Security and Privacy
+            </Text>
+            <Text color={"#E1E1E1"}>
+              {" "}
+              Rubix Decentralised Identity(DID) issued at L1 is the foundation
+              for building digital ownership enhancing applications
             </Text>
-            <UnorderedList color={"#E1E1E1"}>
-              <ListItem>Leverage own infrastructure for block space</ListItem>
-              <ListItem>Smart contracts in Rust , GoLang and C/C++</ListItem>
-              <ListItem>WASM compiler for smooth code migration</ListItem>
-            </UnorderedList>
           </Box>
 
-          <Box>
+          {/* <Box paddingBottom={"2rem"}>
             <Text
               as={"h2"}
               paddingTop={"2rem"}
@@ -112,7 +103,7 @@ const MobileSubnet2 = () => {
               textTransform={"capitalize"}
               color={"#fff"}
             >
-              cheaper
+              All In One Composable Stack
             </Text>
             <UnorderedList color={"#E1E1E1"}>
               <ListItem>No GAS fees</ListItem>
@@ -122,7 +113,7 @@ const MobileSubnet2 = () => {
                 resources
               </ListItem>
             </UnorderedList>
-          </Box>
+          </Box> */}
         </Box>
       </Box>
     </Box>
diff --git a/src/components/MobileComponent/MobileSubnet3.jsx b/src/components/MobileComponent/MobileSubnet3.jsx
index 3bdcf07..6238515 100644
--- a/src/components/MobileComponent/MobileSubnet3.jsx
+++ b/src/components/MobileComponent/MobileSubnet3.jsx
@@ -1,3 +1,4 @@
+/* eslint-disable no-unused-vars */
 import { Box, Image, ListItem, Text, UnorderedList } from "@chakra-ui/react";
 import stack from "../../assets/images/stacksmall.png";
 
@@ -24,11 +25,6 @@ const MobileSubnet3 = () => {
           </Text>
           <Image
             src={stack}
-            // position={"absolute"}
-            // right={"0"}
-            // top={"0"}
-            // marginLeft={"auto"}
-            // marginRight={"auto"}
             width={"140px"}
             transform="translateY(-10%)"
             animation="floatAnimation 2s infinite alternate"
@@ -130,7 +126,7 @@ const MobileSubnet3 = () => {
             </UnorderedList>
           </Box>
 
-          <Box>
+          <Box paddingBottom={"2rem"}>
             <Text
               as={"h2"}
               paddingTop={"2rem"}
diff --git a/src/components/MobileComponent/PartnerMobile.jsx b/src/components/MobileComponent/PartnerMobile.jsx
index 66298e2..b46cb91 100644
--- a/src/components/MobileComponent/PartnerMobile.jsx
+++ b/src/components/MobileComponent/PartnerMobile.jsx
@@ -19,54 +19,58 @@ 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 { Swiper, SwiperSlide } from "swiper/react";
+
+// Import Swiper styles
+import "swiper/css";
+import "swiper/css/pagination";
+import "swiper/css/navigation";
+
+import { Navigation, Pagination } from "swiper/modules";
 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",
-};
+import { useMediaQuery } from "@chakra-ui/react";
 
 const Content = {
   heading: `Look Who's Building on Rubix`,
 };
+const tabWidth = "180px";
+
+const phoneWidth = "150px";
+
+const clients = [
+  {
+    img: chainx,
+  },
+  {
+    img: ensurity,
+  },
+  {
+    img: exr,
+  },
+  {
+    img: finalo,
+  },
+  {
+    img: iskon,
+  },
+  {
+    img: jupiter,
+  },
+  {
+    img: ondc,
+  },
+  {
+    img: smartcity,
+  },
+  {
+    img: ymca,
+  },
+  {
+    img: bescom,
+  },
+];
 
 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"}
@@ -76,52 +80,8 @@ export default function PartnerMobile() {
       background={"#101015"}
       backgroundSize={"cover"}
       backgroundRepeat={"no-repeat"}
-      padding={"2rem"}
-      sx={{
-        "@media (max-width: 1024px)": {
-          height: "auto",
-        },
-        "@media (max-width: 996px)": {
-          paddingBottom: "3rem",
-        },
-      }}
+      padding={"1rem"}
     >
-      {/* 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"}
@@ -142,38 +102,193 @@ export default function PartnerMobile() {
       </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     */}
+      <Box>
+        <Swiper
+          pagination={true}
+          navigation={true}
+          modules={[Navigation, Pagination]}
+          loop={true}
+          style={{
+            PaddingBottom: "2rem",
+          }}
+        >
+          <SwiperSlide>
+            <Box>
+              <Box
+                display={"flex"}
+                alignItems={"center"}
+                marginBottom={"2rem"}
+                sx={{
+                  "@media (max-width: 996px)": {
+                    justifyContent: "space-around",
+                  },
+                  "@media (max-width: 600px)": {
+                    justifyContent: "center",
+                    gap: "15px",
+                  },
+                }}
+              >
+                <Image
+                  src={chainx}
+                  sx={{
+                    "@media (max-width: 996px)": {
+                      width: `${tabWidth}`,
+                      height: "82px",
+                      objectFit: "contain",
+                    },
+                    "@media (max-width: 600px)": {
+                      width: `${phoneWidth}`,
+                    },
+                  }}
+                />
 
-        {/* </Container> */}
-      </Slider>
+                <Image
+                  src={jupiter}
+                  sx={{
+                    "@media (max-width: 996px)": {
+                      width: `${tabWidth}`,
+                      height: "82px",
+                      objectFit: "contain",
+                    },
+                    "@media (max-width: 600px)": {
+                      width: `${phoneWidth}`,
+                    },
+                  }}
+                />
+              </Box>
+              <Box
+                display={"flex"}
+                alignItems={"center"}
+                marginBottom={"2rem"}
+                sx={{
+                  "@media (max-width: 996px)": {
+                    justifyContent: "space-around",
+                  },
+                  "@media (max-width: 600px)": {
+                    justifyContent: "center",
+                    gap: "15px",
+                  },
+                }}
+              >
+                <Image
+                  src={smartcity}
+                  sx={{
+                    "@media (max-width: 996px)": {
+                      width: `${tabWidth}`,
+                      height: "82px",
+                      objectFit: "contain",
+                    },
+                    "@media (max-width: 600px)": {
+                      width: `${phoneWidth}`,
+                    },
+                  }}
+                />
+                <Image
+                  src={bescom}
+                  sx={{
+                    "@media (max-width: 996px)": {
+                      width: `${tabWidth}`,
+                      height: "82px",
+                      objectFit: "contain",
+                    },
+                    "@media (max-width: 600px)": {
+                      width: `${phoneWidth}`,
+                    },
+                  }}
+                />
+              </Box>
+            </Box>
+          </SwiperSlide>
+          {/* Box2     */}
+          <SwiperSlide>
+            <Box>
+              <Box
+                display={"flex"}
+                alignItems={"center"}
+                marginBottom={"2rem"}
+                sx={{
+                  "@media (max-width: 996px)": {
+                    justifyContent: "space-around",
+                  },
+                  "@media (max-width: 600px)": {
+                    justifyContent: "center",
+                    gap: "15px",
+                  },
+                }}
+              >
+                <Image
+                  src={ymca}
+                  sx={{
+                    "@media (max-width: 996px)": {
+                      width: `${tabWidth}`,
+                      height: "82px",
+                      objectFit: "contain",
+                    },
+                    "@media (max-width: 600px)": {
+                      width: `${phoneWidth}`,
+                    },
+                  }}
+                />
+                <Image
+                  src={ondc}
+                  sx={{
+                    "@media (max-width: 996px)": {
+                      width: `${tabWidth}`,
+                      height: "82px",
+                      objectFit: "contain",
+                    },
+                    "@media (max-width: 600px)": {
+                      width: `${phoneWidth}`,
+                    },
+                  }}
+                />
+              </Box>
+              <Box
+                display={"flex"}
+                alignItems={"center"}
+                marginBottom={"2rem"}
+                sx={{
+                  "@media (max-width: 996px)": {
+                    justifyContent: "space-around",
+                  },
+                  "@media (max-width: 600px)": {
+                    justifyContent: "center",
+                    gap: "15px",
+                  },
+                }}
+              >
+                <Image
+                  src={ensurity}
+                  sx={{
+                    "@media (max-width: 996px)": {
+                      width: `${tabWidth}`,
+                      height: "82px",
+                      objectFit: "contain",
+                    },
+                    "@media (max-width: 600px)": {
+                      width: `${phoneWidth}`,
+                    },
+                  }}
+                />
+                <Image
+                  src={exr}
+                  sx={{
+                    "@media (max-width: 996px)": {
+                      width: `${tabWidth}`,
+                      height: "82px",
+                      objectFit: "contain",
+                    },
+                    "@media (max-width: 600px)": {
+                      width: `${phoneWidth}`,
+                    },
+                  }}
+                />
+              </Box>
+            </Box>
+          </SwiperSlide>
+        </Swiper>
+      </Box>
+      {/* Box2     */}
     </Box>
   );
 }
diff --git a/src/components/MobileComponent/ResourcesMobile.jsx b/src/components/MobileComponent/ResourcesMobile.jsx
new file mode 100644
index 0000000..1303ff7
--- /dev/null
+++ b/src/components/MobileComponent/ResourcesMobile.jsx
@@ -0,0 +1,51 @@
+/* eslint-disable no-unused-vars */
+import { Box, Container, Text, Image, Button } from "@chakra-ui/react";
+import HomeCard from "../Card/HomeCard";
+import "swiper/css";
+import "swiper/css/pagination";
+import "swiper/css/navigation";
+
+import { Navigation, Pagination } from "swiper/modules";
+import { Swiper, SwiperSlide } from "swiper/react";
+import MobileHomeCard from "../Card/MobileHomeCard";
+
+const content = [
+  {
+    id: 1,
+    date: `Published: March 13, 2020`,
+    text: `Multichain over Blockchain — A reality check on security threat`,
+  },
+  {
+    id: 2,
+    date: `Published: March 13, 2020`,
+    text: `Financial Times Crypto & Digital Assets Summit Panel`,
+  },
+  {
+    id: 3,
+    date: `Published: March 13, 2020`,
+    text: `Enterprise blockchains on a Public Chain!`,
+  },
+];
+
+const ResourcesMobile = () => {
+  return (
+    <Box backgroundColor={"#101015"}>
+      {content.map((item) => (
+        <>
+          <Swiper
+            pagination={true}
+            navigation={true}
+            modules={[Navigation, Pagination]}
+            loop={true}
+          >
+            <SwiperSlide>
+              <MobileHomeCard key={item.id} date={item.date} text={item.text} />
+            </SwiperSlide>
+          </Swiper>
+        </>
+      ))}
+    </Box>
+  );
+};
+
+export default ResourcesMobile;
diff --git a/src/index.css b/src/index.css
index 6a332f1..7356aa5 100644
--- a/src/index.css
+++ b/src/index.css
@@ -49,6 +49,32 @@
   /* background-color: #de858e; */
 }
 
+.swiper-pagination {
+  top: 90% !important;
+}
+
+.swiper-pagination-bullet {
+  background: #383838 !important;
+}
+
+.swiper-pagination-bullet-active {
+  background: #fff !important;
+}
+
+@media only screen and (max-width: 600px) {
+  .swiper-button-prev:after,
+  .swiper-button-next:after {
+    font-size: 20px;
+  }
+
+  .swiper-pagination-bullets {
+    height: fit-content !important;
+  }
+
+  .swiper-pagination {
+    top: 95% !important;
+  }
+}
 /* html {
   font-family: "Mona Sans";
 } */
diff --git a/src/pages/HomePage.jsx b/src/pages/HomePage.jsx
index 46df9f4..6edc23e 100644
--- a/src/pages/HomePage.jsx
+++ b/src/pages/HomePage.jsx
@@ -10,6 +10,8 @@ import WhitePaper from "../components/HomePage/WhitePaper";
 import MobileSubnet from "../components/MobileComponent/MobileSubnet";
 import { NewSubnetComp } from "../components/SubnetsComponent";
 import Partner from "../components/HomePage/Partner";
+import PartnerMobile from "../components/MobileComponent/PartnerMobile";
+import ResourcesMobile from "../components/MobileComponent/ResourcesMobile";
 // import { useBreakpointValue } from "@chakra-ui/react";
 
 const HomePage = () => {
@@ -40,9 +42,9 @@ const HomePage = () => {
       {!isMobile ? <NewSubnetComp /> : <MobileSubnet />}
       <Stats />
       <WhitePaper />
-      <Partner />
+      {!isMobile ? <Partner /> : <PartnerMobile />}
       {/* <Client /> */}
-      <Resources />
+      {!isMobile ? <Resources /> : <ResourcesMobile />}
       <Footer />
     </>
   );