Siddhesh.More/rubix
1
0
Fork 0
mirror of https://github.com/WDI-Ideas/rubix.git synced 2026-04-27 17:25:50 +00:00
Code Issues Packages Projects Releases Wiki Activity

New Static sub component made

Browse Source
This commit is contained in:
rockyeverlast
2024-05-21 16:58:55 +05:30
parent 0097543b65
commit dc674a40ec
8 changed files with 724 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
src/components/BlogPost/BlogPost.jsx
View File

@@ -41,6 +41,7 @@ const BlogPost = () => {
: null;
console.log(matchingBlogPost);
console.log(matchingBlogPost.content);
return (
<>
@@ -79,7 +80,6 @@ const BlogPost = () => {
textAlign={"center"}
className="rubix-fw-600"
fontSize={"40px"}
fontFamily={"Mona Sans"}
color={"#fff"}
sx={{
"@media (max-width: 600px)": {
@@ -272,6 +272,7 @@ const BlogPost = () => {
</Box>
<Box
className="blog-post"
pt={5}
pb={5}
sx={{

420
src/components/StaticSubComponents/StaticSubNet.jsx Normal file
View File

@@ -0,0 +1,420 @@
/* 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 { 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";
import StaticSubnetOne from "./StaticSubs/StaticSubnetOne";
import StaticSubnetTwo from "./StaticSubs/StaticSubnetTwo";
import StaticSubnetThree from "./StaticSubs/StaticSubnetThree";
import StaticSubnetFour from "./StaticSubs/StaticSubnetFour";
const StaticSubNet = () => {
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"}
>
<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={"#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&apos;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 &lt; 10 kWh &lt; 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 StaticSubNet;

77
src/components/StaticSubComponents/StaticSubs/StaticSubnetFour.jsx Normal file
View File

@@ -0,0 +1,77 @@
/* eslint-disable no-unused-vars */
import { Box, Button, Image, Text, Grid, GridItem } from "@chakra-ui/react";
import { Container } from "@chakra-ui/react";
import {
List,
ListItem,
ListIcon,
OrderedList,
UnorderedList,
} from "@chakra-ui/react";
import vector4 from "../../../assets/images/vector4.png";
const StaticSubnetFour = () => {
return (
<>
<Box
display={"flex"}
position={"absolute"}
top={"-70px"}
justifyContent={"flex-end"}
width={"100%"}
>
<Button
position={"relative"}
background={"transparent"}
// width={"165px"}
height={"57px"}
borderRadius={"28.5px"}
color={"#fff"}
border={"1px solid #A5A5A5"}
textTransform={"uppercase"}
fontSize={"16px"}
padding={"6px 20px"}
_after={{
content: "''",
position: "absolute",
background: `url(${vector4})`,
backgroundRepeat: "no-repeat",
width: "155px",
height: "100%",
left: "-155px",
top: "28px",
}}
_hover={{
background: "transparent",
// width: "165px",
// height: "57px",
borderRadius: "28.5px",
color: "#fff",
border: "1px solid #A5A5A5",
}}
>
Self Sovereign
</Button>
</Box>
<Box
display={"flex"}
flexDirection={"column"}
alignItems={"end"}
width={"565px"}
>
<UnorderedList color={"#E1E1E1"}>
<ListItem fontSize={"14px"}>
Permissioned subnets with no oracles and <br /> intermediaries
</ListItem>
<ListItem fontSize={"14px"}>No block space ransom</ListItem>
<ListItem fontSize={"14px"}>
Zero risk of transactions being blocked out of <br />
chain.
</ListItem>
</UnorderedList>
</Box>
</>
);
};
export default StaticSubnetFour;

76
src/components/StaticSubComponents/StaticSubs/StaticSubnetOne.jsx Normal file
View File

@@ -0,0 +1,76 @@
/* eslint-disable no-unused-vars */
import { Box, Button, Image, Text, Grid, GridItem } from "@chakra-ui/react";
import { Container } from "@chakra-ui/react";
import {
List,
ListItem,
ListIcon,
OrderedList,
UnorderedList,
} from "@chakra-ui/react";
import vector1 from "../../../assets/images/vector1.png";
const StaticSubnetOne = () => {
return (
<>
<Box display={"flex"} position={"absolute"} top={"-70px"}>
<Button
position={"relative"}
background={"transparent"}
width={"165px"}
height={"57px"}
borderRadius={"28.5px"}
color={"#fff"}
border={"1px solid #A5A5A5"}
fontSize={"16px"}
// _after={{
// content: "''",
// position: "absolute",
// backgroundImage: `url(${vector1})`,
// backgroundRepeat: "no-repeat",
// width: "383px",
// height: "100%",
// left: "165px",
// top: "28px",
// }}
sx={{
"::after": {
content: "''",
position: "absolute",
background: `url(${vector1})`,
backgroundRepeat: "no-repeat",
width: "383px",
height: "100%",
left: "165px",
top: "28px",
},
}}
_hover={{
background: "transparent",
width: "165px",
height: "57px",
borderRadius: "28.5px",
color: "#fff",
border: "1px solid #A5A5A5",
}}
>
P2P
</Button>
</Box>
<UnorderedList color={"#E1E1E1"}>
<ListItem fontSize={"14px"}>
Only L1 powering full mobile nodes
</ListItem>
<ListItem fontSize={"14px"}>
Mobile nodes with full state data will settle P2P . Consensus provided
by nearby node validators.
</ListItem>
<ListItem fontSize={"14px"}>
High scalability, Partition tolerance and portability
</ListItem>
</UnorderedList>
</>
);
};
export default StaticSubnetOne;

76
src/components/StaticSubComponents/StaticSubs/StaticSubnetThree.jsx Normal file
View File

@@ -0,0 +1,76 @@
/* eslint-disable no-unused-vars */
import { Box, Button, Image, Text, Grid, GridItem } from "@chakra-ui/react";
import { Container } from "@chakra-ui/react";
import {
List,
ListItem,
ListIcon,
OrderedList,
UnorderedList,
} from "@chakra-ui/react";
import vector3 from "../../../assets/images/vector3.png";
const StaticSubnetThree = () => {
return (
<>
<Box
display={"flex"}
position={"absolute"}
top={"-70px"}
justifyContent={"flex-end"}
width={"100%"}
>
<Button
position={"relative"}
background={"transparent"}
textTransform={"uppercase"}
width={"165px"}
height={"57px"}
borderRadius={"28.5px"}
color={"#fff"}
border={"1px solid #A5A5A5"}
fontSize={"16px"}
_before={{
content: "''",
position: "absolute",
background: `url(${vector3})`,
backgroundRepeat: "no-repeat",
width: "155px",
height: "100px",
left: "-155px",
top: "-40px",
}}
_hover={{
background: "transparent",
// width: "165px",
// height: "57px",
borderRadius: "28.5px",
color: "#fff",
border: "1px solid #A5A5A5",
}}
>
cheaper
</Button>
</Box>
<Box
display={"flex"}
flexDirection={"column"}
alignItems={"end"}
width={"552px"}
>
<UnorderedList color={"#E1E1E1"}>
<ListItem fontSize={"14px"}>No GAS fees</ListItem>
<ListItem fontSize={"14px"}>
Incremental and modular infrastructure ask
</ListItem>
<ListItem fontSize={"14px"}>
No expensive re training of development <br />
resources
</ListItem>
</UnorderedList>
</Box>
</>
);
};
export default StaticSubnetThree;

64
src/components/StaticSubComponents/StaticSubs/StaticSubnetTwo.jsx Normal file
View File

@@ -0,0 +1,64 @@
/* eslint-disable no-unused-vars */
import { Box, Button, Image, Text, Grid, GridItem } from "@chakra-ui/react";
import { Container } from "@chakra-ui/react";
import {
List,
ListItem,
ListIcon,
OrderedList,
UnorderedList,
} from "@chakra-ui/react";
import vector2 from "../../../assets/images/vector2.png";
const StaticSubnetTwo = () => {
return (
<>
<Box display={"flex"} position={"absolute"} top={"-70px"}>
<Button
position={"relative"}
background={"transparent"}
textTransform={"uppercase"}
width={"165px"}
height={"57px"}
borderRadius={"28.5px"}
color={"#fff"}
border={"1px solid #A5A5A5"}
fontSize={"16px"}
_after={{
content: "''",
position: "absolute",
background: `url(${vector2})`,
backgroundRepeat: "no-repeat",
width: "340px",
height: "100%",
left: "165px",
top: "-10px",
}}
_hover={{
background: "transparent",
width: "165px",
height: "57px",
borderRadius: "28.5px",
color: "#fff",
border: "1px solid #A5A5A5",
}}
>
Easier
</Button>
</Box>
<UnorderedList color={"#E1E1E1"}>
<ListItem fontSize={"14px"}>
Leverage own infrastructure for block space
</ListItem>
<ListItem fontSize={"14px"}>
Smart contracts in Rust , GoLang and C/C++
</ListItem>
<ListItem fontSize={"14px"}>
WASM compiler for smooth code migration
</ListItem>
</UnorderedList>
</>
);
};
export default StaticSubnetTwo;

4
src/index.css
View File

@@ -195,6 +195,10 @@ span.swiper-pagination-bullet {
right: 98%;
}
.blog-post .rubix-text-small h1 {
font-size: 2em;
}
@media only screen and (max-width: 600px) {
.tabspagination .swiper-button-prev,
.tabspagination .swiper-button-next {

7
src/pages/HomePage.jsx
View File

@@ -14,6 +14,8 @@ import PartnerMobile from "../components/MobileComponent/PartnerMobile";
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 { useBreakpointValue } from "@chakra-ui/react";
@@ -44,8 +46,9 @@ const HomePage = () => {
{!isLoading ? (
<>
<HomeBanner />
{/* <NewSubnetComp /> */}
{!isMobile ? <NewSubnetComp /> : <MobileSubnet />}
{/* {!isMobile ? <NewSubnetComp /> : <MobileSubnet />} */}
{!isMobile ? <StaticSubNet /> : <MobileSubnet />}
<Stats />
<WhitePaper />
{!isMobile ? <Partner /> : <PartnerMobile />}