adopt design changes, fixes and improvements

package.json

@@ -2,6 +2,7 @@
   "name": "lume-web",
   "type": "module",
   "version": "0.0.1",
+  "private": true,
   "scripts": {
     "dev": "TAILWIND_MODE=watch astro dev",
     "start": "astro dev",
@@ -14,13 +15,10 @@
     "@astrojs/react": "^2.1.1",
     "@astrojs/tailwind": "^3.1.1",
     "@types/react": "^18.2.0",
-    "@types/react-dom": "^18.2.1",
     "astro": "^2.3.2",
-    "astro-icon": "^0.8.0",
     "autoprefixer": "^10.4.14",
     "qrcode": "^1.5.3",
     "react": "^18.2.0",
-    "react-dom": "^18.2.0",
     "sass": "^1.62.1",
     "tailwindcss": "^3.3.2",
     "typewriter-effect": "^2.19.0"

src/assets/icons/discord.svg

@@ -0,0 +1,3 @@
+<svg viewBox="0 0 127.14 96.36" xmlns="http://www.w3.org/2000/svg">
+  <path fill="currentcolor" d="M107.7,8.07A105.15,105.15,0,0,0,81.47,0a72.06,72.06,0,0,0-3.36,6.83A97.68,97.68,0,0,0,49,6.83,72.37,72.37,0,0,0,45.64,0,105.89,105.89,0,0,0,19.39,8.09C2.79,32.65-1.71,56.6.54,80.21h0A105.73,105.73,0,0,0,32.71,96.36,77.7,77.7,0,0,0,39.6,85.25a68.42,68.42,0,0,1-10.85-5.18c.91-.66,1.8-1.34,2.66-2a75.57,75.57,0,0,0,64.32,0c.87.71,1.76,1.39,2.66,2a68.68,68.68,0,0,1-10.87,5.19,77,77,0,0,0,6.89,11.1A105.25,105.25,0,0,0,126.6,80.22h0C129.24,52.84,122.09,29.11,107.7,8.07ZM42.45,65.69C36.18,65.69,31,60,31,53s5-12.74,11.43-12.74S54,46,53.89,53,48.84,65.69,42.45,65.69Zm42.24,0C78.41,65.69,73.25,60,73.25,53s5-12.74,11.44-12.74S96.23,46,96.12,53,91.08,65.69,84.69,65.69Z"/>
+</svg>

src/assets/icons/git.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 92 92">
+	<path style="stroke:none;fill-rule:nonzero;fill:currentColor;fill-opacity:1" d="M90.156 41.965 50.036 1.848a5.918 5.918 0 0 0-8.372 0l-8.328 8.332 10.566 10.566a7.03 7.03 0 0 1 7.23 1.684 7.034 7.034 0 0 1 1.669 7.277l10.187 10.184a7.028 7.028 0 0 1 7.278 1.672 7.04 7.04 0 0 1 0 9.957 7.05 7.05 0 0 1-9.965 0 7.044 7.044 0 0 1-1.528-7.66l-9.5-9.497V59.36a7.04 7.04 0 0 1 1.86 11.29 7.04 7.04 0 0 1-9.957 0 7.04 7.04 0 0 1 0-9.958 7.06 7.06 0 0 1 2.304-1.539V33.926a7.049 7.049 0 0 1-3.82-9.234L29.242 14.272 1.73 41.777a5.925 5.925 0 0 0 0 8.371L41.852 90.27a5.925 5.925 0 0 0 8.37 0l39.934-39.934a5.925 5.925 0 0 0 0-8.371"/>
+</svg>

src/assets/icons/github.svg

@@ -0,0 +1,3 @@
+<svg viewBox="0 0 98 96" xmlns="http://www.w3.org/2000/svg">
+  <path fill="currentcolor" 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"/>
+</svg>

src/assets/icons/twitter.svg

@@ -0,0 +1,3 @@
+<svg version="1.1" viewBox="0 0 400 400" xmlns="http://www.w3.org/2000/svg">
+  <path fill="currentcolor" d="M400,200c0,110.5-89.5,200-200,200S0,310.5,0,200S89.5,0,200,0S400,89.5,400,200z M163.4,305.5 c88.7,0,137.2-73.5,137.2-137.2c0-2.1,0-4.2-0.1-6.2c9.4-6.8,17.6-15.3,24.1-25c-8.6,3.8-17.9,6.4-27.7,7.6 c10-6,17.6-15.4,21.2-26.7c-9.3,5.5-19.6,9.5-30.6,11.7c-8.8-9.4-21.3-15.2-35.2-15.2c-26.6,0-48.2,21.6-48.2,48.2 c0,3.8,0.4,7.5,1.3,11c-40.1-2-75.6-21.2-99.4-50.4c-4.1,7.1-6.5,15.4-6.5,24.2c0,16.7,8.5,31.5,21.5,40.1c-7.9-0.2-15.3-2.4-21.8-6 c0,0.2,0,0.4,0,0.6c0,23.4,16.6,42.8,38.7,47.3c-4,1.1-8.3,1.7-12.7,1.7c-3.1,0-6.1-0.3-9.1-0.9c6.1,19.2,23.9,33.1,45,33.5 c-16.5,12.9-37.3,20.6-59.9,20.6c-3.9,0-7.7-0.2-11.5-0.7C110.8,297.5,136.2,305.5,163.4,305.5"/>
+</svg>

src/components/Donate/How/How.astro

@@ -2,16 +2,17 @@
 import './How.scss';
 ---
 
-<section id="how" class="tilted-bg-r">
+<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>
-        <div>
-            <a href="https://gitcoin.co/grants/4722/lume-web-web3-accessibility-freedom-and-education" class="btn-main">Gitcoin</a>
-        </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.
         </p>
+        <div>
+            <a href="https://gitcoin.co/grants/4722/lume-web-web3-accessibility-freedom-and-education" class="btn-main">Gitcoin</a>
+        </div>
     </div>
 </section>

src/components/Donate/How/How.scss

@@ -1,31 +1,47 @@
 @import "/src/styles/vars.scss";
 
 #how {
+  position: relative;
   display: flex;
   flex-direction: column;
   justify-content: center;
   margin-top: 8em;
   padding: 14em 7.5% 16em;
 
-  &::before {
+  .custom-bg {
-    background-image: url("/src/assets/donate-gfx-right.png");
+    position: absolute;
-    background-position: 85% 100%;
+    top: 0;
-    background-repeat: no-repeat;
+    right: -12.5%;
-    background-size: contain;
+    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;
   }
-    p{
-        font-size: 1.9em;
-        font-style: italic;
-        padding-top: 1em;
-    }
 
   @media screen and (max-width: 80rem) {
     p {
-      background: rgba($color-blue-charcoal, 0.65);
+      background: rgba($color-blue-charcoal, 0.75);
       border-radius: 0.5em;
       padding: 0.3em 0.5em;
       margin: -0.3em -0.5em;

src/components/Donate/Methods/Methods.astro

@@ -46,6 +46,9 @@ await addCurrency('algorand', 'Algorand (ALGO)', '3QBE5TZ63TF5W7V2QRJWRB72M7INQL
           </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">

src/components/Donate/Methods/Methods.scss

@@ -10,14 +10,12 @@
     font-family: $font-family-jaldi;
 
     h2 {
-        margin-bottom: 1em;
+        margin: 1.25em 0 1em;
         @include fluid-font-size(2.8125rem);
         line-height: 122%;
-    }
 
-    > div {
+        &:first-child {
-        p {
+            margin-top: 0;
-            font-style: italic;
         }
     }
 
@@ -140,6 +138,7 @@
     p {
         margin-top: 1em;
         @include fluid-font-size(1.25rem);
+        font-style: italic;
         line-height: 157%;
         color: $color-cloud;
     }

src/components/Donate/Why/Why.scss

@@ -17,7 +17,7 @@
     left: min(0em, calc((100% - 92.2em) / 2));
     width: calc(100% - 64em - 7.5%);
     min-width: 92.2em;
-    background-image: url("/src/assets/donate-why-bg.png");
+    background-image: url("/src/assets/single-brand-bg-2.png");
     background-position: 50% 0;
     background-repeat: no-repeat;
     background-size: contain;
@@ -32,7 +32,7 @@
 
   @media screen and (max-width: 80rem) {
     ul, p {
-      background: rgba($color-blue-charcoal-2, 0.65);
+      background: rgba($color-blue-charcoal-2, 0.75);
     }
 
     ul {

src/components/Home/CTO/CTO.astro

@@ -1,6 +1,6 @@
 ---
 import './CTO.scss';
-import avatar from '/src/assets/cto-avatar.webp';
+import avatar from '/src/assets/cto-avatar.png';
 ---
 
 <section id="cto">

src/components/Home/CTO/CTO.scss

@@ -18,7 +18,7 @@
     left: min(0em, calc((100% - 95em) / 2));
     width: calc(100% - 64em - 7.5%);
     min-width: 95em;
-    background-image: url("/src/assets/geometric-bg.webp");
+    background-image: url("/src/assets/single-brand-bg-1.png");
     background-position: 50% 100%;
     background-repeat: no-repeat;
     background-size: contain;
@@ -53,7 +53,7 @@
 
   @media screen and (max-width: 80rem) {
     p, .bio div {
-      background: rgba($color-blue-charcoal-2, 0.65);
+      background: rgba($color-blue-charcoal-2, 0.75);
       border-radius: 0 0.5em 0.5em 0;
       padding: 0.3em 0.5em;
       margin: -0.3em -0.5em;

src/components/Home/PoweredBy/PoweredBy.astro

@@ -1,9 +1,9 @@
 ---
 import './PoweredBy.scss';
 
-import svgSia from '/src/assets/sia.svg?raw';
+import svgSia from '/src/assets/icons/sia.svg?raw';
-import svgHns from '/src/assets/hns.svg?raw';
+import svgHns from '/src/assets/icons/hns.svg?raw';
-import svgOsi from '/src/assets/osi.svg?raw';
+import svgOsi from '/src/assets/icons/osi.svg?raw';
 ---
 
 <section id="powered-by">

src/components/Home/Socials/Socials.astro

@@ -1,31 +1,26 @@
 ---
 import './Socials.scss';
+
+import svgGit from '/src/assets/icons/git.svg?raw';
+import svgGithub from '/src/assets/icons/github.svg?raw';
+import svgDiscord from '/src/assets/icons/discord.svg?raw';
+import svgTwitter from '/src/assets/icons/twitter.svg?raw';
 ---
 
 <section id="socials">
     <h2>Get in touch</h2>
     <div>
         <a href="https://git.lumeweb.com" title="Git" class="git-logo">
-
+            <Fragment set:html={svgGit} />
-            <svg xmlns="http://www.w3.org/2000/svg" width="92pt" height="92pt" viewBox="0 0 92 92"><defs><clipPath id="a"><path d="M0 .113h91.887V92H0Zm0 0"/></clipPath></defs><g clip-path="url(#a)"><path style="stroke:none;fill-rule:nonzero;fill:#fff;fill-opacity:1" d="M90.156 41.965 50.036 1.848a5.918 5.918 0 0 0-8.372 0l-8.328 8.332 10.566 10.566a7.03 7.03 0 0 1 7.23 1.684 7.034 7.034 0 0 1 1.669 7.277l10.187 10.184a7.028 7.028 0 0 1 7.278 1.672 7.04 7.04 0 0 1 0 9.957 7.05 7.05 0 0 1-9.965 0 7.044 7.044 0 0 1-1.528-7.66l-9.5-9.497V59.36a7.04 7.04 0 0 1 1.86 11.29 7.04 7.04 0 0 1-9.957 0 7.04 7.04 0 0 1 0-9.958 7.06 7.06 0 0 1 2.304-1.539V33.926a7.049 7.049 0 0 1-3.82-9.234L29.242 14.272 1.73 41.777a5.925 5.925 0 0 0 0 8.371L41.852 90.27a5.925 5.925 0 0 0 8.37 0l39.934-39.934a5.925 5.925 0 0 0 0-8.371"/></g></svg>
         </a>
         <a href="https://github.com/LumeWeb" title="GitHub" class="github-logo">
-            <svg viewBox="0 0 98 96" xmlns="http://www.w3.org/2000/svg">
+            <Fragment set:html={svgGithub} />
-                <path fill="currentcolor" 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"/>
-            </svg>
         </a>
         <a href="https://discord.gg/qpC8ADp3rS" title="Discord" class="discord-logo">
-            <svg viewBox="0 0 127.14 96.36" xmlns="http://www.w3.org/2000/svg">
+            <Fragment set:html={svgDiscord} />
-                <path fill="currentcolor"
-                      d="M107.7,8.07A105.15,105.15,0,0,0,81.47,0a72.06,72.06,0,0,0-3.36,6.83A97.68,97.68,0,0,0,49,6.83,72.37,72.37,0,0,0,45.64,0,105.89,105.89,0,0,0,19.39,8.09C2.79,32.65-1.71,56.6.54,80.21h0A105.73,105.73,0,0,0,32.71,96.36,77.7,77.7,0,0,0,39.6,85.25a68.42,68.42,0,0,1-10.85-5.18c.91-.66,1.8-1.34,2.66-2a75.57,75.57,0,0,0,64.32,0c.87.71,1.76,1.39,2.66,2a68.68,68.68,0,0,1-10.87,5.19,77,77,0,0,0,6.89,11.1A105.25,105.25,0,0,0,126.6,80.22h0C129.24,52.84,122.09,29.11,107.7,8.07ZM42.45,65.69C36.18,65.69,31,60,31,53s5-12.74,11.43-12.74S54,46,53.89,53,48.84,65.69,42.45,65.69Zm42.24,0C78.41,65.69,73.25,60,73.25,53s5-12.74,11.44-12.74S96.23,46,96.12,53,91.08,65.69,84.69,65.69Z"/>
-            </svg>
         </a>
         <a href="https://twitter.com/lumeweb3" title="Twitter" class="twitter-logo">
-            <svg version="1.1" viewBox="0 0 400 400" xmlns="http://www.w3.org/2000/svg">
+            <Fragment set:html={svgTwitter} />
-                <path fill="currentcolor"
-                      d="M400,200c0,110.5-89.5,200-200,200S0,310.5,0,200S89.5,0,200,0S400,89.5,400,200z M163.4,305.5 c88.7,0,137.2-73.5,137.2-137.2c0-2.1,0-4.2-0.1-6.2c9.4-6.8,17.6-15.3,24.1-25c-8.6,3.8-17.9,6.4-27.7,7.6 c10-6,17.6-15.4,21.2-26.7c-9.3,5.5-19.6,9.5-30.6,11.7c-8.8-9.4-21.3-15.2-35.2-15.2c-26.6,0-48.2,21.6-48.2,48.2 c0,3.8,0.4,7.5,1.3,11c-40.1-2-75.6-21.2-99.4-50.4c-4.1,7.1-6.5,15.4-6.5,24.2c0,16.7,8.5,31.5,21.5,40.1c-7.9-0.2-15.3-2.4-21.8-6 c0,0.2,0,0.4,0,0.6c0,23.4,16.6,42.8,38.7,47.3c-4,1.1-8.3,1.7-12.7,1.7c-3.1,0-6.1-0.3-9.1-0.9c6.1,19.2,23.9,33.1,45,33.5 c-16.5,12.9-37.3,20.6-59.9,20.6c-3.9,0-7.7-0.2-11.5-0.7C110.8,297.5,136.2,305.5,163.4,305.5"/>
-            </svg>
         </a>
     </div>
 </section>

src/components/Home/Socials/Socials.scss

@@ -47,8 +47,4 @@
     .twitter-logo svg {
         @include fluid-width(3.5rem);
     }
-
-    .facebook-logo svg {
-        @include fluid-width(3.5rem);
-    }
 }

src/components/Home/Vision/Vision.scss

@@ -27,10 +27,14 @@
 
   @media screen and (max-width: 80rem) {
     p {
-      background: rgba($color-blue-charcoal-2, 0.65);
+      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;
+    }
   }
 }

src/components/Home/Web3/Web3.scss

@@ -17,7 +17,7 @@
     height: 81.7em;
     max-width: 63.7em;
     margin: -40em 0 0;
-    background-image: url("/src/assets/img-left.webp");
+    background-image: url("/src/assets/home-gfx-left.png");
     background-position: left;
     background-repeat: no-repeat;
     background-size: contain;
@@ -35,11 +35,15 @@
 
     @media screen and (max-width: 80rem) {
       p {
-        background: rgba($color-blue-charcoal, 0.65);
+        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;
+      }
     }
   }
 }

src/components/Layout/JoinCommunity/JoinCommunity.astro

@@ -1,5 +1,10 @@
 ---
 import './JoinCommunity.scss';
+
+import svgGit from '/src/assets/icons/git.svg?raw';
+import svgGithub from '/src/assets/icons/github.svg?raw';
+import svgDiscord from '/src/assets/icons/discord.svg?raw';
+import svgTwitter from '/src/assets/icons/twitter.svg?raw';
 ---
 
 <section id="join-community">
@@ -12,30 +17,23 @@ import './JoinCommunity.scss';
     </p>
   </div>
     <div>
-        <a href="#" title="GitHub" class="git-logo">
+      <a href="https://git.lumeweb.com" title="Git" class="git-logo">
-
+        <Fragment set:html={svgGit} />
-            <svg xmlns="http://www.w3.org/2000/svg" width="92pt" height="92pt" viewBox="0 0 92 92"><defs><clipPath id="a"><path d="M0 .113h91.887V92H0Zm0 0"/></clipPath></defs><g clip-path="url(#a)"><path style="stroke:none;fill-rule:nonzero;fill:#100f0d;fill-opacity:1" d="M90.156 41.965 50.036 1.848a5.913 5.913 0 0 0-8.368 0l-8.332 8.332 10.566 10.566a7.03 7.03 0 0 1 7.23 1.684 7.043 7.043 0 0 1 1.673 7.277l10.183 10.184a7.026 7.026 0 0 1 7.278 1.672 7.04 7.04 0 0 1 0 9.957 7.045 7.045 0 0 1-9.961 0 7.038 7.038 0 0 1-1.532-7.66l-9.5-9.497V59.36a7.04 7.04 0 0 1 1.86 11.29 7.04 7.04 0 0 1-9.957 0 7.04 7.04 0 0 1 0-9.958 7.034 7.034 0 0 1 2.308-1.539V33.926a7.001 7.001 0 0 1-2.308-1.535 7.049 7.049 0 0 1-1.516-7.7L29.242 14.273 1.734 41.777a5.918 5.918 0 0 0 0 8.371L41.855 90.27a5.92 5.92 0 0 0 8.368 0l39.933-39.934a5.925 5.925 0 0 0 0-8.371"/></g></svg>
+      </a>
-        </a>
     </div>
   <div>
-    <a href="#" title="GitHub" class="github-logo">
+    <a href="https://github.com/LumeWeb" title="GitHub" class="github-logo">
-      <svg viewBox="0 0 98 96" xmlns="http://www.w3.org/2000/svg">
+      <Fragment set:html={svgGithub} />
-        <path fill="currentcolor" 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"/>
-      </svg>
     </a>
   </div>
   <div>
     <a href="#" title="Discord" class="discord-logo">
-      <svg viewBox="0 0 127.14 96.36" xmlns="http://www.w3.org/2000/svg">
+      <Fragment set:html={svgDiscord} />
-        <path fill="currentcolor" d="M107.7,8.07A105.15,105.15,0,0,0,81.47,0a72.06,72.06,0,0,0-3.36,6.83A97.68,97.68,0,0,0,49,6.83,72.37,72.37,0,0,0,45.64,0,105.89,105.89,0,0,0,19.39,8.09C2.79,32.65-1.71,56.6.54,80.21h0A105.73,105.73,0,0,0,32.71,96.36,77.7,77.7,0,0,0,39.6,85.25a68.42,68.42,0,0,1-10.85-5.18c.91-.66,1.8-1.34,2.66-2a75.57,75.57,0,0,0,64.32,0c.87.71,1.76,1.39,2.66,2a68.68,68.68,0,0,1-10.87,5.19,77,77,0,0,0,6.89,11.1A105.25,105.25,0,0,0,126.6,80.22h0C129.24,52.84,122.09,29.11,107.7,8.07ZM42.45,65.69C36.18,65.69,31,60,31,53s5-12.74,11.43-12.74S54,46,53.89,53,48.84,65.69,42.45,65.69Zm42.24,0C78.41,65.69,73.25,60,73.25,53s5-12.74,11.44-12.74S96.23,46,96.12,53,91.08,65.69,84.69,65.69Z"/>
-      </svg>
     </a>
   </div>
   <div>
     <a href="#" title="Twitter" class="twitter-logo">
-      <svg version="1.1" viewBox="0 0 400 400" xmlns="http://www.w3.org/2000/svg">
+      <Fragment set:html={svgTwitter} />
-        <path fill="currentcolor" d="M400,200c0,110.5-89.5,200-200,200S0,310.5,0,200S89.5,0,200,0S400,89.5,400,200z M163.4,305.5 c88.7,0,137.2-73.5,137.2-137.2c0-2.1,0-4.2-0.1-6.2c9.4-6.8,17.6-15.3,24.1-25c-8.6,3.8-17.9,6.4-27.7,7.6 c10-6,17.6-15.4,21.2-26.7c-9.3,5.5-19.6,9.5-30.6,11.7c-8.8-9.4-21.3-15.2-35.2-15.2c-26.6,0-48.2,21.6-48.2,48.2 c0,3.8,0.4,7.5,1.3,11c-40.1-2-75.6-21.2-99.4-50.4c-4.1,7.1-6.5,15.4-6.5,24.2c0,16.7,8.5,31.5,21.5,40.1c-7.9-0.2-15.3-2.4-21.8-6 c0,0.2,0,0.4,0,0.6c0,23.4,16.6,42.8,38.7,47.3c-4,1.1-8.3,1.7-12.7,1.7c-3.1,0-6.1-0.3-9.1-0.9c6.1,19.2,23.9,33.1,45,33.5 c-16.5,12.9-37.3,20.6-59.9,20.6c-3.9,0-7.7-0.2-11.5-0.7C110.8,297.5,136.2,305.5,163.4,305.5"/>
-      </svg>
     </a>
   </div>
 </section>

src/components/Layout/JoinCommunity/JoinCommunity.scss

@@ -77,8 +77,4 @@
     .twitter-logo svg {
         @include fluid-width(3.625rem);
     }
-
-    .facebook-logo svg {
-        @include fluid-width(3.625rem);
-    }
 }

src/components/Layout/Navbar/Navbar.scss

@@ -25,7 +25,7 @@ menu {
   li > a {
     display: block;
     padding: 0.55em 0.9em;
-    @include fluid-font-size(1.375rem);
+    @include fluid-font-size(1.25rem);
     text-decoration: underline;
     text-decoration-color: transparent;
     transition: text-decoration-color $transition-duration;
@@ -33,11 +33,15 @@ menu {
     &.current, &:hover, &:active {
       text-decoration-color: inherit;
     }
+
+    &.current {
+      font-weight: 700;
+    }
   }
 
   .download-btn {
     margin-left: 0.9em;
-    @include fluid-font-size(1.375rem);
+    @include fluid-font-size(1.25rem);
     text-decoration: none;
   }
 }

src/components/Vision/Community/Community.scss

@@ -1,27 +0,0 @@
-@import "/src/styles/vars.scss";
-
-#community {
-  position: relative;
-  background-image: url("/src/assets/community-power-bg.png");
-  background-size: max(157.5em, 100%);
-  background-position: right;
-  padding-top: max(61.4525em, 39.0175%);
-
-  .feature-group {
-    position: absolute;
-    top: 0;
-    bottom: 0;
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-    max-width: 64em;
-    margin: 0 7.5%;
-  }
-
-  p {
-    background: rgba($color-blue-charcoal, 0.65);
-    border-radius: 0.5em;
-    padding: 0.3em 0.5em;
-    margin: -0.3em -0.5em;
-  }
-}

src/components/Vision/NoVc/NoVc.astro

@@ -1,20 +1,24 @@
 ---
-import './People.scss';
+import './NoVc.scss';
 ---
 
-<section id="people">
+<section id="no-vc">
   <div class="feature-group">
     <h2>Community-Powered</h2>
     <h3>All about the people, no VC here.</h3>
       <p>
           Our vision is completely grass roots, and FOSS. The user needs to have a voice and be in control of their web. Due to our principles, we have not taken any VC money that might be able to strap a jetpack to the project, because the output would compromise the spirit and goals we are setting out to achieve.
-          <br /><br />
+      </p>
+      <p>
           We are <i>very</i> aware of the projects that have come before us and whom have made similar promises. We are also doing our best to learn from their mistakes and failures.
-          <br /><br />
+      </p>
+      <p>
           The key difference that we see big picture is you need both an <b>economy</b> and <b>decentralized/P2P</b> networks, because running the internet is not free, and someone <i>always</i> has to foot the bill.
-          <br /><br />
+      </p>
+      <p>
           Blockchain <b><i>finally</i></b> makes this possible.
-          <br /><br />
+      </p>
+      <p>
           Having a pragmatic view on mass adoption without compromising on principles is needed to make progress on a user-owned web.
       </p>
     <div>

src/components/Vision/NoVc/NoVc.scss

@@ -1,6 +1,6 @@
 @import "/src/styles/vars.scss";
 
-#people {
+#no-vc {
   position: relative;
   display: flex;
   justify-content: flex-end;
@@ -32,10 +32,14 @@
 
   @media screen and (max-width: 80rem) {
     p {
-      background: rgba($color-blue-charcoal-2, 0.65);
+      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;
+    }
   }
 }

src/components/Vision/Unify/Unify.astro

@@ -1,8 +1,9 @@
 ---
-import './Community.scss';
+import './Unify.scss';
 ---
 
-<section id="community">
+<section id="unify">
+    <div class="custom-bg"></div>
     <div class="feature-group">
         <h2>Community-Powered</h2>
         <h3>Unifying all the Networks</h3>
@@ -10,10 +11,12 @@ import './Community.scss';
             There are many, <i>many</i> "crypto", "defi", "web3", "P2P", and "dWeb" projects that have all taken hundreds
             of different approaches to innovate. However, they all have the same broad ethos in common, and they all
             need an easy means to access them in one place, but in a censorship-resistant way.
-            <br/><br/>
+        </p>
+        <p>
             We have a very ambitious vision, and this requires all "tribes" to work together enough for the benefit of
             the end user.
-            <br/><br/>
+        </p>
+        <p>
             Below are some of the ideas we are aiming for, and some we would like to tackle eventually.
         </p>
     </div>

src/components/Vision/Unify/Unify.scss

@@ -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;
+  }
+}

src/components/What/Astronaut/Astronaut.scss

@@ -1,35 +0,0 @@
-@import "/src/styles/vars.scss";
-
-#astronaut {
-  position: relative;
-  display: flex;
-  align-items: center;
-  min-height: 71.1em;
-  background: $color-blue-charcoal;
-
-  &::before {
-    content: "";
-    position: absolute;
-    top: 0;
-    right: min(0em, calc(100% - 100.3em) / 2);
-    bottom: 0;
-    width: 100.3em;
-    background-image: url("/src/assets/astronaut.png");
-    background-position: 100%;
-    background-repeat: no-repeat;
-    background-size: contain;
-  }
-
-  &::after {
-    content: "";
-    position: absolute;
-    inset: 0;
-    background: rgba(0, 0, 0, 0.8);
-  }
-
-  .feature-group {
-    max-width: 64em;
-    margin: 6em 7.5%;
-    z-index: 1;
-  }
-}

src/components/What/Building/Building.scss

@@ -1,46 +0,0 @@
-@import "/src/styles/vars.scss";
-
-#building {
-  &::before {
-    bottom: -50%;
-  }
-
-  > div {
-    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: 2.3em;
-      bottom: -2.3em;
-      left: min(0em, calc((100% - 77.56em) / 2));
-      width: calc(100% - 64em - 7.5%);
-      min-width: 77.56em;
-      background-image: url("/src/assets/double-brand-bg.png");
-      background-position: 50%;
-      background-repeat: no-repeat;
-      background-size: contain;
-      z-index: -1;
-    }
-  }
-
-  .feature-group {
-    max-width: 64em;
-    margin: 7em 7.5% 5em;
-  }
-
-  @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/Contribute/Contribute.astro

