Mobile NavBar changes and update.

src/components/Footer/MobileFooter.jsx

@@ -78,8 +78,14 @@ const MobileFooter = () => {
                     <ListItem marginBottom={"1rem"}>Community</ListItem>
                   </Link>
 
-                  <ListItem marginBottom={"1rem"}>Wallet</ListItem>
-                  <ListItem marginBottom={"1rem"}>Careers</ListItem>
+                  <Link
+                    to="https://getfexr.com/"
+                    target="_blank"
+                    rel="noopener noreferrer"
+                  >
+                    <ListItem marginBottom={"1rem"}>Wallet</ListItem>
+                  </Link>
+                  {/* <ListItem marginBottom={"1rem"}>Careers</ListItem> */}
                 </UnorderedList>
               </AccordionPanel>
             </>
@@ -116,42 +122,117 @@ const MobileFooter = () => {
                   fontWeight={"400"}
                   marginLeft={"0px !important"}
                 >
-                  <ListItem
-                    marginBottom={"1rem"}
-                    display={"flex"}
-                    alignItems={"center"}
-                    gap={"10px"}
+                  <Link
+                    to="https://t.me/rubixblockchain"
+                    target="_blank"
+                    rel="noopener noreferrer"
                   >
-                    <Image src={tele} />
-                    telegram
-                  </ListItem>
-                  <ListItem
-                    marginBottom={"1rem"}
-                    display={"flex"}
-                    alignItems={"center"}
-                    gap={"10px"}
+                    <ListItem
+                      marginBottom={"1rem"}
+                      display={"flex"}
+                      alignItems={"center"}
+                      gap={"10px"}
+                    >
+                      <Image src={tele} />
+                      telegram
+                    </ListItem>
+                  </Link>
+
+                  <Link
+                    to="https://twitter.com/rubixchain"
+                    target="_blank"
+                    rel="noopener noreferrer"
                   >
-                    <Image src={x} />
-                    Twitter
-                  </ListItem>
-                  <ListItem
-                    marginBottom={"1rem"}
-                    display={"flex"}
-                    alignItems={"center"}
-                    gap={"10px"}
+                    <ListItem
+                      marginBottom={"1rem"}
+                      display={"flex"}
+                      alignItems={"center"}
+                      gap={"10px"}
+                    >
+                      <Image src={x} />
+                      Twitter
+                    </ListItem>
+                  </Link>
+
+                  <Link
+                    to="https://github.com/rubixchain"
+                    target="_blank"
+                    rel="noopener noreferrer"
                   >
-                    <Image src={github} />
-                    GitHub
-                  </ListItem>
-                  <ListItem
-                    marginBottom={"1rem"}
-                    display={"flex"}
-                    alignItems={"center"}
-                    gap={"10px"}
+                    <ListItem
+                      marginBottom={"1rem"}
+                      display={"flex"}
+                      alignItems={"center"}
+                      gap={"10px"}
+                    >
+                      <Image src={github} />
+                      GitHub
+                    </ListItem>
+                  </Link>
+
+                  <Link
+                    to="https://discord.com/invite/MNYPfhFEEk"
+                    target="_blank"
+                    rel="noopener noreferrer"
                   >
-                    <Image src={discord} />
-                    Discord
-                  </ListItem>
+                    <ListItem
+                      marginBottom={"1rem"}
+                      display={"flex"}
+                      alignItems={"center"}
+                      gap={"10px"}
+                    >
+                      <Image src={discord} />
+                      Discord
+                    </ListItem>
+                  </Link>
+
+                  <Link
+                    to="https://www.reddit.com/r/rubixchain/"
+                    target="_blank"
+                    rel="noopener noreferrer"
+                  >
+                    <ListItem
+                      marginBottom={"1rem"}
+                      display={"flex"}
+                      alignItems={"center"}
+                      gap={"10px"}
+                    >
+                      <Image src={reddit} />
+                      Reddit
+                    </ListItem>
+                  </Link>
+
+                  <Link
+                    to="https://www.facebook.com/RubixChain"
+                    target="_blank"
+                    rel="noopener noreferrer"
+                  >
+                    <ListItem
+                      marginBottom={"1rem"}
+                      display={"flex"}
+                      alignItems={"center"}
+                      gap={"10px"}
+                    >
+                      <Image src={fb} />
+                      Facebook
+                    </ListItem>
+                  </Link>
+
+                  <Link
+                    to="https://www.linkedin.com/company/rubixnet/"
+                    target="_blank"
+                    rel="noopener noreferrer"
+                  >
+                    <ListItem
+                      marginBottom={"1rem"}
+                      display={"flex"}
+                      alignItems={"center"}
+                      gap={"10px"}
+                    >
+                      <Image src={linked} />
+                      LinkedIn
+                    </ListItem>
+                  </Link>
                 </UnorderedList>
               </AccordionPanel>
             </>

src/components/LearnPage/GetStarted.jsx

@@ -4,6 +4,7 @@ import { Tabs, TabList, TabPanels, Tab, TabPanel } from "@chakra-ui/react";
 import getStarted from "../../assets/images/getStarted.png";
 import getStarted2 from "../../assets/images/getStarted2.png";
 import getStarted3 from "../../assets/images/getStarted3.png";
+import pdf from "../../assets/pdf/Rubix.pdf";
 import { Link } from "react-router-dom";
 
 const GetStarted = () => {
@@ -169,7 +170,7 @@ const GetStarted = () => {
                 Step 1 - Start by reading our whitepaper
                 <a
                   download="RubiX_WhitePaper.pdf"
-                  href="../../assets/pdf/RubiX_WhitePaper.pdf"
+                  href={pdf}
                   style={{
                     color: "#fff",
                     fontSize: "14px",

src/components/MobileComponent/MobileSubnet.jsx

@@ -12,6 +12,7 @@ import { Navigation, Pagination, Autoplay } from "swiper/modules";
 import { Swiper, SwiperSlide } from "swiper/react";
 
 const MobileSubnet = () => {
+  const font = "14px";
   return (
     <>
       <Swiper
@@ -23,13 +24,13 @@ const MobileSubnet = () => {
         //   delay: 2500,
         //   disableOnInteraction: false,
         // }}
-        style={{ backgroundColor: "#000" }}
+        style={{ backgroundColor: "#000", height: "100dvh" }}
+        className="subnet-mobile"
       >
         <SwiperSlide>
           <Box
             backgroundColor={"#000"}
             padding={"1.5rem"}
-            height={"100dvh"}
             display={"grid"}
             alignContent={"center"}
           >
@@ -47,6 +48,12 @@ const MobileSubnet = () => {
                   fontSize={"20px"}
                   textTransform={"capitalize"}
                   color={"#fff"}
+                  sx={{
+                    "@media (max-width: 1024px)": {},
+                    "@media (max-width: 375px)": {
+                      fontSize: "18px",
+                    },
+                  }}
                 >
                   decentralised Auto Syncing subnets
                 </Text>
@@ -71,15 +78,29 @@ const MobileSubnet = () => {
                 <Box>
                   <Text
                     as={"h2"}
-                    paddingTop={"2rem"}
+                    // paddingTop={"2rem"}
                     fontWeight={700}
                     fontSize={"20px"}
                     textTransform={"capitalize"}
                     color={"#fff"}
+                    sx={{
+                      "@media (max-width: 1024px)": {},
+                      "@media (max-width: 375px)": {
+                        fontSize: "18px",
+                      },
+                    }}
                   >
                     P2P
                   </Text>
-                  <UnorderedList color={"#E1E1E1"}>
+                  <UnorderedList
+                    color={"#E1E1E1"}
+                    sx={{
+                      "@media (max-width: 1024px)": {},
+                      "@media (max-width: 375px)": {
+                        fontSize: font,
+                      },
+                    }}
+                  >
                     <ListItem>Only L1 powering full mobile nodes</ListItem>
                     <ListItem>
                       Mobile nodes with full state data will settle P2P .
@@ -99,10 +120,24 @@ const MobileSubnet = () => {
                     fontSize={"20px"}
                     textTransform={"capitalize"}
                     color={"#fff"}
+                    sx={{
+                      "@media (max-width: 1024px)": {},
+                      "@media (max-width: 375px)": {
+                        fontSize: "18px",
+                      },
+                    }}
                   >
                     Self Sovereign
                   </Text>
-                  <UnorderedList color={"#E1E1E1"}>
+                  <UnorderedList
+                    color={"#E1E1E1"}
+                    sx={{
+                      "@media (max-width: 1024px)": {},
+                      "@media (max-width: 375px)": {
+                        fontSize: font,
+                      },
+                    }}
+                  >
                     <ListItem>
                       Permissioned subnets with no oracles and <br />{" "}
                       intermediaries
@@ -123,10 +158,24 @@ const MobileSubnet = () => {
                     fontSize={"20px"}
                     textTransform={"capitalize"}
                     color={"#fff"}
+                    sx={{
+                      "@media (max-width: 1024px)": {},
+                      "@media (max-width: 375px)": {
+                        fontSize: "18px",
+                      },
+                    }}
                   >
                     Easier
                   </Text>
-                  <UnorderedList color={"#E1E1E1"}>
+                  <UnorderedList
+                    color={"#E1E1E1"}
+                    sx={{
+                      "@media (max-width: 1024px)": {},
+                      "@media (max-width: 375px)": {
+                        fontSize: font,
+                      },
+                    }}
+                  >
                     <ListItem>
                       Leverage own infrastructure for block space
                     </ListItem>
@@ -145,10 +194,24 @@ const MobileSubnet = () => {
                     fontSize={"20px"}
                     textTransform={"capitalize"}
                     color={"#fff"}
+                    sx={{
+                      "@media (max-width: 1024px)": {},
+                      "@media (max-width: 375px)": {
+                        fontSize: "18px",
+                      },
+                    }}
                   >
                     cheaper
                   </Text>
-                  <UnorderedList color={"#E1E1E1"}>
+                  <UnorderedList
+                    color={"#E1E1E1"}
+                    sx={{
+                      "@media (max-width: 1024px)": {},
+                      "@media (max-width: 375px)": {
+                        fontSize: font,
+                      },
+                    }}
+                  >
                     <ListItem>No GAS fees</ListItem>
                     <ListItem>
                       Incremental and modular infrastructure ask
@@ -164,10 +227,10 @@ const MobileSubnet = () => {
           </Box>
         </SwiperSlide>
         <SwiperSlide>
-          <MobileSubnet2 />
+          <MobileSubnet2 font={font} />
         </SwiperSlide>
         <SwiperSlide>
-          <MobileSubnet3 />
+          <MobileSubnet3 font={font} />
         </SwiperSlide>
       </Swiper>
     </>

src/components/MobileComponent/MobileSubnet2.jsx

@@ -1,13 +1,13 @@
+/* eslint-disable react/prop-types */
 /* eslint-disable no-unused-vars */
 import { Box, Image, ListItem, Text, UnorderedList } from "@chakra-ui/react";
 import cube from "../../assets/images/cube.png";
 
-const MobileSubnet2 = () => {
+const MobileSubnet2 = ({ font }) => {
   return (
     <Box
       backgroundColor={"#000"}
       padding={"1.5rem"}
-      height={"100dvh"}
       display={"grid"}
       alignContent={"center"}
     >
@@ -25,6 +25,12 @@ const MobileSubnet2 = () => {
             fontSize={"20px"}
             textTransform={"capitalize"}
             color={"#fff"}
+            sx={{
+              "@media (max-width: 1024px)": {},
+              "@media (max-width: 375px)": {
+                fontSize: "18px",
+              },
+            }}
           >
             With unmatched privacy and scalability
           </Text>
@@ -54,10 +60,24 @@ const MobileSubnet2 = () => {
               fontSize={"20px"}
               textTransform={"capitalize"}
               color={"#fff"}
+              sx={{
+                "@media (max-width: 1024px)": {},
+                "@media (max-width: 375px)": {
+                  fontSize: "18px",
+                },
+              }}
             >
               01. Decentralisation
             </Text>
-            <Text color={"#E1E1E1"}>
+            <Text
+              color={"#E1E1E1"}
+              sx={{
+                "@media (max-width: 1024px)": {},
+                "@media (max-width: 375px)": {
+                  fontSize: font,
+                },
+              }}
+            >
               Rubix Decentralised Identity( DID) issued at L1 is the foundation
               for building digital ownership enhancing applications.
             </Text>
@@ -71,10 +91,24 @@ const MobileSubnet2 = () => {
               fontSize={"20px"}
               textTransform={"capitalize"}
               color={"#fff"}
+              sx={{
+                "@media (max-width: 1024px)": {},
+                "@media (max-width: 375px)": {
+                  fontSize: "18px",
+                },
+              }}
             >
               02. Ultra Scalability
             </Text>
-            <Text color={"#E1E1E1"}>
+            <Text
+              color={"#E1E1E1"}
+              sx={{
+                "@media (max-width: 1024px)": {},
+                "@media (max-width: 375px)": {
+                  fontSize: font,
+                },
+              }}
+            >
               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,
@@ -90,10 +124,24 @@ const MobileSubnet2 = () => {
               fontSize={"20px"}
               textTransform={"capitalize"}
               color={"#fff"}
+              sx={{
+                "@media (max-width: 1024px)": {},
+                "@media (max-width: 375px)": {
+                  fontSize: "18px",
+                },
+              }}
             >
               03. Data Security and Privacy
             </Text>
-            <Text color={"#E1E1E1"}>
+            <Text
+              color={"#E1E1E1"}
+              sx={{
+                "@media (max-width: 1024px)": {},
+                "@media (max-width: 375px)": {
+                  fontSize: font,
+                },
+              }}
+            >
               {" "}
               Rubix Decentralised Identity(DID) issued at L1 is the foundation
               for building digital ownership enhancing applications

src/components/MobileComponent/MobileSubnet3.jsx

@@ -1,14 +1,14 @@
+/* eslint-disable react/prop-types */
 /* eslint-disable no-unused-vars */
 import { Box, Image, ListItem, Text, UnorderedList } from "@chakra-ui/react";
 import stack from "../../assets/images/stacksmall.png";
 
-const MobileSubnet3 = () => {
+const MobileSubnet3 = ({ font }) => {
   return (
     <Box
       backgroundColor={"#000"}
       padding={"1.5rem"}
       paddingBottom={"4rem"}
-      height={"100dvh"}
       display={"grid"}
       alignContent={"center"}
     >
@@ -27,6 +27,12 @@ const MobileSubnet3 = () => {
             fontSize={"20px"}
             textTransform={"capitalize"}
             color={"#fff"}
+            sx={{
+              "@media (max-width: 1024px)": {},
+              "@media (max-width: 375px)": {
+                fontSize: "18px",
+              },
+            }}
           >
             All In One Composable Stack
           </Text>
@@ -57,8 +63,14 @@ const MobileSubnet3 = () => {
               fontSize={"20px"}
               textTransform={"capitalize"}
               color={"#fff"}
+              sx={{
+                "@media (max-width: 1024px)": {},
+                "@media (max-width: 375px)": {
+                  fontSize: font,
+                },
+              }}
             >
-              Single Comprehensive Stack :
+              Single Comprehensive Stack
             </Text>
             <UnorderedList color={"#E1E1E1"}>
               <ListItem>
@@ -75,10 +87,24 @@ const MobileSubnet3 = () => {
               fontSize={"20px"}
               textTransform={"capitalize"}
               color={"#fff"}
+              sx={{
+                "@media (max-width: 1024px)": {},
+                "@media (max-width: 375px)": {
+                  fontSize: "18px",
+                },
+              }}
             >
-              High Partition Tolerance :
+              High Partition Tolerance
             </Text>
-            <UnorderedList color={"#E1E1E1"}>
+            <UnorderedList
+              color={"#E1E1E1"}
+              sx={{
+                "@media (max-width: 1024px)": {},
+                "@media (max-width: 375px)": {
+                  fontSize: font,
+                },
+              }}
+            >
               <ListItem>
                 Issues in one shard wont affect other shards performance
               </ListItem>
@@ -92,10 +118,24 @@ const MobileSubnet3 = () => {
               fontSize={"20px"}
               textTransform={"capitalize"}
               color={"#fff"}
+              sx={{
+                "@media (max-width: 1024px)": {},
+                "@media (max-width: 375px)": {
+                  fontSize: "18px",
+                },
+              }}
             >
-              Fully Deterministic :
+              Fully Deterministic
             </Text>
-            <UnorderedList color={"#E1E1E1"}>
+            <UnorderedList
+              color={"#E1E1E1"}
+              sx={{
+                "@media (max-width: 1024px)": {},
+                "@media (max-width: 375px)": {
+                  fontSize: font,
+                },
+              }}
+            >
               <ListItem>Apps can bring Own Block space( BYOB)</ListItem>
             </UnorderedList>
           </Box>
@@ -107,10 +147,24 @@ const MobileSubnet3 = () => {
               fontSize={"20px"}
               textTransform={"capitalize"}
               color={"#fff"}
+              sx={{
+                "@media (max-width: 1024px)": {},
+                "@media (max-width: 375px)": {
+                  fontSize: "18px",
+                },
+              }}
             >
-              Unique token/object based architecture :
+              Unique token/object based architecture
             </Text>
-            <UnorderedList color={"#E1E1E1"}>
+            <UnorderedList
+              color={"#E1E1E1"}
+              sx={{
+                "@media (max-width: 1024px)": {},
+                "@media (max-width: 375px)": {
+                  fontSize: font,
+                },
+              }}
+            >
               <ListItem>Build unlimited FTs and NFTs all at L1!!</ListItem>
             </UnorderedList>
           </Box>
@@ -122,10 +176,24 @@ const MobileSubnet3 = () => {
               fontSize={"20px"}
               textTransform={"capitalize"}
               color={"#fff"}
+              sx={{
+                "@media (max-width: 1024px)": {},
+                "@media (max-width: 375px)": {
+                  fontSize: "18px",
+                },
+              }}
             >
-              Green by the design :
+              Green by the design
             </Text>
-            <UnorderedList color={"#E1E1E1"}>
+            <UnorderedList
+              color={"#E1E1E1"}
+              sx={{
+                "@media (max-width: 1024px)": {},
+                "@media (max-width: 375px)": {
+                  fontSize: font,
+                },
+              }}
+            >
               <ListItem>
                 100,000 Rubix transactions consume &lt; 10 kWh <br /> &lt;
                 100000 Visa transactions
@@ -141,9 +209,27 @@ const MobileSubnet3 = () => {
               fontSize={"20px"}
               textTransform={"capitalize"}
               color={"#fff"}
+              sx={{
+                "@media (max-width: 1024px)": {},
+                "@media (max-width: 375px)": {
+                  fontSize: "18px",
+                },
+              }}
             >
-              Fixed, hard capped supply of RBT at 51.4 Million
+              51.4 Million RBT
             </Text>
+
+            <UnorderedList
+              color={"#E1E1E1"}
+              sx={{
+                "@media (max-width: 1024px)": {},
+                "@media (max-width: 375px)": {
+                  fontSize: font,
+                },
+              }}
+            >
+              <ListItem>Fixed Supply.Hardcapped</ListItem>
+            </UnorderedList>
           </Box>
         </Box>
       </Box>

src/components/MobileMenu/MobileMenu.jsx

@@ -1,26 +1,35 @@
-import { HamburgerIcon } from "@chakra-ui/icons";
+/* eslint-disable no-unused-vars */
+import { CloseIcon, HamburgerIcon } from "@chakra-ui/icons";
 import {
   Menu,
   MenuButton,
   MenuList,
   MenuItem,
-  // MenuItemOption,
-  // MenuGroup,
-  // MenuOptionGroup,
-  // MenuDivider,
+  Accordion,
+  AccordionItem,
+  AccordionButton,
+  AccordionPanel,
+  AccordionIcon,
   IconButton,
+  Text,
+  motion,
 } from "@chakra-ui/react";
 import { Box, Image } from "@chakra-ui/react";
 import { Link, useLocation } from "react-router-dom";
-// import { Button } from "@chakra-ui/react";
+import { Button } from "@chakra-ui/react";
 // import { HashLink } from "react-router-hash-link";
 import logo from "../../assets/images/rubix.png";
 import { useEffect, useState } from "react";
 
 export const MobileMenu = () => {
   const [isScrolled, setIsScrolled] = useState(false);
+  const [menu, setMenu] = useState(false);
   const location = useLocation();
 
+  const handleClick = () => {
+    setMenu(!menu);
+  };
+
   useEffect(() => {
     const handleScroll = () => {
       const scrollPosition = window.scrollY;
@@ -37,9 +46,9 @@ export const MobileMenu = () => {
   const active = {
     content: "''",
     position: "absolute",
-    bottom: "-5px",
-    left: "50%",
-    width: "130%",
+    bottom: "10px",
+    left: "25%",
+    width: "50%",
     height: "3px",
     backgroundColor: "#DE858E",
     borderRadius: "10px",
@@ -51,42 +60,25 @@ export const MobileMenu = () => {
     width: "0",
   };
 
+  const links = {
+    position: "relative",
+    fontSize: "16px",
+    display: "block",
+    padding: "1rem 0",
+    color: "#fff",
+  };
   return (
     <>
-      {/* <Box
-        backgroundColor={"#141315"}
-        position={"fixed"}
-        zIndex={"9999"}
-        width={"100%"}
-        textAlign={"right"}
-        padding={"0.8px 0px"}
-      >
-        <Box marginRight={""}>
-          <Link
-            to="/"
-            style={{ color: "#fff", marginRight: "1.5rem", fontSize: "14px" }}
-          >
-            WALLET
-          </Link>
-          <Link
-            to="/"
-            style={{ color: "#fff", marginRight: "1.5rem", fontSize: "14px" }}
-          >
-            EXPLORER
-          </Link>
-        </Box>
-      </Box> */}
       <Box
         position={"fixed"}
         top={"0px"}
-        zIndex={999}
+        zIndex={888}
         backgroundColor={isScrolled ? "#0B0B27" : "transparent"}
         display={"flex"}
         justifyContent={"space-between"}
         alignItems={"center"}
         width={"100%"}
         padding={"1rem 1rem"}
-        paddingTop={"3rem"}
         sx={{
           "@media (max-width: 1024px)": {},
           "@media (max-width: 375px)": {
@@ -106,116 +98,298 @@ export const MobileMenu = () => {
             </Box>
           </Link>
         </Box>
-        <Menu backgroundColor={"#fff"}>
-          <MenuButton
-            as={IconButton}
-            aria-label="Options"
-            icon={<HamburgerIcon />}
-            // variant="outline"
-            backgroundColor={"transparent"}
-            color={"#fff"}
-            fontSize={"34px"}
-            _hover={{
-              backgroundColor: "transparent",
-              color: "#fff",
-              fontSize: "34px",
-            }}
-          />
-          <MenuList>
-            {/* <MenuItem paddingLeft={"0px"}></MenuItem> */}
-            <MenuItem
-              justifyContent={"center"}
-              padding={"1rem 0"}
-              _focus={{ background: "#fff" }}
-            >
-              <Link
-                to="/LearnPage"
-                style={{ position: "relative", fontSize: "14px" }}
-              >
-                LEARN
-                <span
-                  style={
-                    location.pathname === "/LearnPage" ? active : linkStyle
-                  }
-                />
-              </Link>
-            </MenuItem>
-            <MenuItem
-              justifyContent={"center"}
-              padding={"1rem 0"}
-              _focus={{ background: "#fff" }}
-            >
-              <Link
-                to="/BuildPage"
-                style={{ position: "relative", fontSize: "14px" }}
-              >
-                BUILD
-                <span
-                  style={
-                    location.pathname === "/BuildPage" ? active : linkStyle
-                  }
-                />
-              </Link>
-            </MenuItem>
-            <MenuItem
-              justifyContent={"center"}
-              padding={"1rem 0"}
-              _focus={{ background: "#fff" }}
-            >
-              {" "}
-              <Link to="/" style={{ position: "relative", fontSize: "14px" }}>
-                USE CASES
-                {/* <span style={location.pathname === "/" ? active : linkStyle} /> */}
-              </Link>
-            </MenuItem>
-            <MenuItem
-              justifyContent={"center"}
-              padding={"1rem 0"}
-              _focus={{ background: "#fff" }}
-            >
-              {" "}
-              <Link
-                to="/community"
-                style={{ position: "relative", fontSize: "14px" }}
-              >
-                COMMUNITY
-                <span
-                  style={
-                    location.pathname === "/community" ? active : linkStyle
-                  }
-                />
-              </Link>
-            </MenuItem>
-            <MenuItem
-              justifyContent={"center"}
-              padding={"1rem 0"}
-              _focus={{ background: "#fff" }}
-            >
-              {" "}
-              <Link to="/" style={{ position: "relative", fontSize: "14px" }}>
-                FOUNDATION
-                {/* <span style={location.pathname === "/" ? active : linkStyle} /> */}
-              </Link>
-            </MenuItem>
-            <MenuItem
-              justifyContent={"center"}
-              padding={"1rem 0"}
-              _focus={{ background: "#fff" }}
-            >
-              {" "}
-              <Link
-                to="/Contact"
-                style={{ position: "relative", fontSize: "14px" }}
-              >
-                CONTACT US
-                <span
-                  style={location.pathname === "/Contact" ? active : linkStyle}
-                />
-              </Link>
-            </MenuItem>
-          </MenuList>
-        </Menu>
+        <HamburgerIcon color={"#fff"} fontSize={"25px"} onClick={handleClick} />
       </Box>
+
+      {menu && (
+        <Box
+          position={"fixed"}
+          top={"0px"}
+          zIndex={999}
+          backgroundColor={"#101015"}
+          height={"100vh"}
+          width={"100%"}
+          overflow={"auto"}
+        >
+          <Box
+            // backgroundColor={isScrolled ? "#0B0B27" : "transparent"}
+            display={"flex"}
+            justifyContent={"space-between"}
+            alignItems={"center"}
+            padding={"1rem 1rem"}
+            marginBottom={"4rem"}
+            gap={"2rem"}
+            sx={{
+              "@media (max-width: 1024px)": {},
+              "@media (max-width: 375px)": {
+                padding: "1rem",
+                alignItems: "baseline",
+              },
+            }}
+          >
+            <Box display={"flex"} alignItems={"center"}>
+              <Link to="/">
+                <Box
+                  display={"flex"}
+                  alignItems={"baseline"}
+                  justifyContent={"center"}
+                >
+                  <Image src={logo} width={"160px"} />
+                </Box>
+              </Link>
+            </Box>
+            <CloseIcon color={"#fff"} fontSize={"25px"} onClick={handleClick} />
+          </Box>
+
+          <Accordion allowToggle>
+            {/* Learn */}
+            <AccordionItem borderTop={"none"} padding={"2rem 1rem"}>
+              <AccordionButton>
+                <Box as="span" flex="1" textAlign="left">
+                  <Text
+                    color={"#B0B0B0"}
+                    fontFamily={"Mona Sans"}
+                    fontWeight={"500"}
+                    fontSize={"20px"}
+                  >
+                    LEARN
+                  </Text>
+                </Box>
+                <AccordionIcon color={"#fff"} fontSize={"28px"} />
+              </AccordionButton>
+              <AccordionPanel pb={4}>
+                <Link to="/LearnPage" style={links} onClick={handleClick}>
+                  Learn
+                  <span
+                    style={
+                      location.pathname === "/LearnPage" ? active : linkStyle
+                    }
+                  />
+                </Link>
+                <Link
+                  to="https://learn.rubix.net/pop/"
+                  // target="_blank"
+                  // rel="noopener noreferrer"
+                  style={links}
+                  onClick={handleClick}
+                >
+                  Proof-of-pledge Protocol
+                </Link>
+                <Link
+                  to="https://learn.rubix.net/smartcontract/"
+                  // target="_blank"
+                  // rel="noopener noreferrer"
+                  style={links}
+                >
+                  Smart Contracts
+                </Link>
+                <Link
+                  to="https://learn.rubix.net/tokenomics/"
+                  // target="_blank"
+                  // rel="noopener noreferrer"
+                  style={links}
+                  onClick={handleClick}
+                >
+                  Tokenomics in Rubix
+                </Link>
+              </AccordionPanel>
+            </AccordionItem>
+
+            {/* Build */}
+            <AccordionItem padding={"2rem 1rem"}>
+              <AccordionButton>
+                <Box as="span" flex="1" textAlign="left">
+                  <Text
+                    color={"#B0B0B0"}
+                    fontFamily={"Mona Sans"}
+                    fontWeight={"500"}
+                    fontSize={"20px"}
+                  >
+                    BUILD
+                  </Text>
+                </Box>
+                <AccordionIcon color={"#fff"} fontSize={"28px"} />
+              </AccordionButton>
+              <AccordionPanel pb={4}>
+                <Link to="/BuildPage" style={links} onClick={handleClick}>
+                  Build
+                  <span
+                    style={
+                      location.pathname === "/BuildPage" ? active : linkStyle
+                    }
+                  />
+                </Link>
+                <Link
+                  to="https://learn.rubix.net/node-setup/"
+                  // target="_blank"
+                  // rel="noopener noreferrer"
+                  style={links}
+                  onClick={handleClick}
+                >
+                  Set up Rubix Node
+                </Link>
+                <Link
+                  to="https://learn.rubix.net/quorum/"
+                  // target="_blank"
+                  // rel="noopener noreferrer"
+                  style={links}
+                >
+                  Quorum
+                </Link>
+                <Link
+                  to="https://learn.rubix.net/subnets/"
+                  // target="_blank"
+                  // rel="noopener noreferrer"
+                  style={links}
+                  onClick={handleClick}
+                >
+                  Subnets
+                </Link>
+              </AccordionPanel>
+            </AccordionItem>
+
+            {/* UseCases */}
+            <AccordionItem padding={"2rem 1rem"}>
+              <AccordionButton>
+                <Box as="span" flex="1" textAlign="left">
+                  <Text
+                    color={"#B0B0B0"}
+                    fontFamily={"Mona Sans"}
+                    fontWeight={"500"}
+                    fontSize={"20px"}
+                  >
+                    USE CASES
+                  </Text>
+                </Box>
+                <AccordionIcon color={"#fff"} fontSize={"28px"} />
+              </AccordionButton>
+              <AccordionPanel pb={4}>
+                <Link to="/fin-tech" style={links} onClick={handleClick}>
+                  FinTech
+                  <span
+                    style={
+                      location.pathname === "/fin-tech" ? active : linkStyle
+                    }
+                  />
+                </Link>
+                <Link
+                  to="/ad-tech"
+                  // target="_blank"
+                  // rel="noopener noreferrer"
+                  style={links}
+                  onClick={handleClick}
+                >
+                  AdTech
+                  <span
+                    style={
+                      location.pathname === "/ad-tech" ? active : linkStyle
+                    }
+                  />
+                </Link>
+                <Link
+                  to="/mar-tech"
+                  // target="_blank"
+                  // rel="noopener noreferrer"
+                  style={links}
+                  onClick={handleClick}
+                >
+                  MarTech
+                  <span
+                    style={
+                      location.pathname === "/mar-tech" ? active : linkStyle
+                    }
+                  />
+                </Link>
+                <Link
+                  to="/health-tech"
+                  // target="_blank"
+                  // rel="noopener noreferrer"
+                  style={links}
+                  onClick={handleClick}
+                >
+                  HealthTech
+                  <span
+                    style={
+                      location.pathname === "/health-tech" ? active : linkStyle
+                    }
+                  />
+                </Link>
+              </AccordionPanel>
+            </AccordionItem>
+
+            {/* Community */}
+            <AccordionItem padding={"2rem 1rem"}>
+              <AccordionButton>
+                <Box as="span" flex="1" textAlign="left">
+                  <Text
+                    color={"#B0B0B0"}
+                    fontFamily={"Mona Sans"}
+                    fontWeight={"500"}
+                    fontSize={"20px"}
+                  >
+                    COMMUNITY
+                  </Text>
+                </Box>
+                <AccordionIcon color={"#fff"} fontSize={"28px"} />
+              </AccordionButton>
+              <AccordionPanel pb={4}>
+                <Link to="/community" style={links} onClick={handleClick}>
+                  Community
+                  <span
+                    style={
+                      location.pathname === "/community" ? active : linkStyle
+                    }
+                  />
+                </Link>
+              </AccordionPanel>
+            </AccordionItem>
+
+            {/* Wallet*/}
+            <AccordionItem padding={"2rem 1rem"}>
+              <AccordionButton>
+                <Box as="span" flex="1" textAlign="left">
+                  <Text
+                    color={"#B0B0B0"}
+                    fontFamily={"Mona Sans"}
+                    fontWeight={"500"}
+                    fontSize={"20px"}
+                  >
+                    AFFILIATES
+                  </Text>
+                </Box>
+                <AccordionIcon color={"#fff"} fontSize={"28px"} />
+              </AccordionButton>
+              <AccordionPanel pb={4}>
+                <Link
+                  to="https://rubixexplorer.com/"
+                  style={links}
+                  onClick={handleClick}
+                >
+                  Wallet
+                </Link>
+                <Link
+                  to="https://getfexr.com/"
+                  style={links}
+                  onClick={handleClick}
+                >
+                  Explore
+                </Link>
+              </AccordionPanel>
+            </AccordionItem>
+          </Accordion>
+
+          <Link to="/Contact" onClick={handleClick}>
+            <Button
+              margin={"2rem 2rem"}
+              padding={"1.5rem 2rem"}
+              borderRadius="0px"
+              backgroundImage="radial-gradient(circle, #ffffff, #eee2f2, #e7c3dc, #e5a3ba, #de858e)"
+            >
+              CONTACT US
+            </Button>
+          </Link>
+        </Box>
+      )}
     </>
   );
 };

src/index.css

@@ -124,6 +124,10 @@ span.swiper-pagination-bullet {
     top: 90% !important;
   }
 
+  .subnet-mobile .swiper-pagination {
+    top: 94% !important;
+  }
+
   .swiper-button-next {
     right: -8px;
   }
@@ -131,6 +135,24 @@ span.swiper-pagination-bullet {
   .swiper-button-prev {
     left: -8px;
   }
+
+  .fade-in {
+    opacity: 1;
+    transition: opacity 0.9s ease-in-out;
+    -webkit-transition: opacity 0.9s ease-in-out;
+    -moz-transition: opacity 0.9s ease-in-out;
+    -ms-transition: opacity 0.9s ease-in-out;
+    -o-transition: opacity 0.9s ease-in-out;
+  }
+
+  .fade-out {
+    opacity: 0;
+    transition: opacity 0.9s ease-in-out;
+    -webkit-transition: opacity 0.9s ease-in-out;
+    -moz-transition: opacity 0.9s ease-in-out;
+    -ms-transition: opacity 0.9s ease-in-out;
+    -o-transition: opacity 0.9s ease-in-out;
+  }
 }
 /* html {
   font-family: "Mona Sans";

src/pages/LearnPage.jsx

@@ -1,3 +1,4 @@
+/* eslint-disable no-unused-vars */
 import { useEffect } from "react";
 import Footer from "../components/Footer/Footer";
 import { Faq } from "../components/LearnPage/Faq";
@@ -16,9 +17,8 @@ const LearnPage = () => {
       <LearnBanner />
       <LearnDev />
       <WhyRubix />
-      <GetStarted /> 
+      <GetStarted />
       <Faq />
-      <Footer />
     </>
   );
 };