diff --git a/.gitignore b/.gitignore index 821c712..f06235c 100644 --- a/.gitignore +++ b/.gitignore @@ -1,24 +1,2 @@ -# See https://help.github.com/articles/ignoring-files/ for more about ignoring files. - -# dependencies -/node_modules -/.pnp -.pnp.js -.parcel-cache - -# 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* +node_modules +dist diff --git a/.stylelintrc.json b/.stylelintrc.json new file mode 100644 index 0000000..77ceb29 --- /dev/null +++ b/.stylelintrc.json @@ -0,0 +1 @@ +{ "extends": ["stylelint-config-standard"] } \ No newline at end of file diff --git a/README.md b/README.md new file mode 100644 index 0000000..3c261d3 --- /dev/null +++ b/README.md @@ -0,0 +1,47 @@ +# Astro Starter Kit: Minimal + +``` +npm create astro@latest -- --template minimal +``` + +[![Open in StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/github/withastro/astro/tree/latest/examples/minimal) +[![Open with CodeSandbox](https://assets.codesandbox.io/github/button-edit-lime.svg)](https://codesandbox.io/p/sandbox/github/withastro/astro/tree/latest/examples/minimal) +[![Open in GitHub Codespaces](https://github.com/codespaces/badge.svg)](https://codespaces.new/withastro/astro?devcontainer_path=.devcontainer/minimal/devcontainer.json) + +> πŸ§‘β€πŸš€ **Seasoned astronaut?** Delete this file. Have fun! + +## πŸš€ Project Structure + +Inside of your Astro project, you'll see the following folders and files: + +``` +/ +β”œβ”€β”€ public/ +β”œβ”€β”€ src/ +β”‚ └── pages/ +β”‚ └── index.astro +└── package.json +``` + +Astro looks for `.astro` or `.md` files in the `src/pages/` directory. Each page is exposed as a route based on its file name. + +There's nothing special about `src/components/`, but that's where we like to put any Astro/React/Vue/Svelte/Preact components. + +Any static assets, like images, can be placed in the `public/` directory. + +## 🧞 Commands + +All commands are run from the root of the project, from a terminal: + +| Command | Action | +| :------------------------ | :----------------------------------------------- | +| `npm install` | Installs dependencies | +| `npm run dev` | Starts local dev server at `localhost:3000` | +| `npm run build` | Build your production site to `./dist/` | +| `npm run preview` | Preview your build locally, before deploying | +| `npm run astro ...` | Run CLI commands like `astro add`, `astro check` | +| `npm run astro -- --help` | Get help using the Astro CLI | + +## πŸ‘€ Want to learn more? + +Feel free to check [our documentation](https://docs.astro.build) or jump into our [Discord server](https://astro.build/chat). diff --git a/astro.config.mjs b/astro.config.mjs new file mode 100644 index 0000000..b37627f --- /dev/null +++ b/astro.config.mjs @@ -0,0 +1,9 @@ +import { defineConfig } from 'astro/config'; +import tailwind from '@astrojs/tailwind'; +import react from '@astrojs/react'; +import image from '@astrojs/image'; + +// https://astro.build/config +export default defineConfig({ + integrations: [tailwind({ config: { applyBaseStyles: false } }), image(), react()], +}); diff --git a/package.json b/package.json index 0be52cf..338f3d4 100644 --- a/package.json +++ b/package.json @@ -1,43 +1,33 @@ { - "name": "react-package", + "name": "lume-web", + "type": "module", + "version": "0.0.1", "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" + "dev": "TAILWIND_MODE=watch astro dev", + "start": "astro dev", + "build": "astro build", + "preview": "astro preview", + "astro": "astro" }, "dependencies": { - "@babel/preset-react": "^7.18.6", - "@babel/register": "^7.21.0", - "compression": "^1.7.4", + "@astrojs/image": "^0.16.6", + "@astrojs/react": "^2.1.1", + "@astrojs/tailwind": "^3.1.1", + "@types/react": "^18.2.0", + "@types/react-dom": "^18.2.1", + "astro": "^2.3.2", + "astro-icon": "^0.8.0", + "autoprefixer": "^10.4.14", "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", + "qrcode": "^1.5.3", + "react": "^18.2.0", "react-dom": "^18.2.0", - "react-router-dom": "6.10.0", + "sass": "^1.62.1", + "tailwindcss": "^3.3.2", "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" + "stylelint": "^15.6.0", + "stylelint-config-standard": "^33.0.0" } } diff --git a/postcss.config.cjs b/postcss.config.cjs new file mode 100644 index 0000000..55005aa --- /dev/null +++ b/postcss.config.cjs @@ -0,0 +1,7 @@ +module.exports = { + plugins: [ + require('tailwindcss/nesting'), + require('tailwindcss'), + require('autoprefixer') + ] +}; diff --git a/public/favicon.svg b/public/favicon.svg new file mode 100644 index 0000000..f157bd1 --- /dev/null +++ b/public/favicon.svg @@ -0,0 +1,9 @@ + + + + diff --git a/public/robots.txt b/public/robots.txt index e9e57dc..26b4d70 100644 --- a/public/robots.txt +++ b/public/robots.txt @@ -1,3 +1,2 @@ -# https://www.robotstxt.org/robotstxt.html -User-agent: * -Disallow: +User-Agent: * +Allow: / \ No newline at end of file diff --git a/src/assets/astronaut.png b/src/assets/astronaut.png new file mode 100644 index 0000000..111a777 Binary files /dev/null and b/src/assets/astronaut.png differ diff --git a/src/assets/community-power-bg.png b/src/assets/community-power-bg.png new file mode 100644 index 0000000..75506ad Binary files /dev/null and b/src/assets/community-power-bg.png differ diff --git a/src/assets/community-power-rectangle.png b/src/assets/community-power-rectangle.png new file mode 100644 index 0000000..fb3f6db Binary files /dev/null and b/src/assets/community-power-rectangle.png differ diff --git a/src/assets/community-power.png b/src/assets/community-power.png new file mode 100644 index 0000000..b5c2535 Binary files /dev/null and b/src/assets/community-power.png differ diff --git a/src/assets/donate-bg.png b/src/assets/donate-bg.png new file mode 100644 index 0000000..d2e4690 Binary files /dev/null and b/src/assets/donate-bg.png differ diff --git a/src/assets/donate-gfx-right.png b/src/assets/donate-gfx-right.png new file mode 100644 index 0000000..e8f208d Binary files /dev/null and b/src/assets/donate-gfx-right.png differ diff --git a/src/assets/donate-why-bg.png b/src/assets/donate-why-bg.png new file mode 100644 index 0000000..df3a535 Binary files /dev/null and b/src/assets/donate-why-bg.png differ diff --git a/src/assets/double-brand-bg.png b/src/assets/double-brand-bg.png new file mode 100644 index 0000000..0bd5f34 Binary files /dev/null and b/src/assets/double-brand-bg.png differ diff --git a/src/assets/lume-logo.png b/src/assets/lume-logo.png new file mode 100644 index 0000000..54e05aa Binary files /dev/null and b/src/assets/lume-logo.png differ diff --git a/src/assets/meme-1.png b/src/assets/meme-1.png new file mode 100644 index 0000000..180c97b Binary files /dev/null and b/src/assets/meme-1.png differ diff --git a/src/assets/meme-2.png b/src/assets/meme-2.png new file mode 100644 index 0000000..d8d3758 Binary files /dev/null and b/src/assets/meme-2.png differ diff --git a/src/assets/meme-3.png b/src/assets/meme-3.png new file mode 100644 index 0000000..63c867d Binary files /dev/null and b/src/assets/meme-3.png differ diff --git a/src/assets/meme-4.png b/src/assets/meme-4.png new file mode 100644 index 0000000..5d68765 Binary files /dev/null and b/src/assets/meme-4.png differ diff --git a/src/assets/vision-bg.png b/src/assets/vision-bg.png new file mode 100644 index 0000000..1f0ae32 Binary files /dev/null and b/src/assets/vision-bg.png differ diff --git a/src/assets/what-bg.png b/src/assets/what-bg.png new file mode 100644 index 0000000..ee4561e Binary files /dev/null and b/src/assets/what-bg.png differ diff --git a/src/components/Donate/How/How.astro b/src/components/Donate/How/How.astro new file mode 100644 index 0000000..4e3ce63 --- /dev/null +++ b/src/components/Donate/How/How.astro @@ -0,0 +1,16 @@ +--- +import './How.scss'; +--- + +
+
+

