Successfully merged --yasin

src/App.jsx

@@ -10,6 +10,8 @@ import LearnPage from "./pages/LearnPage";
 import BuildPage from "./pages/BuildPage";
 import Community from "./pages/Community";
 import Contact from "./pages/Contact";
+import UseCases from "./pages/UseCases";
+import ArticleInternalPage from "./components/ArticleInternalPage/ArticleInternalPage";
 
 const router = createBrowserRouter(
   createRoutesFromElements(
@@ -17,7 +19,9 @@ const router = createBrowserRouter(
       <Route index element={<HomePage />} />
       <Route path="LearnPage" element={<LearnPage />} />
       <Route path="BuildPage" element={<BuildPage />} />
+      <Route path="UseCases" element={<UseCases />} />
       <Route path="community" element={<Community />} />
+      <Route path="Articles" element={<ArticleInternalPage />} />
       <Route path="Contact" element={<Contact />} />
     </Route>
   )

src/components/ArticleInternalPage/ArticleInternalPage.jsx

@@ -0,0 +1,164 @@
+/* eslint-disable no-unused-vars */
+import React from "react";
+import { Box, Text } from "@chakra-ui/react";
+import { Avatar, AvatarBadge, AvatarGroup } from "@chakra-ui/react";
+import banner from "../../assets/images/articleInternalbanner.png";
+import Chip from "../Chip/Chip";
+
+const ArticleInternalPage = () => {
+  return (
+    <Box
+      bg="#000000"
+      height={"auto"}
+      display={"flex"}
+      gap={7}
+      justifyContent={"center"}
+      alignItems={"center"}
+      flexDirection={"column"}
+      color="white"
+    >
+      <Box
+        bg="#000000"
+        minHeight={"60vh"}
+        width={"50vw"}
+        display={"flex"}
+        gap={5}
+        justifyContent={"end"}
+        alignItems={"center"}
+        flexDirection={"column"}
+        color="white"
+      >
+        <Text
+          textAlign={"center"}
+          className="rubix-text-heading-2 rubix-fw-600"
+        >
+          The Proofchain Technical Whitepaper
+        </Text>
+
+        <Text textAlign={"center"} className="rubix-text-xsmall rubix-fw-500">
+          Business Growth January 5, 2023
+        </Text>
+
+        <Box display={"flex"} gap={3} textAlign={"center"}>
+          <Avatar
+            size="lg"
+            name="Dan Abrahmov"
+            src="https://bit.ly/dan-abramov"
+          />
+
+          <Box
+            textAlign={"start"}
+            display={"flex"}
+            flexDirection={"column"}
+            alignItems={"start"}
+            justifyContent={"center"}
+            className="rubix-text-xsmall rubix-fw-500"
+          >
+            <Text>Pooja Patade</Text>
+            <Text>Technical content writer</Text>
+          </Box>
+        </Box>
+      </Box>
+      {/* ========[ Banner ]======= */}
+      <Box
+        height={"70vh"}
+        width={"85vw"}
+        backgroundImage={`url(${banner})`}
+        backgroundRepeat={"no-repeat"}
+        backgroundSize={"cover"}
+        position="relative"
+      >
+        <Box
+          position="absolute"
+          top={0}
+          left={0}
+          width="100%"
+          height="100%"
+          backgroundColor="rgba(0, 0, 0, 0.5)"
+        />
+      </Box>
+
+      <Box
+        bg="#000000"
+        width={"85vw"}
+        height={"auto"}
+        display={"flex"}
+        pb={"60px"}
+        gap={5}
+        justifyContent={"center"}
+        alignItems={"center"}
+        flexDirection={"column"}
+        color="white"
+      >
+        <Box
+          bg="#000000"
+          width={"68vw"}
+          height={"auto"}
+          display={"flex"}
+          flexDirection={"column"}
+          gap={5}
+          justifyContent={"start"}
+          color="white"
+        >
+          <Box display={"flex"} gap={5} justifyContent={"start"}>
+            <Chip title="INSIGHT" />
+            <Chip title="BLOCKSPACE" />
+          </Box>
+
+          <Box pt={5} pb={5} width={"62vw"}>
+            <Text fontSize="xl">
+              BlockSpace is the number of transactions which the blockchain will
+              order before appending to the chain of previous transactions. For
+              example, if max block space is 200KB and average transactions take
+              only 1Kb, then the chain may have a room for ~190 transactions in
+              one block. BlockSpace is a measure of how busy is the blockchain.
+              Low BlockSpace may mean transactions remain unattended in the
+              Mempool for very long. Transactions that compete with each to pay
+              higher fees are likely to be validated faster.
+              <br /> The BlockSpace limit is intended to protect the
+              decentralized nature of monolithic blockchains from centralization
+              via large blocks. It protects small miners from being outcompeted
+              by large blocks by requiring higher minimum fees with larger block
+              size, which regulates the number of transactions that can be
+              included in each block. It does not mean that there will be this
+              many transactions in any given period, but rather gives an idea of
+              how many transactions the network can process in a certain period
+              when under stress.
+            </Text>
+          </Box>
+
+          <Box pt={5} width={"62vw"}>
+            <Text
+              style={{ marginBottom: 6 }}
+              className="rubix-fw-700"
+              fontSize="3xl"
+            >
+              BTC vs BCH
+            </Text>
+            <Text fontSize="xl">
+              BlockSpace is the number of transactions which the blockchain will
+              order before appending to the chain of previous transactions. For
+              example, if max block space is 200KB and average transactions take
+              only 1Kb, then the chain may have a room for ~190 transactions in
+              one block. BlockSpace is a measure of how busy is the blockchain.
+              Low BlockSpace may mean transactions remain unattended in the
+              Mempool for very long. Transactions that compete with each to pay
+              higher fees are likely to be validated faster.
+              <br /> The BlockSpace limit is intended to protect the
+              decentralized nature of monolithic blockchains from centralization
+              via large blocks. It protects small miners from being outcompeted
+              by large blocks by requiring higher minimum fees with larger block
+              size, which regulates the number of transactions that can be
+              included in each block. It does not mean that there will be this
+              many transactions in any given period, but rather gives an idea of
+              how many transactions the network can process in a certain period
+              when under stress.
+            </Text>
+          </Box>
+        </Box>
+      </Box>
+    </Box>
+  );
+};
+
+export default ArticleInternalPage;

src/components/BuildPage/Connect.jsx

@@ -60,35 +60,31 @@ const Connect = () => {
       //   backgroundSize={"cover"}
       //   backgroundRepeat={"no-repeat"}
       backgroundColor={"#000"}
-      padding={"5rem"}
-      sx={{
-        "@media (max-width: 1024px)": {
-          height: "auto",
-        },
-        "@media (max-width: 600px)": {
-          fontSize: "28px",
-        },
-      }}
+      backgroundSize={"cover"}
+      backgroundRepeat={"no-repeat"}
     >
-      <Container maxW="container.xl">
+      <Container
+        maxW={"container.xl"}
+        padding={"0 5rem"}
+        paddingBottom={"5rem"}
+        paddingTop={"5rem"}
+        sx={{
+          "@media (max-width: 1024px)": {
+            padding: "3rem",
+          },
+          "@media (max-width: 435px)": {},
+        }}
+      >
         <Text
           className="rubix-text-title"
           fontFamily={"Mona Sans"}
           fontWeight={"700"}
           //   fontSize={"40px"}
           color={"#fff"}
-          textAlign={"center"}
+          marginBottom={"3rem"}
         >
           Connect with Rubix community
         </Text>
-      </Container>
-
-      <Container
-        maxW="container.xl"
-        justifyContent={"center"}
-        marginTop={"4rem"}
-        textAlign={"center"}
-      >
         <SimpleGrid
           spacing={4}
           templateColumns="repeat(auto-fill, minmax(300px, 1fr))"
@@ -155,62 +151,12 @@ const Connect = () => {
                     ) : (
                       ""
                     )}
-                    {/* <>{console.log(item.logo1)}</> */}
                   </CardBody>
                 </Card>
               </Box>
             </>
           ))}
         </SimpleGrid>
