continue work on components

src/components/Donate/How/How.astro

@@ -0,0 +1,16 @@
+---
+import './How.scss';
+---
+
+<section id="donate-how" class="tilted-bg-r">
+  <div class="feature-group">
+    <h2>How should I donate?</h2>
+    <h3>Donate via Gitcoin during funding rounds</h3>
+    <p>
+      This is because they will match you up to 150%. Currently, this is on the dates: June 7, 2022 – June 22, 2022
+    </p>
+    <div>
+      <a href="#" class="btn-main">Gitcoin</a>
+    </div>
+  </div>
+</section>

src/components/Donate/How/How.scss

@@ -0,0 +1,33 @@
+@import "../../../styles/colors.scss";
+@import "../../../styles/mixins.scss";
+
+#donate-how {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  margin-top: 4em;
+  @include fluid-padding-lr;
+  padding-top: 7em;
+  padding-bottom: 7em;
+  @include fluid-font-size(1.3125rem);
+
+  &::before {
+    background-image: url("../../../src/assets/donate-gfx-right.png");
+    background-position: 85% 100%;
+    background-repeat: no-repeat;
+    background-size: contain;
+  }
+
+  > div {
+    max-width: 29em;
+  }
+
+  @media screen and (width < 80rem) {
+    p {
+      background: rgba($body-bg-darker, 0.65);
+      border-radius: 0.5em;
+      padding: 0.3em 0.5em;
+      margin: -0.3em -0.5em;
+    }
+  }
+}

src/components/Donate/Jumbotron/Jumbotron.astro

@@ -0,0 +1,9 @@
+---
+import '../../../styles/jumbotron.scss';
+---
+
+<section id="donate-jumbotron" class="jumbotron">
+  <h1>
+    Lume is people-powered.
+  </h1>
+</section>

src/components/Donate/Legal/Legal.astro

@@ -0,0 +1,18 @@
+---
+import './Legal.scss';
+---
+
+<section id="donate-legal" class="tilted-bg-r">
+  <div>
+    <h2>Tax and Legal</h2>
+    <p>
+      <strong>Please understand that, according to United States regulations for our present incorporation status, donations are not currently tax-deductible.</strong>
+    </p>
+    <p>
+      If you are a corporation or business, planning to make a large donation, we recommend that you consult a CPA to ensure you understand the tax implications of your donated funds first.
+    </p>
+    <p>
+      All payments are nondeductible donations (unless you get consulted otherwise) and do not create any implied service contract or obligation for Hammer Technologies LLC to render any services.
+    </p>
+  </div>
+</section>

src/components/Donate/Legal/Legal.scss

@@ -0,0 +1,31 @@
+@import "../../../styles/mixins.scss";
+
+#donate-legal {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  padding: 11em 0 9em;
+  @include fluid-padding-lr;
+
+  h2 {
+    margin-bottom: 1em;
+    @include fluid-font-size(2.5rem);
+    line-height: 122%;
+  }
+
+  p {
+    margin-top: 1.5em;
+    font-family: var(--font-family-jaldi);
+    @include fluid-font-size(1.3125rem);
+    line-height: 157%;
+    color: var(--cloud);
+  }
+
+  strong {
+    @include fluid-font-size(1.625rem);
+  }
+
+  &::before {
+    bottom: -12%;
+  }
+}

src/components/Donate/Methods/Methods.astro

