CHANGELOG.md

@@ -1,11 +1,3 @@
-## [0.2.4-develop.1](https://git.lumeweb.com/LumeWeb/lumeweb.com/compare/v0.2.3...v0.2.4-develop.1) (2023-08-14)
-
-
-### Bug Fixes
-
-* bring back ibm font ([ccc873d](https://git.lumeweb.com/LumeWeb/lumeweb.com/commit/ccc873d547de3e9cd8ba1067d95d5ab5cfd8a9f4))
-* overall improvements of the responsive layout ([f9362fa](https://git.lumeweb.com/LumeWeb/lumeweb.com/commit/f9362fa577172a017c8df26aefc88abba042b092))
-
 ## [0.2.3](https://git.lumeweb.com/LumeWeb/lumeweb.com/compare/v0.2.2...v0.2.3) (2023-08-14)
 
 

npm-shrinkwrap.json

@@ -1,12 +1,12 @@
 {
     "name": "@lumeweb/lumeweb.com",
-    "version": "0.2.4-develop.1",
+    "version": "0.2.3",
     "lockfileVersion": 3,
     "requires": true,
     "packages": {
         "": {
             "name": "@lumeweb/lumeweb.com",
-            "version": "0.2.4-develop.1",
+            "version": "0.2.3",
             "dependencies": {
                 "@astrojs/react": "^2.1.1",
                 "@astrojs/tailwind": "^3.1.1",

package.json

@@ -1,7 +1,7 @@
 {
     "name": "@lumeweb/lumeweb.com",
     "type": "module",
-    "version": "0.2.4-develop.1",
+    "version": "0.2.3",
     "private": true,
     "repository": {
         "type": "git",

src/components/Home/Meme/Meme.astro

@@ -2,7 +2,7 @@
 import mulletMeme from "/src/assets/centralized-mullet-meme.png";
 ---
 
-<section id="meme" class="tilted-bgs">
+<section id="meme" class="tilted-bg">
   <div class="flex flex-col-reverse lg:flex-row gap-10 mx-10 sm:mx-20 xl:mx-40">
     <div class="space-y-10">
       <h2

src/components/Home/PoweredBy/PoweredBy.astro

@@ -1,38 +1,21 @@
 ---
-import svgSia from "/src/assets/icons/sia.svg?raw";
+import './PoweredBy.scss';
-import svgHns from "/src/assets/icons/hns.svg?raw";
+
-import svgOsi from "/src/assets/icons/osi.svg?raw";
+import svgSia from '/src/assets/icons/sia.svg?raw';
+import svgHns from '/src/assets/icons/hns.svg?raw';
+import svgOsi from '/src/assets/icons/osi.svg?raw';
 ---
 
-<section
+<section id="powered-by">
-  id="powered-by"
+  <h2>Powered By</h2>
-  class="flex flex-col md:flex-row gap-16 items-center justify-center"
+  <div>
->
+    <a href="https://sia.tech" title="Sia" class="sia-logo">
-  <h2
-    class="font-display text-xl md:text-3xl text-primary uppercase font-bold mr-5"
-  >
-    Powered By
-  </h2>
-  <div class="flex flex-row items-center gap-x-10">
-    <a
-      href="https://sia.tech"
-      title="Sia"
-      class="w-28 h-28 text-gray-300 hover:text-white transition-all ease-in"
-    >
       <Fragment set:html={svgSia} />
     </a>
-    <a
+    <a href="https://handshake.org" title="Handshake" class="hns-logo">
-      href="https://handshake.org"
-      title="Handshake"
-      class="w-20 h-20 -mt-4 text-gray-300 hover:text-white transition-all ease-in"
-    >
       <Fragment set:html={svgHns} />
     </a>
-    <a
+    <a href="https://opensource.org/osd/" title="Open Source Initiative" class="osi-logo">
-      href="https://opensource.org/osd/"
-      title="Open Source Initiative"
-      class="w-20 h-20 -mt-6 text-gray-300 hover:text-white transition-all ease-in"
-    >
       <Fragment set:html={svgOsi} />
     </a>
   </div>

src/components/Home/PoweredBy/PoweredBy.scss

@@ -0,0 +1,54 @@
+@import "/src/styles/mixins.scss";
+@import "/src/styles/vars.scss";
+
+#powered-by {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 4em;
+  margin: 12em 7.5%;
+
+  @media screen and (max-width: 47.99999rem) {
+    flex-direction: column;
+    gap: 2.5em;
+  }
+
+  div {
+    display: flex;
+    align-items: center;
+    gap: 2.5em;
+  }
+
+  h2 {
+    @include fluid-font-size(1.5625rem);
+    font-weight: 700;
+    line-height: 100%;
+    text-transform: uppercase;
+    color: $color-aquamarine;
+
+    @media screen and (min-width: 48rem) {
+      margin-top: 0.75em;
+    }
+  }
+
+  a {
+    padding: 0.5em;
+    color: $color-alto;
+
+    &:hover {
+      color: $color-white;
+    }
+  }
+
+  .sia-logo svg {
+    @include fluid-width(5.5rem);
+  }
+
+  .hns-logo svg {
+    @include fluid-width(4.5rem);
+  }
+
+  .osi-logo svg {
+    @include fluid-width(4.5rem);
+  }
+}

src/components/Home/Socials/Socials.astro

@@ -1,41 +1,25 @@
 ---
-import svgGit from "/src/assets/icons/git.svg?raw";
+import './Socials.scss';
-import svgGithub from "/src/assets/icons/github.svg?raw";
+
-import svgDiscord from "/src/assets/icons/discord.svg?raw";
+import svgGit from '/src/assets/icons/git.svg?raw';
-import svgTwitter from "/src/assets/icons/twitter.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" class="flex flex-col items-center">
+<section id="socials">
-  <h2 class="text-xl md:text-3xl font-display text-primary uppercase font-bold">
+    <h2>Get in touch</h2>
-    Get in touch
+    <div>
-  </h2>
+        <a href="https://git.lumeweb.com" title="Git" class="git-logo">
-  <div class="flex flex-row items-center justify-center gap-8 mt-10">
-    <a
-      href="https://git.lumeweb.com"
-      title="Git"
-      class="w-10 h-10 -mt-1 text-gray-300 hover:text-primary transition-all ease-in"
-    >
             <Fragment set:html={svgGit} />
         </a>
-    <a
+        <a href="https://github.com/LumeWeb" title="GitHub" class="github-logo">
-      href="https://github.com/LumeWeb"
-      title="GitHub"
-      class="w-10 h-10 text-gray-300 hover:text-primary transition-all ease-in"
-    >
             <Fragment set:html={svgGithub} />
         </a>
-    <a
+        <a href="https://discord.gg/qpC8ADp3rS" title="Discord" class="discord-logo">
-      href="https://discord.gg/qpC8ADp3rS"
-      title="Discord"
-      class="w-10 h-10 mt-3 text-gray-300 hover:text-primary transition-all ease-in"
-    >
             <Fragment set:html={svgDiscord} />
         </a>
-    <a
+        <a href="https://twitter.com/lumeweb3" title="Twitter" class="twitter-logo">
-      href="https://twitter.com/lumeweb3"
-      title="Twitter"
-      class="w-10 h-10 text-gray-300 hover:text-primary transition-all ease-in"
-    >
             <Fragment set:html={svgTwitter} />
         </a>
     </div>

src/components/Home/Typewriter/Typewriter.astro

@@ -1,13 +1,21 @@
 ---
+import bg from "../../../assets/home-hero-bg.webp"
 import TypewriterContent from "./TypewriterContent.jsx";
 ---
 
+<div class="absolute -z-10 -right-[250px] top-[250px] w-[1250px]">
+  <img
+    class="object-contain w-[1250px]"
+    src={bg.src}
+  />
+</div>
+
 <section
   id="typewriter"
-  class="w-full flex flex-row items-center justify-center"
+  class="w-full overflow-hidden flex flex-row items-center justify-center"
 >
   <h1
-    class="text-6xl md:text-9xl mb-10 min-h-[375px] px-10 text-center break-words"
+    class="text-7xl md:text-9xl mt-10 mb-10 min-h-[375px] max-w-full px-10 text-center"
   >
     <TypewriterContent client:load />
   </h1>

src/components/Home/Typewriter/TypewriterContent.jsx

@@ -4,7 +4,7 @@ const HeaderContent = () => {
   var
     headerStrings = [
       'Access to the web <br /> for the masses',
-      'An open web <br /> for business',
+      'An open web for business',
       'Web3 for the masses',
       'Web3 for you'
     ],

src/components/Home/Web3/Web3.astro

@@ -6,11 +6,9 @@ import gfxLeft from "../../../assets/home-gfx-left.png";
   id="web3"
   class="flex flex-col lg:flex-row lg:bg-transparent lg:p-0 gap-10 mx-10 sm:mx-20 xl:mx-40"
 >
-  <div class="flex-1 max-w-[calc(100% + 20px)] overflow-hidden -mx-10">
+  <div class="flex-1 -ml-10 -mr-20 lg:-ml-40 lg:mr-0">
-    <div class="flex-1 -ml-10 -mr-10 lg:-ml-40 lg:mr-0">
     <img src={gfxLeft.src} class="w-full" />
   </div>
-  </div>
   <div class="flex-1 -mt-40 space-y-10 flex flex-col justify-center">
     <h2
       class="font-display text-primary font-bold text-xl md:text-2xl uppercase"

src/components/Layout/Navbar/Navbar.astro

@@ -75,15 +75,6 @@ function getActiveClass(linkView) {
     const hamburgerEl = document.getElementById("hamburger");
     const menuEl = document.querySelector("menu");
 
-    function toggleScrollBlock() {
-      // When not hidden, should block scroll
-      if (!navbarOverlayEl.classList.contains("hidden")) {
-        document.body.style.overflow = "hidden";
-      } else {
-        document.body.style.overflow = null;
-      }
-    }
-
     function handleMenuClick() {
       // Toggle menu open/closed
       ["hidden", "flex"].forEach((className) => {
@@ -91,7 +82,6 @@ function getActiveClass(linkView) {
       });
 
       navbarOverlayEl.classList.toggle("hidden");
-      toggleScrollBlock();
     }
 
     function handleOverlayClick() {
@@ -101,7 +91,6 @@ function getActiveClass(linkView) {
       });
 
       navbarOverlayEl.classList.toggle("hidden");
-      toggleScrollBlock();
     }
 
     hamburgerEl.addEventListener("click", handleMenuClick);

src/layouts/Layout.astro

@@ -25,25 +25,21 @@ const { view, title } = Astro.props;
         name="description"
         content="A platform, network and experience that allows you to control and own your online web, and access all of the possibilities Web3 has to offer. Join the open web."
     />
-    <meta
+    <meta name="keywords"
-      name="keywords"
+          content="Web3 Extension, web3 browser, Lume Web, Web3, dWeb, p2p, handshake, eth, ethereum, ipfs, open web, privacy, decentralization, blockchain"/>
-      content="Web3 Extension, web3 browser, Lume Web, Web3, dWeb, p2p, handshake, eth, ethereum, ipfs, open web, privacy, decentralization, blockchain"
-    />
     <!-- Matomo -->
     <script is:inline>
-      var _paq = (window._paq = window._paq || []);
+        var _paq = window._paq = window._paq || [];
         /* tracker methods like "setCustomDimension" should be called before "trackPageView" */
-      _paq.push(["trackPageView"]);
+        _paq.push(['trackPageView']);
-      _paq.push(["enableLinkTracking"]);
+        _paq.push(['enableLinkTracking']);
         (function () {
             var u = "//piwiki.lumeweb.com/";
-        _paq.push(["setTrackerUrl", u + "matomo.php"]);
+            _paq.push(['setTrackerUrl', u + 'matomo.php']);
-        _paq.push(["setSiteId", "1"]);
+            _paq.push(['setSiteId', '1']);
-        var d = document,
+            var d = document, g = d.createElement('script'), s = d.getElementsByTagName('script')[0];
-          g = d.createElement("script"),
-          s = d.getElementsByTagName("script")[0];
             g.async = true;
-        g.src = u + "matomo.js";
+            g.src = u + 'matomo.js';
             s.parentNode.insertBefore(g, s);
         })();
     </script>
@@ -51,10 +47,11 @@ const { view, title } = Astro.props;
 </head>
 <body class="max-w-[1600px] mx-auto">
 <Navbar view={view}/>
-    <main class={view + " space-y-40 overflow-x-hidden relative "}>
+<main class={view + " space-y-40"}>
     <slot/>
 </main>
-    {view !== "home" && <JoinCommunity />}
+{view !== "home" &&
+    <JoinCommunity/>}
 <Footer/>
 </body>
 </html>

src/pages/index.astro

@@ -9,14 +9,9 @@ import WebComparison from "../components/Home/WebComparison/WebComparison.astro"
 import Socials from "../components/Home/Socials/Socials.astro";
 import CTO from "../components/Home/CTO/CTO.astro";
 import Message from "../components/Home/Message/Message.astro";
-import bg from "../assets/home-hero-bg.webp";
 ---
 
 <Layout view="home" title="Lume Web - Your Open Web">
-  <img
-    class="absolute -z-10 -right-[250px] top-[250px] object-contain w-[1250px] max-w-none"
-    src={bg.src}
-  />
   <Typewriter />
   <Vision />
   <Web3 />

src/styles/global.scss

@@ -66,6 +66,120 @@ body {
   }
 }
 
+main {
+  @include fluid-font-size(0.625rem);
+  flex-grow: 1;
+}
+
+a, button {
+  transition: color $transition-duration;
+}
+
+.btn-main {
+  display: inline-block;
+  padding: 0.5em 0.8em;
+  color: $color-black;
+  background: $color-aquamarine;
+  border: 0.05em solid $color-aquamarine;
+  border-radius: 0.25em;
+  transition: color $transition-duration, background $transition-duration;
+  white-space: nowrap;
+
+  &:hover {
+    color: $color-white;
+    background: $color-blue-charcoal;
+  }
+}
+
+.feature-group {
+  h2 {
+    margin-bottom: 1em;
+    @include fluid-font-size(1.5625rem);
+    font-weight: 700;
+    line-height: 100%;
+    text-transform: uppercase;
+    color: $color-aquamarine;
+  }
+
+  h3 {
+    margin-bottom: 0.65em;
+    @include fluid-font-size(2.8125rem);
+    line-height: 109%;
+  }
+
+  h2, h3 {
+    text-shadow: 0.017em 0.017em 0.034em rgba($color-blue-charcoal, 0.65);
+  }
+
+  p, ul {
+    @include fluid-font-size(1.375rem);
+    font-family: $font-family-jaldi;
+    line-height: 148%;
+    color: $color-cloud;
+    transition: background $transition-duration;
+  }
+
+  p + p, ul + p {
+    margin-top: 0.78em;
+  }
+
+  ul {
+    list-style-type: disc;
+    margin-left: 1em;
+  }
+
+  .btn-main {
+    font-family: $font-family-jaldi;
+    @include fluid-font-size(1.5rem);
+    margin-top: 1.57em;
+  }
+}
+
+.feature-grid {
+  display: grid;
+  grid-template-columns: repeat(1, 1fr);
+  gap: 0.9em;
+  padding: 0 7.5%;
+  @include fluid-font-size(1.25rem);
+
+  @media screen and (min-width: 48rem) {
+    grid-template-columns: repeat(2, 1fr);
+    grid-auto-rows: 1fr;
+  }
+
+  @media screen and (min-width: 64rem) {
+    grid-template-columns: repeat(3, 1fr);
+  }
+
+  div {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    padding: 2.5em 2em;
+    background: $color-blue-charcoal;
+    border: 0.05em solid transparent;
+    border-radius: 0.5em;
+    font-family: $font-family-jaldi;
+    transition: border-color $transition-duration;
+
+    &:hover {
+      border-color: $color-aquamarine;
+    }
+  }
+
+  h3 {
+    @include fluid-font-size(2rem);
+    line-height: 109%;
+  }
+
+  p {
+    @include fluid-font-size(1.375rem);
+    margin-top: 0.67em;
+    line-height: 124%;
+    color: $color-cloud;
+  }
+}
+
 .tilted-bg {
   position: relative;
 
@@ -99,3 +213,54 @@ body {
     z-index: -1;
   }
 }
+
+main.home {
+  .feature-group h3 {
+    font-weight: 700;
+  }
+}
+
+main.vision {
+  &::before {
+    content: "";
+    position: absolute;
+    top: -0.5em;
+    left: 50%;
+    width: 132.9em;
+    height: 94.63334em;
+    transform: translate(-50%, 0);
+    background: url("/src/assets/main-vision-bg.png");
+    background-size: contain;
+    z-index: -1;
+  }
+}
+
+main.what {
+  &::before {
+    content: "";
+    position: absolute;
+    top: -2em;
+    left: 50%;
+    width: 151.3em;
+    height: 122.4em;
+    background: url("/src/assets/main-what-bg.png");
+    background-size: contain;
+    transform: translate(-50%, 0);
+    z-index: -1;
+  }
+}
+
+main.donate {
+  &::before {
+    content: "";
+    position: absolute;
+    top: -3em;
+    left: 50%;
+    width: 144em;
+    height: 93.3em;
+    background: url("/src/assets/main-donate-bg.png");
+    background-size: contain;
+    transform: translate(-50%, 0);
+    z-index: -1;
+  }
+}