diff --git a/.github/workflows/deploy.yml b/.github/workflows/deploy.yml deleted file mode 100644 index 82d0700..0000000 --- a/.github/workflows/deploy.yml +++ /dev/null @@ -1,31 +0,0 @@ -name: Deploy - -on: - pull_request: - push: - branches: [master] - -jobs: - build: - runs-on: ubuntu-latest - - steps: - - uses: actions/checkout@v2 - - uses: actions/setup-node@v2 - with: - node-version: 16.x - - name: Install dependencies - run: yarn - - - name: Build - run: yarn build - - - name: Deploy to Skynet - uses: SkynetLabs/deploy-to-skynet-action@v2 - with: - upload-dir: public - github-token: ${{ secrets.GITHUB_TOKEN }} - portal-url: https://web3portal.com - skynet-api-key: ${{ github.event_name == 'push' && github.ref == 'refs/heads/master' && secrets.SKYNET_API_KEY || '' }} - registry-seed: ${{ github.event_name == 'push' && github.ref == 'refs/heads/master' && secrets.REGISTRY_SEED || '' }} - registry-datakey: web3extension.com diff --git a/.gitignore b/.gitignore index 557f97c..f06235c 100644 --- a/.gitignore +++ b/.gitignore @@ -1,3 +1,2 @@ -node_modules/ -.cache/ -public +node_modules +dist diff --git a/LICENSE b/LICENSE deleted file mode 100644 index 8995c8b..0000000 --- a/LICENSE +++ /dev/null @@ -1,21 +0,0 @@ -MIT License - -Copyright (c) 2022 Hammer Technologies LLC - -Permission is hereby granted, free of charge, to any person obtaining a copy -of this software and associated documentation files (the "Software"), to deal -in the Software without restriction, including without limitation the rights -to use, copy, modify, merge, publish, distribute, sublicense, and/or sell -copies of the Software, and to permit persons to whom the Software is -furnished to do so, subject to the following conditions: - -The above copyright notice and this permission notice shall be included in all -copies or substantial portions of the Software. - -THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR -IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, -FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE -AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER -LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, -OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE -SOFTWARE. diff --git a/README.md b/README.md index 532b1bb..3c261d3 100644 --- a/README.md +++ b/README.md @@ -1 +1,47 @@ -# Web3Extension.com +# 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/gatsby-browser.ts b/gatsby-browser.ts deleted file mode 100644 index d5d2dc0..0000000 --- a/gatsby-browser.ts +++ /dev/null @@ -1,2 +0,0 @@ -import "./src/css/reset.scss" -import "./src/css/style.scss" diff --git a/gatsby-config.ts b/gatsby-config.ts deleted file mode 100644 index a4a66a0..0000000 --- a/gatsby-config.ts +++ /dev/null @@ -1,51 +0,0 @@ -import type {GatsbyConfig} from "gatsby"; - -const config: GatsbyConfig = { - siteMetadata: { - title: 'Lume Web Web3 Extension', - description: 'Get the browser extension that will give you free, open access into the user-owned Web3 Internet', - siteUrl: 'https://web3extension.com', - twitter: '@lumeweb3', - siteLanguage: 'en', - ogLanguage: 'en-US', - }, - plugins: ["gatsby-plugin-sass", "gatsby-plugin-image", "gatsby-plugin-react-helmet", { - resolve: 'gatsby-plugin-manifest', - options: { - "icon": "src/images/icon.png" - } - }, { - resolve: 'gatsby-source-filesystem', - options: { - "name": "images", - "path": "./src/images/" - }, - __key: "images" - }, - `gatsby-plugin-offline`, - "gatsby-plugin-sharp", - `gatsby-transformer-sharp`, - { - resolve: `gatsby-plugin-web-font-loader`, - options: { - google: { - families: ['Roboto'] - } - } - }, - { - resolve: 'gatsby-plugin-matomo', - options: { - siteId: '2', - matomoUrl: 'https://piwiki.lumeweb.com', - siteUrl: 'https://web3extension.com', - enableJSErrorTracking: true, - exclude: ['/offline-plugin-app-shell-fallback/'], - cookieDomain: '*.web3extension.com', - } - } - ], - -}; - -export default config; diff --git a/package.json b/package.json index 85e90e2..d60df81 100644 --- a/package.json +++ b/package.json @@ -1,42 +1,22 @@ { - "name": "web3-extension", - "version": "1.0.0", - "private": true, - "description": "web3-extension", - "author": "Derrick Hammer", - "keywords": [ - "gatsby" - ], - "scripts": { - "develop": "gatsby develop", - "start": "gatsby develop", - "build": "gatsby build", - "serve": "gatsby serve", - "clean": "gatsby clean", - "typecheck": "tsc --noEmit" - }, - "dependencies": { - "gatsby": "^4.15.1", - "gatsby-plugin-image": "^2.15.0", - "gatsby-plugin-manifest": "^4.15.0", - "gatsby-plugin-matomo": "^0.13.0", - "gatsby-plugin-offline": "^5.15.0", - "gatsby-plugin-react-helmet": "^5.15.0", - "gatsby-plugin-sass": "^5.15.0", - "gatsby-plugin-sharp": "^4.15.0", - "gatsby-plugin-web-font-loader": "^1.0.4", - "gatsby-source-filesystem": "^4.15.0", - "gatsby-transformer-sharp": "^4.15.0", - "react": "^17.0.1", - "react-dom": "^17.0.1", - "react-helmet": "^6.1.0", - "sass": "^1.52.1" - }, - "devDependencies": { - "@types/node": "^17.0.35", - "@types/react": "^18.0.9", - "@types/react-dom": "^18.0.4", - "@types/react-helmet": "^6.1.5", - "typescript": "^4.6.4" - } + "name": "lume-web3extension", + "type": "module", + "version": "0.0.1", + "private": true, + "scripts": { + "dev": "TAILWIND_MODE=watch astro dev", + "start": "astro dev", + "build": "astro build", + "preview": "astro preview", + "astro": "astro" + }, + "dependencies": { + "@astrojs/image": "^0.16.6", + "@astrojs/react": "^2.1.1", + "@astrojs/tailwind": "^3.1.1", + "astro": "^2.3.2", + "autoprefixer": "^10.4.14", + "sass": "^1.62.1", + "tailwindcss": "^3.3.2" + } } 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 new file mode 100644 index 0000000..26b4d70 --- /dev/null +++ b/public/robots.txt @@ -0,0 +1,2 @@ +User-Agent: * +Allow: / \ No newline at end of file diff --git a/src/assets/access-bg.png b/src/assets/access-bg.png new file mode 100644 index 0000000..ff09896 Binary files /dev/null and b/src/assets/access-bg.png differ diff --git a/src/assets/astronaut.png b/src/assets/astronaut.png new file mode 100644 index 0000000..6a4f4bc Binary files /dev/null and b/src/assets/astronaut.png differ diff --git a/src/assets/difference-bg.png b/src/assets/difference-bg.png new file mode 100644 index 0000000..37184f1 Binary files /dev/null and b/src/assets/difference-bg.png differ diff --git a/src/assets/discord.svg b/src/assets/discord.svg new file mode 100644 index 0000000..fc9e7e3 --- /dev/null +++ b/src/assets/discord.svg @@ -0,0 +1,3 @@ + + + \ No newline at end of file diff --git a/src/assets/facebook.svg b/src/assets/facebook.svg new file mode 100644 index 0000000..678dbb5 --- /dev/null +++ b/src/assets/facebook.svg @@ -0,0 +1,4 @@ + + + + \ No newline at end of file diff --git a/src/assets/footer-icon.png b/src/assets/footer-icon.png new file mode 100644 index 0000000..4743a3e Binary files /dev/null and b/src/assets/footer-icon.png differ diff --git a/src/assets/github.svg b/src/assets/github.svg new file mode 100644 index 0000000..366049a --- /dev/null +++ b/src/assets/github.svg @@ -0,0 +1,3 @@ + + + \ No newline at end of file diff --git a/src/assets/hns.svg b/src/assets/hns.svg new file mode 100644 index 0000000..c11b041 --- /dev/null +++ b/src/assets/hns.svg @@ -0,0 +1,3 @@ + + + \ No newline at end of file diff --git a/src/assets/home-bg.png b/src/assets/home-bg.png new file mode 100644 index 0000000..3227afe Binary files /dev/null and b/src/assets/home-bg.png differ diff --git a/src/assets/home-left-bg.png b/src/assets/home-left-bg.png new file mode 100644 index 0000000..174db07 Binary files /dev/null and b/src/assets/home-left-bg.png differ diff --git a/src/assets/icon-development.png b/src/assets/icon-development.png new file mode 100644 index 0000000..f74990a Binary files /dev/null and b/src/assets/icon-development.png differ diff --git a/src/assets/icon-gateway.png b/src/assets/icon-gateway.png new file mode 100644 index 0000000..930552d Binary files /dev/null and b/src/assets/icon-gateway.png differ diff --git a/src/assets/icon-growth.png b/src/assets/icon-growth.png new file mode 100644 index 0000000..a16cd30 Binary files /dev/null and b/src/assets/icon-growth.png differ diff --git a/src/assets/icon-personal.png b/src/assets/icon-personal.png new file mode 100644 index 0000000..c15e5ff Binary files /dev/null and b/src/assets/icon-personal.png differ diff --git a/src/assets/icon-pioneering.png b/src/assets/icon-pioneering.png new file mode 100644 index 0000000..7743b45 Binary files /dev/null and b/src/assets/icon-pioneering.png differ diff --git a/src/assets/icon-private.png b/src/assets/icon-private.png new file mode 100644 index 0000000..cdc548a Binary files /dev/null and b/src/assets/icon-private.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/osi.svg b/src/assets/osi.svg new file mode 100644 index 0000000..978b3ea --- /dev/null +++ b/src/assets/osi.svg @@ -0,0 +1,26 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/src/assets/sia.svg b/src/assets/sia.svg new file mode 100644 index 0000000..7765e0d --- /dev/null +++ b/src/assets/sia.svg @@ -0,0 +1,5 @@ + + + + + \ No newline at end of file diff --git a/src/assets/twitter.svg b/src/assets/twitter.svg new file mode 100644 index 0000000..76bdf38 --- /dev/null +++ b/src/assets/twitter.svg @@ -0,0 +1,3 @@ + + + \ No newline at end of file diff --git a/src/components/Donate/Difference/Difference.astro b/src/components/Donate/Difference/Difference.astro new file mode 100644 index 0000000..883543d --- /dev/null +++ b/src/components/Donate/Difference/Difference.astro @@ -0,0 +1,19 @@ +--- +import './Difference.scss'; +--- + +
+
+
+

