initial commit
This commit is contained in:
roryjshelton
parent
58be43ac4a
commit
0f90868ecd
|
|
@ -0,0 +1,23 @@
|
|||
# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
|
||||
|
||||
# dependencies
|
||||
/node_modules
|
||||
/.pnp
|
||||
.pnp.js
|
||||
|
||||
# testing
|
||||
/coverage
|
||||
|
||||
# production
|
||||
/build
|
||||
|
||||
# misc
|
||||
.DS_Store
|
||||
.env.local
|
||||
.env.development.local
|
||||
.env.test.local
|
||||
.env.production.local
|
||||
|
||||
npm-debug.log*
|
||||
yarn-debug.log*
|
||||
yarn-error.log*
|
||||
|
|
@ -0,0 +1,14 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<title>Lume Web - Web3 for the masses</title>
|
||||
<meta charset="utf-8"/>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=5.0"/>
|
||||
<meta name="description" content="Lume Web - Web3 for the masses | Install the Lume Web3 Extension and have a 1-click gateway into the Web3 internet on Opera, Vivaldi, Edge, and Firefox.">
|
||||
<meta name="keywords" content="Web3 Extension, Lume Web, Web3">
|
||||
</head>
|
||||
<body>
|
||||
<div id="root"></div>
|
||||
<script type="module" src="./src/index.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
File diff suppressed because it is too large
Load Diff
|
|
@ -0,0 +1,43 @@
|
|||
{
|
||||
"name": "react-package",
|
||||
"scripts": {
|
||||
"start": "PORT=4321 parcel index.html && parcel watch index.html",
|
||||
"build": "parcel build index.html --public-url ./ --no-scope-hoist",
|
||||
"ssr": "node server/index.js"
|
||||
},
|
||||
"dependencies": {
|
||||
"@babel/preset-react": "^7.18.6",
|
||||
"@babel/register": "^7.21.0",
|
||||
"compression": "^1.7.4",
|
||||
"dynamic-react-grid": "^0.2.0",
|
||||
"express": "^4.18.2",
|
||||
"hamburger-react": "^2.5.0",
|
||||
"ignore-styles": "^5.0.1",
|
||||
"kill-port": "^2.0.1",
|
||||
"ngrok": "^4.3.3",
|
||||
"react": "18.2.0",
|
||||
"react-dom": "^18.2.0",
|
||||
"react-router-dom": "6.10.0",
|
||||
"typewriter-effect": "^2.19.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@babel/preset-env": "^7.21.4",
|
||||
"assert": "^2.0.0",
|
||||
"browserify-zlib": "^0.2.0",
|
||||
"browserslist": "4.21.5",
|
||||
"buffer": "^5.7.1",
|
||||
"compression-webpack-plugin": "^10.0.0",
|
||||
"crypto-browserify": "^3.12.0",
|
||||
"parcel": "2.8.3",
|
||||
"parcel-reporter-static-files-copy": "1.5.0",
|
||||
"path-browserify": "^1.0.1",
|
||||
"process": "^0.11.10",
|
||||
"punycode": "^1.4.1",
|
||||
"querystring-es3": "^0.2.1",
|
||||
"stream-browserify": "^3.0.0",
|
||||
"stream-http": "^3.2.0",
|
||||
"string_decoder": "^1.3.0",
|
||||
"url": "^0.11.0",
|
||||
"util": "^0.12.5"
|
||||
}
|
||||
}
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 3.8 KiB |
|
|
@ -0,0 +1,43 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<meta name="theme-color" content="#000000" />
|
||||
<meta
|
||||
name="description"
|
||||
content="Web site created using create-react-app"
|
||||
/>
|
||||
<link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
|
||||
<!--
|
||||
manifest.json provides metadata used when your web app is installed on a
|
||||
user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
|
||||
-->
|
||||
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
|
||||
<!--
|
||||
Notice the use of %PUBLIC_URL% in the tags above.
|
||||
It will be replaced with the URL of the `public` folder during the build.
|
||||
Only files inside the `public` folder can be referenced from the HTML.
|
||||
|
||||
Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
|
||||
work correctly both with client-side routing and a non-root public URL.
|
||||
Learn how to configure a non-root public URL by running `npm run build`.
|
||||
-->
|
||||
<title>React App</title>
|
||||
</head>
|
||||
<body>
|
||||
<noscript>You need to enable JavaScript to run this app.</noscript>
|
||||
<div id="root"></div>
|
||||
<!--
|
||||
This HTML file is a template.
|
||||
If you open it directly in the browser, you will see an empty page.
|
||||
|
||||
You can add webfonts, meta tags, or analytics to this file.
|
||||
The build step will place the bundled scripts into the <body> tag.
|
||||
|
||||
To begin the development, run `npm start` or `yarn start`.
|
||||
To create a production bundle, use `npm run build` or `yarn build`.
|
||||
-->
|
||||
</body>
|
||||
</html>
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 5.2 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 9.4 KiB |
|
|
@ -0,0 +1,25 @@
|
|||
{
|
||||
"short_name": "React App",
|
||||
"name": "Create React App Sample",
|
||||
"icons": [
|
||||
{
|
||||
"src": "favicon.ico",
|
||||
"sizes": "64x64 32x32 24x24 16x16",
|
||||
"type": "image/x-icon"
|
||||
},
|
||||
{
|
||||
"src": "logo192.png",
|
||||
"type": "image/png",
|
||||
"sizes": "192x192"
|
||||
},
|
||||
{
|
||||
"src": "logo512.png",
|
||||
"type": "image/png",
|
||||
"sizes": "512x512"
|
||||
}
|
||||
],
|
||||
"start_url": ".",
|
||||
"display": "standalone",
|
||||
"theme_color": "#000000",
|
||||
"background_color": "#ffffff"
|
||||
}
|
||||
|
|
@ -0,0 +1,3 @@
|
|||
# https://www.robotstxt.org/robotstxt.html
|
||||
User-agent: *
|
||||
Disallow:
|
||||
|
|
@ -0,0 +1,8 @@
|
|||
require("ignore-styles");
|
||||
|
||||
require("@babel/register")({
|
||||
ignore: [/(node_modules)/],
|
||||
presets: ["@babel/preset-env", "@babel/preset-react"],
|
||||
});
|
||||
|
||||
require("./server");
|
||||
|
|
@ -0,0 +1,32 @@
|
|||
import express from 'express'
|
||||
import fs from 'fs'
|
||||
import path from 'path'
|
||||
import React from 'react'
|
||||
import ReactDOMServer from 'react-dom/server'
|
||||
import {StaticRouter} from 'react-router-dom/server'
|
||||
import App from "../src/App"
|
||||
|
||||
const compression = require('compression')
|
||||
const app = express();
|
||||
|
||||
app.use(compression('^/$', (req, res) => {
|
||||
fs.readFile(path.resolve('./dist/index.html'), 'utf-8', (err, data) => {
|
||||
console.log (err, data)
|
||||
if (err) {
|
||||
console.err(err)
|
||||
return res.status(500).send('An error has occurred.')
|
||||
}
|
||||
const html = ReactDOMServer.renderToString(
|
||||
<StaticRouter location={req.url}>
|
||||
<App />
|
||||
</StaticRouter>
|
||||
);
|
||||
return res.send(data.replace('<div id="root"></div>', `<div id="root">${html}</div>`))
|
||||
})
|
||||
}));
|
||||
|
||||
app.use(express.static(path.resolve(__dirname, "..", "dist")))
|
||||
|
||||
app.listen(4321, () => {
|
||||
console.log("App launched");
|
||||
});
|
||||
|
|
@ -0,0 +1,23 @@
|
|||
import React from 'react'
|
||||
import Layout from './Layout'
|
||||
import Home from './components/P1 - home/home'
|
||||
import Vision from './components/P2 - vision/vision'
|
||||
import W3 from './components/P3 - w3/w3'
|
||||
import { BrowserRouter, Routes, Route } from 'react-router-dom';
|
||||
|
||||
function App() {
|
||||
return (
|
||||
<BrowserRouter>
|
||||
<Routes>
|
||||
<Route path="/" element={<Layout />}>
|
||||
<Route index element={<Home />} />
|
||||
<Route path="home" element={<Home />} />
|
||||
<Route path="vision" element={<Vision />} />
|
||||
<Route path="w3" element={<W3 />} />
|
||||
</Route>
|
||||
</Routes>
|
||||
</BrowserRouter>
|
||||
);
|
||||
}
|
||||
|
||||
export default App;
|
||||
|
|
@ -0,0 +1,14 @@
|
|||
import React from "react";
|
||||
import {Outlet} from "react-router-dom";
|
||||
import Navbar from "./components/navbar/Navbar";
|
||||
|
||||
const Layout = () => {
|
||||
return (
|
||||
<>
|
||||
<Navbar />
|
||||
<Outlet />
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default Layout;
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 1.8 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 968 B |
Binary file not shown.
|
After Width: | Height: | Size: 202 B |
Binary file not shown.
|
After Width: | Height: | Size: 434 B |
Binary file not shown.
|
After Width: | Height: | Size: 14 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.5 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.1 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 31 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.1 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.3 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 73 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.8 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1014 B |
Binary file not shown.
|
After Width: | Height: | Size: 3.7 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.2 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 327 KiB |
|
|
@ -0,0 +1,29 @@
|
|||
import React from 'react'
|
||||
import './CtoStyles.css'
|
||||
|
||||
function Cto() {
|
||||
return (
|
||||
<div className='cto-container'>
|
||||
<div className="cto-geometric-bg">
|
||||
<div className='cto-shadow'>
|
||||
<span id="cto"></span>
|
||||
<div className="shadowdrop">
|
||||
<h2>community-powered</h2>
|
||||
<h3 className='cto-bp'>Building a new world <wbr /> for your data</h3>
|
||||
<h4 className='left'>
|
||||
Right now, Lume has only one full-time developer and limited helper staff! We need help from developers, fundraisers, funders, and
|
||||
contributors to bring the new internet to the masses.</h4>
|
||||
<div className="cto-mini-bio">
|
||||
<div className='cto-info'>
|
||||
<h5 className='cto-name'>Derrick Hammer</h5>
|
||||
<h6 className='cto-title'>CTO</h6>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default Cto
|
||||
|
|
@ -0,0 +1,113 @@
|
|||
.cto-container {
|
||||
/* margin-block: 5vh; */
|
||||
width: 100%;
|
||||
transition: 0.5s;
|
||||
}
|
||||
|
||||
.cto-bp {
|
||||
padding-right: 0%;
|
||||
transition: 0.5s;
|
||||
}
|
||||
|
||||
.cto-geometric-bg {
|
||||
background-image: url(../../../assets/geometric-bg.webp);
|
||||
background-position: 75vh -2vh;
|
||||
background-size: contain;
|
||||
background-repeat: no-repeat;
|
||||
position: relative;
|
||||
height: 588px;
|
||||
width: 100%;
|
||||
transition: 0.5s;
|
||||
}
|
||||
|
||||
.cto-shadow {
|
||||
border-radius: 72.5px;
|
||||
width: 100%;
|
||||
transition: 0.5s;
|
||||
}
|
||||
|
||||
.shadowdrop {
|
||||
border-radius: 72.5px;
|
||||
box-shadow: 0px 4px 4px #00000040;
|
||||
width: 100%;
|
||||
transition: 0.5s;
|
||||
}
|
||||
|
||||
.cto-mini-bio {
|
||||
height: 96px;
|
||||
width: 100%;
|
||||
object-fit: contain;
|
||||
display: inline-flex;
|
||||
justify-content: center;
|
||||
flex-direction: column;
|
||||
background-repeat: no-repeat;
|
||||
background-image: url(../../../assets/cto-avatar.webp);
|
||||
margin-top: 3vh;
|
||||
z-index: 999 !important;
|
||||
}
|
||||
|
||||
.cto-info {
|
||||
margin-left: 7em;
|
||||
transition: 0.5s;
|
||||
}
|
||||
|
||||
.cto-translucent {
|
||||
background-color: #020e10ac;
|
||||
border-radius: 15px;
|
||||
transition: 0.5s;
|
||||
}
|
||||
|
||||
@media screen and (min-width: 0px) and (max-width: 600px) {
|
||||
.cto-container {
|
||||
margin-left: -3em;
|
||||
background-position: 100px 50px;
|
||||
background-size: cover;
|
||||
background-repeat: no-repeat;
|
||||
background-origin: content-box;
|
||||
transition: 0.5s;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.cto-bp {
|
||||
padding-right: 0%;
|
||||
transition: 0.5s;
|
||||
}
|
||||
|
||||
.shadowdrop {
|
||||
border-radius: 72.5px;
|
||||
box-shadow: 0px 4px 4px #00000040;
|
||||
margin-left: 12%;
|
||||
transition: 0.5s;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.cto-shadow {
|
||||
align-items: flex-start;
|
||||
display: flex;
|
||||
vertical-align: center;
|
||||
padding-left: 15%;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (min-width: 601px) {
|
||||
.cto-container {
|
||||
background-position: 100px 50px;
|
||||
background-size: cover;
|
||||
background-repeat: no-repeat;
|
||||
background-origin: content-box;
|
||||
transition: 0.5s;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.cto-bp {
|
||||
padding-right: 0%;
|
||||
transition: 0.5s;
|
||||
}
|
||||
|
||||
.cto-shadow {
|
||||
align-items: flex-start;
|
||||
display: flex;
|
||||
vertical-align: center;
|
||||
padding-inline: 15%;
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,64 @@
|
|||
import React from 'react'
|
||||
import Grid from 'dynamic-react-grid'
|
||||
import './FooterStyles.css'
|
||||
|
||||
function Footer() {
|
||||
return (
|
||||
<div className='footer-column'>
|
||||
<div className='footer-container'
|
||||
style={
|
||||
{padding: 15}
|
||||
}>
|
||||
<Grid row
|
||||
spacing={0}>
|
||||
<Grid xs>
|
||||
<h6>
|
||||
<div className="footer-logo"></div>
|
||||
<ul>
|
||||
<li className='footer-li'><span className='footer-email'></span>contact@lumeweb.com</li>
|
||||
<li><span className='footer-h2'>Freedom, privacy, <br />ownership.</span></li>
|
||||
</ul>
|
||||
</h6>
|
||||
</Grid>
|
||||
<Grid xs>
|
||||
<h5 className='footer-padding'>General</h5><br/><h6>
|
||||
<li className='footer-li'>Home</li>
|
||||
<li className='footer-li'>Get Started</li>
|
||||
<li className='footer-li'>Documentation</li>
|
||||
<li className='footer-li'>Projects</li>
|
||||
</h6>
|
||||
</Grid>
|
||||
<Grid xs>
|
||||
<h5 className='footer-padding'>Community</h5><br/><h6>
|
||||
<li className='footer-li'>GitHub</li>
|
||||
<li className='footer-li'>Discord</li>
|
||||
<li className='footer-li'>Twitter</li>
|
||||
<li className='footer-li'>facebook</li>
|
||||
</h6>
|
||||
</Grid>
|
||||
<Grid xs>
|
||||
<h5 className='footer-padding'>Other</h5><br/><h6>
|
||||
<li className='footer-li'>BrowserUniversal</li>
|
||||
<li className='footer-li'>Storage</li>
|
||||
</h6>
|
||||
</Grid>
|
||||
<Grid xs>
|
||||
<h5 className='footer-padding'>Other</h5><br/><h6>
|
||||
<li className='footer-li'>BrowserUniversal</li>
|
||||
<li className='footer-li'>Storage</li>
|
||||
</h6>
|
||||
</Grid>
|
||||
<Grid xs>
|
||||
<h5 className='footer-padding'>Support Us</h5><br/><h6>
|
||||
<li className='footer-li'>Donate</li>
|
||||
<li className='footer-li'>Download App</li>
|
||||
<li className='footer-li'>Partnerships</li>
|
||||
</h6>
|
||||
</Grid>
|
||||
</Grid>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default Footer
|
||||
|
|
@ -0,0 +1,68 @@
|
|||
.footer-logo {
|
||||
background-image: url(../../../assets/lume-logo.webp);
|
||||
background-repeat: no-repeat;
|
||||
background-size: contain;
|
||||
margin-left: 5px;
|
||||
height: 55px;
|
||||
min-width: 150px;
|
||||
display: inline-block;
|
||||
text-align: left;
|
||||
margin-inline: 5px;
|
||||
margin-top: 3vh;
|
||||
z-index: 998 !important;
|
||||
}
|
||||
|
||||
.footer-email {
|
||||
background-image: url(../../../assets/email-icon.webp);
|
||||
background-repeat: no-repeat;
|
||||
background-size: contain;
|
||||
background-position: center;
|
||||
padding-inline: 10px;
|
||||
margin-inline: 10px;
|
||||
height: 14px;
|
||||
object-fit: cover;
|
||||
width: 17px;
|
||||
}
|
||||
|
||||
.footer-column {
|
||||
justify-content: center;
|
||||
background-color: black;
|
||||
list-style-type: none;
|
||||
align-items: flex-start;
|
||||
vertical-align: center;
|
||||
padding-inline: 1%;
|
||||
padding-left: 5%;
|
||||
}
|
||||
|
||||
.footer-container {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
}
|
||||
|
||||
.footer-padding {
|
||||
display: inline-block;
|
||||
text-align: left;
|
||||
font-family: var(--font-family-jaldi);
|
||||
font-size: calc(15px + (21 - 10) * ((100vw - 300px) / (1600 - 300)));
|
||||
margin-inline: 5px;
|
||||
margin-top: 5vh;
|
||||
}
|
||||
|
||||
.footer-li {
|
||||
color: #808687;
|
||||
font-family: var(--font-family-jaldi);
|
||||
font-size: calc(10px + (21 - 10) * ((100vw - 300px) / (1600 - 300)));
|
||||
font-weight: 100;
|
||||
font-style: normal;
|
||||
padding-left: 0;
|
||||
line-height: 1px;
|
||||
margin-inline: 5px;
|
||||
}
|
||||
|
||||
.footer-h2 {
|
||||
font-size: calc(15px + (25 - 10) * ((100vw - 300px) / (1600 - 300)));
|
||||
color: var(--aquamarine);
|
||||
line-height: 1vh;
|
||||
z-index: 999;
|
||||
|
||||
}
|
||||
|
|
@ -0,0 +1,67 @@
|
|||
import React from 'react'
|
||||
import Grid from 'dynamic-react-grid'
|
||||
import './GridStyles.css'
|
||||
|
||||
function Grids() {
|
||||
return (
|
||||
<div className='centered'>
|
||||
<div className='column'>
|
||||
<div className='grid-container'
|
||||
style={
|
||||
{padding: 50}
|
||||
}>
|
||||
<Grid row
|
||||
spacing={10}>
|
||||
<div className='bordered'>
|
||||
<Grid xs>
|
||||
<h5 className='h5-padding'>Web3 Universal Storage</h5><br/><h6>Get access to a universal network drive, powered by the Web3/dWeb cloud. Enjoy portability to any device or platform you wish.
|
||||
</h6>
|
||||
</Grid>
|
||||
</div>
|
||||
<div className='bordered'>
|
||||
<Grid xs>
|
||||
<h5 className='h5-padding'>Web3 Gateway</h5>
|
||||
<h6>Install the Lume Web3 Extension and have a 1-click gateway into the Web3 internet on Opera, Vivaldi, Edge, and Firefox.
|
||||
</h6>
|
||||
</Grid>
|
||||
</div>
|
||||
<div className='bordered'>
|
||||
<Grid xs>
|
||||
<h5 className='h5-padding'>Build Your Site,<br/>Censorship Free</h5>
|
||||
<h6>Combining Lume and Skynet technologies, you can build a website just like you are on the Web2 internet.</h6>
|
||||
</Grid>
|
||||
</div>
|
||||
</Grid>
|
||||
</div>
|
||||
<div style={
|
||||
{padding: 50}
|
||||
} className='div2'>
|
||||
<Grid row
|
||||
spacing={10}>
|
||||
<div className='bordered'>
|
||||
<Grid xs>
|
||||
<h5 className='h5-padding'>Web3 Universal Storage</h5><br/><h6>Get access to a universal network drive, powered by the Web3/dWeb cloud. Enjoy portability to any device or platform you wish.
|
||||
</h6>
|
||||
</Grid>
|
||||
</div>
|
||||
<div className='bordered'>
|
||||
<Grid xs>
|
||||
<h5 className='h5-padding'>Web3 Gateway</h5>
|
||||
<h6>Install the Lume Web3 Extension and have a 1-click gateway into the Web3 internet on Opera, Vivaldi, Edge, and Firefox.
|
||||
</h6>
|
||||
</Grid>
|
||||
</div>
|
||||
<div className='bordered'>
|
||||
<Grid xs>
|
||||
<h5 className='h5-padding'>Build Your Site,<br/>Censorship Free</h5>
|
||||
<h6>Combining Lume and Skynet technologies, you can build a website just like you are on the Web2 internet.</h6>
|
||||
</Grid>
|
||||
</div>
|
||||
</Grid>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default Grids
|
||||
|
|
@ -0,0 +1,57 @@
|
|||
.column {
|
||||
margin-block: 5vh;
|
||||
transition: 0.5s;
|
||||
padding-bottom: 5vh;
|
||||
}
|
||||
|
||||
.bordered {
|
||||
border: 2px solid transparent;
|
||||
border-radius: 5px;
|
||||
background-color: var(--blue-charcoal);
|
||||
transition: 0.3s;
|
||||
margin: 0.5em;
|
||||
}
|
||||
|
||||
.bordered:hover {
|
||||
border: 2px solid var(--aquamarine);
|
||||
border-radius: 5px;
|
||||
transition: 0.1s;
|
||||
}
|
||||
|
||||
@media screen and (min-width: 815px) {
|
||||
.h5-padding {
|
||||
padding-bottom: 15px;
|
||||
}
|
||||
|
||||
.column {
|
||||
transition: 0.5s;
|
||||
}
|
||||
|
||||
.div2 {
|
||||
margin-top: -1.3em;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (min-width: 0px) and (max-width: 600px) {
|
||||
.column {
|
||||
display: inline-block;
|
||||
justify-content: center;
|
||||
padding: 0% 5%;
|
||||
transition: 0.5s;
|
||||
padding-bottom: 5vh;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 1300px) and (min-width: 700px) {
|
||||
.column {
|
||||
display: inline-block;
|
||||
justify-content: center;
|
||||
padding: 0% 0%;
|
||||
padding-left: 20vw;
|
||||
transition: 0.5s;
|
||||
}
|
||||
}
|
||||
|
||||
.grid-container {
|
||||
margin-bottom: -1em;
|
||||
}
|
||||
|
|
@ -0,0 +1,17 @@
|
|||
import React from 'react'
|
||||
import './HeaderStyles.css'
|
||||
import HeaderContent from './HeaderContent.js'
|
||||
|
||||
function Header() {
|
||||
return (
|
||||
<div className='header-container'>
|
||||
<div className='header'>
|
||||
<h1 className='header-alignment' alt="Access to the web for the masses">
|
||||
<HeaderContent />
|
||||
</h1>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default Header
|
||||
|
|
@ -0,0 +1,30 @@
|
|||
import React, {useState, useEffect} from "react";
|
||||
import Typewriter from "typewriter-effect";
|
||||
|
||||
const HeaderContent = () => {
|
||||
var headerStrings = [
|
||||
`Access to the web <br /> for the masses`, `An open web for business`, `Web3 for the masses`, `Web3 for you`
|
||||
],
|
||||
randomString = headerStrings[Math.floor(Math.random() * headerStrings.length)];
|
||||
function lastWord(words) {
|
||||
var n = words.split(" ");
|
||||
return n[n.length - 1];
|
||||
}
|
||||
var lastIndex = randomString.lastIndexOf(" ");
|
||||
return <div>
|
||||
<Typewriter options={
|
||||
{cursor: "_"}
|
||||
}
|
||||
onInit={
|
||||
(typewriter) => {
|
||||
typewriter.changeDelay(50).typeString(`${
|
||||
randomString.substring(0, lastIndex)
|
||||
}` + ' ').start();
|
||||
typewriter.typeString(`<span class="header-alt">${
|
||||
lastWord(randomString)
|
||||
}</span>`)
|
||||
}
|
||||
}/></div>;
|
||||
};
|
||||
|
||||
export default HeaderContent;
|
||||
|
|
@ -0,0 +1,38 @@
|
|||
.header-container {
|
||||
align-items: flex-start;
|
||||
display: flex;
|
||||
margin-block: calc(77px + 1.5625vw);
|
||||
/* padding-bottom: calc(77px + 1.5625vw); */
|
||||
z-index: -1 !important;
|
||||
}
|
||||
|
||||
.header {
|
||||
color: var(--white);
|
||||
font-family: var(--font-family-jetbrains_mono);
|
||||
font-weight: 400;
|
||||
font-style: normal;
|
||||
letter-spacing: -6px;
|
||||
line-height: calc(75px + (110 - 75) * ((100vw - 300px) / (1600 - 300)));
|
||||
text-align: center;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.header-alt {
|
||||
color: var(--aquamarine);
|
||||
font-family: var(--font-family-jetbrains_mono);
|
||||
}
|
||||
|
||||
.header-alignment {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.header-underscore {
|
||||
animation: blink 1.3s step-end infinite;
|
||||
}
|
||||
|
||||
@keyframes blink {
|
||||
from, to { color: transparent }
|
||||
50% { color: rgba(245, 245, 245) }
|
||||
}
|
||||
|
|
@ -0,0 +1,30 @@
|
|||
import React from 'react'
|
||||
import Header from './header/Header';
|
||||
import Vision from './vision/Vision';
|
||||
import Whatisweb3 from './whatisweb3/Whatisweb3';
|
||||
import Powered from './powered/Powered';
|
||||
import Meme from './meme/Meme';
|
||||
import Grids from './grid/Grid';
|
||||
import Socials from './socials/Socials';
|
||||
import Cto from './cto/Cto';
|
||||
import Message from './message/Message';
|
||||
import Footer from './footer/Footer';
|
||||
|
||||
function Home() {
|
||||
return (
|
||||
<div className='home'>
|
||||
<Header/>
|
||||
<Vision/>
|
||||
<Whatisweb3/>
|
||||
<Powered/>
|
||||
<Meme/>
|
||||
<Grids/>
|
||||
<Socials/>
|
||||
<Cto/>
|
||||
<Message />
|
||||
<Footer />
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default Home
|
||||
|
|
@ -0,0 +1,22 @@
|
|||
import React from 'react'
|
||||
import './MemeStyles.css'
|
||||
|
||||
function Meme() {
|
||||
return (
|
||||
<div className='meme-container'>
|
||||
<div className="meme-wrapper">
|
||||
<div className="meme-bg">
|
||||
<div className="meme-columns meme-translucent">
|
||||
<h2>TITLE</h2>
|
||||
<h3 className='left meme-bp'>Building a new world <wbr /> for your data</h3>
|
||||
<h4 className='left'>Right now, Lume has only one full-time developer and limited helper staff! We need help from developers, fundraisers, funders, and
|
||||
contributors to bring the new internet to the masses.</h4>
|
||||
</div>
|
||||
</div>
|
||||
<div className='img-right'></div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default Meme
|
||||
|
|
@ -0,0 +1,89 @@
|
|||
.meme-container {
|
||||
align-self: flex-start;
|
||||
position: relative;
|
||||
width: 100%;
|
||||
justify-content: center;
|
||||
margin-block: 5vh;
|
||||
padding-block: 5vh;
|
||||
}
|
||||
.meme-bp {
|
||||
padding-right: 45%;
|
||||
}
|
||||
.meme-wrapper {
|
||||
align-items: flex-start;
|
||||
background-image: url(../../../assets/tilted-rectangle.webp);
|
||||
background-size: 100% 100%;
|
||||
background-position: center;
|
||||
background-repeat: no-repeat;
|
||||
width: 100%;
|
||||
padding-block: 2.1em;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
padding-left: 6.5%;
|
||||
height: 80vh;
|
||||
transition: 0.5s;
|
||||
}
|
||||
.meme-bg {
|
||||
background-image: url(../../../assets/meme.webp);
|
||||
background-position: 100% 50%;
|
||||
background-size: contain;
|
||||
background-repeat: no-repeat;
|
||||
margin-left: -0.8vw;
|
||||
height: calc(100% + 0.3vh);
|
||||
transition: 0.5s;
|
||||
}
|
||||
|
||||
.meme-columns {
|
||||
display: grid;
|
||||
position: relative;
|
||||
margin-block: calc(10% + 1.5625vh);
|
||||
}
|
||||
@media screen and (max-width: 1050px) {
|
||||
.meme-container {
|
||||
z-index: 999 !important;
|
||||
width: 100%;
|
||||
transition: 0.5s;
|
||||
}
|
||||
.meme-bp {
|
||||
padding-right: 0%;
|
||||
}
|
||||
.meme-wrapper{
|
||||
width: 100%;
|
||||
padding-inline: 15%;
|
||||
padding-left: 20%;
|
||||
height: 80vh;
|
||||
transition: 0.5s;
|
||||
}
|
||||
.meme-translucent {
|
||||
max-width: 100%;
|
||||
transition: 0.5s;
|
||||
background-color: #020e10ac;
|
||||
border-radius: 15px;
|
||||
}
|
||||
.meme-bg {
|
||||
background-position: 50% 50%;
|
||||
z-index: 999 !important;
|
||||
}
|
||||
.meme-columns {
|
||||
display: grid;
|
||||
position: relative;
|
||||
margin-block: calc(25% + 1.5625vh);
|
||||
transition: 0.5s;
|
||||
}
|
||||
}
|
||||
@media screen and (min-width: 2200px) {
|
||||
.meme-container {
|
||||
width: 100%;
|
||||
justify-content: center;
|
||||
display: inline-block;
|
||||
transition: 0.5s;
|
||||
}
|
||||
.meme-translucent {
|
||||
max-width: 30%;
|
||||
transition: 0.5s;
|
||||
background-color: none;
|
||||
border-radius: 15px;
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,18 @@
|
|||
import React from 'react'
|
||||
import './MessageStyles.css'
|
||||
|
||||
function Message() {
|
||||
return (
|
||||
<div className='message-container'>
|
||||
<div className="message-header">
|
||||
A message from Derrick
|
||||
</div>
|
||||
<div className="message-content">
|
||||
Web3 gives people control over their data, privacy, and ownership. Lume's affordable Web3 tech aims to speed up the transition
|
||||
from Web2 to Web3, which matters for privacy and security.
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default Message
|
||||
|
|
@ -0,0 +1,27 @@
|
|||
.message-container {
|
||||
align-items: flex-start;
|
||||
background-color: var(--aquamarine);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 7px;
|
||||
min-height: 237px;
|
||||
padding: 5% 12%;
|
||||
width: 120%;
|
||||
margin-left: -1em;
|
||||
}
|
||||
.message-header {
|
||||
color: var(--blue-charcoal-2);
|
||||
font-family: var(--font-family-jetbrains_mono);
|
||||
font-size: calc(25px + (32 - 24) * ((100vw - 300px) / (1600 - 300)));
|
||||
font-weight: 700;
|
||||
line-height: 2em;
|
||||
font-style: normal;
|
||||
}
|
||||
.message-content {
|
||||
color: var(--blue-charcoal-2);
|
||||
font-family: var(--font-family-jaldi);
|
||||
font-size: calc(15px + (21 - 14) * ((100vw - 300px) / (1600 - 300)));
|
||||
max-width: 85%;
|
||||
font-weight: 400;
|
||||
font-style: normal;
|
||||
}
|
||||
|
|
@ -0,0 +1,19 @@
|
|||
import React from 'react'
|
||||
import './PoweredStyles.css'
|
||||
|
||||
function Powered() {
|
||||
return (
|
||||
<div className='p-logo-container'>
|
||||
<div className="p-logo-wrapper">
|
||||
<h2 className='centered'><br /><br />POWERED BY</h2>
|
||||
<div className="rows">
|
||||
<div className="sia-logo" alt="sia logo"></div>
|
||||
<div className="hns-logo" alt="hns logo"></div>
|
||||
<div className="osi-logo" alt="osi logo"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default Powered
|
||||
|
|
@ -0,0 +1,84 @@
|
|||
.valign-text-middle {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.p-logo-wrapper {
|
||||
align-items: center;
|
||||
flex-direction: column;
|
||||
white-space: nowrap;
|
||||
display: flex;
|
||||
width: 100%;
|
||||
margin-left: 50%;
|
||||
margin-right: 50%;
|
||||
}
|
||||
|
||||
.rows {
|
||||
flex-direction: row;
|
||||
margin-bottom: 1.5vh;
|
||||
place-items: center;
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
height: auto;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.p-logo-container {
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
overflow: visible;
|
||||
white-space: normal;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 625px) {
|
||||
.p-logo-container {
|
||||
width: 100%;
|
||||
margin-top: 5%;
|
||||
transition: 0.5s;
|
||||
}
|
||||
|
||||
.p-logo-wrapper {
|
||||
margin-left: 0%
|
||||
}
|
||||
|
||||
.p-logo-container {
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
overflow: visible;
|
||||
display: grid;
|
||||
}
|
||||
}
|
||||
|
||||
.sia-logo {
|
||||
background-image: url(../../../assets/sia-logo.webp);
|
||||
background-position: 50% 50%;
|
||||
background-size: contain;
|
||||
background-repeat: no-repeat;
|
||||
height: 51.8px;
|
||||
margin-bottom: 8px;
|
||||
object-fit: cover;
|
||||
width: 89.6px;
|
||||
}
|
||||
|
||||
.hns-logo {
|
||||
background-image: url(../../../assets/hsn-logo.webp);
|
||||
background-position: 50% 50%;
|
||||
background-repeat: no-repeat;
|
||||
background-size: contain;
|
||||
height: 46.2px;
|
||||
margin-left: 5px;
|
||||
object-fit: cover;
|
||||
width: 43.4px;
|
||||
}
|
||||
|
||||
.osi-logo {
|
||||
background-image: url(../../../assets/osi-logo.webp);
|
||||
background-position: 50% 50%;
|
||||
background-size: contain;
|
||||
background-repeat: no-repeat;
|
||||
height: 70px;
|
||||
margin-left: 18px;
|
||||
width: 58.1px;
|
||||
}
|
||||
|
|
@ -0,0 +1,24 @@
|
|||
import React from 'react'
|
||||
import './SocialsStyles.css'
|
||||
|
||||
function Socials() {
|
||||
return (
|
||||
<div className='centered'>
|
||||
<div>
|
||||
<h2 className='centered'>
|
||||
get in touch
|
||||
</h2>
|
||||
<div className="centered">
|
||||
<div className="socials-wrapper">
|
||||
<div className='gitHub' alt="GitHub logo"/>
|
||||
<div className='discord' alt="Discord logo"/>
|
||||
<div className='twitter' alt="Twitter logo"/>
|
||||
<div className='fb' alt="Facebook logo"/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default Socials
|
||||
|
|
@ -0,0 +1,43 @@
|
|||
.socials-wrapper {
|
||||
display: flex;
|
||||
margin-left: -5%;
|
||||
padding-bottom: 5vh;
|
||||
margin-bottom: 5vh;
|
||||
}
|
||||
.gitHub {
|
||||
background-image: url(../../../assets/github-logo.webp);
|
||||
background-position: 50% 50%;
|
||||
background-size: contain;
|
||||
background-repeat: no-repeat;
|
||||
height: 48.3px;
|
||||
width: 55px;
|
||||
}
|
||||
.discord {
|
||||
background-image: url(../../../assets/discord-logo.webp);
|
||||
background-position: 50% 50%;
|
||||
background-size: contain;
|
||||
background-repeat: no-repeat;
|
||||
height: 48.3px;
|
||||
width: 48.3px;
|
||||
margin-top: 0.4vh;
|
||||
margin-left: 18px;
|
||||
}
|
||||
.twitter {
|
||||
background-image: url(../../../assets/twitter-logo.webp);
|
||||
background-position: 50% 50%;
|
||||
background-size: contain;
|
||||
background-repeat: no-repeat;
|
||||
height: 48.3px;
|
||||
width: 55px;
|
||||
margin-left: 18px;
|
||||
}
|
||||
.fb {
|
||||
background-image: url(../../../assets/fb-logo.webp);
|
||||
background-position: 50% 50%;
|
||||
background-size: contain;
|
||||
background-repeat: no-repeat;
|
||||
margin-top: 0.5vh;
|
||||
height: 42px;
|
||||
width: 50px;
|
||||
margin-left: 18px;
|
||||
}
|
||||
|
|
@ -0,0 +1,20 @@
|
|||
import React from 'react'
|
||||
import './VisionStyles.css'
|
||||
|
||||
function Vision() {
|
||||
return (
|
||||
<div className='vision-container'>
|
||||
<div className='vision-wrapper'>
|
||||
<span id="vision"></span>
|
||||
<h2>OUR VISION</h2>
|
||||
<h3>Make Web3 easy for <wbr /> everyone</h3>
|
||||
<h4 className='left vision-transluscent'>Web3 offers freedom of speech, data sovereignty, and privacy. We simplify Web3 by bridging the gap between the two webs,
|
||||
enabling easy usage without censorship or backdoors.</h4>
|
||||
<div className='vision-btn-container'>
|
||||
<a className='vision-btn' href="#"> Download Extension</a></div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default Vision
|
||||
|
|
@ -0,0 +1,54 @@
|
|||
.vision-container {
|
||||
align-items: flex-start;
|
||||
display: flex;
|
||||
margin-block: 5vh;
|
||||
padding-bottom: 5vh;
|
||||
vertical-align: center;
|
||||
padding-inline: 15%;
|
||||
}
|
||||
.vision-wrapper {
|
||||
background-image: url(../../../assets/video-placeholder.webp);
|
||||
background-position: 100% 50%;
|
||||
background-size: contain;
|
||||
background-repeat: no-repeat;
|
||||
transition: 0.5s;
|
||||
}
|
||||
.vision-btn-container {
|
||||
align-items: center;
|
||||
background-color: var(--aquamarine);
|
||||
border-radius: 5px;
|
||||
display: flex;
|
||||
height: 49px;
|
||||
margin-left: -1.5px;
|
||||
margin-top: 22px;
|
||||
max-width: 195px;
|
||||
padding: 0 3px;
|
||||
transform: scale(1);
|
||||
transition: 0.3s;
|
||||
}
|
||||
.vision-btn-container:hover {
|
||||
transform: scale(1.01);
|
||||
transition: 0.3s;
|
||||
}
|
||||
.vision-btn-container a {
|
||||
color:black;
|
||||
}
|
||||
.vision-btn {
|
||||
letter-spacing: 0;
|
||||
min-height: 26px;
|
||||
text-align: center;
|
||||
width: 234px;
|
||||
display: block;
|
||||
}
|
||||
.vision-transluscent {
|
||||
background-color: none;
|
||||
border-radius: 15px;
|
||||
transition: 0.5s;
|
||||
}
|
||||
@media screen and (max-width: 1200px) {
|
||||
.vision-transluscent {
|
||||
background-color: #031418a7;
|
||||
border-radius: 15px;
|
||||
transition: 0.5s;
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,26 @@
|
|||
import React from 'react'
|
||||
import './Whatisweb3Styles.css'
|
||||
|
||||
function Whatisweb3() {
|
||||
return (
|
||||
<div className='centered'>
|
||||
<div className='Whatisweb3-container'>
|
||||
<div className='Whatisweb3-wrapper'>
|
||||
<div className='img-left'/>
|
||||
<div className='w3-container'>
|
||||
<span id="whatisweb3"></span>
|
||||
<h2>what is the web?</h2>
|
||||
<h3>Why Web3 matters</h3>
|
||||
<h4 className='w3-transluscent'>Web3 gives people control over their data, privacy, and ownership. Lume's affordable Web3 tech aims to speed up the transition
|
||||
from Web2 to Web3, which matters for privacy and security.</h4>
|
||||
<div className='w3-btn-container'>
|
||||
<a className='w3-btn' href="#">Learn More</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default Whatisweb3
|
||||
|
|
@ -0,0 +1,111 @@
|
|||
.Whatisweb3-container {
|
||||
align-self: flex-start;
|
||||
position: relative;
|
||||
width: 100%;
|
||||
justify-content: center;
|
||||
padding-block: 5vh;
|
||||
/* padding-top: 15vh; */
|
||||
}
|
||||
|
||||
.w3-container {
|
||||
z-index: 999 !important;
|
||||
width: 100%;
|
||||
padding-left: 53vw;
|
||||
transition: 0.5s;
|
||||
}
|
||||
|
||||
.Whatisweb3-wrapper {
|
||||
align-items: flex-start;
|
||||
background-image: url(../../../assets/tilted-rectangle.webp);
|
||||
background-size: 100% 100%;
|
||||
background-position: center;
|
||||
background-repeat: no-repeat;
|
||||
width: 80%;
|
||||
padding-block: 10em;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
padding-left: calc(8px + 1.5625vw);
|
||||
}
|
||||
|
||||
.img-left {
|
||||
background-image: url(../../../assets/img-left.webp);
|
||||
background-position: 50% 50%;
|
||||
background-size: contain;
|
||||
background-repeat: no-repeat;
|
||||
height: 817px;
|
||||
left: 11%;
|
||||
position: absolute;
|
||||
display: flex;
|
||||
width: 637px;
|
||||
z-index: 998 !important;
|
||||
}
|
||||
|
||||
.w3-btn-container {
|
||||
align-items: center;
|
||||
z-index: 999 !important;
|
||||
background-color: var(--aquamarine);
|
||||
border-radius: 5px;
|
||||
display: flex;
|
||||
height: 49px;
|
||||
margin-left: -1.5px;
|
||||
margin-top: 22px;
|
||||
max-width: 105px;
|
||||
padding: 0 3px;
|
||||
transform: scale(1);
|
||||
transition: 0.5s;
|
||||
}
|
||||
.w3-btn-container:hover {
|
||||
transform: scale(1.01);
|
||||
transition: 0.5s;
|
||||
}
|
||||
.w3-btn-container a {
|
||||
color:black;
|
||||
}
|
||||
.w3-btn {
|
||||
letter-spacing: 0;
|
||||
min-height: 26px;
|
||||
text-align: center;
|
||||
width: 105px;
|
||||
display: block;
|
||||
font-size: 15px;
|
||||
}
|
||||
.w3-transluscent {
|
||||
background-color: #020e1076;
|
||||
border-radius: 15px;
|
||||
transition: 0.5s;
|
||||
max-width: 71.5%;
|
||||
}
|
||||
@media screen and (max-width: 1050px) {
|
||||
.w3-container {
|
||||
z-index: 999 !important;
|
||||
width: 100%;
|
||||
padding-inline: 12%;
|
||||
z-index: 999 !important;
|
||||
}
|
||||
.Whatisweb3-wrapper{
|
||||
width: 100%;
|
||||
}
|
||||
.img-left {
|
||||
left: 15%;
|
||||
transition: 0.5s;
|
||||
}
|
||||
.w3-transluscent {
|
||||
max-width: 100%;
|
||||
}
|
||||
}
|
||||
@media screen and (min-width: 2200px) {
|
||||
.w3-container {
|
||||
padding-inline: 96vw;
|
||||
width: 100%;
|
||||
justify-content: center;
|
||||
display: grid;
|
||||
}
|
||||
.img-left {
|
||||
left: 5.5%;
|
||||
}
|
||||
.w3-transluscent {
|
||||
max-width: 30%;
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,10 @@
|
|||
.page-one {
|
||||
background-color: black;
|
||||
white-space: nowrap;
|
||||
justify-content: center;
|
||||
display: flex;
|
||||
}
|
||||
.page-one::after{
|
||||
content: ' page 1';
|
||||
padding-left: 10px;
|
||||
}
|
||||
|
|
@ -0,0 +1,10 @@
|
|||
import React from 'react'
|
||||
import './VisionStyles.css'
|
||||
|
||||
function vision() {
|
||||
return (
|
||||
<div className='page-one centered'>Placeholder</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default vision
|
||||
|
|
@ -0,0 +1,10 @@
|
|||
import React from 'react'
|
||||
import './w3Styles.css'
|
||||
|
||||
function w3() {
|
||||
return (
|
||||
<div className='page-two centered'>Placeholder </div>
|
||||
)
|
||||
}
|
||||
|
||||
export default w3
|
||||
|
|
@ -0,0 +1,10 @@
|
|||
.page-two {
|
||||
background-color: black;
|
||||
white-space: nowrap;
|
||||
justify-content: center;
|
||||
display: flex;
|
||||
}
|
||||
.page-two::after{
|
||||
content: ' page 2';
|
||||
padding-left: 10px;
|
||||
}
|
||||
|
|
@ -0,0 +1,46 @@
|
|||
import React, {useState} from 'react'
|
||||
import { Twirl as Hamburger } from 'hamburger-react'
|
||||
import { BrowserRouter, Route, Link } from "react-router-dom";
|
||||
|
||||
import './NavbarStyles.css'
|
||||
|
||||
function Navbar() {
|
||||
const [isOpen, setOpen] = useState(false)
|
||||
const [nav, setNav] = useState(false)
|
||||
const toggleNav = () => setNav(!nav)
|
||||
const toggleHam = () => setOpen(!isOpen)
|
||||
|
||||
return (
|
||||
<div className='navbar'>
|
||||
<div className="logo">
|
||||
</div>
|
||||
<ul className="nav-menu">
|
||||
<li><Link to="home">Home</Link></li>
|
||||
<li><Link to="vision">Vision</Link></li>
|
||||
<li><Link to="w3">What is Web3</Link></li>
|
||||
<li>Donate</li>
|
||||
<div className='download-btn-container'>
|
||||
<a className="download-btn" href="#">Download Extension</a>
|
||||
</div>
|
||||
</ul>
|
||||
|
||||
<div className="hamburger" onClick={toggleNav}>
|
||||
<Hamburger id="hamburger" className='icon' duration={0.6} toggled={isOpen} toggle={setOpen}/>
|
||||
</div>
|
||||
<div className={nav ? 'mobile-menu active' : 'mobile-menu'}>
|
||||
<ul className="mobile-nav" onClick={toggleHam}>
|
||||
<li onClick={toggleNav}><a href="#" onClick={toggleHam}>Home</a></li>
|
||||
<li onClick={toggleNav}><a href="#vision" title="Vision" onClick={toggleHam}>Vision</a></li>
|
||||
<li onClick={toggleNav}><a href="#whatisweb3" title="What is Web3" onClick={toggleHam}>What is Web3</a></li>
|
||||
<li onClick={toggleNav}><a href="#donate" onClick={toggleHam}>Donate</a></li>
|
||||
<div className='download-btn-container'>
|
||||
<a className="download-btn" href="#">Download Extension</a>
|
||||
</div>
|
||||
</ul>
|
||||
<div className="mobile-menu-btn"></div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default Navbar
|
||||
|
|
@ -0,0 +1,157 @@
|
|||
.logo {
|
||||
background-image: url(../../assets/lume-logo.webp);
|
||||
background-repeat: no-repeat;
|
||||
background-size: contain;
|
||||
margin-left: 5px;
|
||||
height: 55px;
|
||||
min-width: 210px;
|
||||
z-index: 998 !important;
|
||||
}
|
||||
|
||||
.navbar-container {
|
||||
white-space: nowrap;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.navbar {
|
||||
width: 100%;
|
||||
height: 80px;
|
||||
display: flex;
|
||||
padding-top: 75px;
|
||||
padding-left: 7%;
|
||||
padding-right: 7%;
|
||||
padding-bottom: 3%;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
white-space: nowrap;
|
||||
gap: 36px;
|
||||
background-color: #031418;
|
||||
}
|
||||
|
||||
.nav-menu {
|
||||
display: flex;
|
||||
align-items: end;
|
||||
padding: 1em;
|
||||
transition: all 1s linear;
|
||||
}
|
||||
|
||||
li {
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
.download-btn-container {
|
||||
color: var(--black);
|
||||
font-family: var(--font-family-jetbrains_mono);
|
||||
font-size: var(--font-size-s);
|
||||
font-weight: 400;
|
||||
font-style: normal;
|
||||
align-items: flex-end;
|
||||
background-color: var(--aquamarine);
|
||||
border-radius: 5px;
|
||||
display: flex;
|
||||
height: 52px;
|
||||
min-width: 245px;
|
||||
padding: 12px 5.2px;
|
||||
transform: scale(1);
|
||||
transition: 0.3s;
|
||||
}
|
||||
|
||||
.download-btn-container a {
|
||||
color: black;
|
||||
}
|
||||
|
||||
.download-btn-container:hover {
|
||||
transform: scale(1.01);
|
||||
transition: 0.3s;
|
||||
}
|
||||
|
||||
.download-btn {
|
||||
letter-spacing: 0;
|
||||
min-height: 26px;
|
||||
text-align: center;
|
||||
width: 234px;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.hamburger {
|
||||
display: none;
|
||||
font-size: var(--font-size-xl);
|
||||
-webkit-tap-highlight-color: transparent;
|
||||
-webkit-touch-callout: none;
|
||||
-webkit-user-select: none;
|
||||
-khtml-user-select: none;
|
||||
-moz-user-select: none;
|
||||
-ms-user-select: none;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.mobile-menu {
|
||||
display: none;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 940px) {
|
||||
.nav-menu {
|
||||
opacity: 0;
|
||||
visibility: hidden;
|
||||
width: 1px;
|
||||
transition: all 0s linear;
|
||||
position: fixed;
|
||||
}
|
||||
|
||||
.hamburger {
|
||||
display: block;
|
||||
position: absolute;
|
||||
right: 20;
|
||||
justify-content: right;
|
||||
z-index: 999 !important;
|
||||
}
|
||||
|
||||
.mobile-menu {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: auto;
|
||||
margin-left: 50%;
|
||||
top: -100vh;
|
||||
right: 0;
|
||||
opacity: 100;
|
||||
position: absolute;
|
||||
justify-content: space-between;
|
||||
align-items: end;
|
||||
background-color: #031418;
|
||||
border-radius: 10px;
|
||||
outline-style: solid;
|
||||
outline-width: 0.1px;
|
||||
outline-color: #07363fa7;
|
||||
box-shadow: 0px 4px 4px #00000096;
|
||||
transition: 0.55s;
|
||||
z-index: 998 !important;
|
||||
}
|
||||
|
||||
.active {
|
||||
top: 2em;
|
||||
}
|
||||
|
||||
.mobile-menu li {
|
||||
padding: 1em 0.5em;
|
||||
margin: 0 1em;
|
||||
}
|
||||
|
||||
.download-btn-container {
|
||||
transform: scale(0.7);
|
||||
transition: 0.3s;
|
||||
margin-left: -0.8em;
|
||||
}
|
||||
|
||||
.download-btn-container:hover {
|
||||
transform: scale(0.75);
|
||||
transition: 0.3s;
|
||||
}
|
||||
|
||||
.download-btn {
|
||||
letter-spacing: 0;
|
||||
min-height: 26px;
|
||||
text-align: center;
|
||||
width: 234px;
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,175 @@
|
|||
@import url("https://fonts.googleapis.com/css?family=Jaldi:400|JetBrains+Mono:400,700|IBM+Plex+Sans+Devanagari:400");:root {
|
||||
--primary-dark: #000000;
|
||||
--primary-light: #ffffff;
|
||||
}
|
||||
|
||||
:root {
|
||||
--black:
|
||||
rgba(0, 0, 0, 1);
|
||||
--blue-charcoal:
|
||||
rgba(1, 14, 16, 1);
|
||||
--blue-charcoal-2:
|
||||
rgba(3, 21, 24, 1);
|
||||
--aquamarine:
|
||||
rgba(122, 252, 187, 1);
|
||||
--cloud:
|
||||
rgba(199, 199, 199, 1);
|
||||
--alto:
|
||||
rgba(217, 217, 217, 1);
|
||||
--white:
|
||||
rgba(255, 255, 255, 1);
|
||||
|
||||
--font-size-s: 20px;
|
||||
--font-size-m: 21px;
|
||||
--font-size-l: 25px;
|
||||
--font-size-xl: 30px;
|
||||
--font-size-xxl: 32px;
|
||||
--font-size-xxxl: 45px;
|
||||
--font-size-xxxxl: 100px;
|
||||
|
||||
--font-family-ibm_plex_sans_devanagari: "IBM Plex Sans Devanagari";
|
||||
--font-family-jaldi: "Jaldi";
|
||||
--font-family-jetbrains_mono: "JetBrains Mono";
|
||||
}
|
||||
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
html {
|
||||
scroll-behavior: smooth;
|
||||
}
|
||||
a, a:visited {
|
||||
text-decoration: none;
|
||||
color: white;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: "JetBrains Mono", sans-serif;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.body-block {
|
||||
align-items: center;
|
||||
display: flex;
|
||||
gap: 78px;
|
||||
}
|
||||
.centered{
|
||||
display: grid;
|
||||
place-items: center;
|
||||
overflow: hidden;
|
||||
height: auto;
|
||||
margin-bottom: 1.5vh;
|
||||
}
|
||||
|
||||
.home {
|
||||
background-color: #031418;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
display: absolute;
|
||||
overflow: hidden;
|
||||
border: 1px none;
|
||||
height: auto;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.title {
|
||||
height: 57px;
|
||||
letter-spacing: -1.5px;
|
||||
line-height: 102px;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
a {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: calc(26px + (82 - 26) * ((100vw - 300px) / (1600 - 300)));
|
||||
font-weight: 100;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: calc(15px + (25 - 10) * ((100vw - 300px) / (1600 - 300)));
|
||||
color: var(--aquamarine);
|
||||
text-transform: uppercase;
|
||||
z-index: 999;
|
||||
}
|
||||
|
||||
h3 {
|
||||
font-size: calc(30px + (45 - 30) * ((100vw - 300px) / (1600 - 300)));
|
||||
min-width: 75vw;
|
||||
margin-top: 0.5em;
|
||||
z-index: 999;
|
||||
}
|
||||
|
||||
h4 {
|
||||
font-size: calc(15px + (21 - 15) * ((100vw - 300px) / (1600 - 300)));
|
||||
color: var(--cloud);
|
||||
font-family: var(--font-family-jaldi);
|
||||
font-size: var(--font-size-m);
|
||||
font-weight: 400;
|
||||
font-style: normal;
|
||||
max-width: 550px;
|
||||
margin-top: 0.5em;
|
||||
line-height: 35px;
|
||||
}
|
||||
|
||||
h5 {
|
||||
font-size: calc(15px + (29 - 15) * ((100vw - 300px) / (1600 - 300)));
|
||||
color: var(--white);
|
||||
font-family: var(--font-family-jaldi);
|
||||
font-weight: 400;
|
||||
font-style: normal;
|
||||
max-width: 300;
|
||||
line-height: 2rem;
|
||||
}
|
||||
|
||||
h6 {
|
||||
font-size: calc(15px + (19 - 15) * ((100vw - 300px) / (1600 - 300)));
|
||||
color: var(--cloud);
|
||||
font-family: var(--font-family-jaldi);
|
||||
font-weight: 100;
|
||||
font-style: normal;
|
||||
max-width: 300;
|
||||
}
|
||||
|
||||
ul {
|
||||
list-style-type: none;
|
||||
}
|
||||
|
||||
.container {
|
||||
max-width: 1240px;
|
||||
margin: auto;
|
||||
padding: 0 1rem;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 1050px) {
|
||||
.left {
|
||||
display: flex;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
white-space: normal;
|
||||
}
|
||||
.h2-alignment {
|
||||
margin-left: -10em;
|
||||
}
|
||||
h5 {
|
||||
font-size: calc(20px + (29 - 15) * ((100vw - 300px) / (1600 - 300)));
|
||||
color: var(--white);
|
||||
font-family: var(--font-family-jaldi);
|
||||
font-weight: 400;
|
||||
font-style: normal;
|
||||
max-width: 300;
|
||||
line-height: 2rem;
|
||||
}
|
||||
h6 {
|
||||
font-size: calc(17px + (19 - 15) * ((100vw - 300px) / (1600 - 300)));
|
||||
color: var(--cloud);
|
||||
font-family: var(--font-family-jaldi);
|
||||
font-weight: 100;
|
||||
font-style: normal;
|
||||
max-width: 300;
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,9 @@
|
|||
import React from 'react';
|
||||
import { hydrateRoot } from 'react-dom/client';
|
||||
import './index.css';
|
||||
import App from './App';
|
||||
|
||||
hydrateRoot(
|
||||
document.getElementById('root'),
|
||||
<App />
|
||||
);
|
||||
Loading…
Reference in New Issue