Added page transitions effect

src/App.jsx

@@ -10,9 +10,13 @@ import DefaultLayout from "./Layout/DefaultLayout";
 
 const router = createBrowserRouter(
   createRoutesFromElements(
-      route.map(({ path, element }) => (
-        <Route key={path} path={path} element={<DefaultLayout>{element}</DefaultLayout>} />
-      ))
+    route.map(({ path, element }) => (
+      <Route
+        key={path}
+        path={path}
+        element={<DefaultLayout>{element}</DefaultLayout>}
+      />
+    ))
   )
 );
 

src/Layout/DefaultLayout.jsx

@@ -1,12 +1,29 @@
-import React from "react";
+/* eslint-disable no-unused-vars */
+/* eslint-disable react/prop-types */
 import NavBar from "../components/NavBar/NavBar";
 import Footer from "../components/Footer/Footer";
+import { ScaleFade, SlideFade } from "@chakra-ui/react";
+import { useLocation } from "react-router-dom";
 
 const DefaultLayout = ({ children }) => {
+  const location = useLocation();
   return (
     <div>
       <NavBar />
-      {children}
+      <SlideFade
+        key={location.pathname}
+        initialScale={0.9}
+        finalScale={1.2}
+        in={true}
+        transition={{
+          enter: {
+            duration: 0.5,
+            delay: 0.1,
+          },
+        }}
+      >
+        {children}
+      </SlideFade>
       <Footer />
     </div>
   );

src/components/Contact/Form.jsx

@@ -97,6 +97,7 @@ const Contact = () => {
           "@media (max-width: 1440px)": {},
           "@media (max-width: 1080px)": {
             flexDirection: "column",
+            paddingTop: "2rem",
           },
           "@media (max-width: 1024px)": {
             flexDirection: "column",
@@ -131,7 +132,11 @@ const Contact = () => {
               minH: "490px",
             },
             "@media (max-width: 820px)": { width: "55%" },
-            "@media (max-width: 535px)": { width: "95%", padding: "10px" },
+            "@media (max-width: 535px)": {
+              width: "95%",
+              padding: "10px",
+              minH: "auto",
+            },
             "@media (max-width: 375px)": {},
           }}
         >

src/components/Footer/MobileFooter.jsx

@@ -50,7 +50,7 @@ const MobileFooter = () => {
                       color={"#B0B0B0"}
                       fontFamily={"Mona Sans"}
                       fontWeight={"500"}
-                      fontSize={"16px"}
+                      fontSize={"22px"}
                     >
                       Explore
                     </Text>

src/components/MobileMenu/MobileMenu.jsx

@@ -42,30 +42,18 @@ export const MobileMenu = () => {
     };
   }, []);
 
-  const active = {
-    content: "''",
-    position: "absolute",
-    bottom: "10px",
-    left: "25%",
-    width: "50%",
-    height: "3px",
-    backgroundColor: "#DE858E",
-    borderRadius: "10px",
-    transform: "translateX(-50%)",
-    transition: "all .3s",
-  };
-
   const linkStyle = {
-    width: "0",
+    color: "#fff",
+    display: "block",
+    padding: "15px 0",
   };
 