+ Powered by you +

+

+ How we’re different +

+

+ The .com boom/bubble/bust was a gold rush for VC's and everyone looking to get rich. We've entered that era again with crypto, web3, and the "metaverse". The metaverse is PR hype and not worth pursuing. Lume Web has no VC equity and will never give out equity to investment companies since their interests go against a user-owned internet. +

+
+
+
diff --git a/src/components/Donate/Difference/Difference.scss b/src/components/Donate/Difference/Difference.scss new file mode 100644 index 0000000..07153f5 --- /dev/null +++ b/src/components/Donate/Difference/Difference.scss @@ -0,0 +1,64 @@ +@import "/src/styles/mixins.scss"; +@import "/src/styles/vars.scss"; + +#difference { + padding: 12em 7.5% 7em; + max-width: 192em; + margin: 0 auto; + + &::before { + bottom: -12%; + } + + > div { + position: relative; + display: flex; + justify-content: flex-end; + align-items: center; + min-height: 34em; + margin: 0 auto; + + &::before { + content: ""; + position: absolute; + top: 0; + bottom: 0; + left: min(0em, calc((100% - 68.9em) / 2)); + width: calc(100% - 72em - 7.5%); + min-width: calc(68.9em); + background-image: url("/src/assets/difference-bg.png"); + background-position: 50% 50%; + background-repeat: no-repeat; + background-size: contain; + z-index: -1; + } + + &::after { + content: ""; + position: absolute; + top: 0; + bottom: 0; + left: min(0em, calc((100% - 68.9em) / 2)); + width: calc(100% - 72em - 7.5%); + min-width: calc(68.9em); + background: radial-gradient(50% 50% at 50% 50%, rgba($color-blue-charcoal, 0) 48.31%, $color-blue-charcoal 100%); + z-index: -1; + } + + .feature-group { + margin: 2em 0; + max-width: 72em; + + h3 { + font-weight: 400; + } + + p { + padding: 0.3em 0.5em; + margin: -0.3em -0.5em; + background: rgba($color-blue-charcoal-2, 0.8); + border-radius: 0.5em; + } + } + } +} diff --git a/src/components/Donate/HowToSupport/HowToSupport.astro b/src/components/Donate/HowToSupport/HowToSupport.astro new file mode 100644 index 0000000..4e46eeb --- /dev/null +++ b/src/components/Donate/HowToSupport/HowToSupport.astro @@ -0,0 +1,12 @@ +--- +import './HowToSupport.scss'; +--- + +
+

+ How to support Lume Web +

+

+ We aren't picky 😉. If there is a way you want to pay us, we are happy to take it. The project is funded through Hammer Technologies LLC, in the USA, and so crypto, FOSS platforms, and traditional payment methods are all accepted! Just click donate at the top to see your options, and to contact us if needed. +

+
diff --git a/src/components/Donate/HowToSupport/HowToSupport.scss b/src/components/Donate/HowToSupport/HowToSupport.scss new file mode 100644 index 0000000..ebe076f --- /dev/null +++ b/src/components/Donate/HowToSupport/HowToSupport.scss @@ -0,0 +1,23 @@ +@import "/src/styles/mixins.scss"; +@import "/src/styles/vars.scss"; + +#how-to-support { + padding: 5em 7.5%; + background: $color-brand; + color: $color-blue-charcoal-2; + + 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: 165%; + } +} diff --git a/src/components/Donate/Purposes/Purposes.astro b/src/components/Donate/Purposes/Purposes.astro new file mode 100644 index 0000000..5a5a44f --- /dev/null +++ b/src/components/Donate/Purposes/Purposes.astro @@ -0,0 +1,54 @@ +--- +import './Purposes.scss'; +--- + +
+
+
+ +
+
+

+ Community Services +

+

+ Development Spending +

+

+ All donations are spent on active development of Lume Web and maintaining community services. +

+
+
+
+
+ +
+
+

+ Build what you want +

+

+ Help pioneer Web3 +

+

+ The Web3 is taking back the internet to be the user-owned internet. If we, the users, don't fund and build what we want, it will be again, decided for us, and benefit others and become centralized to a few, not decentralized for the many. +

+
+
+
+
+ +
+
+

+ Open gateway +

+

+ Help us grow +

+

+ We need the communities voice and hands. Lume Web is your open gateway and platform, so it must be built by those who are going to use it the most. +

+
+
+
diff --git a/src/components/Donate/Purposes/Purposes.scss b/src/components/Donate/Purposes/Purposes.scss new file mode 100644 index 0000000..c27fd0c --- /dev/null +++ b/src/components/Donate/Purposes/Purposes.scss @@ -0,0 +1,18 @@ +@import "/src/styles/mixins.scss"; +@import "/src/styles/vars.scss"; + +#purposes { + background: $color-black; + + .purpose-development img { + @include fluid-width(3.4375rem); + } + + .purpose-pioneering img { + @include fluid-width(3.4375rem); + } + + .purpose-growth img { + @include fluid-width(3.4375rem); + } +} diff --git a/src/components/Donate/Support/Support.astro b/src/components/Donate/Support/Support.astro new file mode 100644 index 0000000..6dbf68f --- /dev/null +++ b/src/components/Donate/Support/Support.astro @@ -0,0 +1,39 @@ +--- +import './Support.scss'; +import svgSia from '/src/assets/sia.svg?raw'; +import svgHns from '/src/assets/hns.svg?raw'; +import svgOsi from '/src/assets/osi.svg?raw'; +--- + +
+
+
+ + + +
+
+

