mirror of
https://github.com/WDI-Ideas/rubix.git
synced 2026-04-28 00:55:50 +00:00
Subnet section logic changed and changes updated to home page
This commit is contained in:
rockyeverlast
BIN
src/assets/images/arrow.png
Normal file
BIN
src/assets/images/arrow.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 207 B |
BIN
src/assets/images/getStarted.png
Normal file
BIN
src/assets/images/getStarted.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 95 KiB |
BIN
src/assets/images/stack.png
Normal file
BIN
src/assets/images/stack.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 3.4 MiB |
@@ -28,12 +28,7 @@ const HomeCard = () => {
|
||||
<Text fontSize={"12px"} color={"#979797"} margin={"25px 0px"}>
|
||||
Published: March 13, 2020
|
||||
</Text>
|
||||
<Text
|
||||
color={"#fff"}
|
||||
fontSize={"24px"}
|
||||
fontFamily={"Mona Sans"}
|
||||
marginBottom={"20px"}
|
||||
>
|
||||
<Text color={"#fff"} fontSize={"24px"} marginBottom={"20px"}>
|
||||
Multichain over Blockchain — A reality check on security threat
|
||||
</Text>
|
||||
<Box
|
||||
|
||||
@@ -17,7 +17,7 @@ const LearnCard = ({ id, src, alt, text }) => {
|
||||
|
||||
<Box
|
||||
display="inline-block"
|
||||
width={"600px"}
|
||||
width={"650px"}
|
||||
height={"300px"}
|
||||
background={"#151419"}
|
||||
borderRadius={"10px"}
|
||||
@@ -27,7 +27,7 @@ const LearnCard = ({ id, src, alt, text }) => {
|
||||
<Image src={src} alt={alt} />
|
||||
</Box>
|
||||
|
||||
<Box padding={"1rem"} minHeight={"110px"}>
|
||||
<Box padding={"1rem"} height={"110px"}>
|
||||
<Text
|
||||
color={"#fff"}
|
||||
fontSize={"18px"}
|
||||
|
||||
@@ -61,12 +61,7 @@ const Footer = () => {
|
||||
>
|
||||
<Box>
|
||||
<Box marginBottom={"20px"}>
|
||||
<Text
|
||||
fontSize={"28px"}
|
||||
color={"#E9E9E9"}
|
||||
fontFamily={"Mona Sans"}
|
||||
fontWeight={"600"}
|
||||
>
|
||||
<Text fontSize={"28px"} color={"#E9E9E9"} fontWeight={"600"}>
|
||||
Stay up to date with Rubix
|
||||
</Text>
|
||||
</Box>
|
||||
|
||||
@@ -28,7 +28,7 @@ const Client = () => {
|
||||
};
|
||||
return (
|
||||
<Box
|
||||
height={"100vh"}
|
||||
height={"90vh"}
|
||||
background={"#101015"}
|
||||
backgroundSize={"cover"}
|
||||
backgroundRepeat={"no-repeat"}
|
||||
|
||||
@@ -25,7 +25,20 @@ const HomeBanner = () => {
|
||||
backgroundSize={"cover"}
|
||||
display={"grid"}
|
||||
placeContent={"center"}
|
||||
position="relative"
|
||||
zIndex={"2"}
|
||||
sx={{
|
||||
"&::after": {
|
||||
content: '""',
|
||||
position: "absolute",
|
||||
top: 0,
|
||||
left: 0,
|
||||
width: "100%",
|
||||
height: "100%",
|
||||
backgroundColor: "rgba(0, 0, 0, 0.5)",
|
||||
zIndex: "-1",
|
||||
},
|
||||
|
||||
"@media (max-width: 1024px)": {
|
||||
height: "70vh",
|
||||
},
|
||||
|
||||
@@ -14,28 +14,53 @@ import cube from "../../assets/images/cube.png";
|
||||
import Component3 from "../SubnetsComponent/Component3";
|
||||
import Component4 from "../SubnetsComponent/Component4";
|
||||
import SubnetPage2 from "../SubnetsComponent/SubnetPage2";
|
||||
import { useState } from "react";
|
||||
import { useEffect, useState } from "react";
|
||||
|
||||
const SubnetContent = {
|
||||
heading: `decentralised Auto Syncing subnets`,
|
||||
};
|
||||
|
||||
const Subnets = () => {
|
||||
const [showSubnetPage, setShowSubnetPage] = useState(true);
|
||||
const [showSubnet2, setShowSubnet2] = useState(false);
|
||||
const [showStickyPosition, setShowStickyPosition] = useState(false);
|
||||
|
||||
const handleImageClick = () => {
|
||||
setShowSubnetPage(false);
|
||||
};
|
||||
useEffect(() => {
|
||||
const handleScroll = () => {
|
||||
const threshold = 800; // Adjust this threshold according to your design
|
||||
if (window.scrollY > threshold) {
|
||||
setShowStickyPosition(true);
|
||||
}
|
||||
};
|
||||
|
||||
const handleSubnetPage2Click = () => {
|
||||
setShowSubnetPage(true); // Show Subnets component when SubnetPage2 is clicked
|
||||
};
|
||||
window.addEventListener("scroll", handleScroll);
|
||||
|
||||
return () => {
|
||||
window.removeEventListener("scroll", handleScroll);
|
||||
};
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
if (showStickyPosition) {
|
||||
setShowSubnet2(true);
|
||||
}
|
||||
}, [showStickyPosition]);
|
||||
// const [showSubnetPage, setShowSubnetPage] = useState(true);
|
||||
|
||||
// const handleImageClick = () => {
|
||||
// setShowSubnetPage(false);
|
||||
// };
|
||||
|
||||
// const handleSubnetPage2Click = () => {
|
||||
// setShowSubnetPage(true); // Show Subnets component when SubnetPage2 is clicked
|
||||
// };
|
||||
return (
|
||||
<>
|
||||
{showSubnetPage ? (
|
||||
{!showSubnet2 ? (
|
||||
<Box
|
||||
// height={"100vh"}
|
||||
backgroundColor={"#000"}
|
||||
position={"sticky"}
|
||||
top={"-107px"}
|
||||
>
|
||||
<Container
|
||||
maxW="container.xl"
|
||||
@@ -80,7 +105,7 @@ const Subnets = () => {
|
||||
cursor={"pointer"}
|
||||
transform="translateY(-10%)"
|
||||
animation="floatAnimation 2s infinite alternate"
|
||||
onClick={handleImageClick}
|
||||
// onClick={handleImageClick}
|
||||
sx={{
|
||||
"@keyframes floatAnimation": {
|
||||
"0%": {
|
||||
@@ -134,7 +159,7 @@ const Subnets = () => {
|
||||
</Container>
|
||||
</Box>
|
||||
) : (
|
||||
<SubnetPage2 click={handleSubnetPage2Click} />
|
||||
<SubnetPage2 />
|
||||
)}
|
||||
</>
|
||||
);
|
||||
|
||||
94
src/components/LearnPage/GetStarted.jsx
Normal file
94
src/components/LearnPage/GetStarted.jsx
Normal file
@@ -0,0 +1,94 @@
|
||||
import { Box, Container, Image, Text } from "@chakra-ui/react";
|
||||
import { Tabs, TabList, TabPanels, Tab, TabPanel } from "@chakra-ui/react";
|
||||
import getStarted from "../../assets/images/getStarted.png";
|
||||
import getStarted1 from "../../assets/images/getStarted.png";
|
||||
import getStarted2 from "../../assets/images/getStarted.png";
|
||||
import getStarted3 from "../../assets/images/getStarted.png";
|
||||
|
||||
const GetStarted = () => {
|
||||
return (
|
||||
<Box backgroundColor={"#000"}>
|
||||
<Container maxW={"container.xl"} padding={"0 5rem"}>
|
||||
<Text
|
||||
as={"h2"}
|
||||
paddingTop={"3rem"}
|
||||
paddingBottom={"2rem"}
|
||||
fontWeight={700}
|
||||
fontSize={"40px"}
|
||||
textAlign={"left"}
|
||||
textTransform={"capitalize"}
|
||||
color={"#fff"}
|
||||
sx={{
|
||||
"@media (max-width: 435px)": {
|
||||
fontSize: "35px",
|
||||
},
|
||||
"@media (max-width: 375px)": {
|
||||
fontSize: "28px",
|
||||
},
|
||||
}}
|
||||
>
|
||||
Get Started With Rubix
|
||||
</Text>
|
||||
<Text
|
||||
fontFamily={"Poppins"}
|
||||
fontWeight={"400"}
|
||||
fontSize={"20px"}
|
||||
width={"70%"}
|
||||
color={"#CFCFCF"}
|
||||
>
|
||||
Rubix allows developers to build on a fast, secure, and scalable chain
|
||||
that has a unique approach to data sharing, objects.
|
||||
</Text>
|
||||
|
||||
<Box padding={"4rem 0"}>
|
||||
<Tabs
|
||||
defaultIndex={1}
|
||||
display={"flex"}
|
||||
flexDirection={"row-reverse"}
|
||||
justifyContent={"space-between"}
|
||||
width={"100%"}
|
||||
>
|
||||
<TabPanels display={"flex"} justifyContent={"center"}>
|
||||
<TabPanel>
|
||||
<Image
|
||||
boxSize="200px"
|
||||
fit="cover"
|
||||
src="https://images5.alphacoders.com/810/thumbbig-810547.webp"
|
||||
/>
|
||||
</TabPanel>
|
||||
<TabPanel>
|
||||
<Image fit="cover" src={getStarted} />
|
||||
</TabPanel>
|
||||
<TabPanel>
|
||||
<Image
|
||||
boxSize="200px"
|
||||
fit="cover"
|
||||
src="https://images5.alphacoders.com/810/thumbbig-810547.webp"
|
||||
/>
|
||||
</TabPanel>
|
||||
<TabPanel>
|
||||
<Image fit="cover" src={getStarted} />
|
||||
</TabPanel>
|
||||
</TabPanels>
|
||||
<TabList flexDirection={"column"} width={"100%"} border={"none"}>
|
||||
<Tab color="#fff" justifyContent={"left"}>
|
||||
- Start by reading our whitepaper
|
||||
</Tab>
|
||||
<Tab color="#fff" justifyContent={"left"}>
|
||||
- Start by reading our whitepaper
|
||||
</Tab>
|
||||
<Tab color="#fff" justifyContent={"left"}>
|
||||
- Start by reading our whitepaper
|
||||
</Tab>
|
||||
<Tab color="#fff" justifyContent={"left"}>
|
||||
- Start by reading our whitepaper
|
||||
</Tab>
|
||||
</TabList>
|
||||
</Tabs>
|
||||
</Box>
|
||||
</Container>
|
||||
</Box>
|
||||
);
|
||||
};
|
||||
|
||||
export default GetStarted;
|
||||
@@ -1,3 +1,4 @@
|
||||
/* eslint-disable no-unused-vars */
|
||||
import { Box, Container, Text, Image, Button } from "@chakra-ui/react";
|
||||
import LearnCard from "../Card/LearnCard";
|
||||
import chainx from "../../assets/images/LearnCard2.png";
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
import { Box, Container, Text } from "@chakra-ui/react";
|
||||
import { Box, Container, Image, Text } from "@chakra-ui/react";
|
||||
import {
|
||||
Accordion,
|
||||
AccordionItem,
|
||||
@@ -7,6 +7,38 @@ import {
|
||||
AccordionIcon,
|
||||
} from "@chakra-ui/react";
|
||||
import bg from "../../assets/images/whyRubix.png";
|
||||
import cube from "../../assets/images/cube.png";
|
||||
|
||||
const accordion = [
|
||||
{
|
||||
id: 1,
|
||||
title: `Unlimited concurrent transactions`,
|
||||
content: `The Rubix network supports millions of concurrent transactions
|
||||
by eliminating the need to queue transactions for the
|
||||
blockchain.`,
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
title: `Scalability`,
|
||||
content: `The Rubix network supports millions of concurrent transactions
|
||||
by eliminating the need to queue transactions for the
|
||||
blockchain.`,
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
title: `Truly decentralised, secure and private`,
|
||||
content: `The Rubix network supports millions of concurrent transactions
|
||||
by eliminating the need to queue transactions for the
|
||||
blockchain.`,
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
title: `ROI friendly`,
|
||||
content: `The Rubix network supports millions of concurrent transactions
|
||||
by eliminating the need to queue transactions for the
|
||||
blockchain.`,
|
||||
},
|
||||
];
|
||||
|
||||
const WhyRubix = () => {
|
||||
return (
|
||||
@@ -18,9 +50,8 @@ const WhyRubix = () => {
|
||||
<Container maxW={"container.xl"} padding={"0 5rem"}>
|
||||
<Text
|
||||
as={"h2"}
|
||||
paddingTop={"2rem"}
|
||||
paddingTop={"3rem"}
|
||||
paddingBottom={"2rem"}
|
||||
paddingLeft={"4rem"}
|
||||
fontWeight={700}
|
||||
fontSize={"40px"}
|
||||
textAlign={"left"}
|
||||
@@ -37,42 +68,58 @@ const WhyRubix = () => {
|
||||
>
|
||||
Why developers choose Rubix
|
||||
</Text>
|
||||
<Box>
|
||||
<Accordion allowToggle>
|
||||
<AccordionItem>
|
||||
<h2>
|
||||
<AccordionButton>
|
||||
<Box as="span" flex="1" textAlign="left">
|
||||
Section 1 title
|
||||
</Box>
|
||||
<AccordionIcon />
|
||||
</AccordionButton>
|
||||
</h2>
|
||||
<AccordionPanel pb={4}>
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
|
||||
eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut
|
||||
enim ad minim veniam, quis nostrud exercitation ullamco laboris
|
||||
nisi ut aliquip ex ea commodo consequat.
|
||||
</AccordionPanel>
|
||||
</AccordionItem>
|
||||
|
||||
<AccordionItem>
|
||||
<h2>
|
||||
<AccordionButton>
|
||||
<Box as="span" flex="1" textAlign="left">
|
||||
Section 2 title
|
||||
</Box>
|
||||
<AccordionIcon />
|
||||
</AccordionButton>
|
||||
</h2>
|
||||
<AccordionPanel pb={4}>
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
|
||||
eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut
|
||||
enim ad minim veniam, quis nostrud exercitation ullamco laboris
|
||||
nisi ut aliquip ex ea commodo consequat.
|
||||
</AccordionPanel>
|
||||
</AccordionItem>
|
||||
</Accordion>
|
||||
<Box
|
||||
display={"flex"}
|
||||
alignItems={"flex-start"}
|
||||
justifyContent={"space-between"}
|
||||
gap={"2rem"}
|
||||
>
|
||||
<Box width={"70%"}>
|
||||
<Accordion allowToggle defaultIndex={[0]}>
|
||||
{accordion.map((accord) => (
|
||||
<>
|
||||
<AccordionItem
|
||||
borderTop={"none"}
|
||||
borderBottom={"1px solid white"}
|
||||
marginBottom={"1rem"}
|
||||
padding={"1rem 0"}
|
||||
key={accord.id}
|
||||
>
|
||||
<h2>
|
||||
<AccordionButton outline={"none"} paddingLeft={"0px"}>
|
||||
<Box
|
||||
as="span"
|
||||
flex="1"
|
||||
textAlign="left"
|
||||
fontFamily={"Mona Sans"}
|
||||
fontWeight={"500"}
|
||||
fontSize={"30px"}
|
||||
color={"#fff"}
|
||||
>
|
||||
{accord.title}
|
||||
</Box>
|
||||
<AccordionIcon color={"#fff"} fontSize={"40px"} />
|
||||
</AccordionButton>
|
||||
</h2>
|
||||
<AccordionPanel
|
||||
pb={4}
|
||||
fontFamily={"Poppins"}
|
||||
fontWeight={"400"}
|
||||
color={"#E8E8E8"}
|
||||
width={"80%"}
|
||||
fontSize={"21px"}
|
||||
paddingLeft={"0px"}
|
||||
>
|
||||
{accord.content}
|
||||
</AccordionPanel>
|
||||
</AccordionItem>
|
||||
</>
|
||||
))}
|
||||
</Accordion>
|
||||
</Box>
|
||||
<Box>
|
||||
<Image src={cube} width={"550px"} />
|
||||
</Box>
|
||||
</Box>
|
||||
</Container>
|
||||
</Box>
|
||||
|
||||
@@ -4,6 +4,7 @@ import { Outlet, Link, useLocation } from "react-router-dom";
|
||||
import { useEffect, useState } from "react";
|
||||
import logo from "../../assets/images/rubix.png";
|
||||
import { MobileMenu } from "../MobileMenu/MobileMenu";
|
||||
import arrow from "../../assets/images/arrow.png";
|
||||
|
||||
const NavBar = () => {
|
||||
const [isScrolled, setIsScrolled] = useState(false);
|
||||
@@ -38,18 +39,16 @@ const NavBar = () => {
|
||||
color={"#fff"}
|
||||
justifyContent={"space-around"}
|
||||
alignItems={"center"}
|
||||
backgroundColor={
|
||||
isScrolled
|
||||
? // ? "linear-gradient(to right, #331e8c, #7b2789, #a73f85, #c76086, #de858e);"
|
||||
"#4f2878"
|
||||
: "transparent"
|
||||
background={
|
||||
isScrolled ? "#0B0B27" : "transparent"
|
||||
// "linear-gradient(to right, #9c5d67, #86455f, #6b3059, #4c1f54, #23144e)"
|
||||
}
|
||||
boxShadow={"0px 0px 4px 0px rgba(0, 0, 0, 0.25)"}
|
||||
position={"fixed"}
|
||||
zIndex={"999"}
|
||||
width={"100%"}
|
||||
top={"0px"}
|
||||
padding={"2rem"}
|
||||
padding={"2rem 0rem"}
|
||||
sx={{
|
||||
"@media (max-width: 996px)": {
|
||||
justifyContent: "space-between",
|
||||
@@ -93,7 +92,31 @@ const NavBar = () => {
|
||||
<Link to="/">USE CASES</Link>
|
||||
<Link to="/">COMMUNITY</Link>
|
||||
<Link to="/">FOUNDATION</Link>
|
||||
<Link to="/">CONTACT US</Link>
|
||||
<Link
|
||||
to="/"
|
||||
style={{
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
gap: "5px",
|
||||
}}
|
||||
onMouseEnter={(e) => {
|
||||
const arrowRight = document.querySelector(".arrow");
|
||||
arrowRight.style.transform = "rotate(45deg)";
|
||||
}}
|
||||
onMouseLeave={(e) => {
|
||||
const arrowRight = document.querySelector(".arrow");
|
||||
arrowRight.style.transform = "none";
|
||||
}}
|
||||
>
|
||||
CONTACT US
|
||||
<Image
|
||||
src={arrow}
|
||||
className="arrow"
|
||||
style={{
|
||||
transition: "transform 0.3s",
|
||||
}}
|
||||
/>
|
||||
</Link>
|
||||
</Box>
|
||||
</Box>
|
||||
) : (
|
||||
|
||||
@@ -8,7 +8,7 @@ import {
|
||||
OrderedList,
|
||||
UnorderedList,
|
||||
} from "@chakra-ui/react";
|
||||
import vector1 from "../../assets/images/Vector1.png";
|
||||
import vector1 from "../../assets/images/vector1.png";
|
||||
|
||||
const Component1 = () => {
|
||||
return (
|
||||
@@ -22,15 +22,27 @@ const Component1 = () => {
|
||||
borderRadius={"28.5px"}
|
||||
color={"#fff"}
|
||||
border={"1px solid #A5A5A5"}
|
||||
_after={{
|
||||
content: "''",
|
||||
position: "absolute",
|
||||
backgroundImage: `url(${vector1})`,
|
||||
backgroundRepeat: "no-repeat",
|
||||
width: "383px",
|
||||
height: "100%",
|
||||
left: "165px",
|
||||
top: "28px",
|
||||
// _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",
|
||||
|
||||
@@ -8,7 +8,7 @@ import {
|
||||
OrderedList,
|
||||
UnorderedList,
|
||||
} from "@chakra-ui/react";
|
||||
import vector2 from "../../assets/images/Vector2.png";
|
||||
import vector2 from "../../assets/images/vector2.png";
|
||||
|
||||
const Component2 = () => {
|
||||
return (
|
||||
@@ -26,7 +26,7 @@ const Component2 = () => {
|
||||
_after={{
|
||||
content: "''",
|
||||
position: "absolute",
|
||||
backgroundImage: `url(${vector2})`,
|
||||
background: `url(${vector2})`,
|
||||
backgroundRepeat: "no-repeat",
|
||||
width: "340px",
|
||||
height: "100%",
|
||||
|
||||
@@ -8,7 +8,7 @@ import {
|
||||
OrderedList,
|
||||
UnorderedList,
|
||||
} from "@chakra-ui/react";
|
||||
import vector3 from "../../assets/images/Vector3.png";
|
||||
import vector3 from "../../assets/images/vector3.png";
|
||||
|
||||
const Component3 = () => {
|
||||
return (
|
||||
@@ -32,7 +32,7 @@ const Component3 = () => {
|
||||
_before={{
|
||||
content: "''",
|
||||
position: "absolute",
|
||||
backgroundImage: `url(${vector3})`,
|
||||
background: `url(${vector3})`,
|
||||
backgroundRepeat: "no-repeat",
|
||||
width: "155px",
|
||||
height: "100px",
|
||||
|
||||
@@ -8,7 +8,7 @@ import {
|
||||
OrderedList,
|
||||
UnorderedList,
|
||||
} from "@chakra-ui/react";
|
||||
import vector4 from "../../assets/images/Vector4.png";
|
||||
import vector4 from "../../assets/images/vector4.png";
|
||||
|
||||
const Component4 = () => {
|
||||
return (
|
||||
@@ -32,7 +32,7 @@ const Component4 = () => {
|
||||
_after={{
|
||||
content: "''",
|
||||
position: "absolute",
|
||||
backgroundImage: `url(${vector4})`,
|
||||
background: `url(${vector4})`,
|
||||
backgroundRepeat: "no-repeat",
|
||||
width: "155px",
|
||||
height: "100%",
|
||||
|
||||
@@ -1,102 +1,177 @@
|
||||
/* eslint-disable no-unused-vars */
|
||||
/* eslint-disable react/prop-types */
|
||||
import { Box, Container, Image, Text } from "@chakra-ui/react";
|
||||
import cube from "../../assets/images/cube.png";
|
||||
import { Fade, ScaleFade, Slide, SlideFade, Collapse } from "@chakra-ui/react";
|
||||
import { useEffect, useState } from "react";
|
||||
import SubnetPage3 from "./SubnetPage3";
|
||||
|
||||
const SubnetPage2 = () => {
|
||||
const [showSubnet, setShowSubnet] = useState(1);
|
||||
// const [showSubnet3, setShowSubnet3] = useState(false);
|
||||
// const [showStickyPosition, setShowStickyPosition] = useState(false);
|
||||
|
||||
// useEffect(() => {
|
||||
// const handleScroll = () => {
|
||||
// const threshold = 400; // Adjust this threshold according to your design
|
||||
// if (window.scrollY > threshold && !showSubnet3) {
|
||||
// setShowStickyPosition(true);
|
||||
// }
|
||||
// };
|
||||
|
||||
// window.addEventListener("scroll", handleScroll);
|
||||
|
||||
// return () => {
|
||||
// window.removeEventListener("scroll", handleScroll);
|
||||
// };
|
||||
// }, [showSubnet3]);
|
||||
|
||||
// useEffect(() => {
|
||||
// if (showStickyPosition) {
|
||||
// setShowSubnet3(true);
|
||||
// }
|
||||
// }, [showStickyPosition]);
|
||||
useEffect(() => {
|
||||
const handleScroll = () => {
|
||||
const threshold1 = 400; // Threshold to switch to SubnetPage2
|
||||
const threshold2 = 700; // Threshold to switch to SubnetPage3
|
||||
if (window.scrollY > threshold2 && showSubnet < 2) {
|
||||
setShowSubnet(2);
|
||||
} else if (window.scrollY > threshold1 && showSubnet < 1) {
|
||||
setShowSubnet(1);
|
||||
}
|
||||
};
|
||||
|
||||
window.addEventListener("scroll", handleScroll);
|
||||
|
||||
return () => {
|
||||
window.removeEventListener("scroll", handleScroll);
|
||||
};
|
||||
}, [showSubnet]);
|
||||
|
||||
const SubnetPage2 = ({ click }) => {
|
||||
return (
|
||||
<Box backgroundColor={"#000"} height={"auto"} padding={"5rem"}>
|
||||
<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}
|
||||
<>
|
||||
{showSubnet === 1 && (
|
||||
<Box
|
||||
backgroundColor={"#000"}
|
||||
height={"auto"}
|
||||
padding={"0 5rem"}
|
||||
paddingBottom={"2rem"}
|
||||
position={"sticky"}
|
||||
top={"50px"}
|
||||
>
|
||||
<Fade in={showSubnet}>
|
||||
<Text
|
||||
as={"h2"}
|
||||
paddingTop={"2rem"}
|
||||
fontWeight={700}
|
||||
fontSize={"40px"}
|
||||
textTransform={"capitalize"}
|
||||
color={"#fff"}
|
||||
marginBottom={"5rem"}
|
||||
textAlign={"center"}
|
||||
sx={{
|
||||
"@keyframes floatAnimation": {
|
||||
"0%": {
|
||||
transform: "translateY(0)",
|
||||
},
|
||||
"100%": {
|
||||
transform: "translateY(-20px)",
|
||||
},
|
||||
"@media (max-width: 1024px)": {},
|
||||
"@media (max-width: 600px)": {
|
||||
fontSize: "28px",
|
||||
},
|
||||
}}
|
||||
/>
|
||||
</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"}
|
||||
>
|
||||
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"}
|
||||
>
|
||||
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>
|
||||
>
|
||||
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"}
|
||||
>
|
||||
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"}
|
||||
>
|
||||
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>
|
||||
</Box>
|
||||
</Container>
|
||||
</Fade>
|
||||
</Box>
|
||||
</Container>
|
||||
</Box>
|
||||
)}
|
||||
{showSubnet === 2 && <SubnetPage3 />}
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
|
||||
198
src/components/SubnetsComponent/SubnetPage3.jsx
Normal file
198
src/components/SubnetsComponent/SubnetPage3.jsx
Normal file
@@ -0,0 +1,198 @@
|
||||
/* eslint-disable react/no-unescaped-entities */
|
||||
/* eslint-disable no-unused-vars */
|
||||
/* eslint-disable react/prop-types */
|
||||
import { Box, Container, Image, Text } from "@chakra-ui/react";
|
||||
import stack from "../../assets/images/stack.png";
|
||||
import { Fade, ScaleFade, Slide, SlideFade, Collapse } from "@chakra-ui/react";
|
||||
import { useEffect, useState } from "react";
|
||||
|
||||
const SubnetPage3 = () => {
|
||||
const [showSubnet3, setShowSubnet3] = useState(false);
|
||||
const [stickyPosition, setStickyPosition] = useState(true);
|
||||
|
||||
useEffect(() => {
|
||||
const handleScroll = () => {
|
||||
const threshold = 400; // Adjust this threshold according to your design
|
||||
if (window.scrollY > threshold) {
|
||||
setShowSubnet3(true);
|
||||
setStickyPosition(true);
|
||||
}
|
||||
|
||||
if (window.scrollY > 880) {
|
||||
console.log(window.scrollY);
|
||||
setStickyPosition(false);
|
||||
}
|
||||
};
|
||||
|
||||
window.addEventListener("scroll", handleScroll);
|
||||
|
||||
return () => {
|
||||
window.removeEventListener("scroll", handleScroll);
|
||||
};
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<>
|
||||
<Box
|
||||
backgroundColor={"#000"}
|
||||
height={"auto"}
|
||||
padding={"0 5rem"}
|
||||
paddingBottom={"2rem"}
|
||||
position={stickyPosition ? "sticky" : "static"}
|
||||
top={stickyPosition ? "98px" : "auto"}
|
||||
>
|
||||
<Fade in={showSubnet3}>
|
||||
<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>
|
||||
</Fade>
|
||||
</Box>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default SubnetPage3;
|
||||
@@ -11,6 +11,7 @@ const theme = extendTheme({
|
||||
body: {
|
||||
// marginTop: { lg: "35px", md: "35px", base: "35px" },
|
||||
boxSizing: "border-box",
|
||||
// backGround: "#000",
|
||||
},
|
||||
}),
|
||||
},
|
||||
|
||||
@@ -1,3 +1,5 @@
|
||||
import Footer from "../components/Footer/Footer";
|
||||
import GetStarted from "../components/LearnPage/GetStarted";
|
||||
import LearnBanner from "../components/LearnPage/LearnBanner";
|
||||
import LearnDev from "../components/LearnPage/LearnDev";
|
||||
import WhyRubix from "../components/LearnPage/WhyRubix";
|
||||
@@ -8,6 +10,8 @@ const LearnPage = () => {
|
||||
<LearnBanner />
|
||||
<LearnDev />
|
||||
<WhyRubix />
|
||||
<GetStarted />
|
||||
<Footer />
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
Reference in New Issue
Block a user