@@ -0,0 +1,56 @@
+---
+import './Methods.scss';
+import bitcoinLogo from '../../../../src/assets/bitcoin-logo.png';
+import litecoinLogo from '../../../../src/assets/litecoin-logo.png';
+import moneroLogo from '../../../../src/assets/monero-logo.png';
+import ethereumLogo from '../../../../src/assets/ethereum-logo.png';
+import paypalLogo from '../../../../src/assets/paypal-logo.png';
+import patreonLogo from '../../../../src/assets/patreon-logo.png';
+---
+
+<section id="donate-methods">
+  <div>
+    <h2>Donate Cryptocurrency</h2>
+    <div class="method-grid">
+      <div>
+        <div>
+          <img src={bitcoinLogo.src} alt="BTC" />
+          <h3>Bitcoin (BTC)</h3>
+        </div>
+      </div>
+      <div>
+        <div>
+          <img src={litecoinLogo.src} alt="LTC" />
+          <h3>Litecoin (LTC)</h3>
+        </div>
+      </div>
+      <div>
+        <div>
+          <img src={moneroLogo.src} alt="XMR" />
+          <h3>Monero (XMR)</h3>
+        </div>
+      </div>
+      <div>
+        <div>
+          <img src={ethereumLogo.src} alt="ETH" />
+          <h3>Ethereum (ETH)</h3>
+        </div>
+      </div>
+      <div>
+        <div>
+          <img src={paypalLogo.src} alt="Paypal" />
+          <h3>PayPal</h3>
+        </div>
+      </div>
+      <div>
+        <div>
+          <img src={patreonLogo.src} alt="Patreon" />
+          <h3>Patreon</h3>
+        </div>
+      </div>
+    </div>
+    <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.** 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>
+</section>

src/components/Donate/Methods/Methods.scss

@@ -0,0 +1,65 @@
+@import "../../../styles/colors.scss";
+@import "../../../styles/mixins.scss";
+
+#donate-methods {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  padding: 9em 0 14em;
+  @include fluid-padding-lr;
+
+  h2 {
+    margin-bottom: 1em;
+    @include fluid-font-size(2.5rem);
+    line-height: 122%;
+  }
+
+  .method-grid {
+    display: grid;
+    grid-template-columns: repeat(1, 1fr);
+    grid-auto-rows: 1fr;
+    gap: 0.9em;
+    @include fluid-font-size(1.25rem);
+
+    @media screen and (width >= 48rem) {
+      grid-template-columns: repeat(2, 1fr);
+    }
+
+    > div {
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
+      padding: 2.95em 1.95em;
+      background: $body-bg-darker;
+      border: 0.05em solid transparent;
+      border-radius: 0.5em;
+      transition: border-color 200ms;
+
+      &:hover {
+        border-color: var(--aquamarine);
+      }
+
+      > div {
+        display: flex;
+        align-items: center;
+        gap: 1em;
+      }
+    }
+
+    img {
+      @include fluid-width-height(3.4375rem, 3.4375rem);
+    }
+
+    h3 {
+      @include fluid-font-size(1.4375rem);
+    }
+  }
+
+  p {
+    margin-top: 1.5em;
+    font-family: var(--font-family-jaldi);
+    @include fluid-font-size(1.0625rem);
+    line-height: 157%;
+    color: var(--cloud);
+  }
+}

src/components/Donate/Why/Why.astro

@@ -0,0 +1,24 @@
+---
+import './Why.scss';
+---
+
+<section id="donate-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="#" class="btn-main">Donate</a>
+    </div>
+  </div>
+</section>

src/components/Donate/Why/Why.scss

@@ -0,0 +1,61 @@
+@import "../../../styles/colors.scss";
+@import "../../../styles/mixins.scss";
+
+@mixin fluid-margin {
+  $min-vw: 48rem;
+  $max-vw: 96rem;
+
+  $min-margin: 3.75%;
+  $max-margin: 7.5%;
+
+  & {
+    margin-left: min(calc(43.9em + $min-margin), max($min-margin, calc(100vw - 28em - $min-margin)));
+    margin-right: $min-margin;
+
+    @media screen and (width >= $min-vw) {
+      $margin: calc(#{$min-margin} + #{strip-unit($max-margin - $min-margin)} * ((100vw - #{$min-vw}) / #{strip-unit($max-vw - $min-vw)}));
+      margin-left: min(calc(43.9em + $margin), max($margin, calc(100vw - 28em - $margin)));
+      margin-right: $margin;
+    }
+
+    @media screen and (width >= $max-vw) {
+      margin-left: min(calc(43.9em + $max-margin), max($max-margin, calc(100vw - 28em - $max-margin)));
+      margin-right: $max-margin;
+    }
+  }
+}
+
+#donate-why {
+  position: relative;
+  margin: 9em 0;
+
+  &::before {
+    content: "";
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 92.2em;
+    max-width: 100vw;
+    height: 58.8em;
+    background-image: url("../../../assets/donate-why-bg.png");
+    background-position: 0%;
+    background-repeat: no-repeat;
+    background-size: contain;
+  }
+
+  > div {
+    @include fluid-font-size(1.3125rem);
+    @include fluid-margin;
+    max-width: 29em;
+    padding: 0.5em 0;
+  }
+
+  @media screen and (width < 80rem) {
+    p {
+      background: rgba($body-bg, 0.65);
+      border-radius: 0 0.5em 0.5em 0;
+      padding: 0.3em 0.5em;
+      margin: -0.3em -0.5em;
+    }
+  }
+}