+ Access Web3 +

+

+ Support Lume Web, help us build +

+

+ There's a lot of hype around "Web3" and "The Metaverse" as people see money in it, similar to the second .com boom. However, many platforms claiming to be "Web3" are just trying to make money off you and aren't truly secure or decentralized. +

+

+ While some services have technology that can be building blocks for the next internet, many become centralized "SaaS" services that aim to sell something, creating another walled garden with blockchain technology mixed in. +

+
+ Make a donation +
+
+
+
diff --git a/src/components/Donate/Support/Support.scss b/src/components/Donate/Support/Support.scss new file mode 100644 index 0000000..ca3c8ce --- /dev/null +++ b/src/components/Donate/Support/Support.scss @@ -0,0 +1,70 @@ +@import "/src/styles/mixins.scss"; +@import "/src/styles/vars.scss"; + +#support { + padding: 10.6em 7.5%; + + > div { + display: flex; + gap: 7.5%; + max-width: 152em; + margin: 0 auto; + + @media screen and (max-width: 47.99999rem) { + flex-direction: column; + flex-flow: column-reverse; + align-items: flex-end; + gap: 4em; + } + } + + .powered-by { + flex-grow: 1; + display: flex; + align-items: center; + justify-content: center; + gap: 4em; + + @media screen and (min-width: 48rem) and (max-width: 56rem) { + flex-direction: column; + } + + a { + color: $color-alto; + + &:hover { + color: $color-white; + } + } + + .sia-logo svg { + @include fluid-width(7.5rem); + } + + .hns-logo svg { + @include fluid-width(5.5rem); + } + + .osi-logo svg { + @include fluid-width(5.5rem); + } + + @media screen and (max-width: 47.99999rem) { + .sia-logo svg { + @include fluid-width(3.75rem); + } + + .hns-logo svg { + @include fluid-width(2.75rem); + } + + .osi-logo svg { + @include fluid-width(2.75rem); + } + } + } + + .feature-group { + max-width: 80em; + } +} diff --git a/src/components/Donate/Why/Why.astro b/src/components/Donate/Why/Why.astro new file mode 100644 index 0000000..a1299f6 --- /dev/null +++ b/src/components/Donate/Why/Why.astro @@ -0,0 +1,38 @@ +--- +import './Why.scss'; + +import svgGithub from '/src/assets/github.svg?raw'; +import svgDiscord from '/src/assets/discord.svg?raw'; +import svgTwitter from '/src/assets/twitter.svg?raw'; +import svgFacebook from '/src/assets/facebook.svg?raw'; +--- + +
+
+
+

+ Powered by you +

+

+ Why we ask for your donations +

+

+ Lume Web is a small initiative with big ideas and a unique vision. We rely on the community and crypto whales to support us in building technology that empowers internet users. The current internet is controlled by a few, turning users into products in exchange for "free" services, making us batteries in the matrix. +

+
+ + + + +
+
+
+
diff --git a/src/components/Donate/Why/Why.scss b/src/components/Donate/Why/Why.scss new file mode 100644 index 0000000..27a7f6d --- /dev/null +++ b/src/components/Donate/Why/Why.scss @@ -0,0 +1,79 @@ +@import "/src/styles/mixins.scss"; +@import "/src/styles/vars.scss"; + +#why { + padding: 8em 7.5% 7em; + max-width: 192em; + margin: 0 auto; + + > div { + position: relative; + display: flex; + align-items: center; + min-height: 42em; + margin: 0 auto; + + &::before { + content: ""; + position: absolute; + top: 0; + bottom: 0; + right: min(0em, calc((100% - 56em) / 2)); + width: calc(100% - 72em - 7.5%); + min-width: calc(56em); + background-image: url("/src/assets/astronaut.png"); + background-position: 50% 50%; + background-repeat: no-repeat; + background-size: contain; + z-index: -1; + } + } + + .socials { + display: flex; + align-items: center; + gap: 2em; + margin: 4em -0.5em -0.5em; + + a { + padding: 0.5em; + color: $color-alto; + + &:hover { + color: $color-brand; + } + } + + .github-logo svg { + @include fluid-width(2.75rem); + } + + .discord-logo svg { + @include fluid-width(2.75rem); + } + + .twitter-logo svg { + @include fluid-width(2.75rem); + } + + .facebook-logo svg { + @include fluid-width(2.75rem); + } + } + + .feature-group { + margin: 2em 0; + max-width: 72em; + + h3 { + font-weight: 400; + } + + p { + padding: 0.3em 0.5em; + margin: -0.3em -0.5em; + background: rgba($color-blue-charcoal-2, 0.8); + border-radius: 0.5em; + } + } +} diff --git a/src/components/Header.tsx b/src/components/Header.tsx deleted file mode 100644 index b2e6198..0000000 --- a/src/components/Header.tsx +++ /dev/null @@ -1,31 +0,0 @@ -import React from "react" -import {Link} from "gatsby" -import PropTypes from "prop-types" -import {StaticImage} from "gatsby-plugin-image"; - -const Header = () => ( -
- -
- - - - - - - - - -
-
-) - -Header.propTypes = { - siteTitle: PropTypes.string, -} - -Header.defaultProps = { - siteTitle: ``, -} - -export default Header diff --git a/src/components/Home/Access/Access.astro b/src/components/Home/Access/Access.astro new file mode 100644 index 0000000..db3c69f --- /dev/null +++ b/src/components/Home/Access/Access.astro @@ -0,0 +1,22 @@ +--- +import './Access.scss'; +--- + +
+
+
+

+ Access Web3 +

+

+ Lume Web grants you access to Web3 +

+

+ There's a lot of hype around "Web3" and "The Metaverse" as people see money in it, similar to the second .com boom. However, many platforms claiming to be "Web3" are just trying to make money off you and aren't truly secure or decentralized. +

+

+ While some services have technology that can be building blocks for the next internet, many become centralized "SaaS" services that aim to sell something, creating another walled garden with blockchain technology mixed in. +

+
+
+
diff --git a/src/components/Home/Access/Access.scss b/src/components/Home/Access/Access.scss new file mode 100644 index 0000000..d638a73 --- /dev/null +++ b/src/components/Home/Access/Access.scss @@ -0,0 +1,88 @@ +@import "/src/styles/vars.scss"; + +#access { + position: relative; + padding: 10em 0; + z-index: -1; + + &::after { + content: ""; + position: absolute; + top: -47.5em; + left: 0; + width: 52.11em; + height: 117.1em; + background-image: url("/src/assets/home-left-bg.png"); + background-position: 0 0; + background-repeat: no-repeat; + background-size: contain; + } + + > div { + position: relative; + display: flex; + justify-content: flex-end; + align-items: center; + max-width: 152em; + min-height: 45.2em; + margin: 0 auto; + z-index: 1; + + &::before { + content: ""; + position: absolute; + top: 0; + bottom: 0; + left: min(0em, calc((100% - 45.2em) / 2)); + width: calc(100% - 80em - 7.5%); + min-width: 45.2em; + background-image: url("/src/assets/access-bg.png"); + background-position: 50% 50%; + background-repeat: no-repeat; + background-size: contain; + animation: spin 7s infinite linear; + z-index: -1; + } + + .feature-group { + box-sizing: content-box; + margin: 2em 7.5%; + max-width: 80em; + + p { + padding: 0.3em 0.5em; + margin: -0.3em -0.5em; + background: rgba($color-black, 0.8); + border-radius: 0.5em; + } + } + } + + @media screen and (max-width: 56rem) { + &::after { + top: -56em; + height: 78em; + } + + > div { + &::before { + top: 0; + bottom: auto; + left: calc((100% - 45.2em) / 2); + width: 45.2em; + height: 45.2em; + } + + .feature-group { + margin-top: 52.2em; + max-width: none; + } + } + } +} + +@keyframes spin { + 0% { + transform: rotate(359deg); + } +} diff --git a/src/components/Home/Features/Features.astro b/src/components/Home/Features/Features.astro new file mode 100644 index 0000000..1b6e01b --- /dev/null +++ b/src/components/Home/Features/Features.astro @@ -0,0 +1,54 @@ +--- +import './Features.scss'; +--- + +
+
+
+ +
+
+