How should I donate?

+

Donate via Gitcoin during funding rounds

+

+ This is because they will match you up to 150%. Currently, this is on the dates: June 7, 2022 – June 22, 2022 +

+
+ Gitcoin +
+
+
diff --git a/src/components/Donate/How/How.scss b/src/components/Donate/How/How.scss new file mode 100644 index 0000000..372329b --- /dev/null +++ b/src/components/Donate/How/How.scss @@ -0,0 +1,32 @@ +@import "/src/styles/mixins.scss"; +@import "/src/styles/vars.scss"; + +#how { + display: flex; + flex-direction: column; + justify-content: center; + margin-top: 8em; + @include fluid-padding-lr; + padding-top: 14em; + padding-bottom: 16em; + + &::before { + background-image: url("/src/assets/donate-gfx-right.png"); + background-position: 85% 100%; + background-repeat: no-repeat; + background-size: contain; + } + + .feature-group { + max-width: 64em; + } + + @media screen and (max-width: 80rem) { + p { + background: rgba($color-blue-charcoal, 0.65); + border-radius: 0.5em; + padding: 0.3em 0.5em; + margin: -0.3em -0.5em; + } + } +} diff --git a/src/components/Donate/Jumbotron/Jumbotron.astro b/src/components/Donate/Jumbotron/Jumbotron.astro new file mode 100644 index 0000000..5a0c0f3 --- /dev/null +++ b/src/components/Donate/Jumbotron/Jumbotron.astro @@ -0,0 +1,9 @@ +--- +import '../../../styles/jumbotron.scss'; +--- + +
+

+ Lume is people-powered. +

+
diff --git a/src/components/Donate/Legal/Legal.astro b/src/components/Donate/Legal/Legal.astro new file mode 100644 index 0000000..4182199 --- /dev/null +++ b/src/components/Donate/Legal/Legal.astro @@ -0,0 +1,18 @@ +--- +import './Legal.scss'; +--- + + diff --git a/src/components/Donate/Legal/Legal.scss b/src/components/Donate/Legal/Legal.scss new file mode 100644 index 0000000..b6263be --- /dev/null +++ b/src/components/Donate/Legal/Legal.scss @@ -0,0 +1,32 @@ +@import "/src/styles/mixins.scss"; +@import "/src/styles/vars.scss"; + +#legal { + display: flex; + flex-direction: column; + justify-content: center; + padding: 11em 0 9em; + @include fluid-padding-lr; + + h2 { + margin-bottom: 1em; + @include fluid-font-size(2.8125rem); + line-height: 122%; + } + + p { + margin-top: 1.5em; + font-family: $font-family-jaldi; + @include fluid-font-size(1.375rem); + line-height: 157%; + color: $color-cloud; + } + + strong { + @include fluid-font-size(1.625rem); + } + + &::before { + bottom: -12%; + } +} diff --git a/src/components/Donate/Methods/Methods.astro b/src/components/Donate/Methods/Methods.astro new file mode 100644 index 0000000..7e7a018 --- /dev/null +++ b/src/components/Donate/Methods/Methods.astro @@ -0,0 +1,150 @@ +--- +import './Methods.scss'; +import QRCode from 'qrcode'; + +const currencies = []; + +const addCurrency = async (id, title, address) => { + currencies.push({ + id: id, + title: title, + address: address, + svgLogo: await import(`./icons/${id}.svg?raw`), + qrSmall: await QRCode.toDataURL(address, { version: 6, scale: 1, margin: 1 }), + qrLarge: await QRCode.toDataURL(address, { version: 6, scale: 7, margin: 2 }) + }); +}; + +await addCurrency('bitcoin', 'Bitcoin (BTC)', 'bc1q9xq2w4w2hjc240rs6mf0g8gpzz3rmcz4h77a2a'); +await addCurrency('litecoin', 'Litecoin (LTC)', 'ltc1qgk6fc4u6grqyhfzw208477ze35vrr5tcwhq8zq'); +await addCurrency('ethereum', 'Ethereum (ETH, USDT/USDC, ERC20)', '0x63cd2C691632720Ff2ABDD0b6AABA2466D3Fe468'); +await addCurrency('polygon', 'Polygon (MATIC)', '0x63cd2C691632720Ff2ABDD0b6AABA2466D3Fe468'); +await addCurrency('solana', 'Solana (SOL)', '4nMRucCuqttipwQXm31vBgoaxDW6o25TnD8fj1imviCu'); +await addCurrency('cardano', 'Cardano (ADA)', 'addr1q9jd69s53pdy9j567a27ac6uvc2966x0rjz2l9sxy4y5w8383jl87mrdf6uuk9ja7lmagm2p4vw30sa42kjylxxrdufqucgst6'); +await addCurrency('siacoin', 'Siacoin (SC)', '7506caa950cdddbaec8f465937b50324e942ac6f5280a053662e58e3cc8bdb543ab88ccd5c23'); +await addCurrency('monero', 'Monero (XMR)', '48A33fSyFo9YAiux3KHKVBagPGvqmcr2h4oy5pufJn6NUWyZsPF6PAufmrET3gLJjsLwxfU7HU9xe8mEeCqtHqvZN3Ly12h'); +await addCurrency('handshake', 'Handshake (HNS)', 'hs1qe67ak3j2u4yrq0qnfs2hmycxqdvaf9v5rjsxzy'); +await addCurrency('cosmos', 'Cosmos (ATOM)', 'cosmos1pvy8zyzqwz2r2jl9j9d3zrfmg6dqc5hyhj6d5z'); +await addCurrency('secret', 'Secret (SCRT)', 'secret18377vc3af588ggauhrpuyfd954lmmu05xqhf0y'); +await addCurrency('algorand', 'Algorand (ALGO)', '3QBE5TZ63TF5W7V2QRJWRB72M7INQLA3RZW4XHD3ISRE7CRYCVNU4EEVAE'); +--- + +
+
+

Donate Cryptocurrency

+
+ {currencies.map(currency => ( +
+
+ +

{currency.title}

+ +
+
+ +
{currency.address}
+
+
+ ))} + + + + +
+

+ **When Gitcoin is doing funding rounds, donating through their website will give a matching bonus of up to 150%. This means that your donation will have a bigger impact on the project during this time period.** +

+

+ If you are interested in donating through other means, please get in touch with us to discuss. If there is a cryptocurrency you wish to contribute with that we have not listed, please let me know! +