src/components/Home/Meme/Meme.astro

@@ -7,9 +7,11 @@ import meme4 from '../../../assets/meme-4.png';
 ---
 
 <section id="home-meme" class="tilted-bg">
-  <div class="meme-text feature-group">
+  <div class="meme-item">
-    <h2>TITLE</h2>
+    <div>
-    <h3>Building a new world for your data</h3>
+      <img src={meme1.src} alt="Web 1" />
+      <h2>Web1</h2>
+    </div>
     <p>
       Right now, Lume has only one full-time developer and limited
       helper staff! We need help from developers, fundraisers,
@@ -17,22 +19,40 @@ import meme4 from '../../../assets/meme-4.png';
       masses.
     </p>
   </div>
-  <div class="meme-grid">
+  <div class="meme-item">
-    <div>
-      <img src={meme1.src} alt="Web 1" />
-      Web1
-    </div>
     <div>
       <img src={meme2.src} />
-      Web2
+      <h2>Web2</h2>
     </div>
+    <p>
+      Right now, Lume has only one full-time developer and limited
+      helper staff! We need help from developers, fundraisers,
+      funders, and contributors to bring the new internet to the
+      masses.
+    </p>
+  </div>
+  <div class="meme-item">
     <div>
       <img src={meme3.src} />
-      Crypto &amp; Defi
+      <h2>Crypto &amp; Defi</h2>
     </div>
+    <p>
+      Right now, Lume has only one full-time developer and limited
+      helper staff! We need help from developers, fundraisers,
+      funders, and contributors to bring the new internet to the
+      masses.
+    </p>
+  </div>
+  <div class="meme-item">
     <div>
       <img src={meme4.src} />
-      Web3
+      <h2>Web3</h2>
     </div>
+    <p>
+      Right now, Lume has only one full-time developer and limited
+      helper staff! We need help from developers, fundraisers,
+      funders, and contributors to bring the new internet to the
+      masses.
+    </p>
   </div>
 </section>

src/components/Home/Meme/Meme.scss

@@ -2,48 +2,61 @@
 
 #home-meme {
   display: flex;
-  justify-content: center;
+  flex-direction: column;
+  align-items: center;
+  @include fluid-padding-lr;
+  padding-top: 12em;
+  padding-bottom: 12em;
+  gap: 2em;
+
+  .meme-item {
+    display: flex;
     align-items: center;
-  padding: 8% 12%;
     @include fluid-font-size(1.3125rem);
-}
+    gap: 2.5em;
+    max-width: 55em;
 