@@ -1,29 +1,32 @@
 ---
-import './Astronaut.scss';
+import './Contribute.scss';
 import mario from "/src/assets/mario-level-up.gif"
 ---
 
-<section id="astronaut">
+<section id="contribute">
     <div class="feature-group">
         <h2>Web3 is Community</h2>
         <h3>Re-defining Web3, for the users</h3>
         <p>
             Web3 was a term first defined by Gavin Wood when the Ethereum network was starting out. He defined it as a
             "decentralized online ecosystem based on blockchain".
-<br /><br />
+        </p>
+        <p>
             However, we view it as much more than that, and definitely more than access to DeFi. We see a ton of more
             potential to what Web3 as an ideal can evolve to, and are setting out to make it a reality.
-            <br /><br />
-            To those that see Web3 as DeFi, we ask this: Do you go on your web browser to access TradingView or other market tools as your homepage, or do you go check your social media, email, and news sites, as <i>well</i> as your money?
-
-            <br /><br />
-            Blockchain itself is more than just <i>money</i>, and so is Web3, and by extension P2P networks.
-
-            <br /><br />
-
-            So help us in our goals to level-up Web3
         </p>
-        <img src={mario.src} alt="Mario Level Up"/>
+        <p>
+            To those that see Web3 as DeFi, we ask this: Do you go on your web browser to access TradingView or other market tools as your homepage, or do you go check your social media, email, and news sites, as <i>well</i> as your money?
+        </p>
+        <p>
+            Blockchain itself is more than just <i>money</i>, and so is Web3, and by extension P2P networks.
+        </p>
+        <p>
+            So help us in our goals to level-up Web3.
+        </p>
+        <div class="mario">
+            <img src={mario.src} alt="Mario Level Up"/>
+        </div>
         <div>
             <a href="/donate" class="btn-main">Donate</a>
         </div>

src/components/What/Contribute/Contribute.scss

@@ -0,0 +1,35 @@
+@import "/src/styles/vars.scss";
+
+#contribute {
+  position: relative;
+  display: flex;
+  align-items: center;
+  min-height: 71.1em;
+  background: $color-blue-charcoal;
+
+  &::before {
+    content: "";
+    position: absolute;
+    inset: 0;
+    background-image: url("/src/assets/contribute-bg.png");
+    background-position: 50%;
+    background-size: cover;
+  }
+
+  &::after {
+    content: "";
+    position: absolute;
+    inset: 0;
+    background: rgba(0, 0, 0, 0.75);
+  }
+
+  .feature-group {
+    max-width: 72em;
+    margin: 9em 7.5%;
+    z-index: 1;
+  }
+
+  .mario {
+    margin-top: 2.5em;
+  }
+}

src/components/What/Grid/Grid.astro

@@ -5,33 +5,24 @@ import './Grid.scss';
 <section id="grid" class="feature-grid">
     <div>
         <h3>Access the markets, aka DeFi</h3>
-        <p>Web3 commonly get mixed up with DeFi, however, while you should be able to access any decentralized website
+        <p>Web3 commonly get mixed up with DeFi, however, while you should be able to access any decentralized website or network, access to DeFi to manage your money is critical as well.</p>
-            or network, access to DeFi to manage your money is critical as well</p>
     </div>
     <div>
         <h3>Access any decentralized or P2P network</h3>
-        <p>The basics of Web3 is the sum of all the open networks and ecosystems. You should be able to access and visit
+        <p>The basics of Web3 is the sum of all the open networks and ecosystems. You should be able to access and visit any of these places.</p>
-            any of these places.
+        <p>You can compare this to accessing things on Google, Facebook, Apple, or other networks/platforms that are generally walled gardens in the current web system.</p>
-
-            <br/><br/>You can compare this to accessing things on Google, Facebook, Apple, or other networks/platforms
-            that are
-            generally walled gardens in the current web system
-        </p>
     </div>
     <div>
         <h3>Publish Freely</h3>
-        <p>A core tenant of Web3 is censorship-resistance. You should be able to freely post controversial (or even
+        <p>A core tenant of Web3 is censorship-resistance. You should be able to freely post controversial (or even things others just don't want to hear) information, such as news, blogging, or video. You should be allowed to openly debate, educate, inform, or entertain without getting "de-platformed".</p>
-            things others just don't want to hear) information, such as news, blogging, or video. You should be allowed
-            to openly debate, educate, inform, or entertain without getting "de-platformed".</p>
     </div>
     <div>
         <h3>Socialize and Discover Freely</h3>
-        <p>While you have the ability to post, you should <i>also</i> have the ability to <i>read</i></p>
+        <p>While you have the ability to post, you should <i>also</i> have the ability to <i>read</i>.</p>
     </div>
     <div>
         <h3>Own your web. Own your identity.</h3>
-        <p>You should be able to have your private data <b>be</b> and <b>stay</b> private unless you choose otherwise. This is achieved with your online web3 account, which serves as your identity and means of encrypting everything you do.
+        <p>You should be able to have your private data <b>be</b> and <b>stay</b> private unless you choose otherwise. This is achieved with your online web3 account, which serves as your identity and means of encrypting everything you do.</p>
-
+        <p>If you want to share you can, but your data is yours, no one else's.</p>
-            <br/><br/>If you want to share you can, but your data is yours, no one else's.</p>
     </div>
 </section>

src/components/What/Grid/Grid.scss

@@ -1,3 +1,3 @@
 #grid {
-  padding-bottom: 4.5em;
+  margin-bottom: 1.2em;
 }

src/components/What/NewWorld/NewWorld.astro

@@ -1,10 +1,11 @@
 ---
-import './Building.scss';
+import './NewWorld.scss';
 ---
 
-<section id="building" class="tilted-bg-r">
+<section id="new-world">
     <div>
         <div class="feature-group">
+            <h2>Community-Powered</h2>
             <h3>Your Web, Your Rules</h3>
             <p>
                 In summary, Web3 is about what you want to do, post, read, play, chat, or interact without others saying

src/components/What/NewWorld/NewWorld.scss

@@ -0,0 +1,28 @@
+@import "/src/styles/vars.scss";
+
+#new-world {
+  > div {
+    position: relative;
+    display: flex;
+    justify-content: flex-end;
+    align-items: center;
+    max-width: 185.6em;
+    min-height: 75em;
+    margin: 0 auto;
+
+    &::before {
+      content: "";
+      position: absolute;
+      inset: 0;
+      background-image: url("/src/assets/new-world-bg.png");
+      background-position: 50%;
+      background-size: cover;
+      z-index: -1;
+    }
+  }
+
+  .feature-group {
+    max-width: 64em;
+    margin: 9em 7.5%;
+  }
+}