+
+ + +
\ No newline at end of file diff --git a/src/components/Donate/Methods/Methods.scss b/src/components/Donate/Methods/Methods.scss new file mode 100644 index 0000000..118e728 --- /dev/null +++ b/src/components/Donate/Methods/Methods.scss @@ -0,0 +1,287 @@ +@import "/src/styles/mixins.scss"; +@import "/src/styles/vars.scss"; + +#methods { + display: flex; + flex-direction: column; + justify-content: center; + margin: 2em 0 6em; + padding-top: 3em; + @include fluid-margin-lr; + font-family: $font-family-jaldi; + + h2 { + margin-bottom: 1em; + @include fluid-font-size(2.8125rem); + line-height: 122%; + } + + .method-grid { + display: grid; + grid-template-columns: repeat(1, 1fr); + gap: 2em; + margin-bottom: 4em; + + @media screen and (min-width: 48rem) { + grid-template-columns: repeat(2, 1fr); + } + + > div { + display: flex; + flex-direction: column; + padding: 4em 4em 1em; + background: $color-blue-charcoal; + border: 0.1em solid transparent; + border-radius: 1em; + transition: border-color 200ms; + + &:hover { + border-color: $color-aquamarine; + } + + > div:first-child { + display: flex; + align-items: center; + gap: 2em; + margin-bottom: 3em; + + svg { + flex-shrink: 0; + @include fluid-max-width-height(3.4375rem, 3.4375rem); + } + + h3 { + flex-grow: 1; + font-family: $font-family-jetbrains-mono; + @include fluid-font-size(1.5rem); + } + + img { + @include fluid-width-height(3.4375rem, 3.4375rem); + image-rendering: pixelated; + cursor: zoom-in; + } + } + } + + .address { + display: flex; + margin-bottom: 3em; + color: $color-cloud; + + div { + order: 1; + flex-grow: 1; + position: relative; + @include fluid-font-size(1.375rem); + word-break: break-all; + user-select: all; + } + + button { + order: 2; + flex-shrink: 0; + @include fluid-width-height(1.875rem, 1.875rem); + @include fluid-margin-lr-rem(0.78125rem); + mask-image: url('data:image/svg+xml,'); + background: $color-cloud; + transition: background $transition-duration; + + &:hover { + background: $color-white; + } + + &.success { + mask-image: url('data:image/svg+xml,'); + background: $color-aquamarine; + } + } + + button:hover + div, button.success + div { + &::before { + content: ""; + position: absolute; + inset: -0.5em; + padding: 0.5em; + background: $color-blue-charcoal; + animation: $transition-duration overlay-opacity forwards; + } + + &::after { + content: "Copy to Clipboard"; + position: absolute; + top: 0; + right: -0.5em; + padding: 0 0.5em; + background: rgba($color-blue-charcoal, 0.75); + text-align: center; + white-space: nowrap; + color: $color-white; + border-radius: 0.5em 0 0 0.5em; + animation: $transition-duration hint-opacity forwards; + transition: color $transition-duration; + } + } + + button.success + div { + &::after { + content: "Copied to Clipboard"; + color: $color-aquamarine; + } + } + } + } + + p { + margin-top: 1em; + @include fluid-font-size(1.25rem); + line-height: 157%; + color: $color-cloud; + } + + .btn-main { + @include fluid-font-size(1.5rem); + } + + #donate-bitcoin:hover { + border-color: #f7931a; + } + + #donate-litecoin:hover { + border-color: #345d9d; + } + + #donate-ethereum:hover { + border-color: #8c8c8c; + } + + #donate-polygon:hover { + border-color: #8247e5; + } + + #donate-solana:hover { + border-color: #dc1fff; + } + + #donate-cardano:hover { + border-color: #0033ad; + } + + #donate-siacoin:hover { + border-color: #20ee82; + } + + #donate-monero:hover { + border-color: #f26822; + } + + #donate-handshake:hover { + border-color: #fff; + } + + #donate-cosmos:hover { + border-color: #6f7390; + } + + #donate-secret:hover { + border-color: #fff; + } + + #donate-algorand:hover { + border-color: #fff; + } + + #donate-paypal { + &:hover { + border-color: #0070e0; + } + + .btn-main { + color: #fff; + background: #0070e0; + border-color: #0070e0; + + &:hover { + background: inherit; + } + } + } + + #donate-patreon { + &:hover { + border-color: #ff424d; + } + + .btn-main { + color: #fff; + background: #ff424d; + border-color: #ff424d; + + &:hover { + background: inherit; + } + } + } + + #donate-liberapay { + &:hover { + border-color: #f6c915; + } + + .btn-main { + color: #000; + background: #f6c915; + border-color: #f6c915; + + &:hover { + color: inherit; + background: inherit; + } + } + } + + #donate-github { + &:hover { + border-color: #fff; + } + + .btn-main { + color: #000; + background: #fff; + border-color: #fff; + + &:hover { + color: inherit; + background: inherit; + } + } + } +} + +#qr-dialog { + padding: 0; + + &::backdrop { + background: rgba($color-black, 0.85); + } +} + +@keyframes overlay-opacity { + 0% { + opacity: 0; + } + + 100% { + opacity: 0.75; + } +} + +@keyframes hint-opacity { + 0% { + opacity: 0; + } + + 100% { + opacity: 1; + } +} diff --git a/src/components/Donate/Methods/icons/algorand.svg b/src/components/Donate/Methods/icons/algorand.svg new file mode 100644 index 0000000..4273af5 --- /dev/null +++ b/src/components/Donate/Methods/icons/algorand.svg @@ -0,0 +1,3 @@ + + + \ No newline at end of file diff --git a/src/components/Donate/Methods/icons/bitcoin.svg b/src/components/Donate/Methods/icons/bitcoin.svg new file mode 100644 index 0000000..46595c3 --- /dev/null +++ b/src/components/Donate/Methods/icons/bitcoin.svg @@ -0,0 +1,4 @@ + + + + \ No newline at end of file diff --git a/src/components/Donate/Methods/icons/cardano.svg b/src/components/Donate/Methods/icons/cardano.svg new file mode 100644 index 0000000..0baa777 --- /dev/null +++ b/src/components/Donate/Methods/icons/cardano.svg @@ -0,0 +1,32 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/src/components/Donate/Methods/icons/cosmos.svg b/src/components/Donate/Methods/icons/cosmos.svg new file mode 100644 index 0000000..6108d4f --- /dev/null +++ b/src/components/Donate/Methods/icons/cosmos.svg @@ -0,0 +1,11 @@ + + + + + + + + + + + \ No newline at end of file diff --git a/src/components/Donate/Methods/icons/ethereum.svg b/src/components/Donate/Methods/icons/ethereum.svg new file mode 100644 index 0000000..3f0e216 --- /dev/null +++ b/src/components/Donate/Methods/icons/ethereum.svg @@ -0,0 +1,8 @@ + + + + + + + + \ No newline at end of file diff --git a/src/components/Donate/Methods/icons/handshake.svg b/src/components/Donate/Methods/icons/handshake.svg new file mode 100644 index 0000000..c11b041 --- /dev/null +++ b/src/components/Donate/Methods/icons/handshake.svg @@ -0,0 +1,3 @@ + + + \ No newline at end of file diff --git a/src/components/Donate/Methods/icons/litecoin.svg b/src/components/Donate/Methods/icons/litecoin.svg new file mode 100644 index 0000000..749a3cd --- /dev/null +++ b/src/components/Donate/Methods/icons/litecoin.svg @@ -0,0 +1,4 @@ + + + + \ No newline at end of file diff --git a/src/components/Donate/Methods/icons/monero.svg b/src/components/Donate/Methods/icons/monero.svg new file mode 100644 index 0000000..2d2587d --- /dev/null +++ b/src/components/Donate/Methods/icons/monero.svg @@ -0,0 +1,5 @@ + + + + + \ No newline at end of file diff --git a/src/components/Donate/Methods/icons/polygon.svg b/src/components/Donate/Methods/icons/polygon.svg new file mode 100644 index 0000000..6f4f2e2 --- /dev/null +++ b/src/components/Donate/Methods/icons/polygon.svg @@ -0,0 +1,3 @@ + + + \ No newline at end of file diff --git a/src/components/Donate/Methods/icons/secret.svg b/src/components/Donate/Methods/icons/secret.svg new file mode 100644 index 0000000..b2279f1 --- /dev/null +++ b/src/components/Donate/Methods/icons/secret.svg @@ -0,0 +1,10 @@ + + + + + + \ No newline at end of file diff --git a/src/components/Donate/Methods/icons/siacoin.svg b/src/components/Donate/Methods/icons/siacoin.svg new file mode 100644 index 0000000..b0bcbcc --- /dev/null +++ b/src/components/Donate/Methods/icons/siacoin.svg @@ -0,0 +1,5 @@ + + + + + \ No newline at end of file diff --git a/src/components/Donate/Methods/icons/solana.svg b/src/components/Donate/Methods/icons/solana.svg new file mode 100644 index 0000000..fc6b7da --- /dev/null +++ b/src/components/Donate/Methods/icons/solana.svg @@ -0,0 +1,17 @@ + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/src/components/Donate/Why/Why.astro b/src/components/Donate/Why/Why.astro new file mode 100644 index 0000000..ef37440 --- /dev/null +++ b/src/components/Donate/Why/Why.astro @@ -0,0 +1,24 @@ +--- +import './Why.scss'; +--- + +
+
+

