mirror of
https://github.com/WDI-Ideas/rubix.git
synced 2026-04-27 23:55:49 +00:00
conflit march
This commit is contained in:
YasinShaikh123
122
src/App.jsx
122
src/App.jsx
@@ -5,129 +5,19 @@ import {
|
||||
createRoutesFromElements,
|
||||
RouterProvider,
|
||||
} from "react-router-dom";
|
||||
import HomePage from "./pages/HomePage";
|
||||
import NavBar from "./components/NavBar/NavBar";
|
||||
import LearnPage from "./pages/LearnPage";
|
||||
import BuildPage from "./pages/BuildPage";
|
||||
import Community from "./pages/Community";
|
||||
import Contact from "./pages/Contact";
|
||||
import UseCases from "./pages/UseCases";
|
||||
import ArticleInternalPage from "./components/ArticleInternalPage/ArticleInternalPage";
|
||||
import NotFound from "./pages/NotFound";
|
||||
import fintech from "../src/assets/images/usecase-bg.png";
|
||||
import adTech from "../src/assets/images/addtech.jpg";
|
||||
import martech from "../src/assets/images/martech.png";
|
||||
import healthTech from "../src/assets/images/health-tech.png";
|
||||
import { useCase } from "./data/useCase";
|
||||
import ArticleInternalOne from "./components/ArticleInternalOne/ArticleInternalOne";
|
||||
import ArticleInternalTwo from "./components/ArticleInternalTwo/ArticleInternalTwo";
|
||||
import ArticleInternalThree from "./components/ArticleInternalThree/ArticleInternalThree";
|
||||
import ArticleInternalFour from "./components/ArticleInternalFour/ArticleInternalFour";
|
||||
import ArticleInternalfive from "./components/ArticleInternalfive/ArticleInternalfive";
|
||||
import ArticleInternalSix from "./components/ArticleInternalSix/ArticleInternalSix";
|
||||
import { route } from "./routes/_routes";
|
||||
import DefaultLayout from "./Layout/DefaultLayout";
|
||||
|
||||
const router = createBrowserRouter(
|
||||
createRoutesFromElements(
|
||||
<Route path="/" element={<NavBar />}>
|
||||
<Route index element={<HomePage />} />
|
||||
<Route path="LearnPage" element={<LearnPage />} />
|
||||
<Route path="BuildPage" element={<BuildPage />} />
|
||||
<Route path="UseCases" element={<UseCases />} />
|
||||
<Route path="community" element={<Community />} />
|
||||
{/* <Route
|
||||
path="Articles/the_proofchain_technical_whitepaper"
|
||||
element={<ArticleInternalPage />}
|
||||
/> */}
|
||||
<Route
|
||||
path="bring-your-own-blockspace"
|
||||
element={<ArticleInternalOne />}
|
||||
/>
|
||||
<Route
|
||||
path="rubix-the-sustainable-blockchain-solution-a-green-initiative"
|
||||
element={<ArticleInternalTwo />}
|
||||
/>
|
||||
<Route
|
||||
path="mining-rubix-tokens-what-you-need-to-know"
|
||||
element={<ArticleInternalThree />}
|
||||
/>
|
||||
<Route
|
||||
path="securing-wallet-to-wallet-transfers-across-the-network-rubix-solved-it-differently"
|
||||
element={<ArticleInternalFour />}
|
||||
/>
|
||||
<Route
|
||||
path="enterprise-blockchains-on-a-public-chain"
|
||||
element={<ArticleInternalfive />}
|
||||
/>
|
||||
<Route
|
||||
path="multichain-over-blockchain-a-reality-check-on-security-threat"
|
||||
element={<ArticleInternalSix />}
|
||||
/>
|
||||
|
||||
<Route path="Contact" element={<Contact />} />
|
||||
<Route path="*" element={<NotFound />} />
|
||||
<Route
|
||||
path="fin-tech"
|
||||
element={
|
||||
<UseCases
|
||||
bannerHeading={"FinTech"}
|
||||
bannerSubHeading={
|
||||
"Stay up to date on what’s happening with Rubix, learn about upcoming events and access important resources."
|
||||
}
|
||||
bannerImage={fintech}
|
||||
useCase={useCase}
|
||||
/>
|
||||
}
|
||||
/>
|
||||
|
||||
<Route
|
||||
path="ad-tech"
|
||||
element={
|
||||
<UseCases
|
||||
bannerHeading={"AdTech"}
|
||||
bannerSubHeading={
|
||||
"Stay up to date on what’s happening with Rubix, learn about upcoming events and access important resources."
|
||||
}
|
||||
bannerImage={adTech}
|
||||
useCase={useCase}
|
||||
/>
|
||||
}
|
||||
/>
|
||||
<Route
|
||||
path="mar-tech"
|
||||
element={
|
||||
<UseCases
|
||||
bannerHeading={"MarTech"}
|
||||
bannerSubHeading={
|
||||
"Stay up to date on what’s happening with Rubix, learn about upcoming events and access important resources."
|
||||
}
|
||||
bannerImage={martech}
|
||||
useCase={useCase}
|
||||
/>
|
||||
}
|
||||
/>
|
||||
<Route
|
||||
path="health-tech"
|
||||
element={
|
||||
<UseCases
|
||||
bannerHeading={"HealthTech"}
|
||||
bannerSubHeading={
|
||||
"Stay up to date on what’s happening with Rubix, learn about upcoming events and access important resources."
|
||||
}
|
||||
bannerImage={healthTech}
|
||||
useCase={useCase}
|
||||
/>
|
||||
}
|
||||
/>
|
||||
</Route>
|
||||
route.map(({ path, element }) => (
|
||||
<Route key={path} path={path} element={<DefaultLayout>{element}</DefaultLayout>} />
|
||||
))
|
||||
)
|
||||
);
|
||||
|
||||
function App() {
|
||||
return (
|
||||
<>
|
||||
<RouterProvider router={router} />
|
||||
</>
|
||||
);
|
||||
return <RouterProvider router={router} />;
|
||||
}
|
||||
|
||||
export default App;
|
||||
|
||||
15
src/Layout/DefaultLayout.jsx
Normal file
15
src/Layout/DefaultLayout.jsx
Normal file
@@ -0,0 +1,15 @@
|
||||
import React from "react";
|
||||
import NavBar from "../components/NavBar/NavBar";
|
||||
import Footer from "../components/Footer/Footer";
|
||||
|
||||
const DefaultLayout = ({ children }) => {
|
||||
return (
|
||||
<div>
|
||||
<NavBar />
|
||||
{children}
|
||||
<Footer />
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default DefaultLayout;
|
||||
@@ -264,7 +264,7 @@ const ArticleInternalFour = () => {
|
||||
</Box>
|
||||
</Box>
|
||||
</Box>
|
||||
<Footer />
|
||||
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
@@ -326,7 +326,6 @@ const ArticleInternalOne = () => {
|
||||
</Box>
|
||||
</Box>
|
||||
</Box>
|
||||
<Footer />
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
@@ -345,7 +345,7 @@ const ArticleInternalSix = () => {
|
||||
</Box>
|
||||
</Box>
|
||||
</Box>
|
||||
<Footer />
|
||||
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
@@ -243,7 +243,7 @@ const ArticleInternalThree = () => {
|
||||
</Box>
|
||||
</Box>
|
||||
</Box>
|
||||
<Footer />
|
||||
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
@@ -426,7 +426,7 @@ const ArticleInternalTwo = () => {
|
||||
</Box>
|
||||
</Box>
|
||||
</Box>
|
||||
<Footer />
|
||||
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
@@ -46,8 +46,7 @@ const ArticleInternalfive = () => {
|
||||
textAlign={"center"}
|
||||
className="rubix-text-heading-2 rubix-fw-600"
|
||||
>
|
||||
Securing wallet to wallet transfers across the network: Rubix solved
|
||||
it differently
|
||||
Enterprise blockchains on a Public Chain!
|
||||
</Text>
|
||||
|
||||
<Text textAlign={"center"} className="rubix-text-xsmall rubix-fw-500">
|
||||
@@ -226,7 +225,7 @@ const ArticleInternalfive = () => {
|
||||
<img
|
||||
style={{ backgroundColor: "#fff" }}
|
||||
width={"100%"}
|
||||
src="https://www.rubix.net/wp-content/uploads/independent-proofchains-of-tokens.png"
|
||||
src="https://www.rubix.net/wp-content/uploads/multiple-quorum-validating-transactions.png"
|
||||
/>
|
||||
</Text>
|
||||
<Text pb={5} fontSize="xl">
|
||||
@@ -296,7 +295,7 @@ const ArticleInternalfive = () => {
|
||||
</Box>
|
||||
</Box>
|
||||
</Box>
|
||||
<Footer />
|
||||
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
@@ -78,8 +78,14 @@ const MobileFooter = () => {
|
||||
<ListItem marginBottom={"1rem"}>Community</ListItem>
|
||||
</Link>
|
||||
|
||||
<ListItem marginBottom={"1rem"}>Wallet</ListItem>
|
||||
<ListItem marginBottom={"1rem"}>Careers</ListItem>
|
||||
<Link
|
||||
to="https://getfexr.com/"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
>
|
||||
<ListItem marginBottom={"1rem"}>Wallet</ListItem>
|
||||
</Link>
|
||||
{/* <ListItem marginBottom={"1rem"}>Careers</ListItem> */}
|
||||
</UnorderedList>
|
||||
</AccordionPanel>
|
||||
</>
|
||||
@@ -116,42 +122,117 @@ const MobileFooter = () => {
|
||||
fontWeight={"400"}
|
||||
marginLeft={"0px !important"}
|
||||
>
|
||||
<ListItem
|
||||
marginBottom={"1rem"}
|
||||
display={"flex"}
|
||||
alignItems={"center"}
|
||||
gap={"10px"}
|
||||
<Link
|
||||
to="https://t.me/rubixblockchain"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
>
|
||||
<Image src={tele} />
|
||||
telegram
|
||||
</ListItem>
|
||||
<ListItem
|
||||
marginBottom={"1rem"}
|
||||
display={"flex"}
|
||||
alignItems={"center"}
|
||||
gap={"10px"}
|
||||
<ListItem
|
||||
marginBottom={"1rem"}
|
||||
display={"flex"}
|
||||
alignItems={"center"}
|
||||
gap={"10px"}
|
||||
>
|
||||
<Image src={tele} />
|
||||
telegram
|
||||
</ListItem>
|
||||
</Link>
|
||||
|
||||
<Link
|
||||
to="https://twitter.com/rubixchain"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
>
|
||||
<Image src={x} />
|
||||
Twitter
|
||||
</ListItem>
|
||||
<ListItem
|
||||
marginBottom={"1rem"}
|
||||
display={"flex"}
|
||||
alignItems={"center"}
|
||||
gap={"10px"}
|
||||
<ListItem
|
||||
marginBottom={"1rem"}
|
||||
display={"flex"}
|
||||
alignItems={"center"}
|
||||
gap={"10px"}
|
||||
>
|
||||
<Image src={x} />
|
||||
Twitter
|
||||
</ListItem>
|
||||
</Link>
|
||||
|
||||
<Link
|
||||
to="https://github.com/rubixchain"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
>
|
||||
<Image src={github} />
|
||||
GitHub
|
||||
</ListItem>
|
||||
<ListItem
|
||||
marginBottom={"1rem"}
|
||||
display={"flex"}
|
||||
alignItems={"center"}
|
||||
gap={"10px"}
|
||||
<ListItem
|
||||
marginBottom={"1rem"}
|
||||
display={"flex"}
|
||||
alignItems={"center"}
|
||||
gap={"10px"}
|
||||
>
|
||||
<Image src={github} />
|
||||
GitHub
|
||||
</ListItem>
|
||||
</Link>
|
||||
|
||||
<Link
|
||||
to="https://discord.com/invite/MNYPfhFEEk"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
>
|
||||
<Image src={discord} />
|
||||
Discord
|
||||
</ListItem>
|
||||
<ListItem
|
||||
marginBottom={"1rem"}
|
||||
display={"flex"}
|
||||
alignItems={"center"}
|
||||
gap={"10px"}
|
||||
>
|
||||
<Image src={discord} />
|
||||
Discord
|
||||
</ListItem>
|
||||
</Link>
|
||||
|
||||
<Link
|
||||
to="https://www.reddit.com/r/rubixchain/"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
>
|
||||
<ListItem
|
||||
marginBottom={"1rem"}
|
||||
display={"flex"}
|
||||
alignItems={"center"}
|
||||
gap={"10px"}
|
||||
>
|
||||
<Image src={reddit} />
|
||||
Reddit
|
||||
</ListItem>
|
||||
</Link>
|
||||
|
||||
<Link
|
||||
to="https://www.facebook.com/RubixChain"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
>
|
||||
<ListItem
|
||||
marginBottom={"1rem"}
|
||||
display={"flex"}
|
||||
alignItems={"center"}
|
||||
gap={"10px"}
|
||||
>
|
||||
<Image src={fb} />
|
||||
Facebook
|
||||
</ListItem>
|
||||
</Link>
|
||||
|
||||
<Link
|
||||
to="https://www.linkedin.com/company/rubixnet/"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
>
|
||||
<ListItem
|
||||
marginBottom={"1rem"}
|
||||
display={"flex"}
|
||||
alignItems={"center"}
|
||||
gap={"10px"}
|
||||
>
|
||||
<Image src={linked} />
|
||||
LinkedIn
|
||||
</ListItem>
|
||||
</Link>
|
||||
</UnorderedList>
|
||||
</AccordionPanel>
|
||||
</>
|
||||
|
||||
@@ -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 = () => {
|
||||
@@ -149,7 +150,7 @@ const GetStarted = () => {
|
||||
Step 1 - Start by reading our whitepaper
|
||||
<a
|
||||
download="RubiX_WhitePaper.pdf"
|
||||
href="../../assets/pdf/RubiX_WhitePaper.pdf"
|
||||
href={pdf}
|
||||
style={{
|
||||
color: "#fff",
|
||||
fontSize: "14px",
|
||||
|
||||
@@ -12,6 +12,7 @@ import { Navigation, Pagination, Autoplay } from "swiper/modules";
|
||||
import { Swiper, SwiperSlide } from "swiper/react";
|
||||
|
||||
const MobileSubnet = () => {
|
||||
const font = "14px";
|
||||
return (
|
||||
<>
|
||||
<Swiper
|
||||
@@ -19,22 +20,16 @@ const MobileSubnet = () => {
|
||||
navigation={false}
|
||||
modules={[Navigation, Pagination, Autoplay]}
|
||||
loop={true}
|
||||
slidesPerView={1}
|
||||
style={{
|
||||
backgroundColor: "#000",
|
||||
paddingBottom: "3rem",
|
||||
position: "relative",
|
||||
}}
|
||||
autoplay={{
|
||||
delay: 2500,
|
||||
disableOnInteraction: false,
|
||||
}}
|
||||
// autoplay={{
|
||||
// delay: 2500,
|
||||
// disableOnInteraction: false,
|
||||
// }}
|
||||
style={{ backgroundColor: "#000" }}
|
||||
>
|
||||
<SwiperSlide>
|
||||
<Box
|
||||
backgroundColor={"#000"}
|
||||
padding={"1.5rem"}
|
||||
height={"100dvh"}
|
||||
display={"grid"}
|
||||
alignContent={"center"}
|
||||
>
|
||||
@@ -52,6 +47,12 @@ const MobileSubnet = () => {
|
||||
fontSize={"20px"}
|
||||
textTransform={"capitalize"}
|
||||
color={"#fff"}
|
||||
sx={{
|
||||
"@media (max-width: 1024px)": {},
|
||||
"@media (max-width: 375px)": {
|
||||
fontSize: "18px",
|
||||
},
|
||||
}}
|
||||
>
|
||||
decentralised Auto Syncing subnets
|
||||
</Text>
|
||||
@@ -77,18 +78,22 @@ const MobileSubnet = () => {
|
||||
<Text
|
||||
as={"h2"}
|
||||
paddingTop={"2rem"}
|
||||
fontWeight={500}
|
||||
fontSize={"16px"}
|
||||
fontWeight={700}
|
||||
fontSize={"20px"}
|
||||
textTransform={"capitalize"}
|
||||
color={"#fff"}
|
||||
sx={{
|
||||
"@media (max-width: 1024px)": {},
|
||||
"@media (max-width: 375px)": {
|
||||
fontSize: "18px",
|
||||
},
|
||||
}}
|
||||
>
|
||||
P2P
|
||||
</Text>
|
||||
<UnorderedList color={"#E1E1E1"}>
|
||||
<ListItem fontSize={"14px"}>
|
||||
Only L1 powering full mobile nodes
|
||||
</ListItem>
|
||||
<ListItem fontSize={"14px"}>
|
||||
<ListItem>Only L1 powering full mobile nodes</ListItem>
|
||||
<ListItem>
|
||||
Mobile nodes with full state data will settle P2P .
|
||||
Consensus provided by nearby node validators.
|
||||
</ListItem>
|
||||
@@ -106,11 +111,17 @@ const MobileSubnet = () => {
|
||||
fontSize={"16px"}
|
||||
textTransform={"capitalize"}
|
||||
color={"#fff"}
|
||||
sx={{
|
||||
"@media (max-width: 1024px)": {},
|
||||
"@media (max-width: 375px)": {
|
||||
fontSize: "18px",
|
||||
},
|
||||
}}
|
||||
>
|
||||
Self Sovereign
|
||||
</Text>
|
||||
<UnorderedList color={"#E1E1E1"}>
|
||||
<ListItem fontSize={"14px"}>
|
||||
<ListItem>
|
||||
Permissioned subnets with no oracles and <br />{" "}
|
||||
intermediaries
|
||||
</ListItem>
|
||||
@@ -132,10 +143,24 @@ const MobileSubnet = () => {
|
||||
fontSize={"16px"}
|
||||
textTransform={"capitalize"}
|
||||
color={"#fff"}
|
||||
sx={{
|
||||
"@media (max-width: 1024px)": {},
|
||||
"@media (max-width: 375px)": {
|
||||
fontSize: "18px",
|
||||
},
|
||||
}}
|
||||
>
|
||||
Easier
|
||||
</Text>
|
||||
<UnorderedList color={"#E1E1E1"}>
|
||||
<UnorderedList
|
||||
color={"#E1E1E1"}
|
||||
sx={{
|
||||
"@media (max-width: 1024px)": {},
|
||||
"@media (max-width: 375px)": {
|
||||
fontSize: font,
|
||||
},
|
||||
}}
|
||||
>
|
||||
<ListItem>
|
||||
Leverage own infrastructure for block space
|
||||
</ListItem>
|
||||
@@ -154,12 +179,18 @@ const MobileSubnet = () => {
|
||||
fontSize={"16px"}
|
||||
textTransform={"capitalize"}
|
||||
color={"#fff"}
|
||||
sx={{
|
||||
"@media (max-width: 1024px)": {},
|
||||
"@media (max-width: 375px)": {
|
||||
fontSize: "18px",
|
||||
},
|
||||
}}
|
||||
>
|
||||
cheaper
|
||||
</Text>
|
||||
<UnorderedList color={"#E1E1E1"}>
|
||||
<ListItem fontSize={"14px"}>No GAS fees</ListItem>
|
||||
<ListItem fontSize={"14px"}>
|
||||
<ListItem>No GAS fees</ListItem>
|
||||
<ListItem>
|
||||
Incremental and modular infrastructure ask
|
||||
</ListItem>
|
||||
<ListItem fontSize={"14px"}>
|
||||
@@ -173,10 +204,10 @@ const MobileSubnet = () => {
|
||||
</Box>
|
||||
</SwiperSlide>
|
||||
<SwiperSlide>
|
||||
<MobileSubnet2 />
|
||||
<MobileSubnet2 font={font} />
|
||||
</SwiperSlide>
|
||||
<SwiperSlide>
|
||||
<MobileSubnet3 />
|
||||
<MobileSubnet3 font={font} />
|
||||
</SwiperSlide>
|
||||
</Swiper>
|
||||
</>
|
||||
|
||||
@@ -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 (
|
||||
<Box
|
||||
backgroundColor={"#000"}
|
||||
padding={"1.5rem"}
|
||||
height={"100dvh"}
|
||||
display={"grid"}
|
||||
alignContent={"center"}
|
||||
>
|
||||
@@ -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
|
||||
</Text>
|
||||
@@ -54,6 +60,12 @@ const MobileSubnet2 = () => {
|
||||
fontSize={"16px"}
|
||||
textTransform={"capitalize"}
|
||||
color={"#fff"}
|
||||
sx={{
|
||||
"@media (max-width: 1024px)": {},
|
||||
"@media (max-width: 375px)": {
|
||||
fontSize: "18px",
|
||||
},
|
||||
}}
|
||||
>
|
||||
01. Decentralisation
|
||||
</Text>
|
||||
@@ -71,6 +83,12 @@ const MobileSubnet2 = () => {
|
||||
fontSize={"16px"}
|
||||
textTransform={"capitalize"}
|
||||
color={"#fff"}
|
||||
sx={{
|
||||
"@media (max-width: 1024px)": {},
|
||||
"@media (max-width: 375px)": {
|
||||
fontSize: "18px",
|
||||
},
|
||||
}}
|
||||
>
|
||||
02. Ultra Scalability
|
||||
</Text>
|
||||
@@ -90,6 +108,12 @@ const MobileSubnet2 = () => {
|
||||
fontSize={"16px"}
|
||||
textTransform={"capitalize"}
|
||||
color={"#fff"}
|
||||
sx={{
|
||||
"@media (max-width: 1024px)": {},
|
||||
"@media (max-width: 375px)": {
|
||||
fontSize: "18px",
|
||||
},
|
||||
}}
|
||||
>
|
||||
03. Data Security and Privacy
|
||||
</Text>
|
||||
|
||||
@@ -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 (
|
||||
<Box
|
||||
backgroundColor={"#000"}
|
||||
padding={"1.5rem"}
|
||||
paddingBottom={"4rem"}
|
||||
height={"100dvh"}
|
||||
display={"grid"}
|
||||
alignContent={"center"}
|
||||
>
|
||||
@@ -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
|
||||
</Text>
|
||||
@@ -57,8 +63,14 @@ const MobileSubnet3 = () => {
|
||||
fontSize={"16px"}
|
||||
textTransform={"capitalize"}
|
||||
color={"#fff"}
|
||||
sx={{
|
||||
"@media (max-width: 1024px)": {},
|
||||
"@media (max-width: 375px)": {
|
||||
fontSize: font,
|
||||
},
|
||||
}}
|
||||
>
|
||||
Single Comprehensive Stack :
|
||||
Single Comprehensive Stack
|
||||
</Text>
|
||||
<UnorderedList color={"#E1E1E1"}>
|
||||
<ListItem fontSize={"14px"}>
|
||||
@@ -75,8 +87,14 @@ const MobileSubnet3 = () => {
|
||||
fontSize={"16px"}
|
||||
textTransform={"capitalize"}
|
||||
color={"#fff"}
|
||||
sx={{
|
||||
"@media (max-width: 1024px)": {},
|
||||
"@media (max-width: 375px)": {
|
||||
fontSize: "18px",
|
||||
},
|
||||
}}
|
||||
>
|
||||
High Partition Tolerance :
|
||||
High Partition Tolerance
|
||||
</Text>
|
||||
<UnorderedList color={"#E1E1E1"}>
|
||||
<ListItem fontSize={"14px"}>
|
||||
@@ -92,8 +110,14 @@ const MobileSubnet3 = () => {
|
||||
fontSize={"16px"}
|
||||
textTransform={"capitalize"}
|
||||
color={"#fff"}
|
||||
sx={{
|
||||
"@media (max-width: 1024px)": {},
|
||||
"@media (max-width: 375px)": {
|
||||
fontSize: "18px",
|
||||
},
|
||||
}}
|
||||
>
|
||||
Fully Deterministic :
|
||||
Fully Deterministic
|
||||
</Text>
|
||||
<UnorderedList color={"#E1E1E1"}>
|
||||
<ListItem fontSize={"14px"}>Apps can bring Own Block space( BYOB)</ListItem>
|
||||
@@ -107,8 +131,14 @@ const MobileSubnet3 = () => {
|
||||
fontSize={"16px"}
|
||||
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
|
||||
</Text>
|
||||
<UnorderedList color={"#E1E1E1"}>
|
||||
<ListItem fontSize={"14px"}>Build unlimited FTs and NFTs all at L1!!</ListItem>
|
||||
@@ -122,8 +152,14 @@ const MobileSubnet3 = () => {
|
||||
fontSize={"16px"}
|
||||
textTransform={"capitalize"}
|
||||
color={"#fff"}
|
||||
sx={{
|
||||
"@media (max-width: 1024px)": {},
|
||||
"@media (max-width: 375px)": {
|
||||
fontSize: "18px",
|
||||
},
|
||||
}}
|
||||
>
|
||||
Green by the design :
|
||||
Green by the design
|
||||
</Text>
|
||||
<UnorderedList color={"#E1E1E1"}>
|
||||
<ListItem fontSize={"14px"}>
|
||||
@@ -141,9 +177,27 @@ const MobileSubnet3 = () => {
|
||||
fontSize={"16px"}
|
||||
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
|
||||
</Text>
|
||||
|
||||
<UnorderedList
|
||||
color={"#E1E1E1"}
|
||||
sx={{
|
||||
"@media (max-width: 1024px)": {},
|
||||
"@media (max-width: 375px)": {
|
||||
fontSize: font,
|
||||
},
|
||||
}}
|
||||
>
|
||||
<ListItem>Fixed Supply.Hardcapped</ListItem>
|
||||
</UnorderedList>
|
||||
</Box>
|
||||
</Box>
|
||||
</Box>
|
||||
|
||||
@@ -1,26 +1,34 @@
|
||||
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,
|
||||
} 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 +45,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,35 +59,19 @@ export const MobileMenu = () => {
|
||||
width: "0",
|
||||
};
|
||||
|
||||
const links = {
|
||||
position: "relative",
|
||||
fontSize: "16px",
|
||||
display: "block",
|
||||
padding: "1rem 0",
|
||||
color: "#fff",
|
||||
};
|
||||
return (
|
||||
<>
|
||||
{/* <Box
|
||||
backgroundColor={"#141315"}
|
||||
position={"fixed"}
|
||||
zIndex={"9999"}
|
||||
width={"100%"}
|
||||
textAlign={"right"}
|
||||
padding={"0.8px 0px"}
|
||||
>
|
||||
<Box marginRight={""}>
|
||||
<Link
|
||||
to="/"
|
||||
style={{ color: "#fff", marginRight: "1.5rem", fontSize: "14px" }}
|
||||
>
|
||||
WALLET
|
||||
</Link>
|
||||
<Link
|
||||
to="/"
|
||||
style={{ color: "#fff", marginRight: "1.5rem", fontSize: "14px" }}
|
||||
>
|
||||
EXPLORER
|
||||
</Link>
|
||||
</Box>
|
||||
</Box> */}
|
||||
<Box
|
||||
position={"fixed"}
|
||||
top={"0px"}
|
||||
zIndex={999}
|
||||
zIndex={888}
|
||||
backgroundColor={isScrolled ? "#0B0B27" : "transparent"}
|
||||
display={"flex"}
|
||||
justifyContent={"space-between"}
|
||||
@@ -106,115 +98,292 @@ export const MobileMenu = () => {
|
||||
</Box>
|
||||
</Link>
|
||||
</Box>
|
||||
<Menu backgroundColor={"#fff"}>
|
||||
<MenuButton
|
||||
as={IconButton}
|
||||
aria-label="Options"
|
||||
icon={<HamburgerIcon />}
|
||||
// variant="outline"
|
||||
backgroundColor={"transparent"}
|
||||
color={"#fff"}
|
||||
fontSize={"34px"}
|
||||
_hover={{
|
||||
backgroundColor: "transparent",
|
||||
color: "#fff",
|
||||
fontSize: "34px",
|
||||
}}
|
||||
/>
|
||||
<MenuList>
|
||||
{/* <MenuItem paddingLeft={"0px"}></MenuItem> */}
|
||||
<MenuItem
|
||||
justifyContent={"center"}
|
||||
padding={"1rem 0"}
|
||||
_focus={{ background: "#fff" }}
|
||||
>
|
||||
<Link
|
||||
to="/LearnPage"
|
||||
style={{ position: "relative", fontSize: "14px" }}
|
||||
<HamburgerIcon color={"#fff"} fontSize={"25px"} onClick={handleClick} />
|
||||
</Box>
|
||||
|
||||
<Box
|
||||
position={"fixed"}
|
||||
top={"0px"}
|
||||
transform={menu ? "translateX(0)" : "translateX(100%)"}
|
||||
transition={"all 0.6s ease-in-out"}
|
||||
zIndex={999}
|
||||
backgroundColor={"#101015"}
|
||||
height={"100vh"}
|
||||
width={"100%"}
|
||||
overflow={"auto"}
|
||||
opacity={menu ? 1 : 0}
|
||||
>
|
||||
<Box
|
||||
// backgroundColor={isScrolled ? "#0B0B27" : "transparent"}
|
||||
display={"flex"}
|
||||
justifyContent={"space-between"}
|
||||
alignItems={"center"}
|
||||
padding={"1rem 1rem"}
|
||||
marginBottom={"4rem"}
|
||||
gap={"2rem"}
|
||||
sx={{
|
||||
"@media (max-width: 1024px)": {},
|
||||
"@media (max-width: 375px)": {
|
||||
padding: "1rem",
|
||||
alignItems: "baseline",
|
||||
},
|
||||
}}
|
||||
>
|
||||
<Box display={"flex"} alignItems={"center"}>
|
||||
<Link to="/">
|
||||
<Box
|
||||
display={"flex"}
|
||||
alignItems={"baseline"}
|
||||
justifyContent={"center"}
|
||||
>
|
||||
LEARN
|
||||
<Image src={logo} width={"160px"} />
|
||||
</Box>
|
||||
</Link>
|
||||
</Box>
|
||||
<CloseIcon color={"#fff"} fontSize={"25px"} onClick={handleClick} />
|
||||
</Box>
|
||||
|
||||
<Accordion allowToggle>
|
||||
{/* Learn */}
|
||||
<AccordionItem borderTop={"none"} padding={"2rem 1rem"}>
|
||||
<AccordionButton>
|
||||
<Box as="span" flex="1" textAlign="left">
|
||||
<Text
|
||||
color={"#B0B0B0"}
|
||||
fontFamily={"Mona Sans"}
|
||||
fontWeight={"500"}
|
||||
fontSize={"20px"}
|
||||
>
|
||||
LEARN
|
||||
</Text>
|
||||
</Box>
|
||||
<AccordionIcon color={"#fff"} fontSize={"28px"} />
|
||||
</AccordionButton>
|
||||
<AccordionPanel pb={4}>
|
||||
<Link to="/LearnPage" style={links} onClick={handleClick}>
|
||||
Learn
|
||||
<span
|
||||
style={
|
||||
location.pathname === "/LearnPage" ? active : linkStyle
|
||||
}
|
||||
/>
|
||||
</Link>
|
||||
</MenuItem>
|
||||
<MenuItem
|
||||
justifyContent={"center"}
|
||||
padding={"1rem 0"}
|
||||
_focus={{ background: "#fff" }}
|
||||
>
|
||||
<Link
|
||||
to="/BuildPage"
|
||||
style={{ position: "relative", fontSize: "14px" }}
|
||||
to="https://learn.rubix.net/pop/"
|
||||
// target="_blank"
|
||||
// rel="noopener noreferrer"
|
||||
style={links}
|
||||
onClick={handleClick}
|
||||
>
|
||||
BUILD
|
||||
Proof-of-pledge Protocol
|
||||
</Link>
|
||||
<Link
|
||||
to="https://learn.rubix.net/smartcontract/"
|
||||
// target="_blank"
|
||||
// rel="noopener noreferrer"
|
||||
style={links}
|
||||
>
|
||||
Smart Contracts
|
||||
</Link>
|
||||
<Link
|
||||
to="https://learn.rubix.net/tokenomics/"
|
||||
// target="_blank"
|
||||
// rel="noopener noreferrer"
|
||||
style={links}
|
||||
onClick={handleClick}
|
||||
>
|
||||
Tokenomics in Rubix
|
||||
</Link>
|
||||
</AccordionPanel>
|
||||
</AccordionItem>
|
||||
|
||||
{/* Build */}
|
||||
<AccordionItem padding={"2rem 1rem"}>
|
||||
<AccordionButton>
|
||||
<Box as="span" flex="1" textAlign="left">
|
||||
<Text
|
||||
color={"#B0B0B0"}
|
||||
fontFamily={"Mona Sans"}
|
||||
fontWeight={"500"}
|
||||
fontSize={"20px"}
|
||||
>
|
||||
BUILD
|
||||
</Text>
|
||||
</Box>
|
||||
<AccordionIcon color={"#fff"} fontSize={"28px"} />
|
||||
</AccordionButton>
|
||||
<AccordionPanel pb={4}>
|
||||
<Link to="/BuildPage" style={links} onClick={handleClick}>
|
||||
Build
|
||||
<span
|
||||
style={
|
||||
location.pathname === "/BuildPage" ? active : linkStyle
|
||||
}
|
||||
/>
|
||||
</Link>
|
||||
</MenuItem>
|
||||
<MenuItem
|
||||
justifyContent={"center"}
|
||||
padding={"1rem 0"}
|
||||
_focus={{ background: "#fff" }}
|
||||
>
|
||||
{" "}
|
||||
<Link to="/" style={{ position: "relative", fontSize: "14px" }}>
|
||||
USE CASES
|
||||
{/* <span style={location.pathname === "/" ? active : linkStyle} /> */}
|
||||
</Link>
|
||||
</MenuItem>
|
||||
<MenuItem
|
||||
justifyContent={"center"}
|
||||
padding={"1rem 0"}
|
||||
_focus={{ background: "#fff" }}
|
||||
>
|
||||
{" "}
|
||||
<Link
|
||||
to="/community"
|
||||
style={{ position: "relative", fontSize: "14px" }}
|
||||
to="https://learn.rubix.net/node-setup/"
|
||||
// target="_blank"
|
||||
// rel="noopener noreferrer"
|
||||
style={links}
|
||||
onClick={handleClick}
|
||||
>
|
||||
COMMUNITY
|
||||
Set up Rubix Node
|
||||
</Link>
|
||||
<Link
|
||||
to="https://learn.rubix.net/quorum/"
|
||||
// target="_blank"
|
||||
// rel="noopener noreferrer"
|
||||
style={links}
|
||||
>
|
||||
Quorum
|
||||
</Link>
|
||||
<Link
|
||||
to="https://learn.rubix.net/subnets/"
|
||||
// target="_blank"
|
||||
// rel="noopener noreferrer"
|
||||
style={links}
|
||||
onClick={handleClick}
|
||||
>
|
||||
Subnets
|
||||
</Link>
|
||||
</AccordionPanel>
|
||||
</AccordionItem>
|
||||
|
||||
{/* UseCases */}
|
||||
<AccordionItem padding={"2rem 1rem"}>
|
||||
<AccordionButton>
|
||||
<Box as="span" flex="1" textAlign="left">
|
||||
<Text
|
||||
color={"#B0B0B0"}
|
||||
fontFamily={"Mona Sans"}
|
||||
fontWeight={"500"}
|
||||
fontSize={"20px"}
|
||||
>
|
||||
USE CASES
|
||||
</Text>
|
||||
</Box>
|
||||
<AccordionIcon color={"#fff"} fontSize={"28px"} />
|
||||
</AccordionButton>
|
||||
<AccordionPanel pb={4}>
|
||||
<Link to="/fin-tech" style={links} onClick={handleClick}>
|
||||
FinTech
|
||||
<span
|
||||
style={location.pathname === "/fin-tech" ? active : linkStyle}
|
||||
/>
|
||||
</Link>
|
||||
<Link
|
||||
to="/ad-tech"
|
||||
// target="_blank"
|
||||
// rel="noopener noreferrer"
|
||||
style={links}
|
||||
onClick={handleClick}
|
||||
>
|
||||
AdTech
|
||||
<span
|
||||
style={location.pathname === "/ad-tech" ? active : linkStyle}
|
||||
/>
|
||||
</Link>
|
||||
<Link
|
||||
to="/mar-tech"
|
||||
// target="_blank"
|
||||
// rel="noopener noreferrer"
|
||||
style={links}
|
||||
onClick={handleClick}
|
||||
>
|
||||
MarTech
|
||||
<span
|
||||
style={location.pathname === "/mar-tech" ? active : linkStyle}
|
||||
/>
|
||||
</Link>
|
||||
<Link
|
||||
to="/health-tech"
|
||||
// target="_blank"
|
||||
// rel="noopener noreferrer"
|
||||
style={links}
|
||||
onClick={handleClick}
|
||||
>
|
||||
HealthTech
|
||||
<span
|
||||
style={
|
||||
location.pathname === "/health-tech" ? active : linkStyle
|
||||
}
|
||||
/>
|
||||
</Link>
|
||||
</AccordionPanel>
|
||||
</AccordionItem>
|
||||
|
||||
{/* Community */}
|
||||
<AccordionItem padding={"2rem 1rem"}>
|
||||
<AccordionButton>
|
||||
<Box as="span" flex="1" textAlign="left">
|
||||
<Text
|
||||
color={"#B0B0B0"}
|
||||
fontFamily={"Mona Sans"}
|
||||
fontWeight={"500"}
|
||||
fontSize={"20px"}
|
||||
>
|
||||
COMMUNITY
|
||||
</Text>
|
||||
</Box>
|
||||
<AccordionIcon color={"#fff"} fontSize={"28px"} />
|
||||
</AccordionButton>
|
||||
<AccordionPanel pb={4}>
|
||||
<Link to="/community" style={links} onClick={handleClick}>
|
||||
Community
|
||||
<span
|
||||
style={
|
||||
location.pathname === "/community" ? active : linkStyle
|
||||
}
|
||||
/>
|
||||
</Link>
|
||||
</MenuItem>
|
||||
<MenuItem
|
||||
justifyContent={"center"}
|
||||
padding={"1rem 0"}
|
||||
_focus={{ background: "#fff" }}
|
||||
>
|
||||
{" "}
|
||||
<Link to="/" style={{ position: "relative", fontSize: "14px" }}>
|
||||
FOUNDATION
|
||||
{/* <span style={location.pathname === "/" ? active : linkStyle} /> */}
|
||||
</Link>
|
||||
</MenuItem>
|
||||
<MenuItem
|
||||
justifyContent={"center"}
|
||||
padding={"1rem 0"}
|
||||
_focus={{ background: "#fff" }}
|
||||
>
|
||||
{" "}
|
||||
</AccordionPanel>
|
||||
</AccordionItem>
|
||||
|
||||
{/* Wallet*/}
|
||||
<AccordionItem padding={"2rem 1rem"}>
|
||||
<AccordionButton>
|
||||
<Box as="span" flex="1" textAlign="left">
|
||||
<Text
|
||||
color={"#B0B0B0"}
|
||||
fontFamily={"Mona Sans"}
|
||||
fontWeight={"500"}
|
||||
fontSize={"20px"}
|
||||
>
|
||||
AFFILIATES
|
||||
</Text>
|
||||
</Box>
|
||||
<AccordionIcon color={"#fff"} fontSize={"28px"} />
|
||||
</AccordionButton>
|
||||
<AccordionPanel pb={4}>
|
||||
<Link
|
||||
to="/Contact"
|
||||
style={{ position: "relative", fontSize: "14px" }}
|
||||
to="https://rubixexplorer.com/"
|
||||
style={links}
|
||||
onClick={handleClick}
|
||||
>
|
||||
CONTACT US
|
||||
<span
|
||||
style={location.pathname === "/Contact" ? active : linkStyle}
|
||||
/>
|
||||
Wallet
|
||||
</Link>
|
||||
</MenuItem>
|
||||
</MenuList>
|
||||
</Menu>
|
||||
<Link
|
||||
to="https://getfexr.com/"
|
||||
style={links}
|
||||
onClick={handleClick}
|
||||
>
|
||||
Explore
|
||||
</Link>
|
||||
</AccordionPanel>
|
||||
</AccordionItem>
|
||||
</Accordion>
|
||||
|
||||
<Link to="/Contact" onClick={handleClick}>
|
||||
<Button
|
||||
margin={"2rem 2rem"}
|
||||
padding={"1.5rem 2rem"}
|
||||
borderRadius="0px"
|
||||
backgroundImage="radial-gradient(circle, #ffffff, #eee2f2, #e7c3dc, #e5a3ba, #de858e)"
|
||||
>
|
||||
CONTACT US
|
||||
</Button>
|
||||
</Link>
|
||||
</Box>
|
||||
</>
|
||||
);
|
||||
|
||||
@@ -470,3 +470,453 @@ export const NewSubnetComp = () => {
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
// import { Box, Container, Image, Stack, Text } from "@chakra-ui/react";
|
||||
// import { Fade, Slide, SlideFade, Collapse } from "@chakra-ui/react";
|
||||
// import { useEffect, useRef, useState } from "react";
|
||||
// import { Component1 } from "./Component1";
|
||||
// import { Component2 } from "./Component2";
|
||||
// import { Component3 } from "./Component3";
|
||||
// import { Component4 } from "./Component4";
|
||||
// // import { SubnetPage2 } from "./SubnetPage2";
|
||||
// import cube from "../../assets/images/cube.png";
|
||||
// import stack from "../../assets/images/stackNew.webp";
|
||||
// import { gsap } from "gsap";
|
||||
// import { ScrollTrigger } from "gsap/ScrollTrigger";
|
||||
|
||||
// // Initialize ScrollTrigger
|
||||
// gsap.registerPlugin(ScrollTrigger);
|
||||
|
||||
// // const SubnetContent = {
|
||||
// // heading: `decentralised Auto Syncing subnets`,
|
||||
// // };
|
||||
|
||||
// export const NewSubnetComp = () => {
|
||||
// const firstBoxRef = useRef(null);
|
||||
// const secondBoxRef = useRef(null);
|
||||
// const thirdBoxRef = useRef(null);
|
||||
// const mainBox = useRef(null);
|
||||
|
||||
// useEffect(() => {
|
||||
// gsap.set(firstBoxRef.current, { opacity: 1 });
|
||||
// let tl = gsap
|
||||
// .timeline({
|
||||
// scrollTrigger: {
|
||||
// trigger: mainBox.current,
|
||||
// start: "top top",
|
||||
// scrub: 1,
|
||||
// pin: true,
|
||||
// end: "bottom bottom",
|
||||
// markers: false,
|
||||
// },
|
||||
// })
|
||||
// .fromTo(firstBoxRef.current, { alpha: 1 }, { alpha: 0 })
|
||||
// .fromTo(secondBoxRef.current, { alpha: 0 }, { alpha: 1 })
|
||||
// .fromTo(secondBoxRef.current, { alpha: 1 }, { alpha: 0 })
|
||||
// .fromTo(thirdBoxRef.current, { alpha: 0 }, { alpha: 1 });
|
||||
|
||||
// return () => {
|
||||
// tl.kill();
|
||||
// };
|
||||
// }, []);
|
||||
|
||||
// return (
|
||||
// <div
|
||||
// style={{
|
||||
// backgroundColor: "#000",
|
||||
// overflow: "hidden",
|
||||
// }}
|
||||
// >
|
||||
// <Box
|
||||
// ref={mainBox}
|
||||
// height={"300vh"}
|
||||
// position={"relative"}
|
||||
// display={"flex"}
|
||||
// justifyContent={"center"}
|
||||
// alignItems={"center"}
|
||||
// >
|
||||
// <Box
|
||||
// ref={firstBoxRef}
|
||||
// position={"absolute"}
|
||||
// top={"0"}
|
||||
// left={"0"}
|
||||
// height={"100vh"}
|
||||
// width={"100%"}
|
||||
// backgroundColor={"#000"}
|
||||
// display={"grid"}
|
||||
// alignContent={"center"}
|
||||
// >
|
||||
// <Container
|
||||
// maxW="container.xl"
|
||||
// textAlign={"center"}
|
||||
// height={"100vh"}
|
||||
// display={"grid"}
|
||||
// // p={10}
|
||||
// paddingTop={"10rem"}
|
||||
// alignContent={"center"}
|
||||
// >
|
||||
// <Text
|
||||
// as={"h2"}
|
||||
// fontWeight={700}
|
||||
// fontSize={"40px"}
|
||||
// textTransform={"capitalize"}
|
||||
// color={"#fff"}
|
||||
// sx={{
|
||||
// "@media (max-width: 1024px)": {},
|
||||
// "@media (max-width: 600px)": {
|
||||
// fontSize: "28px",
|
||||
// },
|
||||
// }}
|
||||
// >
|
||||
// decentralised Auto Syncing subnets
|
||||
// </Text>
|
||||
// <Box
|
||||
// display={"grid"}
|
||||
// gridTemplateColumns={"repeat(2, 1fr)"}
|
||||
// gridTemplateRows={"repeat(2, 1fr)"}
|
||||
// gap={"17rem 4rem"}
|
||||
// marginTop={"150px"}
|
||||
// position={"relative"}
|
||||
// padding={"0 4rem"}
|
||||
// paddingBottom={"50px"}
|
||||
// >
|
||||
// <Image
|
||||
// src={cube}
|
||||
// width={"410px"}
|
||||
// position={"absolute"}
|
||||
// left={"0"}
|
||||
// right={"0"}
|
||||
// marginLeft={"auto"}
|
||||
// marginRight={"auto"}
|
||||
// cursor={"pointer"}
|
||||
// transform="translateY(-10%)"
|
||||
// animation="floatAnimation 2s infinite alternate"
|
||||
// // onClick={handleImageClick}
|
||||
// sx={{
|
||||
// "@keyframes floatAnimation": {
|
||||
// "0%": {
|
||||
// transform: "translateY(0)",
|
||||
// },
|
||||
// "100%": {
|
||||
// transform: "translateY(-20px)",
|
||||
// },
|
||||
// },
|
||||
// }}
|
||||
// />
|
||||
|
||||
// <Box
|
||||
// gridColumn={"1/2"}
|
||||
// textAlign={"left"}
|
||||
// position={"relative"}
|
||||
// width={"383px"}
|
||||
// >
|
||||
// <Component1 />
|
||||
// </Box>
|
||||
|
||||
// <Box
|
||||
// gridColumn={"1/2"}
|
||||
// gridRow={"2"}
|
||||
// textAlign={"left"}
|
||||
// position={"relative"}
|
||||
// width={"383px"}
|
||||
// >
|
||||
// <Component2 />
|
||||
// </Box>
|
||||
|
||||
// <Box
|
||||
// gridColumn={"2/2"}
|
||||
// gridRow={"2"}
|
||||
// textAlign={"left"}
|
||||
// position={"relative"}
|
||||
// width={"383px"}
|
||||
// >
|
||||
// <Component3 />
|
||||
// </Box>
|
||||
|
||||
// <Box
|
||||
// gridColumn={"2/2"}
|
||||
// textAlign={"left"}
|
||||
// position={"relative"}
|
||||
// width={"383px"}
|
||||
// >
|
||||
// <Component4 />
|
||||
// </Box>
|
||||
// </Box>
|
||||
// </Container>
|
||||
// </Box>
|
||||
|
||||
// <Box
|
||||
// backgroundColor={"#000"}
|
||||
// height={"100vh"}
|
||||
// width={"100%"}
|
||||
// padding={"0 5rem"}
|
||||
// paddingBottom={"2rem"}
|
||||
// ref={secondBoxRef}
|
||||
// position={"absolute"}
|
||||
// top={"0"}
|
||||
// left={"0"}
|
||||
// display={"grid"}
|
||||
// placeContent={"center"}
|
||||
// >
|
||||
// <Text
|
||||
// as={"h2"}
|
||||
// paddingTop={"10rem"}
|
||||
// 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)",
|
||||
// },
|
||||
// },
|
||||
// }}
|
||||
// />
|
||||
// </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>
|
||||
// </Box>
|
||||
// </Container>
|
||||
// </Box>
|
||||
|
||||
// <Box
|
||||
// backgroundColor={"#000"}
|
||||
// height={"100vh"}
|
||||
// width={"100%"}
|
||||
// padding={"2rem"}
|
||||
// paddingBottom={"2rem"}
|
||||
// ref={thirdBoxRef}
|
||||
// position={"absolute"}
|
||||
// top={"0"}
|
||||
// left={"0"}
|
||||
// display={"grid"}
|
||||
// placeContent={"center"}
|
||||
// >
|
||||
// <Text
|
||||
// as={"h2"}
|
||||
// paddingTop={"5rem"}
|
||||
// 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={"5rem"}>
|
||||
// <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 Transactions consume < 10 kWh < 100000
|
||||
// Visa transactions
|
||||
// </Text>
|
||||
// </Box>
|
||||
// <Box color={"#E1E1E1"} textAlign={"left"} marginBottom={"2rem"}>
|
||||
// <Text
|
||||
// as={"h2"}
|
||||
// fontSize={"20px"}
|
||||
// color={"#fff"}
|
||||
// marginBottom={"10px"}
|
||||
// >
|
||||
// 51.4 Million RBT
|
||||
// </Text>
|
||||
// <Text fontSize={"16px"}>Fixed Supply.Hardcapped </Text>
|
||||
// </Box>
|
||||
// </Box>
|
||||
// </Box>
|
||||
// </Container>
|
||||
// </Box>
|
||||
// </Box>
|
||||
// </div>
|
||||
// );
|
||||
// };
|
||||
|
||||
@@ -124,6 +124,10 @@ span.swiper-pagination-bullet {
|
||||
top: 90% !important;
|
||||
}
|
||||
|
||||
.subnet-mobile .swiper-pagination {
|
||||
top: 94% !important;
|
||||
}
|
||||
|
||||
.swiper-button-next {
|
||||
right: -8px;
|
||||
}
|
||||
@@ -137,6 +141,23 @@ span.swiper-pagination-bullet {
|
||||
.team-slider .swiper-button-next {
|
||||
right: 28px;
|
||||
}
|
||||
.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";
|
||||
|
||||
@@ -39,7 +39,6 @@ const BuildPage = () => {
|
||||
{!isMobile ? <Tools /> : <ToolMobile />}
|
||||
<Connect />
|
||||
<LearnMore />
|
||||
<Footer />
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
@@ -41,8 +41,7 @@ const Community = () => {
|
||||
<Connect />
|
||||
{/* <Happen />
|
||||
<Insights /> */}
|
||||
<LearnMore />
|
||||
<Footer />
|
||||
<LearnMore />
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
@@ -10,7 +10,6 @@ const Contact = () => {
|
||||
return (
|
||||
<>
|
||||
<Form />
|
||||
<Footer />
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
@@ -46,8 +46,6 @@ const HomePage = () => {
|
||||
{!isMobile ? <Partner /> : <PartnerMobile />}
|
||||
{/* <Client /> */}
|
||||
{!isMobile ? <Resources /> : <ResourcesMobile />}
|
||||
|
||||
<Footer />
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
@@ -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 = () => {
|
||||
<LearnBanner />
|
||||
<LearnDev />
|
||||
<WhyRubix />
|
||||
<GetStarted />
|
||||
<GetStarted />
|
||||
<Faq />
|
||||
<Footer />
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
@@ -22,7 +22,6 @@ const UseCases = ({
|
||||
bannerImage={bannerImage}
|
||||
useCase={useCase}
|
||||
/>
|
||||
<Footer />
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
129
src/routes/_routes.jsx
Normal file
129
src/routes/_routes.jsx
Normal file
@@ -0,0 +1,129 @@
|
||||
import ArticleInternalFour from "../components/ArticleInternalFour/ArticleInternalFour";
|
||||
import ArticleInternalOne from "../components/ArticleInternalOne/ArticleInternalOne";
|
||||
import ArticleInternalSix from "../components/ArticleInternalSix/ArticleInternalSix";
|
||||
import ArticleInternalThree from "../components/ArticleInternalThree/ArticleInternalThree";
|
||||
import ArticleInternalTwo from "../components/ArticleInternalTwo/ArticleInternalTwo";
|
||||
import ArticleInternalfive from "../components/ArticleInternalfive/ArticleInternalfive";
|
||||
import { useCase } from "../data/useCase";
|
||||
import BuildPage from "../pages/BuildPage";
|
||||
import Community from "../pages/Community";
|
||||
import HomePage from "../pages/HomePage";
|
||||
import LearnPage from "../pages/LearnPage";
|
||||
import NotFound from "../pages/NotFound";
|
||||
import UseCases from "../pages/UseCases";
|
||||
import fintech from "../assets/images/usecase-bg.png";
|
||||
import adTech from "../assets/images/addtech.jpg";
|
||||
import martech from "../assets/images/martech.png";
|
||||
import healthTech from "../assets/images/health-tech.png";
|
||||
import Form from "../components/Contact/Form";
|
||||
import UseCase from "../components/UseCase/UseCase";
|
||||
|
||||
export const route = [
|
||||
{
|
||||
path: "/",
|
||||
element: <HomePage />,
|
||||
},
|
||||
{
|
||||
path: "LearnPage",
|
||||
element: <LearnPage />,
|
||||
},
|
||||
{
|
||||
path: "BuildPage",
|
||||
element: <BuildPage />,
|
||||
},
|
||||
{
|
||||
path: "UseCases",
|
||||
element: <UseCases />,
|
||||
},
|
||||
{
|
||||
path: "community",
|
||||
element: <Community />,
|
||||
},
|
||||
|
||||
{
|
||||
path: "bring-your-own-blockspace",
|
||||
element: <ArticleInternalOne />,
|
||||
},
|
||||
{
|
||||
path: "rubix-the-sustainable-blockchain-solution-a-green-initiative",
|
||||
element: <ArticleInternalTwo />,
|
||||
},
|
||||
{
|
||||
path: "mining-rubix-tokens-what-you-need-to-know",
|
||||
element: <ArticleInternalThree />,
|
||||
},
|
||||
{
|
||||
path: "securing-wallet-to-wallet-transfers-across-the-network-rubix-solved-it-differently",
|
||||
element: <ArticleInternalFour />,
|
||||
},
|
||||
{
|
||||
path: "enterprise-blockchains-on-a-public-chain",
|
||||
element: <ArticleInternalfive />,
|
||||
},
|
||||
{
|
||||
path: "multichain-over-blockchain-a-reality-check-on-security-threat",
|
||||
element: <ArticleInternalSix />,
|
||||
},
|
||||
{
|
||||
path: "Contact",
|
||||
element: <Form />,
|
||||
},
|
||||
{
|
||||
path: "*",
|
||||
element: <NotFound />,
|
||||
},
|
||||
|
||||
{
|
||||
path: "fin-tech",
|
||||
element: (
|
||||
<UseCase
|
||||
bannerHeading={"FinTech"}
|
||||
bannerSubHeading={
|
||||
"Stay up to date on what’s happening with Rubix, learn about upcoming events and access important resources."
|
||||
}
|
||||
bannerImage={fintech}
|
||||
useCase={useCase}
|
||||
/>
|
||||
),
|
||||
},
|
||||
|
||||
{
|
||||
path: "ad-tech",
|
||||
element: (
|
||||
<UseCase
|
||||
bannerHeading={"AdTech"}
|
||||
bannerSubHeading={
|
||||
"Stay up to date on what’s happening with Rubix, learn about upcoming events and access important resources."
|
||||
}
|
||||
bannerImage={adTech}
|
||||
useCase={useCase}
|
||||
/>
|
||||
),
|
||||
},
|
||||
{
|
||||
path: "mar-tech",
|
||||
element: (
|
||||
<UseCase
|
||||
bannerHeading={"MarTech"}
|
||||
bannerSubHeading={
|
||||
"Stay up to date on what’s happening with Rubix, learn about upcoming events and access important resources."
|
||||
}
|
||||
bannerImage={martech}
|
||||
useCase={useCase}
|
||||
/>
|
||||
),
|
||||
},
|
||||
{
|
||||
path: "health-tech",
|
||||
element: (
|
||||
<UseCase
|
||||
bannerHeading={"HealthTech"}
|
||||
bannerSubHeading={
|
||||
"Stay up to date on what’s happening with Rubix, learn about upcoming events and access important resources."
|
||||
}
|
||||
bannerImage={healthTech}
|
||||
useCase={useCase}
|
||||
/>
|
||||
),
|
||||
},
|
||||
];
|
||||
Reference in New Issue
Block a user