+ Encrypted Data +

+

+ It’s private +

+

+ There is no sign-up required to browse web3. You do not even need to provide an email for basic use. Additionally, if you do create an account, all data is encrypted with your password. +

+
+
+
+
+ +
+
+

+ Owned by You +

+

+ It’s personal +

+

+ Everything you do is owned by you. Your data is not controlled or owned by others. You are free to share copies to let others own a version or keep encrypted in your account. +

+
+
+
+
+ +
+
+

+ Privacy Built-in +

+

+ It’s your gateway +

+

+ Gain freedom on a new web, owned by its users, and with privacy and control built-in. +

+
+
+
diff --git a/src/components/Home/Features/Features.scss b/src/components/Home/Features/Features.scss new file mode 100644 index 0000000..3fb71bc --- /dev/null +++ b/src/components/Home/Features/Features.scss @@ -0,0 +1,15 @@ +@import "/src/styles/mixins.scss"; + +#features { + .feature-private img { + @include fluid-width(3.4375rem); + } + + .feature-personal img { + @include fluid-width(3.4375rem); + } + + .feature-gateway img { + @include fluid-width(3.4375rem); + } +} diff --git a/src/components/Home/Install/Install.astro b/src/components/Home/Install/Install.astro new file mode 100644 index 0000000..a494dc5 --- /dev/null +++ b/src/components/Home/Install/Install.astro @@ -0,0 +1,64 @@ +--- +import './Install.scss'; + +import svgSia from '/src/assets/sia.svg?raw'; +import svgHns from '/src/assets/hns.svg?raw'; +import svgOsi from '/src/assets/osi.svg?raw'; + +import svgGithub from '/src/assets/github.svg?raw'; +import svgDiscord from '/src/assets/discord.svg?raw'; +import svgTwitter from '/src/assets/twitter.svg?raw'; +import svgFacebook from '/src/assets/facebook.svg?raw'; +--- + +
+
+

+ Introducing the private gateway to Web3. +

+

+ Gain freedom on a new web, owned by its users, and with privacy and control built-in. +

+
+ Install Web3 Extension +
+ + + +
+
+
+
+ +
+ + + + +
+
+
diff --git a/src/components/Home/Install/Install.scss b/src/components/Home/Install/Install.scss new file mode 100644 index 0000000..f952144 --- /dev/null +++ b/src/components/Home/Install/Install.scss @@ -0,0 +1,191 @@ +@import "/src/styles/mixins.scss"; +@import "/src/styles/vars.scss"; + +#install { + padding: 7em 7.5% 12.5em; + + > div:first-child { + max-width: 120em; + } + + h1 { + margin-left: -0.1em; + @include fluid-font-size-s(5.6875rem); + font-weight: 300; + line-height: 122%; + letter-spacing: -0.06em; + + .larger { + @include fluid-font-size-s(6.8125rem); + font-weight: 400; + } + + .highlight { + color: $color-brand; + } + } + + p { + margin: 0.8em 0 1.6em; + padding-right: 2.5em; + font-family: $font-family-jaldi; + @include fluid-font-size(2.4375rem); + line-height: 108%; + color: rgba($color-white, 0.5); + + .highlight { + color: $color-white; + } + } + + .install { + display: flex; + align-items: center; + gap: 5em; + + .btn-main { + padding: 1.2em 2em; + } + + .powered-by { + display: flex; + align-items: center; + gap: 2.5em; + + a { + color: #4e5b5d; + + &:hover { + color: $color-white; + } + } + + .sia-logo svg { + @include fluid-width(3.75rem); + } + + .hns-logo svg { + @include fluid-width(2.75rem); + } + + .osi-logo svg { + @include fluid-width(2.75rem); + } + } + } + + .resources { + display: flex; + align-items: center; + justify-content: space-between; + gap: 5.5em; + margin-top: 5em; + + .links { + font-family: $font-family-jaldi; + @include fluid-font-size(1.5rem); + + a { + color: rgba(169, 169, 169, 0.5); + + &:hover { + color: $color-white; + } + } + } + + .socials { + display: flex; + align-items: center; + gap: 2em; + margin: -0.5em; + + a { + padding: 0.5em; + color: $color-alto; + + &:hover { + color: $color-brand; + } + } + + .github-logo svg { + @include fluid-width(2.75rem); + } + + .discord-logo svg { + @include fluid-width(2.75rem); + } + + .twitter-logo svg { + @include fluid-width(2.75rem); + } + + .facebook-logo svg { + @include fluid-width(2.75rem); + } + } + } + + @media screen and (max-width: 67rem) { + h1 { + font-weight: 400; + + .larger { + @include fluid-font-size-s(5.6875rem); + } + } + + p { + padding: 0; + } + } + + @media screen and (max-width: 56rem) { + padding-top: 14em; + padding-bottom: 10em; + + h1 { + line-height: 155%; + } + + p { + line-height: 145%; + } + } + + @media screen and (max-width: 47.99999rem) { + .install { + flex-direction: column; + align-items: flex-start; + gap: 7.5em; + + .btn-main { + padding: 1.2em 1.6em; + letter-spacing: -0.01em; + } + + .powered-by { + gap: 4em; + + .sia-logo svg { + @include fluid-width(6.75rem); + } + + .hns-logo svg { + @include fluid-width(4.95rem); + } + + .osi-logo svg { + @include fluid-width(4.95rem); + } + } + } + + .resources { + .socials { + display: none; + } + } + } +} diff --git a/src/components/Home/Message/Message.astro b/src/components/Home/Message/Message.astro new file mode 100644 index 0000000..d7ce74f --- /dev/null +++ b/src/components/Home/Message/Message.astro @@ -0,0 +1,12 @@ +--- +import './Message.scss'; +--- + +
+

+ Free Yourself +

+

+ We have had decentralized internet for a while now (decades) in various forms, so consider Web3 an upgrade that combines many of these attempts + blockchain, into an evolution for the user-owned internet, rather than us, the user, becoming batteries in the matrix. +