Help us break the pattern

+

Why should I donate to Lume?

+ +

+ Every single day you use the Internet, your data is sold to companies to pay for your usage. Help us break the pattern by funding the creation of free and open-source Web3 tools. +

+
+ Donate +
+
+
diff --git a/src/components/Donate/Why/Why.scss b/src/components/Donate/Why/Why.scss new file mode 100644 index 0000000..73cbf8d --- /dev/null +++ b/src/components/Donate/Why/Why.scss @@ -0,0 +1,51 @@ +@import "/src/styles/mixins.scss"; +@import "/src/styles/vars.scss"; + +#why { + position: relative; + display: flex; + justify-content: flex-end; + align-items: center; + max-width: 185.6em; + min-height: 58.8em; + margin: 0 auto; + + &::before { + content: ""; + position: absolute; + top: 0; + bottom: 0; + left: min(0em, calc((100% - 92.2em) / 2)); + width: calc(100% - 64em - 7.5%); + min-width: 92.2em; + background-image: url("/src/assets/donate-why-bg.png"); + background-position: 50% 0; + background-repeat: no-repeat; + background-size: contain; + z-index: -1; + } + + .feature-group { + box-sizing: content-box; + margin: 2em 7.5%; + max-width: 64em; + } + + @media screen and (max-width: 80rem) { + ul, p { + background: rgba($color-blue-charcoal-2, 0.65); + } + + ul { + border-radius: 0.5em 0.5em 0 0; + padding: 0.3em 0.5em 0.3em 1.5em; + margin: -0.3em -0.5em 0.28em; + } + + p { + border-radius: 0 0 0.5em 0.5em; + padding: 0.3em 0.5em; + margin: -0.3em -0.5em; + } + } +} diff --git a/src/components/Home/CTO/CTO.astro b/src/components/Home/CTO/CTO.astro new file mode 100644 index 0000000..5331c52 --- /dev/null +++ b/src/components/Home/CTO/CTO.astro @@ -0,0 +1,21 @@ +--- +import './CTO.scss'; +import avatar from '/src/assets/cto-avatar.webp'; +--- + +
+
+

Community-Powered

+

Building a new world for your data

+

+ 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. +

+
+ +
+ Derrick Hammer
+ CTO +
+
+
+
diff --git a/src/components/Home/CTO/CTO.scss b/src/components/Home/CTO/CTO.scss new file mode 100644 index 0000000..4c86a67 --- /dev/null +++ b/src/components/Home/CTO/CTO.scss @@ -0,0 +1,66 @@ +@import "/src/styles/mixins.scss"; +@import "/src/styles/vars.scss"; + +#cto { + position: relative; + display: flex; + justify-content: flex-end; + align-items: center; + max-width: 185.6em; + min-height: 58.8em; + margin: 0 auto; + + &::before { + content: ""; + position: absolute; + top: 0; + bottom: 0; + left: min(0em, calc((100% - 95em) / 2)); + width: calc(100% - 64em - 7.5%); + min-width: 95em; + background-image: url("/src/assets/geometric-bg.webp"); + background-position: 50% 100%; + background-repeat: no-repeat; + background-size: contain; + z-index: -1; + } + + .feature-group { + box-sizing: content-box; + margin: 6em 7.5%; + max-width: 64em; + } + + .bio { + display: inline-flex; + align-items: center; + margin-top: 1.5em; + gap: 1.2em; + font-family: $font-family-jaldi; + color: $color-cloud; + @include fluid-font-size(1.5rem); + + img { + @include fluid-width-height(5.875rem, 5.875rem); + } + + strong { + @include fluid-font-size(1.625rem); + line-height: 133%; + color: $color-white; + } + } + + @media screen and (max-width: 80rem) { + p, .bio div { + background: rgba($color-blue-charcoal-2, 0.65); + border-radius: 0 0.5em 0.5em 0; + padding: 0.3em 0.5em; + margin: -0.3em -0.5em; + } + + .bio { + margin-top: 1.27em; + } + } +} diff --git a/src/components/Home/Grid/Grid.astro b/src/components/Home/Grid/Grid.astro new file mode 100644 index 0000000..53ccbfa --- /dev/null +++ b/src/components/Home/Grid/Grid.astro @@ -0,0 +1,30 @@ +--- +import './Grid.scss'; +--- + +
+
+

Web3 Universal Storage

+

Get access to a universal network drive, powered by the Web3/dWeb cloud. Enjoy portability to any device or platform you wish.

+
+
+

Web3 Gateway

+

Install the Lume Web3 Extension and have a 1-click gateway into the Web3 internet on Opera, Vivaldi, Edge and Firefox.

+
+
+

Build Your Site, Censorship Free

+

Combining Lume and Skynet technologies, you can build a website just like you are on the Web2 internet.

+
+
+

Web3 Universal Storage

+

Get access to a universal network drive, powered by the Web3/dWeb cloud. Enjoy portability to any device or platform you wish.

+
+
+

Web3 Gateway

+

Install the Lume Web3 Extension and have a 1-click gateway into the Web3 internet on Opera, Vivaldi, Edge and Firefox.

+
+
+

Build Your Site, Censorship Free

+

Combining Lume and Skynet technologies, you can build a website just like you are on the Web2 internet.

+
+
diff --git a/src/components/Home/Grid/Grid.scss b/src/components/Home/Grid/Grid.scss new file mode 100644 index 0000000..0abf404 --- /dev/null +++ b/src/components/Home/Grid/Grid.scss @@ -0,0 +1,3 @@ +#grid { + padding-top: 5.5em; +} diff --git a/src/components/Home/Meme/Meme.astro b/src/components/Home/Meme/Meme.astro new file mode 100644 index 0000000..107a943 --- /dev/null +++ b/src/components/Home/Meme/Meme.astro @@ -0,0 +1,74 @@ +--- +import './Meme.scss'; +import meme1 from '/src/assets/meme-1.png'; +import meme2 from '/src/assets/meme-2.png'; +import meme3 from '/src/assets/meme-3.png'; +import meme4 from '/src/assets/meme-4.png'; +--- + +
+
+

+ What is the Web? +

+

+ Why Web3 matters +

+

+ 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. +

+
+ Learn More +
+
+
+
+
+ Web 1 +

Web1

+
+

+ 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. +

+
+
+
+ +

Web2

+
+

+ 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. +

+
+
+
+ +

Crypto & Defi

+
+

+ 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. +

+
+
+
+ +

Web3

+
+

+ 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. +