-        <Button
-          //   className="rubix-text-medium"
-          position={"relative"}
-          backgroundColor={"transparent"}
-          cursor={"pointer"}
-          transition="0.3s ease-in-out"
-          color={"#fff"}
-          height={"60px"}
-          fontFamily={"Poppins"}
-          fontWeight={"400"}
-          border={"1px solid white"}
-          borderRadius={"10px"}
-          fontSize={"20px"}
-          zIndex={"1"}
-          overflow={"hidden"}
-          marginTop={"4rem"}
-          textAlign={"center"}
-          padding={"0 2rem"}
-          sx={{
-            "::before": {
-              content: '""',
-              position: "absolute",
-              top: "50%",
-              left: "50%",
-              transform: "translate(-50%, -50%)",
-              width: "65px",
-              height: "65px",
-              borderRadius: "50%",
-              transition: "0.35s linear",
-              zIndex: -1,
-              bgGradient:
-                "radial-gradient(circle, #ffffff, #eee2f2, #e7c3dc, #e5a3ba, #de858e)",
-              opacity: "0",
-            },
-            "&:hover::before": {
-              width: "100%",
-              height: "120%",
-              borderRadius: "0px",
-              opacity: "1",
-            },
-          }}
-          _hover={{
-            color: "#000",
-            border: "none",
-            zIndex: 1,
-          }}
-        >
-          Explore our community
-        </Button>
       </Container>
     </Box>
   );

src/components/BuildPage/Solve.jsx