src/pages/vision.astro

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

src/pages/what-is-web3.astro

@@ -2,13 +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 NewWorld from '../components/What/NewWorld/NewWorld.astro';
-import Astronaut from '../components/What/Astronaut/Astronaut.astro';
+import Contribute from '../components/What/Contribute/Contribute.astro';
 ---
 
 <Layout view="what" title="What is Web3? - Lume Web">
   <Jumbotron />
   <Grid />
-  <Building />
+  <NewWorld />
-  <Astronaut />
+  <Contribute />
 </Layout>

src/styles/global.scss

@@ -70,19 +70,19 @@ a, button {
 }
 
 .btn-main {
-    display: inline-block;
+  display: inline-block;
-    padding: 0.5em 0.8em;
+  padding: 0.5em 0.8em;
-    color: $color-black;
+  color: $color-black;
-    background: $color-aquamarine;
+  background: $color-aquamarine;
-    border: 0.05em solid $color-aquamarine;
+  border: 0.05em solid $color-aquamarine;
-    border-radius: 0.25em;
+  border-radius: 0.25em;
-    transition: color $transition-duration, background $transition-duration;
+  transition: color $transition-duration, background $transition-duration;
-    white-space: nowrap;
+  white-space: nowrap;
 
-    &:hover {
+  &:hover {
-        color: $color-white;
+    color: $color-white;
-        background: $color-blue-charcoal;
+    background: $color-blue-charcoal;
-    }
+  }
 }
 
 .feature-group {
@@ -106,7 +106,7 @@ a, button {
   }
 
   p, ul {
-    @include fluid-font-size(1.5rem);
+    @include fluid-font-size(1.375rem);
     font-family: $font-family-jaldi;
     line-height: 148%;
     color: $color-cloud;
@@ -149,7 +149,7 @@ a, button {
     display: flex;
     flex-direction: column;
     justify-content: center;
-    padding: 2.95em 1.95em;
+    padding: 2.5em 2em;
     background: $color-blue-charcoal;
     border: 0.05em solid transparent;
     border-radius: 0.5em;
@@ -218,12 +218,12 @@ main.vision {
   &::before {
     content: "";
     position: absolute;
-    top: -1em;
+    top: -0.5em;
     left: 50%;
-    width: 103.1em;
+    width: 132.9em;
-    height: 73.3em;
+    height: 94.63334em;
     transform: translate(-50%, 0);
-    background: url("/src/assets/vision-bg.png");
+    background: url("/src/assets/main-vision-bg.png");
     background-size: contain;
     z-index: -1;
   }
@@ -237,7 +237,7 @@ main.what {
     left: 50%;
     width: 151.3em;
     height: 122.4em;
-    background: url("/src/assets/what-bg.png");
+    background: url("/src/assets/main-what-bg.png");
     background-size: contain;
     transform: translate(-50%, 0);
     z-index: -1;
@@ -252,7 +252,7 @@ main.donate {
     left: 50%;
     width: 144em;
     height: 93.3em;
-    background: url("/src/assets/donate-bg.png");
+    background: url("/src/assets/main-donate-bg.png");
     background-size: contain;
     transform: translate(-50%, 0);
     z-index: -1;