+
+
+
diff --git a/src/components/Home/Meme/Meme.scss b/src/components/Home/Meme/Meme.scss new file mode 100644 index 0000000..a33b7db --- /dev/null +++ b/src/components/Home/Meme/Meme.scss @@ -0,0 +1,96 @@ +@import "/src/styles/mixins.scss"; +@import "/src/styles/vars.scss"; + +#meme { + display: flex; + align-items: center; + @include fluid-padding-lr; + padding-top: 12em; + padding-bottom: 12em; + gap: 10em; + + .feature-group { + max-width: 64em; + } + + .meme-items { + display: flex; + flex-direction: column; + align-items: center; + gap: 1.5em; + } + + .meme-item { + display: flex; + align-items: center; + gap: 2em; + + div { + flex-shrink: 0; + display: flex; + align-items: center; + gap: 2em; + } + + img { + @include fluid-width(13.125rem); + } + + h2 { + width: 8.6em; + @include fluid-font-size(1.5625rem); + font-weight: 700; + text-align: center; + color: $color-aquamarine; + text-transform: uppercase; + } + + p { + font-family: $font-family-jaldi; + @include fluid-font-size(1.3125rem); + line-height: 123.81%; + color: $color-cloud; + } + } + + @media screen and (max-width: 80rem) { + flex-direction: column; + gap: 5em; + + .feature-group { + max-width: none; + margin: 2em 0; + } + } + + @media screen and (max-width: 56rem) { + .feature-group { + max-width: 64em; + } + + .meme-items { + gap: 3em; + } + + .meme-item { + flex-direction: column; + max-width: 64em; + + p { + text-align: center; + } + + img { + @include fluid-width(11.25rem); + } + } + } + + @media screen and (min-width: 80.000001rem) and (max-width: 100rem) { + .meme-item { + h2 { + width: 4.5em; + } + } + } +} diff --git a/src/components/Home/Message/Message.astro b/src/components/Home/Message/Message.astro new file mode 100644 index 0000000..d3908de --- /dev/null +++ b/src/components/Home/Message/Message.astro @@ -0,0 +1,12 @@ +--- +import './Message.scss'; +--- + +
+

+ A message from Derrick +

+

+ 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. +

+
diff --git a/src/components/Home/Message/Message.scss b/src/components/Home/Message/Message.scss new file mode 100644 index 0000000..f290159 --- /dev/null +++ b/src/components/Home/Message/Message.scss @@ -0,0 +1,28 @@ +@import "/src/styles/mixins.scss"; +@import "/src/styles/vars.scss"; + +#message { + padding: 5em 0; + @include fluid-padding-lr; + background: $color-aquamarine; + color: $color-blue-charcoal-2; + + @media screen and (max-width: 47.99999rem) { + text-align: center; + } + + h2 { + margin-bottom: 0.25em; + @include fluid-font-size(2rem); + font-weight: 700; + line-height: 153%; + text-transform: none; + color: inherit; + } + + p { + font-family: $font-family-jaldi; + @include fluid-font-size(1.5rem); + line-height: 137%; + } +} diff --git a/src/components/Home/PoweredBy/PoweredBy.astro b/src/components/Home/PoweredBy/PoweredBy.astro new file mode 100644 index 0000000..c918773 --- /dev/null +++ b/src/components/Home/PoweredBy/PoweredBy.astro @@ -0,0 +1,49 @@ +--- +import './PoweredBy.scss'; +--- + +
+

Powered By

+
+ + + +
+
diff --git a/src/components/Home/PoweredBy/PoweredBy.scss b/src/components/Home/PoweredBy/PoweredBy.scss new file mode 100644 index 0000000..4c61e0a --- /dev/null +++ b/src/components/Home/PoweredBy/PoweredBy.scss @@ -0,0 +1,54 @@ +@import "/src/styles/mixins.scss"; +@import "/src/styles/vars.scss"; + +#powered-by { + display: flex; + align-items: center; + justify-content: center; + gap: 4em; + margin: 12em 0; + + @media screen and (max-width: 47.99999rem) { + flex-direction: column; + gap: 2.5em; + } + + div { + display: flex; + align-items: center; + gap: 2.5em; + } + + h2 { + @include fluid-font-size(1.5625rem); + font-weight: 700; + line-height: 100%; + text-transform: uppercase; + color: $color-aquamarine; + + @media screen and (min-width: 48rem) { + margin-top: 0.75em; + } + } + + a { + padding: 0.5em; + color: $color-alto; + + &:hover { + color: $color-white; + } + } + + .sia-logo svg { + @include fluid-width(5.5rem); + } + + .hns-logo svg { + @include fluid-width(4.5rem); + } + + .osi-logo svg { + @include fluid-width(4.5rem); + } +} diff --git a/src/components/Home/Socials/Socials.astro b/src/components/Home/Socials/Socials.astro new file mode 100644 index 0000000..45b2957 --- /dev/null +++ b/src/components/Home/Socials/Socials.astro @@ -0,0 +1,30 @@ +--- +import './Socials.scss'; +--- + +
+

Get in touch

+
+ + + + +
+
diff --git a/src/components/Home/Socials/Socials.scss b/src/components/Home/Socials/Socials.scss new file mode 100644 index 0000000..b30a1ac --- /dev/null +++ b/src/components/Home/Socials/Socials.scss @@ -0,0 +1,50 @@ +@import "/src/styles/mixins.scss"; +@import "/src/styles/vars.scss"; + +#socials { + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + gap: 3em; + margin: 12em 0 8em; + + div { + display: flex; + align-items: center; + gap: 2.5em; + } + + h2 { + @include fluid-font-size(1.5625rem); + font-weight: 700; + line-height: 100%; + text-transform: uppercase; + color: $color-aquamarine; + } + + a { + padding: 0.5em; + color: $color-alto; + + &:hover { + color: $color-white; + } + } + + .github-logo svg { + @include fluid-width(3.5rem); + } + + .discord-logo svg { + @include fluid-width(3.5rem); + } + + .twitter-logo svg { + @include fluid-width(3.5rem); + } + + .facebook-logo svg { + @include fluid-width(3.5rem); + } +} diff --git a/src/components/Home/Typewriter/Typewriter.astro b/src/components/Home/Typewriter/Typewriter.astro new file mode 100644 index 0000000..3bd95f5 --- /dev/null +++ b/src/components/Home/Typewriter/Typewriter.astro @@ -0,0 +1,10 @@ +--- +import './Typewriter.scss'; +import TypewriterContent from './TypewriterContent.jsx'; +--- + +
+

+ +

+
diff --git a/src/components/Home/Typewriter/Typewriter.scss b/src/components/Home/Typewriter/Typewriter.scss new file mode 100644 index 0000000..0cb64c4 --- /dev/null +++ b/src/components/Home/Typewriter/Typewriter.scss @@ -0,0 +1,24 @@ +@import "/src/styles/mixins.scss"; +@import "/src/styles/vars.scss"; + +#typewriter { + display: flex; + align-items: center; + justify-content: center; + padding: 0 7.5%; + + h1 { + display: flex; + align-items: center; + min-height: 2.2em; + margin: max(1.1em, 5rem) 0 max(0.9em, 7rem); + @include fluid-font-size-xs(6.25rem); + line-height: 110%; + letter-spacing: -0.06em; + text-align: center; + } + + .highlight { + color: $color-aquamarine; + } +} diff --git a/src/components/Home/Typewriter/TypewriterContent.jsx b/src/components/Home/Typewriter/TypewriterContent.jsx new file mode 100644 index 0000000..1826c3a --- /dev/null +++ b/src/components/Home/Typewriter/TypewriterContent.jsx @@ -0,0 +1,26 @@ +import Typewriter from "typewriter-effect"; + +const HeaderContent = () => { + var + headerStrings = [ + 'Access to the web
for the masses', + 'An open web for business', + 'Web3 for the masses', + 'Web3 for you' + ], + randomString = headerStrings[Math.floor(Math.random() * headerStrings.length)], + words = randomString.split(' '); + + return ( + _' }} onInit={ (typewriter) => { + typewriter + .changeDelay(50) + .typeString(randomString.substring(0, randomString.lastIndexOf(' ')) + ' ') + .start(); + typewriter + .typeString('' + words[words.length - 1] + '') + } }/> + ); +}; + +export default HeaderContent; diff --git a/src/components/Home/Vision/Vision.astro b/src/components/Home/Vision/Vision.astro new file mode 100644 index 0000000..e35ecec --- /dev/null +++ b/src/components/Home/Vision/Vision.astro @@ -0,0 +1,16 @@ +--- +import './Vision.scss'; +--- + +
+
+

