From 0f5dc2f619dac504b82e2ac675e7cab82919a0c7 Mon Sep 17 00:00:00 2001 From: rockyeverlast Date: Tue, 16 Apr 2024 19:38:25 +0530 Subject: [PATCH] Added page transitions effect --- src/App.jsx | 10 ++- src/Layout/DefaultLayout.jsx | 21 ++++- src/components/Contact/Form.jsx | 7 +- src/components/Footer/MobileFooter.jsx | 2 +- src/components/MobileMenu/MobileMenu.jsx | 89 ++++++------------- .../SubnetsComponent/NewSubnetComp.jsx | 1 + src/pages/BuildPage.jsx | 4 +- src/pages/UseCases.jsx | 1 + 8 files changed, 62 insertions(+), 73 deletions(-) diff --git a/src/App.jsx b/src/App.jsx index 3426824..7662dbe 100644 --- a/src/App.jsx +++ b/src/App.jsx @@ -10,9 +10,13 @@ import DefaultLayout from "./Layout/DefaultLayout"; const router = createBrowserRouter( createRoutesFromElements( - route.map(({ path, element }) => ( - {element}} /> - )) + route.map(({ path, element }) => ( + {element}} + /> + )) ) ); diff --git a/src/Layout/DefaultLayout.jsx b/src/Layout/DefaultLayout.jsx index 4fe1237..cc7af9d 100644 --- a/src/Layout/DefaultLayout.jsx +++ b/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 (
- {children} + + {children} +
); diff --git a/src/components/Contact/Form.jsx b/src/components/Contact/Form.jsx index 503e101..87b7da7 100644 --- a/src/components/Contact/Form.jsx +++ b/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)": {}, }} > diff --git a/src/components/Footer/MobileFooter.jsx b/src/components/Footer/MobileFooter.jsx index c1387ec..b00e87b 100644 --- a/src/components/Footer/MobileFooter.jsx +++ b/src/components/Footer/MobileFooter.jsx @@ -50,7 +50,7 @@ const MobileFooter = () => { color={"#B0B0B0"} fontFamily={"Mona Sans"} fontWeight={"500"} - fontSize={"16px"} + fontSize={"22px"} > Explore diff --git a/src/components/MobileMenu/MobileMenu.jsx b/src/components/MobileMenu/MobileMenu.jsx index 3a1eb49..c1c613b 100644 --- a/src/components/MobileMenu/MobileMenu.jsx +++ b/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 ( <> { }} > - + { - + Learn - Proof-of-pledge Protocol @@ -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 @@ -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 @@ -213,20 +197,15 @@ export const MobileMenu = () => { - + Build - Set up Rubix Node @@ -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 @@ -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 @@ -266,49 +246,35 @@ export const MobileMenu = () => { - + FinTech - AdTech - MarTech - HealthTech - @@ -329,13 +295,8 @@ export const MobileMenu = () => { - + Community - @@ -358,15 +319,15 @@ export const MobileMenu = () => { Wallet Explore diff --git a/src/components/SubnetsComponent/NewSubnetComp.jsx b/src/components/SubnetsComponent/NewSubnetComp.jsx index cbf741e..31caa0b 100644 --- a/src/components/SubnetsComponent/NewSubnetComp.jsx +++ b/src/components/SubnetsComponent/NewSubnetComp.jsx @@ -344,6 +344,7 @@ export const NewSubnetComp = () => { color={"#E1E1E1"} textAlign={"right"} marginBottom={"2rem"} + minHeight={"80px"} > { const isMobile = windowWidth <= 996; - return ( + return ( <> diff --git a/src/pages/UseCases.jsx b/src/pages/UseCases.jsx index 592bb30..a0eb876 100644 --- a/src/pages/UseCases.jsx +++ b/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";