home page rework complete, continue work on further components

src/components/Footer/Footer.scss

@@ -1,4 +1,5 @@
 @import "../../styles/mixins.scss";
+@import "../../styles/colors.scss";
 
 footer {
   display: flex;
@@ -6,8 +7,9 @@ footer {
   padding-top: 3.16%;
   padding-bottom: 4.61%;
   @include fluid-padding-lr;
+  font-family: var(--font-family-jaldi);
   @include fluid-font-size(1.3125rem);
-  background: var(--blue-charcoal);
+  background: $body-bg-darker;
 
   > div {
     flex-basis: 0;
@@ -36,7 +38,6 @@ footer {
   }
 
   li {
-    font-family: var(--font-family-jaldi);
     line-height: 138%;
     color: var(--cloud);
     list-style-type: none;
@@ -52,7 +53,6 @@ footer {
 
 .footer-contact {
   margin: auto 0;
-  font-family: var(--font-family-jaldi);
   color: var(--cloud);
 
   a {
@@ -71,9 +71,10 @@ footer {
 
 .footer-phrase {
   margin: auto 0 0;
-  color: var(--aquamarine);
+  font-family: var(--font-family-jetbrains-mono);
   font-weight: bold;
   line-height: 133%;
+  color: var(--aquamarine);
 }
 
 @media screen and (width >= 48rem) and (width < 64rem) {

src/components/Home/CTO/CTO.astro

@@ -1,37 +1,21 @@
 ---
-import "./CTOStyles.css";
+import './CTO.scss';
+import ctoAvatar from '../../../assets/cto-avatar.webp';
 ---
 
-<div class="cto-container w-full transition-[0.5s];">
+<section id="home-cto">
-    <div class="cto-geometric-bg">
+  <div class="feature-group">
-        <div class="cto-shadow w-full transition-[0.5s] rounded-[72.5px];">
+    <h2>Community-Powered</h2>
-            <span id="cto"></span>
+    <h3>Building a new world for your data</h3>
-            <div class="w-full transition-[0.5s] rounded-[72.5px];">
+    <p>
-                <h2
+      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.
-                    class="text-[calc(15px_+_(25_-_10)_*_((100vw_-_300px)_/_(1600_-_300)))] text-[color:var(--aquamarine)] uppercase font-bold"
+    </p>
-                >
+    <div class="bio">
-                    community-powered
+      <img src={ctoAvatar.src} />
-                </h2>
+      <div>
-                <h3
+        <strong>Derrick Hammer</strong><br />
-                    class="left meme-bp text-[calc(30px_+_(45_-_30)_*_((100vw_-_300px)_/_(1600_-_300)))] min-w-[75vw] z-[999] mt-[0.5em]"
+        CTO
-                >
+      </div>
-                    Building a new world <wbr /> for your data
-                </h3>
-                <h4
-                    class="left rounded-[15px] text-[calc(15px_+_(21_-_15)_*_((100vw_-_300px)_/_(1600_-_300)))] text-[color:var(--cloud)] text-[length:var(--font-size-m)] font-normal not-italic max-w-[550px] leading-[35px] mt-[0.5em]"
-                >
-                    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.
-                </h4>
-                <div class="cto-mini-bio">
-                    <div class="cto-info">
-                        <h5>Derrick Hammer</h5>
-                        <h6>CTO</h6>
-                    </div>
-                </div>
-            </div>
-        </div>
     </div>
-</div>
+  </div>
+</section>

src/components/Home/CTO/CTO.scss

@@ -0,0 +1,45 @@
+@import "../../../styles/colors.scss";
+@import "../../../styles/mixins.scss";
+
+#home-cto {
+  min-height: 28em;
+  @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;
+    max-width: 28em;
+    padding: 3.14em 0;
+  }
+
+  .bio {
+    display: flex;
+    align-items: center;
+    margin-top: 1.57em;
+    gap: 1.33em;
+    font-family: var(--font-family-jaldi);
+    color: var(--cloud);
+
+    img {
+        @include fluid-width-height(5.875rem, 5.875rem);
+    }
+
+    strong {
+        @include fluid-font-size(1.625rem);
+        line-height: 133%;
+        color: var(--white);
+    }
+  }
+
+  @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/CTO/CTOStyles.css

@@ -1,88 +0,0 @@
-.cto-geometric-bg {
-    background-image: url('../../../assets/geometric-bg.webp');
-    background-position: 75vh -2vh;
-    background-size: contain;
-    background-repeat: no-repeat;
-    position: relative;
-    height: 588px;
-    width: 100%;
-    transition: 0.5s;
-}
-
-.cto-mini-bio {
-    height: 96px;
-    width: 100%;
-    object-fit: contain;
-    display: inline-flex;
-    justify-content: center;
-    flex-direction: column;
-    background-repeat: no-repeat;
-    background-image: url('../../../assets/cto-avatar.webp');
-    margin-top: 3vh;
-    z-index: 999 !important;
-}
-
-.cto-info {
-    margin-left: 7em;
-    transition: 0.5s;
-}
-
-.cto-translucent {
-    background-color: #020e10ac;
-    border-radius: 15px;
-    transition: 0.5s;
-}
-
-@media screen and (width >0px) and (width <=600px) {
-    .cto-container {
-        background-position: 100px 50px;
-        background-size: cover;
-        background-repeat: no-repeat;
-        background-origin: content-box;
-        transition: 0.5s;
-        justify-content: center;
-        max-width: 80%;
-    }
-
-    .cto-bp {
-        padding-right: 0%;
-        transition: 0.5s;
-    }
-
-    .shadowdrop {
-        border-radius: 72.5px;
-        box-shadow: 4px 4px #00000040;
-        transition: 0.5s;
-        justify-content: center;
-    }
-
-    .cto-shadow {
-        align-items: flex-start;
-        display: flex;
-        vertical-align: center;
-        padding-left: 15%;
-    }
-}
-
-@media screen and (width >=601px) {
-    .cto-container {
-        background-position: 100px 50px;
-        background-size: cover;
-        background-repeat: no-repeat;
-        background-origin: content-box;
-        transition: 0.5s;
-        width: 100%;
-    }
-
-    .cto-bp {
-        padding-right: 0%;
-        transition: 0.5s;
-    }
-
-    .cto-shadow {
-        align-items: flex-start;
-        display: flex;
-        vertical-align: center;
-        padding-inline: 12%;
-    }
-}

src/components/Home/Meme/Meme.astro

@@ -1,13 +1,12 @@
 ---
-import "./Meme.scss";
+import './Meme.scss';
-
 import meme1 from '../../../assets/meme-1.png';
 import meme2 from '../../../assets/meme-2.png';
 import meme3 from '../../../assets/meme-3.png';
 import meme4 from '../../../assets/meme-4.png';
 ---
 
-<div id="home-meme" class="tilted-bg">
+<section id="home-meme" class="tilted-bg">
   <div class="meme-text feature-group">
     <h2>TITLE</h2>
     <h3>Building a new world for your data</h3>
@@ -36,4 +35,4 @@ import meme4 from '../../../assets/meme-4.png';
       Web3
     </div>
   </div>
-</div>
+</section>

src/components/Home/Meme/Meme.scss

@@ -18,23 +18,24 @@
   display: grid;
   grid-template-columns: 50% 50%;
   gap: 1rem;
-  max-width: 31.25rem;
+  max-width: 22em;
 
   img {
-    margin-bottom: 0.5rem;
+    margin-bottom: 0.5em;
   }
 
   > div {
-    color: var(--aquamarine);
+    @include fluid-font-size(1.5625rem);
-    font-size: calc(15px + (25 - 10) * ((100vw - 300px) / (1600 - 300)) / 2.5);
+    font-weight: 700;
     text-align: center;
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;
+    color: var(--aquamarine);
   }
 }
 
-@media screen and (width <=900px) {
+@media screen and (width < 48rem) {
   #home-meme {
     flex-direction: column;
     padding: 20% 8%;

src/components/Home/Message/Message.scss

@@ -25,4 +25,4 @@
     @include fluid-font-size(1.3125rem);
     line-height: 157%;
   }
-}
+}

src/components/Home/PoweredBy/PoweredBy.astro

@@ -1,8 +1,8 @@
 ---
-import "./PoweredBy.scss";
+import './PoweredBy.scss';
-import siaLogo from "../../../assets/sia-logo.webp";
+import siaLogo from '../../../assets/sia-logo.webp';
-import hnsLogo from "../../../assets/hsn-logo.webp";
+import hnsLogo from '../../../assets/hsn-logo.webp';
-import osiLogo from "../../../assets/osi-logo.webp";
+import osiLogo from '../../../assets/osi-logo.webp';
 ---
 
 <section id="home-powered-by">
@@ -12,4 +12,4 @@ import osiLogo from "../../../assets/osi-logo.webp";
         <img src={hnsLogo.src} class="hns-logo" />
         <img src={osiLogo.src} class="osi-logo" />
     </div>
-</div>
+</section>

src/components/Home/Socials/Socials.astro

@@ -1,21 +1,17 @@
 ---
-import "./SocialsStyles.css";
+import './Socials.scss';
+import githubLogo from '../../../assets/github-logo.webp';
+import discordLogo from '../../../assets/discord-logo.webp';
+import twitterLogo from '../../../assets/twitter-logo.webp';
+import facebookLogo from '../../../assets/facebook-logo.webp';
 ---
 
-<div class="grid place-items-center overflow-hidden h-auto my-[115px]">
+<section id="home-socials">
-    <div>
+  <h2>Get in touch</h2>
-        <h2
+  <div>
-            class="centered grid place-items-center overflow-hidden h-auto mt-[35px] mb-[1.5vh] text-[calc(15px_+_(25_-_10)_*_((100vw_-_300px)_/_(1600_-_300)))]"
+    <img src={githubLogo.src} class="github-logo" />
-        >
+    <img src={discordLogo.src} class="discord-logo" />
-            get in touch
+    <img src={twitterLogo.src} class="twitter-logo" />
-        </h2>
+    <img src={facebookLogo.src} class="facebook-logo" />
-        <div class="grid place-items-center overflow-hidden h-auto mb-[1.5vh];">
+  </div>
-            <div class="flex ml-[-5%] pb-[8vh]">
+</section>
-                <div class="github"></div>
-                <div class="discord"></div>
-                <div class="twitter"></div>
-                <div class="fb"></div>
-            </div>
-        </div>
-    </div>
-</div>

src/components/Home/Socials/Socials.scss

@@ -0,0 +1,42 @@
+@import "../../../styles/mixins.scss";
+
+#home-socials {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 1.5em;
+  margin: 5em 0 4.25em;
+  @include fluid-font-size(1.25rem);
+
+  div {
+    display: flex;
+    align-items: center;
+    gap: 1.5em;
+    padding: 0.375em;
+  }
+
+  h2 {
+    @include fluid-font-size(1.5625rem);
+    font-weight: 700;
+    line-height: 100%;
+    text-transform: uppercase;
+    color: var(--aquamarine);
+  }
+
+  .github-logo {
+    @include fluid-width-height(4.375rem, 4.375rem);
+  }
+
+  .discord-logo {
+    @include fluid-width-height(4.3125rem, 4.375rem);
+  }
+
+  .twitter-logo {
+    @include fluid-width-height(4.375rem, 4.375rem);
+  }
+
+  .facebook-logo {
+    @include fluid-width-height(3.75rem, 3.75rem);
+  }
+}

src/components/Home/Socials/SocialsStyles.css

@@ -1,47 +0,0 @@
-.socials-wrapper {
-    display: flex;
-    margin-left: -5%;
-    padding-bottom: 5vh;
-    margin-bottom: 5vh;
-}
-
-.github {
-    background-image: url('../../../assets/github-logo.webp');
-    background-position: 50% 50%;
-    background-size: contain;
-    background-repeat: no-repeat;
-    height: 48.3px;
-    width: 55px;
-}
-
-.discord {
-    background-image: url('../../../assets/discord-logo.webp');
-    background-position: 50% 50%;
-    background-size: contain;
-    background-repeat: no-repeat;
-    height: 48.3px;
-    width: 48.3px;
-    margin-top: 0.4vh;
-    margin-left: 18px;
-}
-
-.twitter {
-    background-image: url('../../../assets/twitter-logo.webp');
-    background-position: 50% 50%;
-    background-size: contain;
-    background-repeat: no-repeat;
-    height: 48.3px;
-    width: 55px;
-    margin-left: 18px;
-}
-
-.fb {
-    background-image: url('../../../assets/fb-logo.webp');
-    background-position: 50% 50%;
-    background-size: contain;
-    background-repeat: no-repeat;
-    margin-top: 0.5vh;
-    height: 42px;
-    width: 50px;
-    margin-left: 18px;
-}

src/components/Home/Vision/Vision.astro

@@ -2,8 +2,8 @@
 import "./Vision.scss";
 ---
 
-<section id="home-vision" class="feature-group">
+<section id="home-vision">
-  <div>
+  <div class="feature-group">
     <h2>Our Vision</h2>
     <h3>Make Web3 easy for everyone</h3>
     <p>

src/components/Home/Vision/Vision.scss

@@ -21,9 +21,9 @@
   @media screen and (width < 80rem) {
     p {
       background: rgba($body-bg, 0.65);
-      border-radius: 0 0.5em 0.5em 0;
+      border-radius: 0.5em;
-      padding: 0.5em 0.5em;
+      padding: 0.3em 0.5em;
-      margin: -0.5em -0.5em;
+      margin: -0.3em -0.5em;
     }
   }
 }

src/components/Home/WhatIsWeb3/WhatIsWeb3.astro

@@ -3,19 +3,19 @@ import "./WhatIsWeb3.scss";
 ---
 
 <section id="home-whatisweb3" class="tilted-bg">
-    <div class="background"></div>
+  <div class="background"></div>
-    <div class="feature-group">
+  <div class="feature-group">
-        <h2>
+    <h2>
-            What is the Web?
+      What is the Web?
-        </h2>
+    </h2>
-        <h3>
+    <h3>
-            Why Web3 matters
+      Why Web3 matters
-        </h3>
+    </h3>
-        <p>
+    <p>
-            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.
+      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>
+    </p>
-        <div>
+    <div>
-          <a href="#" class="btn-main">Learn More</a>
+      <a href="#" class="btn-main">Learn More</a>
-        </div>
     </div>
+  </div>
 </section>

src/components/Home/WhatIsWeb3/WhatIsWeb3.scss

@@ -40,7 +40,7 @@
     width: 100%;
     height: 38.9em;
     max-width: 30.34em;
-    margin: -19em 0 0;
+    margin: -19.25em 0 0;
     background-image: url("../../../src/assets/img-left.webp");
     background-position: left;
     background-repeat: no-repeat;
@@ -60,9 +60,9 @@
     @media screen and (width < 80rem) {
       p {
         background: rgba(2, 13, 17, 0.65);
-        border-radius: 0 0.5em 0.5em 0;
+        border-radius: 0.5em;
-        padding: 0.5em 0.5em;
+        padding: 0.3em 0.5em;
-        margin: -0.5em -0.5em;
+        margin: -0.3em -0.5em;
       }
     }
   }

src/components/JoinCommunity/JoinCommunity.astro

@@ -0,0 +1,12 @@
+---
+import './JoinCommunity.scss';
+---
+
+<section id="join-community">
+  <h2>
+    Join our community, lend a hand.
+  </h2>
+  <p>
+    Web3 gives people control over their data, privacy, and ownership.
+  </p>
+</section>

src/components/JoinCommunity/JoinCommunity.scss

@@ -0,0 +1,28 @@
+@import "../../styles/mixins.scss";
+
+#join-community {
+  padding-top: 3.16%;
+  padding-bottom: 3.16%;
+  @include fluid-padding-lr;
+  background: var(--aquamarine);
+  color: var(--blue-charcoal);
+
+  @media screen and (width < 48rem) {
+    text-align: center;
+  }
+
+  h2 {
+    margin-bottom: 0.25em;
+    @include fluid-font-size(2rem);
+    font-weight: 700;
+    line-height: 153%;
+    text-transform: none;
+    color: inherit;
+  }
+
+  p {
+    font-family: var(--font-family-jaldi);
+    @include fluid-font-size(1.3125rem);
+    line-height: 157%;
+  }
+}

src/components/Navbar/Navbar.jsx

@@ -11,7 +11,7 @@ function Navbar({ view }) {
     const onResize = () => {
       clearTimeout(resizeTimeout);
       resizeTimeout = setTimeout(() => {
-        if(nav && window.innerWidth > 940) {
+        if(nav && window.innerWidth >= 768) {
           setNav(false);
         }
       }, 25);
@@ -37,13 +37,13 @@ function Navbar({ view }) {
           <a href="/vision" className={view === 'vision' ? 'underline' : undefined} aria-current={view === 'vision' ? 'page' : undefined}>Vision</a>
         </li>
         <li>
-          <a href="/what-is-web3" className={view === 'what-is-web3' ? 'underline' : undefined} aria-current={view === 'what-is-web3' ? 'page' : undefined}>What is Web3</a>
+          <a href="/what-is-web3" className={view === 'what' ? 'underline' : 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>
         </li>
         <li>
-          <a className='btn-main download-btn' href="#">Download Extension</a>
+          <a className="btn-main download-btn" href="#">Download Extension</a>
         </li>
       </menu>
       <button className="hamburger" onClick={toggleNav}>☰</button>

src/components/Navbar/Navbar.scss

@@ -33,13 +33,13 @@ menu {
 
 .hamburger {
   display: none;
-  font-size: var(--font-size-xxl);
+  font-size: 2rem;
   cursor: pointer;
   z-index: 1;
   margin: 0 2.125rem;
 }
 
-@media screen and (width < 768px) {
+@media screen and (width < 48rem) {
   menu {
     display: flex;
     align-items: flex-start;

src/components/Vision/CommunityPower/CommunityPower.astro

@@ -1,10 +1,13 @@
 ---
-import "./CommunityPower.scss";
+import './CommunityPower.scss';
-import communityPower from "../../../../src/assets/community-power.png";
 ---
 
-<section id="community-power">
+<section id="vision-community-power">
-  <div class="community-power-wrapper">
+  <div class="feature-group">
-    <div class="community-power-description"></div>
+    <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>
 </section>

src/components/Vision/CommunityPower/CommunityPower.scss

@@ -1,7 +1,32 @@
-#community-power {
+@import "../../../styles/mixins.scss";
+@import "../../../styles/colors.scss";
+
+#vision-community-power {
+  position: relative;
   background-image: url("../../../assets/community-power-bg.png");
   margin-top: 7.8125rem;
   background-size: max(75rem, 100%);
   background-position: right;
   padding-top: max(29.25rem, 39.02%);
+  @include fluid-font-size(1.3125rem);
+
+  .feature-group {
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    @include fluid-margin-lr;
+    max-width: 27em;
+  }
+
+  @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/Vision/Grid/Grid.astro

@@ -1,5 +1,5 @@
 ---
-import "./Grid.scss";
+import './Grid.scss';
 ---
 
 <section id="vision-grid" class="feature-grid">

src/components/Vision/Grid/Grid.scss

@@ -10,8 +10,10 @@
   }
 
   h2 {
+    font-family: var(--font-family-jetbrains-mono);
     @include fluid-font-size(2.75rem);
-    font-weight: bold;
+    font-weight: 700;
     line-height: 129.55%;
+    color: var(--aquamarine);
   }
 }

src/components/Vision/Jumbotron/Jumbotron.astro

@@ -1,5 +1,5 @@
 ---
-import "./Jumbotron.scss";
+import './Jumbotron.scss';
 ---
 
 <section id="vision-jumbotron">

src/components/Vision/Jumbotron/Jumbotron.scss

@@ -1,4 +1,5 @@
 @import "../../../styles/mixins.scss";
+@import "../../../styles/colors.scss";
 
 #vision-jumbotron {
   display: flex;
@@ -9,8 +10,9 @@
     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.29%;
+    line-height: 137%;
     letter-spacing: -0.06em;
     text-align: center;
+    text-shadow: 1px 1px 2px rgba($body-bg-darker, 0.65);
   }
 }

src/components/What/Astronaut/Astronaut.astro

@@ -0,0 +1,16 @@
+---
+import './Astronaut.scss';
+---
+
+<section id="what-astronaut">
+  <div class="feature-group">
+    <h2>Community-Powered</h2>
+    <h3>Re-defining Web3, for the good of all</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>
+    <div>
+      <a href="#" class="btn-main">Contribute to our cause</a>
+    </div>
+  </div>
+</section>

src/components/What/Astronaut/Astronaut.scss

@@ -0,0 +1,39 @@
+@import "../../../styles/colors.scss";
+@import "../../../styles/mixins.scss";
+
+#what-astronaut {
+  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");
+  background-position: 100%;
+  background-repeat: no-repeat;
+  background-size: contain;
+
+  &::before {
+    content: "";
+    position: absolute;
+    inset: 0;
+    background: rgba(0, 0, 0, 0.8);
+    z-index: 1;
+  }
+
+  > div {
+    @include fluid-margin-lr;
+    max-width: 30em;
+    padding: 3.14em 0;
+    z-index: 1;
+  }
+
+  @media screen and (width < 80rem) {
+    p {
+      background: rgba($body-bg-darker, 0.65);
+      border-radius: 0 0.5em 0.5em 0;
+      padding: 0.3em 0.5em;
+      margin: -0.3em -0.5em;
+    }
+  }
+}

src/components/What/Grid/Grid.astro

@@ -0,0 +1,30 @@
+---
+import './Grid.scss';
+---
+
+<section id="what-grid" class="feature-grid">
+  <div>
+    <h3>Build Your Site, Censorship Free</h3>
+    <p>Combining Lume and Skynet technologies, you can build a website just like you are on the Web2 internet.</p>
+  </div>
+  <div>
+    <h3>Web3 Universal Storage</h3>
+    <p>Get access to a universal network drive, powered by the Web3/dWeb cloud. Enjoy portability to any device or platform you wish.</p>
+  </div>
+  <div>
+    <h3>Web3 Gateway</h3>
+    <p>Install the Lume Web3 Extension and have a 1-click gateway into the Web3 internet on Opera, Vivaldi, Edge and Firefox.</p>
+  </div>
+  <div>
+    <h3>Build Your Site, Censorship Free</h3>
+    <p>Combining Lume and Skynet technologies, you can build a website just like you are on the Web2 internet.</p>
+  </div>
+  <div>
+    <h3>Web3 Universal Storage</h3>
+    <p>Get access to a universal network drive, powered by the Web3/dWeb cloud. Enjoy portability to any device or platform you wish.</p>
+  </div>
+  <div>
+    <h3>Web3 Gateway</h3>
+    <p>Install the Lume Web3 Extension and have a 1-click gateway into the Web3 internet on Opera, Vivaldi, Edge and Firefox.</p>
+  </div>
+</section>

src/components/What/Grid/Grid.scss

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

src/components/What/Jumbotron/Jumbotron.astro

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

src/components/What/Jumbotron/Jumbotron.scss

@@ -0,0 +1,18 @@
+@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,7 +1,8 @@
 ---
-import "../styles/global.scss";
+import '../styles/global.scss';
-import Navbar from "../components/Navbar/Navbar.jsx";
+import Navbar from '../components/Navbar/Navbar.jsx';
-import Footer from "../components/Footer/Footer.astro";
+import Footer from '../components/Footer/Footer.astro';
+import JoinCommunity from '../components/JoinCommunity/JoinCommunity.astro';
 
 export interface Props {
   view: string;
@@ -25,6 +26,7 @@ const { view, title } = Astro.props;
     <main class={view}>
       <slot />
     </main>
+    {view !== 'home' && <JoinCommunity />}
     <Footer />
   </body>
 </html>

src/pages/index.astro

@@ -1,14 +1,14 @@
 ---
 import Layout from '../layouts/Layout.astro';
-import CTO from "../components/Home/CTO/CTO.astro";
+import CTO from '../components/Home/CTO/CTO.astro';
-import Grids from "../components/Home/Grid/Grid.astro";
+import Grids from '../components/Home/Grid/Grid.astro';
-import Header from "../components/Home/Header/Header.astro";
+import Header from '../components/Home/Header/Header.astro';
-import Meme from "../components/Home/Meme/Meme.astro";
+import Meme from '../components/Home/Meme/Meme.astro';
-import Message from "../components/Home/Message/Message.astro";
+import Message from '../components/Home/Message/Message.astro';
-import PoweredBy from "../components/Home/PoweredBy/PoweredBy.astro";
+import PoweredBy from '../components/Home/PoweredBy/PoweredBy.astro';
-import Socials from "../components/Home/Socials/Socials.astro";
+import Socials from '../components/Home/Socials/Socials.astro';
-import Vision from "../components/Home/Vision/Vision.astro";
+import Vision from '../components/Home/Vision/Vision.astro';
-import WhatIsWeb3 from "../components/Home/WhatIsWeb3/WhatIsWeb3.astro";
+import WhatIsWeb3 from '../components/Home/WhatIsWeb3/WhatIsWeb3.astro';
 ---
 
 <Layout view="home" title="Lume Web - Web3 for the masses">

src/pages/vision.astro

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

src/pages/what-is-web3.astro

@@ -1,7 +1,12 @@
 ---
 import Layout from '../layouts/Layout.astro';
+import Jumbotron from '../components/What/Jumbotron/Jumbotron.astro';
+import Grid from '../components/What/Grid/Grid.astro';
+import Astronaut from '../components/What/Astronaut/Astronaut.astro';
 ---
 
-<Layout view="what-is-web3" title="What is Web3? - Lume Web">
+<Layout view="what" title="What is Web3? - Lume Web">
-
+  <Jumbotron />
+  <Grid />
+  <Astronaut />
 </Layout>

src/styles/colors.scss

@@ -1,5 +1,5 @@
 $body-bg: #031418;
-$body-bg-darker: #020d11;
+$body-bg-darker: #020e10;
 
 $primary-dark: #000;
 $primary-light: #fff;

src/styles/global.scss

@@ -8,22 +8,13 @@
 @tailwind utilities;
 
 :root {
-  --primary-dark: #000;
-  --primary-light: #fff;
   --black: rgba(0 0 0);
+  --white: rgba(255 255 255);
   --blue-charcoal: #010e10;
   --blue-charcoal-2: rgba(3 21 24);
   --aquamarine: rgba(122 252 187);
   --cloud: rgba(199 199 199);
   --alto: rgba(217 217 217);
-  --white: rgba(255 255 255);
-  --font-size-s: 10.25rem; /* 20px */
-  --font-size-m: 1.3125rem; /* 21px */
-  --font-size-l: 1.5625rem; /* 25px */
-  --font-size-xl: 1.875rem; /* 30px */
-  --font-size-xxl: 2rem; /* 32px */
-  --font-size-xxxl: 2.8125rem; /* 45px */
-  --font-size-xxxxl: 6.25rem; /* 100px */
   --font-family-ibm-plex-sans-devanagari: "IBM Plex Sans Devanagari";
   --font-family-jaldi: "Jaldi";
   --font-family-jetbrains-mono: "JetBrains Mono";
@@ -44,9 +35,11 @@ body {
   font-family: "JetBrains Mono", sans-serif;
   background: $body-bg;
   color: #fff;
+  overflow-x: hidden;
 }
 
 main {
+  @include fluid-font-size(0.0625rem);
   flex-grow: 1;
 }
 
@@ -54,73 +47,6 @@ a {
   transition: color 200ms;
 }
 
-.body-block {
-  align-items: center;
-  display: flex;
-  gap: 78px;
-}
-
-.centered {
-  display: grid;
-  place-items: center;
-  overflow: hidden;
-  height: auto;
-  margin-bottom: 1.5vh;
-}
-
-.title {
-  height: 57px;
-  letter-spacing: -1.5px;
-  line-height: 102px;
-  white-space: nowrap;
-}
-
-h2 {
-  @include fluid-font(1rem, 2rem); /* 16px - 32px  */
-  color: var(--aquamarine);
-  text-transform: uppercase;
-}
-
-h3 {
-  font-size: calc(30px + (45 - 30) * ((100vw - 300px) / (1600 - 300)));
-}
-
-h4 {
-  font-size: calc(15px + (21 - 15) * ((100vw - 300px) / (1600 - 300)));
-  color: var(--cloud);
-  font-family: var(--font-family-jaldi);
-  font-weight: 400;
-  font-style: normal;
-  max-width: 550px;
-  margin-top: 0.5em;
-  line-height: 35px;
-}
-
-h5 {
-  font-size: calc(15px + (29 - 15) * ((100vw - 300px) / (1600 - 300)));
-  color: var(--white);
-  font-family: var(--font-family-jaldi);
-  font-weight: 400;
-  font-style: normal;
-  max-width: 300;
-  line-height: 2rem;
-}
-
-h6 {
-  font-size: calc(15px + (19 - 15) * ((100vw - 300px) / (1600 - 300)));
-  color: var(--cloud);
-  font-family: var(--font-family-jaldi);
-  font-weight: 100;
-  font-style: normal;
-  max-width: 300;
-}
-
-.container {
-  max-width: 1240px;
-  margin: auto;
-  padding: 0 1rem;
-}
-
 .btn-main {
     display: inline-block;
     color: var(--black);
@@ -136,50 +62,37 @@ h6 {
     }
 }
 
-@media screen and (width <= 1050px) {
-  .left {
-    display: flex;
-    position: relative;
-    overflow: hidden;
-    white-space: normal;
-  }
-
-  .h2-alignment {
-    margin-left: -10em;
-  }
-
-  h5 {
-    font-size: calc(20px + (29 - 15) * ((100vw - 300px) / (1600 - 300)));
-    color: var(--white);
-    font-family: var(--font-family-jaldi);
-    font-weight: 400;
-    font-style: normal;
-    max-width: 300;
-    line-height: 2rem;
-  }
-
-  h6 {
-    font-size: calc(17px + (19 - 15) * ((100vw - 300px) / (1600 - 300)));
-    color: var(--cloud);
-    font-family: var(--font-family-jaldi);
-    font-weight: 100;
-    font-style: normal;
-    max-width: 300;
-  }
-}
-
 main.vision {
   &::before {
     content: "";
     position: absolute;
-    width: 1031px;
+    width: max(min(1031em, 100vw), 320em);
-    height: 733px;
+    height: max(min(733em, 100vw), 400em);
     top: 0;
     left: 50%;
-    margin-left: -515.5px;
+    margin-left: max(-515.5em, -50vw);
     z-index: -1;
     background: url(../assets/vision-bg.png);
     background-size: contain;
+    background-position: center;
+    background-repeat: no-repeat;
+  }
+}
+
+main.what {
+  &::before {
+    content: "";
+    position: absolute;
+    width: max(min(1513em, 100vw), 320em);
+    height: max(min(1224em, 100vw), 560em);
+    top: -20em;
+    left: 50%;
+    margin-left: max(-756.5em, -50vw);
+    z-index: -1;
+    background: url(../assets/what-bg.png);
+    background-size: contain;
+    background-position: center;
+    background-repeat: no-repeat;
   }
 }
 
@@ -187,7 +100,6 @@ main.vision {
   h2 {
     margin-bottom: 1em;
     @include fluid-font-size(1.5625rem);
-    font-weight: 700;
     line-height: 100%;
     text-transform: uppercase;
     color: var(--aquamarine);
@@ -196,10 +108,14 @@ main.vision {
   h3 {
     margin-bottom: 0.65em;
     @include fluid-font-size(2.8125rem);
-    font-weight: 700;
     line-height: 109%;
   }
 
+  h2, h3 {
+    font-weight: 700;
+    text-shadow: 1px 1px 2px rgba($body-bg-darker, 0.65);
+  }
+
   p {
     font-family: var(--font-family-jaldi);
     line-height: 167%;
@@ -267,7 +183,7 @@ main.vision {
     top: 0;
     right: -5%;
     bottom: 0;
-    left: -5%;
+    left: -25%;
     margin: 2% 0;
     background: $body-bg-darker;
     transform: matrix(1, -0.04, 0.04, 1, 0, 0);