@@ -154,14 +154,16 @@ const Solve = () => {
                   background={"transparent"}
                   color={"#fff"}
                   fontFamily={"Poppins"}
-                    fontWeight={"100"}
+                  fontWeight={"100"}
                   fontSize={"16px"}
                   padding={"0px"}
                   _hover={{
                     background: "transparent",
                   }}
                 >
-                  {expandedCardIndex === index ? "Less" : "....More"}
+                  {expandedCardIndex === index
+                    ? "Read Less.."
+                    : "....Read More"}
                 </Button>
               </CardBody>
               <CardFooter padding={"0px"}></CardFooter>

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"}>

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 = ({ key, date, text }) => {
+  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={"455px !important"}
+        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;

src/components/Chip/Chip.jsx

@@ -0,0 +1,19 @@
+/* eslint-disable react/prop-types */
+
+const Chip = ({ title }) => {
+  return (
+    <span
+      className="rubix-text-small"
+      style={{
+        background: "linear-gradient(to right, #808080, #615D6E)", // Adjust colors as needed
+        display: "inline-block", // Ensure the span takes up the necessary space
+        padding: "2px 18px", // Add padding for better visibility
+        borderRadius: "18px",
+      }}
+    >
+      {title}
+    </span>
+  );
+};
+
+export default Chip;

src/components/Footer/Footer.jsx

@@ -28,274 +28,303 @@ import reddit from "../../assets/images/reddit.png";
 import fb from "../../assets/images/fb.png";
 import discord from "../../assets/images/discord.png";
 import { Link } from "react-router-dom";
+import { useEffect, useState } from "react";
+import MobileFooter from "./MobileFooter";
 
 const Footer = () => {
   const [isSmallScreen] = useMediaQuery("(max-width: 996px)");
+  const [windowWidth, setWindowWidth] = useState(window.innerWidth);
+
+  useEffect(() => {
+    const handleResize = () => {
+      setWindowWidth(window.innerWidth);
+    };
+
+    window.addEventListener("resize", handleResize);
+
+    return () => {
+      window.removeEventListener("resize", handleResize);
+    };
+  }, []);
+
+  const isMobile = windowWidth <= 996;
+
   return (
     <>
-      <Box backgroundColor={"#101015"} borderBottom={"1px solid #fff"}>
-        <Container
-          maxW="container.xl"
-          padding={"4rem"}
-          sx={{
-            "@media (max-width: 1024px)": {},
-            "@media (max-width: 535px)": {
-              padding: "1rem",
-            },
-          }}
-        >
-          <Box paddingBottom={"2rem"}>
-            <Image src={logo} width={"150px"} />
-          </Box>
-          <Box
-            display={"flex"}
-            alignItems={"center"}
-            gap={"8rem"}
-            sx={{
-              "@media (max-width: 1024px)": {},
-              "@media (max-width: 996px)": {
-                flexDirection: "column",
-                gap: "3rem",
-                alignItems: "flex-start",
-              },
-            }}
-          >
-            <Box>
-              <Box marginBottom={"20px"}>
-                <Text fontSize={"28px"} color={"#E9E9E9"} fontWeight={"600"}>
-                  Stay up to date with Rubix
-                </Text>
-              </Box>
-              <Text
-                fontSize={"18px"}
-                color={"#B0B0B0"}
-                fontFamily={"Poppins"}
-                fontWeight={"400"}
-                marginBottom={"1rem"}
-              >
-                Sign up for our newsletter and receive the{" "}
-                {isSmallScreen ? null : <br />} latest updates.
-              </Text>
-              <Flex alignItems="center">
-                <Input
-                  type="email"
-                  placeholder="Email"
-                  borderRadius={"0%"}
-                  border={"none"}
-                  background={"#444444"}
-                  padding={"1.5rem"}
-                  borderTopLeftRadius={"5px"}
-                  borderBottomLeftRadius={"5px"}
-                  // value={}
-                  // onChange={(e) => setEmail(e.target.value)}
-                />
-                <Button
-                  backgroundColor={"#DE858E"}
-                  fontFamily={"Poppins"}
-                  fontWeight={"400"}
-                  color={"#fff"}
-                  borderRadius={"0%"}
-                  padding={"1.5rem 1.5rem"}
-                  borderTopRightRadius={"5px"}
-                  borderBottomRightRadius={"5px"}
-                  width={"167px"}
-                  //   onClick={handleSubmit}
-                >
-                  Submit
-                </Button>
-              </Flex>
-            </Box>
-            <Box
-              display={"flex"}
-              alignItems={"center"}
-              gap={"5rem"}
-              justifyContent={"flex-start"}
+      {!isMobile ? (
+        <>
+          {" "}
+          <Box backgroundColor={"#101015"} borderBottom={"1px solid #fff"}>
+            <Container
+              maxW="container.xl"
+              padding={"4rem"}
               sx={{
                 "@media (max-width: 1024px)": {},
-                "@media (max-width: 996px)": {
-                  flexDirection: "column",
-                  gap: "2rem",
+                "@media (max-width: 535px)": {
+                  padding: "1rem",
                 },
               }}
             >
-              <Box>
-                <Text
-                  color={"#B0B0B0"}
-                  fontFamily={"Mona Sans"}
-                  fontWeight={"500"}
-                  fontSize={"22px"}
-                  marginBottom={"2rem"}
-                >
-                  Explore
-                </Text>
-                <UnorderedList
-                  listStyleType={"none"}
-                  color={"#B0B0B0"}
-                  fontFamily={"Poppins"}
-                  fontWeight={"400"}
-                  marginLeft={"0px !important"}
-                >
-                  <Link to="/LearnPage">
-                    <ListItem marginBottom={"1rem"}>Learn</ListItem>
-                  </Link>
-
-                  <Link to="/community">
-                    <ListItem marginBottom={"1rem"}>Community</ListItem>
-                  </Link>
-
-                  <ListItem marginBottom={"1rem"}>Wallet</ListItem>
-                  <ListItem marginBottom={"1rem"}>Careers</ListItem>
-                </UnorderedList>
-              </Box>
-              <Box>
-                <Text
-                  color={"#B0B0B0"}
-                  fontFamily={"Mona Sans"}
-                  fontWeight={"500"}
-                  fontSize={"22px"}
-                  marginBottom={"2rem"}
-                >
-                  Social
-                </Text>
-                <UnorderedList
-                  listStyle={"none"}
-                  listStyleType={"none"}
-                  color={"#B0B0B0"}
-                  fontFamily={"Poppins"}
-                  fontWeight={"400"}
-                  marginLeft={"0px !important"}
-                >
-                  <ListItem
-                    marginBottom={"1rem"}
-                    display={"flex"}
-                    alignItems={"center"}
-                    gap={"10px"}
-                  >
-                    <Image src={tele} />
-                    telegram
-                  </ListItem>
-                  <ListItem
-                    marginBottom={"1rem"}
-                    display={"flex"}
-                    alignItems={"center"}
-                    gap={"10px"}
-                  >
-                    <Image src={x} />
-                    Twitter
-                  </ListItem>
-                  <ListItem
-                    marginBottom={"1rem"}
-                    display={"flex"}
-                    alignItems={"center"}
-                    gap={"10px"}
-                  >
-                    <Image src={github} />
-                    GitHub
-                  </ListItem>
-                  <ListItem
-                    marginBottom={"1rem"}
-                    display={"flex"}
-                    alignItems={"center"}
-                    gap={"10px"}
-                  >
-                    <Image src={discord} />
-                    Discord
-                  </ListItem>
-                </UnorderedList>
+              <Box paddingBottom={"2rem"}>
+                <Image src={logo} width={"150px"} />
               </Box>
               <Box
+                display={"flex"}
+                alignItems={"center"}
+                gap={"8rem"}
                 sx={{
                   "@media (max-width: 1024px)": {},
                   "@media (max-width: 996px)": {
-                    marginTop: "-2rem",
+                    flexDirection: "column",
+                    gap: "3rem",
+                    alignItems: "flex-start",
                   },
                 }}
               >
-                <UnorderedList
-                  listStyle={"none"}
-                  listStyleType={"none"}
-                  color={"#B0B0B0"}
-                  fontFamily={"Poppins"}
-                  fontWeight={"400"}
-                  marginLeft={"0px !important"}
+                <Box>
+                  <Box marginBottom={"20px"}>
+                    <Text
+                      fontSize={"28px"}
+                      color={"#E9E9E9"}
+                      fontWeight={"600"}
+                    >
+                      Stay up to date with Rubix
+                    </Text>
+                  </Box>
+                  <Text
+                    fontSize={"18px"}
+                    color={"#B0B0B0"}
+                    fontFamily={"Poppins"}
+                    fontWeight={"400"}
+                    marginBottom={"1rem"}
+                  >
+                    Sign up for our newsletter and receive the{" "}
+                    {isSmallScreen ? null : <br />} latest updates.
+                  </Text>
+                  <Flex alignItems="center">
+                    <Input
+                      type="email"
+                      placeholder="Email"
+                      borderRadius={"0%"}
+                      border={"none"}
+                      background={"#444444"}
+                      padding={"1.5rem"}
+                      borderTopLeftRadius={"5px"}
+                      borderBottomLeftRadius={"5px"}
+                      // value={}
+                      // onChange={(e) => setEmail(e.target.value)}
+                    />
+                    <Button
+                      backgroundColor={"#DE858E"}
+                      fontFamily={"Poppins"}
+                      fontWeight={"400"}
+                      color={"#fff"}
+                      borderRadius={"0%"}
+                      padding={"1.5rem 1.5rem"}
+                      borderTopRightRadius={"5px"}
+                      borderBottomRightRadius={"5px"}
+                      width={"167px"}
+                      //   onClick={handleSubmit}
+                    >
+                      Submit
+                    </Button>
+                  </Flex>
+                </Box>
+                <Box
+                  display={"flex"}
+                  alignItems={"center"}
+                  gap={"5rem"}
+                  justifyContent={"flex-start"}
+                  sx={{
+                    "@media (max-width: 1024px)": {},
+                    "@media (max-width: 996px)": {
+                      flexDirection: "column",
+                      gap: "2rem",
+                    },
+                  }}
                 >
-                  <ListItem
-                    marginBottom={"1rem"}
-                    display={"flex"}
-                    alignItems={"center"}
-                    gap={"10px"}
-                  >
-                    <Image src={reddit} />
-                    Reddit
-                  </ListItem>
-                  <ListItem
-                    marginBottom={"1rem"}
-                    display={"flex"}
-                    alignItems={"center"}
-                    gap={"10px"}
-                  >
-                    <Image src={fb} />
-                    Facebook
-                  </ListItem>
-                  <ListItem
-                    marginBottom={"1rem"}
-                    display={"flex"}
-                    alignItems={"center"}
-                    gap={"10px"}
-                  >
-                    <Image src={linked} />
-                    LinkedIn
-                  </ListItem>
-                </UnorderedList>
-              </Box>
-            </Box>
-          </Box>
-        </Container>
-      </Box>
-      <Box backgroundColor={"#101015"}>
-        <Container
-          maxW="container.xl"
-          padding={"4rem"}
-          display={"flex"}
-          alignItems={"center"}
-          gap={"2rem"}
-          sx={{
-            "@media (max-width: 1024px)": {},
-            "@media (max-width: 600px)": {
-              flexDirection: "column",
-              alignItems: "flex-start",
-              padding: "1rem",
-            },
-          }}
-        >
-          <Image src={logo} width={"100px"} paddingBottom={"5px"} />
+                  <Box>
+                    <Text
+                      color={"#B0B0B0"}
+                      fontFamily={"Mona Sans"}
+                      fontWeight={"500"}
+                      fontSize={"22px"}
+                      marginBottom={"2rem"}
+                    >
+                      Explore
+                    </Text>
+                    <UnorderedList
+                      listStyleType={"none"}
+                      color={"#B0B0B0"}
+                      fontFamily={"Poppins"}
+                      fontWeight={"400"}
+                      marginLeft={"0px !important"}
+                    >
+                      <Link to="/LearnPage">
+                        <ListItem marginBottom={"1rem"}>Learn</ListItem>
+                      </Link>
 
-          <Text
-            color={"#fff"}
-            fontFamily={"Poppins"}
-            fontSize={"15px"}
-            fontWeight={"400"}
-          >
-            All rights reserved.
-          </Text>
-          <Text
-            color={"#fff"}
-            fontFamily={"Poppins"}
-            fontSize={"15px"}
-            fontWeight={"400"}
-          >
-            Privacy Policy
-          </Text>
-          <Text
-            color={"#fff"}
-            fontFamily={"Poppins"}
-            fontSize={"15px"}
-            fontWeight={"400"}
-          >
-            Terms Conditions
-          </Text>
-        </Container>
-      </Box>
+                      <Link to="/community">
+                        <ListItem marginBottom={"1rem"}>Community</ListItem>
+                      </Link>
+
+                      <ListItem marginBottom={"1rem"}>Wallet</ListItem>
+                      <ListItem marginBottom={"1rem"}>Careers</ListItem>
+                    </UnorderedList>
+                  </Box>
+                  <Box>
+                    <Text
+                      color={"#B0B0B0"}
+                      fontFamily={"Mona Sans"}
+                      fontWeight={"500"}
+                      fontSize={"22px"}
+                      marginBottom={"2rem"}
+                    >
+                      Social
+                    </Text>
+                    <UnorderedList
+                      listStyle={"none"}
+                      listStyleType={"none"}
+                      color={"#B0B0B0"}
+                      fontFamily={"Poppins"}
+                      fontWeight={"400"}
+                      marginLeft={"0px !important"}
+                    >
+                      <ListItem
+                        marginBottom={"1rem"}
+                        display={"flex"}
+                        alignItems={"center"}
+                        gap={"10px"}
+                      >
+                        <Image src={tele} />
+                        telegram
+                      </ListItem>
+                      <ListItem
+                        marginBottom={"1rem"}
+                        display={"flex"}
+                        alignItems={"center"}
+                        gap={"10px"}
+                      >
+                        <Image src={x} />
+                        Twitter
+                      </ListItem>
+                      <ListItem
+                        marginBottom={"1rem"}
+                        display={"flex"}
+                        alignItems={"center"}
+                        gap={"10px"}
+                      >
+                        <Image src={github} />
+                        GitHub
+                      </ListItem>
+                      <ListItem
+                        marginBottom={"1rem"}
+                        display={"flex"}
+                        alignItems={"center"}
+                        gap={"10px"}
+                      >
+                        <Image src={discord} />
+                        Discord
+                      </ListItem>
+                    </UnorderedList>
+                  </Box>
+                  <Box
+                    sx={{
+                      "@media (max-width: 1024px)": {},
+                      "@media (max-width: 996px)": {
+                        marginTop: "-2rem",
+                      },
+                    }}
+                  >
+                    <UnorderedList
+                      listStyle={"none"}
+                      listStyleType={"none"}
+                      color={"#B0B0B0"}
+                      fontFamily={"Poppins"}
+                      fontWeight={"400"}
+                      marginLeft={"0px !important"}
+                    >
+                      <ListItem
+                        marginBottom={"1rem"}
+                        display={"flex"}
+                        alignItems={"center"}
+                        gap={"10px"}
+                      >
+                        <Image src={reddit} />
+                        Reddit
+                      </ListItem>
+                      <ListItem
+                        marginBottom={"1rem"}
+                        display={"flex"}
+                        alignItems={"center"}
+                        gap={"10px"}
+                      >
+                        <Image src={fb} />
+                        Facebook
+                      </ListItem>
+                      <ListItem
+                        marginBottom={"1rem"}
+                        display={"flex"}
+                        alignItems={"center"}
+                        gap={"10px"}
+                      >
+                        <Image src={linked} />
+                        LinkedIn
+                      </ListItem>
+                    </UnorderedList>
+                  </Box>
+                </Box>
+              </Box>
+            </Container>
+          </Box>
+          <Box backgroundColor={"#101015"}>
+            <Container
+              maxW="container.xl"
+              padding={"4rem"}
+              display={"flex"}
+              alignItems={"center"}
+              gap={"2rem"}
+              sx={{
+                "@media (max-width: 1024px)": {},
+                "@media (max-width: 600px)": {
+                  flexDirection: "column",
+                  alignItems: "flex-start",
+                  padding: "1rem",
+                },
+              }}
+            >
+              <Image src={logo} width={"100px"} paddingBottom={"5px"} />
+
+              <Text
+                color={"#fff"}
+                fontFamily={"Poppins"}
+                fontSize={"15px"}
+                fontWeight={"400"}
+              >
+                All rights reserved.
+              </Text>
+              <Text
+                color={"#fff"}
+                fontFamily={"Poppins"}
+                fontSize={"15px"}
+                fontWeight={"400"}
+              >
+                Privacy Policy
+              </Text>
+              <Text
+                color={"#fff"}
+                fontFamily={"Poppins"}
+                fontSize={"15px"}
+                fontWeight={"400"}
+              >
+                Terms Conditions
+              </Text>
+            </Container>
+          </Box>
+        </>
+      ) : (
+        <MobileFooter />
+      )}
     </>
   );
 };

src/components/Footer/MobileFooter.jsx

@@ -0,0 +1,209 @@
+/* eslint-disable no-unused-vars */
+/* eslint-disable react/no-unescaped-entities */
+import {
+  Box,
+  Button,
+  Container,
+  Flex,
+  Image,
+  Input,
+  List,
+  ListItem,
+  Text,
+  UnorderedList,
+} from "@chakra-ui/react";
+import { useMediaQuery } from "@chakra-ui/react";
+import {
+  FormControl,
+  FormLabel,
+  FormErrorMessage,
+  FormHelperText,
+  Accordion,
+  AccordionItem,
+  AccordionButton,
+  AccordionPanel,
+  AccordionIcon,
+} from "@chakra-ui/react";
+import logo from "../../assets/images/rubix.png";
+import x from "../../assets/images/x.png";
+import linked from "../../assets/images/linked.png";
+import github from "../../assets/images/github.png";
+import tele from "../../assets/images/tele.png";
+import reddit from "../../assets/images/reddit.png";
+import fb from "../../assets/images/fb.png";
+import discord from "../../assets/images/discord.png";
+import { Link } from "react-router-dom";
+import { AddIcon, MinusIcon } from "@chakra-ui/icons";
+import { useEffect, useState } from "react";
+
+const MobileFooter = () => {
+  return (
+    <Box backgroundColor={"#000"}>
+      <Accordion allowToggle>
+        <AccordionItem>
+          {({ isExpanded }) => (
+            <>
+              <h2>
+                <AccordionButton>
+                  <Box as="span" flex="1" textAlign="left">
+                    <Text
+                      color={"#B0B0B0"}
+                      fontFamily={"Mona Sans"}
+                      fontWeight={"500"}
+                      fontSize={"16px"}
+                    >
+                      Explore
+                    </Text>
+                  </Box>
+                  {isExpanded ? (
+                    <MinusIcon fontSize="12px" color={"#fff"} />
+                  ) : (
+                    <AddIcon fontSize="12px" color={"#fff"} />
+                  )}
+                </AccordionButton>
+              </h2>
+              <AccordionPanel pb={4}>
+                <UnorderedList
+                  listStyleType={"none"}
+                  color={"#B0B0B0"}
+                  fontFamily={"Poppins"}
+                  fontWeight={"400"}
+                  marginLeft={"0px !important"}
+                >
+                  <Link to="/LearnPage">
+                    <ListItem marginBottom={"1rem"}>Learn</ListItem>
+                  </Link>
+
+                  <Link to="/community">
+                    <ListItem marginBottom={"1rem"}>Community</ListItem>
+                  </Link>
+
+                  <ListItem marginBottom={"1rem"}>Wallet</ListItem>
+                  <ListItem marginBottom={"1rem"}>Careers</ListItem>
+                </UnorderedList>
+              </AccordionPanel>
+            </>
+          )}
+        </AccordionItem>
+        <AccordionItem>
+          {({ isExpanded }) => (
+            <>
+              <h2>
+                <AccordionButton>
+                  <Box as="span" flex="1" textAlign="left">
+                    <Text
+                      color={"#B0B0B0"}
+                      fontFamily={"Mona Sans"}
+                      fontWeight={"500"}
+                      fontSize={"22px"}
+                    >
+                      Social
+                    </Text>
+                  </Box>
+                  {isExpanded ? (
+                    <MinusIcon fontSize="12px" color={"#fff"} />
+                  ) : (
+                    <AddIcon fontSize="12px" color={"#fff"} />
+                  )}
+                </AccordionButton>
+              </h2>
+              <AccordionPanel pb={4}>
+                <UnorderedList
+                  listStyle={"none"}
+                  listStyleType={"none"}
+                  color={"#B0B0B0"}
+                  fontFamily={"Poppins"}
+                  fontWeight={"400"}
+                  marginLeft={"0px !important"}
+                >
+                  <ListItem
+                    marginBottom={"1rem"}
+                    display={"flex"}
+                    alignItems={"center"}
+                    gap={"10px"}
+                  >
+                    <Image src={tele} />
+                    telegram
+                  </ListItem>
+                  <ListItem
+                    marginBottom={"1rem"}
+                    display={"flex"}
+                    alignItems={"center"}
+                    gap={"10px"}
+                  >
+                    <Image src={x} />
+                    Twitter
+                  </ListItem>
+                  <ListItem
+                    marginBottom={"1rem"}
+                    display={"flex"}
+                    alignItems={"center"}
+                    gap={"10px"}
+                  >
+                    <Image src={github} />
+                    GitHub
+                  </ListItem>
+                  <ListItem
+                    marginBottom={"1rem"}
+                    display={"flex"}
+                    alignItems={"center"}
+                    gap={"10px"}
+                  >
+                    <Image src={discord} />
+                    Discord
+                  </ListItem>
+                </UnorderedList>
+              </AccordionPanel>
+            </>
+          )}
+        </AccordionItem>
+      </Accordion>
+      <Box backgroundColor={"#101015"}>
+        <Container
+          maxW="container.xl"
+          padding={"4rem"}
+          display={"flex"}
+          alignItems={"center"}
+          gap={"2rem"}
+          sx={{
+            "@media (max-width: 1024px)": {},
+            "@media (max-width: 600px)": {
+              flexDirection: "column",
+              alignItems: "flex-start",
+              padding: "1rem",
+            },
+          }}
+        >
+          <Image src={logo} width={"100px"} paddingBottom={"5px"} />
+
+          <Text
+            color={"#fff"}
+            fontFamily={"Poppins"}
+            fontSize={"15px"}
+            fontWeight={"400"}
+          >
+            All rights reserved.
+          </Text>
+          <Text
+            color={"#fff"}
+            fontFamily={"Poppins"}
+            fontSize={"15px"}
+            fontWeight={"400"}
+          >
+            Privacy Policy
+          </Text>
+          <Text
+            color={"#fff"}
+            fontFamily={"Poppins"}
+            fontSize={"15px"}
+            fontWeight={"400"}
+          >
+            Terms Conditions
+          </Text>
+        </Container>
+      </Box>
+    </Box>
+  );
+};
+
+export default MobileFooter;

src/components/HomePage/HomeBanner.jsx

@@ -18,7 +18,7 @@ const BannerContent = [
 ];
 
 const HomeBanner = () => {
-  const [isSmallScreen] = useMediaQuery("max-width: 435px");
+  const [isSmallScreen] = useMediaQuery("(max-width: 435px)");
   return (
     <Box
       height={"100vh"}
@@ -62,73 +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: "40px",
+                marginTop: "2rem",
+              },
+            }}
+          >
+            {BannerContent[0].heading1}
+            {!isSmallScreen ? (
+              <>
+                <br />
+                <span
+                  style={{
+                    color: "#fff",
+                    fontWeight: "500",
                     fontSize: "38px",
-                    marginBottom: "2rem",
-                  },
-                  "@media (max-width: 412px)": {
-                    fontSize: "24px",
-                    marginTop: "2rem",
-                  },
-                }}
-              >
-                {item.heading1}
-                {!isSmallScreen ? (
-                  <Text
-                    fontSize={"42px"}
-                    style={{
-                      color: "#fff",
-                      fontWeight: "500",
-                    }}
-                  >{item.heading2}
-                  </Text>
-                ) : (
-                  <Text
-                    style={{
-                      color: "#fff",
-                      fontWeight: "500",
-                      fontSize: "24px",
-                    }}
-                  >
-                    {item.heading2}
-                  </Text>
-                )}
-              </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>
+              </>
+            ) : (
+              <>
+                <br />
+                <span
+                  style={{
+                    color: "#fff",
+                    fontWeight: "500",
+                    fontSize: "25px",
+                  }}
+                >
+                  {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"}

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>
     </>
   );
 }

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}

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>

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"}

src/components/MobileComponent/PartnerMobile.jsx

@@ -18,54 +18,59 @@ 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 Slider from "react-slick";
+import bescom from "../../assets/images/bescom.png";
+import { Swiper, SwiperSlide } from "swiper/react";
+
+// Import Swiper styles
+import "swiper/css";
+import "swiper/css/pagination";
+import "swiper/css/navigation";
+
+import { Navigation, Pagination, Autoplay } 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 = "200px";
+const phoneWidth = "200px";
+const imgHeight = "130px";
+
+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"}
@@ -75,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"}
@@ -141,38 +102,303 @@ 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     */}
-
-        {/* </Container> */}
-      </Slider>
+      <Box>
+        <Swiper
+          pagination={true}
+          navigation={true}
+          modules={[Navigation, Pagination, Autoplay]}
+          loop={true}
+          autoplay={{
+            delay: 2500,
+            disableOnInteraction: false,
+          }}
+          style={{
+            PaddingBottom: "2rem",
+          }}
+        >
+          <SwiperSlide>
+            <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: `${imgHeight}`,
+                    objectFit: "contain",
+                  },
+                  "@media (max-width: 600px)": {
+                    width: `${phoneWidth}`,
+                    height: `${imgHeight}`,
+                  },
+                }}
+              />
+            </Box>
+          </SwiperSlide>
+          <SwiperSlide>
+            <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: `${imgHeight}`,
+                    objectFit: "contain",
+                  },
+                  "@media (max-width: 600px)": {
+                    width: `${phoneWidth}`,
+                    height: `${imgHeight}`,
+                  },
+                }}
+              />
+            </Box>
+          </SwiperSlide>
+          <SwiperSlide>
+            <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={jupiter}
+                sx={{
+                  "@media (max-width: 996px)": {
+                    width: `${tabWidth}`,
+                    height: `${imgHeight}`,
+                    objectFit: "contain",
+                  },
+                  "@media (max-width: 600px)": {
+                    width: `${phoneWidth}`,
+                    height: `${imgHeight}`,
+                  },
+                }}
+              />
+            </Box>
+          </SwiperSlide>
+          <SwiperSlide>
+            <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: `${imgHeight}`,
+                    objectFit: "contain",
+                  },
+                  "@media (max-width: 600px)": {
+                    width: `${phoneWidth}`,
+                    height: `${imgHeight}`,
+                  },
+                }}
+              />
+            </Box>
+          </SwiperSlide>
+          <SwiperSlide>
+            <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={bescom}
+                sx={{
+                  "@media (max-width: 996px)": {
+                    width: `${tabWidth}`,
+                    height: `${imgHeight}`,
+                    objectFit: "contain",
+                  },
+                  "@media (max-width: 600px)": {
+                    width: `${phoneWidth}`,
+                    height: `${imgHeight}`,
+                  },
+                }}
+              />
+            </Box>
+          </SwiperSlide>
+          <SwiperSlide>
+            <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: `${imgHeight}`,
+                    objectFit: "contain",
+                  },
+                  "@media (max-width: 600px)": {
+                    width: `${phoneWidth}`,
+                    height: `${imgHeight}`,
+                  },
+                }}
+              />
+            </Box>
+          </SwiperSlide>
+          <SwiperSlide>
+            <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: `${imgHeight}`,
+                    objectFit: "contain",
+                  },
+                  "@media (max-width: 600px)": {
+                    width: `${phoneWidth}`,
+                    height: `${imgHeight}`,
+                  },
+                }}
+              />
+            </Box>
+          </SwiperSlide>
+          <SwiperSlide>
+            <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={bescom}
+                sx={{
+                  "@media (max-width: 996px)": {
+                    width: `${tabWidth}`,
+                    height: `${imgHeight}`,
+                    objectFit: "contain",
+                  },
+                  "@media (max-width: 600px)": {
+                    width: `${phoneWidth}`,
+                    height: `${imgHeight}`,
+                  },
+                }}
+              />
+            </Box>
+          </SwiperSlide>
+          {/* Box2     */}
+          <SwiperSlide>
+            <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={exr}
+                sx={{
+                  "@media (max-width: 996px)": {
+                    width: `${tabWidth}`,
+                    height: `${imgHeight}`,
+                    objectFit: "contain",
+                  },
+                  "@media (max-width: 600px)": {
+                    width: `${phoneWidth}`,
+                    height: `${imgHeight}`,
+                  },
+                }}
+              />
+            </Box>
+          </SwiperSlide>
+        </Swiper>
+      </Box>
+      {/* Box2     */}
     </Box>
   );
 }

