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

Subnet component Api in progress

Browse Source
This commit is contained in:
rockyeverlast
2024-05-17 13:42:16 +05:30
parent e167bd8ce5
commit cda19b93c8
5 changed files with 504 additions and 489 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
src/Redux/slice/homeSlice.js
View File

@@ -7,7 +7,10 @@ export const homePageApi = createApi({
getHomePage: builder.query({
query: () => 'home/active',
}),
getDecenter: builder.query({
query: () => 'decenter/active',
}),
}),
});
export const { useGetHomePageQuery } = homePageApi;
export const { useGetHomePageQuery, useGetDecenterQuery } = homePageApi;

5
src/Redux/slice/learPageSlice.js
View File

@@ -13,7 +13,10 @@ export const learnPageApi = createApi({
getpartnerCard: builder.query({
query: () => 'card/active',
}),
getFeature: builder.query({
query: () => 'feature/active',
}),
}),
});
export const { useGetLearnPageQuery, useGetLearnFaqQuery, useGetpartnerCardQuery } = learnPageApi;
export const { useGetLearnPageQuery, useGetLearnFaqQuery, useGetpartnerCardQuery, useGetFeatureQuery } = learnPageApi;

244
src/components/LearnPage/WhyRubix.jsx
View File

@@ -1,3 +1,4 @@
/* eslint-disable no-unused-vars */
import { Box, Container, Image, Text } from "@chakra-ui/react";
import {
Accordion,
@@ -8,6 +9,8 @@ import {
} from "@chakra-ui/react";
import bg from "../../assets/images/whyRubix.webp";
import cube from "../../assets/images/cube.png";
import { useGetFeatureQuery } from "../../Redux/slice/learPageSlice";
import Loader from "../Loader/Loader";
const accordion = [
{
@@ -38,143 +41,158 @@ const accordion = [
];
const WhyRubix = () => {
const { data, isLoading, error } = useGetFeatureQuery();
console.log(data?.data?.rows);
const feature = data?.data?.rows;
if (isLoading) {
return (
<div>
<Loader />
</div>
);
}
return (
<Box
backgroundImage={`url(${bg})`}
backgroundRepeat={"no-repeat"}
backgroundSize={"cover"}
>
<Container
maxW={"container.xl"}
padding={"5rem 4rem"}
sx={{
"@media (max-width: 1024px)": {
padding: "3rem",
},
"@media (max-width:600px)": {
padding: "4rem 1rem",
},
}}
>
<Text
as={"h2"}
// paddingTop={"3rem"}
paddingBottom={"2rem"}
fontWeight={700}
fontSize={"40px"}
textAlign={"left"}
textTransform={"capitalize"}
color={"#fff"}
{feature?.map((item) => (
<Container
key={item.id}
maxW={"container.xl"}
padding={"5rem 4rem"}
sx={{
"@media (max-width: 1024px)": {
fontSize: "35px",
padding: "3rem",
},
"@media (max-width: 600px)": {
fontSize: "22px",
textAlign: "center",
marginBottom:'30px'
"@media (max-width:600px)": {
padding: "4rem 1rem",
},
}}
>
Why developers choose Rubix
</Text>
<Box
display={"flex"}
alignItems={"flex-start"}
justifyContent={"space-between"}
gap={"2rem"}
sx={{
"@media (max-width: 435px)": {
flexDirection: "column-reverse",
alignItems: "center",
},
"@media (max-width: 375px)": {},
}}
>
<Text
as={"h2"}
// paddingTop={"3rem"}
paddingBottom={"2rem"}
fontWeight={700}
fontSize={"40px"}
textAlign={"left"}
textTransform={"capitalize"}
color={"#fff"}
sx={{
"@media (max-width: 1024px)": {
fontSize: "35px",
},
"@media (max-width: 600px)": {
fontSize: "22px",
textAlign: "center",
marginBottom: "30px",
},
}}
>
{item.heading}
</Text>
<Box
width={"70%"}
display={"flex"}
alignItems={"flex-start"}
justifyContent={"space-between"}
gap={"2rem"}
sx={{
"@media (max-width: 435px)": {
width: "100%",
flexDirection: "column-reverse",
alignItems: "center",
},
"@media (max-width: 375px)": {},
}}
>
<Accordion allowToggle defaultIndex={[0]}>
{accordion.map((accord) => (
<>
<AccordionItem
borderTop={"none"}
borderBottom={"1px solid white"}
marginBottom={"1rem"}
padding={"1rem 0"}
key={accord.id}
sx={{
"@media (max-width: 600px)": {
marginBottom: "0px",
padding:'12px 0'
},
}}
>
<h2>
<AccordionButton outline={"none"} paddingLeft={"0px"}>
<Box
as="span"
flex="1"
textAlign="left"
fontFamily={"Mona Sans"}
fontWeight={"500"}
fontSize={"28px"}
color={"#fff"}
sx={{
"@media (max-width: 600px)": {
fontSize: "16px",
},
}}
>
{accord.title}
</Box>
<AccordionIcon color={"#fff"} fontSize={"30px"} />
</AccordionButton>
</h2>
<AccordionPanel
pb={4}
fontFamily={"Poppins"}
fontWeight={"400"}
color={"#E8E8E8"}
width={"80%"}
fontSize={"20px"}
paddingLeft={"0px"}
<Box
width={"70%"}
sx={{
"@media (max-width: 435px)": {
width: "100%",
},
"@media (max-width: 375px)": {},
}}
>
<Accordion allowToggle defaultIndex={[0]}>
{item?.features.map((accord) => (
<>
<AccordionItem
borderTop={"none"}
borderBottom={"1px solid white"}
marginBottom={"1rem"}
padding={"1rem 0"}
key={accord.id}
sx={{
"@media (max-width: 1024px)": {
width: "100%",
},
"@media (max-width: 435px)": {
fontSize: "14px",
"@media (max-width: 600px)": {
marginBottom: "0px",
padding: "12px 0",
},
}}
>
{accord.content}
</AccordionPanel>
</AccordionItem>
</>
))}
</Accordion>
<h2>
<AccordionButton outline={"none"} paddingLeft={"0px"}>
<Box
as="span"
flex="1"
textAlign="left"
fontFamily={"Mona Sans"}
fontWeight={"500"}
fontSize={"28px"}
color={"#fff"}
sx={{
"@media (max-width: 600px)": {
fontSize: "16px",
},
}}
>
{accord.title}
</Box>
<AccordionIcon color={"#fff"} fontSize={"30px"} />
</AccordionButton>
</h2>
<AccordionPanel
pb={4}
fontFamily={"Poppins"}
fontWeight={"400"}
color={"#E8E8E8"}
width={"80%"}
fontSize={"20px"}
paddingLeft={"0px"}
sx={{
"@media (max-width: 1024px)": {
width: "100%",
},
"@media (max-width: 435px)": {
fontSize: "14px",
},
}}
>
{accord.content}
</AccordionPanel>
</AccordionItem>
</>
))}
</Accordion>
</Box>
<Box>
<Image
src={cube}
width={"550px"}
sx={{
"@media (max-width: 1024px)": {
width: "260px",
},
"@media (max-width: 435px)": {},
}}
/>
</Box>
</Box>
<Box>
<Image
src={cube}
width={"550px"}
sx={{
"@media (max-width: 1024px)": {
width: "260px",
},
"@media (max-width: 435px)": {},
}}
/>
</Box>
</Box>
</Container>
</Container>
))}
</Box>
);
};

12
src/components/SubnetsComponent/Component1.jsx
View File

@@ -10,10 +10,10 @@ import {
} from "@chakra-ui/react";
import vector1 from "../../assets/images/vector1.png";
export const Component1 = () => {
export const Component1 = ({ id, title, content }) => {
return (
<>
<Box display={"flex"} position={"absolute"} top={"-70px"}>
<Box display={"flex"} position={"absolute"} top={"-70px"} key={id}>
<Button
position={"relative"}
background={"transparent"}
@@ -54,18 +54,18 @@ export const Component1 = () => {
border: "1px solid #A5A5A5",
}}
>
P2P
{title}
</Button>
</Box>
<UnorderedList color={"#E1E1E1"}>
<ListItem fontSize={"14px"}>Only L1 powering full mobile nodes</ListItem>
<ListItem fontSize={"14px"}>
<ListItem fontSize={"14px"}>{content}</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>
</ListItem> */}
</UnorderedList>
</>
);

727
src/components/SubnetsComponent/NewSubnetComp.jsx
View File

@@ -13,6 +13,7 @@ import cube from "../../assets/images/cube.png";
import stack from "../../assets/images/stackNew.webp";
import { gsap } from "gsap";
import { ScrollTrigger } from "gsap/ScrollTrigger";
import { useGetDecenterQuery } from "../../Redux/slice/homeSlice";
// Initialize ScrollTrigger
gsap.registerPlugin(ScrollTrigger);
@@ -22,6 +23,10 @@ gsap.registerPlugin(ScrollTrigger);
// };
export const NewSubnetComp = () => {
const { data, isLoading, error } = useGetDecenterQuery();
console.log(data?.data?.rows);
const decentralised = data?.data?.rows;
// const firstBoxRef = useRef(null);
// const secondBoxRef = useRef(null);
// const thirdBoxRef = useRef(null);
@@ -78,40 +83,111 @@ export const NewSubnetComp = () => {
overflow: "hidden",
}}
>
<Box
// ref={mainBox}
height={"auto"}
// position={"relative"}
// display={"flex"}
// justifyContent={"center"}
// alignItems={"center"}
>
{decentralised?.map((item) => (
<Box
// ref={firstBoxRef}
// position={"absolute"}
// top={"0"}
// left={"0"}
// height={"100vh"}
width={"100%"}
backgroundColor={"#000"}
display={"grid"}
alignContent={"center"}
key={item.id}
// ref={mainBox}
height={"auto"}
// position={"relative"}
// display={"flex"}
// justifyContent={"center"}
// alignItems={"center"}
>
<Container
maxW="container.xl"
textAlign={"center"}
<Box
// ref={firstBoxRef}
// position={"absolute"}
// top={"0"}
// left={"0"}
// height={"100vh"}
width={"100%"}
backgroundColor={"#000"}
display={"grid"}
// p={10}
paddingTop={"4rem"}
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",
},
}}
>
{item.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)",
},
},
}}
/>
{item?.decenters.map((data) => console.log(data[0]))}
</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)": {
@@ -119,356 +195,271 @@ export const NewSubnetComp = () => {
},
}}
>
decentralised Auto Syncing subnets
With Unmatched Privacy and Scalability
</Text>
<Box
display={"grid"}
gridTemplateColumns={"repeat(2, 1fr)"}
gridTemplateRows={"repeat(2, 1fr)"}
gap={"17rem 4rem"}
marginTop={"150px"}
position={"relative"}
padding={"0 4rem"}
paddingBottom={"50px"}
<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",
},
}}
>
<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 />
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>
<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>
</Container>
</Box>
</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>
);
};