+
diff --git a/src/components/Home/Message/Message.scss b/src/components/Home/Message/Message.scss new file mode 100644 index 0000000..ce8d357 --- /dev/null +++ b/src/components/Home/Message/Message.scss @@ -0,0 +1,23 @@ +@import "/src/styles/mixins.scss"; +@import "/src/styles/vars.scss"; + +#message { + padding: 5em 7.5%; + background: $color-brand; + color: $color-blue-charcoal-2; + + 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: 165%; + } +} diff --git a/src/components/Home/Socials/Socials.astro b/src/components/Home/Socials/Socials.astro new file mode 100644 index 0000000..706af5c --- /dev/null +++ b/src/components/Home/Socials/Socials.astro @@ -0,0 +1,25 @@ +--- +import './Socials.scss'; + +import svgGithub from '/src/assets/github.svg?raw'; +import svgDiscord from '/src/assets/discord.svg?raw'; +import svgTwitter from '/src/assets/twitter.svg?raw'; +import svgFacebook from '/src/assets/facebook.svg?raw'; +--- + +
+
+ + + + +
+
diff --git a/src/components/Home/Socials/Socials.scss b/src/components/Home/Socials/Socials.scss new file mode 100644 index 0000000..7ffcbee --- /dev/null +++ b/src/components/Home/Socials/Socials.scss @@ -0,0 +1,46 @@ +@import "/src/styles/mixins.scss"; +@import "/src/styles/vars.scss"; + +#socials { + display: none; + padding: 12em 7.5% 0; + @include fluid-font-size(0.625rem); + background: $color-blue-charcoal; + + @media screen and (max-width: 47.99999rem) { + display: block; + } + + > div { + display: flex; + align-items: center; + justify-content: center; + gap: 3em; + margin: -0.5em; + + a { + padding: 0.5em; + color: $color-alto; + + &:hover { + color: $color-brand; + } + } + + .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/Layout.tsx b/src/components/Layout.tsx deleted file mode 100644 index c88f1f6..0000000 --- a/src/components/Layout.tsx +++ /dev/null @@ -1,49 +0,0 @@ -import React from "react" -import {graphql, StaticQuery} from "gatsby"; -import Header from "./Header"; -import {StaticImage} from "gatsby-plugin-image"; -import SEO from "./SEO"; -// @ts-ignore -export default function Layout({children}) { - return ( - <> - -
- ( - <> -
- {children} -
-
- -
- - -
- - )}/> -
- - ) -} diff --git a/src/components/Layout/Footer/Footer.astro b/src/components/Layout/Footer/Footer.astro new file mode 100644 index 0000000..7c332d4 --- /dev/null +++ b/src/components/Layout/Footer/Footer.astro @@ -0,0 +1,32 @@ +--- +import "./Footer.scss"; + +import logo from "/src/assets/lume-logo.png"; +import icon from "/src/assets/footer-icon.png"; +--- + + diff --git a/src/components/Layout/Footer/Footer.scss b/src/components/Layout/Footer/Footer.scss new file mode 100644 index 0000000..6fabde0 --- /dev/null +++ b/src/components/Layout/Footer/Footer.scss @@ -0,0 +1,112 @@ +@import "/src/styles/mixins.scss"; +@import "/src/styles/vars.scss"; + +footer { + display: flex; + padding: 7em 7.5% 8em; + font-family: $font-family-jaldi; + @include fluid-font-size(0.625rem); + background: $color-blue-charcoal; + + > div { + display: flex; + align-items: center; + @include fluid-font-size(1.375rem); + + &:first-child { + flex-grow: 1; + flex-direction: column; + align-items: flex-start; + } + + &:last-child { + flex-grow: 1; + justify-content: flex-end; + text-align: right; + } + } + + .logo { + a { + display: inline-block; + } + + img { + @include fluid-width(8.4375rem); + } + } + + .contact { + margin-top: 0.25em; + color: $color-cloud; + + a { + display: inline-flex; + align-items: center; + + &:hover { + color: $color-white; + } + } + + svg { + @include fluid-width-height(1.375rem, 1.375rem); + margin-right: 0.5em; + } + } + + .gateway-icon img { + @include fluid-width-height(5rem, 5rem); + } + + .phrase { + width: 7em; + font-family: $font-family-jetbrains-mono; + font-weight: 700; + line-height: 140%; + color: $color-brand; + } +} + +@media screen and (max-width: 47.99999rem) { + footer { + flex-direction: column; + padding-top: 5rem; + padding-bottom: 5rem; + text-align: center; + + > div { + justify-content: center; + font-size: 1.25rem; + } + + > div:first-child { + align-items: center; + margin-top: 4rem; + order: 2; + } + + > div:last-child { + justify-content: center; + margin-top: 1.25rem; + order: 3; + } + + img { + width: 8.4375rem; + } + + .contact { + margin-top: 1.25rem; + } + + .gateway-icon img { + @include fluid-width-height(2.75rem, 2.75rem); + } + + .phrase { + width: auto; + text-align: center; + } + } +} diff --git a/src/components/Layout/Navbar/Navbar.jsx b/src/components/Layout/Navbar/Navbar.jsx new file mode 100644 index 0000000..fd9cb1e --- /dev/null +++ b/src/components/Layout/Navbar/Navbar.jsx @@ -0,0 +1,73 @@ +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 >= 768) { + 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..2a2b806 --- /dev/null +++ b/src/components/Layout/Navbar/Navbar.scss @@ -0,0 +1,113 @@ +@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; + + a { + display: block; + padding: 0.55em 0.9em; + @include fluid-font-size(1.375rem); + font-weight: 700; + text-decoration: underline; + text-decoration-color: transparent; + transition: text-decoration-color $transition-duration; + + &.current, &:hover, &:active { + text-decoration-color: inherit; + } + } + + .lume { + display: flex; + align-items: center; + gap: 0.25em; + color: $color-brand; + } + + svg { + @include fluid-width-height(1.5rem, 1.5rem); + } +} + +.hamburger { + display: none; + font-size: 2rem; + cursor: pointer; + z-index: 1; + margin: 0 3.75% 0 2rem; +} + +@media screen and (max-width: 47.9999rem) { + nav { + position: sticky; + top: 0; + background: rgba($color-blue-charcoal-2, 0.8); + 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.8); + 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; + } + } + + a { + font-size: 1.25rem; + margin: 0 2.2em 0 1em; + padding: inherit 0.8em; + } + } + + .hamburger { + display: block; + } +} + +@keyframes bg-opacity { + 0% { + opacity: 0; + } + + 100% { + opacity: 0.8; + } +} diff --git a/src/components/SEO/Facebook.tsx b/src/components/SEO/Facebook.tsx deleted file mode 100644 index 73d3e85..0000000 --- a/src/components/SEO/Facebook.tsx +++ /dev/null @@ -1,34 +0,0 @@ -import PropTypes from 'prop-types' -import React from 'react' -import { Helmet } from 'react-helmet' - -// @ts-ignore -const Facebook = ({ url, name, type, title, desc, image, locale }) => ( - - {name && } - - - - - - - - -) - -export default Facebook - -Facebook.propTypes = { - url: PropTypes.string.isRequired, - locale: PropTypes.string.isRequired, - type: PropTypes.string, - title: PropTypes.string.isRequired, - desc: PropTypes.string.isRequired, - image: PropTypes.string.isRequired, - name: PropTypes.string, -} - -Facebook.defaultProps = { - type: 'website', - name: null, -} diff --git a/src/components/SEO/SEO.tsx b/src/components/SEO/SEO.tsx deleted file mode 100644 index 169fbd3..0000000 --- a/src/components/SEO/SEO.tsx +++ /dev/null @@ -1,90 +0,0 @@ -import React from 'react' -import {Helmet} from "react-helmet" -import PropTypes from 'prop-types' -import {useStaticQuery, graphql} from 'gatsby' -import Facebook from './Facebook' -import Twitter from './Twitter' - -// @ts-ignore -const SEO = ({title, desc, banner, pathname}) => { - const {site, file} = useStaticQuery(query) - - const { - siteMetadata: { - siteUrl, - defaultTitle, - defaultDescription, - siteLanguage, - ogLanguage, - twitter, - }, - } = site - - const seo = { - title: title || defaultTitle, - description: desc || defaultDescription, - image: `${siteUrl}${banner || file.childImageSharp.resize.src}`, - url: `${siteUrl}${pathname || ''}`, - } - - return ( - <> - - - - - - - - - - ) -} - -export default SEO - -SEO.propTypes = { - title: PropTypes.string, - desc: PropTypes.string, - banner: PropTypes.string, - pathname: PropTypes.string, - article: PropTypes.bool, - node: PropTypes.object, -} - -SEO.defaultProps = { - title: null, - desc: null, - banner: null, - pathname: null, - article: false, - node: null, -} - -const query = graphql` - query { - site { - siteMetadata { - siteUrl - defaultTitle: title - defaultDescription: description - siteLanguage - ogLanguage - twitter - } - } - file(relativePath: { eq: "logo.png" }) { - childImageSharp { - resize { - src - } - } - } -}` diff --git a/src/components/SEO/Twitter.tsx b/src/components/SEO/Twitter.tsx deleted file mode 100644 index eac3820..0000000 --- a/src/components/SEO/Twitter.tsx +++ /dev/null @@ -1,29 +0,0 @@ -import PropTypes from 'prop-types' -import React from 'react' -import { Helmet } from 'react-helmet' - -const Twitter = ({ type, username, title, desc, image }) => ( - - {username && } - - - - - - -) - -export default Twitter - -Twitter.propTypes = { - type: PropTypes.string, - username: PropTypes.string, - title: PropTypes.string.isRequired, - desc: PropTypes.string.isRequired, - image: PropTypes.string.isRequired, -} - -Twitter.defaultProps = { - type: 'summary_large_image', - username: null, -} diff --git a/src/components/SEO/index.ts b/src/components/SEO/index.ts deleted file mode 100644 index 662f281..0000000 --- a/src/components/SEO/index.ts +++ /dev/null @@ -1,7 +0,0 @@ -import SEO from "./SEO" -import Facebook from "./Facebook" -import Twitter from "./Twitter" - -export { Facebook, Twitter } - -export default SEO diff --git a/src/css/reset.scss b/src/css/reset.scss deleted file mode 100644 index 276b9b4..0000000 --- a/src/css/reset.scss +++ /dev/null @@ -1,43 +0,0 @@ -html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { - margin: 0; - padding: 0; - border: 0; - font-size: 100%; - font: inherit; - vertical-align: baseline; -} - -article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { - display: block; -} - -body { - line-height: 1; -} - -ol, ul { - list-style: none; -} - -blockquote, q { - quotes: none; -} - -blockquote { - &:before, &:after { - content: ""; - content: none; - } -} - -q { - &:before, &:after { - content: ""; - content: none; - } -} - -table { - border-collapse: collapse; - border-spacing: 0; -} diff --git a/src/css/style.scss b/src/css/style.scss deleted file mode 100644 index 90968fc..0000000 --- a/src/css/style.scss +++ /dev/null @@ -1,928 +0,0 @@ -/* Colors primary*/ -$primary-green: #10E260; -$primary-blue: #2A82DE; -$dark: #151515; -$white: #ffffff; -$background-grey: #F9F9F9; - - -/* Base preferences*/ -html { - height: 100%; -} - -html *, -html :before, -html :after { - -webkit-box-sizing: border-box; - box-sizing: border-box; -} - -body { - background-color: $background-grey; - background-image: url('../images/background-lume-installer.png'); - background-repeat: no-repeat; - background-size: cover; - background-position: bottom; - font-family: "Roboto", 'Arial', serif; -} - -em { - font-style: italic; -} - -strong { - font-weight: 600; -} - -h1 { - font-size: 65px; - font-weight: 600; - line-height: 1.1; - color: $dark; - text-align: center; - -} - -@media only screen and (max-width: 680px) { - h1 { - font-size: 48px; - line-height: 1.1; - } -} - -@media only screen and (max-width: 480px) { - h1 { - font-size: 32px; - line-height: 1.1; - } -} - -h2 { - font-size: 26px; - font-weight: 600; - line-height: 1.025; - color: $dark; - text-align: center; -} - -h3 { - color: $dark; - text-align: center; - line-height: 1; -} - -@media only screen and (max-width: 480px) { - h2 { - font-size: 22px; - line-height: 1.2; - } -} - -h3 { - font-size: 32px; - font-weight: 600; - line-height: 1.025; - color: $dark; - margin: 0 0 24px 0; -} - -p { - font-size: 18px; - line-height: 1.7; - font-weight: 300; - color: $dark; -} - -p + p { - margin-top: 30px; -} - - -/* Content container*/ -.content-container { - max-width: 1280px; - padding: 10px 50px 12px 50px; - margin: 0 auto; - position: center; -} - -@media only screen and (max-width: 860px) { - .content-container { - padding: 20px 30px 12px 30px; - } -} - -@media only screen and (max-width: 480px) { - .content-container { - padding: 10px 20px 12px 20px; - } -} - - -/* Header */ -.header { - display: -webkit-box; - display: -ms-flexbox; - display: flex; - -webkit-box-pack: justify; - -ms-flex-pack: justify; - justify-content: space-between; - margin-bottom: 8px; - - .header-buttons { - justify-content: space-evenly; - - a { - margin: 0.5em; - } - } -} - -.logo { - width: 150px; - margin: 0 0 0 2px; -} - -@media only screen and (max-width: 480px) { - .header { - margin-bottom: 0px; - } - - .logo { - width: 100px; - margin: 0 0 0 2px; - } -} - -.donate-btn { - margin-top: 8px; - background-color: #ff005e; - padding: 12px 28px 14px 28px; - display: inline-block; - border: 0; - border-radius: 50px; - cursor: pointer; - color: #fff; - text-decoration: none; - font-size: 16px; - font-weight: 600; -} - -.donate-btn:hover { - background-color: $primary-green; - color: $dark; -} - -@media only screen and (max-width: 480px) { - .donate-btn { - margin-top: 0px; - padding: 10px 20px 12px 20px; - font-size: 14px; - } -} - - -/* Heading and portal */ -.section-introduction { - display: -ms-grid; - display: grid; - -webkit-box-pack: center; - -ms-flex-pack: center; - justify-content: center; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; - margin: 150px 0 0 0; -} - -.download-card { - background-color: rgba(255, 255, 255, 0.4); - border: 0.5px solid rgba(16, 226, 96, 0.3); - border-radius: 8px; - -webkit-box-shadow: 0px 0px 50px 15px rgba(16, 226, 96, 0.10); - box-shadow: 0px 0px 50px 15px rgba(16, 226, 96, 0.10); - padding: 24px; - margin: 56px 0 0 0; -} - -.heading-introduction { - z-index: 2; - margin: 0 0 0 0; -} - -@media only screen and (max-width: 400px) { - .section-introduction { - margin: 90px 0 0 0; - } -} - -.section-portal { - margin-top: -300px; -} - -@media only screen and (max-width: 940px) { - .section-portal { - margin-top: -350px; - } -} - -@media only screen and (max-width: 350px) { - .section-introduction { - z-index: 2; - margin: 70px 0 0 0; - } -} - -@media only screen and (max-width: 680px) { - .section-portal { - margin-top: -320px; - } -} - -@media only screen and (max-width: 480px) { - .section-portal { - margin-top: -240px; - } -} - -@media only screen and (max-width: 400px) { - .section-portal { - margin-top: -215px; - } -} - -@media only screen and (max-width: 350px) { - .section-portal { - margin-top: -200px; - } -} - -@-webkit-keyframes portal-spin { - 0% { - -webkit-transform: rotate(359deg); - transform: rotate(359deg); - } -} - -@keyframes portal-spin { - 0% { - -webkit-transform: rotate(359deg); - transform: rotate(359deg); - } -} - -.portal-frame { - --portal-color: #2A82DE; - max-width: 500px; - aspect-ratio: 1; - --portal-browserbugfix: perspective(2077px) translateZ(-0.1px); - -webkit-transform: var(--portal-browserbugfix,) scaleX(1); - -ms-transform: var(--portal-browserbugfix,) scaleX(1); - transform: var(--portal-browserbugfix,) scaleX(1); - -webkit-filter: contrast(1.75); - filter: contrast(1.75); - overflow: hidden; - margin: 0 auto; -} - -.portal, .portal::before { - position: absolute; - inset: 0; - -webkit-animation: portal-spin 7s infinite linear; - animation: portal-spin 7s infinite linear; -} - -.portal { - --portal-img: url('../images/portal.png'); - --portal-mask: var(--portal-img) top left / 100% 100% no-repeat; - -webkit-mask: var(--portal-mask); - mask: var(--portal-mask); -} - -.portal::before { - content: ""; - animation-direction: reverse; - background: -webkit-gradient( - linear, left top, left bottom, color-stop(25%, #10E260), color-stop(125%, transparent), color-stop(25%, #2A82DE) - ), var(--portal-color); - background: -o-linear-gradient( - #10E260 25%, transparent 125%, #2A82DE 25% - ), var(--portal-color); - background: linear-gradient( - #10E260 25%, transparent 125%, #2A82DE 25% - ), var(--portal-color); -} - - -.background-1 { - background-color: #fff; - border: 0.5px solid rgba(16, 226, 96, 0.3); - -webkit-box-shadow: 0px 0px 50px 15px rgba(16, 226, 96, 0.10); - box-shadow: 0px 0px 50px 15px rgba(16, 226, 96, 0.10); - border-radius: 8px; -} - - -/* Download component*/ -.section-download { - margin-top: 24px; -} - -.download-title span { - display: block; - font-size: 16px; - font-weight: 300; - color: $dark; - text-align: center; - margin: 16px 0 0 0; -} - -.platform span { - display: block; - margin: 8px 0 16px 0; - font-size: 14px; - font-weight: 400; - color: $dark; -} - -.download-button { - display: -webkit-box; - display: -ms-flexbox; - display: flex; - -webkit-box-pack: center; - -ms-flex-pack: center; - justify-content: center; - margin: 24px 0 16px 0; - - & a { - margin-right: 1em; - } -} - -.btn img { - display: inline-block; - vertical-align: middle; - margin: -3px 6px 0 0; - width: 16px; -} - -.btn { - display: inline-block; - border: 0; - border-radius: 6px; - background: -o-linear-gradient(left, #10E260 0%, #2A82DE 80%); - background: -webkit-gradient(linear, left top, right top, from(#10E260), color-stop(80%, #2A82DE)); - background: linear-gradient(to right, #10E260 0%, #2A82DE 80%); - padding: 10px 30px 12px 30px; - font-family: "Roboto", 'Arial', sans-serif; - font-weight: 500; - font-size: 18px; - line-height: 1.6; - color: #FFFFFF; - text-align: center; - cursor: pointer; -} - -.btn:hover { - background: #10E260; - color: #151515; -} - -.os-options span { - display: block; - margin: 16px 0 0 0; - font-size: 12px; - font-weight: 300; - color: #000000; - text-align: center; -} - -@media only screen and (max-width: 480px) { - .section-download { - margin-top: 10px; - } - - .download-title { - margin: -6px 0 16px 0; - font-size: 14px; - } - - .download-button { - margin: 20px 0 12px 0; - } - - .btn { - font-size: 16px; - padding: 8px 20px 10px 20px; - } - - .os-options span { - margin: 2px 0 0 0; - } -} - -.section-share { - margin-top: 24px; - - p { - margin-bottom: 1em; - } - - .addthis_inline_share_toolbox { - text-align: center; - margin: auto; - } -} - -@media only screen and (max-width: 480px) { - .section-share { - margin-top: 10px; - } -} - - -/* Advantages*/ -.section-advantages { - display: -webkit-box; - display: -ms-flexbox; - display: flex; - -webkit-box-orient: horizontal; - -webkit-box-direction: normal; - -ms-flex-direction: row; - flex-direction: row; - -ms-flex-pack: distribute; - justify-content: space-around; - gap: 80px; - margin: 80px 60px 0 60px; -} - -@media only screen and (max-width: 960px) { - .section-advantages { - gap: 40px; - margin: 60px 0px 0 0px; - } -} - -@media only screen and (max-width: 680px) { - .section-advantages { - -webkit-box-orient: vertical; - -webkit-box-direction: normal; - -ms-flex-direction: column; - flex-direction: column; - -webkit-box-pack: end; - -ms-flex-pack: end; - justify-content: flex-end; - gap: 30px; - margin: 60px 0px 0 0px; - } -} - -@media only screen and (max-width: 400px) { - .section-advantages { - margin: 45px 0px 0 0px; - } -} - -.advantage-card { - width: 100%; - margin: 0 auto; -} - -@media only screen and (max-width: 680px) { - .advantage-card { - width: 70%; - } -} - -@media only screen and (max-width: 480px) { - .advantage-card { - width: 100%; - } -} - -.advantage-card span { - display: block; - font-size: 20px; - font-weight: 600; - color: $primary-blue; - margin: 10px 0 14px 0; - text-align: center; -} - -.advantage-card p { - font-size: 14px; - font-weight: 400; - line-height: 1.4; - font-weight: 400; - color: $dark; - text-align: center; -} - -.advantage-card img { - display: block; - height: 24px; - margin: 0 auto; -} - - -/* Text image component */ -.text-image { - margin: 80px 0 0 0; - display: -webkit-box; - display: -ms-flexbox; - display: flex; - -webkit-box-orient: horizontal; - -webkit-box-direction: normal; - -ms-flex-direction: row; - flex-direction: row; - -webkit-box-pack: justify; - -ms-flex-pack: justify; - justify-content: space-between; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; - gap: 5%; -} - -.content-body { - max-width: 50%; -} - -.content-body p { - font-size: 18px; -} - -.content-img { - max-width: 40%; -} - -.content-img img { - max-width: 100%; - margin: 0 0 0 0; -} - - -@media only screen and (max-width: 768px) { - .text-image { - margin: 80px 0 0 0; - display: -webkit-box; - display: -ms-flexbox; - display: flex; - -webkit-box-orient: vertical; - -webkit-box-direction: normal; - -ms-flex-direction: column; - flex-direction: column; - -webkit-box-pack: start; - -ms-flex-pack: start; - justify-content: flex-start; - gap: 20%; - } - - .content-body { - max-width: 80%; - } - - .content-img { - max-width: 80%; - margin: 0 0 24px 0; - } - - .column-reverse { - -webkit-box-orient: vertical; - -webkit-box-direction: reverse; - -ms-flex-direction: column-reverse; - flex-direction: column-reverse; - } -} - -@media only screen and (max-width: 480px) { - .text-image { - margin: 50px 0 0 0; - gap: 20%; - } - - .content-body { - max-width: 100%; - } - - .content-body p { - font-size: 16px; - } - - .content-img { - max-width: 100%; - } -} - - -/* Text component */ -.text { - margin: 80px 0 0 0; - display: -webkit-box; - display: -ms-flexbox; - display: flex; - -webkit-box-orient: horizontal; - -webkit-box-direction: normal; - -ms-flex-direction: row; - flex-direction: row; - -webkit-box-pack: justify; - -ms-flex-pack: justify; - justify-content: space-between; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; -} - -.text-body { - max-width: 95%; -} - -.text-body p { - font-size: 18px; -} - -@media only screen and (max-width: 768px) { - .text { - margin: 80px 0 0 0; - display: -webkit-box; - display: -ms-flexbox; - display: flex; - -webkit-box-orient: vertical; - -webkit-box-direction: normal; - -ms-flex-direction: column; - flex-direction: column; - -webkit-box-pack: start; - -ms-flex-pack: start; - justify-content: flex-start; - gap: 20%; - } - - .text-body { - max-width: 80%; - } -} - -@media only screen and (max-width: 480px) { - .text { - margin: 50px 0 0 0; - } - - .text-body { - max-width: 100%; - } - - .text-body p { - font-size: 16px; - } -} - - -/* Donations */ -.section-donate { - margin-top: 56px; -} - -.section-donate h1 { - font-size: 40px; - font-weight: 600; - line-height: 1.1; - color: $dark; - text-align: center; -} - -.section-donate .btn { - margin: 32px 0 0 0; -} - -@media only screen and (max-width: 680px) { - .section-donate h1 { - font-size: 36px; - line-height: 1.2; - } -} - -@media only screen and (max-width: 480px) { - .section-donate h1 { - font-size: 30px; - line-height: 1.2; - } - - .section-donate { - margin-top: 40px; - } - - .donate-heading { - margin: 0 0 32px 0; - } - - .section-donate .btn { - margin: 8px 0 0 0; - } -} - - -/* Modal box*/ -.modal-box { - position: fixed; - background-color: rgba(42, 130, 222, 0.95); - top: 0; - right: 0; - bottom: 0; - left: 0; - z-index: 999; - visibility: hidden; - opacity: 0; - pointer-events: none; - transition: all 0.3s; - - &:target { - visibility: visible; - opacity: 1; - pointer-events: auto; - } - - & > div { - width: 500px; - position: absolute; - top: 50%; - left: 50%; - -webkit-transform: translate(-50%, -50%); - -ms-transform: translate(-50%, -50%); - transform: translate(-50%, -50%); - transform: translate(-50%, -50%); - padding: 20px 40px 20px 40px; - background: white; - border-radius: 16px; - } -} - -.modal-box h4 { - font-size: 26px; - font-weight: 600; - line-height: 1.025; - color: $dark; - text-align: left; - margin: 20px 0 20px 0; -} - -.modal-box .btn { - margin: 16px 0 0 0; -} - -.modal-box ol { - display: block; - font-size: 16px; - line-height: 1.6; - font-weight: 300; - color: $dark; - margin-top: 8px; -} - -.modal-close { - color: $dark; - font-size: 14px; - position: absolute; - right: 40px; - text-align: right; - top: 20px; - width: 70px; - text-decoration: underline; - - &:hover { - color: $primary-blue; - } -} - -@media only screen and (max-width: 680px) { - .modal-box { - - &:target { - - } - - & > div { - width: 90%; - } - } -} - -@media only screen and (max-width: 480px) { - .modal-box h4 { - font-size: 22px; - line-height: 1.2; - } - - .modal-box { - - &:target { - - } - - & > div { - padding: 20px 24px 20px 24px; - border-radius: 16px; - } - } - - .modal-box ol { - font-size: 14px; - margin: 20px 0 16px 0; - } -} - - -/* Footer */ -.section-footer { - margin: 80px 0 0 0; -} - -.footer-divider { - text-align: center; -} - -.footer-divider .gatsby-image-wrapper img { - width: 50px; - margin: 0 auto; -} - -footer { - margin: 16px 0 0 0; - display: -webkit-box; - display: -ms-flexbox; - display: flex; - -webkit-box-pack: center; - -ms-flex-pack: center; - justify-content: center; - -webkit-box-orient: horizontal; - -webkit-box-direction: normal; - -ms-flex-direction: row; - flex-direction: row; - vertical-align: middle; - gap: 30px; -} - -.company p { - font-size: 14px; -} - -.github a { - font-size: 14px; - color: $primary-blue; - text-decoration: underline; - vertical-align: middle; - cursor: pointer; -} - -.github .gatsby-image-wrapper img { - width: 18px; - vertical-align: middle; - margin: 2px 2px 0 0; -} - -@media only screen and (max-width: 580px) { - .section-footer { - margin-top: 60px; - } - - .footer-divider { - text-align: center; - } - - footer { - margin: 16px 0 0 0; - display: -webkit-box; - display: -ms-flexbox; - display: flex; - -webkit-box-pack: center; - -ms-flex-pack: center; - justify-content: center; - -webkit-box-orient: vertical; - -webkit-box-direction: normal; - -ms-flex-direction: column; - flex-direction: column; - text-align: center; - gap: 6px; - } -} - -blockquote { - background: #f9f9f9; - border-left: 10px solid #ccc; - margin: 1.5em 10px; - padding: 0.5em 10px; - quotes: "\201C""\201D""\2018""\2019"; -} - -blockquote:before { - color: #ccc; - content: open-quote; - font-size: 4em; - line-height: 0.1em; - margin-right: 0.25em; - vertical-align: -0.4em; -} - -blockquote p { - display: inline; -} 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/images/background-lume-installer.png b/src/images/background-lume-installer.png deleted file mode 100644 index e407eda..0000000 Binary files a/src/images/background-lume-installer.png and /dev/null differ diff --git a/src/images/firefox.svg b/src/images/firefox.svg deleted file mode 100644 index 6d49d68..0000000 Binary files a/src/images/firefox.svg and /dev/null differ diff --git a/src/images/icon-channel.svg b/src/images/icon-channel.svg deleted file mode 100644 index f3e0c30..0000000 --- a/src/images/icon-channel.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/src/images/icon-code.svg b/src/images/icon-code.svg deleted file mode 100644 index 1435cd7..0000000 --- a/src/images/icon-code.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/src/images/icon-folder-lock.svg b/src/images/icon-folder-lock.svg deleted file mode 100644 index 9d1d7c2..0000000 --- a/src/images/icon-folder-lock.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/src/images/icon-footer.png b/src/images/icon-footer.png deleted file mode 100644 index 3d8092e..0000000 Binary files a/src/images/icon-footer.png and /dev/null differ diff --git a/src/images/icon-github.png b/src/images/icon-github.png deleted file mode 100644 index 9490ffc..0000000 Binary files a/src/images/icon-github.png and /dev/null differ diff --git a/src/images/icon-grid.svg b/src/images/icon-grid.svg deleted file mode 100644 index 6a073a8..0000000 --- a/src/images/icon-grid.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/src/images/icon-lock.svg b/src/images/icon-lock.svg deleted file mode 100644 index 4668015..0000000 --- a/src/images/icon-lock.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/src/images/icon-shield.svg b/src/images/icon-shield.svg deleted file mode 100644 index 17416b3..0000000 --- a/src/images/icon-shield.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/src/images/icon-windows.png b/src/images/icon-windows.png deleted file mode 100644 index 19ce10e..0000000 Binary files a/src/images/icon-windows.png and /dev/null differ diff --git a/src/images/icon.png b/src/images/icon.png deleted file mode 100644 index b563f70..0000000 Binary files a/src/images/icon.png and /dev/null differ diff --git a/src/images/image-development-race.png b/src/images/image-development-race.png deleted file mode 100644 index 0d34cb6..0000000 Binary files a/src/images/image-development-race.png and /dev/null differ diff --git a/src/images/image-roadmap.jpg b/src/images/image-roadmap.jpg deleted file mode 100644 index b1be80c..0000000 Binary files a/src/images/image-roadmap.jpg and /dev/null differ diff --git a/src/images/logo.png b/src/images/logo.png deleted file mode 100644 index 203d8a7..0000000 Binary files a/src/images/logo.png and /dev/null differ diff --git a/src/images/matrix.jpg b/src/images/matrix.jpg deleted file mode 100644 index e7ce4d0..0000000 Binary files a/src/images/matrix.jpg and /dev/null differ diff --git a/src/images/moon.jpg b/src/images/moon.jpg deleted file mode 100644 index 06dc5fe..0000000 Binary files a/src/images/moon.jpg and /dev/null differ diff --git a/src/images/msedge.svg b/src/images/msedge.svg deleted file mode 100644 index 4f95f8d..0000000 --- a/src/images/msedge.svg +++ /dev/null @@ -1 +0,0 @@ - diff --git a/src/images/portal-image.jpg b/src/images/portal-image.jpg deleted file mode 100644 index c5f040c..0000000 Binary files a/src/images/portal-image.jpg and /dev/null differ diff --git a/src/images/portal.png b/src/images/portal.png deleted file mode 100644 index 169f1b8..0000000 Binary files a/src/images/portal.png and /dev/null differ diff --git a/src/layouts/Layout.astro b/src/layouts/Layout.astro new file mode 100644 index 0000000..9f1dab5 --- /dev/null +++ b/src/layouts/Layout.astro @@ -0,0 +1,26 @@ +--- +import '../styles/global.scss'; +import Navbar from '../components/Layout/Navbar/Navbar.jsx'; +import Footer from '../components/Layout/Footer/Footer.astro'; + +export interface Props { + view: string; + title: string; +} + +const { view, title } = Astro.props; +--- + + + + + {title} + + + +
+ +
+