├── public ├── logo.jpg ├── innovator-04.jpeg ├── star-green.svg ├── abstract-01.svg ├── star-black-2.svg ├── star-black.svg ├── vite.svg ├── innovative-bg.svg ├── innovative-01.svg ├── polkadot-bg.svg ├── polkadot-bg-mobile.svg ├── innovative-03.svg ├── innovative-02.svg ├── logo.svg ├── innovator-02.svg └── innovator-03.svg ├── postcss.config.js ├── src ├── assets │ ├── fonts │ │ ├── Inter-Black.woff2 │ │ ├── Inter-Bold.woff2 │ │ ├── Inter-Light.woff2 │ │ ├── Inter-Thin.woff2 │ │ ├── Inter-Medium.woff2 │ │ ├── Inter-Regular.woff2 │ │ ├── Inter-ExtraBold.woff2 │ │ ├── Inter-ExtraLight.woff2 │ │ └── Inter-SemiBold.woff2 │ └── data │ │ ├── tools.json │ │ └── innovative-slider.json ├── main.jsx ├── components │ ├── common │ │ ├── InnovativeLinks.jsx │ │ ├── SocialMedia.jsx │ │ ├── InnovativeBox.jsx │ │ ├── HeaderLinks.jsx │ │ ├── helper.jsx │ │ ├── TeamBox.jsx │ │ ├── Footer.jsx │ │ ├── Header.jsx │ │ └── Icon.jsx │ ├── Innovators.jsx │ ├── InnovativeTools.jsx │ ├── Banner.jsx │ ├── PolkadotOffer.jsx │ └── CommunityDriven.jsx ├── pages │ └── Homepage.jsx ├── App.css ├── App.jsx └── index.css ├── vite.config.js ├── .gitignore ├── index.html ├── README.md ├── .eslintrc.cjs ├── tailwind.config.js └── package.json /public/logo.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/BoredApe8461/new-website/HEAD/public/logo.jpg -------------------------------------------------------------------------------- /public/innovator-04.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/BoredApe8461/new-website/HEAD/public/innovator-04.jpeg -------------------------------------------------------------------------------- /postcss.config.js: -------------------------------------------------------------------------------- 1 | export default { 2 | plugins: { 3 | tailwindcss: {}, 4 | autoprefixer: {}, 5 | }, 6 | } 7 | -------------------------------------------------------------------------------- /src/assets/fonts/Inter-Black.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/BoredApe8461/new-website/HEAD/src/assets/fonts/Inter-Black.woff2 -------------------------------------------------------------------------------- /src/assets/fonts/Inter-Bold.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/BoredApe8461/new-website/HEAD/src/assets/fonts/Inter-Bold.woff2 -------------------------------------------------------------------------------- /src/assets/fonts/Inter-Light.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/BoredApe8461/new-website/HEAD/src/assets/fonts/Inter-Light.woff2 -------------------------------------------------------------------------------- /src/assets/fonts/Inter-Thin.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/BoredApe8461/new-website/HEAD/src/assets/fonts/Inter-Thin.woff2 -------------------------------------------------------------------------------- /src/assets/fonts/Inter-Medium.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/BoredApe8461/new-website/HEAD/src/assets/fonts/Inter-Medium.woff2 -------------------------------------------------------------------------------- /src/assets/fonts/Inter-Regular.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/BoredApe8461/new-website/HEAD/src/assets/fonts/Inter-Regular.woff2 -------------------------------------------------------------------------------- /src/assets/fonts/Inter-ExtraBold.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/BoredApe8461/new-website/HEAD/src/assets/fonts/Inter-ExtraBold.woff2 -------------------------------------------------------------------------------- /src/assets/fonts/Inter-ExtraLight.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/BoredApe8461/new-website/HEAD/src/assets/fonts/Inter-ExtraLight.woff2 -------------------------------------------------------------------------------- /src/assets/fonts/Inter-SemiBold.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/BoredApe8461/new-website/HEAD/src/assets/fonts/Inter-SemiBold.woff2 -------------------------------------------------------------------------------- /vite.config.js: -------------------------------------------------------------------------------- 1 | import { defineConfig } from 'vite' 2 | import react from '@vitejs/plugin-react' 3 | 4 | // https://vitejs.dev/config/ 5 | export default defineConfig({ 6 | plugins: [react()], 7 | }) 8 | -------------------------------------------------------------------------------- /public/star-green.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /public/abstract-01.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /public/star-black-2.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | -------------------------------------------------------------------------------- /public/star-black.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # Logs 2 | logs 3 | *.log 4 | npm-debug.log* 5 | yarn-debug.log* 6 | yarn-error.log* 7 | pnpm-debug.log* 8 | lerna-debug.log* 9 | 10 | node_modules 11 | dist 12 | dist-ssr 13 | *.local 14 | 15 | # Editor directories and files 16 | .vscode/* 17 | !.vscode/extensions.json 18 | .idea 19 | .DS_Store 20 | *.suo 21 | *.ntvs* 22 | *.njsproj 23 | *.sln 24 | *.sw? 25 | .vercel 26 | -------------------------------------------------------------------------------- /src/main.jsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import ReactDOM from "react-dom/client"; 3 | import App from "./App.jsx"; 4 | import "./index.css"; 5 | import { BrowserRouter } from "react-router-dom"; 6 | 7 | ReactDOM.createRoot(document.getElementById("root")).render( 8 | 9 | 10 | 11 | 12 | 13 | ); 14 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | RegionX 8 | 9 | 10 |
11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /src/components/common/InnovativeLinks.jsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | 3 | const InnovativeLinks = ({ data }) => { 4 | return ( 5 | onPress(e)} 7 | href={`#${data.id}`} 8 | className="innovative-text" 9 | > 10 |
11 | {data.title} 12 |
13 | 14 | ); 15 | }; 16 | 17 | export default InnovativeLinks; 18 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # React + Vite 2 | 3 | This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules. 4 | 5 | Currently, two official plugins are available: 6 | 7 | - [@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 8 | - [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh 9 | -------------------------------------------------------------------------------- /src/components/common/SocialMedia.jsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { socialMedialinks } from "./helper"; 3 | 4 | const SocialMedia = () => { 5 | return ( 6 | <> 7 | {socialMedialinks.map((link, index) => ( 8 |
  • 9 | 10 | {link.icon} 11 | 12 |
    • 13 | ))} 14 | 15 | ); 16 | }; 17 | 18 | export default SocialMedia; 19 | -------------------------------------------------------------------------------- /.eslintrc.cjs: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | root: true, 3 | env: { browser: true, es2020: true }, 4 | extends: [ 5 | 'eslint:recommended', 6 | 'plugin:react/recommended', 7 | 'plugin:react/jsx-runtime', 8 | 'plugin:react-hooks/recommended', 9 | ], 10 | ignorePatterns: ['dist', '.eslintrc.cjs'], 11 | parserOptions: { ecmaVersion: 'latest', sourceType: 'module' }, 12 | settings: { react: { version: '18.2' } }, 13 | plugins: ['react-refresh'], 14 | rules: { 15 | 'react/jsx-no-target-blank': 'off', 16 | 'react-refresh/only-export-components': [ 17 | 'warn', 18 | { allowConstantExport: true }, 19 | ], 20 | }, 21 | } 22 | -------------------------------------------------------------------------------- /tailwind.config.js: -------------------------------------------------------------------------------- 1 | /** @type {import('tailwindcss').Config} */ 2 | export default { 3 | content: ["./index.html", "./src/**/*.{js,ts,jsx,tsx}"], 4 | theme: { 5 | fontFamily: { 6 | montserrat: ["Montserrat", "sans-serif"], 7 | inter: ["Inter", "sans-serif"], 8 | }, 9 | extend: { 10 | colors: { 11 | primary: "#0CC184", 12 | "slate-500": "#000926", 13 | "slate-600": "#0D0E14", 14 | "slate-700": "#F2F2F0", 15 | "slate-900": "#D9E0EC", 16 | }, 17 | screens: { 18 | "3xl": "1786px", 19 | // => @media (min-width: 1786px) { ... } 20 | }, 21 | }, 22 | }, 23 | plugins: [], 24 | }; 25 | -------------------------------------------------------------------------------- /src/pages/Homepage.jsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import Banner from "../components/Banner"; 3 | import Footer from "../components/common/Footer"; 4 | import Header from "../components/common/Header"; 5 | import CommunityDriven from "../components/CommunityDriven"; 6 | import InnovativeTool from "../components/InnovativeTools"; 7 | import Innovators from "../components/Innovators"; 8 | import PolkadotOffer from "../components/PolkadotOffer"; 9 | const Homepage = () => { 10 | return ( 11 | <> 12 |
    13 | 14 | 15 | 16 | 17 | 18 |
    20 | 21 | ); 22 | }; 23 | 24 | export default Homepage; 25 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "vite-react-starter", 3 | "private": true, 4 | "version": "0.0.0", 5 | "type": "module", 6 | "scripts": { 7 | "dev": "vite", 8 | "build": "vite build", 9 | "lint": "eslint . --ext js,jsx --report-unused-disable-directives --max-warnings 0", 10 | "preview": "vite preview" 11 | }, 12 | "dependencies": { 13 | "framer-motion": "^11.3.19", 14 | "locomotive-scroll": "^5.0.0-beta.13", 15 | "react": "^18.3.1", 16 | "react-dom": "^18.3.1", 17 | "react-router-dom": "^6.25.1", 18 | "react-slick": "^0.30.2", 19 | "react-ui-scrollspy": "^2.3.0", 20 | "slick-carousel": "^1.8.1" 21 | }, 22 | "devDependencies": { 23 | "@types/react": "^18.3.3", 24 | "@types/react-dom": "^18.3.0", 25 | "@vitejs/plugin-react": "^4.3.1", 26 | "autoprefixer": "^10.4.19", 27 | "eslint": "^8.57.0", 28 | "eslint-plugin-react": "^7.35.0", 29 | "eslint-plugin-react-hooks": "^4.6.2", 30 | "eslint-plugin-react-refresh": "^0.4.9", 31 | "postcss": "^8.4.39", 32 | "tailwindcss": "^3.4.6", 33 | "vite": "^5.3.4" 34 | } 35 | } 36 | -------------------------------------------------------------------------------- /src/components/common/InnovativeBox.jsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | 3 | const InnovativeBox = ({ item }) => { 4 | return ( 5 |
    9 |
    10 |

    11 | {item.title} 12 |

    13 |

    17 |
    18 |
    19 | 20 |
    21 |
    22 | ); 23 | }; 24 | 25 | export default InnovativeBox; 26 | -------------------------------------------------------------------------------- /src/App.css: -------------------------------------------------------------------------------- 1 | html, 2 | body { 3 | /* scroll-behavior: smooth; */ 4 | } 5 | .hero-white-layer { 6 | border-radius: 2005.774px; 7 | background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, #fff 50%); 8 | /* background: rgba(0, 0, 0, 0.414); */ 9 | } 10 | .left-line { 11 | width: 2px; 12 | height: 30px; 13 | border-radius: 10px; 14 | position: absolute; 15 | background: linear-gradient( 16 | 0deg, 17 | #262e46 0%, 18 | #283f4e 16.64%, 19 | #2b6b62 53.01%, 20 | #10c285 100% 21 | ); 22 | 23 | offset-path: path( 24 | "M1 0V282.471C1 318.25 37.6685 347.255 82.901 347.255H89.6458C142.86 347.255 186 381.377 186 423.47V527" 25 | ); 26 | } 27 | 28 | .right-line { 29 | width: 2px; 30 | height: 30px; 31 | border-radius: 10px; 32 | position: absolute; 33 | background: linear-gradient( 34 | 0deg, 35 | #262e46 0%, 36 | #283f4e 16.64%, 37 | #2b6b62 53.01%, 38 | #10c285 100% 39 | ); 40 | 41 | offset-path: path( 42 | "M186 527L186 244.529C186 208.75 149.331 179.745 104.099 179.745L97.3541 179.745C44.1397 179.745 0.999964 145.623 0.99996 103.53L0.999951 3.26241e-05" 43 | ); 44 | } 45 | -------------------------------------------------------------------------------- /src/components/common/HeaderLinks.jsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { links } from "./helper"; 3 | 4 | const HeaderLinks = ({ setIsLeftMenu, locomotiveRef }) => { 5 | const handleScroll = (url) => { 6 | setIsLeftMenu(false); 7 | setTimeout(() => { 8 | if (locomotiveRef.current) { 9 | locomotiveRef.current.scrollTo(url); 10 | } 11 | }, 100); 12 | }; 13 | 14 | const handleClick = (event, url) => { 15 | if (url.startsWith('#')) { 16 | event.preventDefault(); 17 | handleScroll(url); 18 | } 19 | }; 20 | 21 | return ( 22 | <> 23 | {links.map((link, index) => ( 24 |
  • 25 | handleClick(event, link.url)} 29 | className="md:inline-block block cursor-pointer leading-[16px] py-[6px] px-4 text-black text-sm font-medium no-underline hover:bg-primary hover:text-white rounded-[4px]" 30 | > 31 | {link.title} 32 | 33 |
    • 34 | ))} 35 | 36 | ); 37 | }; 38 | 39 | export default HeaderLinks; 40 | -------------------------------------------------------------------------------- /src/assets/data/tools.json: -------------------------------------------------------------------------------- 1 | [ 2 | { 3 | "id": "secondary_coretime_market", 4 | "title": "Secondary Coretime Market", 5 | "description": "A secondary Coretime market that enables developers and traders to easily buy and sell Coretime.", 6 | "image": "/innovative-02.svg" 7 | }, 8 | { 9 | "id": "coretime_hub", 10 | "title": "Coretime Hub", 11 | "description": "A central hub where users are able to assign and manage their Coretime and also easily access the marketplace.", 12 | "image": "/innovative-03.svg" 13 | }, 14 | { 15 | "id": "polkadot_weigher", 16 | "title": "Polkadot Weigher", 17 | "description": "Tool which provides parachain teams with the data necessary to track their Coretime utilization. Using this, they can easily determine their Coretime needs.", 18 | "image": "/innovative-04.svg" 19 | }, 20 | { 21 | "id": "cross_chain_regions", 22 | "title": "Cross-Chain Regions", 23 | "description": "RegionX offers a solution for transferring regions across chains. This enables the creation of a decentralized secondary Coretime marketplace.", 24 | "image": "/innovative-01.svg" 25 | } 26 | ] 27 | -------------------------------------------------------------------------------- /src/App.jsx: -------------------------------------------------------------------------------- 1 | import "./App.css"; 2 | 3 | import "slick-carousel/slick/slick.css"; 4 | import "slick-carousel/slick/slick-theme.css"; 5 | import { Route, Routes } from "react-router-dom"; 6 | import Homepage from "./pages/Homepage"; 7 | import LocomotiveScroll from "locomotive-scroll"; 8 | import Header from "./components/common/Header"; 9 | import { useEffect, useRef } from "react"; 10 | function App() { 11 | const locomotiveRef = useRef(null); 12 | 13 | useEffect(() => { 14 | locomotiveRef.current = new LocomotiveScroll({ 15 | el: document.querySelector("[data-scroll-container]"), 16 | smooth: true, 17 | }); 18 | 19 | return () => { 20 | if (locomotiveRef.current) { 21 | locomotiveRef.current.destroy(); 22 | } 23 | }; 24 | }, []); 25 | 26 | const stopScrolling = () => { 27 | if (locomotiveRef.current) { 28 | locomotiveRef.current.stop(); 29 | } 30 | }; 31 | const startScrolling = () => { 32 | if (locomotiveRef.current) { 33 | locomotiveRef.current.start(); 34 | } 35 | }; 36 | return ( 37 |
    38 |
    43 | 44 | 45 | } /> 46 | 47 |
    48 | ); 49 | } 50 | 51 | export default App; 52 | -------------------------------------------------------------------------------- /src/components/common/helper.jsx: -------------------------------------------------------------------------------- 1 | import { LinkedinIcon, MediumIcon, TwitterIcon } from "./Icon"; 2 | 3 | export const links = [ 4 | { 5 | id: 1, 6 | title: "Home", 7 | url: "#main", 8 | }, 9 | { 10 | id: 2, 11 | title: "Docs", 12 | url: "https://docs.regionx.tech", 13 | }, 14 | { 15 | id: 3, 16 | title: "Whitepaper", 17 | url: "https://github.com/RegionX-Labs/Docs/blob/main/RegionX-Core.pdf", 18 | }, 19 | { 20 | id: 3, 21 | title: "Team", 22 | url: "#team", 23 | }, 24 | ]; 25 | 26 | export const socialMedialinks = [ 27 | { 28 | id: 1, 29 | title: "Twitter", 30 | icon: , 31 | url: "https://x.com/RegionXLabs", 32 | }, 33 | { 34 | id: 3, 35 | title: "Medium", 36 | icon: , 37 | url: "https://medium.com/@regionx", 38 | }, 39 | { 40 | id: 2, 41 | title: "LinkedIn", 42 | icon: , 43 | url: "https://www.linkedin.com/company/regionx/", 44 | } 45 | ]; 46 | 47 | export const innovativeToolsLink = [ 48 | { 49 | title: "Secondary Coretime Market", 50 | id: "secondary_coretime_market", 51 | }, 52 | { 53 | title: "Coretime Hub", 54 | id: "coretime_hub", 55 | }, 56 | { 57 | title: "Polkadot Weigher", 58 | id: "polkadot_weigher", 59 | }, 60 | { 61 | title: "Cross-Chain Regions", 62 | id: "cross_chain_regions", 63 | }, 64 | ]; 65 | -------------------------------------------------------------------------------- /public/vite.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/components/common/TeamBox.jsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { LinkedinIcon } from "./Icon"; 3 | 4 | const TeamBox = ({ item }) => { 5 | return ( 6 |
    7 |
    8 |
    9 | 10 |
    11 |
    12 |

    13 | {item.title}{" "} 14 | 19 | 20 | 21 |

    22 |

    23 | {item.job} 24 |

    25 |
    26 |
    27 |

    28 | {item.description} 29 |

    30 |
    31 |
    32 |
    33 | ); 34 | }; 35 | 36 | export default TeamBox; 37 | -------------------------------------------------------------------------------- /public/innovative-bg.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | -------------------------------------------------------------------------------- /src/assets/data/innovative-slider.json: -------------------------------------------------------------------------------- 1 | [ 2 | { 3 | "title": "SERGEJ SAKAC", 4 | "job": "Core developer & Founder", 5 | "description": "Sergej is a member of the Polkadot Fellowship. He has been an external core contributor on substrate and polkadot for two years now. Sergej is also a recent Engineering alumni of the Polkadot Blockchain Academy (PBA) held in Berkeley.", 6 | "linkedin": "https://www.linkedin.com/in/sergej-sakac-334a47252/", 7 | "image": "/innovator-01.svg" 8 | }, 9 | { 10 | "title": "SERGEJ SAKAC SR.", 11 | "job": "COO", 12 | "description": "Sergej Sakac Sr. is an engineer with a master's degree and over 20 years of experience in organizational roles within the IT and engineering industries. He is responsible for the operational functions of the RegionX project.", 13 | "linkedin": "https://www.linkedin.com/in/sergej-sakac-617514a3/", 14 | "image": "/innovator-02.svg" 15 | }, 16 | { 17 | "title": "OLIVER LIM ", 18 | "job": "Full-stack developer", 19 | "description": "Oliver is a full stack blockchain developer with 2 years of Rust & Substrate development experience. He was involved in 3 projects granted by Web3 Foundation - Imbue network, Fair squares and the Dotflow. He worked with Sergej on the Dotflow application.", 20 | "linkedin": "#", 21 | "image": "/innovator-03.svg" 22 | }, 23 | { 24 | "title": "NATHANAEL LIU", 25 | "job": "Frontend developer", 26 | "description": "Nathan is a seasoned frontend developer with a rich background in blockchain development spanning over 5 years. Specializing in frontend development, he has left his mark on projects such as SushiSwap, TaoStats, DystopiaLabs, Based, and Bitcash.", 27 | "linkedin": "#", 28 | "image": "/innovator-04.jpeg" 29 | } 30 | ] -------------------------------------------------------------------------------- /src/components/Innovators.jsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import Slider from "react-slick"; 3 | import teamData from "../assets/data/innovative-slider.json"; 4 | import { ArrowLongLeftIcon, ArrowLongRightIcon } from "./common/Icon"; 5 | import TeamBox from "./common/TeamBox"; 6 | import StarGreenImg from "/star-green.svg"; 7 | 8 | const Innovators = () => { 9 | const settings = { 10 | dots: false, 11 | infinite: false, 12 | slidesToShow: 3.4, 13 | slidesToScroll: 1, 14 | speed: 500, 15 | nextArrow: ( 16 | 19 | ), 20 | prevArrow: ( 21 | 24 | ), 25 | initialSlide: 0, 26 | responsive: [ 27 | { 28 | breakpoint: 1281, 29 | settings: { 30 | slidesToShow: 2.2, 31 | slidesToScroll: 2, 32 | }, 33 | }, 34 | { 35 | breakpoint: 991, 36 | settings: { 37 | slidesToShow: 2.2, 38 | slidesToScroll: 1, 39 | }, 40 | }, 41 | { 42 | breakpoint: 767, 43 | settings: { 44 | slidesToShow: 1.2, 45 | slidesToScroll: 1, 46 | }, 47 | }, 48 | ], 49 | }; 50 | 51 | return ( 52 |
    56 |
    57 |
    58 | 63 |
    64 |

    65 | Meet the{" "} 66 | Team Behind 67 | RegionX 68 |

    69 |
    70 |
    71 |
    72 | 73 | {teamData.map((item, i) => ( 74 | 75 | ))} 76 | 77 |
    78 |
    79 |
    80 | ); 81 | }; 82 | 83 | export default Innovators; 84 | -------------------------------------------------------------------------------- /src/components/common/Footer.jsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import FooterLogo from "/footer-logo.svg"; 3 | import { ArrowCircularIcon, ExternalIcon } from "./Icon"; 4 | 5 | const Footer = () => { 6 | const handleScrollToTop = () => { 7 | window.scrollTo({ 8 | top: 0, 9 | behavior: "smooth", // Optional: smooth scrolling behavior 10 | }); 11 | }; 12 | return ( 13 | 75 | ); 76 | }; 77 | 78 | export default Footer; 79 | -------------------------------------------------------------------------------- /public/innovative-01.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | -------------------------------------------------------------------------------- /src/components/InnovativeTools.jsx: -------------------------------------------------------------------------------- 1 | import React, { useEffect, useRef, useState } from "react"; 2 | import InnovativeBg from "/innovative-bg.svg"; 3 | import ScrollSpy from "react-ui-scrollspy"; 4 | import tools from "../assets/data/tools.json"; 5 | import { innovativeToolsLink } from "./common/helper"; 6 | import InnovativeLinks from "./common/InnovativeLinks"; 7 | import InnovativeBox from "./common/InnovativeBox"; 8 | import { motion, useScroll, useTransform } from "framer-motion"; 9 | const InnovativeTool = () => { 10 | const [items, setItems] = useState([]); 11 | 12 | const [isFixed, setIsFixed] = useState(false); 13 | const myRef = useRef(null); 14 | const handleScroll = () => { 15 | const top = document.getElementById("innovators").offsetTop; 16 | if (window.scrollY >= myRef.current.offsetTop - 80) { 17 | setIsFixed(true); 18 | } else { 19 | setIsFixed(false); 20 | } 21 | 22 | if (window.scrollY > top - 250) { 23 | setIsFixed(false); 24 | } 25 | }; 26 | 27 | useEffect(() => { 28 | window.addEventListener("scroll", handleScroll); 29 | return () => { 30 | window.removeEventListener("scroll", handleScroll); 31 | }; 32 | }, []); 33 | 34 | useEffect(() => { 35 | setItems(tools); 36 | }, []); 37 | 38 | const containerRef = useRef(); 39 | const { scrollYProgress: startAnim } = useScroll({ 40 | target: containerRef, 41 | offset: ["start 95%", "start 80%"], 42 | }); 43 | 44 | const { scrollYProgress: scaleAnim } = useScroll({ 45 | target: containerRef, 46 | offset: ["start 80%", "start 68%"], 47 | }); 48 | const y = useTransform(startAnim, [0, 1], [200, 0]); 49 | const opacity = useTransform(startAnim, [0, 1], [0, 1]); 50 | const scale = useTransform(scaleAnim, [0, 1], [1.08, 1]); 51 | return ( 52 |
    53 |
    54 |
    55 |
    56 | 57 |
    58 |
    59 |

    60 | Built as a dedicated parachain 61 |

    62 |

    63 | Innovative Tools for Seamless Project Deployment on Polkadot 64 |

    65 |
    66 |
    67 |
    68 |
    72 |
    73 |
    80 |
    81 | {innovativeToolsLink.map((data, index) => ( 82 | 83 | ))} 84 |
    85 |
    86 |
    87 |
    88 | 89 | {items.map((item, i) => ( 90 | 91 | ))} 92 | 93 |
    94 |
    95 |
    96 |
    97 | ); 98 | }; 99 | 100 | export default InnovativeTool; 101 | -------------------------------------------------------------------------------- /src/index.css: -------------------------------------------------------------------------------- 1 | @import url("https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap"); 2 | @import url("https://fonts.googleapis.com/css2?family=Inter:wght@100..900&display=swap"); 3 | 4 | @tailwind base; 5 | @tailwind components; 6 | @tailwind utilities; 7 | 8 | @layer components { 9 | .community-main-text { 10 | @apply lg:text-[30px] lg:leading-[40px] md:text-[24px] md:leading-[30px] text-[18px] leading-[24px] font-inter lg:font-normal font-medium text-slate-500 lg:my-4 md:my-3 mt-[10px] mb-[5px]; 11 | } 12 | .community-para-text { 13 | @apply md:text-[18px] md:leading-[22px] text-sm leading-[18px] font-inter font-light md:text-black/50 text-black/70; 14 | } 15 | .community-main-box { 16 | @apply bg-slate-700 rounded-[12px] p-4 border-slate-900 xl:p-[80px] md:p-[30px]; 17 | } 18 | .innovative-text { 19 | @apply text-slate-600/40 md:text-base text-xs lg:block lg:mb-[8px] lg:bg-transparent lg:rounded-none lg:p-0 bg-[#F2F2F0] rounded-[36px] whitespace-nowrap py-2 px-4 inline-block; 20 | } 21 | .footer-link-heading { 22 | @apply text-[10px] leading-[14px] font-medium text-slate-900/60 uppercase; 23 | } 24 | .footer-links { 25 | @apply text-[18px] leading-[22px] font-medium text-white; 26 | } 27 | } 28 | @layer base { 29 | html, 30 | body { 31 | font-family: "Montserrat", sans-serif; 32 | scroll-padding-top: 80px; 33 | } 34 | .bg-linear-gradient-white:after { 35 | content: ""; 36 | background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, #ffffff 50%); 37 | transform: rotate(18deg); 38 | position: absolute; 39 | top: 268px; 40 | left: -110px; 41 | width: 2000px; 42 | height: 100%; 43 | } 44 | @media (max-width: 767px) { 45 | .container { 46 | max-width: 100% !important; 47 | } 48 | .bg-linear-gradient-white:after { 49 | background: linear-gradient( 50 | 180deg, 51 | rgba(255, 255, 255, 0) 0%, 52 | #ffffff 70% 53 | ); 54 | transform: none; 55 | top: 0; 56 | left: 0; 57 | } 58 | } 59 | } 60 | 61 | .flex-important { 62 | display: flex !important; 63 | } 64 | 65 | .slick-initialized .slick-slide { 66 | display: flex; 67 | height: auto; 68 | } 69 | 70 | .slick-track { 71 | display: flex; 72 | } 73 | .slick-next:before, 74 | .slick-prev:before { 75 | display: none; 76 | } 77 | .slick-next { 78 | right: 30px; 79 | } 80 | .slick-prev { 81 | left: 30px; 82 | } 83 | .slick-arrow { 84 | width: 60px; 85 | height: 60px; 86 | border-radius: 50%; 87 | display: flex !important; 88 | align-items: center; 89 | justify-content: center; 90 | background-color: #d9e0ec; 91 | z-index: 2; 92 | } 93 | .slick-arrow:hover { 94 | background-color: #d9e0ec; 95 | } 96 | .slick-arrow.slick-disabled { 97 | opacity: 0.5; 98 | } 99 | .slick-arrow.slick-disabled, 100 | .slick-arrow.slick-disabled:hover { 101 | background-color: transparent; 102 | } 103 | 104 | @media (max-width: 767px) { 105 | .slick-arrow { 106 | width: 40px; 107 | height: 40px; 108 | bottom: 100%; 109 | top: auto; 110 | margin-bottom: 10px; 111 | } 112 | .slick-prev { 113 | left: auto; 114 | right: 62px; 115 | } 116 | .slick-next { 117 | right: 15px; 118 | } 119 | } 120 | 121 | .gradient-border { 122 | background: linear-gradient( 123 | 180deg, 124 | rgba(13, 14, 20, 0.15) 0%, 125 | rgba(13, 14, 20, 0) 100% 126 | ); 127 | width: 2px; 128 | } 129 | 130 | .active-scroll-spy { 131 | position: relative; 132 | color: #000; 133 | transition: all 0.5s; 134 | background-color: #ffffff; 135 | } 136 | .active-scroll-spy:after { 137 | content: ""; 138 | position: absolute; 139 | top: 50%; 140 | left: -0.5px; 141 | transform: translateY(-50%); 142 | background-color: #0cc184; 143 | border-radius: 50%; 144 | width: 6px; 145 | height: 6px; 146 | } 147 | 148 | @media (max-width: 991px) { 149 | .active-scroll-spy { 150 | background-color: transparent; 151 | } 152 | .active-scroll-spy:after { 153 | display: none; 154 | } 155 | html, 156 | body { 157 | scroll-padding-top: 155px; 158 | } 159 | } 160 | 161 | @media (min-width: 2000px) { 162 | .container-custom { 163 | max-width: 1536px !important; 164 | margin: auto; 165 | padding: 0 24px; 166 | } 167 | } 168 | -------------------------------------------------------------------------------- /src/components/Banner.jsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { ArrowRightIcon } from "./common/Icon"; 3 | import SocialMedia from "./common/SocialMedia"; 4 | import { motion } from "framer-motion"; 5 | 6 | const Banner = () => { 7 | const varients = { 8 | initial: { y: 100, rotate: 10 }, 9 | animate: { y: 0, rotate: 0 }, 10 | }; 11 | return ( 12 |
    16 |
    17 |
    18 |
    19 |
    20 |

    21 |
    22 | 28 | We are making 29 | {" "} 30 |
    31 |
    32 | 38 | Web3 Accessible 39 | 40 |
    41 |

    42 |

    43 |

    44 | 50 | We provide you the tools to deploy and operate a decentralized 51 | {" "} 52 |
    53 |
    54 | 60 | project on Polkadot with minimal costs 61 | 62 |
    63 |

    64 |
    65 | 75 |
  • 76 | 86 |
    • 87 | 88 |     89 |
    90 |
    91 |
    92 |
    93 |
    94 | ); 95 | }; 96 | 97 | export default Banner; 98 | -------------------------------------------------------------------------------- /src/components/PolkadotOffer.jsx: -------------------------------------------------------------------------------- 1 | import { motion, useScroll, useTransform } from "framer-motion"; 2 | import React, { useRef } from "react"; 3 | 4 | const PolkadotOffer = () => { 5 | const containerRef = useRef(); 6 | const { scrollYProgress: startAnim } = useScroll({ 7 | target: containerRef, 8 | offset: ["start 95%", "start 80%"], 9 | }); 10 | 11 | const { scrollYProgress: scaleAnim } = useScroll({ 12 | target: containerRef, 13 | offset: ["start 80%", "start 68%"], 14 | }); 15 | const y = useTransform(startAnim, [0, 1], [100, 0]); 16 | const scale = useTransform(scaleAnim, [0, 1], [1.08, 1]); 17 | return ( 18 |
    19 |
    23 | 27 | 35 | 41 | 42 | 54 | 55 | 63 | 70 | 71 | 72 | 84 | 85 |
    86 |
    87 |
    88 |

    89 | What does Polkadot{" "} 90 | offer? 91 |

    92 |

    93 | Polkadot provides economic security to your project. With 94 | hundreds of validators scattered around the world it serves as 95 | a world computer on which projects can be deployed. With its 96 | architecture where the validators are split into cores, it can 97 | provide security to multiple projects in parallel.{" "} 98 |

    99 |
    100 |
    101 |
    102 |     103 |
    104 |
    105 | ); 106 | }; 107 | 108 | export default PolkadotOffer; 109 | -------------------------------------------------------------------------------- /src/components/common/Header.jsx: -------------------------------------------------------------------------------- 1 | import React, { useEffect, useState } from "react"; 2 | import Logo from "/logo.svg"; 3 | import { ArrowRightIcon, BarIcon } from "../common/Icon"; 4 | import HeaderLinks from "./HeaderLinks"; 5 | 6 | const Header = ({ locomotiveRef, startScrolling, stopScrolling }) => { 7 | const [isLeftMenu, setIsLeftMenu] = useState(false); 8 | const toggleLeftMenu = () => { 9 | setIsLeftMenu(!isLeftMenu); 10 | }; 11 | 12 | useEffect(() => { 13 | if (isLeftMenu) { 14 | stopScrolling(); 15 | } else { 16 | startScrolling(); 17 | } 18 | }, [isLeftMenu]); 19 | 20 | return ( 21 | <> 22 | 80 |
    85 |
      86 | 90 |
    • 91 | 101 |
      • 102 |
    103 |
    104 | {isLeftMenu && ( 105 |
    setIsLeftMenu(!isLeftMenu)} 107 | className="bg-black z-[31] md:hidden w-full h-full fixed top-0 left-0 bg-opacity-80" 108 | >
    109 | )} 110 | 111 | ); 112 | }; 113 | 114 | export default Header; 115 | -------------------------------------------------------------------------------- /public/polkadot-bg.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | -------------------------------------------------------------------------------- /public/polkadot-bg-mobile.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | -------------------------------------------------------------------------------- /public/innovative-03.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | -------------------------------------------------------------------------------- /src/components/CommunityDriven.jsx: -------------------------------------------------------------------------------- 1 | import React, { useRef } from "react"; 2 | import StarGreenImg from "/star-green.svg"; 3 | import { GoalIcon, LockIcon, StarIcon, UserGroupIcon } from "./common/Icon"; 4 | import { motion, useScroll, useTransform } from "framer-motion"; 5 | const CommunityDriven = () => { 6 | const containerRef = useRef(); 7 | const coreTimeRef = useRef(); 8 | const { scrollYProgress: startAnim } = useScroll({ 9 | target: containerRef, 10 | offset: ["start 95%", "start 80%"], 11 | }); 12 | 13 | const { scrollYProgress: scaleAnim } = useScroll({ 14 | target: containerRef, 15 | offset: ["start 80%", "start 68%"], 16 | }); 17 | const y = useTransform(startAnim, [0, 1], [200, 0]); 18 | const opacity = useTransform(startAnim, [0, 1], [0, 1]); 19 | const scale = useTransform(scaleAnim, [0, 1], [1.08, 1]); 20 | 21 | const { scrollYProgress: coretimeProgress } = useScroll({ 22 | target: coreTimeRef, 23 | offset: ["start 80%", "start 68%"], 24 | }); 25 | 26 | const { scrollYProgress: coretimeBoxProgress } = useScroll({ 27 | target: coreTimeRef, 28 | offset: ["start 60%", "start 50%"], 29 | }); 30 | const coretimeBoxY = useTransform(coretimeBoxProgress, [0, 1], [200, 0]); 31 | const CoretimeBoxOpacity = useTransform(coretimeBoxProgress, [0, 1], [0, 1]); 32 | 33 | const coretimeY = useTransform(coretimeProgress, [0, 1], [200, 0]); 34 | const CoretimeOpacity = useTransform(coretimeProgress, [0, 1], [0, 1]); 35 | return ( 36 |
    37 |
    38 |
    39 |
    40 |
    41 |
    42 |
    43 | 47 |

    48 | To deploy your project on Polkadot,{" "} 49 | 50 | you need to reserve 'Coretime' on one of its cores. 51 | {" "} 52 | Most projects don’t require nearly as much as an entire 53 | core allocated to them.{" "} 54 |

    55 |

    56 | With RegionX,{" "} 57 | 58 | we enable you to easily share a single core with others, 59 | {" "} 60 | significantly reducing deployment and operational costs. 61 |

    62 |     63 |
    64 |
    65 | 66 |
    67 |
    68 |
    69 | 74 |
    75 | 79 | Making Coretime procurement{" "} 80 | community driven 81 | 82 | 86 |
    87 |
    88 |
    89 | 90 | 91 | 92 |

    93 | Decentralized Governance 94 |

    95 |

    96 | RegionX is built in the form of a dedicated parachain deployed on Polkadot. It is fully governed by token holders. 97 |

    98 |
    99 |

    100 | It implements a hybrid governance model where protocol upgrades must be approved by DOT token holders, 101 | while the on-chain treasury is managed using the RegionX native token. 102 |

    103 |
    104 |
    105 |
    106 |
    107 | 108 | 109 | 110 |

    RegionX's Solution

    111 |

    112 | At RegionX, our goal is to make the Coretime procurement process decentralized and community-driven. 113 |

    114 |
    115 |

    116 | We are reintroducing the community component similar to what Polkadot initially had with the Parachain Slot Auction model. 117 |

    118 |
    119 |
    120 |
    121 |
    122 |
    123 |
    124 | 125 | 126 | 127 |

    128 | Limitations of Default Protocol 129 |

    130 |

    131 | Most projects deployed on Polkadot share the goal of being self-governing, decentralized autonomous entities. 132 |

    133 |
    134 |

    135 | By default, the core Polkadot protocol does not provide a way to procure Coretime in a decentralized manner 136 | that does not rely on a specific set of people to continue its operation on Polkadot. 137 |

    138 |
    139 |
    140 |
    141 |
    142 | 143 | 144 | 145 |

    146 | Community Participation Rewards 147 |

    148 |

    149 | Anyone can help a project in the Coretime procurement process and, depending on the project, 150 | be rewarded for doing so. 151 |

    152 |
    153 |
    154 |
    155 |     156 |
    157 |
    158 |
    159 | ); 160 | }; 161 | 162 | export default CommunityDriven; 163 | -------------------------------------------------------------------------------- /src/components/common/Icon.jsx: -------------------------------------------------------------------------------- 1 | export const MediumIcon = () => { 2 | return ( 3 | 10 | 14 | 15 | ); 16 | }; 17 | 18 | 19 | export const ArrowRightIcon = () => { 20 | return ( 21 | 28 | 29 | 30 | ); 31 | }; 32 | 33 | export const BarIcon = () => { 34 | return ( 35 | 42 | 46 | 47 | ); 48 | }; 49 | export const FlickerIcon = () => { 50 | return ( 51 | 58 | 62 | 63 | ); 64 | }; 65 | 66 | export const TwitterIcon = () => { 67 | return ( 68 | 75 | 79 | 80 | ); 81 | }; 82 | 83 | export const GoalIcon = (props) => { 84 | return ( 85 | 92 | 96 | 97 | ); 98 | }; 99 | 100 | export const LockIcon = (props) => { 101 | return ( 102 | 109 | 113 | 114 | ); 115 | }; 116 | 117 | export const UserGroupIcon = (props) => { 118 | return ( 119 | 126 | 130 | 131 | ); 132 | }; 133 | 134 | export const StarIcon = (props) => { 135 | return ( 136 | 143 | 149 | 150 | ); 151 | }; 152 | 153 | export const ExternalIcon = () => { 154 | return ( 155 | 162 | 166 | 167 | ); 168 | }; 169 | 170 | export const ArrowCircularIcon = () => { 171 | return ( 172 | 179 | 180 | 185 | 186 | ); 187 | }; 188 | 189 | export const LinkedinIcon = () => { 190 | return ( 191 | 198 | 202 | 203 | ); 204 | }; 205 | 206 | export const ArrowLongRightIcon = () => { 207 | return ( 208 | 215 | 220 | 221 | ); 222 | }; 223 | export const ArrowLongLeftIcon = () => { 224 | return ( 225 | 232 | 233 | 234 | ); 235 | }; 236 | -------------------------------------------------------------------------------- /public/innovative-02.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | 49 | 50 | 51 | 52 | 53 | 54 | -------------------------------------------------------------------------------- /public/logo.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | -------------------------------------------------------------------------------- /public/innovator-02.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | -------------------------------------------------------------------------------- /public/innovator-03.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | --------------------------------------------------------------------------------