diff --git a/src/assets/images/arrow.png b/src/assets/images/arrow.png new file mode 100644 index 0000000..adb86a6 Binary files /dev/null and b/src/assets/images/arrow.png differ diff --git a/src/assets/images/getStarted.png b/src/assets/images/getStarted.png new file mode 100644 index 0000000..ea34938 Binary files /dev/null and b/src/assets/images/getStarted.png differ diff --git a/src/assets/images/stack.png b/src/assets/images/stack.png new file mode 100644 index 0000000..83bd64a Binary files /dev/null and b/src/assets/images/stack.png differ diff --git a/src/components/Card/HomeCard.jsx b/src/components/Card/HomeCard.jsx index 9b80e7a..1087779 100644 --- a/src/components/Card/HomeCard.jsx +++ b/src/components/Card/HomeCard.jsx @@ -28,12 +28,7 @@ const HomeCard = () => { Published: March 13, 2020 - + Multichain over Blockchain — A reality check on security threat { { {alt} - + { > - + Stay up to date with Rubix diff --git a/src/components/HomePage/Client.jsx b/src/components/HomePage/Client.jsx index 0b5fe58..d700339 100644 --- a/src/components/HomePage/Client.jsx +++ b/src/components/HomePage/Client.jsx @@ -28,7 +28,7 @@ const Client = () => { }; return ( { 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", }, diff --git a/src/components/HomePage/Subnets.jsx b/src/components/HomePage/Subnets.jsx index c64b85d..84a4c6b 100644 --- a/src/components/HomePage/Subnets.jsx +++ b/src/components/HomePage/Subnets.jsx @@ -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 ? ( { cursor={"pointer"} transform="translateY(-10%)" animation="floatAnimation 2s infinite alternate" - onClick={handleImageClick} + // onClick={handleImageClick} sx={{ "@keyframes floatAnimation": { "0%": { @@ -134,7 +159,7 @@ const Subnets = () => { ) : ( - + )} ); diff --git a/src/components/LearnPage/GetStarted.jsx b/src/components/LearnPage/GetStarted.jsx new file mode 100644 index 0000000..5539310 --- /dev/null +++ b/src/components/LearnPage/GetStarted.jsx @@ -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 ( + + + + Get Started With Rubix + + + Rubix allows developers to build on a fast, secure, and scalable chain + that has a unique approach to data sharing, objects. + + + + + + + + + + + + + + + + + + + + + - Start by reading our whitepaper + + + - Start by reading our whitepaper + + + - Start by reading our whitepaper + + + - Start by reading our whitepaper + + + + + + + ); +}; + +export default GetStarted; diff --git a/src/components/LearnPage/LearnDev.jsx b/src/components/LearnPage/LearnDev.jsx index a4ae335..0ac223f 100644 --- a/src/components/LearnPage/LearnDev.jsx +++ b/src/components/LearnPage/LearnDev.jsx @@ -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"; diff --git a/src/components/LearnPage/WhyRubix.jsx b/src/components/LearnPage/WhyRubix.jsx index 5499bef..3f8b74c 100644 --- a/src/components/LearnPage/WhyRubix.jsx +++ b/src/components/LearnPage/WhyRubix.jsx @@ -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 = () => { { > Why developers choose Rubix - - - -

- - - Section 1 title - - - -

- - 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. - - - - -

- - - Section 2 title - - - -

- - 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. - - - + + + + {accordion.map((accord) => ( + <> + +

+ + + {accord.title} + + + +

+ + {accord.content} + + + + ))} + + + + + diff --git a/src/components/NavBar/NavBar.jsx b/src/components/NavBar/NavBar.jsx index f0622f1..443f0ec 100644 --- a/src/components/NavBar/NavBar.jsx +++ b/src/components/NavBar/NavBar.jsx @@ -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 = () => { USE CASES COMMUNITY FOUNDATION - CONTACT US + { + const arrowRight = document.querySelector(".arrow"); + arrowRight.style.transform = "rotate(45deg)"; + }} + onMouseLeave={(e) => { + const arrowRight = document.querySelector(".arrow"); + arrowRight.style.transform = "none"; + }} + > + CONTACT US + + ) : ( diff --git a/src/components/SubnetsComponent/Component1.jsx b/src/components/SubnetsComponent/Component1.jsx index affaa64..ee2be55 100644 --- a/src/components/SubnetsComponent/Component1.jsx +++ b/src/components/SubnetsComponent/Component1.jsx @@ -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", diff --git a/src/components/SubnetsComponent/Component2.jsx b/src/components/SubnetsComponent/Component2.jsx index 9106aa0..17dbe51 100644 --- a/src/components/SubnetsComponent/Component2.jsx +++ b/src/components/SubnetsComponent/Component2.jsx @@ -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%", diff --git a/src/components/SubnetsComponent/Component3.jsx b/src/components/SubnetsComponent/Component3.jsx index 86b5799..64b84e8 100644 --- a/src/components/SubnetsComponent/Component3.jsx +++ b/src/components/SubnetsComponent/Component3.jsx @@ -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", diff --git a/src/components/SubnetsComponent/Component4.jsx b/src/components/SubnetsComponent/Component4.jsx index df362f3..88da7df 100644 --- a/src/components/SubnetsComponent/Component4.jsx +++ b/src/components/SubnetsComponent/Component4.jsx @@ -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%", diff --git a/src/components/SubnetsComponent/SubnetPage2.jsx b/src/components/SubnetsComponent/SubnetPage2.jsx index 051c5af..b416b41 100644 --- a/src/components/SubnetsComponent/SubnetPage2.jsx +++ b/src/components/SubnetsComponent/SubnetPage2.jsx @@ -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 ( - - - With Unmatched Privacy and Scalability - - - - - + {showSubnet === 1 && ( + + + - - - - - 01. Decentralisation - - - Rubix Decentralised Identity(DID) issued at L1 is the foundation - for building digital ownership enhancing applications - - - - - 01. Decentralisation - - - Rubix Decentralised Identity(DID) issued at L1 is the foundation - for building digital ownership enhancing applications - - - - - 01. Decentralisation - - - Rubix Decentralised Identity(DID) issued at L1 is the foundation - for building digital ownership enhancing applications - - - + > + With Unmatched Privacy and Scalability + + + + + + + + + + 01. Decentralisation + + + Rubix Decentralised Identity(DID) issued at L1 is the + foundation for building digital ownership enhancing + applications + + + + + 01. Decentralisation + + + Rubix Decentralised Identity(DID) issued at L1 is the + foundation for building digital ownership enhancing + applications + + + + + 01. Decentralisation + + + Rubix Decentralised Identity(DID) issued at L1 is the + foundation for building digital ownership enhancing + applications + + + + + + - - + )} + {showSubnet === 2 && } + ); }; diff --git a/src/components/SubnetsComponent/SubnetPage3.jsx b/src/components/SubnetsComponent/SubnetPage3.jsx new file mode 100644 index 0000000..192c854 --- /dev/null +++ b/src/components/SubnetsComponent/SubnetPage3.jsx @@ -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 ( + <> + + + + All In One Composable Stack + + + + + + + Single Comprehensive Stack: + + + Full Mobile node SDK, Smart Contracts, DID's, Secondary + tokens ( FTs and NFTs) all in one place. + + + + + High Partition Tolerence: + + + Issues in one shard wont affect other shards performance + + + + + Fully Deterministic: + + + App can bring own Block space ( BYOB ) + + + + + + + + + + Unique Token/Object Based Architecture + + + : Build unlimited FTs and NFTs all at L1!! + + + + + Green By The Design + + + : 100000 Rubix Transaction consume < 10 kWh < 100000 + Visa transaction + + + + + Fixed Hard Capped Supply Of RBT At 51.4 Million + + {/* + */} + + + + + + + + ); +}; + +export default SubnetPage3; diff --git a/src/components/Theme/Theme.jsx b/src/components/Theme/Theme.jsx index 2d9e4a8..93ed335 100644 --- a/src/components/Theme/Theme.jsx +++ b/src/components/Theme/Theme.jsx @@ -11,6 +11,7 @@ const theme = extendTheme({ body: { // marginTop: { lg: "35px", md: "35px", base: "35px" }, boxSizing: "border-box", + // backGround: "#000", }, }), }, diff --git a/src/pages/LearnPage.jsx b/src/pages/LearnPage.jsx index b888af5..08edfa7 100644 --- a/src/pages/LearnPage.jsx +++ b/src/pages/LearnPage.jsx @@ -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 = () => { + +