src/components/MobileComponent/ResourcesMobile.jsx

@@ -0,0 +1,73 @@
+/* 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 Content = {
+  heading: `Resources and Latest Happenings`,
+};
+
+const ResourcesMobile = () => {
+  return (
+    <Box backgroundColor={"#101015"} padding={"2rem 1rem 3rem"}>
+      <Text
+        as={"h2"}
+        paddingTop={"2rem"}
+        paddingBottom={"2rem"}
+        fontWeight={700}
+        fontSize={"40px"}
+        textAlign={"center"}
+        textTransform={"capitalize"}
+        color={"#fff"}
+        sx={{
+          "@media (max-width: 435px)": {
+            fontSize: "26px",
+          },
+          "@media (max-width: 375px)": {},
+        }}
+      >
+        {Content.heading}
+      </Text>
+      <Swiper
+        pagination={true}
+        navigation={true}
+        modules={[Navigation, Pagination]}
+        loop={true}
+      >
+        {content.map((item) => (
+          <>
+            <SwiperSlide>
+              <MobileHomeCard key={item.id} date={item.date} text={item.text} />
+            </SwiperSlide>
+          </>
+        ))}
+      </Swiper>
+    </Box>
+  );
+};
+
+export default ResourcesMobile;

src/components/NavBar/NavBar.jsx

@@ -1,10 +1,32 @@
 /* eslint-disable no-unused-vars */
