Compare commits
No commits in common. "309d19c73aa1a261081000f7396ec090549b3d64" and "ecd987a5830e89addc3077200279a57a7e3ffe0d" have entirely different histories.
309d19c73a
...
ecd987a583
|
|
@ -1,6 +1,7 @@
|
||||||
---
|
---
|
||||||
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 "./How.scss";
|
||||||
---
|
---
|
||||||
|
|
||||||
<style>
|
<style>
|
||||||
|
|
@ -33,21 +34,21 @@ import FeaturedGroup from "../../ui/FeaturedGroup.astro";
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
||||||
<section id="how" class="relative overflow-hidden max-w-[100vw]">
|
<section id="how" class="relative">
|
||||||
<div class="custom-bg"></div>
|
<div class="custom-bg -mx-10"></div>
|
||||||
<div
|
<div class="max-w-3xl px-7 mx-10 md:mx-20 lg:mx-40">
|
||||||
class="max-w-3xl bg-black/50 p-3 lg:bg-transparent lg:p-0 mx-10 md:mx-20 lg:mx-40"
|
<div class="bg-black/50 p-3 lg:bg-transparent lg:p-0">
|
||||||
>
|
<FeaturedGroup
|
||||||
<FeaturedGroup
|
subtitle="Donate via Gitcoin during funding rounds"
|
||||||
subtitle="Donate via Gitcoin during funding rounds"
|
title="How should I donate?"
|
||||||
title="How should I donate?"
|
text={[
|
||||||
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.",
|
||||||
"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
|
||||||
<Button
|
href="https://gitcoin.co/grants/4722/lume-web-web3-accessibility-freedom-and-education"
|
||||||
href="https://gitcoin.co/grants/4722/lume-web-web3-accessibility-freedom-and-education"
|
label="Gitcoin"
|
||||||
label="Gitcoin"
|
/>
|
||||||
/>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,50 @@
|
||||||
|
@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;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -4,7 +4,7 @@ import backgroundSrc from "/src/assets/donate-jumbotron-bg.png";
|
||||||
|
|
||||||
<section
|
<section
|
||||||
id="jumbotron"
|
id="jumbotron"
|
||||||
class="relative w-full h-[420px] flex items-center justify-center max-w-[100vw] overflow-hidden"
|
class="relative w-full h-[420px] flex items-center justify-center"
|
||||||
>
|
>
|
||||||
<img
|
<img
|
||||||
src={backgroundSrc.src}
|
src={backgroundSrc.src}
|
||||||
|
|
|
||||||
|
|
@ -1,4 +1,8 @@
|
||||||
<section id="legal" class="mx-10 lg:mx-40 pb-40">
|
---
|
||||||
|
// 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>
|
<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">
|
<p class="text-lg lg:text-xl font-body text-body my-5">
|
||||||
<strong
|
<strong
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,31 @@
|
||||||
|
@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%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -168,17 +168,15 @@ await addCurrency(
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
<section id="methods">
|
<section id="methods" class="mx-10 md:mx-20 lg:mx-40">
|
||||||
<div class="mx-5 md:mx-20 lg:mx-40">
|
<div>
|
||||||
<h2 class="text-3xl lg:text-4xl mb-5 mt-20">Donate Cryptocurrency</h2>
|
<h2 class="text-3xl lg:text-4xl mb-5 mt-20">Donate Cryptocurrency</h2>
|
||||||
<div
|
<div class="flex w-full flex-col lg:flex-row lg:flex-wrap gap-[10px]">
|
||||||
class="flex w-full flex-col lg:flex-row lg:flex-wrap gap-y-[10px] lg:gap-x-[10px]"
|
|
||||||
>
|
|
||||||
{
|
{
|
||||||
currencies.map((currency) => (
|
currencies.map((currency) => (
|
||||||
<div
|
<div
|
||||||
id={"donate-" + currency.id}
|
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)]`}
|
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}`}
|
style={`--tw-ring-color: ${currency.mainColor}`}
|
||||||
>
|
>
|
||||||
<div class="flex flex-row flex-1 gap-x-4 w-full justify-between">
|
<div class="flex flex-row flex-1 gap-x-4 w-full justify-between">
|
||||||
|
|
@ -208,11 +206,9 @@ await addCurrency(
|
||||||
))
|
))
|
||||||
}
|
}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
|
||||||
<div class="mx-5 md:mx-20 lg:mx-40 max-w-[calc(100vw-40px)]">
|
|
||||||
<h2 class="text-3xl lg:text-4xl mb-10 mt-40">Donate Fiat</h2>
|
<h2 class="text-3xl lg:text-4xl mb-10 mt-40">Donate Fiat</h2>
|
||||||
<div
|
<div
|
||||||
class="flex flex-col items-center justify-between gap-y-4 lg:gap-x-4 lg:flex-row lg:flex-wrap"
|
class="flex flex-col items-center justify-between gap-4 lg:flex-row lg:flex-wrap"
|
||||||
>
|
>
|
||||||
<div
|
<div
|
||||||
id="donate-paypal"
|
id="donate-paypal"
|
||||||
|
|
@ -322,13 +318,12 @@ await addCurrency(
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<p class="text-lg italic font-body text-body mt-5 mx-10">
|
<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
|
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
|
with us to discuss. If there is a cryptocurrency you wish to contribute with
|
||||||
that we have not listed, please let me know!
|
that we have not listed, please let me know!
|
||||||
</p>
|
</p>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
<dialog id="qr-dialog" class="backdrop:bg-black/20 backdrop:backdrop-blur-sm">
|
<dialog id="qr-dialog" class="backdrop:bg-black/20 backdrop:backdrop-blur-sm">
|
||||||
</dialog>
|
</dialog>
|
||||||
<script is:inline>
|
<script is:inline>
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,291 @@
|
||||||
|
@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;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -6,17 +6,18 @@ import backgroud from "/src/assets/why-bg-2.png";
|
||||||
|
|
||||||
<section
|
<section
|
||||||
id="why"
|
id="why"
|
||||||
class="flex flex-col overflow-hidden relative md:flex-row mx-10 md:mx-20 lg:mx-40"
|
class="flex flex-col overflow-hidden relative md:flex-row mx-10 md:mx-20"
|
||||||
>
|
>
|
||||||
<img
|
<img
|
||||||
src={backgroud.src}
|
src={backgroud.src}
|
||||||
class="absolute xl:relative -z-10 min-w-[1000px] h-[750px] -mx-10 md:-mx-20 lg:-mx-40"
|
class="absolute xl:relative -z-10 min-w-[1000px] h-[750px] -mx-10 md:-mx-20 lg:-mx-40"
|
||||||
/>
|
/>
|
||||||
<FeaturedGroup
|
<div class="px-10 md:px-20 py-5">
|
||||||
subtitle="Why should I donate to Lume?"
|
<FeaturedGroup
|
||||||
title="Help us break the pattern"
|
subtitle="Why should I donate to Lume?"
|
||||||
text={[
|
title="Help us break the pattern"
|
||||||
`<ul class="space-y-3 -mb-10 text-body font-body list-disc list-inside text-xl lg:text-2xl">
|
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 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 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 believe your data should be private and secure unless you choose to share it.</li>
|
||||||
|
|
@ -24,8 +25,9 @@ import backgroud from "/src/assets/why-bg-2.png";
|
||||||
<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 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>
|
<li class="list-item">You believe in handling web abuse using legal and social means instead of censorship and restriction.</li>
|
||||||
</ul>`,
|
</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.`,
|
`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" />
|
<Button label="Donate" href="#methods" />
|
||||||
|
</div>
|
||||||
</section>
|
</section>
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,50 @@
|
||||||
|
@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;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,50 @@
|
||||||
|
@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,4 +1,6 @@
|
||||||
---
|
---
|
||||||
|
// import "./JoinCommunity.scss";
|
||||||
|
|
||||||
import svgGit from "/src/assets/icons/git.svg?raw";
|
import svgGit from "/src/assets/icons/git.svg?raw";
|
||||||
import svgGithub from "/src/assets/icons/github.svg?raw";
|
import svgGithub from "/src/assets/icons/github.svg?raw";
|
||||||
import svgDiscord from "/src/assets/icons/discord.svg?raw";
|
import svgDiscord from "/src/assets/icons/discord.svg?raw";
|
||||||
|
|
@ -7,12 +9,10 @@ import svgTwitter from "/src/assets/icons/twitter.svg?raw";
|
||||||
|
|
||||||
<section
|
<section
|
||||||
id="join-community"
|
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"
|
class="bg-primary space-between text-black p-20 lg:px-40 flex flex-col lg:flex-row"
|
||||||
>
|
>
|
||||||
<div
|
<div class="w-full">
|
||||||
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">
|
||||||
>
|
|
||||||
<h2 class="text-3xl font-bold lg:text-4xl font-display mb-3">
|
|
||||||
Join our community, lend a hand.
|
Join our community, lend a hand.
|
||||||
</h2>
|
</h2>
|
||||||
<p class="text-xl lg:text-2xl font-body">
|
<p class="text-xl lg:text-2xl font-body">
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,80 @@
|
||||||
|
@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);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,20 @@
|
||||||
|
@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;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,45 @@
|
||||||
|
@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;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,51 @@
|
||||||
|
@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;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -3,10 +3,7 @@ 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
|
<section id="new-world" class="mx-10 md:mx-20 lg:mx-40 relative h-[850px]">
|
||||||
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,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/Jumbotron.astro';
|
||||||
import Why from "../components/Donate/Why/Why.astro";
|
import Why from '../components/Donate/Why/Why.astro';
|
||||||
import How from "../components/Donate/How/How.astro";
|
import How from '../components/Donate/How/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/Legal.astro';
|
||||||
---
|
---
|
||||||
|
|
||||||
<Layout view="donate" title="Donate - Lume Web">
|
<Layout view="donate" title="Donate - Lume Web">
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,22 @@
|
||||||
|
@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);
|
||||||
|
}
|
||||||
|
}
|
||||||
Loading…
Reference in New Issue