Our Vision

+

Make Web3 easy for everyone

+

+ 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. +

+
+ Download Extension +
+
+
diff --git a/src/components/Home/Vision/Vision.scss b/src/components/Home/Vision/Vision.scss new file mode 100644 index 0000000..0e9a523 --- /dev/null +++ b/src/components/Home/Vision/Vision.scss @@ -0,0 +1,37 @@ +@import "/src/styles/mixins.scss"; +@import "/src/styles/vars.scss"; + +#vision { + position: relative; + display: flex; + flex-direction: column; + justify-content: center; + min-height: 56.8em; + @include fluid-margin-lr; + + &::before { + content: ""; + position: absolute; + inset: 0; + min-width: 68em; + margin-left: min(0em, calc((100% - 68em) / 2)); + background-image: url("/src/assets/video-placeholder.webp"); + background-position: right top; + background-repeat: no-repeat; + background-size: contain; + z-index: -1; + } + + .feature-group { + max-width: 64em; + } + + @media screen and (max-width: 80rem) { + p { + background: rgba($color-blue-charcoal-2, 0.65); + border-radius: 0.5em; + padding: 0.3em 0.5em; + margin: -0.3em -0.5em; + } + } +} diff --git a/src/components/Home/Web3/Web3.astro b/src/components/Home/Web3/Web3.astro new file mode 100644 index 0000000..926ee8a --- /dev/null +++ b/src/components/Home/Web3/Web3.astro @@ -0,0 +1,20 @@ +--- +import './Web3.scss'; +--- + +
+
+

+ What is the Web? +

+

+ Why Web3 matters +

+

+ 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. +

+
+ Learn More +
+
+
diff --git a/src/components/Home/Web3/Web3.scss b/src/components/Home/Web3/Web3.scss new file mode 100644 index 0000000..236c0ea --- /dev/null +++ b/src/components/Home/Web3/Web3.scss @@ -0,0 +1,45 @@ +@import "/src/styles/mixins.scss"; +@import "/src/styles/vars.scss"; + +#web3 { + display: flex; + flex-direction: column; + justify-content: center; + height: 70em; + margin-top: 6em; + + &::after { + content: ""; + position: absolute; + left: 0; + top: 50%; + width: 100%; + height: 81.7em; + max-width: 63.7em; + margin: -40em 0 0; + background-image: url("/src/assets/img-left.webp"); + background-position: left; + background-repeat: no-repeat; + background-size: contain; + pointer-events: none; + z-index: -1; + } + + .feature-group { + @include fluid-position-left(58.4em, 58em); + max-width: 64em; + + h2 { + margin-top: 1em; + } + + @media screen and (max-width: 80rem) { + p { + background: rgba($color-blue-charcoal, 0.65); + border-radius: 0.5em; + padding: 0.3em 0.5em; + margin: -0.3em -0.5em; + } + } + } +} diff --git a/src/components/Layout/Footer/Footer.astro b/src/components/Layout/Footer/Footer.astro new file mode 100644 index 0000000..634ac9a --- /dev/null +++ b/src/components/Layout/Footer/Footer.astro @@ -0,0 +1,99 @@ +--- +import "./Footer.scss"; +import logo from "/src/assets/lume-logo.png"; +--- + + diff --git a/src/components/Layout/Footer/Footer.scss b/src/components/Layout/Footer/Footer.scss new file mode 100644 index 0000000..fc027f9 --- /dev/null +++ b/src/components/Layout/Footer/Footer.scss @@ -0,0 +1,134 @@ +@import "/src/styles/mixins.scss"; +@import "/src/styles/vars.scss"; + +footer { + display: flex; + gap: 2%; + padding-top: 7em; + padding-bottom: 8em; + @include fluid-padding-lr; + font-family: $font-family-jaldi; + @include fluid-font-size(0.625rem); + background: $color-blue-charcoal; + + > div { + flex-basis: 0; + flex-grow: 1; + @include fluid-font-size(1.375rem); + + &:first-child { + flex-grow: 1.5 !important; + display: flex; + flex-direction: column; + } + } + + img { + @include fluid-width(8.4375rem); + } + + a:hover { + color: $color-white; + } + + h5 { + @include fluid-font-size(1.75rem); + line-height: 100%; + white-space: nowrap; + margin: 0.3em 0; + } + + li { + line-height: 138%; + color: $color-cloud; + list-style-type: none; + white-space: nowrap; + } +} + +.footer-logo { + a { + display: inline-block; + } +} + +.footer-contact { + margin: auto 0; + color: $color-cloud; + + a { + display: inline-flex; + align-items: center; + } + + svg { + @include fluid-width-height(1.375rem, 1.375rem); + margin-right: 0.5em; + } +} + +.footer-phrase { + margin: auto 0 0; + font-family: $font-family-jetbrains-mono; + font-weight: bold; + line-height: 133%; + color: $color-aquamarine; +} + +@media screen and (min-width: 48rem) and (max-width: 64rem) { + footer { + flex-wrap: wrap; + + > div:first-child { + order: 1; + flex: 0 0 100%; + margin-top: 3%; + flex-direction: row; + justify-content: space-between; + align-items: center; + } + } + + .footer-contact { + margin: 0; + } + + .footer-phrase { + margin: 0; + } +} + +@media screen and (max-width: 47.99999rem) { + footer { + flex-direction: column; + padding-top: 1.5rem; + padding-bottom: 5rem; + text-align: center; + + > div { + margin-top: 2rem; + font-size: 1.25rem; + } + + > div:first-child { + margin-top: 4rem; + order: 2; + } + + img { + width: 8.4375rem; + } + + h5 { + font-size: 1.625rem; + } + } + + .footer-contact { + margin: 1.25rem 0; + + a { + justify-content: center; + } + } +} diff --git a/src/components/Layout/JoinCommunity/JoinCommunity.astro b/src/components/Layout/JoinCommunity/JoinCommunity.astro new file mode 100644 index 0000000..0cd7120 --- /dev/null +++ b/src/components/Layout/JoinCommunity/JoinCommunity.astro @@ -0,0 +1,43 @@ +--- +import './JoinCommunity.scss'; +--- + +
+
+

+ Join our community, lend a hand. +

+

+ Web3 gives people control over their data, privacy, and ownership. +

