mirror of
https://github.com/WDI-Ideas/rubix.git
synced 2026-04-27 20:05:51 +00:00
Rubix Home page development
This commit is contained in:
rockyeverlast
21
.eslintrc.cjs
Normal file
21
.eslintrc.cjs
Normal file
@@ -0,0 +1,21 @@
|
|||||||
|
module.exports = {
|
||||||
|
root: true,
|
||||||
|
env: { browser: true, es2020: true },
|
||||||
|
extends: [
|
||||||
|
'eslint:recommended',
|
||||||
|
'plugin:react/recommended',
|
||||||
|
'plugin:react/jsx-runtime',
|
||||||
|
'plugin:react-hooks/recommended',
|
||||||
|
],
|
||||||
|
ignorePatterns: ['dist', '.eslintrc.cjs'],
|
||||||
|
parserOptions: { ecmaVersion: 'latest', sourceType: 'module' },
|
||||||
|
settings: { react: { version: '18.2' } },
|
||||||
|
plugins: ['react-refresh'],
|
||||||
|
rules: {
|
||||||
|
'react/jsx-no-target-blank': 'off',
|
||||||
|
'react-refresh/only-export-components': [
|
||||||
|
'warn',
|
||||||
|
{ allowConstantExport: true },
|
||||||
|
],
|
||||||
|
},
|
||||||
|
}
|
||||||
24
.gitignore
vendored
Normal file
24
.gitignore
vendored
Normal file
@@ -0,0 +1,24 @@
|
|||||||
|
# Logs
|
||||||
|
logs
|
||||||
|
*.log
|
||||||
|
npm-debug.log*
|
||||||
|
yarn-debug.log*
|
||||||
|
yarn-error.log*
|
||||||
|
pnpm-debug.log*
|
||||||
|
lerna-debug.log*
|
||||||
|
|
||||||
|
node_modules
|
||||||
|
dist
|
||||||
|
dist-ssr
|
||||||
|
*.local
|
||||||
|
|
||||||
|
# Editor directories and files
|
||||||
|
.vscode/*
|
||||||
|
!.vscode/extensions.json
|
||||||
|
.idea
|
||||||
|
.DS_Store
|
||||||
|
*.suo
|
||||||
|
*.ntvs*
|
||||||
|
*.njsproj
|
||||||
|
*.sln
|
||||||
|
*.sw?
|
||||||
8
README.md
Normal file
8
README.md
Normal file
@@ -0,0 +1,8 @@
|
|||||||
|
# React + Vite
|
||||||
|
|
||||||
|
This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
|
||||||
|
|
||||||
|
Currently, two official plugins are available:
|
||||||
|
|
||||||
|
- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react/README.md) uses [Babel](https://babeljs.io/) for Fast Refresh
|
||||||
|
- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh
|
||||||
17
index.html
Normal file
17
index.html
Normal file
@@ -0,0 +1,17 @@
|
|||||||
|
<!doctype html>
|
||||||
|
<html lang="en">
|
||||||
|
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8" />
|
||||||
|
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
|
||||||
|
<link rel="preload" href="Mona-Sans.woff2" as="font" type="font/woff2" crossOrigin="anonymous">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||||
|
<title>Vite + React</title>
|
||||||
|
</head>
|
||||||
|
|
||||||
|
<body>
|
||||||
|
<div id="root"></div>
|
||||||
|
<script type="module" src="/src/main.jsx"></script>
|
||||||
|
</body>
|
||||||
|
|
||||||
|
</html>
|
||||||
5727
package-lock.json
generated
Normal file
5727
package-lock.json
generated
Normal file
File diff suppressed because it is too large
Load Diff
35
package.json
Normal file
35
package.json
Normal file
@@ -0,0 +1,35 @@
|
|||||||
|
{
|
||||||
|
"name": "rubix",
|
||||||
|
"private": true,
|
||||||
|
"version": "0.0.0",
|
||||||
|
"type": "module",
|
||||||
|
"scripts": {
|
||||||
|
"dev": "vite",
|
||||||
|
"build": "vite build",
|
||||||
|
"lint": "eslint . --ext js,jsx --report-unused-disable-directives --max-warnings 0",
|
||||||
|
"preview": "vite preview"
|
||||||
|
},
|
||||||
|
"dependencies": {
|
||||||
|
"@chakra-ui/react": "^2.8.2",
|
||||||
|
"@emotion/react": "^11.11.4",
|
||||||
|
"@emotion/styled": "^11.11.0",
|
||||||
|
"@fontsource/poppins": "^5.0.12",
|
||||||
|
"framer-motion": "^11.0.15",
|
||||||
|
"react": "^18.2.0",
|
||||||
|
"react-countup": "^6.5.2",
|
||||||
|
"react-dom": "^18.2.0",
|
||||||
|
"react-intersection-observer": "^9.8.1",
|
||||||
|
"react-router-dom": "^6.22.3",
|
||||||
|
"swiper": "^11.0.7"
|
||||||
|
},
|
||||||
|
"devDependencies": {
|
||||||
|
"@types/react": "^18.2.64",
|
||||||
|
"@types/react-dom": "^18.2.21",
|
||||||
|
"@vitejs/plugin-react-swc": "^3.5.0",
|
||||||
|
"eslint": "^8.57.0",
|
||||||
|
"eslint-plugin-react": "^7.34.0",
|
||||||
|
"eslint-plugin-react-hooks": "^4.6.0",
|
||||||
|
"eslint-plugin-react-refresh": "^0.4.5",
|
||||||
|
"vite": "^5.1.6"
|
||||||
|
}
|
||||||
|
}
|
||||||
1
public/vite.svg
Normal file
1
public/vite.svg
Normal file
@@ -0,0 +1 @@
|
|||||||
|
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>
|
||||||
|
After Width: | Height: | Size: 1.5 KiB |
28
src/App.jsx
Normal file
28
src/App.jsx
Normal file
@@ -0,0 +1,28 @@
|
|||||||
|
import {
|
||||||
|
Route,
|
||||||
|
createBrowserRouter,
|
||||||
|
createRoutesFromElements,
|
||||||
|
RouterProvider,
|
||||||
|
} from "react-router-dom";
|
||||||
|
import HomePage from "./pages/HomePage";
|
||||||
|
import NavBar from "./components/NavBar/NavBar";
|
||||||
|
import LearnPage from "./pages/LearnPage";
|
||||||
|
|
||||||
|
const router = createBrowserRouter(
|
||||||
|
createRoutesFromElements(
|
||||||
|
<Route path="/" element={<NavBar />}>
|
||||||
|
<Route index element={<HomePage />} />
|
||||||
|
<Route path="LearnPage" element={<LearnPage />} />
|
||||||
|
</Route>
|
||||||
|
)
|
||||||
|
);
|
||||||
|
|
||||||
|
function App() {
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
<RouterProvider router={router} />
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
export default App;
|
||||||
BIN
src/assets/fonts/Mona-Sans-Regular.woff2
Normal file
BIN
src/assets/fonts/Mona-Sans-Regular.woff2
Normal file
Binary file not shown.
BIN
src/assets/fonts/Mona-Sans.ttf
Normal file
BIN
src/assets/fonts/Mona-Sans.ttf
Normal file
Binary file not shown.
BIN
src/assets/fonts/Mona-Sans.woff2
Normal file
BIN
src/assets/fonts/Mona-Sans.woff2
Normal file
Binary file not shown.
BIN
src/assets/images/EXR.png
Normal file
BIN
src/assets/images/EXR.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 44 KiB |
BIN
src/assets/images/Finalo education.png
Normal file
BIN
src/assets/images/Finalo education.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 24 KiB |
BIN
src/assets/images/Statsbanner.png
Normal file
BIN
src/assets/images/Statsbanner.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.9 MiB |
BIN
src/assets/images/Vector1.png
Normal file
BIN
src/assets/images/Vector1.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 841 B |
BIN
src/assets/images/Vector2.png
Normal file
BIN
src/assets/images/Vector2.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 678 B |
BIN
src/assets/images/Vector3.png
Normal file
BIN
src/assets/images/Vector3.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 797 B |
BIN
src/assets/images/Vector4.png
Normal file
BIN
src/assets/images/Vector4.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 667 B |
BIN
src/assets/images/bannerBg.gif
Normal file
BIN
src/assets/images/bannerBg.gif
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 12 MiB |
BIN
src/assets/images/bescom.png
Normal file
BIN
src/assets/images/bescom.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 43 KiB |
BIN
src/assets/images/chainx.png
Normal file
BIN
src/assets/images/chainx.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 46 KiB |
BIN
src/assets/images/client1.png
Normal file
BIN
src/assets/images/client1.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 7.4 KiB |
BIN
src/assets/images/cube.png
Normal file
BIN
src/assets/images/cube.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 639 KiB |
BIN
src/assets/images/ensurity.png
Normal file
BIN
src/assets/images/ensurity.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 14 KiB |
BIN
src/assets/images/iskon.png
Normal file
BIN
src/assets/images/iskon.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 24 KiB |
BIN
src/assets/images/jupiter meta.png
Normal file
BIN
src/assets/images/jupiter meta.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 63 KiB |
BIN
src/assets/images/ondc.png
Normal file
BIN
src/assets/images/ondc.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 28 KiB |
BIN
src/assets/images/rubix.png
Normal file
BIN
src/assets/images/rubix.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 6.3 KiB |
BIN
src/assets/images/smart city.png
Normal file
BIN
src/assets/images/smart city.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 36 KiB |
BIN
src/assets/images/subnet1.png
Normal file
BIN
src/assets/images/subnet1.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 651 KiB |
BIN
src/assets/images/whitePaperBg.png
Normal file
BIN
src/assets/images/whitePaperBg.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 151 KiB |
BIN
src/assets/images/ymca.png
Normal file
BIN
src/assets/images/ymca.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 36 KiB |
1
src/assets/react.svg
Normal file
1
src/assets/react.svg
Normal file
@@ -0,0 +1 @@
|
|||||||
|
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="35.93" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 228"><path fill="#00D8FF" d="M210.483 73.824a171.49 171.49 0 0 0-8.24-2.597c.465-1.9.893-3.777 1.273-5.621c6.238-30.281 2.16-54.676-11.769-62.708c-13.355-7.7-35.196.329-57.254 19.526a171.23 171.23 0 0 0-6.375 5.848a155.866 155.866 0 0 0-4.241-3.917C100.759 3.829 77.587-4.822 63.673 3.233C50.33 10.957 46.379 33.89 51.995 62.588a170.974 170.974 0 0 0 1.892 8.48c-3.28.932-6.445 1.924-9.474 2.98C17.309 83.498 0 98.307 0 113.668c0 15.865 18.582 31.778 46.812 41.427a145.52 145.52 0 0 0 6.921 2.165a167.467 167.467 0 0 0-2.01 9.138c-5.354 28.2-1.173 50.591 12.134 58.266c13.744 7.926 36.812-.22 59.273-19.855a145.567 145.567 0 0 0 5.342-4.923a168.064 168.064 0 0 0 6.92 6.314c21.758 18.722 43.246 26.282 56.54 18.586c13.731-7.949 18.194-32.003 12.4-61.268a145.016 145.016 0 0 0-1.535-6.842c1.62-.48 3.21-.974 4.76-1.488c29.348-9.723 48.443-25.443 48.443-41.52c0-15.417-17.868-30.326-45.517-39.844Zm-6.365 70.984c-1.4.463-2.836.91-4.3 1.345c-3.24-10.257-7.612-21.163-12.963-32.432c5.106-11 9.31-21.767 12.459-31.957c2.619.758 5.16 1.557 7.61 2.4c23.69 8.156 38.14 20.213 38.14 29.504c0 9.896-15.606 22.743-40.946 31.14Zm-10.514 20.834c2.562 12.94 2.927 24.64 1.23 33.787c-1.524 8.219-4.59 13.698-8.382 15.893c-8.067 4.67-25.32-1.4-43.927-17.412a156.726 156.726 0 0 1-6.437-5.87c7.214-7.889 14.423-17.06 21.459-27.246c12.376-1.098 24.068-2.894 34.671-5.345a134.17 134.17 0 0 1 1.386 6.193ZM87.276 214.515c-7.882 2.783-14.16 2.863-17.955.675c-8.075-4.657-11.432-22.636-6.853-46.752a156.923 156.923 0 0 1 1.869-8.499c10.486 2.32 22.093 3.988 34.498 4.994c7.084 9.967 14.501 19.128 21.976 27.15a134.668 134.668 0 0 1-4.877 4.492c-9.933 8.682-19.886 14.842-28.658 17.94ZM50.35 144.747c-12.483-4.267-22.792-9.812-29.858-15.863c-6.35-5.437-9.555-10.836-9.555-15.216c0-9.322 13.897-21.212 37.076-29.293c2.813-.98 5.757-1.905 8.812-2.773c3.204 10.42 7.406 21.315 12.477 32.332c-5.137 11.18-9.399 22.249-12.634 32.792a134.718 134.718 0 0 1-6.318-1.979Zm12.378-84.26c-4.811-24.587-1.616-43.134 6.425-47.789c8.564-4.958 27.502 2.111 47.463 19.835a144.318 144.318 0 0 1 3.841 3.545c-7.438 7.987-14.787 17.08-21.808 26.988c-12.04 1.116-23.565 2.908-34.161 5.309a160.342 160.342 0 0 1-1.76-7.887Zm110.427 27.268a347.8 347.8 0 0 0-7.785-12.803c8.168 1.033 15.994 2.404 23.343 4.08c-2.206 7.072-4.956 14.465-8.193 22.045a381.151 381.151 0 0 0-7.365-13.322Zm-45.032-43.861c5.044 5.465 10.096 11.566 15.065 18.186a322.04 322.04 0 0 0-30.257-.006c4.974-6.559 10.069-12.652 15.192-18.18ZM82.802 87.83a323.167 323.167 0 0 0-7.227 13.238c-3.184-7.553-5.909-14.98-8.134-22.152c7.304-1.634 15.093-2.97 23.209-3.984a321.524 321.524 0 0 0-7.848 12.897Zm8.081 65.352c-8.385-.936-16.291-2.203-23.593-3.793c2.26-7.3 5.045-14.885 8.298-22.6a321.187 321.187 0 0 0 7.257 13.246c2.594 4.48 5.28 8.868 8.038 13.147Zm37.542 31.03c-5.184-5.592-10.354-11.779-15.403-18.433c4.902.192 9.899.29 14.978.29c5.218 0 10.376-.117 15.453-.343c-4.985 6.774-10.018 12.97-15.028 18.486Zm52.198-57.817c3.422 7.8 6.306 15.345 8.596 22.52c-7.422 1.694-15.436 3.058-23.88 4.071a382.417 382.417 0 0 0 7.859-13.026a347.403 347.403 0 0 0 7.425-13.565Zm-16.898 8.101a358.557 358.557 0 0 1-12.281 19.815a329.4 329.4 0 0 1-23.444.823c-7.967 0-15.716-.248-23.178-.732a310.202 310.202 0 0 1-12.513-19.846h.001a307.41 307.41 0 0 1-10.923-20.627a310.278 310.278 0 0 1 10.89-20.637l-.001.001a307.318 307.318 0 0 1 12.413-19.761c7.613-.576 15.42-.876 23.31-.876H128c7.926 0 15.743.303 23.354.883a329.357 329.357 0 0 1 12.335 19.695a358.489 358.489 0 0 1 11.036 20.54a329.472 329.472 0 0 1-11 20.722Zm22.56-122.124c8.572 4.944 11.906 24.881 6.52 51.026c-.344 1.668-.73 3.367-1.15 5.09c-10.622-2.452-22.155-4.275-34.23-5.408c-7.034-10.017-14.323-19.124-21.64-27.008a160.789 160.789 0 0 1 5.888-5.4c18.9-16.447 36.564-22.941 44.612-18.3ZM128 90.808c12.625 0 22.86 10.235 22.86 22.86s-10.235 22.86-22.86 22.86s-22.86-10.235-22.86-22.86s10.235-22.86 22.86-22.86Z"></path></svg>
|
||||||
|
After Width: | Height: | Size: 4.0 KiB |
15
src/components/Carousel/Carousel.jsx
Normal file
15
src/components/Carousel/Carousel.jsx
Normal file
@@ -0,0 +1,15 @@
|
|||||||
|
import { Swiper, SwiperSlide } from "swiper/react";
|
||||||
|
import "swiper/css";
|
||||||
|
|
||||||
|
const Carousel = () => {
|
||||||
|
return (
|
||||||
|
<Swiper spaceBetween={50} slidesPerView={3}>
|
||||||
|
<SwiperSlide>Slide 1</SwiperSlide>
|
||||||
|
<SwiperSlide>Slide 2</SwiperSlide>
|
||||||
|
<SwiperSlide>Slide 3</SwiperSlide>
|
||||||
|
<SwiperSlide>Slide 4</SwiperSlide>
|
||||||
|
</Swiper>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default Carousel;
|
||||||
50
src/components/HomePage/Client.jsx
Normal file
50
src/components/HomePage/Client.jsx
Normal file
@@ -0,0 +1,50 @@
|
|||||||
|
import { Box, Container, Text, Image } from "@chakra-ui/react";
|
||||||
|
import client1 from "../../assets/images/client1.png";
|
||||||
|
|
||||||
|
const Client = () => {
|
||||||
|
const Content = {
|
||||||
|
heading: `Look Who's Building on Rubix`,
|
||||||
|
};
|
||||||
|
return (
|
||||||
|
<Box
|
||||||
|
height={"100vh"}
|
||||||
|
background={"#101015"}
|
||||||
|
backgroundSize={"cover"}
|
||||||
|
backgroundRepeat={"no-repeat"}
|
||||||
|
>
|
||||||
|
<Text
|
||||||
|
as={"h2"}
|
||||||
|
paddingTop={"2rem"}
|
||||||
|
paddingBottom={"2rem"}
|
||||||
|
fontWeight={700}
|
||||||
|
fontSize={"40px"}
|
||||||
|
textAlign={"center"}
|
||||||
|
textTransform={"capitalize"}
|
||||||
|
color={"#fff"}
|
||||||
|
>
|
||||||
|
{Content.heading}
|
||||||
|
</Text>
|
||||||
|
<Container
|
||||||
|
maxW="container.lg"
|
||||||
|
display={"grid"}
|
||||||
|
placeContent={"center"}
|
||||||
|
height={"50vh"}
|
||||||
|
>
|
||||||
|
<Box
|
||||||
|
display={"flex"}
|
||||||
|
justifyContent={"space-between"}
|
||||||
|
alignItems={"center"}
|
||||||
|
flexWrap={"wrap"}
|
||||||
|
>
|
||||||
|
<Image src={client1} />
|
||||||
|
<Image src={client1} />
|
||||||
|
<Image src={client1} />
|
||||||
|
<Image src={client1} />
|
||||||
|
<Image src={client1} />
|
||||||
|
</Box>
|
||||||
|
</Container>
|
||||||
|
</Box>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default Client;
|
||||||
129
src/components/HomePage/HomeBanner.jsx
Normal file
129
src/components/HomePage/HomeBanner.jsx
Normal file
@@ -0,0 +1,129 @@
|
|||||||
|
import { Box, Button, Text } from "@chakra-ui/react";
|
||||||
|
import { Container } from "@chakra-ui/react";
|
||||||
|
import banner from "../../assets/images/bannerBg.gif";
|
||||||
|
|
||||||
|
const BannerContent = [
|
||||||
|
{
|
||||||
|
heading1: `Unlimited Objectchains`,
|
||||||
|
heading2: ` Scaling in Parallel`,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
subheading: `Looking for a public L1 blockchain to quickly launch Tokenized,
|
||||||
|
Scalable Web 3 initiatives with 100% data sovereignty?`,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
btn: `Build Now`,
|
||||||
|
},
|
||||||
|
];
|
||||||
|
|
||||||
|
const HomeBanner = () => {
|
||||||
|
return (
|
||||||
|
<Box
|
||||||
|
height={"100vh"}
|
||||||
|
backgroundImage={`url(${banner})`}
|
||||||
|
backgroundRepeat={"no-repeat"}
|
||||||
|
backgroundSize={"cover"}
|
||||||
|
display={"grid"}
|
||||||
|
placeContent={"center"}
|
||||||
|
>
|
||||||
|
<Container maxW="container.lg" textAlign={"center"}>
|
||||||
|
{BannerContent.map((item, index) => {
|
||||||
|
return (
|
||||||
|
<Box key={index}>
|
||||||
|
<Text
|
||||||
|
as={"h2"}
|
||||||
|
fontWeight={700}
|
||||||
|
fontSize={"60px"}
|
||||||
|
textTransform={"upperCase"}
|
||||||
|
color={"#DE858E"}
|
||||||
|
sx={{
|
||||||
|
"@media (max-width: 1024px)": {},
|
||||||
|
"@media (max-width: 600px)": {
|
||||||
|
fontSize: "28px",
|
||||||
|
marginBottom: "2rem",
|
||||||
|
},
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{item.heading1}
|
||||||
|
<span
|
||||||
|
style={{
|
||||||
|
color: "#fff",
|
||||||
|
fontWeight: "600",
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{item.heading2}
|
||||||
|
</span>
|
||||||
|
</Text>
|
||||||
|
<Container maxW="container.lg">
|
||||||
|
<Text
|
||||||
|
color={"#fff"}
|
||||||
|
fontSize={"25px"}
|
||||||
|
fontWeight={"400"}
|
||||||
|
lineHeight={"37.5px"}
|
||||||
|
fontFamily={"Poppins"}
|
||||||
|
sx={{
|
||||||
|
"@media (max-width: 1024px)": {},
|
||||||
|
"@media (max-width: 600px)": {
|
||||||
|
fontSize: "17px",
|
||||||
|
},
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{item.subheading}
|
||||||
|
</Text>
|
||||||
|
</Container>
|
||||||
|
</Box>
|
||||||
|
);
|
||||||
|
})}
|
||||||
|
</Container>
|
||||||
|
<Container maxW="container.md" textAlign={"center"} marginTop={"3rem"}>
|
||||||
|
{BannerContent[2] && (
|
||||||
|
<Button
|
||||||
|
position={"relative"}
|
||||||
|
backgroundColor={"transparent"}
|
||||||
|
cursor={"pointer"}
|
||||||
|
transition="background-color 0.3s ease-in-out, color 0.1s ease-in-out"
|
||||||
|
color={"#fff"}
|
||||||
|
width={"227px"}
|
||||||
|
height={"60px"}
|
||||||
|
fontFamily={"Poppins"}
|
||||||
|
fontWeight={"400"}
|
||||||
|
border={"1px solid white"}
|
||||||
|
borderRadius={"10px"}
|
||||||
|
fontSize={"20px"}
|
||||||
|
// sx={{
|
||||||
|
// "::before": {
|
||||||
|
// content: '""',
|
||||||
|
// position: "absolute",
|
||||||
|
// top: "50%",
|
||||||
|
// left: "50%",
|
||||||
|
// transform: "translate(-50%, -50%)",
|
||||||
|
// width: "0",
|
||||||
|
// height: "0",
|
||||||
|
// borderRadius: "50%",
|
||||||
|
// bgGradient:
|
||||||
|
// "radial-gradient(circle, #d4dae0, #b7bccd, #a49db6, #987c99, #8e5c74)",
|
||||||
|
// transition: "width 0.3s ease-in-out, height 0.3s ease-in-out",
|
||||||
|
// },
|
||||||
|
// "&:hover::before": {
|
||||||
|
// width: "100%",
|
||||||
|
// height: "100%",
|
||||||
|
// zIndex: "-1",
|
||||||
|
// },
|
||||||
|
// }}
|
||||||
|
_hover={{
|
||||||
|
color: "#000",
|
||||||
|
border: "none",
|
||||||
|
bgGradient:
|
||||||
|
"radial-gradient(circle, #d4dae0, #b7bccd, #a49db6, #987c99, #8e5c74)",
|
||||||
|
transition: "width 0.3s ease-in-out, height 0.3s ease-in-out",
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{BannerContent[2].btn}
|
||||||
|
</Button>
|
||||||
|
)}
|
||||||
|
</Container>
|
||||||
|
</Box>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default HomeBanner;
|
||||||
37
src/components/HomePage/Resources.jsx
Normal file
37
src/components/HomePage/Resources.jsx
Normal file
@@ -0,0 +1,37 @@
|
|||||||
|
import { Box, Container, Text, Image } from "@chakra-ui/react";
|
||||||
|
|
||||||
|
const Content = {
|
||||||
|
heading: `Resources and Latest Happenings`,
|
||||||
|
};
|
||||||
|
|
||||||
|
const Resources = () => {
|
||||||
|
return (
|
||||||
|
<Box
|
||||||
|
height={"100vh"}
|
||||||
|
background={"#000"}
|
||||||
|
backgroundSize={"cover"}
|
||||||
|
backgroundRepeat={"no-repeat"}
|
||||||
|
>
|
||||||
|
<Text
|
||||||
|
as={"h2"}
|
||||||
|
paddingTop={"2rem"}
|
||||||
|
paddingBottom={"2rem"}
|
||||||
|
fontWeight={700}
|
||||||
|
fontSize={"40px"}
|
||||||
|
textAlign={"center"}
|
||||||
|
textTransform={"capitalize"}
|
||||||
|
color={"#fff"}
|
||||||
|
>
|
||||||
|
{Content.heading}
|
||||||
|
</Text>
|
||||||
|
<Container
|
||||||
|
maxW="container.lg"
|
||||||
|
display={"grid"}
|
||||||
|
placeContent={"center"}
|
||||||
|
height={"50vh"}
|
||||||
|
></Container>
|
||||||
|
</Box>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default Resources;
|
||||||
163
src/components/HomePage/Stats.jsx
Normal file
163
src/components/HomePage/Stats.jsx
Normal file
@@ -0,0 +1,163 @@
|
|||||||
|
import { Box, Container, Text } from "@chakra-ui/react";
|
||||||
|
import { useInView } from "react-intersection-observer";
|
||||||
|
import CountUp from "react-countup";
|
||||||
|
import banner from "../../assets/images/Statsbanner.png";
|
||||||
|
|
||||||
|
const StatsContent = {
|
||||||
|
heading: `Key Statistics`,
|
||||||
|
};
|
||||||
|
|
||||||
|
const Stats = () => {
|
||||||
|
const { ref, inView } = useInView({
|
||||||
|
threshold: 0.3,
|
||||||
|
triggerOnce: false,
|
||||||
|
});
|
||||||
|
return (
|
||||||
|
<Box
|
||||||
|
height={"80vh"}
|
||||||
|
backgroundImage={`url(${banner})`}
|
||||||
|
backgroundSize={"cover"}
|
||||||
|
backgroundRepeat={"no-repeat"}
|
||||||
|
>
|
||||||
|
<Text
|
||||||
|
as={"h2"}
|
||||||
|
paddingTop={"2rem"}
|
||||||
|
paddingBottom={"2rem"}
|
||||||
|
fontWeight={700}
|
||||||
|
fontSize={"40px"}
|
||||||
|
textAlign={"center"}
|
||||||
|
textTransform={"capitalize"}
|
||||||
|
color={"#fff"}
|
||||||
|
sx={{
|
||||||
|
"@media (max-width: 1024px)": {},
|
||||||
|
"@media (max-width: 600px)": {
|
||||||
|
fontSize: "28px",
|
||||||
|
},
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{StatsContent.heading}
|
||||||
|
</Text>
|
||||||
|
<Container
|
||||||
|
maxW="container.lg"
|
||||||
|
display={"grid"}
|
||||||
|
placeContent={"center"}
|
||||||
|
height={"50vh"}
|
||||||
|
>
|
||||||
|
<Box
|
||||||
|
display={"flex"}
|
||||||
|
justifyContent={"center"}
|
||||||
|
alignItems={"center"}
|
||||||
|
gap={"8rem"}
|
||||||
|
marginBottom={"6rem"}
|
||||||
|
>
|
||||||
|
<Box
|
||||||
|
color={"#fff"}
|
||||||
|
ref={ref}
|
||||||
|
textAlign={"center"}
|
||||||
|
position={"relative"}
|
||||||
|
_before={{
|
||||||
|
content: "''",
|
||||||
|
position: "absolute",
|
||||||
|
height: "100%",
|
||||||
|
right: "-70px",
|
||||||
|
borderRight: "2px solid #EFEFEF",
|
||||||
|
zIndex: "2",
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{inView && (
|
||||||
|
<CountUp
|
||||||
|
start={0}
|
||||||
|
end={51400000}
|
||||||
|
delay={0}
|
||||||
|
style={{ fontSize: "40px", fontWeight: "700" }}
|
||||||
|
/>
|
||||||
|
)}
|
||||||
|
<Text textTransform={"uppercase"}>Total Capped Supply</Text>
|
||||||
|
</Box>
|
||||||
|
<Box
|
||||||
|
color={"#fff"}
|
||||||
|
ref={ref}
|
||||||
|
textAlign={"center"}
|
||||||
|
position={"relative"}
|
||||||
|
_before={{
|
||||||
|
content: "''",
|
||||||
|
position: "absolute",
|
||||||
|
height: "100%",
|
||||||
|
right: "-70px",
|
||||||
|
borderRight: "2px solid #EFEFEF",
|
||||||
|
zIndex: "2",
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{inView && (
|
||||||
|
<CountUp
|
||||||
|
start={0}
|
||||||
|
end={10247786}
|
||||||
|
delay={0}
|
||||||
|
style={{ fontSize: "40px", fontWeight: "700" }}
|
||||||
|
/>
|
||||||
|
)}
|
||||||
|
<Text textTransform={"uppercase"}>Digital Asset Tools mined</Text>
|
||||||
|
</Box>
|
||||||
|
<Box color={"#fff"} ref={ref} textAlign={"center"}>
|
||||||
|
{inView && (
|
||||||
|
<CountUp
|
||||||
|
start={0}
|
||||||
|
end={174015}
|
||||||
|
delay={0}
|
||||||
|
style={{ fontSize: "40px", fontWeight: "700" }}
|
||||||
|
/>
|
||||||
|
)}
|
||||||
|
<Text textTransform={"uppercase"}>Live Nodes</Text>
|
||||||
|
</Box>
|
||||||
|
</Box>
|
||||||
|
|
||||||
|
<Box
|
||||||
|
display={"flex"}
|
||||||
|
justifyContent={"center"}
|
||||||
|
alignItems={"center"}
|
||||||
|
gap={"8rem"}
|
||||||
|
>
|
||||||
|
<Box
|
||||||
|
color={"#fff"}
|
||||||
|
ref={ref}
|
||||||
|
textAlign={"center"}
|
||||||
|
position={"relative"}
|
||||||
|
_before={{
|
||||||
|
content: "''",
|
||||||
|
position: "absolute",
|
||||||
|
height: "100%",
|
||||||
|
right: "-70px",
|
||||||
|
borderRight: "2px solid #EFEFEF",
|
||||||
|
zIndex: "2",
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{inView && (
|
||||||
|
<CountUp
|
||||||
|
start={0}
|
||||||
|
end={51400000}
|
||||||
|
delay={0}
|
||||||
|
style={{ fontSize: "40px", fontWeight: "700" }}
|
||||||
|
/>
|
||||||
|
)}
|
||||||
|
<Text textTransform={"uppercase"}>
|
||||||
|
Circulating Supply at level 4
|
||||||
|
</Text>
|
||||||
|
</Box>
|
||||||
|
<Box color={"#fff"} ref={ref} textAlign={"center"}>
|
||||||
|
{inView && (
|
||||||
|
<CountUp
|
||||||
|
start={0}
|
||||||
|
end={10247786}
|
||||||
|
delay={0}
|
||||||
|
style={{ fontSize: "40px", fontWeight: "700" }}
|
||||||
|
/>
|
||||||
|
)}
|
||||||
|
<Text textTransform={"uppercase"}>Transacitons</Text>
|
||||||
|
</Box>
|
||||||
|
</Box>
|
||||||
|
</Container>
|
||||||
|
</Box>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default Stats;
|
||||||
112
src/components/HomePage/Subnets.jsx
Normal file
112
src/components/HomePage/Subnets.jsx
Normal file
@@ -0,0 +1,112 @@
|
|||||||
|
/* eslint-disable no-unused-vars */
|
||||||
|
import { Box, Button, Image, Text, Grid, GridItem } from "@chakra-ui/react";
|
||||||
|
import { Container } from "@chakra-ui/react";
|
||||||
|
import {
|
||||||
|
List,
|
||||||
|
ListItem,
|
||||||
|
ListIcon,
|
||||||
|
OrderedList,
|
||||||
|
UnorderedList,
|
||||||
|
} from "@chakra-ui/react";
|
||||||
|
import Component1 from "../SubnetsComponent/Component1";
|
||||||
|
import Component2 from "../SubnetsComponent/Component2";
|
||||||
|
import cube from "../../assets/images/cube.png";
|
||||||
|
import Component3 from "../SubnetsComponent/Component3";
|
||||||
|
import Component4 from "../SubnetsComponent/Component4";
|
||||||
|
|
||||||
|
const SubnetContent = {
|
||||||
|
heading: `decentralised Auto Syncing subnets`,
|
||||||
|
};
|
||||||
|
|
||||||
|
const Subnets = () => {
|
||||||
|
return (
|
||||||
|
<Box
|
||||||
|
// height={"100vh"}
|
||||||
|
backgroundColor={"#000"}
|
||||||
|
>
|
||||||
|
<Container
|
||||||
|
maxW="container.xl"
|
||||||
|
textAlign={"center"}
|
||||||
|
// display={"grid"}
|
||||||
|
placeContent={"center"}
|
||||||
|
>
|
||||||
|
<Text
|
||||||
|
as={"h2"}
|
||||||
|
paddingTop={"2rem"}
|
||||||
|
fontWeight={700}
|
||||||
|
fontSize={"40px"}
|
||||||
|
textTransform={"capitalize"}
|
||||||
|
color={"#fff"}
|
||||||
|
sx={{
|
||||||
|
"@media (max-width: 1024px)": {},
|
||||||
|
"@media (max-width: 600px)": {
|
||||||
|
fontSize: "28px",
|
||||||
|
},
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{SubnetContent.heading}
|
||||||
|
</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"}
|
||||||
|
/>
|
||||||
|
|
||||||
|
<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>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default Subnets;
|
||||||
73
src/components/HomePage/WhitePaper.jsx
Normal file
73
src/components/HomePage/WhitePaper.jsx
Normal file
@@ -0,0 +1,73 @@
|
|||||||
|
import { Box, Button, Container, Text } from "@chakra-ui/react";
|
||||||
|
import banner from "../../assets/images/whitePaperBg.png";
|
||||||
|
|
||||||
|
const SectionContent = {
|
||||||
|
heading: `The Rubix White paper`,
|
||||||
|
subContent: `Discover the endless potential of how the Rubix protocol can be used.`,
|
||||||
|
btnContent: `Click to Download`,
|
||||||
|
};
|
||||||
|
|
||||||
|
const WhitePaper = () => {
|
||||||
|
return (
|
||||||
|
<Box
|
||||||
|
height={"50vh"}
|
||||||
|
backgroundImage={`url(${banner})`}
|
||||||
|
backgroundSize={"cover"}
|
||||||
|
backgroundRepeat={"no-repeat"}
|
||||||
|
>
|
||||||
|
<Text
|
||||||
|
as={"h2"}
|
||||||
|
paddingTop={"2rem"}
|
||||||
|
paddingBottom={"2rem"}
|
||||||
|
fontWeight={700}
|
||||||
|
fontSize={"40px"}
|
||||||
|
textAlign={"center"}
|
||||||
|
textTransform={"capitalize"}
|
||||||
|
color={"#fff"}
|
||||||
|
sx={{
|
||||||
|
"@media (max-width: 1024px)": {},
|
||||||
|
"@media (max-width: 600px)": {
|
||||||
|
fontSize: "28px",
|
||||||
|
},
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{SectionContent.heading}
|
||||||
|
</Text>
|
||||||
|
<Container
|
||||||
|
maxW="container.sm"
|
||||||
|
textAlign={"center"}
|
||||||
|
display={"grid"}
|
||||||
|
placeContent={"center"}
|
||||||
|
height={"30vh"}
|
||||||
|
paddingBottom={"3rem"}
|
||||||
|
>
|
||||||
|
<Text
|
||||||
|
color={"#E4E4E4"}
|
||||||
|
fontSize={"22px"}
|
||||||
|
marginBottom={"2rem"}
|
||||||
|
fontFamily={"Poppins"}
|
||||||
|
>
|
||||||
|
{SectionContent.subContent}
|
||||||
|
</Text>
|
||||||
|
<Button
|
||||||
|
fontSize={"20px"}
|
||||||
|
minW={"284px"}
|
||||||
|
minH={"60px"}
|
||||||
|
fontFamily={"Poppins"}
|
||||||
|
backgroundColor={"transparent"}
|
||||||
|
border={"1px solid #fff"}
|
||||||
|
color={"#fff"}
|
||||||
|
fontWeight={"400"}
|
||||||
|
margin={"0 auto"}
|
||||||
|
_hover={{
|
||||||
|
backgroundColor: "transparent",
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{SectionContent.btnContent}
|
||||||
|
</Button>
|
||||||
|
</Container>
|
||||||
|
</Box>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default WhitePaper;
|
||||||
7
src/components/LearnPage/LearnBanner.jsx
Normal file
7
src/components/LearnPage/LearnBanner.jsx
Normal file
@@ -0,0 +1,7 @@
|
|||||||
|
import { Heading } from "@chakra-ui/react";
|
||||||
|
|
||||||
|
const LearnBanner = () => {
|
||||||
|
return <Heading>The spectacle before us was indeed sublime.</Heading>;
|
||||||
|
};
|
||||||
|
|
||||||
|
export default LearnBanner;
|
||||||
51
src/components/NavBar/NavBar.jsx
Normal file
51
src/components/NavBar/NavBar.jsx
Normal file
@@ -0,0 +1,51 @@
|
|||||||
|
/* eslint-disable no-unused-vars */
|
||||||
|
import { Box } from "@chakra-ui/react";
|
||||||
|
import { Outlet, Link, useLocation } from "react-router-dom";
|
||||||
|
|
||||||
|
const NavBar = () => {
|
||||||
|
const location = useLocation();
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
<Box
|
||||||
|
display="flex"
|
||||||
|
color={"#fff"}
|
||||||
|
justifyContent={"space-around"}
|
||||||
|
alignItems={"center"}
|
||||||
|
backgroundColor={"transparent"}
|
||||||
|
boxShadow={"0px 0px 4px 0px rgba(0, 0, 0, 0.25)"}
|
||||||
|
position={"fixed"}
|
||||||
|
zIndex={"999"}
|
||||||
|
width={"100%"}
|
||||||
|
top={"0px"}
|
||||||
|
padding={"5px"}
|
||||||
|
>
|
||||||
|
<Link to="/">
|
||||||
|
<Box
|
||||||
|
display={"flex"}
|
||||||
|
alignItems={"baseline"}
|
||||||
|
justifyContent={"center"}
|
||||||
|
>
|
||||||
|
<h1>Rubix</h1>
|
||||||
|
</Box>
|
||||||
|
</Link>
|
||||||
|
|
||||||
|
<Box
|
||||||
|
display={"flex"}
|
||||||
|
gap={"49px"}
|
||||||
|
alignItems={"center"}
|
||||||
|
sx={{
|
||||||
|
"@media (max-width: 1024px)": {
|
||||||
|
gap: "22px",
|
||||||
|
},
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<Link to="/">Homepage</Link>
|
||||||
|
<Link to="/LearnPage">Learn</Link>
|
||||||
|
</Box>
|
||||||
|
</Box>
|
||||||
|
<Outlet />
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default NavBar;
|
||||||
60
src/components/SubnetsComponent/Component1.jsx
Normal file
60
src/components/SubnetsComponent/Component1.jsx
Normal file
@@ -0,0 +1,60 @@
|
|||||||
|
import { Box, Button, Image, Text, Grid, GridItem } from "@chakra-ui/react";
|
||||||
|
import { Container } from "@chakra-ui/react";
|
||||||
|
import {
|
||||||
|
List,
|
||||||
|
ListItem,
|
||||||
|
ListIcon,
|
||||||
|
OrderedList,
|
||||||
|
UnorderedList,
|
||||||
|
} from "@chakra-ui/react";
|
||||||
|
import vector1 from "../../assets/images/Vector1.png";
|
||||||
|
|
||||||
|
const Component1 = () => {
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
<Box display={"flex"} position={"absolute"} top={"-70px"}>
|
||||||
|
<Button
|
||||||
|
position={"relative"}
|
||||||
|
background={"transparent"}
|
||||||
|
width={"165px"}
|
||||||
|
height={"57px"}
|
||||||
|
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",
|
||||||
|
}}
|
||||||
|
_hover={{
|
||||||
|
background: "transparent",
|
||||||
|
width: "165px",
|
||||||
|
height: "57px",
|
||||||
|
borderRadius: "28.5px",
|
||||||
|
color: "#fff",
|
||||||
|
border: "1px solid #A5A5A5",
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
P2P
|
||||||
|
</Button>
|
||||||
|
</Box>
|
||||||
|
<UnorderedList color={"#E1E1E1"}>
|
||||||
|
<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>
|
||||||
|
<ListItem>
|
||||||
|
High scalability, Partition tolerance and portability
|
||||||
|
</ListItem>
|
||||||
|
</UnorderedList>
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default Component1;
|
||||||
57
src/components/SubnetsComponent/Component2.jsx
Normal file
57
src/components/SubnetsComponent/Component2.jsx
Normal file
@@ -0,0 +1,57 @@
|
|||||||
|
/* eslint-disable no-unused-vars */
|
||||||
|
import { Box, Button, Image, Text, Grid, GridItem } from "@chakra-ui/react";
|
||||||
|
import { Container } from "@chakra-ui/react";
|
||||||
|
import {
|
||||||
|
List,
|
||||||
|
ListItem,
|
||||||
|
ListIcon,
|
||||||
|
OrderedList,
|
||||||
|
UnorderedList,
|
||||||
|
} from "@chakra-ui/react";
|
||||||
|
import vector2 from "../../assets/images/Vector2.png";
|
||||||
|
|
||||||
|
const Component2 = () => {
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
<Box display={"flex"} position={"absolute"} top={"-70px"}>
|
||||||
|
<Button
|
||||||
|
position={"relative"}
|
||||||
|
background={"transparent"}
|
||||||
|
textTransform={"uppercase"}
|
||||||
|
width={"165px"}
|
||||||
|
height={"57px"}
|
||||||
|
borderRadius={"28.5px"}
|
||||||
|
color={"#fff"}
|
||||||
|
border={"1px solid #A5A5A5"}
|
||||||
|
_after={{
|
||||||
|
content: "''",
|
||||||
|
position: "absolute",
|
||||||
|
backgroundImage: `url(${vector2})`,
|
||||||
|
backgroundRepeat: "no-repeat",
|
||||||
|
width: "340px",
|
||||||
|
height: "100%",
|
||||||
|
left: "165px",
|
||||||
|
top: "-10px",
|
||||||
|
}}
|
||||||
|
_hover={{
|
||||||
|
background: "transparent",
|
||||||
|
width: "165px",
|
||||||
|
height: "57px",
|
||||||
|
borderRadius: "28.5px",
|
||||||
|
color: "#fff",
|
||||||
|
border: "1px solid #A5A5A5",
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
Easier
|
||||||
|
</Button>
|
||||||
|
</Box>
|
||||||
|
<UnorderedList color={"#E1E1E1"}>
|
||||||
|
<ListItem>Leverage own infrastructure for block space</ListItem>
|
||||||
|
<ListItem>Smart contracts in Rust , GoLang and C/C++</ListItem>
|
||||||
|
<ListItem>WASM compiler for smooth code migration</ListItem>
|
||||||
|
</UnorderedList>
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default Component2;
|
||||||
73
src/components/SubnetsComponent/Component3.jsx
Normal file
73
src/components/SubnetsComponent/Component3.jsx
Normal file
@@ -0,0 +1,73 @@
|
|||||||
|
/* eslint-disable no-unused-vars */
|
||||||
|
import { Box, Button, Image, Text, Grid, GridItem } from "@chakra-ui/react";
|
||||||
|
import { Container } from "@chakra-ui/react";
|
||||||
|
import {
|
||||||
|
List,
|
||||||
|
ListItem,
|
||||||
|
ListIcon,
|
||||||
|
OrderedList,
|
||||||
|
UnorderedList,
|
||||||
|
} from "@chakra-ui/react";
|
||||||
|
import vector3 from "../../assets/images/Vector3.png";
|
||||||
|
|
||||||
|
const Component3 = () => {
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
<Box
|
||||||
|
display={"flex"}
|
||||||
|
position={"absolute"}
|
||||||
|
top={"-70px"}
|
||||||
|
justifyContent={"flex-end"}
|
||||||
|
width={"100%"}
|
||||||
|
>
|
||||||
|
<Button
|
||||||
|
position={"relative"}
|
||||||
|
background={"transparent"}
|
||||||
|
textTransform={"uppercase"}
|
||||||
|
width={"165px"}
|
||||||
|
height={"57px"}
|
||||||
|
borderRadius={"28.5px"}
|
||||||
|
color={"#fff"}
|
||||||
|
border={"1px solid #A5A5A5"}
|
||||||
|
_before={{
|
||||||
|
content: "''",
|
||||||
|
position: "absolute",
|
||||||
|
backgroundImage: `url(${vector3})`,
|
||||||
|
backgroundRepeat: "no-repeat",
|
||||||
|
width: "155px",
|
||||||
|
height: "100px",
|
||||||
|
left: "-155px",
|
||||||
|
top: "-40px",
|
||||||
|
}}
|
||||||
|
_hover={{
|
||||||
|
background: "transparent",
|
||||||
|
width: "165px",
|
||||||
|
height: "57px",
|
||||||
|
borderRadius: "28.5px",
|
||||||
|
color: "#fff",
|
||||||
|
border: "1px solid #A5A5A5",
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
cheaper
|
||||||
|
</Button>
|
||||||
|
</Box>
|
||||||
|
<Box
|
||||||
|
display={"flex"}
|
||||||
|
flexDirection={"column"}
|
||||||
|
alignItems={"end"}
|
||||||
|
width={"552px"}
|
||||||
|
>
|
||||||
|
<UnorderedList color={"#E1E1E1"}>
|
||||||
|
<ListItem>No GAS fees</ListItem>
|
||||||
|
<ListItem>Incremental and modular infrastructure ask</ListItem>
|
||||||
|
<ListItem>
|
||||||
|
No expensive re training of development <br />
|
||||||
|
resources
|
||||||
|
</ListItem>
|
||||||
|
</UnorderedList>
|
||||||
|
</Box>
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default Component3;
|
||||||
75
src/components/SubnetsComponent/Component4.jsx
Normal file
75
src/components/SubnetsComponent/Component4.jsx
Normal file
@@ -0,0 +1,75 @@
|
|||||||
|
/* eslint-disable no-unused-vars */
|
||||||
|
import { Box, Button, Image, Text, Grid, GridItem } from "@chakra-ui/react";
|
||||||
|
import { Container } from "@chakra-ui/react";
|
||||||
|
import {
|
||||||
|
List,
|
||||||
|
ListItem,
|
||||||
|
ListIcon,
|
||||||
|
OrderedList,
|
||||||
|
UnorderedList,
|
||||||
|
} from "@chakra-ui/react";
|
||||||
|
import vector4 from "../../assets/images/Vector4.png";
|
||||||
|
|
||||||
|
const Component4 = () => {
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
<Box
|
||||||
|
display={"flex"}
|
||||||
|
position={"absolute"}
|
||||||
|
top={"-70px"}
|
||||||
|
justifyContent={"flex-end"}
|
||||||
|
width={"100%"}
|
||||||
|
>
|
||||||
|
<Button
|
||||||
|
position={"relative"}
|
||||||
|
background={"transparent"}
|
||||||
|
width={"165px"}
|
||||||
|
height={"57px"}
|
||||||
|
borderRadius={"28.5px"}
|
||||||
|
color={"#fff"}
|
||||||
|
border={"1px solid #A5A5A5"}
|
||||||
|
textTransform={"uppercase"}
|
||||||
|
_after={{
|
||||||
|
content: "''",
|
||||||
|
position: "absolute",
|
||||||
|
backgroundImage: `url(${vector4})`,
|
||||||
|
backgroundRepeat: "no-repeat",
|
||||||
|
width: "155px",
|
||||||
|
height: "100%",
|
||||||
|
left: "-155px",
|
||||||
|
top: "28px",
|
||||||
|
}}
|
||||||
|
_hover={{
|
||||||
|
background: "transparent",
|
||||||
|
width: "165px",
|
||||||
|
height: "57px",
|
||||||
|
borderRadius: "28.5px",
|
||||||
|
color: "#fff",
|
||||||
|
border: "1px solid #A5A5A5",
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
Self Sovereign
|
||||||
|
</Button>
|
||||||
|
</Box>
|
||||||
|
<Box
|
||||||
|
display={"flex"}
|
||||||
|
flexDirection={"column"}
|
||||||
|
alignItems={"end"}
|
||||||
|
width={"565px"}
|
||||||
|
>
|
||||||
|
<UnorderedList color={"#E1E1E1"}>
|
||||||
|
<ListItem>
|
||||||
|
Permissioned subnets with no oracles and <br /> intermediaries
|
||||||
|
</ListItem>
|
||||||
|
<ListItem>INo block space ransom</ListItem>
|
||||||
|
<ListItem>
|
||||||
|
Zero risk of transactions being blocked out of <br />
|
||||||
|
chain.
|
||||||
|
</ListItem>
|
||||||
|
</UnorderedList>
|
||||||
|
</Box>
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default Component4;
|
||||||
18
src/components/Theme/Fonts.jsx
Normal file
18
src/components/Theme/Fonts.jsx
Normal file
@@ -0,0 +1,18 @@
|
|||||||
|
import { Global } from "@emotion/react";
|
||||||
|
|
||||||
|
const Fonts = () => (
|
||||||
|
<Global
|
||||||
|
styles={`
|
||||||
|
@font-face {
|
||||||
|
font-family: 'Mona-Sans';
|
||||||
|
font-style: normal;
|
||||||
|
font-weight: normal;
|
||||||
|
font-display: swap;
|
||||||
|
src: url('../../assets/fonts/Mona-Sans-Regular.woff2') format('woff2');
|
||||||
|
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
|
||||||
|
}
|
||||||
|
`}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
|
||||||
|
export default Fonts;
|
||||||
19
src/components/Theme/Theme.jsx
Normal file
19
src/components/Theme/Theme.jsx
Normal file
@@ -0,0 +1,19 @@
|
|||||||
|
import { extendTheme } from "@chakra-ui/react";
|
||||||
|
import "@fontsource/poppins";
|
||||||
|
|
||||||
|
const theme = extendTheme({
|
||||||
|
fonts: {
|
||||||
|
body: `'Mona-Sans', sans-serif`,
|
||||||
|
p: `Poppins`,
|
||||||
|
},
|
||||||
|
styles: {
|
||||||
|
global: () => ({
|
||||||
|
body: {
|
||||||
|
// marginTop: { lg: "35px", md: "35px", base: "35px" },
|
||||||
|
boxSizing: "border-box",
|
||||||
|
},
|
||||||
|
}),
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
export default theme;
|
||||||
11
src/index.css
Normal file
11
src/index.css
Normal file
@@ -0,0 +1,11 @@
|
|||||||
|
@font-face {
|
||||||
|
font-family: "Mona Sans";
|
||||||
|
src: url("Mona-Sans.woff2") format("woff2 supports variations"),
|
||||||
|
url("Mona-Sans.woff2") format("woff2-variations");
|
||||||
|
font-weight: 200 900;
|
||||||
|
font-stretch: 75% 125%;
|
||||||
|
}
|
||||||
|
|
||||||
|
html {
|
||||||
|
font-family: "Mona Sans";
|
||||||
|
}
|
||||||
16
src/main.jsx
Normal file
16
src/main.jsx
Normal file
@@ -0,0 +1,16 @@
|
|||||||
|
import React from "react";
|
||||||
|
import ReactDOM from "react-dom/client";
|
||||||
|
import App from "./App.jsx";
|
||||||
|
import "./index.css";
|
||||||
|
import { ChakraProvider } from "@chakra-ui/react";
|
||||||
|
import theme from "./components/Theme/Theme.jsx";
|
||||||
|
import Fonts from "./components/Theme/Fonts.jsx";
|
||||||
|
|
||||||
|
ReactDOM.createRoot(document.getElementById("root")).render(
|
||||||
|
<React.StrictMode>
|
||||||
|
<ChakraProvider theme={theme}>
|
||||||
|
<Fonts />
|
||||||
|
<App />
|
||||||
|
</ChakraProvider>
|
||||||
|
</React.StrictMode>
|
||||||
|
);
|
||||||
21
src/pages/HomePage.jsx
Normal file
21
src/pages/HomePage.jsx
Normal file
@@ -0,0 +1,21 @@
|
|||||||
|
import Client from "../components/HomePage/Client";
|
||||||
|
import HomeBanner from "../components/HomePage/HomeBanner";
|
||||||
|
import Resources from "../components/HomePage/Resources";
|
||||||
|
import Stats from "../components/HomePage/Stats";
|
||||||
|
import Subnets from "../components/HomePage/Subnets";
|
||||||
|
import WhitePaper from "../components/HomePage/WhitePaper";
|
||||||
|
|
||||||
|
const HomePage = () => {
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
<HomeBanner />
|
||||||
|
<Subnets />
|
||||||
|
<Stats />
|
||||||
|
<WhitePaper />
|
||||||
|
<Client />
|
||||||
|
<Resources />
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default HomePage;
|
||||||
7
src/pages/LearnPage.jsx
Normal file
7
src/pages/LearnPage.jsx
Normal file
@@ -0,0 +1,7 @@
|
|||||||
|
import LearnBanner from "../components/LearnPage/LearnBanner";
|
||||||
|
|
||||||
|
const LearnPage = () => {
|
||||||
|
return <LearnBanner />;
|
||||||
|
};
|
||||||
|
|
||||||
|
export default LearnPage;
|
||||||
7
vite.config.js
Normal file
7
vite.config.js
Normal file
@@ -0,0 +1,7 @@
|
|||||||
|
import { defineConfig } from 'vite'
|
||||||
|
import react from '@vitejs/plugin-react-swc'
|
||||||
|
|
||||||
|
// https://vitejs.dev/config/
|
||||||
|
export default defineConfig({
|
||||||
|
plugins: [react()],
|
||||||
|
})
|
||||||
Reference in New Issue
Block a user