-import { Box, Image } from "@chakra-ui/react";
+import {
+  Box,
+  Image,
+  Popover,
+  PopoverTrigger,
+  PopoverContent,
+  PopoverHeader,
+  PopoverBody,
+  PopoverFooter,
+  PopoverArrow,
+  PopoverCloseButton,
+  PopoverAnchor,
+  Button,
+} from "@chakra-ui/react";
 import { Outlet, Link, useLocation } from "react-router-dom";
 import { useEffect, useState } from "react";
 import logo from "../../assets/images/rubix.png";
 import { MobileMenu } from "../MobileMenu/MobileMenu";
 import arrow from "../../assets/images/arrow.png";
+import learnIcon from "../../assets/images/Navicons/learnNav.png";
+import pledgeIcon from "../../assets/images/Navicons/pledgeIcon.png";
+import contractIcon from "../../assets/images/Navicons/contractIcon.png";
+import tokenIcon from "../../assets/images/Navicons/contractIcon.png";
+import buildIcon from "../../assets/images/Navicons/buildIcon.png";
+import nodeIcon from "../../assets/images/Navicons/nodeIcon.png";
+import quorumIcon from "../../assets/images/Navicons/quorumIcon.png";
+import subnetsIcon from "../../assets/images/Navicons/subnetsIcon.png";
+import fintechIcon from "../../assets/images/Navicons/fintechIcon.png";
 
 const NavBar = () => {
   const [isScrolled, setIsScrolled] = useState(false);
@@ -18,7 +40,7 @@ const NavBar = () => {
   const active = {
     content: "''",
     position: "absolute",
-    bottom: "-5px",
+    bottom: "0px",
     left: "50%",
     width: "130%",
     height: "3px",
@@ -28,6 +50,16 @@ const NavBar = () => {
     transition: "all .3s",
   };
 
+  const highlight = {
+    color: "rgb(222, 133, 142)",
+  };
+
+  const normal = {
+    color: "#fff",
+  };
+
+  const iconwidth = "50px";
+
   useEffect(() => {
     const handleScroll = () => {
       const scrollPosition = window.scrollY;
@@ -140,49 +172,469 @@ const NavBar = () => {
                   },
                 }}
               >
-                <Link
-                  to="/LearnPage"
-                  className="link"
-                  style={{ position: "relative" }}
-                >
-                  LEARN
-                  <span
-                    style={
-                      location.pathname === "/LearnPage" ? active : linkStyle
-                    }
-                  />
-                </Link>
+                <Popover>
+                  <PopoverTrigger>
+                    <Button
+                      backgroundColor={"transparent"}
+                      color={"#fff"}
+                      fontWeight={"400"}
+                      _hover={{
+                        backgroundColor: "transparent",
+                      }}
+                    >
+                      LEARN
+                      <span
+                        style={
+                          location.pathname === "/LearnPage"
+                            ? active
+                            : linkStyle
+                        }
+                      />
+                    </Button>
+                  </PopoverTrigger>
+                  <PopoverContent
+                    backgroundColor={"#0D0B20"}
+                    borderRadius={"10px"}
+                    border={"none"}
+                    padding={"1rem"}
+                  >
+                    <PopoverArrow backgroundColor={"#0D0B20"} shadow={"none"} />
+                    <PopoverBody>
+                      <Link
+                        to="/LearnPage"
+                        className="link"
+                        style={
+                          location.pathname === "/LearnPage"
+                            ? highlight
+                            : normal
+                        }
+                      >
+                        <Box
+                          display={"flex"}
+                          alignItems={"center"}
+                          gap={"1rem"}
+                          marginBottom={"1rem"}
+                        >
+                          <Image src={learnIcon} width={`${iconwidth}`} />
+                          Learn
+                        </Box>
+                      </Link>
+                    </PopoverBody>
+
+                    <PopoverBody>
+                      <Link
+                        to="/LearnPage"
+                        className="link"
+                        // style={
+                        //   location.pathname === "/LearnPage"
+                        //     ? highlight
+                        //     : normal
+                        // }
+                      >
+                        <Box
+                          display={"flex"}
+                          alignItems={"center"}
+                          gap={"1rem"}
+                          marginBottom={"1rem"}
+                        >
+                          <Image src={pledgeIcon} width={`${iconwidth}`} />
+                          Proof-of-pledge Protocol
+                        </Box>
+                      </Link>
+                    </PopoverBody>
+
+                    <PopoverBody>
+                      <Link
+                        to="/LearnPage"
+                        className="link"
+                        // style={
+                        //   location.pathname === "/LearnPage"
+                        //     ? highlight
+                        //     : normal
+                        // }
+                      >
+                        <Box
+                          display={"flex"}
+                          alignItems={"center"}
+                          gap={"1rem"}
+                          marginBottom={"1rem"}
+                        >
+                          <Image src={contractIcon} width={`${iconwidth}`} />
+                          Smart contracts
+                        </Box>
+                      </Link>
+                    </PopoverBody>
+
+                    <PopoverBody>
+                      <Link
+                        to="/LearnPage"
+                        className="link"
+                        // style={
+                        //   location.pathname === "/LearnPage"
+                        //     ? highlight
+                        //     : normal
+                        // }
+                      >
+                        <Box
+                          display={"flex"}
+                          alignItems={"center"}
+                          gap={"1rem"}
+                          marginBottom={"1rem"}
+                        >
+                          <Image src={tokenIcon} width={`${iconwidth}`} />
+                          Tokenomics in Rubix
+                        </Box>
+                      </Link>
+                    </PopoverBody>
+                  </PopoverContent>
+                </Popover>
+
+                <Popover>
+                  <PopoverTrigger>
+                    <Button
+                      backgroundColor={"transparent"}
+                      color={"#fff"}
+                      fontWeight={"400"}
+                      _hover={{
+                        backgroundColor: "transparent",
+                      }}
+                    >
+                      BUILD
+                      <span
+                        style={
+                          location.pathname === "/BuildPage"
+                            ? active
+                            : linkStyle
+                        }
+                      />
+                    </Button>
+                  </PopoverTrigger>
+                  <PopoverContent
+                    backgroundColor={"#0D0B20"}
+                    borderRadius={"10px"}
+                    border={"none"}
+                    padding={"1rem"}
+                  >
+                    <PopoverArrow backgroundColor={"#0D0B20"} shadow={"none"} />
+                    <PopoverBody>
+                      <Link
+                        to="/BuildPage"
+                        className="link"
+                        style={
+                          location.pathname === "/BuildPage"
+                            ? highlight
+                            : normal
+                        }
+                      >
+                        <Box
+                          display={"flex"}
+                          alignItems={"center"}
+                          gap={"1rem"}
+                          marginBottom={"1rem"}
+                        >
+                          <Image src={buildIcon} width={`${iconwidth}`} />
+                          Build
+                        </Box>
+                      </Link>
+                    </PopoverBody>
+
+                    <PopoverBody>
+                      <Link
+                        to="/LearnPage"
+                        className="link"
+                        // style={
+                        //   location.pathname === "/LearnPage"
+                        //     ? highlight
+                        //     : normal
+                        // }
+                      >
+                        <Box
+                          display={"flex"}
+                          alignItems={"center"}
+                          gap={"1rem"}
+                          marginBottom={"1rem"}
+                        >
+                          <Image src={nodeIcon} width={`${iconwidth}`} />
+                          Set up Rubix Node
+                        </Box>
+                      </Link>
+                    </PopoverBody>
+
+                    <PopoverBody>
+                      <Link
+                        to="/LearnPage"
+                        className="link"
+                        // style={
+                        //   location.pathname === "/LearnPage"
+                        //     ? highlight
+                        //     : normal
+                        // }
+                      >
+                        <Box
+                          display={"flex"}
+                          alignItems={"center"}
+                          gap={"1rem"}
+                          marginBottom={"1rem"}
+                        >
+                          <Image src={quorumIcon} width={`${iconwidth}`} />
+                          Quorum
+                        </Box>
+                      </Link>
+                    </PopoverBody>
+
+                    <PopoverBody>
+                      <Link
+                        to="/LearnPage"
+                        className="link"
+                        // style={
+                        //   location.pathname === "/LearnPage"
+                        //     ? highlight
+                        //     : normal
+                        // }
+                      >
+                        <Box
+                          display={"flex"}
+                          alignItems={"center"}
+                          gap={"1rem"}
+                          marginBottom={"1rem"}
+                        >
+                          <Image src={subnetsIcon} width={`${iconwidth}`} />
+                          Subnets
+                        </Box>
+                      </Link>
+                    </PopoverBody>
+                  </PopoverContent>
+                </Popover>
+
+                <Popover>
+                  <PopoverTrigger>
+                    <Button
+                      backgroundColor={"transparent"}
+                      color={"#fff"}
+                      fontWeight={"400"}
+                      _hover={{
+                        backgroundColor: "transparent",
+                      }}
+                    >
+                      USE CASES
+                      <span
+                        style={
+                          location.pathname === "/UseCases" ? active : linkStyle
+                        }
+                      />
+                    </Button>
+                  </PopoverTrigger>
+                  <PopoverContent
+                    backgroundColor={"#0D0B20"}
+                    borderRadius={"10px"}
+                    border={"none"}
+                    padding={"1rem"}
+                  >
+                    <PopoverArrow backgroundColor={"#0D0B20"} shadow={"none"} />
+                    <PopoverBody>
+                      <Link
+                        to="/UseCases"
+                        className="link"
+                        style={
+                          location.pathname === "/UseCases" ? highlight : normal
+                        }
+                      >
+                        <Box
+                          display={"flex"}
+                          alignItems={"center"}
+                          gap={"1rem"}
+                          marginBottom={"1rem"}
+                        >
+                          <Image src={fintechIcon} width={`${iconwidth}`} />
+                          FinTech
+                        </Box>
+                      </Link>
+                    </PopoverBody>
+
+                    <PopoverBody>
+                      <Link
+                        to="/"
+                        className="link"
+                        // style={
+                        //   location.pathname === "/LearnPage"
+                        //     ? highlight
+                        //     : normal
+                        // }
+                      >
+                        <Box
+                          display={"flex"}
+                          alignItems={"center"}
+                          gap={"1rem"}
+                          marginBottom={"1rem"}
+                        >
+                          <Image src={nodeIcon} width={`${iconwidth}`} />
+                          AdTech
+                        </Box>
+                      </Link>
+                    </PopoverBody>
+
+                    <PopoverBody>
+                      <Link
+                        to="/"
+                        className="link"
+                        // style={
+                        //   location.pathname === "/LearnPage"
+                        //     ? highlight
+                        //     : normal
+                        // }
+                      >
+                        <Box
+                          display={"flex"}
+                          alignItems={"center"}
+                          gap={"1rem"}
+                          marginBottom={"1rem"}
+                        >
+                          <Image src={quorumIcon} width={`${iconwidth}`} />
+                          MarTech
+                        </Box>
+                      </Link>
+                    </PopoverBody>
+
+                    <PopoverBody>
+                      <Link
+                        to="/"
+                        className="link"
+                        // style={
+                        //   location.pathname === "/LearnPage"
+                        //     ? highlight
+                        //     : normal
+                        // }
+                      >
+                        <Box
+                          display={"flex"}
+                          alignItems={"center"}
+                          gap={"1rem"}
+                          marginBottom={"1rem"}
+                        >
+                          <Image src={subnetsIcon} width={`${iconwidth}`} />
+                          HealthTech
+                        </Box>
+                      </Link>
+                    </PopoverBody>
+                  </PopoverContent>
+                </Popover>
+
+                <Popover>
+                  <PopoverTrigger>
+                    <Button
+                      backgroundColor={"transparent"}
+                      color={"#fff"}
+                      fontWeight={"400"}
+                      _hover={{
+                        backgroundColor: "transparent",
+                      }}
+                    >
+                      COMMUNITY
+                      <span
+                        style={
+                          location.pathname === "/community" ||
+                          location.pathname === "/Articles"
+                            ? active
+                            : linkStyle
+                        }
+                      />
+                    </Button>
+                  </PopoverTrigger>
+                  <PopoverContent
+                    backgroundColor={"#0D0B20"}
+                    borderRadius={"10px"}
+                    border={"none"}
+                    padding={"1rem"}
+                  >
+                    <PopoverArrow backgroundColor={"#0D0B20"} shadow={"none"} />
+                    <PopoverBody>
+                      <Link
+                        to="/community"
+                        className="link"
+                        style={
+                          location.pathname === "/community"
+                            ? highlight
+                            : normal
+                        }
+                      >
+                        <Box
+                          display={"flex"}
+                          alignItems={"center"}
+                          gap={"1rem"}
+                          marginBottom={"1rem"}
+                        >
+                          <Image src={fintechIcon} width={`${iconwidth}`} />
+                          Community
+                        </Box>
+                      </Link>
+                    </PopoverBody>
+
+                    <PopoverBody>
+                      <Link
+                        to="/Articles"
+                        className="link"
+                        style={
+                          location.pathname === "/Articles" ? highlight : normal
+                        }
+                      >
+                        <Box
+                          display={"flex"}
+                          alignItems={"center"}
+                          gap={"1rem"}
+                          marginBottom={"1rem"}
+                        >
+                          <Image src={nodeIcon} width={`${iconwidth}`} />
+                          News & Articles
+                        </Box>
+                      </Link>
+                    </PopoverBody>
+
+                    <PopoverBody>
+                      <Link
+                        to="/"
+                        className="link"
+                        // style={
+                        //   location.pathname === "/LearnPage"
+                        //     ? highlight
+                        //     : normal
+                        // }
+                      >
+                        <Box
+                          display={"flex"}
+                          alignItems={"center"}
+                          gap={"1rem"}
+                          marginBottom={"1rem"}
+                        >
+                          <Image src={quorumIcon} width={`${iconwidth}`} />
+                          MarTech
+                        </Box>
+                      </Link>
+                    </PopoverBody>
+
+                    <PopoverBody>
+                      <Link
+                        to="/"
+                        className="link"
+                        // style={
+                        //   location.pathname === "/LearnPage"
+                        //     ? highlight
+                        //     : normal
+                        // }
+                      >
+                        <Box
+                          display={"flex"}
+                          alignItems={"center"}
+                          gap={"1rem"}
+                          marginBottom={"1rem"}
+                        >
+                          <Image src={subnetsIcon} width={`${iconwidth}`} />
+                          HealthTech
+                        </Box>
+                      </Link>
+                    </PopoverBody>
+                  </PopoverContent>
+                </Popover>
 
-                <Link
-                  to="/BuildPage"
-                  className="link"
-                  style={{ position: "relative" }}
-                >
-                  BUILD
-                  <span
-                    style={
-                      location.pathname === "/BuildPage" ? active : linkStyle
-                    }
-                  />
-                </Link>
-                <Link to="/" className="link" style={{ position: "relative" }}>
-                  USE CASES
-                  <span
-                    style={location.pathname === "/" ? active : linkStyle}
-                  />
-                </Link>
-                <Link
-                  to="/community"
-                  className="link"
-                  style={{ position: "relative" }}
-                >
-                  COMMUNITY
-                  <span
-                    style={
-                      location.pathname === "/community" ? active : linkStyle
-                    }
-                  />
-                </Link>
                 <Link to="/" className="link" style={{ position: "relative" }}>
                   FOUNDATION
                   <span

src/components/SubnetsComponent/NewSubnetComp.jsx

@@ -34,7 +34,7 @@ export const NewSubnetComp = () => {
           start: "top top",
           scrub: 1,
           pin: true,
-          end: "bottom bottom-=1000px",
+          end: "bottom bottom-=100vh",
           markers: true,
         },
       })
@@ -92,13 +92,10 @@ export const NewSubnetComp = () => {
           height={"100vh"}
           width={"100%"}
           backgroundColor={"#000"}
+          display={"grid"}
+          alignContent={"center"}
         >
-          <Container
-            maxW="container.xl"
-            textAlign={"center"}
-            // display={"grid"}
-            placeContent={"center"}
-          >
+          <Container maxW="container.xl" textAlign={"center"} height={"100vh"}>
             <Text
               as={"h2"}
               paddingTop={"2rem"}
@@ -193,12 +190,15 @@ export const NewSubnetComp = () => {
         <Box
           backgroundColor={"#000"}
           height={"100vh"}
+          width={"100%"}
           padding={"0 5rem"}
           paddingBottom={"2rem"}
           ref={secondBoxRef}
           position={"absolute"}
           top={"0"}
           left={"0"}
+          display={"grid"}
+          placeContent={"center"}
         >
           <Text
             as={"h2"}
@@ -301,13 +301,15 @@ export const NewSubnetComp = () => {
         <Box
           backgroundColor={"#000"}
           height={"100vh"}
+          width={"100%"}
           padding={"2rem"}
           // paddingBottom={"2rem"}
           ref={thirdBoxRef}
           position={"absolute"}
           top={"0"}
           left={"0"}
-          // width={"100vw"}
+          display={"grid"}
+          placeContent={"center"}
         >
           <Text
             as={"h2"}
@@ -328,7 +330,7 @@ export const NewSubnetComp = () => {
             All In One Composable Stack
           </Text>
           <Container maxW="container.xl" textAlign={"center"}>
-            <Box display={"flex"} alignItems={"start"} gap={"3rem"}>
+            <Box display={"flex"} alignItems={"start"} gap={"5rem"}>
               <Box width={"100%"}>
                 <Box
                   color={"#E1E1E1"}

src/components/UseCase/UseCase.jsx

@@ -0,0 +1,109 @@
+/* eslint-disable react/jsx-key */
+/* eslint-disable react/prop-types */
+/* eslint-disable no-unused-vars */
+// eslint-disable-next-line no-unused-vars
+import React from "react";
+import { Box, Text } from "@chakra-ui/react";
+
+// eslint-disable-next-line react/prop-types
+const UseCase = ({ useCase, bannerImage, bannerHeading, bannerSubHeading }) => {
+  return (
+    <div>
+      <Box
+        height={"75vh"}
+        width={"100%"}
+        backgroundImage={`url(${bannerImage})`}
+        backgroundRepeat={"no-repeat"}
+        backgroundSize={"cover"}
+        position="relative"
+      >
+        <Box
+          position="absolute"
+          top={0}
+          left={0}
+          width="100%"
+          height="100%"
+          backgroundColor="rgba(0, 0, 0, 0.8)"
+          display={"flex"}
+          justifyContent={"center"}
+          alignItems={"center"}
+          flexDirection={"column"}
+        >
+          <Box w={"50vw"}>
+            <Text
+              textAlign={"center"}
+              className="rubix-text-heading-2 rubix-fw-700"
+            >
+              {bannerHeading}
+            </Text>
+            <Text
+              textAlign={"center"}
+              className="rubix-text-medium rubix-fw-500"
+            >
+              {bannerSubHeading}
+            </Text>
+          </Box>
+        </Box>
+      </Box>
+
+      <Box
+        p={5}
+        pb={14}
+        backgroundColor={"#000000"}
+        display={"flex"}
+        justifyContent={"center"}
+        flexDirection={"column"}
+        alignItems={"center"}
+        gap={16}
+        w={"100%"}
+      >
+        {useCase.map(
+          ({ useCaseHeading, useCaseSubHeading, useCaseDetails }) => (
+            <Box
+              display={"flex"}
+              justifyContent={"center"}
+              flexDirection={"column"}
+              alignItems={"start"}
+              gap={7}
+              pt={5}
+              width={"85vw"}
+            >
+              {/* ========[ Head-Para ]====== */}
+              <Box width={"65vw"}>
+                <Text
+                  style={{ marginBottom: 6 }}
+                  className="rubix-fw-500"
+                  fontSize="3xl"
+                  textColor={"#ffffff"}
+                >
+                  {useCaseHeading}
+                </Text>
+                <Text textColor={"#ffffff"} fontSize="xl">
+                  {useCaseSubHeading}
+                </Text>
+              </Box>
+
+              {useCaseDetails.map(({ title, description }, index) => (
+                <Box width={"75vw"}>
+                  <Text
+                    style={{ marginBottom: 6 }}
+                    className="rubix-fw-500"
+                    fontSize="2xl"
+                    textColor={"#ffffff"}
+                  >
+                    {title}
+                  </Text>
+                  <Text textColor={"#ffffff"} fontSize="lg">
+                    {description}
+                  </Text>
+                </Box>
+              ))}
+            </Box>
+          )
+        )}
+      </Box>
+    </div>
+  );
+};
+
+export default UseCase;

src/data/useCase.jsx

@@ -0,0 +1,66 @@
+export const useCase = [
+  {
+    useCaseHeading: "Problems in the FinTech Sector",
+    useCaseSubHeading:
+      "The FinTech sector, aiming to revolutionise wealth management and financial services, encounters several challenges hindering its progress. Key issues include:",
+    useCaseDetails: [
+      {
+        title: "Lack of Personalization",
+        description:
+          "Many FinTech platforms struggle to deliver personalized financial advice and services tailored to individual client needs and goals. This limitation inhibits client engagement and satisfaction, as users seek customized solutions aligned with their unique financial situations",
+      },
+      {
+        title: "Data Fragmentation and Integration",
+        description:
+          "FinTech solutions often grapple with fragmented data sources, including bank accounts, investment portfolios, and retirement accounts. Integrating and aggregating these disparate data sets presents technical challenges, hindering the development of holistic financial management tools and insights.",
+      },
+      {
+        title: "Complexity and Accessibility",
+        description:
+          "The complexity of financial products and services can deter individuals from actively managing their wealth and investments. Moreover, some FinTech platforms may lack user-friendly interfaces and educational resources, limiting accessibility for less financially savvy users.",
+      },
+      {
+        title: "Limited Investment Options",
+        description:
+          "While FinTech platforms offer access to a range of investment products and strategies, users may face limitations in diversifying their portfolios or accessing alternative investments. This restriction hampers investors' ability to optimize risk-adjusted returns and achieve their long-term financial goals.",
+      },
+      {
+        title: "Security and Compliance Concerns",
+        description:
+          "FinTech platforms handle sensitive financial information, raising concerns about data security and regulatory compliance. Inadequate security measures and non-compliance with financial regulations can expose users to cybersecurity threats, fraud, and legal risks, eroding trust in FinTech providers.",
+      },
+    ],
+  },
+  {
+    useCaseHeading: "How Rubix solves them",
+    useCaseSubHeading:
+      "Rubix addresses the challenges faced by both investors and financial institutions while providing personalized, secure, and accessible wealth management tools. Here's how Rubix based solutions can revolutionize FinTech:",
+    useCaseDetails: [
+      {
+        title: "Next Gen personalization services",
+        description:
+          "Rubix stack based dAPPs can enable Autonomous Economic Agents ( AEA) offer tokenized services ( leveraging latest  Generative AI  and machine learning advances) that  deliver personalized financial insights and recommendations tailored to each user's financial objectives, risk tolerance, and investment preferences. ",
+      },
+      {
+        title: "Unified Data Aggregation and Integration",
+        description:
+          "Consumer centric insight aggregation and analytics service providers can offer PII protected unified data aggregation that consolidates financial information from various sources, including bank accounts, investment portfolios, and retirement accounts of users. This seamless integration would enable users to access comprehensive view of their financial assets and liabilities, facilitating holistic, fully self sovereign financial planning and analysis",
+      },
+      {
+        title: "User-Friendly Interface",
+        description:
+          "Rubix enables current Web2 apps to migrate to web3 without making any changes in the UI/UX. The Web Assembly compiler helps in easy code migration, with Rust/GoLang/C/c++ based smart contracts making for easy implementation and faster go to market.",
+      },
+      {
+        title: "Diverse Investment Opportunities",
+        description:
+          "Tokenization of assets - financial or physical is made easier and far cheaper  on the object chain based Rubix architecture which can support unlimited auto syncing subnets with DID portability across. This would mean that with a single, self sovereign DID an investor can participate in multiple tokenized investment vehicles which suit her risk/return requirements.",
+      },
+      {
+        title: "Robust Security and Compliance Framework",
+        description:
+          "Rubix block chain and DID in conjunction with identity platform providers can enhance the authentication and access management systems of wealth tech providers. ",
+      },
+    ],
+  },
+];

src/index.css

@@ -46,7 +46,6 @@
 .swiper-button-prev,
 .swiper-button-next {
   color: #de858e;
-  /* background-color: #de858e; */
 }
 span.swiper-pagination-bullet {
   background: #de858e;
@@ -84,6 +83,89 @@ span.swiper-pagination-bullet {
   left: 110px;
   background-image: radial-gradient(circle, #ffffff, #eee2f2, #e7c3dc, #e5a3ba, #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: 90% !important;
+  }
+
+  .swiper-button-next {
+    right: -8px;
+  }
+
+  .swiper-button-prev {
+    left: -8px;
+  }
+}
 /* html {
   font-family: "Mona Sans";
 } */
+
+.rubix-text-heading-2 {
+  font-size: 40px !important;
+  font-family: "Mona Sans";
+  color: #fff;
+}
+
+.rubix-text-xsmall {
+  font-size: 15px !important;
+  font-family: "Poppins" !important;
+  color: #fff !important;
+}
+
+.rubix-fw-100 {
+  font-weight: 100 !important;
+}
+
+.rubix-fw-200 {
+  font-weight: 200 !important;
+}
+
+.rubix-fw-300 {
+  font-weight: 300 !important;
+}
+
+.rubix-fw-400 {
+  font-weight: 400 !important;
+}
+
+.rubix-fw-500 {
+  font-weight: 500 !important;
+}
+
+.rubix-fw-600 {
+  font-weight: 600 !important;
+}
+
+.rubix-fw-700 {
+  font-weight: 700 !important;
+}
+
+.rubix-fw-800 {
+  font-weight: 800 !important;
+}
+
+.rubix-fw-900 {
+  font-weight: 900 !important;
+}

src/pages/Articles.jsx

@@ -0,0 +1,13 @@
+import ArticleInternalPage from "../components/ArticleInternalPage/ArticleInternalPage";
+import Footer from "../components/Footer/Footer";
+
+const Articles = () => {
+  return (
+    <>
+      <ArticleInternalPage />
+      <Footer />
+    </>
+  );
+};
+
+export default Articles;

src/pages/HomePage.jsx

@@ -10,6 +10,10 @@ 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 = () => {
@@ -28,7 +32,6 @@ const HomePage = () => {
   }, []);
 
   useEffect(() => {
-    // Scroll to the top of the page when the component mounts
     window.scrollTo(0, 0);
   }, []);
 
@@ -40,9 +43,10 @@ const HomePage = () => {
       {!isMobile ? <NewSubnetComp /> : <MobileSubnet />}
       <Stats />
       <WhitePaper />
-      <Partner />
+      {!isMobile ? <Partner /> : <PartnerMobile />}
       {/* <Client /> */}
-      <Resources />
+      {!isMobile ? <Resources /> : <ResourcesMobile />}
+
       <Footer />
     </>
   );

src/pages/UseCases.jsx

@@ -0,0 +1,26 @@
+import { useEffect } from "react";
+import UseCase from "../components/UseCase/UseCase";
+import { useCase } from "../data/useCase";
+import banner from "../assets/images/usecase-bg.png";
+import Footer from "../components/Footer/Footer";
+
+const UseCases = () => {
+  useEffect(() => {
+    window.scrollTo(0, 0);
+  }, []);
+  return (
+    <>
+      <UseCase
+        bannerHeading={"FinTech"}
+        bannerSubHeading={
+          "Stay up to date on what’s happening with Rubix, learn about upcoming events and access important resources."
+        }
+        bannerImage={banner}
+        useCase={useCase}
+      />
+      <Footer />
+    </>
+  );
+};
+
+export default UseCases;