Merge branch 'develop'
This commit is contained in:
commit
35765eee69
GPG Key ID:
C997C339BE476FF2
31
CHANGELOG.md
31
CHANGELOG.md
|
|
@ -1,3 +1,34 @@
|
||||||
|
## [0.2.5-develop.6](https://git.lumeweb.com/LumeWeb/lumeweb.com/compare/v0.2.5-develop.5...v0.2.5-develop.6) (2023-08-15)
|
||||||
|
|
||||||
|
|
||||||
|
### Bug Fixes
|
||||||
|
|
||||||
|
* update gitcoin url ([a95e913](https://git.lumeweb.com/LumeWeb/lumeweb.com/commit/a95e91389981afc7efac0398165a3cb184df564b))
|
||||||
|
|
||||||
|
## [0.2.5-develop.5](https://git.lumeweb.com/LumeWeb/lumeweb.com/compare/v0.2.5-develop.4...v0.2.5-develop.5) (2023-08-15)
|
||||||
|
|
||||||
|
|
||||||
|
### Bug Fixes
|
||||||
|
|
||||||
|
* improved hero image ([a07e74f](https://git.lumeweb.com/LumeWeb/lumeweb.com/commit/a07e74f1901b22dc2f502699c8a96a9bda4a8cf3))
|
||||||
|
|
||||||
|
## [0.2.5-develop.4](https://git.lumeweb.com/LumeWeb/lumeweb.com/compare/v0.2.5-develop.3...v0.2.5-develop.4) (2023-08-15)
|
||||||
|
|
||||||
|
|
||||||
|
### Bug Fixes
|
||||||
|
|
||||||
|
* last minute details ([63fb11e](https://git.lumeweb.com/LumeWeb/lumeweb.com/commit/63fb11e1b068a68f21c92343c53b9875e384b2a8))
|
||||||
|
* layout shifting and showing overflow ([309d19c](https://git.lumeweb.com/LumeWeb/lumeweb.com/commit/309d19c73aa1a261081000f7396ec090549b3d64))
|
||||||
|
|
||||||
|
## [0.2.5-develop.3](https://git.lumeweb.com/LumeWeb/lumeweb.com/compare/v0.2.5-develop.2...v0.2.5-develop.3) (2023-08-15)
|
||||||
|
|
||||||
|
|
||||||
|
### Bug Fixes
|
||||||
|
|
||||||
|
* wrong color on 'How.astro' Component ([02764ea](https://git.lumeweb.com/LumeWeb/lumeweb.com/commit/02764ea73cc27f0f5165cc10564a2fd6450a5cf4))
|
||||||
|
|
||||||
|
## [0.2.5-develop.2](https://git.lumeweb.com/LumeWeb/lumeweb.com/compare/v0.2.5-develop.1...v0.2.5-develop.2) (2023-08-15)
|
||||||
|
|
||||||
## [0.2.5-develop.1](https://git.lumeweb.com/LumeWeb/lumeweb.com/compare/v0.2.4...v0.2.5-develop.1) (2023-08-15)
|
## [0.2.5-develop.1](https://git.lumeweb.com/LumeWeb/lumeweb.com/compare/v0.2.4...v0.2.5-develop.1) (2023-08-15)
|
||||||
|
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -1,12 +1,12 @@
|
||||||
{
|
{
|
||||||
"name": "@lumeweb/lumeweb.com",
|
"name": "@lumeweb/lumeweb.com",
|
||||||
"version": "0.2.5-develop.1",
|
"version": "0.2.5-develop.6",
|
||||||
"lockfileVersion": 3,
|
"lockfileVersion": 3,
|
||||||
"requires": true,
|
"requires": true,
|
||||||
"packages": {
|
"packages": {
|
||||||
"": {
|
"": {
|
||||||
"name": "@lumeweb/lumeweb.com",
|
"name": "@lumeweb/lumeweb.com",
|
||||||
"version": "0.2.5-develop.1",
|
"version": "0.2.5-develop.6",
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"@astrojs/react": "^2.1.1",
|
"@astrojs/react": "^2.1.1",
|
||||||
"@astrojs/tailwind": "^3.1.1",
|
"@astrojs/tailwind": "^3.1.1",
|
||||||
|
|
|
||||||
|
|
@ -1,7 +1,7 @@
|
||||||
{
|
{
|
||||||
"name": "@lumeweb/lumeweb.com",
|
"name": "@lumeweb/lumeweb.com",
|
||||||
"type": "module",
|
"type": "module",
|
||||||
"version": "0.2.5-develop.1",
|
"version": "0.2.5-develop.6",
|
||||||
"private": true,
|
"private": true,
|
||||||
"repository": {
|
"repository": {
|
||||||
"type": "git",
|
"type": "git",
|
||||||
|
|
|
||||||
Binary file not shown.
|
After Width: | Height: | Size: 46 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.1 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 364 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 692 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 43 KiB |
|
|
@ -0,0 +1,53 @@
|
||||||
|
---
|
||||||
|
import Button from "../ui/Button.astro";
|
||||||
|
import FeaturedGroup from "../ui/FeaturedGroup.astro";
|
||||||
|
---
|
||||||
|
|
||||||
|
<style>
|
||||||
|
.custom-bg {
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
right: -12.5%;
|
||||||
|
bottom: 0;
|
||||||
|
left: -12.5%;
|
||||||
|
margin: 2% 0;
|
||||||
|
background: var(--color-charcoal);
|
||||||
|
transform: matrix(1, 0.04, -0.04, 1, 0, 0);
|
||||||
|
z-index: -1;
|
||||||
|
overflow: hidden;
|
||||||
|
height: 500px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.custom-bg::after {
|
||||||
|
content: "";
|
||||||
|
position: absolute;
|
||||||
|
top: 3%;
|
||||||
|
bottom: -9%;
|
||||||
|
left: 10%;
|
||||||
|
right: 10%;
|
||||||
|
background-image: url("/src/assets/donate-gfx-right.png");
|
||||||
|
background-position: 100% 100%;
|
||||||
|
background-repeat: no-repeat;
|
||||||
|
background-size: contain;
|
||||||
|
transform: rotate(-2.25deg);
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
||||||
|
<section id="how" class="relative overflow-hidden max-w-[100vw]">
|
||||||
|
<div class="custom-bg"></div>
|
||||||
|
<div
|
||||||
|
class="max-w-3xl bg-black/50 p-3 lg:bg-transparent lg:p-0 mx-10 md:mx-20 lg:mx-40"
|
||||||
|
>
|
||||||
|
<FeaturedGroup
|
||||||
|
subtitle="Donate via Gitcoin during funding rounds"
|
||||||
|
title="How should I donate?"
|
||||||
|
text={[
|
||||||
|
"When Gitcoin is doing funding rounds, donating through their website will give a matching bonus of up to 150%. This means that your donation will have a bigger impact on the project during this time period.",
|
||||||
|
]}
|
||||||
|
/>
|
||||||
|
<Button
|
||||||
|
href="https://explorer.gitcoin.co/#/round/10/0x8de918f0163b2021839a8d84954dd7e8e151326d/0x8de918f0163b2021839a8d84954dd7e8e151326d-130"
|
||||||
|
label="Gitcoin"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
@ -1,18 +0,0 @@
|
||||||
---
|
|
||||||
import './How.scss';
|
|
||||||
---
|
|
||||||
|
|
||||||
<section id="how">
|
|
||||||
<div class="custom-bg"></div>
|
|
||||||
<div class="feature-group">
|
|
||||||
<h2>How should I donate?</h2>
|
|
||||||
<h3>Donate via Gitcoin during funding rounds</h3>
|
|
||||||
<p>
|
|
||||||
When Gitcoin is doing funding rounds, donating through their website will give a matching bonus of up to
|
|
||||||
150%. This means that your donation will have a bigger impact on the project during this time period.
|
|
||||||
</p>
|
|
||||||
<div>
|
|
||||||
<a href="https://gitcoin.co/grants/4722/lume-web-web3-accessibility-freedom-and-education" class="btn-main">Gitcoin</a>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
|
|
@ -1,50 +0,0 @@
|
||||||
@import "/src/styles/vars.scss";
|
|
||||||
|
|
||||||
#how {
|
|
||||||
position: relative;
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
justify-content: center;
|
|
||||||
margin-top: 8em;
|
|
||||||
padding: 14em 7.5% 16em;
|
|
||||||
|
|
||||||
.custom-bg {
|
|
||||||
position: absolute;
|
|
||||||
top: 0;
|
|
||||||
right: -12.5%;
|
|
||||||
bottom: 0;
|
|
||||||
left: -12.5%;
|
|
||||||
margin: 2% 0;
|
|
||||||
background: $color-blue-charcoal;
|
|
||||||
transform: matrix(1, 0.04, -0.04, 1, 0, 0);
|
|
||||||
z-index: -1;
|
|
||||||
overflow: hidden;
|
|
||||||
|
|
||||||
&::after {
|
|
||||||
content: "";
|
|
||||||
position: absolute;
|
|
||||||
top: 3%;
|
|
||||||
bottom: -9%;
|
|
||||||
left: 10%;
|
|
||||||
right: 10%;
|
|
||||||
background-image: url("/src/assets/donate-gfx-right.png");
|
|
||||||
background-position: 100% 100%;
|
|
||||||
background-repeat: no-repeat;
|
|
||||||
background-size: contain;
|
|
||||||
transform: rotate(-2.25deg);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.feature-group {
|
|
||||||
max-width: 64em;
|
|
||||||
}
|
|
||||||
|
|
||||||
@media screen and (max-width: 80rem) {
|
|
||||||
p {
|
|
||||||
background: rgba($color-blue-charcoal, 0.75);
|
|
||||||
border-radius: 0.5em;
|
|
||||||
padding: 0.3em 0.5em;
|
|
||||||
margin: -0.3em -0.5em;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
@ -0,0 +1,18 @@
|
||||||
|
---
|
||||||
|
import backgroundSrc from "/src/assets/donate-jumbotron-bg.png";
|
||||||
|
---
|
||||||
|
|
||||||
|
<section
|
||||||
|
id="jumbotron"
|
||||||
|
class="relative w-full h-[420px] flex items-center justify-center max-w-[100vw] overflow-hidden"
|
||||||
|
>
|
||||||
|
<img
|
||||||
|
src={backgroundSrc.src}
|
||||||
|
class="-z-10 absolute top-[50px] left-1/2 -translate-x-1/2 w-[100em] max-w-none"
|
||||||
|
/>
|
||||||
|
<h1
|
||||||
|
class="font-display2 px-10 md:px-20 lg:px-40 text-4xl lg:text-5xl w-full max-w-5xl text-center break-words"
|
||||||
|
>
|
||||||
|
Lume is <br /> people-powered.
|
||||||
|
</h1>
|
||||||
|
</section>
|
||||||
|
|
@ -1,9 +0,0 @@
|
||||||
---
|
|
||||||
import '../../../styles/jumbotron.scss';
|
|
||||||
---
|
|
||||||
|
|
||||||
<section id="jumbotron">
|
|
||||||
<h1>
|
|
||||||
Lume is people-powered.
|
|
||||||
</h1>
|
|
||||||
</section>
|
|
||||||
|
|
@ -0,0 +1,19 @@
|
||||||
|
<section id="legal" class="mx-10 lg:mx-40 pb-40">
|
||||||
|
<h2 class="text-3xl lg:text-4xl font-display my-10">Tax and Legal</h2>
|
||||||
|
<p class="text-lg lg:text-xl font-body text-body my-5">
|
||||||
|
<strong
|
||||||
|
>Please understand that, according to United States regulations for our
|
||||||
|
present incorporation status, donations are not currently tax-deductible.</strong
|
||||||
|
>
|
||||||
|
</p>
|
||||||
|
<p class="text-lg lg:text-xl font-body text-body my-5">
|
||||||
|
If you are a corporation or business, planning to make a large donation, we
|
||||||
|
recommend that you consult a CPA to ensure you understand the tax
|
||||||
|
implications of your donated funds first.
|
||||||
|
</p>
|
||||||
|
<p class="text-lg lg:text-xl font-body text-body my-5">
|
||||||
|
All payments are nondeductible donations (unless you get consulted
|
||||||
|
otherwise) and do not create any implied service contract or obligation for
|
||||||
|
Hammer Technologies LLC to render any services.
|
||||||
|
</p>
|
||||||
|
</section>
|
||||||
|
|
@ -1,18 +0,0 @@
|
||||||
---
|
|
||||||
import './Legal.scss';
|
|
||||||
---
|
|
||||||
|
|
||||||
<section id="legal" class="tilted-bg-r">
|
|
||||||
<div>
|
|
||||||
<h2>Tax and Legal</h2>
|
|
||||||
<p>
|
|
||||||
<strong>Please understand that, according to United States regulations for our present incorporation status, donations are not currently tax-deductible.</strong>
|
|
||||||
</p>
|
|
||||||
<p>
|
|
||||||
If you are a corporation or business, planning to make a large donation, we recommend that you consult a CPA to ensure you understand the tax implications of your donated funds first.
|
|
||||||
</p>
|
|
||||||
<p>
|
|
||||||
All payments are nondeductible donations (unless you get consulted otherwise) and do not create any implied service contract or obligation for Hammer Technologies LLC to render any services.
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
|
|
@ -1,31 +0,0 @@
|
||||||
@import "/src/styles/mixins.scss";
|
|
||||||
@import "/src/styles/vars.scss";
|
|
||||||
|
|
||||||
#legal {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
justify-content: center;
|
|
||||||
padding: 11em 7.5% 9em;
|
|
||||||
|
|
||||||
h2 {
|
|
||||||
margin-bottom: 1em;
|
|
||||||
@include fluid-font-size(2.8125rem);
|
|
||||||
line-height: 122%;
|
|
||||||
}
|
|
||||||
|
|
||||||
p {
|
|
||||||
margin-top: 1.5em;
|
|
||||||
font-family: $font-family-jaldi;
|
|
||||||
@include fluid-font-size(1.375rem);
|
|
||||||
line-height: 157%;
|
|
||||||
color: $color-cloud;
|
|
||||||
}
|
|
||||||
|
|
||||||
strong {
|
|
||||||
@include fluid-font-size(1.625rem);
|
|
||||||
}
|
|
||||||
|
|
||||||
&::before {
|
|
||||||
bottom: -12%;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
@ -1,150 +1,379 @@
|
||||||
---
|
---
|
||||||
import './Methods.scss';
|
import QRCode from "qrcode";
|
||||||
import QRCode from 'qrcode';
|
|
||||||
|
|
||||||
const currencies = [];
|
const currencies = [];
|
||||||
|
|
||||||
const addCurrency = async (id, title, address) => {
|
const addCurrency = async (id, title, address, mainColor) => {
|
||||||
currencies.push({
|
currencies.push({
|
||||||
id: id,
|
id: id,
|
||||||
title: title,
|
title: title,
|
||||||
address: address,
|
address: address,
|
||||||
|
mainColor,
|
||||||
svgLogo: await import(`./icons/${id}.svg?raw`),
|
svgLogo: await import(`./icons/${id}.svg?raw`),
|
||||||
qrSmall: await QRCode.toDataURL(address, { version: 6, scale: 1, margin: 1 }),
|
qrSmall: await QRCode.toDataURL(address, {
|
||||||
qrLarge: await QRCode.toDataURL(address, { version: 6, scale: 7, margin: 2 })
|
version: 6,
|
||||||
|
scale: 1,
|
||||||
|
margin: 1,
|
||||||
|
}),
|
||||||
|
qrLarge: await QRCode.toDataURL(address, {
|
||||||
|
version: 6,
|
||||||
|
scale: 7,
|
||||||
|
margin: 2,
|
||||||
|
}),
|
||||||
});
|
});
|
||||||
};
|
};
|
||||||
|
|
||||||
await addCurrency('bitcoin', 'Bitcoin (BTC)', 'bc1q9xq2w4w2hjc240rs6mf0g8gpzz3rmcz4h77a2a');
|
await addCurrency(
|
||||||
await addCurrency('litecoin', 'Litecoin (LTC)', 'ltc1qgk6fc4u6grqyhfzw208477ze35vrr5tcwhq8zq');
|
"bitcoin",
|
||||||
await addCurrency('ethereum', 'Ethereum (ETH, USDT/USDC, ERC20)', '0x63cd2C691632720Ff2ABDD0b6AABA2466D3Fe468');
|
"Bitcoin (BTC)",
|
||||||
await addCurrency('polygon', 'Polygon (MATIC)', '0x63cd2C691632720Ff2ABDD0b6AABA2466D3Fe468');
|
"bc1q9xq2w4w2hjc240rs6mf0g8gpzz3rmcz4h77a2a",
|
||||||
await addCurrency('solana', 'Solana (SOL)', '4nMRucCuqttipwQXm31vBgoaxDW6o25TnD8fj1imviCu');
|
"#f7931a"
|
||||||
await addCurrency('cardano', 'Cardano (ADA)', 'addr1q9jd69s53pdy9j567a27ac6uvc2966x0rjz2l9sxy4y5w8383jl87mrdf6uuk9ja7lmagm2p4vw30sa42kjylxxrdufqucgst6');
|
);
|
||||||
await addCurrency('siacoin', 'Siacoin (SC)', '7506caa950cdddbaec8f465937b50324e942ac6f5280a053662e58e3cc8bdb543ab88ccd5c23');
|
await addCurrency(
|
||||||
await addCurrency('monero', 'Monero (XMR)', '48A33fSyFo9YAiux3KHKVBagPGvqmcr2h4oy5pufJn6NUWyZsPF6PAufmrET3gLJjsLwxfU7HU9xe8mEeCqtHqvZN3Ly12h');
|
"litecoin",
|
||||||
await addCurrency('handshake', 'Handshake (HNS)', 'hs1qe67ak3j2u4yrq0qnfs2hmycxqdvaf9v5rjsxzy');
|
"Litecoin (LTC)",
|
||||||
await addCurrency('cosmos', 'Cosmos (ATOM)', 'cosmos1pvy8zyzqwz2r2jl9j9d3zrfmg6dqc5hyhj6d5z');
|
"ltc1qgk6fc4u6grqyhfzw208477ze35vrr5tcwhq8zq",
|
||||||
await addCurrency('secret', 'Secret (SCRT)', 'secret18377vc3af588ggauhrpuyfd954lmmu05xqhf0y');
|
"#345d9d"
|
||||||
await addCurrency('algorand', 'Algorand (ALGO)', '3QBE5TZ63TF5W7V2QRJWRB72M7INQLA3RZW4XHD3ISRE7CRYCVNU4EEVAE');
|
);
|
||||||
|
await addCurrency(
|
||||||
|
"ethereum",
|
||||||
|
"Ethereum (ETH, USDT/USDC, ERC20)",
|
||||||
|
"0x63cd2C691632720Ff2ABDD0b6AABA2466D3Fe468",
|
||||||
|
"#8c8c8c"
|
||||||
|
);
|
||||||
|
await addCurrency(
|
||||||
|
"polygon",
|
||||||
|
"Polygon (MATIC)",
|
||||||
|
"0x63cd2C691632720Ff2ABDD0b6AABA2466D3Fe468",
|
||||||
|
"#8247e5"
|
||||||
|
);
|
||||||
|
await addCurrency(
|
||||||
|
"solana",
|
||||||
|
"Solana (SOL)",
|
||||||
|
"4nMRucCuqttipwQXm31vBgoaxDW6o25TnD8fj1imviCu",
|
||||||
|
"#dc1fff"
|
||||||
|
);
|
||||||
|
await addCurrency(
|
||||||
|
"cardano",
|
||||||
|
"Cardano (ADA)",
|
||||||
|
"addr1q9jd69s53pdy9j567a27ac6uvc2966x0rjz2l9sxy4y5w8383jl87mrdf6uuk9ja7lmagm2p4vw30sa42kjylxxrdufqucgst6",
|
||||||
|
"#0033ad"
|
||||||
|
);
|
||||||
|
await addCurrency(
|
||||||
|
"siacoin",
|
||||||
|
"Siacoin (SC)",
|
||||||
|
"7506caa950cdddbaec8f465937b50324e942ac6f5280a053662e58e3cc8bdb543ab88ccd5c23",
|
||||||
|
"#20ee82"
|
||||||
|
);
|
||||||
|
await addCurrency(
|
||||||
|
"monero",
|
||||||
|
"Monero (XMR)",
|
||||||
|
"48A33fSyFo9YAiux3KHKVBagPGvqmcr2h4oy5pufJn6NUWyZsPF6PAufmrET3gLJjsLwxfU7HU9xe8mEeCqtHqvZN3Ly12h",
|
||||||
|
"#f26822"
|
||||||
|
);
|
||||||
|
await addCurrency(
|
||||||
|
"handshake",
|
||||||
|
"Handshake (HNS)",
|
||||||
|
"hs1qe67ak3j2u4yrq0qnfs2hmycxqdvaf9v5rjsxzy",
|
||||||
|
"#fff"
|
||||||
|
);
|
||||||
|
await addCurrency(
|
||||||
|
"cosmos",
|
||||||
|
"Cosmos (ATOM)",
|
||||||
|
"cosmos1pvy8zyzqwz2r2jl9j9d3zrfmg6dqc5hyhj6d5z",
|
||||||
|
"#6f7390"
|
||||||
|
);
|
||||||
|
await addCurrency(
|
||||||
|
"secret",
|
||||||
|
"Secret (SCRT)",
|
||||||
|
"secret18377vc3af588ggauhrpuyfd954lmmu05xqhf0y",
|
||||||
|
"#fff"
|
||||||
|
);
|
||||||
|
await addCurrency(
|
||||||
|
"algorand",
|
||||||
|
"Algorand (ALGO)",
|
||||||
|
"3QBE5TZ63TF5W7V2QRJWRB72M7INQLA3RZW4XHD3ISRE7CRYCVNU4EEVAE",
|
||||||
|
"#fff"
|
||||||
|
);
|
||||||
---
|
---
|
||||||
|
|
||||||
|
<style lang="scss">
|
||||||
|
@import "../../../styles/vars.scss";
|
||||||
|
button#copy-address {
|
||||||
|
mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M15.75 17.25v3.375c0 .621-.504 1.125-1.125 1.125h-9.75a1.125 1.125 0 01-1.125-1.125V7.875c0-.621.504-1.125 1.125-1.125H6.75a9.06 9.06 0 011.5.124m7.5 10.376h3.375c.621 0 1.125-.504 1.125-1.125V11.25c0-4.46-3.243-8.161-7.5-8.876a9.06 9.06 0 00-1.5-.124H9.375c-.621 0-1.125.504-1.125 1.125v3.5m7.5 10.375H9.375a1.125 1.125 0 01-1.125-1.125v-9.25m12 6.625v-1.875a3.375 3.375 0 00-3.375-3.375h-1.5a1.125 1.125 0 01-1.125-1.125v-1.5a3.375 3.375 0 00-3.375-3.375H9.75" /></svg>');
|
||||||
|
background: $color-cloud;
|
||||||
|
transition: background $transition-duration;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
background: $color-white;
|
||||||
|
}
|
||||||
|
|
||||||
|
&.success {
|
||||||
|
mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M9 12.75L11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0z" /></svg>');
|
||||||
|
background: $color-aquamarine;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
button#copy-address:hover + div,
|
||||||
|
button#copy-address.success + div {
|
||||||
|
&::before {
|
||||||
|
content: "";
|
||||||
|
position: absolute;
|
||||||
|
inset: -0.5em;
|
||||||
|
padding: 0.5em;
|
||||||
|
background: rgba($color-blue-charcoal, 0.6);
|
||||||
|
animation: $transition-duration overlay-opacity forwards;
|
||||||
|
}
|
||||||
|
|
||||||
|
&::after {
|
||||||
|
content: "Copy to Clipboard";
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
right: -0.5em;
|
||||||
|
padding: 0 0.5em;
|
||||||
|
background: rgba($color-blue-charcoal, 0.85);
|
||||||
|
text-align: center;
|
||||||
|
white-space: nowrap;
|
||||||
|
color: $color-white;
|
||||||
|
border-radius: 0.5em 0 0 0.5em;
|
||||||
|
animation: $transition-duration hint-opacity forwards;
|
||||||
|
transition: color $transition-duration;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
button#copy-address.success + div {
|
||||||
|
&::after {
|
||||||
|
content: "Copied to Clipboard";
|
||||||
|
color: $color-aquamarine;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes overlay-opacity {
|
||||||
|
0% {
|
||||||
|
opacity: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
100% {
|
||||||
|
opacity: 0.75;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes hint-opacity {
|
||||||
|
0% {
|
||||||
|
opacity: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
100% {
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
<section id="methods">
|
<section id="methods">
|
||||||
<div>
|
<div class="mx-5 md:mx-20 lg:mx-40">
|
||||||
<h2>Donate Cryptocurrency</h2>
|
<h2 class="text-3xl lg:text-4xl mb-5 mt-20">Donate Cryptocurrency</h2>
|
||||||
<div class="method-grid">
|
<div
|
||||||
{currencies.map(currency => (
|
class="flex w-full flex-col lg:flex-row lg:flex-wrap gap-y-[10px] lg:gap-x-[10px]"
|
||||||
<div id={'donate-' + currency.id}>
|
>
|
||||||
<div>
|
{
|
||||||
<Fragment set:html={currency.svgLogo.default} />
|
currencies.map((currency) => (
|
||||||
<h3>{currency.title}</h3>
|
<div
|
||||||
<img onclick={"openDialog('" + currency.qrLarge + "')"} src={currency.qrSmall}/>
|
id={"donate-" + currency.id}
|
||||||
|
class={`hover:ring-2 flex flex-col bg-black rounded-md p-5 w-full max-w-[calc(100vw-40px)] lg:max-w-none lg:w-[calc(50%-20px)]`}
|
||||||
|
style={`--tw-ring-color: ${currency.mainColor}`}
|
||||||
|
>
|
||||||
|
<div class="flex flex-row flex-1 gap-x-4 w-full justify-between">
|
||||||
|
<div class="w-12 h-12">
|
||||||
|
<Fragment set:html={currency.svgLogo.default} />
|
||||||
|
</div>
|
||||||
|
<h3 class="w-full text-2xl">{currency.title}</h3>
|
||||||
|
<img
|
||||||
|
class="w-12 h-12"
|
||||||
|
onclick={"openDialog('" + currency.qrLarge + "')"}
|
||||||
|
src={currency.qrSmall}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div class="flex flex-row-reverse px-5 py-2 rounded-md text-body items-start justify-between mt-4">
|
||||||
|
<button
|
||||||
|
id="copy-address"
|
||||||
|
class="w-7 h-7 bg-gray-500"
|
||||||
|
onclick="
|
||||||
|
copyToClipboard(this)
|
||||||
|
"
|
||||||
|
/>
|
||||||
|
<div class="text-lg relative break-words max-w-[calc(100%-50px)]">
|
||||||
|
{currency.address}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="address">
|
))
|
||||||
<button onclick="copyToClipboard(this)"></button>
|
}
|
||||||
<div>{currency.address}</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
))}
|
|
||||||
</div>
|
</div>
|
||||||
<h2>Donate Fiat</h2>
|
|
||||||
<div class="method-grid">
|
|
||||||
<div id="donate-paypal">
|
|
||||||
<div>
|
|
||||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 154.728 190.5">
|
|
||||||
<g transform="translate(898.192 276.071)">
|
|
||||||
<path clip-path="none" d="M-837.663-237.968a5.49 5.49 0 0 0-5.423 4.633l-9.013 57.15-8.281 52.514-.005.044.01-.044 8.281-52.514c.421-2.669 2.719-4.633 5.42-4.633h26.404c26.573 0 49.127-19.387 53.246-45.658.314-1.996.482-3.973.52-5.924v-.003h-.003c-6.753-3.543-14.683-5.565-23.372-5.565z" fill="#001c64"/>
|
|
||||||
<path clip-path="none" d="M-766.506-232.402c-.037 1.951-.207 3.93-.52 5.926-4.119 26.271-26.673 45.658-53.246 45.658h-26.404c-2.701 0-4.999 1.964-5.42 4.633l-8.281 52.514-5.197 32.947a4.46 4.46 0 0 0 4.405 5.153h28.66a5.49 5.49 0 0 0 5.423-4.633l7.55-47.881c.423-2.669 2.722-4.636 5.423-4.636h16.876c26.573 0 49.124-19.386 53.243-45.655 2.924-18.649-6.46-35.614-22.511-44.026z" fill="#0070e0"/>
|
|
||||||
<path clip-path="none" d="M-870.225-276.071a5.49 5.49 0 0 0-5.423 4.636l-22.489 142.608a4.46 4.46 0 0 0 4.405 5.156h33.351l8.281-52.514 9.013-57.15a5.49 5.49 0 0 1 5.423-4.633h47.782c8.691 0 16.621 2.025 23.375 5.563.46-23.917-19.275-43.666-46.412-43.666z" fill="#003087"/>
|
|
||||||
</g>
|
|
||||||
</svg>
|
|
||||||
<h3>PayPal</h3>
|
|
||||||
<form action="https://www.paypal.com/donate" method="post" target="_top">
|
|
||||||
<input type="hidden" name="hosted_button_id" value="LKDLTQQRQV2U8">
|
|
||||||
<button class="btn-main">Donate</a>
|
|
||||||
</form>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div id="donate-patreon">
|
|
||||||
<div>
|
|
||||||
<svg version="1.1" viewBox="0 -4.5 256 256" xmlns="http://www.w3.org/2000/svg">
|
|
||||||
<path d="M45.1355837,0 L45.1355837,246.35001 L0,246.35001 L0,0 L45.1355837,0 Z M163.657111,0 C214.65668,0 256,41.3433196 256,92.3428889 C256,143.342458 214.65668,184.685778 163.657111,184.685778 C112.657542,184.685778 71.3142222,143.342458 71.3142222,92.3428889 C71.3142222,41.3433196 112.657542,0 163.657111,0 Z" fill="#FF424D"/>
|
|
||||||
</svg>
|
|
||||||
<h3>Patreon</h3>
|
|
||||||
<a class="btn-main" href="https://www.patreon.com/bePatron?u=71702133">Become a Patron!</a>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div id="donate-liberapay">
|
|
||||||
<div>
|
|
||||||
<svg viewBox="0 0 80 80" xmlns="http://www.w3.org/2000/svg">
|
|
||||||
<rect fill="#f6c915" width="80" height="80" rx="8"/>
|
|
||||||
<path fill="#FFF" d="M32.73 56.2651c-2.5867 0-4.6175-.3376-6.0925-1.0107s-2.5308-1.5936-3.1708-2.7611-.9458-2.4933-.9275-4.015.2267-3.1234.6284-4.8357l6.9391-29.0143 8.47-1.3108-7.595 31.4733c-.1458.655-.2275 1.2567-.2458 1.8025s.0817 1.0292.3 1.4475.5917.7566 1.12 1.0108 1.2658.42 2.2133.4925zM40.5333 28.0209c1.46-.4367 3.1267-.8284 5.0025-1.175s3.9075-.5183 6.0933-.5183 3.7985.3092 5.2726.9283 2.6864 1.4667 3.6341 2.5409 1.6475 2.3316 2.1024 3.77.6832 2.9783.6832 4.6183c0 2.6583-.4373 5.09-1.3214 7.2942s-2.076 4.1075-3.6237 5.71-3.4059 2.851-5.5763 3.7475-4.5235 1.3344-7.0718 1.3344c-1.2391 0-2.4775-.1104-3.7158-.3296l-2.4592 9.8912h-8.0865zM43.4867 49.3867c.6192.1458 1.3842.2133 2.295.2133 1.42 0 2.7133-.2583 3.8792-.7875s2.1583-1.265 2.9783-2.2125 1.4557-2.0842 1.9117-3.415.6827-2.795.6827-4.3983-.3467-2.8958-1.0379-3.9892-1.894-1.6391-3.6057-1.6391c-1.1667 0-2.2592.1092-3.2792.3283z"/>
|
|
||||||
</svg>
|
|
||||||
<h3>Liberapay</h3>
|
|
||||||
<a class="btn-main" href="https://liberapay.com/lumeweb/donate">Donate</a>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div id="donate-github">
|
|
||||||
<div>
|
|
||||||
<svg viewBox="0 0 98 96" xmlns="http://www.w3.org/2000/svg">
|
|
||||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M48.854 0C21.839 0 0 22 0 49.217c0 21.756 13.993 40.172 33.405 46.69 2.427.49 3.316-1.059 3.316-2.362 0-1.141-.08-5.052-.08-9.127-13.59 2.934-16.42-5.867-16.42-5.867-2.184-5.704-5.42-7.17-5.42-7.17-4.448-3.015.324-3.015.324-3.015 4.934.326 7.523 5.052 7.523 5.052 4.367 7.496 11.404 5.378 14.235 4.074.404-3.178 1.699-5.378 3.074-6.6-10.839-1.141-22.243-5.378-22.243-24.283 0-5.378 1.94-9.778 5.014-13.2-.485-1.222-2.184-6.275.486-13.038 0 0 4.125-1.304 13.426 5.052a46.97 46.97 0 0 1 12.214-1.63c4.125 0 8.33.571 12.213 1.63 9.302-6.356 13.427-5.052 13.427-5.052 2.67 6.763.97 11.816.485 13.038 3.155 3.422 5.015 7.822 5.015 13.2 0 18.905-11.404 23.06-22.324 24.283 1.78 1.548 3.316 4.481 3.316 9.126 0 6.6-.08 11.897-.08 13.526 0 1.304.89 2.853 3.316 2.364 19.412-6.52 33.405-24.935 33.405-46.691C97.707 22 75.788 0 48.854 0z" fill="#fff"/>
|
|
||||||
</svg>
|
|
||||||
<h3>GitHub Sponsors</h3>
|
|
||||||
<a class="btn-main" href="https://github.com/sponsors/LumeWeb">Donate</a>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<p>
|
|
||||||
If you are interested in donating through other means, please get in touch with us to discuss. If there is a cryptocurrency you wish to contribute with that we have not listed, please let me know!
|
|
||||||
</p>
|
|
||||||
</div>
|
</div>
|
||||||
<dialog id="qr-dialog"></dialog>
|
<div class="mx-5 md:mx-20 lg:mx-40 max-w-[calc(100vw-40px)]">
|
||||||
<script is:inline>
|
<h2 class="text-3xl lg:text-4xl mb-10 mt-40">Donate Fiat</h2>
|
||||||
var
|
<div
|
||||||
msgCallback,
|
class="flex flex-col items-center justify-between gap-y-4 lg:gap-x-4 lg:flex-row lg:flex-wrap"
|
||||||
msgTimeout,
|
>
|
||||||
qrDialog = document.getElementById('qr-dialog');
|
<div
|
||||||
|
id="donate-paypal"
|
||||||
function copyToClipboard(element) {
|
class={`flex flex-row justify-between items-center h-full hover:ring ring-[#0070e0] bg-black rounded-md px-10 py-5 w-full lg:w-[calc(50%-20px)]`}
|
||||||
var
|
>
|
||||||
range = document.createRange(),
|
<svg
|
||||||
selection = window.getSelection();
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
class="w-10 h-10"
|
||||||
if(msgCallback) {
|
viewBox="0 0 154.728 190.5"
|
||||||
clearTimeout(msgTimeout);
|
>
|
||||||
msgCallback();
|
<g transform="translate(898.192 276.071)">
|
||||||
}
|
<path
|
||||||
|
clip-path="none"
|
||||||
range.selectNode(element.nextElementSibling); // select address container
|
d="M-837.663-237.968a5.49 5.49 0 0 0-5.423 4.633l-9.013 57.15-8.281 52.514-.005.044.01-.044 8.281-52.514c.421-2.669 2.719-4.633 5.42-4.633h26.404c26.573 0 49.127-19.387 53.246-45.658.314-1.996.482-3.973.52-5.924v-.003h-.003c-6.753-3.543-14.683-5.565-23.372-5.565z"
|
||||||
selection.removeAllRanges(); // clear current selection
|
fill="#001c64"></path>
|
||||||
selection.addRange(range); // select address
|
<path
|
||||||
document.execCommand('copy'); // copy
|
clip-path="none"
|
||||||
selection.removeAllRanges(); // deselect
|
d="M-766.506-232.402c-.037 1.951-.207 3.93-.52 5.926-4.119 26.271-26.673 45.658-53.246 45.658h-26.404c-2.701 0-4.999 1.964-5.42 4.633l-8.281 52.514-5.197 32.947a4.46 4.46 0 0 0 4.405 5.153h28.66a5.49 5.49 0 0 0 5.423-4.633l7.55-47.881c.423-2.669 2.722-4.636 5.423-4.636h16.876c26.573 0 49.124-19.386 53.243-45.655 2.924-18.649-6.46-35.614-22.511-44.026z"
|
||||||
|
fill="#0070e0"></path>
|
||||||
element.classList.add('success');
|
<path
|
||||||
|
clip-path="none"
|
||||||
msgCallback = function() {
|
d="M-870.225-276.071a5.49 5.49 0 0 0-5.423 4.636l-22.489 142.608a4.46 4.46 0 0 0 4.405 5.156h33.351l8.281-52.514 9.013-57.15a5.49 5.49 0 0 1 5.423-4.633h47.782c8.691 0 16.621 2.025 23.375 5.563.46-23.917-19.275-43.666-46.412-43.666z"
|
||||||
element.classList.remove('success');
|
fill="#003087"></path>
|
||||||
msgCallback = undefined;
|
</g>
|
||||||
}
|
</svg>
|
||||||
|
<h3 class="ml-4 w-full text-2xl">PayPal</h3>
|
||||||
msgTimeout = window.setTimeout(msgCallback, 5000);
|
<form
|
||||||
}
|
action="https://www.paypal.com/donate"
|
||||||
|
method="post"
|
||||||
function openDialog(qrLarge) {
|
target="_top"
|
||||||
document.body.classList.add('scroll-lock');
|
>
|
||||||
qrDialog.innerHTML = '<img src="' + qrLarge + '"/>';
|
<input type="hidden" name="hosted_button_id" value="LKDLTQQRQV2U8" />
|
||||||
qrDialog.showModal();
|
<button
|
||||||
}
|
class="text-lg bg-[#0070e0] ring-[#0070e0] hover:ring text-white hover:bg-transparent transition-[background-color] duration-150 rounded-md p-3 px-5"
|
||||||
|
>
|
||||||
qrDialog.addEventListener('close', function() {
|
Donate
|
||||||
document.body.classList.remove('scroll-lock');
|
</button>
|
||||||
});
|
</form>
|
||||||
|
</div>
|
||||||
qrDialog.addEventListener('click', function(event) {
|
<div
|
||||||
if (event.target === this) {
|
id="donate-patreon"
|
||||||
this.close();
|
class="flex flex-1 flex-row justify-between items-center hover:ring ring-[#ff424d] bg-black rounded-md px-10 py-5 w-full lg:w-[calc(50%-20px)]"
|
||||||
}
|
>
|
||||||
});
|
<svg
|
||||||
</script>
|
version="1.1"
|
||||||
|
viewBox="0 -4.5 256 256"
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
class="w-14 h-14"
|
||||||
|
>
|
||||||
|
<path
|
||||||
|
d="M45.1355837,0 L45.1355837,246.35001 L0,246.35001 L0,0 L45.1355837,0 Z M163.657111,0 C214.65668,0 256,41.3433196 256,92.3428889 C256,143.342458 214.65668,184.685778 163.657111,184.685778 C112.657542,184.685778 71.3142222,143.342458 71.3142222,92.3428889 C71.3142222,41.3433196 112.657542,0 163.657111,0 Z"
|
||||||
|
fill="#FF424D"></path>
|
||||||
|
</svg>
|
||||||
|
<h3 class="w-full ml-4 mr-[60px] text-2xl">Patreon</h3>
|
||||||
|
<button
|
||||||
|
class="text-lg bg-[#ff424d] w-full ring-[#ff424d] hover:ring text-white hover:bg-transparent transition-[background-color] duration-150 rounded-md p-3"
|
||||||
|
><a
|
||||||
|
href="https://www.patreon.com/bePatron?u=71702133"
|
||||||
|
class="block -m-3 py-3">Become a Patron!</a
|
||||||
|
>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
id="donate-liberapay"
|
||||||
|
class="flex flex-row justify-between items-center hover:ring ring-[#f6c915] bg-black rounded-md px-10 py-5 w-full lg:w-[calc(50%-20px)]"
|
||||||
|
>
|
||||||
|
<svg
|
||||||
|
viewBox="0 0 80 80"
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
class="w-10 h-10"
|
||||||
|
>
|
||||||
|
<rect fill="#f6c915" width="80" height="80" rx="8"></rect>
|
||||||
|
<path
|
||||||
|
fill="#FFF"
|
||||||
|
d="M32.73 56.2651c-2.5867 0-4.6175-.3376-6.0925-1.0107s-2.5308-1.5936-3.1708-2.7611-.9458-2.4933-.9275-4.015.2267-3.1234.6284-4.8357l6.9391-29.0143 8.47-1.3108-7.595 31.4733c-.1458.655-.2275 1.2567-.2458 1.8025s.0817 1.0292.3 1.4475.5917.7566 1.12 1.0108 1.2658.42 2.2133.4925zM40.5333 28.0209c1.46-.4367 3.1267-.8284 5.0025-1.175s3.9075-.5183 6.0933-.5183 3.7985.3092 5.2726.9283 2.6864 1.4667 3.6341 2.5409 1.6475 2.3316 2.1024 3.77.6832 2.9783.6832 4.6183c0 2.6583-.4373 5.09-1.3214 7.2942s-2.076 4.1075-3.6237 5.71-3.4059 2.851-5.5763 3.7475-4.5235 1.3344-7.0718 1.3344c-1.2391 0-2.4775-.1104-3.7158-.3296l-2.4592 9.8912h-8.0865zM43.4867 49.3867c.6192.1458 1.3842.2133 2.295.2133 1.42 0 2.7133-.2583 3.8792-.7875s2.1583-1.265 2.9783-2.2125 1.4557-2.0842 1.9117-3.415.6827-2.795.6827-4.3983-.3467-2.8958-1.0379-3.9892-1.894-1.6391-3.6057-1.6391c-1.1667 0-2.2592.1092-3.2792.3283z"
|
||||||
|
></path>
|
||||||
|
</svg>
|
||||||
|
<h3 class="w-full text-2xl mx-4">Liberapay</h3>
|
||||||
|
<a
|
||||||
|
class="text-lg bg-[#f6c915] ring-[#f6c915] hover:ring text-black hover:text-white hover:bg-transparent transition-[background-color] duration-150 rounded-md p-3 px-5"
|
||||||
|
href="https://liberapay.com/lumeweb/donate">Donate</a
|
||||||
|
>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
id="donate-github"
|
||||||
|
class="flex flex-row justify-between items-center hover:ring ring-white bg-black rounded-md px-10 py-5 w-full lg:w-[calc(50%+3px)]"
|
||||||
|
>
|
||||||
|
<svg
|
||||||
|
viewBox="0 0 98 96"
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
class="w-10 h-10"
|
||||||
|
>
|
||||||
|
<path
|
||||||
|
fill-rule="evenodd"
|
||||||
|
clip-rule="evenodd"
|
||||||
|
d="M48.854 0C21.839 0 0 22 0 49.217c0 21.756 13.993 40.172 33.405 46.69 2.427.49 3.316-1.059 3.316-2.362 0-1.141-.08-5.052-.08-9.127-13.59 2.934-16.42-5.867-16.42-5.867-2.184-5.704-5.42-7.17-5.42-7.17-4.448-3.015.324-3.015.324-3.015 4.934.326 7.523 5.052 7.523 5.052 4.367 7.496 11.404 5.378 14.235 4.074.404-3.178 1.699-5.378 3.074-6.6-10.839-1.141-22.243-5.378-22.243-24.283 0-5.378 1.94-9.778 5.014-13.2-.485-1.222-2.184-6.275.486-13.038 0 0 4.125-1.304 13.426 5.052a46.97 46.97 0 0 1 12.214-1.63c4.125 0 8.33.571 12.213 1.63 9.302-6.356 13.427-5.052 13.427-5.052 2.67 6.763.97 11.816.485 13.038 3.155 3.422 5.015 7.822 5.015 13.2 0 18.905-11.404 23.06-22.324 24.283 1.78 1.548 3.316 4.481 3.316 9.126 0 6.6-.08 11.897-.08 13.526 0 1.304.89 2.853 3.316 2.364 19.412-6.52 33.405-24.935 33.405-46.691C97.707 22 75.788 0 48.854 0z"
|
||||||
|
fill="#fff"></path>
|
||||||
|
</svg>
|
||||||
|
<h3 class="w-full text-2xl mx-4">GitHub Sponsors</h3>
|
||||||
|
<button
|
||||||
|
class="text-lg bg-white ring-white hover:ring text-black hover:text-white hover:bg-transparent transition-[background-color] duration-150 rounded-md p-3"
|
||||||
|
><a
|
||||||
|
href="https://github.com/sponsors/LumeWeb"
|
||||||
|
class="block -m-3 py-3 px-5">Donate</a
|
||||||
|
>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<p class="text-lg italic font-body text-body mt-5 mx-10 md:mx-20 lg:mx-40">
|
||||||
|
If you are interested in donating through other means, please get in touch
|
||||||
|
with us to discuss. If there is a cryptocurrency you wish to contribute with
|
||||||
|
that we have not listed, please let me know!
|
||||||
|
</p>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
|
<dialog id="qr-dialog" class="backdrop:bg-black/20 backdrop:backdrop-blur-sm">
|
||||||
|
</dialog>
|
||||||
|
<script is:inline>
|
||||||
|
var msgCallback,
|
||||||
|
msgTimeout,
|
||||||
|
qrDialog = document.getElementById("qr-dialog");
|
||||||
|
|
||||||
|
function copyToClipboard(element) {
|
||||||
|
var range = document.createRange(),
|
||||||
|
selection = window.getSelection();
|
||||||
|
|
||||||
|
if (msgCallback) {
|
||||||
|
clearTimeout(msgTimeout);
|
||||||
|
msgCallback();
|
||||||
|
}
|
||||||
|
|
||||||
|
range.selectNode(element.nextElementSibling); // select address container
|
||||||
|
selection.removeAllRanges(); // clear current selection
|
||||||
|
selection.addRange(range); // select address
|
||||||
|
document.execCommand("copy"); // copy
|
||||||
|
selection.removeAllRanges(); // deselect
|
||||||
|
|
||||||
|
element.classList.add("success");
|
||||||
|
|
||||||
|
msgCallback = function () {
|
||||||
|
element.classList.remove("success");
|
||||||
|
msgCallback = undefined;
|
||||||
|
};
|
||||||
|
|
||||||
|
msgTimeout = window.setTimeout(msgCallback, 5000);
|
||||||
|
}
|
||||||
|
|
||||||
|
function openDialog(qrLarge) {
|
||||||
|
document.body.classList.add("scroll-lock");
|
||||||
|
qrDialog.innerHTML = '<img src="' + qrLarge + '"/>';
|
||||||
|
qrDialog.showModal();
|
||||||
|
}
|
||||||
|
|
||||||
|
qrDialog.addEventListener("close", function () {
|
||||||
|
document.body.classList.remove("scroll-lock");
|
||||||
|
});
|
||||||
|
|
||||||
|
qrDialog.addEventListener("click", function (event) {
|
||||||
|
if (event.target === this) {
|
||||||
|
this.close();
|
||||||
|
}
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
|
|
||||||
|
|
@ -1,291 +0,0 @@
|
||||||
@import "/src/styles/mixins.scss";
|
|
||||||
@import "/src/styles/vars.scss";
|
|
||||||
|
|
||||||
#methods {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
justify-content: center;
|
|
||||||
margin: 2em 7.5% 6em;
|
|
||||||
padding-top: 3em;
|
|
||||||
font-family: $font-family-jaldi;
|
|
||||||
|
|
||||||
h2 {
|
|
||||||
margin: 1.25em 0 1em;
|
|
||||||
@include fluid-font-size(2.8125rem);
|
|
||||||
line-height: 122%;
|
|
||||||
|
|
||||||
&:first-child {
|
|
||||||
margin-top: 0;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.method-grid {
|
|
||||||
display: grid;
|
|
||||||
grid-template-columns: repeat(1, 1fr);
|
|
||||||
gap: 2em;
|
|
||||||
margin-bottom: 4em;
|
|
||||||
|
|
||||||
@media screen and (min-width: 48rem) {
|
|
||||||
grid-template-columns: repeat(2, 1fr);
|
|
||||||
}
|
|
||||||
|
|
||||||
> div {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
padding: 4em 4em 1em;
|
|
||||||
background: $color-blue-charcoal;
|
|
||||||
border: 0.1em solid transparent;
|
|
||||||
border-radius: 1em;
|
|
||||||
transition: border-color 200ms;
|
|
||||||
|
|
||||||
&:hover {
|
|
||||||
border-color: $color-aquamarine;
|
|
||||||
}
|
|
||||||
|
|
||||||
> div:first-child {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
gap: 2em;
|
|
||||||
margin-bottom: 3em;
|
|
||||||
|
|
||||||
svg {
|
|
||||||
flex-shrink: 0;
|
|
||||||
@include fluid-max-width-height(3.4375rem, 3.4375rem);
|
|
||||||
}
|
|
||||||
|
|
||||||
h3 {
|
|
||||||
flex-grow: 1;
|
|
||||||
font-family: $font-family-jetbrains-mono;
|
|
||||||
@include fluid-font-size(1.5rem);
|
|
||||||
}
|
|
||||||
|
|
||||||
img {
|
|
||||||
@include fluid-width-height(3.4375rem, 3.4375rem);
|
|
||||||
image-rendering: pixelated;
|
|
||||||
cursor: zoom-in;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.address {
|
|
||||||
display: flex;
|
|
||||||
margin-bottom: 3em;
|
|
||||||
color: $color-cloud;
|
|
||||||
|
|
||||||
div {
|
|
||||||
order: 1;
|
|
||||||
flex-grow: 1;
|
|
||||||
position: relative;
|
|
||||||
@include fluid-font-size(1.375rem);
|
|
||||||
word-break: break-all;
|
|
||||||
user-select: all;
|
|
||||||
}
|
|
||||||
|
|
||||||
button {
|
|
||||||
order: 2;
|
|
||||||
flex-shrink: 0;
|
|
||||||
@include fluid-width-height(1.875rem, 1.875rem);
|
|
||||||
@include fluid-margin-lr-rem(0.78125rem);
|
|
||||||
mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M15.75 17.25v3.375c0 .621-.504 1.125-1.125 1.125h-9.75a1.125 1.125 0 01-1.125-1.125V7.875c0-.621.504-1.125 1.125-1.125H6.75a9.06 9.06 0 011.5.124m7.5 10.376h3.375c.621 0 1.125-.504 1.125-1.125V11.25c0-4.46-3.243-8.161-7.5-8.876a9.06 9.06 0 00-1.5-.124H9.375c-.621 0-1.125.504-1.125 1.125v3.5m7.5 10.375H9.375a1.125 1.125 0 01-1.125-1.125v-9.25m12 6.625v-1.875a3.375 3.375 0 00-3.375-3.375h-1.5a1.125 1.125 0 01-1.125-1.125v-1.5a3.375 3.375 0 00-3.375-3.375H9.75" /></svg>');
|
|
||||||
background: $color-cloud;
|
|
||||||
transition: background $transition-duration;
|
|
||||||
|
|
||||||
&:hover {
|
|
||||||
background: $color-white;
|
|
||||||
}
|
|
||||||
|
|
||||||
&.success {
|
|
||||||
mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M9 12.75L11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0z" /></svg>');
|
|
||||||
background: $color-aquamarine;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
button:hover + div, button.success + div {
|
|
||||||
&::before {
|
|
||||||
content: "";
|
|
||||||
position: absolute;
|
|
||||||
inset: -0.5em;
|
|
||||||
padding: 0.5em;
|
|
||||||
background: $color-blue-charcoal;
|
|
||||||
animation: $transition-duration overlay-opacity forwards;
|
|
||||||
}
|
|
||||||
|
|
||||||
&::after {
|
|
||||||
content: "Copy to Clipboard";
|
|
||||||
position: absolute;
|
|
||||||
top: 0;
|
|
||||||
right: -0.5em;
|
|
||||||
padding: 0 0.5em;
|
|
||||||
background: rgba($color-blue-charcoal, 0.75);
|
|
||||||
text-align: center;
|
|
||||||
white-space: nowrap;
|
|
||||||
color: $color-white;
|
|
||||||
border-radius: 0.5em 0 0 0.5em;
|
|
||||||
animation: $transition-duration hint-opacity forwards;
|
|
||||||
transition: color $transition-duration;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
button.success + div {
|
|
||||||
&::after {
|
|
||||||
content: "Copied to Clipboard";
|
|
||||||
color: $color-aquamarine;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
p {
|
|
||||||
margin-top: 1em;
|
|
||||||
@include fluid-font-size(1.25rem);
|
|
||||||
font-style: italic;
|
|
||||||
line-height: 157%;
|
|
||||||
color: $color-cloud;
|
|
||||||
}
|
|
||||||
|
|
||||||
.btn-main {
|
|
||||||
@include fluid-font-size(1.5rem);
|
|
||||||
}
|
|
||||||
|
|
||||||
#donate-bitcoin:hover {
|
|
||||||
border-color: #f7931a;
|
|
||||||
}
|
|
||||||
|
|
||||||
#donate-litecoin:hover {
|
|
||||||
border-color: #345d9d;
|
|
||||||
}
|
|
||||||
|
|
||||||
#donate-ethereum:hover {
|
|
||||||
border-color: #8c8c8c;
|
|
||||||
}
|
|
||||||
|
|
||||||
#donate-polygon:hover {
|
|
||||||
border-color: #8247e5;
|
|
||||||
}
|
|
||||||
|
|
||||||
#donate-solana:hover {
|
|
||||||
border-color: #dc1fff;
|
|
||||||
}
|
|
||||||
|
|
||||||
#donate-cardano:hover {
|
|
||||||
border-color: #0033ad;
|
|
||||||
}
|
|
||||||
|
|
||||||
#donate-siacoin:hover {
|
|
||||||
border-color: #20ee82;
|
|
||||||
}
|
|
||||||
|
|
||||||
#donate-monero:hover {
|
|
||||||
border-color: #f26822;
|
|
||||||
}
|
|
||||||
|
|
||||||
#donate-handshake:hover {
|
|
||||||
border-color: #fff;
|
|
||||||
}
|
|
||||||
|
|
||||||
#donate-cosmos:hover {
|
|
||||||
border-color: #6f7390;
|
|
||||||
}
|
|
||||||
|
|
||||||
#donate-secret:hover {
|
|
||||||
border-color: #fff;
|
|
||||||
}
|
|
||||||
|
|
||||||
#donate-algorand:hover {
|
|
||||||
border-color: #fff;
|
|
||||||
}
|
|
||||||
|
|
||||||
#donate-paypal {
|
|
||||||
&:hover {
|
|
||||||
border-color: #0070e0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.btn-main {
|
|
||||||
color: #fff;
|
|
||||||
background: #0070e0;
|
|
||||||
border-color: #0070e0;
|
|
||||||
|
|
||||||
&:hover {
|
|
||||||
background: inherit;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
#donate-patreon {
|
|
||||||
&:hover {
|
|
||||||
border-color: #ff424d;
|
|
||||||
}
|
|
||||||
|
|
||||||
.btn-main {
|
|
||||||
color: #fff;
|
|
||||||
background: #ff424d;
|
|
||||||
border-color: #ff424d;
|
|
||||||
|
|
||||||
&:hover {
|
|
||||||
background: inherit;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
#donate-liberapay {
|
|
||||||
&:hover {
|
|
||||||
border-color: #f6c915;
|
|
||||||
}
|
|
||||||
|
|
||||||
.btn-main {
|
|
||||||
color: #000;
|
|
||||||
background: #f6c915;
|
|
||||||
border-color: #f6c915;
|
|
||||||
|
|
||||||
&:hover {
|
|
||||||
color: inherit;
|
|
||||||
background: inherit;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
#donate-github {
|
|
||||||
&:hover {
|
|
||||||
border-color: #fff;
|
|
||||||
}
|
|
||||||
|
|
||||||
.btn-main {
|
|
||||||
color: #000;
|
|
||||||
background: #fff;
|
|
||||||
border-color: #fff;
|
|
||||||
|
|
||||||
&:hover {
|
|
||||||
color: inherit;
|
|
||||||
background: inherit;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
#qr-dialog {
|
|
||||||
padding: 0;
|
|
||||||
|
|
||||||
&::backdrop {
|
|
||||||
background: rgba($color-black, 0.85);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@keyframes overlay-opacity {
|
|
||||||
0% {
|
|
||||||
opacity: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
100% {
|
|
||||||
opacity: 0.75;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@keyframes hint-opacity {
|
|
||||||
0% {
|
|
||||||
opacity: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
100% {
|
|
||||||
opacity: 1;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
@ -0,0 +1,33 @@
|
||||||
|
---
|
||||||
|
import Button from "../ui/Button.astro";
|
||||||
|
import FeaturedGroup from "../ui/FeaturedGroup.astro";
|
||||||
|
import backgroud from "/src/assets/why-bg-2.png";
|
||||||
|
---
|
||||||
|
|
||||||
|
<section
|
||||||
|
id="why"
|
||||||
|
class="flex flex-col overflow-hidden relative lg:flex-row mx-10 md:mx-20 lg:mx-40"
|
||||||
|
>
|
||||||
|
<img
|
||||||
|
src={backgroud.src}
|
||||||
|
class="absolute xl:relative -z-10 min-w-[1000px] h-[750px] -mx-10 md:-mx-20 lg:-mx-40"
|
||||||
|
/>
|
||||||
|
<div>
|
||||||
|
<FeaturedGroup
|
||||||
|
subtitle="Why should I donate to Lume?"
|
||||||
|
title="Help us break the pattern"
|
||||||
|
text={[
|
||||||
|
`<ul class="space-y-3 -mb-10 text-body font-body list-disc list-inside text-xl lg:text-2xl">
|
||||||
|
<li class="list-item">You believe the internet should be free and open for everyone, regardless of political beliefs.</li>
|
||||||
|
<li class="list-item">You want a neutral web accessible to everyday people.</li>
|
||||||
|
<li class="list-item">You believe your data should be private and secure unless you choose to share it.</li>
|
||||||
|
<li class="list-item">You want to ensure that you or someone else can’t be censored or “de-platformed.”</li>
|
||||||
|
<li class="list-item">You think people should have free access to information no matter how they choose to access it.</li>
|
||||||
|
<li class="list-item">You believe in handling web abuse using legal and social means instead of censorship and restriction.</li>
|
||||||
|
</ul>`,
|
||||||
|
`Every single day you use the Internet, your data is sold to companies to pay for your usage. Help us break the pattern by funding the creation of free and open-source Web3 tools.`,
|
||||||
|
]}
|
||||||
|
/>
|
||||||
|
<Button label="Donate" href="#methods" />
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
@ -1,24 +0,0 @@
|
||||||
---
|
|
||||||
import './Why.scss';
|
|
||||||
---
|
|
||||||
|
|
||||||
<section id="why">
|
|
||||||
<div class="feature-group">
|
|
||||||
<h2>Help us break the pattern</h2>
|
|
||||||
<h3>Why should I donate to Lume?</h3>
|
|
||||||
<ul>
|
|
||||||
<li>You believe the internet should be free and open for everyone, regardless of political beliefs.</li>
|
|
||||||
<li>You want a neutral web accessible to everyday people.</li>
|
|
||||||
<li>You believe your data should be private and secure unless you choose to share it.</li>
|
|
||||||
<li>You want to ensure that you or someone else can’t be censored or “de-platformed.”</li>
|
|
||||||
<li>You think people should have free access to information no matter how they choose to access it.</li>
|
|
||||||
<li>You believe in handling web abuse using legal and social means instead of censorship and restriction.</li>
|
|
||||||
</ul>
|
|
||||||
<p>
|
|
||||||
Every single day you use the Internet, your data is sold to companies to pay for your usage. Help us break the pattern by funding the creation of free and open-source Web3 tools.
|
|
||||||
</p>
|
|
||||||
<div>
|
|
||||||
<a href="#methods" class="btn-main">Donate</a>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
|
|
@ -1,50 +0,0 @@
|
||||||
@import "/src/styles/vars.scss";
|
|
||||||
|
|
||||||
#why {
|
|
||||||
position: relative;
|
|
||||||
display: flex;
|
|
||||||
justify-content: flex-end;
|
|
||||||
align-items: center;
|
|
||||||
max-width: 185.6em;
|
|
||||||
min-height: 58.8em;
|
|
||||||
margin: 0 auto;
|
|
||||||
|
|
||||||
&::before {
|
|
||||||
content: "";
|
|
||||||
position: absolute;
|
|
||||||
top: 0;
|
|
||||||
bottom: 0;
|
|
||||||
left: min(0em, calc((100% - 92.2em) / 2));
|
|
||||||
width: calc(100% - 64em - 7.5%);
|
|
||||||
min-width: 92.2em;
|
|
||||||
background-image: url("/src/assets/single-brand-bg-2.png");
|
|
||||||
background-position: 50% 0;
|
|
||||||
background-repeat: no-repeat;
|
|
||||||
background-size: contain;
|
|
||||||
z-index: -1;
|
|
||||||
}
|
|
||||||
|
|
||||||
.feature-group {
|
|
||||||
box-sizing: content-box;
|
|
||||||
margin: 2em 7.5%;
|
|
||||||
max-width: 64em;
|
|
||||||
}
|
|
||||||
|
|
||||||
@media screen and (max-width: 80rem) {
|
|
||||||
ul, p {
|
|
||||||
background: rgba($color-blue-charcoal-2, 0.75);
|
|
||||||
}
|
|
||||||
|
|
||||||
ul {
|
|
||||||
border-radius: 0.5em 0.5em 0 0;
|
|
||||||
padding: 0.3em 0.5em 0.3em 1.5em;
|
|
||||||
margin: -0.3em -0.5em 0.28em;
|
|
||||||
}
|
|
||||||
|
|
||||||
p {
|
|
||||||
border-radius: 0 0 0.5em 0.5em;
|
|
||||||
padding: 0.3em 0.5em;
|
|
||||||
margin: -0.3em -0.5em;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
@ -1,50 +0,0 @@
|
||||||
@import "/src/styles/mixins.scss";
|
|
||||||
@import "/src/styles/vars.scss";
|
|
||||||
|
|
||||||
#socials {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
gap: 3em;
|
|
||||||
margin: 12em 7.5% 8em;
|
|
||||||
|
|
||||||
div {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
gap: 2.5em;
|
|
||||||
}
|
|
||||||
|
|
||||||
h2 {
|
|
||||||
@include fluid-font-size(1.5625rem);
|
|
||||||
font-weight: 700;
|
|
||||||
line-height: 100%;
|
|
||||||
text-transform: uppercase;
|
|
||||||
color: $color-aquamarine;
|
|
||||||
}
|
|
||||||
|
|
||||||
a {
|
|
||||||
padding: 0.5em;
|
|
||||||
color: $color-alto;
|
|
||||||
|
|
||||||
&:hover {
|
|
||||||
color: $color-white;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.github-logo svg {
|
|
||||||
@include fluid-width(3.5rem);
|
|
||||||
}
|
|
||||||
|
|
||||||
.git-logo svg {
|
|
||||||
@include fluid-width(3.5rem);
|
|
||||||
}
|
|
||||||
|
|
||||||
.discord-logo svg {
|
|
||||||
@include fluid-width(3.5rem);
|
|
||||||
}
|
|
||||||
|
|
||||||
.twitter-logo svg {
|
|
||||||
@include fluid-width(3.5rem);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
@ -1,5 +1,5 @@
|
||||||
---
|
---
|
||||||
import gfxLeft from "../../../assets/home-gfx-left.png";
|
import gfxLeft from "/src/assets/home-gfx-left.png";
|
||||||
---
|
---
|
||||||
|
|
||||||
<section
|
<section
|
||||||
|
|
@ -0,0 +1,55 @@
|
||||||
|
---
|
||||||
|
import svgGit from "/src/assets/icons/git.svg?raw";
|
||||||
|
import svgGithub from "/src/assets/icons/github.svg?raw";
|
||||||
|
import svgDiscord from "/src/assets/icons/discord.svg?raw";
|
||||||
|
import svgTwitter from "/src/assets/icons/twitter.svg?raw";
|
||||||
|
---
|
||||||
|
|
||||||
|
<section
|
||||||
|
id="join-community"
|
||||||
|
class="bg-primary max-w-[100vw] space-between text-black gap-10 p-10 my-10 lg:py-20 lg:px-40 flex flex-col lg:flex-row"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
class="w-full items-center justify-center lg:items-start lg:justify-start flex flex-col"
|
||||||
|
>
|
||||||
|
<h2 class="text-3xl font-bold lg:text-4xl font-display mb-3">
|
||||||
|
Join our community, lend a hand.
|
||||||
|
</h2>
|
||||||
|
<p class="text-xl lg:text-2xl font-body">
|
||||||
|
Web3 gives people control over their data, privacy, and ownership.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<div class="flex flex-row gap-14">
|
||||||
|
<a
|
||||||
|
href="https://git.lumeweb.com"
|
||||||
|
title="Git"
|
||||||
|
class="w-16 h-16 text-blue-charcoal hover:text-black transition-colors duration-200 cursor-pointer"
|
||||||
|
>
|
||||||
|
<Fragment set:html={svgGit} />
|
||||||
|
</a>
|
||||||
|
|
||||||
|
<a
|
||||||
|
href="https://github.com/LumeWeb"
|
||||||
|
title="GitHub"
|
||||||
|
class="w-16 h-16 text-blue-charcoal hover:text-black transition-colors duration-200 cursor-pointer"
|
||||||
|
>
|
||||||
|
<Fragment set:html={svgGithub} />
|
||||||
|
</a>
|
||||||
|
|
||||||
|
<a
|
||||||
|
href="https://discord.gg/qpC8ADp3rS"
|
||||||
|
title="Discord"
|
||||||
|
class="mt-2 w-16 h-16 text-blue-charcoal hover:text-black transition-colors duration-200 cursor-pointer"
|
||||||
|
>
|
||||||
|
<Fragment set:html={svgDiscord} />
|
||||||
|
</a>
|
||||||
|
|
||||||
|
<a
|
||||||
|
href="https://twitter.com/lumeweb3"
|
||||||
|
title="Twitter"
|
||||||
|
class="w-16 h-16 text-blue-charcoal hover:text-black transition-colors duration-200 cursor-pointer"
|
||||||
|
>
|
||||||
|
<Fragment set:html={svgTwitter} />
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
@ -1,39 +0,0 @@
|
||||||
---
|
|
||||||
import './JoinCommunity.scss';
|
|
||||||
|
|
||||||
import svgGit from '/src/assets/icons/git.svg?raw';
|
|
||||||
import svgGithub from '/src/assets/icons/github.svg?raw';
|
|
||||||
import svgDiscord from '/src/assets/icons/discord.svg?raw';
|
|
||||||
import svgTwitter from '/src/assets/icons/twitter.svg?raw';
|
|
||||||
---
|
|
||||||
|
|
||||||
<section id="join-community">
|
|
||||||
<div>
|
|
||||||
<h2>
|
|
||||||
Join our community, lend a hand.
|
|
||||||
</h2>
|
|
||||||
<p>
|
|
||||||
Web3 gives people control over their data, privacy, and ownership.
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<a href="https://git.lumeweb.com" title="Git" class="git-logo">
|
|
||||||
<Fragment set:html={svgGit} />
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<a href="https://github.com/LumeWeb" title="GitHub" class="github-logo">
|
|
||||||
<Fragment set:html={svgGithub} />
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<a href="https://discord.gg/qpC8ADp3rS" title="Discord" class="discord-logo">
|
|
||||||
<Fragment set:html={svgDiscord} />
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<a href="https://twitter.com/lumeweb3" title="Twitter" class="twitter-logo">
|
|
||||||
<Fragment set:html={svgTwitter} />
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
|
|
@ -1,80 +0,0 @@
|
||||||
@import "/src/styles/mixins.scss";
|
|
||||||
@import "/src/styles/vars.scss";
|
|
||||||
|
|
||||||
#join-community {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: space-between;
|
|
||||||
gap: 2em;
|
|
||||||
padding: 5em 7.5%;
|
|
||||||
background: $color-aquamarine;
|
|
||||||
color: $color-blue-charcoal-2;
|
|
||||||
@include fluid-font-size(0.625rem);
|
|
||||||
|
|
||||||
div {
|
|
||||||
flex-grow: 1;
|
|
||||||
|
|
||||||
&:first-child {
|
|
||||||
flex-grow: 10;
|
|
||||||
}
|
|
||||||
|
|
||||||
&:last-child {
|
|
||||||
flex-grow: 0;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@media screen and (max-width: 56rem) {
|
|
||||||
flex-wrap: wrap;
|
|
||||||
justify-content: center;
|
|
||||||
|
|
||||||
div:first-child {
|
|
||||||
flex-basis: 100%;
|
|
||||||
margin-bottom: 2em;
|
|
||||||
text-align: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
div {
|
|
||||||
flex-grow: 0;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
h2 {
|
|
||||||
margin-bottom: 0.25em;
|
|
||||||
@include fluid-font-size(2rem);
|
|
||||||
font-weight: 700;
|
|
||||||
line-height: 153%;
|
|
||||||
text-transform: none;
|
|
||||||
color: inherit;
|
|
||||||
}
|
|
||||||
|
|
||||||
p {
|
|
||||||
font-family: $font-family-jaldi;
|
|
||||||
@include fluid-font-size(1.5rem);
|
|
||||||
line-height: 157%;
|
|
||||||
}
|
|
||||||
|
|
||||||
a {
|
|
||||||
display: block;
|
|
||||||
color: #0B3F48;
|
|
||||||
|
|
||||||
&:hover {
|
|
||||||
color: inherit;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.github-logo svg {
|
|
||||||
@include fluid-width(3.625rem);
|
|
||||||
}
|
|
||||||
|
|
||||||
.git-logo svg {
|
|
||||||
@include fluid-width(3.625rem);
|
|
||||||
}
|
|
||||||
|
|
||||||
.discord-logo svg {
|
|
||||||
@include fluid-width(3.625rem);
|
|
||||||
}
|
|
||||||
|
|
||||||
.twitter-logo svg {
|
|
||||||
@include fluid-width(3.625rem);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
@ -1,5 +1,5 @@
|
||||||
---
|
---
|
||||||
import logo from "../../../assets/lume-logo.png";
|
import logo from "/src/assets/lume-logo.png";
|
||||||
const { view } = Astro.props;
|
const { view } = Astro.props;
|
||||||
|
|
||||||
function getActiveClass(linkView) {
|
function getActiveClass(linkView) {
|
||||||
|
|
@ -1,6 +1,6 @@
|
||||||
---
|
---
|
||||||
import GridCell from "../../ui/GridCell.astro";
|
import GridCell from "../ui/GridCell.astro";
|
||||||
import GridContainer from "../../ui/GridContainer.astro";
|
import GridContainer from "../ui/GridContainer.astro";
|
||||||
|
|
||||||
const features = [
|
const features = [
|
||||||
{
|
{
|
||||||
|
|
@ -1,20 +0,0 @@
|
||||||
@import "/src/styles/mixins.scss";
|
|
||||||
@import "/src/styles/vars.scss";
|
|
||||||
|
|
||||||
#grid {
|
|
||||||
padding-top: 2.05em;
|
|
||||||
padding-bottom: 2.05em;
|
|
||||||
|
|
||||||
div:first-child {
|
|
||||||
background: inherit;
|
|
||||||
border: none
|
|
||||||
}
|
|
||||||
|
|
||||||
h2 {
|
|
||||||
font-family: $font-family-jetbrains-mono;
|
|
||||||
@include fluid-font-size(2.75rem);
|
|
||||||
font-weight: 700;
|
|
||||||
line-height: 129.55%;
|
|
||||||
color: $color-aquamarine;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
@ -10,7 +10,9 @@ import backgroundSrc from "/src/assets/vision-jumbotron-bg.png";
|
||||||
src={backgroundSrc.src}
|
src={backgroundSrc.src}
|
||||||
class="-z-10 absolute top-[10px] left-1/2 -translate-x-1/2 w-[100em] max-w-none"
|
class="-z-10 absolute top-[10px] left-1/2 -translate-x-1/2 w-[100em] max-w-none"
|
||||||
/>
|
/>
|
||||||
<h1 class="font-display2 text-4xl lg:text-5xl w-full text-center">
|
<h1
|
||||||
|
class="font-display2 text-4xl px-10 md:px-20 lg:px-40 lg:text-5xl w-full text-center"
|
||||||
|
>
|
||||||
Easy access to an open, user-owned web.
|
Easy access to an open, user-owned web.
|
||||||
</h1>
|
</h1>
|
||||||
</section>
|
</section>
|
||||||
|
|
@ -1,6 +1,6 @@
|
||||||
---
|
---
|
||||||
import Button from "../../ui/Button.astro";
|
import Button from "../ui/Button.astro";
|
||||||
import FeaturedGroup from "../../ui/FeaturedGroup.astro";
|
import FeaturedGroup from "../ui/FeaturedGroup.astro";
|
||||||
import background from "/src/assets/double-brand-bg.png";
|
import background from "/src/assets/double-brand-bg.png";
|
||||||
---
|
---
|
||||||
|
|
||||||
|
|
@ -1,45 +0,0 @@
|
||||||
@import "/src/styles/vars.scss";
|
|
||||||
|
|
||||||
#no-vc {
|
|
||||||
position: relative;
|
|
||||||
display: flex;
|
|
||||||
justify-content: flex-end;
|
|
||||||
align-items: center;
|
|
||||||
max-width: 185.6em;
|
|
||||||
min-height: 78.4em;
|
|
||||||
margin: 0 auto;
|
|
||||||
|
|
||||||
&::before {
|
|
||||||
content: "";
|
|
||||||
position: absolute;
|
|
||||||
top: 0;
|
|
||||||
bottom: 0;
|
|
||||||
left: min(0em, calc((100% - 95em) / 2));
|
|
||||||
width: calc(100% - 64em - 7.5%);
|
|
||||||
min-width: 95em;
|
|
||||||
background-image: url("/src/assets/double-brand-bg.png");
|
|
||||||
background-position: 50% 100%;
|
|
||||||
background-repeat: no-repeat;
|
|
||||||
background-size: contain;
|
|
||||||
z-index: -1;
|
|
||||||
}
|
|
||||||
|
|
||||||
.feature-group {
|
|
||||||
box-sizing: content-box;
|
|
||||||
padding: 9em 7.5%;
|
|
||||||
max-width: 64em;
|
|
||||||
}
|
|
||||||
|
|
||||||
@media screen and (max-width: 80rem) {
|
|
||||||
p {
|
|
||||||
background: rgba($color-blue-charcoal-2, 0.75);
|
|
||||||
border-radius: 0.5em;
|
|
||||||
padding: 0.3em 0.5em;
|
|
||||||
margin: -0.3em -0.5em;
|
|
||||||
}
|
|
||||||
|
|
||||||
p + p {
|
|
||||||
margin-top: 0.48em;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
@ -1,6 +1,6 @@
|
||||||
---
|
---
|
||||||
import unifyBg from "/src/assets/unifying-bg.png";
|
import unifyBg from "/src/assets/unifying-bg.png";
|
||||||
import FeaturedGroup from "../../ui/FeaturedGroup.astro";
|
import FeaturedGroup from "../ui/FeaturedGroup.astro";
|
||||||
---
|
---
|
||||||
|
|
||||||
<section
|
<section
|
||||||
|
|
@ -1,51 +0,0 @@
|
||||||
@import "/src/styles/vars.scss";
|
|
||||||
|
|
||||||
#unify {
|
|
||||||
position: relative;
|
|
||||||
padding: 14em 7.5%;
|
|
||||||
|
|
||||||
.custom-bg {
|
|
||||||
position: absolute;
|
|
||||||
top: 0;
|
|
||||||
right: -12.5%;
|
|
||||||
bottom: 0;
|
|
||||||
left: -12.5%;
|
|
||||||
margin: 2% 0;
|
|
||||||
background: $color-blue-charcoal;
|
|
||||||
transform: matrix(1, 0.04, -0.04, 1, 0, 0);
|
|
||||||
z-index: -1;
|
|
||||||
overflow: hidden;
|
|
||||||
|
|
||||||
&::after {
|
|
||||||
content: "";
|
|
||||||
position: absolute;
|
|
||||||
top: -1%;
|
|
||||||
bottom: -5%;
|
|
||||||
left: 10%;
|
|
||||||
right: 10%;
|
|
||||||
background-image: url("/src/assets/unifying-bg.png");
|
|
||||||
background-position: 100% 100%;
|
|
||||||
background-repeat: no-repeat;
|
|
||||||
background-size: contain;
|
|
||||||
transform: rotate(-2.25deg);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.feature-group {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
justify-content: center;
|
|
||||||
max-width: 64em;
|
|
||||||
}
|
|
||||||
|
|
||||||
p {
|
|
||||||
background: rgba($color-blue-charcoal, 0.75);
|
|
||||||
border-radius: 0.5em;
|
|
||||||
padding: 0.3em 0.5em;
|
|
||||||
margin: -0.3em -0.5em;
|
|
||||||
}
|
|
||||||
|
|
||||||
p + p {
|
|
||||||
margin-top: 0.48em;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
@ -1,8 +1,8 @@
|
||||||
---
|
---
|
||||||
import FeaturedGroup from "../../ui/FeaturedGroup.astro";
|
import FeaturedGroup from "../ui/FeaturedGroup.astro";
|
||||||
import mario from "/src/assets/mario-level-up.gif";
|
import mario from "/src/assets/mario-level-up.gif";
|
||||||
import background from "/src/assets/contribute-bg.png";
|
import background from "/src/assets/contribute-bg.png";
|
||||||
import Button from "../../ui/Button.astro";
|
import Button from "../ui/Button.astro";
|
||||||
---
|
---
|
||||||
|
|
||||||
<section
|
<section
|
||||||
|
|
@ -1,6 +1,6 @@
|
||||||
---
|
---
|
||||||
import GridCell from "../../ui/GridCell.astro";
|
import GridCell from "../ui/GridCell.astro";
|
||||||
import GridContainer from "../../ui/GridContainer.astro";
|
import GridContainer from "../ui/GridContainer.astro";
|
||||||
|
|
||||||
const features = [
|
const features = [
|
||||||
{
|
{
|
||||||
|
|
@ -10,7 +10,9 @@ import backgroundSrc from "/src/assets/whatsweb3-jumbotron-bg.png";
|
||||||
src={backgroundSrc.src}
|
src={backgroundSrc.src}
|
||||||
class="-z-10 absolute top-[50px] left-1/2 -translate-x-1/2 w-[100em] max-w-none"
|
class="-z-10 absolute top-[50px] left-1/2 -translate-x-1/2 w-[100em] max-w-none"
|
||||||
/>
|
/>
|
||||||
<h1 class="font-display2 text-4xl lg:text-5xl w-full max-w-5xl text-center">
|
<h1
|
||||||
|
class="font-display2 text-4xl lg:text-5xl px-10 md:px-20 lg:px-40 w-full max-w-5xl text-center"
|
||||||
|
>
|
||||||
An evolved, user-owned web where you have access to the world in a way only
|
An evolved, user-owned web where you have access to the world in a way only
|
||||||
you control.
|
you control.
|
||||||
</h1>
|
</h1>
|
||||||
|
|
@ -1,9 +1,12 @@
|
||||||
---
|
---
|
||||||
import FeaturedGroup from "../../ui/FeaturedGroup.astro";
|
import FeaturedGroup from "../ui/FeaturedGroup.astro";
|
||||||
import backgroundSrc from "/src/assets/new-world-bg.png";
|
import backgroundSrc from "/src/assets/new-world-bg.png";
|
||||||
---
|
---
|
||||||
|
|
||||||
<section id="new-world" class="mx-10 md:mx-20 lg:mx-40 relative h-[850px]">
|
<section
|
||||||
|
id="new-world"
|
||||||
|
class="mx-10 md:mx-20 lg:mx-40 relative h-[400px] lg:h-[850px]"
|
||||||
|
>
|
||||||
<div class="-z-10 absolute top-0 right-0 bottom-0 w-[1500px] -mx-40 h-full">
|
<div class="-z-10 absolute top-0 right-0 bottom-0 w-[1500px] -mx-40 h-full">
|
||||||
<img class="object-cover w-full max-w-none" src={backgroundSrc.src} />
|
<img class="object-cover w-full max-w-none" src={backgroundSrc.src} />
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -1,16 +1,27 @@
|
||||||
---
|
---
|
||||||
export interface Props {
|
export interface Props {
|
||||||
label: string;
|
label: string;
|
||||||
href: string;
|
href?: string;
|
||||||
|
type?: "submit" | "button";
|
||||||
|
color?: string;
|
||||||
|
class?: string;
|
||||||
}
|
}
|
||||||
|
|
||||||
const { label, href } = Astro.props;
|
const { label, class: customClass, type, color, href } = Astro.props;
|
||||||
|
const className = `text-2xl w-full block text-center md:max-w-[350px] rounded-md text-black font-body bg-${
|
||||||
|
color ?? "primary"
|
||||||
|
} hover:ring-2 ring-${
|
||||||
|
color ?? "primary"
|
||||||
|
} hover:bg-transparent hover:text-white transition-[background-color] duration-150`;
|
||||||
---
|
---
|
||||||
|
|
||||||
<div class="pt-10 w-full">
|
<button class={`mt-10 ${className} ${customClass}`} type={type ?? "button"}>
|
||||||
<a
|
{
|
||||||
href={href}
|
href && (
|
||||||
class="text-2xl w-full block text-center md:max-w-[350px] rounded-md bg-primary py-3 px-10 text-black font-body"
|
<a href={href} class="w-full text-inherit my-3 block">
|
||||||
>{label}</a
|
{label}
|
||||||
>
|
</a>
|
||||||
</div>
|
)
|
||||||
|
}
|
||||||
|
{!href && label}
|
||||||
|
</button>
|
||||||
|
|
|
||||||
|
|
@ -20,7 +20,7 @@ const { title, subtitle, text } = Astro.props;
|
||||||
|
|
||||||
{
|
{
|
||||||
text.map((paragraph) => (
|
text.map((paragraph) => (
|
||||||
<p class="font-body text-xl md:text-3xl text-body">
|
<p class="font-body text-xl md:text-2xl text-body">
|
||||||
<Fragment set:html={paragraph} />
|
<Fragment set:html={paragraph} />
|
||||||
</p>
|
</p>
|
||||||
))
|
))
|
||||||
|
|
|
||||||
|
|
@ -1,78 +1,75 @@
|
||||||
---
|
---
|
||||||
import "../styles/global.scss";
|
import "../styles/global.scss";
|
||||||
import opengraph from "/src/assets/opengraph.png";
|
import opengraph from "/src/assets/opengraph.png";
|
||||||
import Navbar from "../components/Layout/Navbar/Navbar.astro";
|
import Navbar from "../components/Layout/Navbar.astro";
|
||||||
import Footer from "../components/Layout/Footer/Footer.astro";
|
import Footer from "../components/Layout/Footer.astro";
|
||||||
import JoinCommunity from "../components/Layout/JoinCommunity/JoinCommunity.astro";
|
import JoinCommunity from "../components/Layout/JoinCommunity.astro";
|
||||||
|
|
||||||
export interface Props {
|
export interface Props {
|
||||||
view: string;
|
view: string;
|
||||||
title: string;
|
title: string;
|
||||||
}
|
}
|
||||||
|
|
||||||
const {view, title} = Astro.props;
|
const { view, title } = Astro.props;
|
||||||
const description = "A platform, network and experience that allows you to control and own your online web, and access all of the possibilities Web3 has to offer. Join the open web.";
|
const description =
|
||||||
|
"A platform, network and experience that allows you to control and own your online web, and access all of the possibilities Web3 has to offer. Join the open web.";
|
||||||
const url = "https://lumeweb.com";
|
const url = "https://lumeweb.com";
|
||||||
---
|
---
|
||||||
|
|
||||||
<!DOCTYPE html>
|
<!DOCTYPE html>
|
||||||
<html lang="en">
|
<html lang="en">
|
||||||
<head>
|
<head>
|
||||||
<title>{title}</title>
|
<title>{title}</title>
|
||||||
<meta charset="utf-8"/>
|
<meta charset="utf-8" />
|
||||||
<meta
|
<meta
|
||||||
name="viewport"
|
name="viewport"
|
||||||
content="width=device-width, initial-scale=1.0, minimum-scale=1.0"
|
content="width=device-width, initial-scale=1.0, minimum-scale=1.0"
|
||||||
/>
|
/>
|
||||||
|
<meta name="description" content="" />
|
||||||
<meta
|
<meta
|
||||||
name="description"
|
name="keywords"
|
||||||
content=""
|
content="Web3 Extension, web3 browser, Lume Web, Web3, dWeb, p2p, handshake, eth, ethereum, ipfs, open web, privacy, decentralization, blockchain"
|
||||||
/>
|
|
||||||
<meta
|
|
||||||
name="keywords"
|
|
||||||
content="Web3 Extension, web3 browser, Lume Web, Web3, dWeb, p2p, handshake, eth, ethereum, ipfs, open web, privacy, decentralization, blockchain"
|
|
||||||
/>
|
/>
|
||||||
<!-- Open Graph / Facebook -->
|
<!-- Open Graph / Facebook -->
|
||||||
<meta property="og:type" content="website"/>
|
<meta property="og:type" content="website" />
|
||||||
<meta property="og:url" content={url}/>
|
<meta property="og:url" content={url} />
|
||||||
<meta property="og:title" content={title}/>
|
<meta property="og:title" content={title} />
|
||||||
<meta property="og:description" content={description}/>
|
<meta property="og:description" content={description} />
|
||||||
<meta property="og:image" content={opengraph.src}/>
|
<meta property="og:image" content={opengraph.src} />
|
||||||
|
|
||||||
<!-- Twitter -->
|
<!-- Twitter -->
|
||||||
<meta property="twitter:card" content="summary_large_image"/>
|
<meta property="twitter:card" content="summary_large_image" />
|
||||||
<meta property="twitter:url" content={url}/>
|
<meta property="twitter:url" content={url} />
|
||||||
<meta property="twitter:title" content={title}/>
|
<meta property="twitter:title" content={title} />
|
||||||
<meta property="twitter:description" content={description}/>
|
<meta property="twitter:description" content={description} />
|
||||||
<meta property="twitter:image" content={opengraph.src}/>
|
<meta property="twitter:image" content={opengraph.src} />
|
||||||
|
|
||||||
<!-- Matomo -->
|
<!-- Matomo -->
|
||||||
<script is:inline>
|
<script is:inline>
|
||||||
var _paq = (window._paq = window._paq || []);
|
var _paq = (window._paq = window._paq || []);
|
||||||
/* tracker methods like "setCustomDimension" should be called before "trackPageView" */
|
/* tracker methods like "setCustomDimension" should be called before "trackPageView" */
|
||||||
_paq.push(["trackPageView"]);
|
_paq.push(["trackPageView"]);
|
||||||
_paq.push(["enableLinkTracking"]);
|
_paq.push(["enableLinkTracking"]);
|
||||||
(function () {
|
(function () {
|
||||||
var u = "//piwiki.lumeweb.com/";
|
var u = "//piwiki.lumeweb.com/";
|
||||||
_paq.push(["setTrackerUrl", u + "matomo.php"]);
|
_paq.push(["setTrackerUrl", u + "matomo.php"]);
|
||||||
_paq.push(["setSiteId", "1"]);
|
_paq.push(["setSiteId", "1"]);
|
||||||
var d = document,
|
var d = document,
|
||||||
g = d.createElement("script"),
|
g = d.createElement("script"),
|
||||||
s = d.getElementsByTagName("script")[0];
|
s = d.getElementsByTagName("script")[0];
|
||||||
g.async = true;
|
g.async = true;
|
||||||
g.src = u + "matomo.js";
|
g.src = u + "matomo.js";
|
||||||
s.parentNode.insertBefore(g, s);
|
s.parentNode.insertBefore(g, s);
|
||||||
})();
|
})();
|
||||||
</script>
|
</script>
|
||||||
<!-- End Matomo Code -->
|
<!-- End Matomo Code -->
|
||||||
</head>
|
</head>
|
||||||
<body class="max-w-[1600px] mx-auto">
|
<body class="max-w-[1600px] mx-auto">
|
||||||
<Navbar view={view}/>
|
<Navbar view={view} />
|
||||||
<main class={view + " space-y-40 overflow-x-hidden relative "}>
|
<main class={view + " space-y-40 overflow-x-hidden relative "}>
|
||||||
<slot/>
|
<slot />
|
||||||
</main>
|
</main>
|
||||||
{view !== "home" &&
|
{view !== "home" && <JoinCommunity />}
|
||||||
<JoinCommunity/>}
|
<Footer />
|
||||||
<Footer/>
|
</body>
|
||||||
</body>
|
|
||||||
</html>
|
</html>
|
||||||
|
|
|
||||||
|
|
@ -1,10 +1,10 @@
|
||||||
---
|
---
|
||||||
import Layout from '../layouts/Layout.astro';
|
import Layout from "../layouts/Layout.astro";
|
||||||
import Jumbotron from '../components/Donate/Jumbotron/Jumbotron.astro';
|
import Jumbotron from "../components/Donate/Jumbotron.astro";
|
||||||
import Why from '../components/Donate/Why/Why.astro';
|
import Why from "../components/Donate/Why.astro";
|
||||||
import How from '../components/Donate/How/How.astro';
|
import How from "../components/Donate/How.astro";
|
||||||
import Methods from '../components/Donate/Methods/Methods.astro';
|
import Methods from "../components/Donate/Methods/Methods.astro";
|
||||||
import Legal from '../components/Donate/Legal/Legal.astro';
|
import Legal from "../components/Donate/Legal.astro";
|
||||||
---
|
---
|
||||||
|
|
||||||
<Layout view="donate" title="Donate - Lume Web">
|
<Layout view="donate" title="Donate - Lume Web">
|
||||||
|
|
|
||||||
|
|
@ -1,22 +1,27 @@
|
||||||
---
|
---
|
||||||
import Layout from "../layouts/Layout.astro";
|
import Layout from "../layouts/Layout.astro";
|
||||||
import Typewriter from "../components/Home/Typewriter/Typewriter.astro";
|
import Typewriter from "../components/Home/Typewriter/Typewriter.astro";
|
||||||
import Vision from "../components/Home/Vision/Vision.astro";
|
import Vision from "../components/Home/Vision.astro";
|
||||||
import Web3 from "../components/Home/Web3/Web3.astro";
|
import Web3 from "../components/Home/Web3.astro";
|
||||||
import PoweredBy from "../components/Home/PoweredBy/PoweredBy.astro";
|
import PoweredBy from "../components/Home/PoweredBy.astro";
|
||||||
import Meme from "../components/Home/Meme/Meme.astro";
|
import Meme from "../components/Home/Meme.astro";
|
||||||
import WebComparison from "../components/Home/WebComparison/WebComparison.astro";
|
import WebComparison from "../components/Home/WebComparison.astro";
|
||||||
import Socials from "../components/Home/Socials/Socials.astro";
|
import Socials from "../components/Home/Socials.astro";
|
||||||
import CTO from "../components/Home/CTO/CTO.astro";
|
import CTO from "../components/Home/CTO.astro";
|
||||||
import Message from "../components/Home/Message/Message.astro";
|
import Message from "../components/Home/Message.astro";
|
||||||
import bg from "../assets/home-hero-bg.webp";
|
import bg from "../assets/main-page-hero.png";
|
||||||
|
import bgSmall from "../assets/main-page-hero@0.75x.png";
|
||||||
|
import bgSmaller from "../assets/main-page-hero@0.5x.png";
|
||||||
---
|
---
|
||||||
|
|
||||||
<Layout view="home" title="Lume Web - Your Open Web">
|
<Layout view="home" title="Lume Web - Your Open Web">
|
||||||
<img
|
<img
|
||||||
class="absolute -z-10 -right-[250px] top-[250px] object-contain w-[1250px] max-w-none"
|
class="absolute -z-10 -right-[150px] top-[50px] md:-right-[200px] md:-top-[100px] xl:-right-[100px] xl:-top-[100px] object-contain w-[500px] md:w-[800px] xl:w-[1000px] max-w-none"
|
||||||
|
srcset={`${bg.src} 1250w, ${bgSmall.src} 1000w, ${bgSmaller.src} 500w`}
|
||||||
|
sizes="(max-width: 1024px) 1000px, 1250px"
|
||||||
src={bg.src}
|
src={bg.src}
|
||||||
/>
|
/>
|
||||||
|
|
||||||
<Typewriter />
|
<Typewriter />
|
||||||
<Vision />
|
<Vision />
|
||||||
<Web3 />
|
<Web3 />
|
||||||
|
|
|
||||||
|
|
@ -1,9 +1,9 @@
|
||||||
---
|
---
|
||||||
import Layout from '../layouts/Layout.astro';
|
import Layout from "../layouts/Layout.astro";
|
||||||
import Jumbotron from '../components/Vision/Jumbotron/Jumbotron.astro';
|
import Jumbotron from "../components/Vision/Jumbotron.astro";
|
||||||
import Unify from '../components/Vision/Unify/Unify.astro';
|
import Unify from "../components/Vision/Unify.astro";
|
||||||
import Grid from '../components/Vision/Grid/Grid.astro';
|
import Grid from "../components/Vision/Grid.astro";
|
||||||
import NoVc from '../components/Vision/NoVc/NoVc.astro';
|
import NoVc from "../components/Vision/NoVc.astro";
|
||||||
---
|
---
|
||||||
|
|
||||||
<Layout view="vision" title="Vision - Lume Web">
|
<Layout view="vision" title="Vision - Lume Web">
|
||||||
|
|
|
||||||
|
|
@ -1,9 +1,9 @@
|
||||||
---
|
---
|
||||||
import Layout from '../layouts/Layout.astro';
|
import Layout from "../layouts/Layout.astro";
|
||||||
import Jumbotron from '../components/What/Jumbotron/Jumbotron.astro';
|
import Jumbotron from "../components/What/Jumbotron.astro";
|
||||||
import Grid from '../components/What/Grid/Grid.astro';
|
import Grid from "../components/What/Grid.astro";
|
||||||
import NewWorld from '../components/What/NewWorld/NewWorld.astro';
|
import NewWorld from "../components/What/NewWorld.astro";
|
||||||
import Contribute from '../components/What/Contribute/Contribute.astro';
|
import Contribute from "../components/What/Contribute.astro";
|
||||||
---
|
---
|
||||||
|
|
||||||
<Layout view="what" title="What is Web3? - Lume Web">
|
<Layout view="what" title="What is Web3? - Lume Web">
|
||||||
|
|
|
||||||
|
|
@ -41,6 +41,8 @@
|
||||||
--color-aquamarine: #7afcbb;
|
--color-aquamarine: #7afcbb;
|
||||||
--color-dark-aquamarine: #1F4A3D;
|
--color-dark-aquamarine: #1F4A3D;
|
||||||
--color-gray: #C7C7C7;
|
--color-gray: #C7C7C7;
|
||||||
|
--color-charcoal: #020e10;
|
||||||
|
--color-blue-charcoal: #0B3F48;
|
||||||
}
|
}
|
||||||
|
|
||||||
html {
|
html {
|
||||||
|
|
|
||||||
|
|
@ -1,22 +0,0 @@
|
||||||
@import "./mixins.scss";
|
|
||||||
@import "./vars.scss";
|
|
||||||
|
|
||||||
#jumbotron {
|
|
||||||
display: flex;
|
|
||||||
justify-content: center;
|
|
||||||
align-items: center;
|
|
||||||
margin: 12.5em 7.5% 15em;
|
|
||||||
|
|
||||||
h1 {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
max-width: 21em;
|
|
||||||
height: 2.74em;
|
|
||||||
font-family: $font-family-ibm-plex-sans-devanagari;
|
|
||||||
@include fluid-font-size-s(3.6875rem);
|
|
||||||
line-height: 137%;
|
|
||||||
letter-spacing: -0.06em;
|
|
||||||
text-align: center;
|
|
||||||
text-shadow: 0.017em 0.017em 0.034em rgba($color-blue-charcoal, 0.65);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
@ -1,11 +1,7 @@
|
||||||
/** @type {import('tailwindcss').Config} */
|
/** @type {import('tailwindcss').Config} */
|
||||||
module.exports = {
|
module.exports = {
|
||||||
content: ['./src/**/*.{astro,html,js,jsx,md,mdx,svelte,ts,tsx,vue}'],
|
content: ['./src/**/*.{astro,html,js,jsx,md,mdx,svelte,ts,tsx,vue}'],
|
||||||
variants: {
|
important: false,
|
||||||
extend: {
|
|
||||||
boxShadow: ['active']
|
|
||||||
}
|
|
||||||
},
|
|
||||||
theme: {
|
theme: {
|
||||||
extend: {
|
extend: {
|
||||||
colors: {
|
colors: {
|
||||||
|
|
@ -13,6 +9,8 @@ module.exports = {
|
||||||
"dark-aquamarine": 'var(--color-dark-aquamarine)',
|
"dark-aquamarine": 'var(--color-dark-aquamarine)',
|
||||||
body: 'var(--color-gray)',
|
body: 'var(--color-gray)',
|
||||||
"gradient-aqua": "linear-gradient(to right, var(--color-dark-aquamarine), var(--color-aquamarine))",
|
"gradient-aqua": "linear-gradient(to right, var(--color-dark-aquamarine), var(--color-aquamarine))",
|
||||||
|
"blue-charcoal": 'var(--color-blue-charcoal)',
|
||||||
|
"charcoal": 'var(--color-charcoal)',
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
fontFamily: {
|
fontFamily: {
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue