Compare commits

..

No commits in common. "6468471299a27cacdee6341c76b55551dbdeaaf8" and "9c79e70ca3346f6ffd00251a31da7d983a22955b" have entirely different histories.

16 changed files with 303 additions and 614 deletions

Binary file not shown.

Before

Width:  |  Height:  |  Size: 46 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 43 KiB

View File

@ -1,54 +1,18 @@
---
import Button from "../../ui/Button.astro";
import FeaturedGroup from "../../ui/FeaturedGroup.astro";
// import "./How.scss";
import './How.scss';
---
<style>
.custom-bg {
position: absolute;
top: 0;
right: -12.5%;
bottom: 0;
left: -12.5%;
margin: 2% 0;
background: var(--color-blue-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">
<div class="custom-bg -mx-10"></div>
<div class="max-w-3xl px-7 mx-10 md:mx-20 lg:mx-40">
<div class="bg-black/50 p-3 lg:bg-transparent lg:p-0">
<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://gitcoin.co/grants/4722/lume-web-web3-accessibility-freedom-and-education"
label="Gitcoin"
/>
<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>

View File

@ -1,18 +1,9 @@
---
import backgroundSrc from "/src/assets/donate-jumbotron-bg.png";
import '../../../styles/jumbotron.scss';
---
<section
id="jumbotron"
class="relative w-full h-[420px] flex items-center justify-center"
>
<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.
<section id="jumbotron">
<h1>
Lume is people-powered.
</h1>
</section>

View File

@ -1,23 +1,18 @@
---
// import './Legal.scss';
import './Legal.scss';
---
<section id="legal" class="mx-20 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
>
<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 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>
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>
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>

View File

@ -1,338 +1,113 @@
---
import QRCode from "qrcode";
import './Methods.scss';
import QRCode from 'qrcode';
const currencies = [];
const addCurrency = async (id, title, address, mainColor) => {
const addCurrency = async (id, title, address) => {
currencies.push({
id: id,
title: title,
address: address,
mainColor,
svgLogo: await import(`./icons/${id}.svg?raw`),
qrSmall: await QRCode.toDataURL(address, {
version: 6,
scale: 1,
margin: 1,
}),
qrLarge: await QRCode.toDataURL(address, {
version: 6,
scale: 7,
margin: 2,
}),
qrSmall: await QRCode.toDataURL(address, { version: 6, scale: 1, margin: 1 }),
qrLarge: await QRCode.toDataURL(address, { version: 6, scale: 7, margin: 2 })
});
};
await addCurrency(
"bitcoin",
"Bitcoin (BTC)",
"bc1q9xq2w4w2hjc240rs6mf0g8gpzz3rmcz4h77a2a",
"#f7931a"
);
await addCurrency(
"litecoin",
"Litecoin (LTC)",
"ltc1qgk6fc4u6grqyhfzw208477ze35vrr5tcwhq8zq",
"#345d9d"
);
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"
);
await addCurrency('bitcoin', 'Bitcoin (BTC)', 'bc1q9xq2w4w2hjc240rs6mf0g8gpzz3rmcz4h77a2a');
await addCurrency('litecoin', 'Litecoin (LTC)', 'ltc1qgk6fc4u6grqyhfzw208477ze35vrr5tcwhq8zq');
await addCurrency('ethereum', 'Ethereum (ETH, USDT/USDC, ERC20)', '0x63cd2C691632720Ff2ABDD0b6AABA2466D3Fe468');
await addCurrency('polygon', 'Polygon (MATIC)', '0x63cd2C691632720Ff2ABDD0b6AABA2466D3Fe468');
await addCurrency('solana', 'Solana (SOL)', '4nMRucCuqttipwQXm31vBgoaxDW6o25TnD8fj1imviCu');
await addCurrency('cardano', 'Cardano (ADA)', 'addr1q9jd69s53pdy9j567a27ac6uvc2966x0rjz2l9sxy4y5w8383jl87mrdf6uuk9ja7lmagm2p4vw30sa42kjylxxrdufqucgst6');
await addCurrency('siacoin', 'Siacoin (SC)', '7506caa950cdddbaec8f465937b50324e942ac6f5280a053662e58e3cc8bdb543ab88ccd5c23');
await addCurrency('monero', 'Monero (XMR)', '48A33fSyFo9YAiux3KHKVBagPGvqmcr2h4oy5pufJn6NUWyZsPF6PAufmrET3gLJjsLwxfU7HU9xe8mEeCqtHqvZN3Ly12h');
await addCurrency('handshake', 'Handshake (HNS)', 'hs1qe67ak3j2u4yrq0qnfs2hmycxqdvaf9v5rjsxzy');
await addCurrency('cosmos', 'Cosmos (ATOM)', 'cosmos1pvy8zyzqwz2r2jl9j9d3zrfmg6dqc5hyhj6d5z');
await addCurrency('secret', 'Secret (SCRT)', 'secret18377vc3af588ggauhrpuyfd954lmmu05xqhf0y');
await addCurrency('algorand', 'Algorand (ALGO)', '3QBE5TZ63TF5W7V2QRJWRB72M7INQLA3RZW4XHD3ISRE7CRYCVNU4EEVAE');
---
<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" class="mx-10 md:mx-20 lg:mx-40">
<section id="methods">
<div>
<h2>Donate Cryptocurrency</h2>
<div class="method-grid">
{currencies.map(currency => (
<div id={'donate-' + currency.id}>
<div>
<h2 class="text-3xl lg:text-4xl mb-5 mt-20">Donate Cryptocurrency</h2>
<div class="flex w-full flex-col lg:flex-row lg:flex-wrap gap-[10px]">
{
currencies.map((currency) => (
<div
id={"donate-" + currency.id}
class={`hover:ring-2 flex flex-col bg-black rounded-md px-10 py-5 w-full max-w-[calc(100vw-30px)] 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} />
<h3>{currency.title}</h3>
<img onclick={"openDialog('" + currency.qrLarge + "')"} src={currency.qrSmall}/>
</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 class="address">
<button onclick="copyToClipboard(this)"></button>
<div>{currency.address}</div>
</div>
</div>
))}
</div>
))
}
</div>
<h2 class="text-3xl lg:text-4xl mb-10 mt-40">Donate Fiat</h2>
<div
class="flex flex-col items-center justify-between gap-4 lg:flex-row lg:flex-wrap"
>
<div
id="donate-paypal"
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)]`}
>
<svg
xmlns="http://www.w3.org/2000/svg"
class="w-10 h-10"
viewBox="0 0 154.728 190.5"
>
<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>
<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>
<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"></path>
<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 class="ml-4 w-full text-2xl">PayPal</h3>
<form
action="https://www.paypal.com/donate"
method="post"
target="_top"
>
<input type="hidden" name="hosted_button_id" value="LKDLTQQRQV2U8" />
<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"
>
Donate
</button>
<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
id="donate-patreon"
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
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>
</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 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>
<h3>Patreon</h3>
<a class="btn-main" href="https://www.patreon.com/bePatron?u=71702133">Become a Patron!</a>
</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>
</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 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
>
<h3>Liberapay</h3>
<a class="btn-main" 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>
</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 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>
<h3>GitHub Sponsors</h3>
<a class="btn-main" href="https://github.com/sponsors/LumeWeb">Donate</a>
</div>
</div>
</div>
<p class="text-lg italic font-body text-body mt-10 mx-10">
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>
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>
<dialog id="qr-dialog" class="backdrop:bg-black/20 backdrop:backdrop-blur-sm">
</dialog>
</div>
<dialog id="qr-dialog"></dialog>
<script is:inline>
var msgCallback,
var
msgCallback,
msgTimeout,
qrDialog = document.getElementById("qr-dialog");
qrDialog = document.getElementById('qr-dialog');
function copyToClipboard(element) {
var range = document.createRange(),
var
range = document.createRange(),
selection = window.getSelection();
if(msgCallback) {
@ -343,32 +118,33 @@ function copyToClipboard(element) {
range.selectNode(element.nextElementSibling); // select address container
selection.removeAllRanges(); // clear current selection
selection.addRange(range); // select address
document.execCommand("copy"); // copy
document.execCommand('copy'); // copy
selection.removeAllRanges(); // deselect
element.classList.add("success");
element.classList.add('success');
msgCallback = function() {
element.classList.remove("success");
element.classList.remove('success');
msgCallback = undefined;
};
}
msgTimeout = window.setTimeout(msgCallback, 5000);
}
function openDialog(qrLarge) {
document.body.classList.add("scroll-lock");
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('close', function() {
document.body.classList.remove('scroll-lock');
});
qrDialog.addEventListener("click", function (event) {
qrDialog.addEventListener('click', function(event) {
if (event.target === this) {
this.close();
}
});
</script>
</section>

View File

@ -38,9 +38,9 @@
border-radius: 1em;
transition: border-color 200ms;
// &:hover {
// border-color: $color-aquamarine;
// }
&:hover {
border-color: $color-aquamarine;
}
> div:first-child {
display: flex;
@ -147,53 +147,53 @@
@include fluid-font-size(1.5rem);
}
// #donate-bitcoin:hover {
// border-color: #f7931a;
// }
#donate-bitcoin:hover {
border-color: #f7931a;
}
// #donate-litecoin:hover {
// border-color: #345d9d;
// }
#donate-litecoin:hover {
border-color: #345d9d;
}
// #donate-ethereum:hover {
// border-color: #8c8c8c;
// }
#donate-ethereum:hover {
border-color: #8c8c8c;
}
// #donate-polygon:hover {
// border-color: #8247e5;
// }
#donate-polygon:hover {
border-color: #8247e5;
}
// #donate-solana:hover {
// border-color: #dc1fff;
// }
#donate-solana:hover {
border-color: #dc1fff;
}
// #donate-cardano:hover {
// border-color: #0033ad;
// }
#donate-cardano:hover {
border-color: #0033ad;
}
// #donate-siacoin:hover {
// border-color: #20ee82;
// }
#donate-siacoin:hover {
border-color: #20ee82;
}
// #donate-monero:hover {
// border-color: #f26822;
// }
#donate-monero:hover {
border-color: #f26822;
}
// #donate-handshake:hover {
// border-color: #fff;
// }
#donate-handshake:hover {
border-color: #fff;
}
// #donate-cosmos:hover {
// border-color: #6f7390;
// }
#donate-cosmos:hover {
border-color: #6f7390;
}
// #donate-secret:hover {
// border-color: #fff;
// }
#donate-secret:hover {
border-color: #fff;
}
// #donate-algorand:hover {
// border-color: #fff;
// }
#donate-algorand:hover {
border-color: #fff;
}
#donate-paypal {
&:hover {

View File

@ -1,33 +1,24 @@
---
import Button from "../../ui/Button.astro";
import FeaturedGroup from "../../ui/FeaturedGroup.astro";
import backgroud from "/src/assets/why-bg-2.png";
import './Why.scss';
---
<section
id="why"
class="flex flex-col overflow-hidden relative md:flex-row mx-10 md:mx-20"
>
<img
src={backgroud.src}
class="absolute xl:relative -z-10 min-w-[1000px] h-[750px] -mx-10 md:-mx-20 lg:-mx-40"
/>
<div class="px-10 md:px-20 py-5">
<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 cant 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" />
<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 cant 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>

View File

@ -1,54 +1,38 @@
---
// import "./JoinCommunity.scss";
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";
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 space-between text-black p-20 lg:px-40 flex flex-col lg:flex-row"
>
<div class="w-full">
<h2 class="text-3xl font-bold lg:text-4xl font-display">
<section id="join-community">
<div>
<h2>
Join our community, lend a hand.
</h2>
<p class="text-xl lg:text-2xl font-body">
<p>
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"
>
<div>
<a href="https://git.lumeweb.com" title="Git" class="git-logo">
<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"
>
</div>
<div>
<a href="https://github.com/LumeWeb" title="GitHub" class="github-logo">
<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"
>
</div>
<div>
<a href="https://discord.gg/qpC8ADp3rS" title="Discord" class="discord-logo">
<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"
>
</div>
<div>
<a href="https://twitter.com/lumeweb3" title="Twitter" class="twitter-logo">
<Fragment set:html={svgTwitter} />
</a>
</div>

View File

@ -10,9 +10,7 @@ import backgroundSrc from "/src/assets/vision-jumbotron-bg.png";
src={backgroundSrc.src}
class="-z-10 absolute top-[10px] left-1/2 -translate-x-1/2 w-[100em] max-w-none"
/>
<h1
class="font-display2 text-4xl px-10 md:px-20 lg:px-40 lg:text-5xl w-full text-center"
>
<h1 class="font-display2 text-4xl lg:text-5xl w-full text-center">
Easy access to an open, user-owned web.
</h1>
</section>

View File

@ -10,9 +10,7 @@ import backgroundSrc from "/src/assets/whatsweb3-jumbotron-bg.png";
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 text-4xl lg:text-5xl px-10 md:px-20 lg:px-40 w-full max-w-5xl text-center"
>
<h1 class="font-display2 text-4xl lg:text-5xl w-full max-w-5xl text-center">
An evolved, user-owned web where you have access to the world in a way only
you control.
</h1>

View File

@ -1,27 +1,16 @@
---
export interface Props {
label: string;
href?: string;
type?: "submit" | "button";
color?: string;
class?: string;
href: string;
}
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`;
const { label, href } = Astro.props;
---
<button class={`mt-10 ${className} ${customClass}`} type={type ?? "button"}>
{
href && (
<a href={href} class="w-full text-inherit my-3 block">
{label}
</a>
)
}
{!href && label}
</button>
<div class="pt-10 w-full">
<a
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"
>{label}</a
>
</div>

View File

@ -20,7 +20,7 @@ const { title, subtitle, text } = Astro.props;
{
text.map((paragraph) => (
<p class="font-body text-xl md:text-2xl text-body">
<p class="font-body text-xl md:text-3xl text-body">
<Fragment set:html={paragraph} />
</p>
))

View File

@ -11,8 +11,7 @@ export interface 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";
---
@ -25,7 +24,10 @@ const url = "https://lumeweb.com";
name="viewport"
content="width=device-width, initial-scale=1.0, minimum-scale=1.0"
/>
<meta name="description" content="" />
<meta
name="description"
content=""
/>
<meta
name="keywords"
content="Web3 Extension, web3 browser, Lume Web, Web3, dWeb, p2p, handshake, eth, ethereum, ipfs, open web, privacy, decentralization, blockchain"
@ -69,7 +71,8 @@ const url = "https://lumeweb.com";
<main class={view + " space-y-40 overflow-x-hidden relative "}>
<slot/>
</main>
{view !== "home" && <JoinCommunity />}
{view !== "home" &&
<JoinCommunity/>}
<Footer/>
</body>
</html>

View File

@ -41,8 +41,6 @@
--color-aquamarine: #7afcbb;
--color-dark-aquamarine: #1F4A3D;
--color-gray: #C7C7C7;
--color-charcoal: #020e10;
--color-blue-charcoal: #0B3F48;
}
html {

View File

@ -1,7 +1,11 @@
/** @type {import('tailwindcss').Config} */
module.exports = {
content: ['./src/**/*.{astro,html,js,jsx,md,mdx,svelte,ts,tsx,vue}'],
important: false,
variants: {
extend: {
boxShadow: ['active']
}
},
theme: {
extend: {
colors: {
@ -9,8 +13,6 @@ module.exports = {
"dark-aquamarine": 'var(--color-dark-aquamarine)',
body: 'var(--color-gray)',
"gradient-aqua": "linear-gradient(to right, var(--color-dark-aquamarine), var(--color-aquamarine))",
"blue-charcoal": 'var(--color-blue-charcoal)',
"charcoal": 'var(--color-charcoal)',
}
},
fontFamily: {