diff --git a/.gitignore b/.gitignore new file mode 100644 index 0000000..f06235c --- /dev/null +++ b/.gitignore @@ -0,0 +1,2 @@ +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 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 new file mode 100644 index 0000000..d60df81 --- /dev/null +++ b/package.json @@ -0,0 +1,22 @@ +{ + "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/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/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/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..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} + + + +
+ +
+