feat: create two remaining components, optimize layout and existing components (wip)

src/components/Donate/Methods/Methods.astro

@@ -33,7 +33,7 @@ await addCurrency('algorand', 'Algorand (ALGO)', '3QBE5TZ63TF5W7V2QRJWRB72M7INQL
   <div>
     <h2>Donate Cryptocurrency</h2>
     <div class="method-grid">
-      {currencies.map(async currency => (
+      {currencies.map(currency => (
         <div id={'donate-' + currency.id}>
           <div>
             <Fragment set:html={currency.svgLogo.default} />

src/components/Donate/Methods/Methods.scss

@@ -71,6 +71,7 @@
 
       div {
         order: 1;
+        flex-grow: 1;
         position: relative;
         @include fluid-font-size(1.3125rem);
         word-break: break-all;
@@ -112,12 +113,12 @@
           top: 0;
           right: -0.5em;
           padding: 0 0.5em;
-          background: $color-blue-charcoal;
+          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 overlay-opacity forwards;
+          animation: $transition-duration hint-opacity forwards;
           transition: color $transition-duration;
         }
       }
@@ -274,3 +275,13 @@
     opacity: 0.75;
   }
 }
+
+@keyframes hint-opacity {
+  0% {
+    opacity: 0;
+  }
+
+  100% {
+    opacity: 1;
+  }
+}

src/components/Donate/Why/Why.scss

@@ -29,7 +29,7 @@
 
   @media screen and (max-width: 80rem) {
     ul, p {
-      background: rgba($color-body-bg, 0.65);
+      background: rgba($color-blue-charcoal-2, 0.65);
     }
 
     ul {

src/components/Home/CTO/CTO.astro

@@ -4,6 +4,7 @@ import ctoAvatar from '../../../assets/cto-avatar.webp';
 ---
 
 <section id="home-cto">
+  <div>
     <div class="feature-group">
       <h2>Community-Powered</h2>
       <h3>Building a new world for your data</h3>
@@ -18,4 +19,5 @@ import ctoAvatar from '../../../assets/cto-avatar.webp';
         </div>
       </div>
     </div>
+  </div>
 </section>

src/components/Home/CTO/CTO.scss

@@ -2,15 +2,35 @@
 @import "../../../styles/vars.scss";
 
 #home-cto {
-  min-height: 28em;
+  @include fluid-padding-lr;
-  @include fluid-font-size(1.3125rem);
-  background-image: url("../../../assets/geometric-bg.webp");
-  background-position: 99% 100%;
-  background-repeat: no-repeat;
-  background-size: contain;
 
   > div {
-    @include fluid-margin-lr;
+    position: relative;
+    display: flex;
+    justify-content: flex-end;
+    align-items: center;
+    margin: 0 auto;
+    @include fluid-font-size(1.3125rem);
+    max-width: 75em;
+    min-height: 28em;
+
+    &::before {
+      content: "";
+      position: absolute;
+      top: 0;
+      bottom: 0;
+      left: min(0rem, calc((100vw - 40rem) / 2));
+      width: 100%;
+      min-width: 40rem;
+      background-image: url("../../../assets/geometric-bg.webp");
+      background-position: 1%;
+      background-repeat: no-repeat;
+      background-size: contain;
+      z-index: -1;
+    }
+  }
+
+  .feature-group {
     max-width: 28em;
     padding: 3.14em 0;
   }
@@ -36,7 +56,7 @@
 
   @media screen and (max-width: 80rem) {
     p, .bio {
-      background: rgba($color-body-bg, 0.65);
+      background: rgba($color-blue-charcoal-2, 0.65);
       border-radius: 0 0.5em 0.5em 0;
       padding: 0.3em 0.5em;
       margin: -0.3em -0.5em;

src/components/Home/PoweredBy/PoweredBy.scss

@@ -36,7 +36,7 @@
     color: $color-alto;
 
     &:hover {
-      color: $color-aquamarine;
+      color: $color-white;
     }
   }
 

src/components/Home/Socials/Socials.scss

@@ -28,23 +28,23 @@
     color: $color-alto;
 
     &:hover {
-      color: $color-aquamarine;
+      color: $color-white;
     }
   }
 
   .github-logo svg {
-    @include fluid-width(4.375rem);
+    @include fluid-width(3.5rem);
   }
 
   .discord-logo svg {
-    @include fluid-width(4.375rem);
+    @include fluid-width(3.5rem);
   }
 
   .twitter-logo svg {
-    @include fluid-width(4.375rem);
+    @include fluid-width(3.5rem);
   }
 
   .facebook-logo svg {
-    @include fluid-width(4.375rem);
+    @include fluid-width(3.5rem);
   }
 }

src/components/Home/Vision/Vision.scss

@@ -20,7 +20,7 @@
 
   @media screen and (max-width: 80rem) {
     p {
-      background: rgba($color-body-bg, 0.65);
+      background: rgba($color-blue-charcoal-2, 0.65);
       border-radius: 0.5em;
       padding: 0.3em 0.5em;
       margin: -0.3em -0.5em;

src/components/Home/WhatIsWeb3/WhatIsWeb3.astro

@@ -3,7 +3,6 @@ import "./WhatIsWeb3.scss";
 ---
 
 <section id="home-whatisweb3" class="tilted-bg">
-  <div class="background"></div>
   <div class="feature-group">
     <h2>
       What is the Web?
@@ -15,7 +14,7 @@ import "./WhatIsWeb3.scss";
       Web3 gives people control over their data, privacy, and ownership. Lume's affordable Web3 tech aims to speed up the transition from Web2 to Web3, which matters for privacy and security.
     </p>
     <div>
-      <a href="#" class="btn-main">Learn More</a>
+      <a href="/what-is-web3" class="btn-main">Learn More</a>
     </div>
   </div>
 </section>

src/components/Home/WhatIsWeb3/WhatIsWeb3.scss

@@ -9,7 +9,8 @@
   margin-top: 2.48em;
   @include fluid-font-size(1.3125rem);
 
-  .background {
+  &::after {
+    content: "";
     position: absolute;
     left: 0;
     top: 50%;
@@ -22,12 +23,12 @@
     background-repeat: no-repeat;
     background-size: contain;
     pointer-events: none;
+    z-index: -1;
   }
 
   .feature-group {
     @include fluid-position-left(27.8em, 28em);
     max-width: 28em;
-    z-index: 1;
 
     h1 {
       margin-top: 1em;

src/components/Layout/Footer/Footer.scss

@@ -31,10 +31,10 @@ footer {
   }
 
   h5 {
-    @include fluid-font-size(1.875rem);
+    @include fluid-font-size(1.75rem);
     line-height: 100%;
     white-space: nowrap;
-    margin: 0.25em 0;
+    margin: 0.3em 0;
   }
 
   li {

src/components/Layout/JoinCommunity/JoinCommunity.scss

@@ -56,6 +56,11 @@
 
   a {
     display: block;
+    color: #0B3F48;
+
+    &:hover {
+      color: inherit;
+    }
   }
 
   .github-logo svg {

src/components/Layout/Navbar/Navbar.jsx

@@ -51,16 +51,16 @@ function Navbar({ view }) {
       </div>
       <menu className={nav ? 'active' : undefined} onClick={onMenuClick}>
         <li>
-          <a href="/" className={view === 'home' ? 'underline' : undefined} aria-current={view === 'home' ? 'page' : undefined}>Home</a>
+          <a href="/" className={view === 'home' ? 'current' : undefined} aria-current={view === 'home' ? 'page' : undefined}>Home</a>
         </li>
         <li>
-          <a href="/vision" className={view === 'vision' ? 'underline' : undefined} aria-current={view === 'vision' ? 'page' : undefined}>Vision</a>
+          <a href="/vision" className={view === 'vision' ? 'current' : undefined} aria-current={view === 'vision' ? 'page' : undefined}>Vision</a>
         </li>
         <li>
-          <a href="/what-is-web3" className={view === 'what' ? 'underline' : undefined} aria-current={view === 'what' ? 'page' : undefined}>What is Web3</a>
+          <a href="/what-is-web3" className={view === 'what' ? 'current' : undefined} aria-current={view === 'what' ? 'page' : undefined}>What is Web3</a>
         </li>
         <li>
-          <a href="/donate" className={view === 'donate' ? 'underline' : undefined} aria-current={view === 'donate' ? 'page' : undefined}>Donate</a>
+          <a href="/donate" className={view === 'donate' ? 'current' : undefined} aria-current={view === 'donate' ? 'page' : undefined}>Donate</a>
         </li>
         <li>
           <a className="btn-main download-btn" href="#">Download Extension</a>

src/components/Layout/Navbar/Navbar.scss

@@ -13,7 +13,7 @@ nav {
     flex-shrink: 0;
 
     img {
-      @include fluid-width-height(13.125rem, 4.375rem);
+      @include fluid-width-height(11.25rem, 3.75rem);
     }
   }
 }
@@ -25,10 +25,18 @@ menu {
   li > a {
     display: block;
     padding: 0.55em 0.9em;
+    text-decoration: underline;
+    text-decoration-color: transparent;
+    transition: text-decoration-color $transition-duration;
+
+    &.current, &:hover, &:active {
+      text-decoration-color: inherit;
+    }
   }
 
   .download-btn {
     margin-left: 0.9em;
+    text-decoration: none;
   }
 }
 
@@ -44,8 +52,8 @@ menu {
   nav {
     position: sticky;
     top: 0;
-    background: rgba($color-body-bg, 0.85);
+    background: rgba($color-blue-charcoal-2, 0.85);
-    z-index: 1;
+    z-index: 2;
   }
 
   menu {
@@ -57,7 +65,7 @@ menu {
     right: min(-20rem, -100vw);
     bottom: 0;
     padding: 7.5em 7.5% 1em;
-    background: rgba($color-body-bg, 0.85);
+    background: rgba($color-blue-charcoal-2, 0.85);
     transition: right $transition-duration;
     overflow-y: auto;
 

src/components/Vision/Community/Community.astro

@@ -1,8 +1,8 @@
 ---
-import './CommunityPower.scss';
+import './Community.scss';
 ---
 
-<section id="vision-community-power">
+<section id="vision-community">
   <div class="feature-group">
     <h2>Community-Powered</h2>
     <h3>Building a new world for your data</h3>

src/components/Vision/Community/Community.scss

@@ -1,7 +1,7 @@
 @import "../../../styles/mixins.scss";
 @import "../../../styles/vars.scss";
 
-#vision-community-power {
+#vision-community {
   position: relative;
   background-image: url("../../../assets/community-power-bg.png");
   margin-top: 7.8125rem;

src/components/Vision/Grid/Grid.scss

@@ -3,7 +3,7 @@
 
 #vision-grid {
   padding-top: 2.05em;
-  padding-bottom: 4.5em;
+  padding-bottom: 2.05em;
 
   div:first-child {
     background: inherit;

src/components/Vision/People/People.astro

@@ -0,0 +1,22 @@
+---
+import './People.scss';
+---
+
+<section id="vision-people">
+  <div class="feature-group">
+    <h2>Community-Powered</h2>
+    <h3>All about the people, no VC here.</h3>
+    <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. 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>
+    <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>
+    <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>
+      <a href="#" class="btn-main">Contribute to our cause</a>
+    </div>
+  </div>
+</section>

src/components/Vision/People/People.scss

@@ -0,0 +1,43 @@
+@import "../../../styles/mixins.scss";
+@import "../../../styles/vars.scss";
+
+#vision-people {
+  position: relative;
+  display: flex;
+  justify-content: flex-end;
+  align-items: center;
+  margin: 0 auto;
+  @include fluid-font-size(1.3125rem);
+  max-width: 88em;
+  min-height: 28em;
+
+  &::before {
+    content: "";
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    left: min(0rem, calc((100vw - 40rem) / 2));
+    width: 100%;
+    min-width: 40rem;
+    background-image: url("../../../assets/double-brand-bg.png");
+    background-position: 0;
+    background-repeat: no-repeat;
+    background-size: contain;
+    z-index: -1;
+  }
+
+  .feature-group {
+    max-width: 28em;
+    padding: 4.14em 0;
+    @include fluid-margin-lr;
+  }
+
+  @media screen and (max-width: 80rem) {
+    p {
+      background: rgba($color-blue-charcoal-2, 0.65);
+      border-radius: 0.5em;
+      padding: 0.3em 0.5em;
+      margin: -0.3em -0.5em;
+    }
+  }
+}

src/components/What/Astronaut/Astronaut.astro

@@ -10,7 +10,7 @@ import './Astronaut.scss';
       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. 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>
-      <a href="#" class="btn-main">Contribute to our cause</a>
+      <a href="/donate" class="btn-main">Donate</a>
     </div>
   </div>
 </section>

src/components/What/Astronaut/Astronaut.scss

@@ -5,7 +5,6 @@
   position: relative;
   display: flex;
   align-items: center;
-  margin-top: 5rem;
   min-height: 36.72em;
   @include fluid-font-size(1.3125rem);
   background-image: url("../../../assets/astronaut.png");

src/components/What/Building/Building.astro

@@ -0,0 +1,15 @@
+---
+import './Building.scss';
+---
+
+<section id="building" class="tilted-bg-r">
+  <div>
+    <div class="feature-group">
+      <h2>Community-Powered</h2>
+      <h3>Building a new world for your data</h3>
+      <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>
+</section>

src/components/What/Building/Building.scss

@@ -0,0 +1,50 @@
+@import "../../../styles/mixins.scss";
+@import "../../../styles/vars.scss";
+
+#building {
+
+  &::before {
+    bottom: -12%;
+  }
+
+  > div {
+    position: relative;
+    display: flex;
+    justify-content: flex-end;
+    align-items: center;
+    max-width: 88em;
+    min-height: 28em;
+    margin: 0 auto;
+    @include fluid-font-size(1.3125rem);
+
+    &::before {
+      content: "";
+      position: absolute;
+      top: 4%;
+      bottom: 0;
+      left: min(0rem, calc((100vw - 40rem) / 2));
+      width: 100%;
+      min-width: 40rem;
+      background-image: url("../../../assets/double-brand-bg.png");
+      background-position: 0;
+      background-repeat: no-repeat;
+      background-size: contain;
+      z-index: -1;
+    }
+  }
+
+  .feature-group {
+    max-width: 28em;
+    padding: 7em 0 5em;
+    @include fluid-margin-lr;
+  }
+
+  @media screen and (max-width: 80rem) {
+    p {
+      background: rgba($color-blue-charcoal, 0.65);
+      border-radius: 0.5em;
+      padding: 0.3em 0.5em;
+      margin: -0.3em -0.5em;
+    }
+  }
+}

src/components/What/Grid/Grid.scss

@@ -1,3 +1,4 @@
 #what-grid {
   padding-top: 5.5em;
+  padding-bottom: 4.5em;
 }

src/pages/vision.astro

@@ -1,12 +1,14 @@
 ---
 import Layout from '../layouts/Layout.astro';
 import Jumbotron from '../components/Vision/Jumbotron/Jumbotron.astro';
-import CommunityPower from '../components/Vision/CommunityPower/CommunityPower.astro';
+import Community from '../components/Vision/Community/Community.astro';
 import Grid from '../components/Vision/Grid/Grid.astro';
+import People from '../components/Vision/People/People.astro';
 ---
 
 <Layout view="vision" title="Vision - Lume Web">
   <Jumbotron />
-  <CommunityPower />
+  <Community />
   <Grid />
+  <People />
 </Layout>

src/pages/what-is-web3.astro

@@ -2,11 +2,13 @@
 import Layout from '../layouts/Layout.astro';
 import Jumbotron from '../components/What/Jumbotron/Jumbotron.astro';
 import Grid from '../components/What/Grid/Grid.astro';
+import Building from '../components/What/Building/Building.astro';
 import Astronaut from '../components/What/Astronaut/Astronaut.astro';
 ---
 
 <Layout view="what" title="What is Web3? - Lume Web">
   <Jumbotron />
   <Grid />
+  <Building />
   <Astronaut />
 </Layout>

src/styles/global.scss

@@ -20,7 +20,7 @@ body {
   display: flex;
   flex-direction: column;
   font-family: "JetBrains Mono", sans-serif;
-  background: $color-body-bg;
+  background: $color-blue-charcoal-2;
   color: $color-white;
   overflow-x: hidden;
   overflow-y: scroll;
@@ -133,10 +133,13 @@ main.donate {
     transition: background $transition-duration;
   }
 
+  p + p, ul + p {
+    margin-top: 0.78em;
+  }
+
   ul {
     list-style-type: disc;
     margin-left: 1.5em;
-    margin-bottom: 0.78em;
   }
 
   .btn-main {

src/styles/vars.scss

@@ -1,8 +1,7 @@
-$color-body-bg: #031418;
 $color-black: #000;
 $color-white: #fff;
 $color-blue-charcoal: #020e10;
-$color-blue-charcoal-2: #031518;
+$color-blue-charcoal-2: #031418;
 $color-aquamarine: #7afcbb;
 $color-cloud: #c7c7c7;
 $color-alto: #d9d9d9;