+
+ 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.
+
+
+
+
+
+
+ );
+};
+
+export default WhyRubix;
diff --git a/src/components/MobileComponent/MobileSubnet.jsx b/src/components/MobileComponent/MobileSubnet.jsx
new file mode 100644
index 0000000..26c6ea6
--- /dev/null
+++ b/src/components/MobileComponent/MobileSubnet.jsx
@@ -0,0 +1,138 @@
+import { Box, Image, ListItem, Text, UnorderedList } from "@chakra-ui/react";
+import cube from "../../assets/images/cube.png";
+import MobileSubnet2 from "./MobileSubnet2";
+import MobileSubnet3 from "./MobileSubnet3";
+
+const MobileSubnet = () => {
+ return (
+ <>
+
+ {/* Subnet1 */}
+
+
+
+ decentralised Auto Syncing subnets
+
+
+
+
+
+
+ P2P
+
+
+ Only L1 powering full mobile nodes
+
+ Mobile nodes with full state data will settle P2P . Consensus
+ provided by nearby node validators.
+
+
+ High scalability, Partition tolerance and portability
+
+
+
+
+
+
+ Self Sovereign
+
+
+
+ Permissioned subnets with no oracles and intermediaries
+
+ INo block space ransom
+
+ Zero risk of transactions being blocked out of
+ chain.
+
+
+
+
+
+
+ Easier
+
+
+ Leverage own infrastructure for block space
+ Smart contracts in Rust , GoLang and C/C++
+ WASM compiler for smooth code migration
+
+
+
+
+
+ cheaper
+
+
+ No GAS fees
+ Incremental and modular infrastructure ask
+
+ No expensive re training of development
+ resources
+
+
+
+
+
+
+
+
+
+ );
+};
+
+export default MobileSubnet;
diff --git a/src/components/MobileComponent/MobileSubnet2.jsx b/src/components/MobileComponent/MobileSubnet2.jsx
new file mode 100644
index 0000000..3a658a2
--- /dev/null
+++ b/src/components/MobileComponent/MobileSubnet2.jsx
@@ -0,0 +1,132 @@
+import { Box, Image, ListItem, Text, UnorderedList } from "@chakra-ui/react";
+import cube from "../../assets/images/cube.png";
+
+const MobileSubnet2 = () => {
+ return (
+
+ {/* Subnet1 */}
+
+
+
+ With unmatched privacy and scalability
+
+
+
+
+
+
+ P2P
+
+
+ Only L1 powering full mobile nodes
+
+ Mobile nodes with full state data will settle P2P . Consensus
+ provided by nearby node validators.
+
+
+ High scalability, Partition tolerance and portability
+
+
+
+
+
+
+ Self Sovereign
+
+
+
+ Permissioned subnets with no oracles and intermediaries
+
+ INo block space ransom
+
+ Zero risk of transactions being blocked out of
+ chain.
+
+
+
+
+
+
+ Easier
+
+
+ Leverage own infrastructure for block space
+ Smart contracts in Rust , GoLang and C/C++
+ WASM compiler for smooth code migration
+
+
+
+
+
+ cheaper
+
+
+ No GAS fees
+ Incremental and modular infrastructure ask
+
+ No expensive re training of development
+ resources
+
+
+
+
+
+
+ );
+};
+
+export default MobileSubnet2;
diff --git a/src/components/MobileComponent/MobileSubnet3.jsx b/src/components/MobileComponent/MobileSubnet3.jsx
new file mode 100644
index 0000000..0b5cd4a
--- /dev/null
+++ b/src/components/MobileComponent/MobileSubnet3.jsx
@@ -0,0 +1,151 @@
+import { Box, Image, ListItem, Text, UnorderedList } from "@chakra-ui/react";
+import stack from "../../assets/images/stacksmall.png";
+
+const MobileSubnet3 = () => {
+ return (
+
+ {/* Subnet1 */}
+
+
+
+ All In One Composable Stack
+
+
+
+
+
+
+ Single Comprehensive Stack :
+
+
+
+ Full Mobile node SDK, Smart Contracts, DIDs, Secondary tokens (
+ FTs and NFTs) all in one place.
+
+
+
+
+
+ High Partition Tolerance :
+
+
+
+ Issues in one shard wont affect other shards performance
+
+
+
+
+
+ Fully Deterministic :
+
+
+ Apps can bring Own Block space( BYOB)
+
+
+
+
+ Unique token/object based architecture :
+
+
+ Build unlimited FTs and NFTs all at L1!!
+
+
+
+
+ Green by the design :
+
+
+
+ 100,000 Rubix transactions consume < 10 kWh < 100000 Visa
+ transactions
+
+
+
+
+
+
+ Fixed, hard capped supply of RBT at 51.4 Million
+
+
+
+
+
+ );
+};
+
+export default MobileSubnet3;
diff --git a/src/components/MobileMenu/MobileMenu.jsx b/src/components/MobileMenu/MobileMenu.jsx
new file mode 100644
index 0000000..35ddb3d
--- /dev/null
+++ b/src/components/MobileMenu/MobileMenu.jsx
@@ -0,0 +1,149 @@
+import { HamburgerIcon } from "@chakra-ui/icons";
+import {
+ Menu,
+ MenuButton,
+ MenuList,
+ MenuItem,
+ // MenuItemOption,
+ // MenuGroup,
+ // MenuOptionGroup,
+ // MenuDivider,
+ IconButton,
+} from "@chakra-ui/react";
+import { Box, Image } from "@chakra-ui/react";
+import { Link, useLocation } from "react-router-dom";
+// import { Button } from "@chakra-ui/react";
+// import { HashLink } from "react-router-hash-link";
+import logo from "../../assets/images/rubix.png";
+import { useEffect, useState } from "react";
+
+export const MobileMenu = () => {
+ const [isScrolled, setIsScrolled] = useState(false);
+ const location = useLocation();
+
+ useEffect(() => {
+ const handleScroll = () => {
+ const scrollPosition = window.scrollY;
+ setIsScrolled(scrollPosition > 0);
+ };
+
+ window.addEventListener("scroll", handleScroll);
+
+ return () => {
+ window.removeEventListener("scroll", handleScroll);
+ };
+ }, []);
+
+ const active = {
+ color: "#F46E15",
+ fontFamily: "Poppins",
+ fontSize: "14px",
+ fontStyle: "normal",
+ fontWeight: "500",
+ lineHeight: "normal",
+ marginBottom: "1rem",
+ };
+
+ const linkStyle = {
+ color: "#070707",
+ fontFamily: "Poppins",
+ fontSize: "14px",
+ fontStyle: "normal",
+ fontWeight: "500",
+ lineHeight: "normal",
+ marginBottom: "1rem",
+ };
+
+ return (
+
+
+
+
+
+
+
+
+
+
+ );
+};
diff --git a/src/components/NavBar/NavBar.jsx b/src/components/NavBar/NavBar.jsx
index e9d2057..f0622f1 100644
--- a/src/components/NavBar/NavBar.jsx
+++ b/src/components/NavBar/NavBar.jsx
@@ -1,48 +1,104 @@
/* eslint-disable no-unused-vars */
-import { Box } from "@chakra-ui/react";
+import { Box, Image } from "@chakra-ui/react";
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";
const NavBar = () => {
+ const [isScrolled, setIsScrolled] = useState(false);
+ const [windowWidth, setWindowWidth] = useState(window.innerWidth);
const location = useLocation();
+
+ useEffect(() => {
+ const handleScroll = () => {
+ const scrollPosition = window.scrollY;
+ setIsScrolled(scrollPosition > 0);
+ };
+ const handleResize = () => {
+ setWindowWidth(window.innerWidth);
+ };
+
+ window.addEventListener("scroll", handleScroll);
+ window.addEventListener("resize", handleResize);
+
+ return () => {
+ window.removeEventListener("scroll", handleScroll);
+ window.removeEventListener("resize", handleResize);
+ };
+ }, []);
+
+ const isMobile = windowWidth <= 996;
+
return (
<>
-
-
-
-
Rubix
-
-
-
+ {!isMobile ? (
- Homepage
- Learn
+
+
+
+
+
+
+
+ LEARN
+ BUILD
+ USE CASES
+ COMMUNITY
+ FOUNDATION
+ CONTACT US
+
-
+ ) : (
+
+ )}
);
diff --git a/src/components/SubnetsComponent/Component1.jsx b/src/components/SubnetsComponent/Component1.jsx
index ccc211f..affaa64 100644
--- a/src/components/SubnetsComponent/Component1.jsx
+++ b/src/components/SubnetsComponent/Component1.jsx
@@ -1,3 +1,4 @@
+/* eslint-disable no-unused-vars */
import { Box, Button, Image, Text, Grid, GridItem } from "@chakra-ui/react";
import { Container } from "@chakra-ui/react";
import {
diff --git a/src/components/SubnetsComponent/SubnetPage2.jsx b/src/components/SubnetsComponent/SubnetPage2.jsx
new file mode 100644
index 0000000..051c5af
--- /dev/null
+++ b/src/components/SubnetsComponent/SubnetPage2.jsx
@@ -0,0 +1,103 @@
+/* eslint-disable react/prop-types */
+import { Box, Container, Image, Text } from "@chakra-ui/react";
+import cube from "../../assets/images/cube.png";
+
+const SubnetPage2 = ({ click }) => {
+ return (
+
+
+ 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
+
+
+
+
+
+
+ );
+};
+
+export default SubnetPage2;
diff --git a/src/pages/HomePage.jsx b/src/pages/HomePage.jsx
index b203d28..fecbf3f 100644
--- a/src/pages/HomePage.jsx
+++ b/src/pages/HomePage.jsx
@@ -1,3 +1,4 @@
+import { useEffect, useState } from "react";
import Footer from "../components/Footer/Footer";
import Client from "../components/HomePage/Client";
import HomeBanner from "../components/HomePage/HomeBanner";
@@ -5,12 +6,29 @@ import Resources from "../components/HomePage/Resources";
import Stats from "../components/HomePage/Stats";
import Subnets from "../components/HomePage/Subnets";
import WhitePaper from "../components/HomePage/WhitePaper";
+import MobileSubnet from "../components/MobileComponent/MobileSubnet";
const HomePage = () => {
+ const [windowWidth, setWindowWidth] = useState(window.innerWidth);
+
+ useEffect(() => {
+ const handleResize = () => {
+ setWindowWidth(window.innerWidth);
+ };
+
+ window.addEventListener("resize", handleResize);
+
+ return () => {
+ window.removeEventListener("resize", handleResize);
+ };
+ }, []);
+
+ const isMobile = windowWidth <= 996;
+
return (
<>
-
+ {!isMobile ? : }
diff --git a/src/pages/LearnPage.jsx b/src/pages/LearnPage.jsx
index d431725..b888af5 100644
--- a/src/pages/LearnPage.jsx
+++ b/src/pages/LearnPage.jsx
@@ -1,7 +1,15 @@
import LearnBanner from "../components/LearnPage/LearnBanner";
+import LearnDev from "../components/LearnPage/LearnDev";
+import WhyRubix from "../components/LearnPage/WhyRubix";
const LearnPage = () => {
- return ;
+ return (
+ <>
+
+
+
+
+ );
};
export default LearnPage;