+
+
+ +
+
+ +
+
+ +
+
+ +
+
diff --git a/src/components/Layout/JoinCommunity/JoinCommunity.scss b/src/components/Layout/JoinCommunity/JoinCommunity.scss new file mode 100644 index 0000000..41c3eb9 --- /dev/null +++ b/src/components/Layout/JoinCommunity/JoinCommunity.scss @@ -0,0 +1,81 @@ +@import "/src/styles/mixins.scss"; +@import "/src/styles/vars.scss"; + +#join-community { + display: flex; + align-items: center; + justify-content: space-between; + gap: 2em; + padding: 5em 0; + @include fluid-padding-lr; + background: $color-aquamarine; + color: $color-blue-charcoal-2; + @include fluid-font-size(0.625rem); + + div { + flex-grow: 1; + + &:first-child { + flex-grow: 10; + } + + &:last-child { + flex-grow: 0; + } + } + + @media screen and (max-width: 56rem) { + flex-wrap: wrap; + justify-content: center; + + div:first-child { + flex-basis: 100%; + margin-bottom: 2em; + text-align: center; + } + + div { + flex-grow: 0; + } + } + + h2 { + margin-bottom: 0.25em; + @include fluid-font-size(2rem); + font-weight: 700; + line-height: 153%; + text-transform: none; + color: inherit; + } + + p { + font-family: $font-family-jaldi; + @include fluid-font-size(1.5rem); + line-height: 157%; + } + + a { + display: block; + color: #0B3F48; + + &:hover { + color: inherit; + } + } + + .github-logo svg { + @include fluid-width(3.625rem); + } + + .discord-logo svg { + @include fluid-width(3.625rem); + } + + .twitter-logo svg { + @include fluid-width(3.625rem); + } + + .facebook-logo svg { + @include fluid-width(3.625rem); + } +} diff --git a/src/components/Layout/Navbar/Navbar.jsx b/src/components/Layout/Navbar/Navbar.jsx new file mode 100644 index 0000000..bf2bbad --- /dev/null +++ b/src/components/Layout/Navbar/Navbar.jsx @@ -0,0 +1,74 @@ +import React, { useState, useEffect } from 'react'; +import './Navbar.scss'; +import logo from '/src/assets/lume-logo.png'; + +function Navbar({ view }) { + const [nav, setNav] = useState(false); + + const toggleNav = () => { + if(nav) { + document.body.classList.remove("scroll-lock"); + setNav(false); + } else { + document.body.classList.add("scroll-lock"); + setNav(true); + } + } + + const onMenuClick = function(event) { + if(!nav) { + return; + } + + if(event.pageX < event.target.offsetLeft) { + // click outside of menu + toggleNav(); + } + } + + useEffect(() => { + let resizeTimeout; + const onResize = () => { + clearTimeout(resizeTimeout); + resizeTimeout = setTimeout(() => { + if(nav && window.innerWidth >= 900) { + toggleNav(); + } + }, 25); + }; + + window.addEventListener('resize', onResize); + + return () => window.removeEventListener('resize', onResize); + }, [nav]); + + return ( + + ) +} + +export default Navbar diff --git a/src/components/Layout/Navbar/Navbar.scss b/src/components/Layout/Navbar/Navbar.scss new file mode 100644 index 0000000..c14ca95 --- /dev/null +++ b/src/components/Layout/Navbar/Navbar.scss @@ -0,0 +1,111 @@ +@import "/src/styles/mixins.scss"; +@import "/src/styles/vars.scss"; + +nav { + display: flex; + justify-content: space-between; + align-items: center; + padding: 2em 3.75%; + @include fluid-font-size(1.25rem); + white-space: nowrap; + + .logo { + flex-shrink: 0; + + img { + @include fluid-width-height(13.125rem, 4.375rem); + } + } +} + +menu { + display: flex; + align-items: center; + + li > a { + display: block; + padding: 0.55em 0.9em; + @include fluid-font-size(1.375rem); + text-decoration: underline; + text-decoration-color: transparent; + transition: text-decoration-color $transition-duration; + + &.current, &:hover, &:active { + text-decoration-color: inherit; + } + } + + .download-btn { + margin-left: 0.9em; + @include fluid-font-size(1.375rem); + text-decoration: none; + } +} + +.hamburger { + display: none; + font-size: 2rem; + cursor: pointer; + z-index: 1; + margin: 0 3.75% 0 2rem; +} + +@media screen and (max-width: 56rem) { + nav { + position: sticky; + top: 0; + background: rgba($color-blue-charcoal-2, 0.85); + z-index: 2; + } + + menu { + display: flex; + align-items: flex-start; + flex-direction: column; + position: fixed; + top: 0; + right: min(-20rem, -100vw); + bottom: 0; + padding: 7.5em 7.5% 1em; + background: rgba($color-blue-charcoal-2, 0.85); + transition: right $transition-duration; + overflow-y: auto; + + &.active { + right: 0; + + &::before { + content: ""; + position: fixed; + inset: 0; + background: $color-black; + animation: $transition-duration bg-opacity forwards; + z-index: -1; + } + } + + li > a { + font-size: 1.25rem; + padding-left: 0.8em; + } + + .download-btn { + font-size: 1.25rem; + margin: 1.1em 0 0 0; + } + } + + .hamburger { + display: block; + } +} + +@keyframes bg-opacity { + 0% { + opacity: 0; + } + + 100% { + opacity: 0.85; + } +} diff --git a/src/components/Vision/Community/Community.astro b/src/components/Vision/Community/Community.astro new file mode 100644 index 0000000..464208a --- /dev/null +++ b/src/components/Vision/Community/Community.astro @@ -0,0 +1,13 @@ +--- +import './Community.scss'; +--- + +
+
+

Community-Powered

+

Building a new world for your data

+

+ 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. +

+
+
diff --git a/src/components/Vision/Community/Community.scss b/src/components/Vision/Community/Community.scss new file mode 100644 index 0000000..7dc19e8 --- /dev/null +++ b/src/components/Vision/Community/Community.scss @@ -0,0 +1,28 @@ +@import "/src/styles/mixins.scss"; +@import "/src/styles/vars.scss"; + +#community { + position: relative; + background-image: url("/src/assets/community-power-bg.png"); + background-size: max(157.5em, 100%); + background-position: right; + padding-top: max(61.4525em, 39.0175%); + + .feature-group { + position: absolute; + top: 0; + bottom: 0; + display: flex; + flex-direction: column; + justify-content: center; + @include fluid-margin-lr; + max-width: 64em; + } + + p { + background: rgba($color-blue-charcoal, 0.65); + border-radius: 0.5em; + padding: 0.3em 0.5em; + margin: -0.3em -0.5em; + } +} diff --git a/src/components/Vision/Grid/Grid.astro b/src/components/Vision/Grid/Grid.astro new file mode 100644 index 0000000..a4d4831 --- /dev/null +++ b/src/components/Vision/Grid/Grid.astro @@ -0,0 +1,29 @@ +--- +import './Grid.scss'; +--- + +
+
+

Freedom. Privacy. Ownership.

+
+
+

Web3 Universal Storage

+

Get access to a universal network drive, powered by the Web3/dWeb cloud. Enjoy portability to any device or platform you wish.

+
+
+

Web3 Gateway

+

Install the Lume Web3 Extension and have a 1-click gateway into the Web3 internet on Opera, Vivaldi, Edge and Firefox.

+
+
+

Web3 Universal Storage

+

Get access to a universal network drive, powered by the Web3/dWeb cloud. Enjoy portability to any device or platform you wish.

+
+
+

Web3 Gateway

+

Install the Lume Web3 Extension and have a 1-click gateway into the Web3 internet on Opera, Vivaldi, Edge and Firefox.

+
+
+

Build Your Site, Censorship Free

+

Combining Lume and Skynet technologies, you can build a website just like you are on the Web2 internet.

+
+
diff --git a/src/components/Vision/Grid/Grid.scss b/src/components/Vision/Grid/Grid.scss new file mode 100644 index 0000000..d6e5532 --- /dev/null +++ b/src/components/Vision/Grid/Grid.scss @@ -0,0 +1,20 @@ +@import "/src/styles/mixins.scss"; +@import "/src/styles/vars.scss"; + +#grid { + padding-top: 2.05em; + padding-bottom: 2.05em; + + div:first-child { + background: inherit; + border: none + } + + h2 { + font-family: $font-family-jetbrains-mono; + @include fluid-font-size(2.75rem); + font-weight: 700; + line-height: 129.55%; + color: $color-aquamarine; + } +} diff --git a/src/components/Vision/Jumbotron/Jumbotron.astro b/src/components/Vision/Jumbotron/Jumbotron.astro new file mode 100644 index 0000000..bd75b66 --- /dev/null +++ b/src/components/Vision/Jumbotron/Jumbotron.astro @@ -0,0 +1,9 @@ +--- +import '../../../styles/jumbotron.scss'; +--- + +
+