-.meme-text {
+    div {
-  width: 60%;
-  margin-right: 5%;
       flex-shrink: 0;
+      display: flex;
+      align-items: center;
+      gap: 2.5em;
     }
 
-.meme-grid { 
-  display: grid;
-  grid-template-columns: 50% 50%;
-  gap: 1rem;
-  max-width: 22em;
-
     img {
-    margin-bottom: 0.5em;
+      @include fluid-width-height(15.4375rem, 13.625rem);
     }
 
-  > div {
+    h2 {
+      width: 4.5em;
       @include fluid-font-size(1.5625rem);
       font-weight: 700;
       text-align: center;
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
       color: var(--aquamarine);
+      text-transform: uppercase;
+    }
+
+    p {
+      font-family: var(--font-family-jaldi);
+      @include fluid-font-size(1.3125rem);
+      line-height: 123.81%;
+      color: var(--cloud);
     }
   }
 
   @media screen and (width < 48rem) {
-  #home-meme {
+    .meme-item {
+      div {
         flex-direction: column;
-    padding: 20% 8%;
+        gap: 0.5em;
-    text-align: center;
       }
 
-  .meme-text {
+      h2 {
         width: auto;
-    margin: 0 0 10%;
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+      }
+    }
   }
 }

src/components/Layout/Footer/Footer.astro

@@ -1,6 +1,6 @@
 ---
 import "./Footer.scss";
-import logo from "../../../src/assets/lume-logo.png";
+import logo from "../../../../src/assets/lume-logo.png";
 ---
 
 <footer>

src/components/Layout/Footer/Footer.scss

@@ -1,5 +1,5 @@
-@import "../../styles/mixins.scss";
+@import "../../../styles/mixins.scss";
-@import "../../styles/colors.scss";
+@import "../../../styles/colors.scss";
 
 footer {
   display: flex;
@@ -62,7 +62,7 @@ footer {
 
   span {
     display: block;
-    background-image: url('../../assets/email-icon.webp');
+    background-image: url('../../../assets/email-icon.webp');
     background-size: cover;
     margin-right: 0.375em;
     @include fluid-width-height(1.0625rem, 0.875rem);

src/components/Layout/JoinCommunity/JoinCommunity.scss

@@ -1,4 +1,4 @@
-@import "../../styles/mixins.scss";
+@import "../../../styles/mixins.scss";
 
 #join-community {
   padding-top: 3.16%;

src/components/Layout/Navbar/Navbar.jsx

@@ -1,6 +1,6 @@
 import React, { useState, useEffect } from 'react';
 import './Navbar.scss';
-import logo from '../../../src/assets/lume-logo.png';
+import logo from '../../../../src/assets/lume-logo.png';
 
 function Navbar({ view }) {
   const [nav, setNav] = useState(false);

src/components/Layout/Navbar/Navbar.scss

@@ -1,4 +1,4 @@
-@import "../../styles/mixins.scss";
+@import "../../../styles/mixins.scss";
 
 nav {
   display: flex;

src/components/Vision/Jumbotron/Jumbotron.astro

@@ -1,8 +1,8 @@
 ---
-import './Jumbotron.scss';
+import '../../../styles/jumbotron.scss';
 ---
 
-<section id="vision-jumbotron">
+<section id="vision-jumbotron" class="jumbotron">
   <h1>
     Easy Web3 access, storage, publishing, and payment for content creation.
   </h1>

src/components/What/Jumbotron/Jumbotron.astro

@@ -1,8 +1,8 @@
 ---
-import './Jumbotron.scss';
+import '../../../styles/jumbotron.scss';
 ---
 
-<section id="what-jumbotron">
+<section id="what-jumbotron" class="jumbotron">
   <h1>
     A new web that is fair and accessible to all, where each user can have a say in its infrastructure.
   </h1>

src/components/What/Jumbotron/Jumbotron.scss

@@ -1,18 +0,0 @@
-@import "../../../styles/mixins.scss";
-@import "../../../styles/colors.scss";
-
-#what-jumbotron {
-  display: flex;
-  justify-content: center;
-
-  h1 {
-    max-width: 21em;
-    margin: 2.12em 7.5% 0;
-    font-family: var(--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: 1px 1px 2px rgba($body-bg-darker, 0.65);
-  }
-}

src/layouts/Layout.astro

@@ -1,8 +1,8 @@
 ---
 import '../styles/global.scss';
-import Navbar from '../components/Navbar/Navbar.jsx';
+import Navbar from '../components/Layout/Navbar/Navbar.jsx';
-import Footer from '../components/Footer/Footer.astro';
+import Footer from '../components/Layout/Footer/Footer.astro';
-import JoinCommunity from '../components/JoinCommunity/JoinCommunity.astro';
+import JoinCommunity from '../components/Layout/JoinCommunity/JoinCommunity.astro';
 
 export interface Props {
   view: string;

src/pages/donate.astro

@@ -1,7 +1,16 @@
 ---
 import Layout from '../layouts/Layout.astro';
+import Jumbotron from '../components/Donate/Jumbotron/Jumbotron.astro';
+import Why from '../components/Donate/Why/Why.astro';
+import How from '../components/Donate/How/How.astro';
+import Methods from '../components/Donate/Methods/Methods.astro';
+import Legal from '../components/Donate/Legal/Legal.astro';
 ---
 
 <Layout view="donate" title="Donate - Lume Web">
-
+  <Jumbotron />
+  <Why />
+  <How />
+  <Methods />
+  <Legal />
 </Layout>

src/styles/global.scss

@@ -39,7 +39,7 @@ body {
 }
 
 main {
-  @include fluid-font-size(0.0625rem);
+  @include fluid-font-size(0.625rem);
   flex-grow: 1;
 }
 
@@ -66,11 +66,11 @@ main.vision {
   &::before {
     content: "";
     position: absolute;
-    width: max(min(1031em, 100vw), 320em);
+    width: max(min(103.1em, 100vw), 32em);
-    height: max(min(733em, 100vw), 400em);
+    height: max(min(73.3em, 100vw), 40em);
     top: 0;
     left: 50%;
-    margin-left: max(-515.5em, -50vw);
+    margin-left: max(-51.55em, -50vw);
     z-index: -1;
     background: url(../assets/vision-bg.png);
     background-size: contain;
@@ -83,11 +83,11 @@ main.what {
   &::before {
     content: "";
     position: absolute;
-    width: max(min(1513em, 100vw), 320em);
+    width: max(min(151.3em, 100vw), 32em);
-    height: max(min(1224em, 100vw), 560em);
+    height: max(min(122.4em, 100vw), 56em);
     top: -20em;
     left: 50%;
-    margin-left: max(-756.5em, -50vw);
+    margin-left: max(-75.65em, -50vw);
     z-index: -1;
     background: url(../assets/what-bg.png);
     background-size: contain;
@@ -116,13 +116,19 @@ main.what {
     text-shadow: 1px 1px 2px rgba($body-bg-darker, 0.65);
   }
 
-  p {
+  p, li {
     font-family: var(--font-family-jaldi);
     line-height: 167%;
     color: var(--cloud);
     transition: background 200ms;
   }
 
+  ul {
+    list-style-type: disc;
+    margin-left: 1.5em;
+    margin-bottom: 0.78em;
+  }
+
   .btn-main {
     margin-top: 1.57em;
   }
@@ -149,7 +155,6 @@ main.what {
     flex-direction: column;
     justify-content: center;
     padding: 2.95em 1.95em;
-    color: var(--white);
     background: $body-bg-darker;
     border: 0.05em solid transparent;
     border-radius: 0.5em;
@@ -183,10 +188,27 @@ main.what {
     top: 0;
     right: -5%;
     bottom: 0;
-    left: -25%;
+    left: -5%;
     margin: 2% 0;
     background: $body-bg-darker;
     transform: matrix(1, -0.04, 0.04, 1, 0, 0);
     z-index: -1;
   }
 }
+
+.tilted-bg-r {
+  position: relative;
+
+  &::before {
+    content: "";
+    position: absolute;
+    top: 0;
+    right: -5%;
+    bottom: 0;
+    left: -5%;
+    margin: 2% 0;
+    background: $body-bg-darker;
+    transform: matrix(1, 0.04, -0.04, 1, 0, 0);
+    z-index: -1;
+  }
+}

src/styles/jumbotron.scss

@@ -1,18 +1,20 @@
-@import "../../../styles/mixins.scss";
+@import "./mixins.scss";
-@import "../../../styles/colors.scss";
+@import "./colors.scss";
 
-#vision-jumbotron {
+.jumbotron {
   display: flex;
   justify-content: center;
+  align-items: center;
+  height: 18.78em;
+  margin: 12.5em 7.5% 0;
 
   h1 {
     max-width: 21em;
-    margin: 2.12em 7.5% 0;
     font-family: var(--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: 1px 1px 2px rgba($body-bg-darker, 0.65);
+    text-shadow: 0.017em 0.017em 0.034em rgba($body-bg-darker, 0.65);
   }
 }