mirror of
https://github.com/WDI-Ideas/rubix.git
synced 2026-04-27 21:15:50 +00:00
463 lines
15 KiB
JavaScript
463 lines
15 KiB
JavaScript
import { Box, Container, Image, Stack, Text } from "@chakra-ui/react";
|
|
import { Fade, ScaleFade, Slide, SlideFade, Collapse } from "@chakra-ui/react";
|
|
import { useEffect, useRef, useState } from "react";
|
|
import { Component1 } from "./Component1";
|
|
import { Component2 } from "./Component2";
|
|
import { Component3 } from "./Component3";
|
|
import { Component4 } from "./Component4";
|
|
// import { SubnetPage2 } from "./SubnetPage2";
|
|
import cube from "../../assets/images/cube.png";
|
|
import stack from "../../assets/images/stackNew.webp";
|
|
import { gsap } from "gsap";
|
|
import { ScrollTrigger } from "gsap/ScrollTrigger";
|
|
|
|
// Initialize ScrollTrigger
|
|
gsap.registerPlugin(ScrollTrigger);
|
|
|
|
const SubnetContent = {
|
|
heading: `decentralised Auto Syncing subnets`,
|
|
};
|
|
|
|
export const NewSubnetComp = () => {
|
|
const firstBoxRef = useRef(null);
|
|
const secondBoxRef = useRef(null);
|
|
const thirdBoxRef = useRef(null);
|
|
const mainBox = useRef(null);
|
|
|
|
useEffect(() => {
|
|
// gsap.set(firstBoxRef.current, { opacity: 1 });
|
|
let tl = gsap
|
|
.timeline({
|
|
scrollTrigger: {
|
|
trigger: mainBox.current,
|
|
start: "top top",
|
|
scrub: 1,
|
|
pin: true,
|
|
end: "bottom bottom",
|
|
markers: true,
|
|
},
|
|
})
|
|
.fromTo(firstBoxRef.current, { opacity: 1 }, { opacity: 0 })
|
|
.fromTo(secondBoxRef.current, { opacity: 0 }, { opacity: 1 })
|
|
.fromTo(secondBoxRef.current, { opacity: 1 }, { opacity: 0 })
|
|
.fromTo(thirdBoxRef.current, { opacity: 0 }, { opacity: 1 });
|
|
|
|
// .fromTo(
|
|
// firstBoxRef.current,
|
|
// { opacity: 1, duration: 3, transform: "translateX(0vw)" },
|
|
// { opacity: 0, duration: 3, transform: "translateX(100vw)" }
|
|
// )
|
|
// .fromTo(
|
|
// secondBoxRef.current,
|
|
// { opacity: 0, duration: 1, transform: "translateX(-100vw)" },
|
|
// { opacity: 1, duration: 1, transform: "translateX(0vw)" }
|
|
// )
|
|
// .fromTo(
|
|
// secondBoxRef.current,
|
|
// { opacity: 1, duration: 3, transform: "translateX(0vw)" },
|
|
// { opacity: 0, duration: 3, transform: "translateX(100vw)" }
|
|
// )
|
|
// .fromTo(
|
|
// thirdBoxRef.current,
|
|
// { opacity: 0, duration: 1, transform: "translateX(-100vw)" },
|
|
// { opacity: 1, duration: 1, transform: "translateX(0vw)" }
|
|
// );
|
|
|
|
return () => {
|
|
tl.kill();
|
|
};
|
|
}, []);
|
|
|
|
return (
|
|
<div
|
|
style={{
|
|
backgroundColor: "#000",
|
|
overflow: "hidden",
|
|
}}
|
|
>
|
|
<Box
|
|
ref={mainBox}
|
|
height={"300vh"}
|
|
position={"relative"}
|
|
display={"flex"}
|
|
justifyContent={"center"}
|
|
alignItems={"center"}
|
|
>
|
|
<Box
|
|
ref={firstBoxRef}
|
|
position={"absolute"}
|
|
top={"0"}
|
|
left={"0"}
|
|
height={"100vh"}
|
|
width={"100%"}
|
|
backgroundColor={"#000"}
|
|
>
|
|
<Container
|
|
maxW="container.xl"
|
|
textAlign={"center"}
|
|
// display={"grid"}
|
|
placeContent={"center"}
|
|
>
|
|
<Text
|
|
as={"h2"}
|
|
paddingTop={"2rem"}
|
|
fontWeight={700}
|
|
fontSize={"40px"}
|
|
textTransform={"capitalize"}
|
|
color={"#fff"}
|
|
sx={{
|
|
"@media (max-width: 1024px)": {},
|
|
"@media (max-width: 600px)": {
|
|
fontSize: "28px",
|
|
},
|
|
}}
|
|
>
|
|
{SubnetContent.heading}
|
|
</Text>
|
|
<Box
|
|
display={"grid"}
|
|
gridTemplateColumns={"repeat(2, 1fr)"}
|
|
gridTemplateRows={"repeat(2, 1fr)"}
|
|
gap={"17rem 4rem"}
|
|
marginTop={"150px"}
|
|
position={"relative"}
|
|
padding={"0 4rem"}
|
|
paddingBottom={"50px"}
|
|
>
|
|
<Image
|
|
src={cube}
|
|
width={"410px"}
|
|
position={"absolute"}
|
|
left={"0"}
|
|
right={"0"}
|
|
marginLeft={"auto"}
|
|
marginRight={"auto"}
|
|
cursor={"pointer"}
|
|
transform="translateY(-10%)"
|
|
animation="floatAnimation 2s infinite alternate"
|
|
// onClick={handleImageClick}
|
|
sx={{
|
|
"@keyframes floatAnimation": {
|
|
"0%": {
|
|
transform: "translateY(0)",
|
|
},
|
|
"100%": {
|
|
transform: "translateY(-20px)",
|
|
},
|
|
},
|
|
}}
|
|
/>
|
|
|
|
<Box
|
|
gridColumn={"1/2"}
|
|
textAlign={"left"}
|
|
position={"relative"}
|
|
width={"383px"}
|
|
>
|
|
<Component1 />
|
|
</Box>
|
|
|
|
<Box
|
|
gridColumn={"1/2"}
|
|
gridRow={"2"}
|
|
textAlign={"left"}
|
|
position={"relative"}
|
|
width={"383px"}
|
|
>
|
|
<Component2 />
|
|
</Box>
|
|
|
|
<Box
|
|
gridColumn={"2/2"}
|
|
gridRow={"2"}
|
|
textAlign={"left"}
|
|
position={"relative"}
|
|
width={"383px"}
|
|
>
|
|
<Component3 />
|
|
</Box>
|
|
|
|
<Box
|
|
gridColumn={"2/2"}
|
|
textAlign={"left"}
|
|
position={"relative"}
|
|
width={"383px"}
|
|
>
|
|
<Component4 />
|
|
</Box>
|
|
</Box>
|
|
</Container>
|
|
</Box>
|
|
|
|
<Box
|
|
backgroundColor={"#000"}
|
|
height={"100vh"}
|
|
padding={"0 5rem"}
|
|
paddingBottom={"2rem"}
|
|
ref={secondBoxRef}
|
|
position={"absolute"}
|
|
top={"0"}
|
|
left={"0"}
|
|
>
|
|
<Text
|
|
as={"h2"}
|
|
paddingTop={"2rem"}
|
|
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"}
|
|
// position={"absolute"}
|
|
left={"0"}
|
|
right={"0"}
|
|
marginLeft={"auto"}
|
|
marginRight={"auto"}
|
|
cursor={"pointer"}
|
|
transform="translateY(-10%)"
|
|
animation="floatAnimation 2s infinite alternate"
|
|
// onClick={click}
|
|
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"}
|
|
padding={"2rem"}
|
|
// paddingBottom={"2rem"}
|
|
ref={thirdBoxRef}
|
|
position={"absolute"}
|
|
top={"0"}
|
|
left={"0"}
|
|
// width={"100vw"}
|
|
>
|
|
<Text
|
|
as={"h2"}
|
|
paddingTop={"2rem"}
|
|
fontWeight={700}
|
|
fontSize={"40px"}
|
|
textTransform={"capitalize"}
|
|
color={"#fff"}
|
|
marginBottom={"5rem"}
|
|
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={"3rem"}>
|
|
<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 Tolerence:
|
|
</Text>
|
|
<Text fontSize={"16px"}>
|
|
Issues in one shard wont 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"}
|
|
// position={"absolute"}
|
|
left={"0"}
|
|
right={"0"}
|
|
marginLeft={"auto"}
|
|
marginRight={"auto"}
|
|
cursor={"pointer"}
|
|
transform="translateY(-10%)"
|
|
animation="floatAnimation 2s infinite alternate"
|
|
// onClick={click}
|
|
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 Transaction consume < 10 kWh < 100000
|
|
Visa transaction
|
|
</Text>
|
|
</Box>
|
|
<Box color={"#E1E1E1"} textAlign={"left"} marginBottom={"2rem"}>
|
|
<Text
|
|
as={"h2"}
|
|
fontSize={"20px"}
|
|
color={"#fff"}
|
|
marginBottom={"10px"}
|
|
>
|
|
Fixed Hard Capped Supply Of RBT At 51.4 Million
|
|
</Text>
|
|
{/* <Text fontSize={"18px"}>
|
|
</Text> */}
|
|
</Box>
|
|
</Box>
|
|
</Box>
|
|
</Container>
|
|
</Box>
|
|
</Box>
|
|
</div>
|
|
);
|
|
};
|