mirror of
https://github.com/WDI-Ideas/rubix.git
synced 2026-04-29 03:35:50 +00:00
925 lines
30 KiB
JavaScript
925 lines
30 KiB
JavaScript
/* eslint-disable no-unused-vars */
|
|
// / eslint-disable no-unused-vars /
|
|
// / eslint-disable no-unused-vars /;
|
|
import { Box, Container, Image, Stack, Text } from "@chakra-ui/react";
|
|
import { Fade, 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-=500vh",
|
|
// markers: false,
|
|
// },
|
|
// })
|
|
// .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={"auto"}
|
|
// position={"relative"}
|
|
// display={"flex"}
|
|
// justifyContent={"center"}
|
|
// alignItems={"center"}
|
|
>
|
|
<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"}
|
|
// p={10}
|
|
paddingTop={"4rem"}
|
|
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={"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={"#101015"}
|
|
// height={"100vh"}
|
|
width={"100%"}
|
|
padding={"0 5rem"}
|
|
paddingBottom={"2rem"}
|
|
// ref={secondBoxRef}
|
|
// position={"absolute"}
|
|
// top={"0"}
|
|
// left={"0"}
|
|
display={"grid"}
|
|
placeContent={"center"}
|
|
>
|
|
<Text
|
|
as={"h2"}
|
|
paddingTop={"4rem"}
|
|
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"}
|
|
width={"100%"}
|
|
padding={"2rem"}
|
|
// paddingBottom={"2rem"}
|
|
// ref={thirdBoxRef}
|
|
// position={"absolute"}
|
|
// top={"0"}
|
|
// left={"0"}
|
|
display={"grid"}
|
|
placeContent={"center"}
|
|
>
|
|
<Text
|
|
as={"h2"}
|
|
paddingTop={"5rem"}
|
|
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={"5rem"}>
|
|
<Box width={"100%"}>
|
|
<Box
|
|
color={"#E1E1E1"}
|
|
textAlign={"right"}
|
|
marginBottom={"2rem"}
|
|
minHeight={"80px"}
|
|
>
|
|
<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 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>
|
|
);
|
|
};
|
|
|
|
// import { Box, Container, Image, Stack, Text } from "@chakra-ui/react";
|
|
// import { Fade, 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: false,
|
|
// },
|
|
// })
|
|
// .fromTo(firstBoxRef.current, { alpha: 1 }, { alpha: 0 })
|
|
// .fromTo(secondBoxRef.current, { alpha: 0 }, { alpha: 1 })
|
|
// .fromTo(secondBoxRef.current, { alpha: 1 }, { alpha: 0 })
|
|
// .fromTo(thirdBoxRef.current, { alpha: 0 }, { alpha: 1 });
|
|
|
|
// 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"}
|
|
// display={"grid"}
|
|
// alignContent={"center"}
|
|
// >
|
|
// <Container
|
|
// maxW="container.xl"
|
|
// textAlign={"center"}
|
|
// height={"100vh"}
|
|
// display={"grid"}
|
|
// // p={10}
|
|
// paddingTop={"10rem"}
|
|
// 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={"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"}
|
|
// width={"100%"}
|
|
// padding={"0 5rem"}
|
|
// paddingBottom={"2rem"}
|
|
// ref={secondBoxRef}
|
|
// position={"absolute"}
|
|
// top={"0"}
|
|
// left={"0"}
|
|
// display={"grid"}
|
|
// placeContent={"center"}
|
|
// >
|
|
// <Text
|
|
// as={"h2"}
|
|
// paddingTop={"10rem"}
|
|
// 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"}
|
|
// width={"100%"}
|
|
// padding={"2rem"}
|
|
// paddingBottom={"2rem"}
|
|
// ref={thirdBoxRef}
|
|
// position={"absolute"}
|
|
// top={"0"}
|
|
// left={"0"}
|
|
// display={"grid"}
|
|
// placeContent={"center"}
|
|
// >
|
|
// <Text
|
|
// as={"h2"}
|
|
// paddingTop={"5rem"}
|
|
// 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={"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 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 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>
|
|
// );
|
|
// };
|