+ Easy Web3 access, storage, publishing, and payment for content creation. +

+
diff --git a/src/components/Vision/People/People.astro b/src/components/Vision/People/People.astro new file mode 100644 index 0000000..c4fc682 --- /dev/null +++ b/src/components/Vision/People/People.astro @@ -0,0 +1,22 @@ +--- +import './People.scss'; +--- + +
+
+

Community-Powered

+

All about the people, no VC here.

+

+ 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. 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. +

+

+ 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. +

+

+ 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. +

+
+ Contribute to our cause +
+
+
diff --git a/src/components/Vision/People/People.scss b/src/components/Vision/People/People.scss new file mode 100644 index 0000000..1a70953 --- /dev/null +++ b/src/components/Vision/People/People.scss @@ -0,0 +1,42 @@ +@import "/src/styles/mixins.scss"; +@import "/src/styles/vars.scss"; + +#people { + position: relative; + display: flex; + justify-content: flex-end; + align-items: center; + max-width: 185.6em; + min-height: 78.4em; + margin: 0 auto; + + &::before { + content: ""; + position: absolute; + top: 0; + bottom: 0; + left: min(0em, calc((100% - 95em) / 2)); + width: calc(100% - 64em - 7.5%); + min-width: 95em; + background-image: url("/src/assets/double-brand-bg.png"); + background-position: 50% 100%; + background-repeat: no-repeat; + background-size: contain; + z-index: -1; + } + + .feature-group { + box-sizing: content-box; + padding: 9em 7.5%; + max-width: 64em; + } + + @media screen and (max-width: 80rem) { + p { + background: rgba($color-blue-charcoal-2, 0.65); + border-radius: 0.5em; + padding: 0.3em 0.5em; + margin: -0.3em -0.5em; + } + } +} diff --git a/src/components/What/Astronaut/Astronaut.astro b/src/components/What/Astronaut/Astronaut.astro new file mode 100644 index 0000000..c92326d --- /dev/null +++ b/src/components/What/Astronaut/Astronaut.astro @@ -0,0 +1,16 @@ +--- +import './Astronaut.scss'; +--- + +
+
+

Community-Powered

+

Re-defining Web3, for the good of all

+

+ 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. 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. +

+
+ Donate +
+
+
diff --git a/src/components/What/Astronaut/Astronaut.scss b/src/components/What/Astronaut/Astronaut.scss new file mode 100644 index 0000000..1481d0e --- /dev/null +++ b/src/components/What/Astronaut/Astronaut.scss @@ -0,0 +1,37 @@ +@import "/src/styles/mixins.scss"; +@import "/src/styles/vars.scss"; + +#astronaut { + position: relative; + display: flex; + align-items: center; + min-height: 71.1em; + background: $color-blue-charcoal; + + &::before { + content: ""; + position: absolute; + top: 0; + right: min(0em, calc(100% - 100.3em) / 2); + bottom: 0; + width: 100.3em; + background-image: url("/src/assets/astronaut.png"); + background-position: 100%; + background-repeat: no-repeat; + background-size: contain; + } + + &::after { + content: ""; + position: absolute; + inset: 0; + background: rgba(0, 0, 0, 0.8); + } + + .feature-group { + @include fluid-margin-lr; + max-width: 64em; + padding: 6em 0; + z-index: 1; + } +} diff --git a/src/components/What/Building/Building.astro b/src/components/What/Building/Building.astro new file mode 100644 index 0000000..c1abf58 --- /dev/null +++ b/src/components/What/Building/Building.astro @@ -0,0 +1,15 @@ +--- +import './Building.scss'; +--- + +
+
+
+

Community-Powered

+

Building a new world for your data

+

+ 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. +

+
+
+
diff --git a/src/components/What/Building/Building.scss b/src/components/What/Building/Building.scss new file mode 100644 index 0000000..5814168 --- /dev/null +++ b/src/components/What/Building/Building.scss @@ -0,0 +1,46 @@ +@import "/src/styles/vars.scss"; + +#building { + &::before { + bottom: -50%; + } + + > div { + position: relative; + display: flex; + justify-content: flex-end; + align-items: center; + max-width: 185.6em; + min-height: 58.8em; + margin: 0 auto; + + &::before { + content: ""; + position: absolute; + top: 2.3em; + bottom: -2.3em; + left: min(0em, calc((100% - 77.56em) / 2)); + width: calc(100% - 64em - 7.5%); + min-width: 77.56em; + background-image: url("/src/assets/double-brand-bg.png"); + background-position: 50%; + background-repeat: no-repeat; + background-size: contain; + z-index: -1; + } + } + + .feature-group { + max-width: 64em; + margin: 7em 7.5% 5em; + } + + @media screen and (max-width: 80rem) { + p { + background: rgba($color-blue-charcoal, 0.65); + border-radius: 0.5em; + padding: 0.3em 0.5em; + margin: -0.3em -0.5em; + } + } +} diff --git a/src/components/What/Grid/Grid.astro b/src/components/What/Grid/Grid.astro new file mode 100644 index 0000000..a718ebc --- /dev/null +++ b/src/components/What/Grid/Grid.astro @@ -0,0 +1,30 @@ +--- +import './Grid.scss'; +--- + +
+
+

Build Your Site, Censorship Free

+

Combining Lume and Skynet technologies, you can build a website just like you are on the Web2 internet.

+
+
+

Web3 Universal Storage

+

Get access to a universal network drive, powered by the Web3/dWeb cloud. Enjoy portability to any device or platform you wish.

+
+
+

Web3 Gateway

+

Install the Lume Web3 Extension and have a 1-click gateway into the Web3 internet on Opera, Vivaldi, Edge and Firefox.

+
+
+

Build Your Site, Censorship Free

+

Combining Lume and Skynet technologies, you can build a website just like you are on the Web2 internet.

+
+
+

Web3 Universal Storage

+

Get access to a universal network drive, powered by the Web3/dWeb cloud. Enjoy portability to any device or platform you wish.

+
+
+

Web3 Gateway

+

Install the Lume Web3 Extension and have a 1-click gateway into the Web3 internet on Opera, Vivaldi, Edge and Firefox.

+
+
diff --git a/src/components/What/Grid/Grid.scss b/src/components/What/Grid/Grid.scss new file mode 100644 index 0000000..3e0c036 --- /dev/null +++ b/src/components/What/Grid/Grid.scss @@ -0,0 +1,3 @@ +#grid { + padding-bottom: 4.5em; +} diff --git a/src/components/What/Jumbotron/Jumbotron.astro b/src/components/What/Jumbotron/Jumbotron.astro new file mode 100644 index 0000000..30555db --- /dev/null +++ b/src/components/What/Jumbotron/Jumbotron.astro @@ -0,0 +1,9 @@ +--- +import '../../../styles/jumbotron.scss'; +--- + +
+

+ A new web that is fair and accessible to all, where each user can have a say in its infrastructure. +

+
diff --git a/src/env.d.ts b/src/env.d.ts new file mode 100644 index 0000000..dc790a8 --- /dev/null +++ b/src/env.d.ts @@ -0,0 +1 @@ +/// \ No newline at end of file diff --git a/src/layouts/Layout.astro b/src/layouts/Layout.astro new file mode 100644 index 0000000..872ec7f --- /dev/null +++ b/src/layouts/Layout.astro @@ -0,0 +1,32 @@ +--- +import '../styles/global.scss'; +import Navbar from '../components/Layout/Navbar/Navbar.jsx'; +import Footer from '../components/Layout/Footer/Footer.astro'; +import JoinCommunity from '../components/Layout/JoinCommunity/JoinCommunity.astro'; + +export interface Props { + view: string; + title: string; +} + +const { view, title } = Astro.props; +--- + + + + + {title} + + + + + + + +
+ +
+ {view !== 'home' && } +