-  const links = {
-    position: "relative",
-    fontSize: "16px",
+  const innerLink = {
+    color: location.pathname === "/LearnPage" ? "rgb(222, 133, 142)" : "#fff",
     display: "block",
-    padding: "1rem 0",
-    color: "#fff",
+    padding: "15px 0",
   };
+
   return (
     <>
       <Box
@@ -130,7 +118,7 @@ export const MobileMenu = () => {
           }}
         >
           <Box display={"flex"} alignItems={"center"}>
-            <Link to="/">
+            <Link to="/" onClick={handleClick}>
               <Box
                 display={"flex"}
                 alignItems={"baseline"}
@@ -160,20 +148,15 @@ export const MobileMenu = () => {
               <AccordionIcon color={"#fff"} fontSize={"28px"} />
             </AccordionButton>
             <AccordionPanel pb={4}>
-              <Link to="/LearnPage" style={links} onClick={handleClick}>
+              <Link to="/LearnPage" style={innerLink} 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}
+                style={linkStyle}
               >
                 Proof-of-pledge Protocol
               </Link>
@@ -181,7 +164,8 @@ export const MobileMenu = () => {
                 to="https://learn.rubix.net/smartcontract/"
                 // target="_blank"
                 // rel="noopener noreferrer"
-                style={links}
+                onClick={handleClick}
+                style={linkStyle}
               >
                 Smart Contracts
               </Link>
@@ -189,8 +173,8 @@ export const MobileMenu = () => {
                 to="https://learn.rubix.net/tokenomics/"
                 // target="_blank"
                 // rel="noopener noreferrer"
-                style={links}
                 onClick={handleClick}
+                style={linkStyle}
               >
                 Tokenomics in Rubix
               </Link>
@@ -213,20 +197,15 @@ export const MobileMenu = () => {
               <AccordionIcon color={"#fff"} fontSize={"28px"} />
             </AccordionButton>
             <AccordionPanel pb={4}>
-              <Link to="/BuildPage" style={links} onClick={handleClick}>
+              <Link to="/BuildPage" style={innerLink} 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}
+                style={linkStyle}
               >
                 Set up Rubix Node
               </Link>
@@ -234,7 +213,8 @@ export const MobileMenu = () => {
                 to="https://learn.rubix.net/quorum/"
                 // target="_blank"
                 // rel="noopener noreferrer"
-                style={links}
+                onClick={handleClick}
+                style={linkStyle}
               >
                 Quorum
               </Link>
@@ -242,8 +222,8 @@ export const MobileMenu = () => {
                 to="https://learn.rubix.net/subnets/"
                 // target="_blank"
                 // rel="noopener noreferrer"
-                style={links}
                 onClick={handleClick}
+                style={linkStyle}
               >
                 Subnets
               </Link>
@@ -266,49 +246,35 @@ export const MobileMenu = () => {
               <AccordionIcon color={"#fff"} fontSize={"28px"} />
             </AccordionButton>
             <AccordionPanel pb={4}>
-              <Link to="/fin-tech" style={links} onClick={handleClick}>
+              <Link to="/fin-tech" style={innerLink} onClick={handleClick}>
                 FinTech
-                <span
-                  style={location.pathname === "/fin-tech" ? active : linkStyle}
-                />
               </Link>
               <Link
                 to="/ad-tech"
                 // target="_blank"
                 // rel="noopener noreferrer"
-                style={links}
+                style={innerLink}
                 onClick={handleClick}
               >
                 AdTech
-                <span
-                  style={location.pathname === "/ad-tech" ? active : linkStyle}
-                />
               </Link>
               <Link
                 to="/mar-tech"
                 // target="_blank"
                 // rel="noopener noreferrer"
-                style={links}
+                style={innerLink}
                 onClick={handleClick}
               >
                 MarTech
-                <span
-                  style={location.pathname === "/mar-tech" ? active : linkStyle}
-                />
               </Link>
               <Link
                 to="/health-tech"
                 // target="_blank"
                 // rel="noopener noreferrer"
-                style={links}
+                style={innerLink}
                 onClick={handleClick}
               >
                 HealthTech
-                <span
-                  style={
-                    location.pathname === "/health-tech" ? active : linkStyle
-                  }
-                />
               </Link>
             </AccordionPanel>
           </AccordionItem>
@@ -329,13 +295,8 @@ export const MobileMenu = () => {
               <AccordionIcon color={"#fff"} fontSize={"28px"} />
             </AccordionButton>
             <AccordionPanel pb={4}>
-              <Link to="/community" style={links} onClick={handleClick}>
+              <Link to="/community" style={innerLink} onClick={handleClick}>
                 Community
-                <span
-                  style={
-                    location.pathname === "/community" ? active : linkStyle
-                  }
-                />
               </Link>
             </AccordionPanel>
           </AccordionItem>
@@ -358,15 +319,15 @@ export const MobileMenu = () => {
             <AccordionPanel pb={4}>
               <Link
                 to="https://rubixexplorer.com/"
-                style={links}
                 onClick={handleClick}
+                style={linkStyle}
               >
                 Wallet
               </Link>
               <Link
                 to="https://getfexr.com/"
-                style={links}
                 onClick={handleClick}
+                style={linkStyle}
               >
                 Explore
               </Link>

src/components/SubnetsComponent/NewSubnetComp.jsx

@@ -344,6 +344,7 @@ export const NewSubnetComp = () => {
                   color={"#E1E1E1"}
                   textAlign={"right"}
                   marginBottom={"2rem"}
+                  minHeight={"80px"}
                 >
                   <Text
                     as={"h2"}

src/pages/BuildPage.jsx

@@ -4,7 +4,7 @@ import Solve from "../components/BuildPage/Solve";
 import Tools from "../components/BuildPage/Tools";
 import Connect from "../components/BuildPage/Connect";
 import { useEffect, useState } from "react";
-import Footer from "../components/Footer/Footer";
+// import Footer from "../components/Footer/Footer";
 import LearnMore from "../components/BuildPage/LearnMore";
 import ToolMobile from "../components/MobileComponent/ToolMobile";
 import MobileSolve from "../components/MobileComponent/MobileSolve";
@@ -31,7 +31,7 @@ const BuildPage = () => {
 
   const isMobile = windowWidth <= 996;
 
-  return ( 
+  return (
     <>
       <BuildBanner />
       <WhyBuild />

src/pages/UseCases.jsx

@@ -1,3 +1,4 @@
+/* eslint-disable no-unused-vars */
 /* eslint-disable react/prop-types */
 import { useEffect } from "react";
 import UseCase from "../components/UseCase/UseCase";