diff --git a/src/components/Footer/MobileFooter.jsx b/src/components/Footer/MobileFooter.jsx index ae1340d..ae05f3a 100644 --- a/src/components/Footer/MobileFooter.jsx +++ b/src/components/Footer/MobileFooter.jsx @@ -78,8 +78,14 @@ const MobileFooter = () => { Community - Wallet - Careers + + Wallet + + {/* Careers */} @@ -116,42 +122,117 @@ const MobileFooter = () => { fontWeight={"400"} marginLeft={"0px !important"} > - - - telegram - - + + telegram + + + + - - Twitter - - + + Twitter + + + + - - GitHub - - + + GitHub + + + + - - Discord - + + + Discord + + + + + + + Reddit + + + + + + + Facebook + + + + + + + LinkedIn + + diff --git a/src/components/LearnPage/GetStarted.jsx b/src/components/LearnPage/GetStarted.jsx index 27eefd8..da22c1f 100644 --- a/src/components/LearnPage/GetStarted.jsx +++ b/src/components/LearnPage/GetStarted.jsx @@ -4,6 +4,7 @@ import { Tabs, TabList, TabPanels, Tab, TabPanel } from "@chakra-ui/react"; import getStarted from "../../assets/images/getStarted.png"; import getStarted2 from "../../assets/images/getStarted2.png"; import getStarted3 from "../../assets/images/getStarted3.png"; +import pdf from "../../assets/pdf/Rubix.pdf"; import { Link } from "react-router-dom"; const GetStarted = () => { @@ -169,7 +170,7 @@ const GetStarted = () => { Step 1 - Start by reading our whitepaper { + const font = "14px"; return ( <> { // delay: 2500, // disableOnInteraction: false, // }} - style={{ backgroundColor: "#000" }} + style={{ backgroundColor: "#000", height: "100dvh" }} + className="subnet-mobile" > @@ -47,6 +48,12 @@ const MobileSubnet = () => { fontSize={"20px"} textTransform={"capitalize"} color={"#fff"} + sx={{ + "@media (max-width: 1024px)": {}, + "@media (max-width: 375px)": { + fontSize: "18px", + }, + }} > decentralised Auto Syncing subnets @@ -71,15 +78,29 @@ const MobileSubnet = () => { P2P - + Only L1 powering full mobile nodes Mobile nodes with full state data will settle P2P . @@ -99,10 +120,24 @@ const MobileSubnet = () => { fontSize={"20px"} textTransform={"capitalize"} color={"#fff"} + sx={{ + "@media (max-width: 1024px)": {}, + "@media (max-width: 375px)": { + fontSize: "18px", + }, + }} > Self Sovereign - + Permissioned subnets with no oracles and
{" "} intermediaries @@ -123,10 +158,24 @@ const MobileSubnet = () => { fontSize={"20px"} textTransform={"capitalize"} color={"#fff"} + sx={{ + "@media (max-width: 1024px)": {}, + "@media (max-width: 375px)": { + fontSize: "18px", + }, + }} > Easier - + Leverage own infrastructure for block space @@ -145,10 +194,24 @@ const MobileSubnet = () => { fontSize={"20px"} textTransform={"capitalize"} color={"#fff"} + sx={{ + "@media (max-width: 1024px)": {}, + "@media (max-width: 375px)": { + fontSize: "18px", + }, + }} > cheaper - + No GAS fees Incremental and modular infrastructure ask @@ -164,10 +227,10 @@ const MobileSubnet = () => { - + - + diff --git a/src/components/MobileComponent/MobileSubnet2.jsx b/src/components/MobileComponent/MobileSubnet2.jsx index 647f0d5..99da83b 100644 --- a/src/components/MobileComponent/MobileSubnet2.jsx +++ b/src/components/MobileComponent/MobileSubnet2.jsx @@ -1,13 +1,13 @@ +/* eslint-disable react/prop-types */ /* eslint-disable no-unused-vars */ import { Box, Image, ListItem, Text, UnorderedList } from "@chakra-ui/react"; import cube from "../../assets/images/cube.png"; -const MobileSubnet2 = () => { +const MobileSubnet2 = ({ font }) => { return ( @@ -25,6 +25,12 @@ const MobileSubnet2 = () => { fontSize={"20px"} textTransform={"capitalize"} color={"#fff"} + sx={{ + "@media (max-width: 1024px)": {}, + "@media (max-width: 375px)": { + fontSize: "18px", + }, + }} > With unmatched privacy and scalability @@ -54,10 +60,24 @@ const MobileSubnet2 = () => { fontSize={"20px"} textTransform={"capitalize"} color={"#fff"} + sx={{ + "@media (max-width: 1024px)": {}, + "@media (max-width: 375px)": { + fontSize: "18px", + }, + }} > 01. Decentralisation - + Rubix Decentralised Identity( DID) issued at L1 is the foundation for building digital ownership enhancing applications. @@ -71,10 +91,24 @@ const MobileSubnet2 = () => { fontSize={"20px"} textTransform={"capitalize"} color={"#fff"} + sx={{ + "@media (max-width: 1024px)": {}, + "@media (max-width: 375px)": { + fontSize: "18px", + }, + }} > 02. Ultra Scalability - + 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, @@ -90,10 +124,24 @@ const MobileSubnet2 = () => { fontSize={"20px"} textTransform={"capitalize"} color={"#fff"} + sx={{ + "@media (max-width: 1024px)": {}, + "@media (max-width: 375px)": { + fontSize: "18px", + }, + }} > 03. Data Security and Privacy - + {" "} Rubix Decentralised Identity(DID) issued at L1 is the foundation for building digital ownership enhancing applications diff --git a/src/components/MobileComponent/MobileSubnet3.jsx b/src/components/MobileComponent/MobileSubnet3.jsx index 7947126..f610124 100644 --- a/src/components/MobileComponent/MobileSubnet3.jsx +++ b/src/components/MobileComponent/MobileSubnet3.jsx @@ -1,14 +1,14 @@ +/* eslint-disable react/prop-types */ /* eslint-disable no-unused-vars */ import { Box, Image, ListItem, Text, UnorderedList } from "@chakra-ui/react"; import stack from "../../assets/images/stacksmall.png"; -const MobileSubnet3 = () => { +const MobileSubnet3 = ({ font }) => { return ( @@ -27,6 +27,12 @@ const MobileSubnet3 = () => { fontSize={"20px"} textTransform={"capitalize"} color={"#fff"} + sx={{ + "@media (max-width: 1024px)": {}, + "@media (max-width: 375px)": { + fontSize: "18px", + }, + }} > All In One Composable Stack @@ -57,8 +63,14 @@ const MobileSubnet3 = () => { fontSize={"20px"} textTransform={"capitalize"} color={"#fff"} + sx={{ + "@media (max-width: 1024px)": {}, + "@media (max-width: 375px)": { + fontSize: font, + }, + }} > - Single Comprehensive Stack : + Single Comprehensive Stack @@ -75,10 +87,24 @@ const MobileSubnet3 = () => { fontSize={"20px"} textTransform={"capitalize"} color={"#fff"} + sx={{ + "@media (max-width: 1024px)": {}, + "@media (max-width: 375px)": { + fontSize: "18px", + }, + }} > - High Partition Tolerance : + High Partition Tolerance - + Issues in one shard wont affect other shards performance @@ -92,10 +118,24 @@ const MobileSubnet3 = () => { fontSize={"20px"} textTransform={"capitalize"} color={"#fff"} + sx={{ + "@media (max-width: 1024px)": {}, + "@media (max-width: 375px)": { + fontSize: "18px", + }, + }} > - Fully Deterministic : + Fully Deterministic - + Apps can bring Own Block space( BYOB) @@ -107,10 +147,24 @@ const MobileSubnet3 = () => { fontSize={"20px"} textTransform={"capitalize"} color={"#fff"} + sx={{ + "@media (max-width: 1024px)": {}, + "@media (max-width: 375px)": { + fontSize: "18px", + }, + }} > - Unique token/object based architecture : + Unique token/object based architecture - + Build unlimited FTs and NFTs all at L1!! @@ -122,10 +176,24 @@ const MobileSubnet3 = () => { fontSize={"20px"} textTransform={"capitalize"} color={"#fff"} + sx={{ + "@media (max-width: 1024px)": {}, + "@media (max-width: 375px)": { + fontSize: "18px", + }, + }} > - Green by the design : + Green by the design - + 100,000 Rubix transactions consume < 10 kWh
< 100000 Visa transactions @@ -141,9 +209,27 @@ const MobileSubnet3 = () => { fontSize={"20px"} textTransform={"capitalize"} color={"#fff"} + sx={{ + "@media (max-width: 1024px)": {}, + "@media (max-width: 375px)": { + fontSize: "18px", + }, + }} > - Fixed, hard capped supply of RBT at 51.4 Million + 51.4 Million RBT + + + Fixed Supply.Hardcapped + diff --git a/src/components/MobileMenu/MobileMenu.jsx b/src/components/MobileMenu/MobileMenu.jsx index 6e8cdcd..5160401 100644 --- a/src/components/MobileMenu/MobileMenu.jsx +++ b/src/components/MobileMenu/MobileMenu.jsx @@ -1,26 +1,35 @@ -import { HamburgerIcon } from "@chakra-ui/icons"; +/* eslint-disable no-unused-vars */ +import { CloseIcon, HamburgerIcon } from "@chakra-ui/icons"; import { Menu, MenuButton, MenuList, MenuItem, - // MenuItemOption, - // MenuGroup, - // MenuOptionGroup, - // MenuDivider, + Accordion, + AccordionItem, + AccordionButton, + AccordionPanel, + AccordionIcon, IconButton, + Text, + motion, } 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 { 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 [menu, setMenu] = useState(false); const location = useLocation(); + const handleClick = () => { + setMenu(!menu); + }; + useEffect(() => { const handleScroll = () => { const scrollPosition = window.scrollY; @@ -37,9 +46,9 @@ export const MobileMenu = () => { const active = { content: "''", position: "absolute", - bottom: "-5px", - left: "50%", - width: "130%", + bottom: "10px", + left: "25%", + width: "50%", height: "3px", backgroundColor: "#DE858E", borderRadius: "10px", @@ -51,42 +60,25 @@ export const MobileMenu = () => { width: "0", }; + const links = { + position: "relative", + fontSize: "16px", + display: "block", + padding: "1rem 0", + color: "#fff", + }; return ( <> - {/* - - - WALLET - - - EXPLORER - - - */} { - - } - // variant="outline" - backgroundColor={"transparent"} - color={"#fff"} - fontSize={"34px"} - _hover={{ - backgroundColor: "transparent", - color: "#fff", - fontSize: "34px", - }} - /> - - {/* */} - - - LEARN - - - - - - BUILD - - - - - {" "} - - USE CASES - {/* */} - - - - {" "} - - COMMUNITY - - - - - {" "} - - FOUNDATION - {/* */} - - - - {" "} - - CONTACT US - - - - - + + + {menu && ( + + + + + + + + + + + + + + {/* Learn */} + + + + + LEARN + + + + + + + Learn + + + + Proof-of-pledge Protocol + + + Smart Contracts + + + Tokenomics in Rubix + + + + + {/* Build */} + + + + + BUILD + + + + + + + Build + + + + Set up Rubix Node + + + Quorum + + + Subnets + + + + + {/* UseCases */} + + + + + USE CASES + + + + + + + FinTech + + + + AdTech + + + + MarTech + + + + HealthTech + + + + + + {/* Community */} + + + + + COMMUNITY + + + + + + + Community + + + + + + {/* Wallet*/} + + + + + AFFILIATES + + + + + + + Wallet + + + Explore + + + + + + + + + + )} ); }; diff --git a/src/index.css b/src/index.css index 97bf3a4..adc1bc8 100644 --- a/src/index.css +++ b/src/index.css @@ -124,6 +124,10 @@ span.swiper-pagination-bullet { top: 90% !important; } + .subnet-mobile .swiper-pagination { + top: 94% !important; + } + .swiper-button-next { right: -8px; } @@ -131,6 +135,24 @@ span.swiper-pagination-bullet { .swiper-button-prev { left: -8px; } + + .fade-in { + opacity: 1; + transition: opacity 0.9s ease-in-out; + -webkit-transition: opacity 0.9s ease-in-out; + -moz-transition: opacity 0.9s ease-in-out; + -ms-transition: opacity 0.9s ease-in-out; + -o-transition: opacity 0.9s ease-in-out; + } + + .fade-out { + opacity: 0; + transition: opacity 0.9s ease-in-out; + -webkit-transition: opacity 0.9s ease-in-out; + -moz-transition: opacity 0.9s ease-in-out; + -ms-transition: opacity 0.9s ease-in-out; + -o-transition: opacity 0.9s ease-in-out; + } } /* html { font-family: "Mona Sans"; diff --git a/src/pages/LearnPage.jsx b/src/pages/LearnPage.jsx index f8970ad..df18826 100644 --- a/src/pages/LearnPage.jsx +++ b/src/pages/LearnPage.jsx @@ -1,3 +1,4 @@ +/* eslint-disable no-unused-vars */ import { useEffect } from "react"; import Footer from "../components/Footer/Footer"; import { Faq } from "../components/LearnPage/Faq"; @@ -16,9 +17,8 @@ const LearnPage = () => { - + -