refactor: '/donate' page
This commit is contained in:
Juan Di Toro
parent
874b290afa
commit
088f7935bd
Binary file not shown.
|
After Width: | Height: | Size: 46 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 43 KiB |
|
|
@ -1,18 +1,54 @@
|
|||
---
|
||||
import './How.scss';
|
||||
import Button from "../../ui/Button.astro";
|
||||
import FeaturedGroup from "../../ui/FeaturedGroup.astro";
|
||||
// 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>
|
||||
<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"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
|
|
|||
|
|
@ -1,9 +1,18 @@
|
|||
---
|
||||
import '../../../styles/jumbotron.scss';
|
||||
import backgroundSrc from "/src/assets/donate-jumbotron-bg.png";
|
||||
---
|
||||
|
||||
<section id="jumbotron">
|
||||
<h1>
|
||||
Lume is people-powered.
|
||||
<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.
|
||||
</h1>
|
||||
</section>
|
||||
|
|
|
|||
|
|
@ -1,18 +1,23 @@
|
|||
---
|
||||
import './Legal.scss';
|
||||
// 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>
|
||||
<section id="legal" class="mx-20 lg:mx-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>
|
||||
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 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>
|
||||
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 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>
|
||||
</div>
|
||||
</section>
|
||||
|
|
|
|||
|
|
@ -1,113 +1,338 @@
|
|||
---
|
||||
import './Methods.scss';
|
||||
import QRCode from 'qrcode';
|
||||
import QRCode from "qrcode";
|
||||
|
||||
const currencies = [];
|
||||
|
||||
const addCurrency = async (id, title, address) => {
|
||||
const addCurrency = async (id, title, address, mainColor) => {
|
||||
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');
|
||||
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');
|
||||
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"
|
||||
);
|
||||
---
|
||||
|
||||
<section id="methods">
|
||||
<div>
|
||||
<h2>Donate Cryptocurrency</h2>
|
||||
<div class="method-grid">
|
||||
{currencies.map(currency => (
|
||||
<div id={'donate-' + currency.id}>
|
||||
<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">
|
||||
<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>
|
||||
<div class="address">
|
||||
<button onclick="copyToClipboard(this)"></button>
|
||||
<div>{currency.address}</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">
|
||||
<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>
|
||||
<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">
|
||||
))
|
||||
}
|
||||
</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"
|
||||
>
|
||||
<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"/>
|
||||
<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>
|
||||
</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>
|
||||
<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>
|
||||
</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"/>
|
||||
<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>
|
||||
</svg>
|
||||
<h3>Patreon</h3>
|
||||
<a class="btn-main" href="https://www.patreon.com/bePatron?u=71702133">Become a Patron!</a>
|
||||
<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>
|
||||
<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"/>
|
||||
<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>Liberapay</h3>
|
||||
<a class="btn-main" href="https://liberapay.com/lumeweb/donate">Donate</a>
|
||||
<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>
|
||||
<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"/>
|
||||
<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>GitHub Sponsors</h3>
|
||||
<a class="btn-main" href="https://github.com/sponsors/LumeWeb">Donate</a>
|
||||
<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>
|
||||
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 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>
|
||||
</div>
|
||||
<dialog id="qr-dialog"></dialog>
|
||||
</section>
|
||||
<dialog id="qr-dialog" class="backdrop:bg-black/20 backdrop:backdrop-blur-sm">
|
||||
</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) {
|
||||
|
|
@ -118,33 +343,32 @@ await addCurrency('algorand', 'Algorand (ALGO)', '3QBE5TZ63TF5W7V2QRJWRB72M7INQL
|
|||
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>
|
||||
|
|
|
|||
|
|
@ -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 {
|
||||
|
|
|
|||
|
|
@ -1,24 +1,33 @@
|
|||
---
|
||||
import './Why.scss';
|
||||
import Button from "../../ui/Button.astro";
|
||||
import FeaturedGroup from "../../ui/FeaturedGroup.astro";
|
||||
import backgroud from "/src/assets/why-bg-2.png";
|
||||
---
|
||||
|
||||
<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>
|
||||
<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 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>
|
||||
|
|
|
|||
|
|
@ -10,7 +10,9 @@ 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 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.
|
||||
</h1>
|
||||
</section>
|
||||
|
|
|
|||
|
|
@ -10,7 +10,9 @@ 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 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
|
||||
you control.
|
||||
</h1>
|
||||
|
|
|
|||
|
|
@ -1,16 +1,27 @@
|
|||
---
|
||||
export interface Props {
|
||||
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">
|
||||
<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>
|
||||
<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>
|
||||
|
|
|
|||
|
|
@ -20,7 +20,7 @@ const { title, subtitle, text } = Astro.props;
|
|||
|
||||
{
|
||||
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} />
|
||||
</p>
|
||||
))
|
||||
|
|
|
|||
|
|
@ -51,7 +51,10 @@ const { view, title } = Astro.props;
|
|||
</head>
|
||||
<body class="max-w-[1600px] mx-auto">
|
||||
<Navbar view={view} />
|
||||
<main class={view + " space-y-40 overflow-x-hidden relative mb-20"}>
|
||||
<main
|
||||
class={view +
|
||||
" space-y-40 overflow-x-hidden relative mb-20 h-full max-h-none"}
|
||||
>
|
||||
<slot />
|
||||
</main>
|
||||
{view !== "home" && <JoinCommunity />}
|
||||
|
|
|
|||
|
|
@ -41,6 +41,7 @@
|
|||
--color-aquamarine: #7afcbb;
|
||||
--color-dark-aquamarine: #1F4A3D;
|
||||
--color-gray: #C7C7C7;
|
||||
--color-blue-charcoal: #020e10;
|
||||
}
|
||||
|
||||
html {
|
||||
|
|
|
|||
|
|
@ -1,11 +1,7 @@
|
|||
/** @type {import('tailwindcss').Config} */
|
||||
module.exports = {
|
||||
content: ['./src/**/*.{astro,html,js,jsx,md,mdx,svelte,ts,tsx,vue}'],
|
||||
variants: {
|
||||
extend: {
|
||||
boxShadow: ['active']
|
||||
}
|
||||
},
|
||||
important: false,
|
||||
theme: {
|
||||
extend: {
|
||||
colors: {
|
||||
|
|
|
|||
Loading…
Reference in New Issue