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

updated banner/ form/stats/NewSubnet/Getstarted

Browse Source
This commit is contained in:
rockyeverlast
2024-04-04 20:45:49 +05:30
parent e4cdbdd705
commit a463fbfe8f
6 changed files with 153 additions and 133 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -18,11 +18,11 @@ const SubnetContent = {
heading: `decentralised Auto Syncing subnets`,
};
export const NewSubnetComp = ({ showSubnet }) => {
export const NewSubnetComp = () => {
const firstBoxRef = useRef(null);
const secondBoxRef = useRef(null);
const thirdBoxRef = useRef(null);
const mainBox = useRef(null);
const textBox = useRef(null);
useEffect(() => {
const animateBox = (boxRef) => {
@@ -40,13 +40,36 @@ export const NewSubnetComp = ({ showSubnet }) => {
{
position: "sticky",
top: "-116px",
opacity: 0,
autoAlpha: 1,
},
{
transform: "translateX(0)",
// transform: "translateX(0)",
// duration: 0.5,
opacity: 1,
duration: 1,
autoAlpha: 0,
}
);
const tl2 = gsap.timeline({
scrollTrigger: {
trigger: textBox.current,
start: "top center+=50",
end: "bottom bottom+=100",
scrub: 1,
markers: false,
},
});
tl2.fromTo(
textBox.current,
{
opacity: 0,
},
{
opacity: 1,
duration: 0.5,
}
);
return () => {
// Clean up
tl.kill();
@@ -55,33 +78,10 @@ export const NewSubnetComp = ({ showSubnet }) => {
animateBox(firstBoxRef);
animateBox(secondBoxRef);
animateBox(thirdBoxRef);
// const tl2 = gsap.timeline({
// scrollTrigger: {
// trigger: mainBox.current,
// start: "top top",
// end: "bottom bottom",
// scrub: 1,
// markers: false,
// },
// });
// tl2.fromTo(
// mainBox.current,
// {
// position: "sticky",
// top: 60,
// left: 0,
// duration: 0.5,
// },
// {
// position: "relative",
// duration: 0.5,
// }
// );
}, []);
return (
<Box ref={mainBox} backgroundColor={"#000"}>
<Box backgroundColor={"#000"}>
<Box
// height={"100vh"}
backgroundColor={"#000"}
@@ -100,6 +100,7 @@ export const NewSubnetComp = ({ showSubnet }) => {
fontSize={"40px"}
textTransform={"capitalize"}
color={"#fff"}
ref={textBox}
sx={{
"@media (max-width: 1024px)": {},
"@media (max-width: 600px)": {
@@ -118,6 +119,7 @@ export const NewSubnetComp = ({ showSubnet }) => {
position={"relative"}
padding={"0 4rem"}
paddingBottom={"50px"}
ref={textBox}
>
<Image
src={cube}
@@ -148,6 +150,7 @@ export const NewSubnetComp = ({ showSubnet }) => {
textAlign={"left"}
position={"relative"}
width={"383px"}
ref={textBox}
>
<Component1 />
</Box>
@@ -158,6 +161,7 @@ export const NewSubnetComp = ({ showSubnet }) => {
textAlign={"left"}
position={"relative"}
width={"383px"}
ref={textBox}
>
<Component2 />
</Box>
@@ -168,6 +172,7 @@ export const NewSubnetComp = ({ showSubnet }) => {
textAlign={"left"}
position={"relative"}
width={"383px"}
ref={textBox}
>
<Component3 />
</Box>
@@ -177,6 +182,7 @@ export const NewSubnetComp = ({ showSubnet }) => {
textAlign={"left"}
position={"relative"}
width={"383px"}
ref={textBox}
>
<Component4 />
</Box>
@@ -190,104 +196,118 @@ export const NewSubnetComp = ({ showSubnet }) => {
paddingBottom={"2rem"}
ref={secondBoxRef}
>
<Fade in={true}>
<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)",
},
<Text
ref={textBox}
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 ref={textBox}>
<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"}
ref={textBox}
>
<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 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
color={"#E1E1E1"}
textAlign={"left"}
marginBottom={"2rem"}
ref={textBox}
>
<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"}
ref={textBox}
>
<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>
</Container>
</Fade>
</Box>
</Container>
</Box>
<Box
backgroundColor={"#000"}
@@ -332,7 +352,7 @@ export const NewSubnetComp = ({ showSubnet }) => {
Single Comprehensive Stack:
</Text>
<Text fontSize={"16px"}>
Full Mobile node SDK, Smart Contracts, DID's, Secondary
Full Mobile node SDK, Smart Contracts, DID&apos;s, Secondary
tokens ( FTs and NFTs) all in one place.
</Text>
</Box>