diff --git a/src/Contexts/GlobalStateContext.jsx b/src/Contexts/GlobalStateContext.jsx new file mode 100644 index 0000000..21e9da5 --- /dev/null +++ b/src/Contexts/GlobalStateContext.jsx @@ -0,0 +1,6 @@ +// GlobalStateContext.js +import { createContext } from 'react'; + +const GlobalStateContext = createContext(); + +export default GlobalStateContext; \ No newline at end of file diff --git a/src/Contexts/GlobalStateProvider.jsx b/src/Contexts/GlobalStateProvider.jsx new file mode 100644 index 0000000..c4e2d88 --- /dev/null +++ b/src/Contexts/GlobalStateProvider.jsx @@ -0,0 +1,26 @@ +/* eslint-disable no-unused-vars */ +/* eslint-disable react/prop-types */ + +import React, { useState } from "react"; +import GlobalStateContext from "./GlobalStateContext"; + +function generateUID() { + // Generates a random 8-character alphanumeric string + return Math.random().toString(36).substring(2, 10); +} + +const GlobalStateProvider = ({ children }) => { + const [isPinned, setIsPinned] = useState(true); + + return ( + + {children} + + ); +}; +export default GlobalStateProvider; diff --git a/src/components/NavBar/NavBar.jsx b/src/components/NavBar/NavBar.jsx index c5119bc..8150e9c 100644 --- a/src/components/NavBar/NavBar.jsx +++ b/src/components/NavBar/NavBar.jsx @@ -15,7 +15,7 @@ import { Text, } from "@chakra-ui/react"; import { Outlet, Link, useLocation } from "react-router-dom"; -import { useEffect, useState } from "react"; +import { useContext, useEffect, useState } from "react"; import logo from "../../assets/images/rubix.png"; import { MobileMenu } from "../MobileMenu/MobileMenu"; import arrow from "../../assets/images/arrow.png"; @@ -37,6 +37,7 @@ import news from "../../assets/images/Navicons/news.png"; import events from "../../assets/images/Navicons/events.png"; import resources from "../../assets/images/Navicons/resources.png"; import { useGetUseCaseQuery } from "../../Redux/slice/useCaseSlice"; +import GlobalStateContext from "../../Contexts/GlobalStateContext"; const NavBar = () => { const [isScrolled, setIsScrolled] = useState(false); @@ -46,6 +47,7 @@ const NavBar = () => { const [isHoveredCommunity, setIsHoveredCommunity] = useState(false); const [windowWidth, setWindowWidth] = useState(window.innerWidth); const { data } = useGetUseCaseQuery(); + const isPinned = useContext(GlobalStateContext); // console.log(data); const useCase = data?.data?.rows; // console.log(useCase); @@ -102,7 +104,13 @@ const NavBar = () => { <> {!isMobile ? ( <> - + { + const { isPinned, setIsPinned } = useContext(GlobalStateContext); + const firstBoxRef = useRef(null); + const secondBoxRef = useRef(null); + const thirdBoxRef = useRef(null); + const mainBoxRef = useRef(null); + + useEffect(() => { + gsap.set(mainBoxRef.current, { opacity: 1 }); + + let tl = gsap.timeline({ + scrollTrigger: { + trigger: mainBoxRef.current, + start: "top top", + end: "bottom bottom", + scrub: true, + pin: true, + markers: false, // Set to true for debugging + onUpdate: (self) => { + setIsPinned(!self.isActive); // Set isPinned based on the isActive state of ScrollTrigger + }, + }, + }); + + tl.fromTo( + firstBoxRef.current, + { opacity: 1 }, + { opacity: 0, duration: 1, ease: "power2.inOut" } + ) // Adjust ease and duration as needed + .fromTo( + secondBoxRef.current, + { opacity: 0 }, + { opacity: 1, duration: 1, ease: "power2.inOut" }, + "<" + ) // Adjust ease and duration as needed + .fromTo( + secondBoxRef.current, + { opacity: 1 }, + { opacity: 0, duration: 1, ease: "power2.inOut" } + ) + .fromTo( + thirdBoxRef.current, + { opacity: 0 }, + { opacity: 1, duration: 1, ease: "power2.inOut" }, + "<" + ); // Adjust ease and duration as needed + + return () => { + tl.kill(); + }; + }, []); + + return ( +
+ + + + + Decentralised Auto Syncing Subnets + + + + + + + + + + + + + + + + + + + + + + + + + + With Unmatched Privacy and Scalability + + + + + + + + + + 01. Decentralisation + + + Rubix Decentralised Identity(DID) issued at L1 is the + foundation for building digital ownership enhancing + applications. + + + + + 02. Ultra Scalability + + + 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. + + + + + 03. Data Security and Privacy + + + Rubix Decentralised Identity(DID) issued at L1 is the + foundation for building digital ownership enhancing + applications + + + + + + + + + + All In One Composable Stack + + + + + + + Single Comprehensive Stack: + + + Full Mobile node SDK, Smart Contracts, DID's, Secondary + tokens (FTs and NFTs) all in one place. + + + + + High Partition Tolerance: + + + Issues in one shard won't affect other shards performance + + + + + Fully Deterministic + + + App can bring own Block space (BYOB) + + + + + + + + + + Unique Token/Object Based Architecture + + + Build unlimited FTs and NFTs all at L1!! + + + + + Green By The Design + + + 100000 Rubix Transactions consume < 10 kWh < 100000 + Visa transactions + + + + + 51.4 Million RBT + + Fixed Supply. Hardcapped + + + + + + +
+ ); +}; + +export default ScrollingSubnet; diff --git a/src/main.jsx b/src/main.jsx index 424ecea..c314b9d 100644 --- a/src/main.jsx +++ b/src/main.jsx @@ -7,13 +7,16 @@ import theme from "./components/Theme/Theme.jsx"; import store from "./Redux/store/store.js"; // import Fonts from "./components/Theme/Fonts.jsx"; import { Provider } from "react-redux"; +import GlobalStateProvider from "./Contexts/GlobalStateProvider.jsx"; ReactDOM.createRoot(document.getElementById("root")).render( {/* */} - + + + diff --git a/src/pages/HomePage.jsx b/src/pages/HomePage.jsx index ae67e4b..9d9f68d 100644 --- a/src/pages/HomePage.jsx +++ b/src/pages/HomePage.jsx @@ -15,6 +15,7 @@ import ResourcesMobile from "../components/MobileComponent/ResourcesMobile"; import Loader from "../components/Loader/Loader"; import { useGetBlogQuery } from "../Redux/slice/blogsSlice"; import StaticSubNet from "../components/StaticSubComponents/StaticSubNet"; +import ScrollingSubnet from "../components/SubnetsComponent/ScrollingSubnet"; // @@ -47,8 +48,8 @@ const HomePage = () => { <> - {/* {!isMobile ? : } */} - {!isMobile ? : } + {!isMobile ? : } + {/* {!isMobile ? : } */} {!isMobile ? : }