mirror of
https://github.com/WDI-Ideas/rubix.git
synced 2026-04-27 17:35:50 +00:00
Added new scroll trigger component
This commit is contained in:
rockyeverlast
6
src/Contexts/GlobalStateContext.jsx
Normal file
6
src/Contexts/GlobalStateContext.jsx
Normal file
@@ -0,0 +1,6 @@
|
||||
// GlobalStateContext.js
|
||||
import { createContext } from 'react';
|
||||
|
||||
const GlobalStateContext = createContext();
|
||||
|
||||
export default GlobalStateContext;
|
||||
26
src/Contexts/GlobalStateProvider.jsx
Normal file
26
src/Contexts/GlobalStateProvider.jsx
Normal file
@@ -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 (
|
||||
<GlobalStateContext.Provider
|
||||
value={{
|
||||
isPinned,
|
||||
setIsPinned,
|
||||
}}
|
||||
>
|
||||
{children}
|
||||
</GlobalStateContext.Provider>
|
||||
);
|
||||
};
|
||||
export default GlobalStateProvider;
|
||||
@@ -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 ? (
|
||||
<>
|
||||
<Box position={"fixed"} zIndex={"999"} width={"100%"} id="navbar">
|
||||
<Box
|
||||
transition={"0.5s"}
|
||||
transform={isPinned ? "translateY(0px)" : "translateY(-130px)"}
|
||||
position={"fixed"}
|
||||
zIndex={"999"}
|
||||
width={"100%"}
|
||||
>
|
||||
<Box
|
||||
backgroundColor={"#141315"}
|
||||
// position={"fixed"}
|
||||
|
||||
451
src/components/SubnetsComponent/ScrollingSubnet.jsx
Normal file
451
src/components/SubnetsComponent/ScrollingSubnet.jsx
Normal file
@@ -0,0 +1,451 @@
|
||||
import { Box, Container, Image, Text } from "@chakra-ui/react";
|
||||
import { useContext, useEffect, useRef } from "react";
|
||||
import { gsap } from "gsap";
|
||||
import { ScrollTrigger } from "gsap/ScrollTrigger";
|
||||
import cube from "../../assets/images/cube.png";
|
||||
import stack from "../../assets/images/stackNew.webp";
|
||||
import { Component1 } from "./Component1";
|
||||
import { Component2 } from "./Component2";
|
||||
import { Component3 } from "./Component3";
|
||||
import { Component4 } from "./Component4";
|
||||
// import "./ScrollAnimation.css";
|
||||
import GlobalStateContext from "../../Contexts/GlobalStateContext";
|
||||
import StaticSubnetOne from "../StaticSubComponents/StaticSubs/StaticSubnetOne";
|
||||
import StaticSubnetTwo from "../StaticSubComponents/StaticSubs/StaticSubnetTwo";
|
||||
import StaticSubnetThree from "../StaticSubComponents/StaticSubs/StaticSubnetThree";
|
||||
import StaticSubnetFour from "../StaticSubComponents/StaticSubs/StaticSubnetFour";
|
||||
|
||||
// Initialize ScrollTrigger
|
||||
gsap.registerPlugin(ScrollTrigger);
|
||||
|
||||
const ScrollingSubnet = () => {
|
||||
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 (
|
||||
<div style={{ backgroundColor: "#000", overflow: "hidden" }}>
|
||||
<Box ref={mainBoxRef} height={"300vh"} position={"relative"}>
|
||||
<Box
|
||||
ref={firstBoxRef}
|
||||
position={"absolute"}
|
||||
top={0}
|
||||
left={0}
|
||||
height={"100vh"}
|
||||
width={"100%"}
|
||||
backgroundColor={"#000"}
|
||||
display={"grid"}
|
||||
alignContent={"center"}
|
||||
>
|
||||
<Container
|
||||
maxW="container.xl"
|
||||
textAlign={"center"}
|
||||
height={"100vh"}
|
||||
display={"grid"}
|
||||
alignContent={"center"}
|
||||
>
|
||||
<Text
|
||||
as={"h2"}
|
||||
fontWeight={700}
|
||||
fontSize={"40px"}
|
||||
textTransform={"capitalize"}
|
||||
color={"#fff"}
|
||||
sx={{
|
||||
"@media (max-width: 1024px)": {},
|
||||
"@media (max-width: 600px)": {
|
||||
fontSize: "28px",
|
||||
},
|
||||
}}
|
||||
>
|
||||
Decentralised Auto Syncing Subnets
|
||||
</Text>
|
||||
<Box
|
||||
display={"grid"}
|
||||
gridTemplateColumns={"repeat(2, 1fr)"}
|
||||
gridTemplateRows={"repeat(2, 1fr)"}
|
||||
gap={"9rem 4rem"}
|
||||
marginTop={"150px"}
|
||||
position={"relative"}
|
||||
padding={"0 4rem"}
|
||||
paddingBottom={"50px"}
|
||||
>
|
||||
<Image
|
||||
src={cube}
|
||||
width={"300px"}
|
||||
position={"absolute"}
|
||||
left={"0"}
|
||||
right={"0"}
|
||||
marginLeft={"auto"}
|
||||
marginRight={"auto"}
|
||||
cursor={"pointer"}
|
||||
transform="translateY(-10%)"
|
||||
animation="floatAnimation 2s infinite alternate"
|
||||
sx={{
|
||||
"@keyframes floatAnimation": {
|
||||
"0%": {
|
||||
transform: "translateY(0)",
|
||||
},
|
||||
"100%": {
|
||||
transform: "translateY(-20px)",
|
||||
},
|
||||
},
|
||||
}}
|
||||
/>
|
||||
|
||||
<Box
|
||||
gridColumn={"1/2"}
|
||||
textAlign={"left"}
|
||||
position={"relative"}
|
||||
width={"383px"}
|
||||
>
|
||||
<StaticSubnetOne />
|
||||
</Box>
|
||||
|
||||
<Box
|
||||
gridColumn={"1/2"}
|
||||
gridRow={"2"}
|
||||
textAlign={"left"}
|
||||
position={"relative"}
|
||||
width={"383px"}
|
||||
>
|
||||
<StaticSubnetTwo />
|
||||
</Box>
|
||||
|
||||
<Box
|
||||
gridColumn={"2/2"}
|
||||
gridRow={"2"}
|
||||
textAlign={"left"}
|
||||
position={"relative"}
|
||||
width={"383px"}
|
||||
>
|
||||
<StaticSubnetThree />
|
||||
</Box>
|
||||
|
||||
<Box
|
||||
gridColumn={"2/2"}
|
||||
textAlign={"left"}
|
||||
position={"relative"}
|
||||
width={"383px"}
|
||||
>
|
||||
<StaticSubnetFour />
|
||||
</Box>
|
||||
</Box>
|
||||
</Container>
|
||||
</Box>
|
||||
|
||||
<Box
|
||||
backgroundColor={"#000"}
|
||||
height={"100vh"}
|
||||
width={"100%"}
|
||||
padding={"0"}
|
||||
paddingBottom={""}
|
||||
ref={secondBoxRef}
|
||||
position={"absolute"}
|
||||
top={"0"}
|
||||
left={"0"}
|
||||
display={"grid"}
|
||||
placeContent={"center"}
|
||||
>
|
||||
<Text
|
||||
as={"h2"}
|
||||
fontWeight={700}
|
||||
fontSize={"40px"}
|
||||
textTransform={"capitalize"}
|
||||
color={"#fff"}
|
||||
marginBottom={"5rem"}
|
||||
textAlign={"center"}
|
||||
sx={{
|
||||
"@media (max-width: 1024px)": {},
|
||||
"@media (max-width: 600px)": {
|
||||
fontSize: "28px",
|
||||
},
|
||||
}}
|
||||
>
|
||||
With Unmatched Privacy and Scalability
|
||||
</Text>
|
||||
<Container maxW="container.xl" textAlign={"center"}>
|
||||
<Box display={"flex"} alignItems={"center"} gap={"8rem"}>
|
||||
<Box>
|
||||
<Image
|
||||
src={cube}
|
||||
width={"480px"}
|
||||
left={"0"}
|
||||
right={"0"}
|
||||
marginLeft={"auto"}
|
||||
marginRight={"auto"}
|
||||
cursor={"pointer"}
|
||||
transform="translateY(-10%)"
|
||||
animation="floatAnimation 2s infinite alternate"
|
||||
sx={{
|
||||
"@keyframes floatAnimation": {
|
||||
"0%": {
|
||||
transform: "translateY(0)",
|
||||
},
|
||||
"100%": {
|
||||
transform: "translateY(-20px)",
|
||||
},
|
||||
},
|
||||
}}
|
||||
/>
|
||||
</Box>
|
||||
<Box width={"50%"}>
|
||||
<Box color={"#E1E1E1"} textAlign={"left"} marginBottom={"2rem"}>
|
||||
<Text
|
||||
as={"h2"}
|
||||
fontSize={"24px"}
|
||||
color={"#fff"}
|
||||
marginBottom={"10px"}
|
||||
>
|
||||
01. Decentralisation
|
||||
</Text>
|
||||
<Text fontSize={"18px"}>
|
||||
Rubix Decentralised Identity(DID) issued at L1 is the
|
||||
foundation for building digital ownership enhancing
|
||||
applications.
|
||||
</Text>
|
||||
</Box>
|
||||
<Box color={"#E1E1E1"} textAlign={"left"} marginBottom={"2rem"}>
|
||||
<Text
|
||||
as={"h2"}
|
||||
fontSize={"24px"}
|
||||
color={"#fff"}
|
||||
marginBottom={"10px"}
|
||||
>
|
||||
02. Ultra Scalability
|
||||
</Text>
|
||||
<Text fontSize={"18px"}>
|
||||
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>
|
||||
</Box>
|
||||
<Box color={"#E1E1E1"} textAlign={"left"} marginBottom={"2rem"}>
|
||||
<Text
|
||||
as={"h2"}
|
||||
fontSize={"24px"}
|
||||
color={"#fff"}
|
||||
marginBottom={"10px"}
|
||||
>
|
||||
03. Data Security and Privacy
|
||||
</Text>
|
||||
<Text fontSize={"18px"}>
|
||||
Rubix Decentralised Identity(DID) issued at L1 is the
|
||||
foundation for building digital ownership enhancing
|
||||
applications
|
||||
</Text>
|
||||
</Box>
|
||||
</Box>
|
||||
</Box>
|
||||
</Container>
|
||||
</Box>
|
||||
|
||||
<Box
|
||||
backgroundColor={"#000"}
|
||||
height={"100vh"}
|
||||
width={"100%"}
|
||||
ref={thirdBoxRef}
|
||||
position={"absolute"}
|
||||
top={"0"}
|
||||
left={"0"}
|
||||
display={"grid"}
|
||||
placeContent={"center"}
|
||||
>
|
||||
<Text
|
||||
as={"h2"}
|
||||
fontWeight={700}
|
||||
fontSize={"40px"}
|
||||
textTransform={"capitalize"}
|
||||
color={"#fff"}
|
||||
marginBottom={"6rem"}
|
||||
textAlign={"center"}
|
||||
sx={{
|
||||
"@media (max-width: 1024px)": {},
|
||||
"@media (max-width: 600px)": {
|
||||
fontSize: "28px",
|
||||
},
|
||||
}}
|
||||
>
|
||||
All In One Composable Stack
|
||||
</Text>
|
||||
<Container maxW="container.xl" textAlign={"center"}>
|
||||
<Box display={"flex"} alignItems={"start"} gap={"5rem"}>
|
||||
<Box width={"100%"}>
|
||||
<Box
|
||||
color={"#E1E1E1"}
|
||||
textAlign={"right"}
|
||||
marginBottom={"2rem"}
|
||||
>
|
||||
<Text
|
||||
as={"h2"}
|
||||
fontSize={"20px"}
|
||||
color={"#fff"}
|
||||
marginBottom={"10px"}
|
||||
>
|
||||
Single Comprehensive Stack:
|
||||
</Text>
|
||||
<Text fontSize={"16px"}>
|
||||
Full Mobile node SDK, Smart Contracts, DID's, Secondary
|
||||
tokens (FTs and NFTs) all in one place.
|
||||
</Text>
|
||||
</Box>
|
||||
<Box
|
||||
color={"#E1E1E1"}
|
||||
textAlign={"right"}
|
||||
marginBottom={"2rem"}
|
||||
>
|
||||
<Text
|
||||
as={"h2"}
|
||||
fontSize={"20px"}
|
||||
color={"#fff"}
|
||||
marginBottom={"10px"}
|
||||
>
|
||||
High Partition Tolerance:
|
||||
</Text>
|
||||
<Text fontSize={"16px"}>
|
||||
Issues in one shard won't affect other shards performance
|
||||
</Text>
|
||||
</Box>
|
||||
<Box
|
||||
color={"#E1E1E1"}
|
||||
textAlign={"right"}
|
||||
marginBottom={"2rem"}
|
||||
>
|
||||
<Text
|
||||
as={"h2"}
|
||||
fontSize={"20px"}
|
||||
color={"#fff"}
|
||||
marginBottom={"10px"}
|
||||
>
|
||||
Fully Deterministic
|
||||
</Text>
|
||||
<Text fontSize={"16px"}>
|
||||
App can bring own Block space (BYOB)
|
||||
</Text>
|
||||
</Box>
|
||||
</Box>
|
||||
<Box>
|
||||
<Image
|
||||
src={stack}
|
||||
width={"700px"}
|
||||
left={"0"}
|
||||
right={"0"}
|
||||
marginLeft={"auto"}
|
||||
marginRight={"auto"}
|
||||
cursor={"pointer"}
|
||||
transform="translateY(-10%)"
|
||||
animation="floatAnimation 2s infinite alternate"
|
||||
sx={{
|
||||
"@keyframes floatAnimation": {
|
||||
"0%": {
|
||||
transform: "translateY(0)",
|
||||
},
|
||||
"100%": {
|
||||
transform: "translateY(-20px)",
|
||||
},
|
||||
},
|
||||
}}
|
||||
/>
|
||||
</Box>
|
||||
<Box width={"100%"}>
|
||||
<Box
|
||||
color={"#E1E1E1"}
|
||||
textAlign={"left"}
|
||||
marginBottom={"2rem"}
|
||||
minHeight={"80px"}
|
||||
>
|
||||
<Text
|
||||
as={"h2"}
|
||||
fontSize={"20px"}
|
||||
color={"#fff"}
|
||||
marginBottom={"10px"}
|
||||
>
|
||||
Unique Token/Object Based Architecture
|
||||
</Text>
|
||||
<Text fontSize={"16px"}>
|
||||
Build unlimited FTs and NFTs all at L1!!
|
||||
</Text>
|
||||
</Box>
|
||||
<Box color={"#E1E1E1"} textAlign={"left"} marginBottom={"2rem"}>
|
||||
<Text
|
||||
as={"h2"}
|
||||
fontSize={"20px"}
|
||||
color={"#fff"}
|
||||
marginBottom={"10px"}
|
||||
>
|
||||
Green By The Design
|
||||
</Text>
|
||||
<Text fontSize={"16px"}>
|
||||
100000 Rubix Transactions consume < 10 kWh < 100000
|
||||
Visa transactions
|
||||
</Text>
|
||||
</Box>
|
||||
<Box color={"#E1E1E1"} textAlign={"left"} marginBottom={"2rem"}>
|
||||
<Text
|
||||
as={"h2"}
|
||||
fontSize={"20px"}
|
||||
color={"#fff"}
|
||||
marginBottom={"10px"}
|
||||
>
|
||||
51.4 Million RBT
|
||||
</Text>
|
||||
<Text fontSize={"16px"}>Fixed Supply. Hardcapped</Text>
|
||||
</Box>
|
||||
</Box>
|
||||
</Box>
|
||||
</Container>
|
||||
</Box>
|
||||
</Box>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default ScrollingSubnet;
|
||||
@@ -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(
|
||||
<Provider store={store}>
|
||||
<React.StrictMode>
|
||||
<ChakraProvider theme={theme}>
|
||||
{/* <Fonts /> */}
|
||||
<App />
|
||||
<GlobalStateProvider>
|
||||
<App />
|
||||
</GlobalStateProvider>
|
||||
</ChakraProvider>
|
||||
</React.StrictMode>
|
||||
</Provider>
|
||||
|
||||
@@ -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 = () => {
|
||||
<>
|
||||
<HomeBanner />
|
||||
|
||||
{/* {!isMobile ? <NewSubnetComp /> : <MobileSubnet />} */}
|
||||
{!isMobile ? <StaticSubNet /> : <MobileSubnet />}
|
||||
{!isMobile ? <ScrollingSubnet /> : <MobileSubnet />}
|
||||
{/* {!isMobile ? <StaticSubNet /> : <MobileSubnet />} */}
|
||||
<Stats />
|
||||
<WhitePaper />
|
||||
{!isMobile ? <Partner /> : <PartnerMobile />}
|
||||
|
||||
Reference in New Issue
Block a user