From 486bc6ae7278e66aa2cd6f9d3e5c2df491d21960 Mon Sep 17 00:00:00 2001
From: Juan Di Toro <ditorojuanf@gmail.com>
Date: Sat, 12 Aug 2023 21:10:54 +0200
Subject: [PATCH] feat: finish all new design implementations

---
 src/components/Home/CTO/CTO.astro         |  36 ++++---
 src/components/Home/Vision/Vision.astro   |  34 +++----
 src/components/Layout/Navbar/Navbar.astro |   2 +-
 src/components/Layout/Navbar/Navbar.jsx   |  74 --------------
 src/components/Layout/Navbar/Navbar.scss  | 115 ----------------------
 5 files changed, 40 insertions(+), 221 deletions(-)
 delete mode 100644 src/components/Layout/Navbar/Navbar.jsx
 delete mode 100644 src/components/Layout/Navbar/Navbar.scss

diff --git a/src/components/Home/CTO/CTO.astro b/src/components/Home/CTO/CTO.astro
index 3d23732..709e454 100644
--- a/src/components/Home/CTO/CTO.astro
+++ b/src/components/Home/CTO/CTO.astro
@@ -1,21 +1,31 @@
 ---
-import './CTO.scss';
-import avatar from '/src/assets/cto-avatar.png';
+import avatar from "/src/assets/cto-avatar.png";
+import abstractBg from "/src/assets/single-brand-bg-1.png";
 ---
 
-<section id="cto">
-  <div class="feature-group">
-    <h2>Community-Powered</h2>
-    <h3>Building the open, user-owned web you deserve</h3>
-    <p>
-      Right now, Lume has only one full-time developer, a few freelancers, and limited helper staff! We need help from developers, fundraisers, funders, and contributors to bring the new internet to the masses.
+<section id="cto" class="w-full my-24 mx-20 xl:mx-40 flex flex-row">
+  <div class="flex flex-col max-w-xl space-y-10">
+    <h2 class="font-display text-primary font-bold text-2xl uppercase">
+      Community-Powered
+    </h2>
+    <h3 class="font-display text-6xl font-bold">
+      Building a new world for your data
+    </h3>
+    <p class="font-body text-2xl text-body">
+      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 class="bio">
-      <img src={avatar.src} />
-      <div>
-        <strong>Derrick Hammer</strong><br />
-        CTO
+    <div class="flex flex-row items-center gap-6">
+      <img src={avatar.src} class="w-20 h-20" />
+      <div class="flex flex-col font-body">
+        <h6 class="text-xl">Derrick Hammer</h6>
+        <p class="text-lg text-body">CTO</p>
       </div>
     </div>
   </div>
+  <img
+    src={abstractBg.src}
+    class="float-right -z-10 absolute right-0 w-[800px]"
+  />
 </section>
diff --git a/src/components/Home/Vision/Vision.astro b/src/components/Home/Vision/Vision.astro
index b3f2e74..396c678 100644
--- a/src/components/Home/Vision/Vision.astro
+++ b/src/components/Home/Vision/Vision.astro
@@ -1,20 +1,18 @@
-<section id="vision">
-  <div class="space-y-10 mx-40">
-    <h2 class="font-display text-primary font-bold text-2xl uppercase">
-      Our Vision
-    </h2>
-    <h3 class="font-display text-6xl font-bold">Make Web3 easy for everyone</h3>
-    <p class="font-body text-3xl text-body">
-      Web3 offers freedom of speech, data sovereignty, and privacy. We simplify
-      Web3 by bridging the gap between the two webs, enabling easy usage without
-      censorship or backdoors.over your personal web.
-    </p>
-    <div class="pt-10">
-      <a
-        href="#"
-        class="text-2xl rounded-md bg-primary py-3 px-10 text-[black] font-body"
-        >Download Extension</a
-      >
-    </div>
+<section id="vision" class="space-y-10 mx-20 xl:mx-40">
+  <h2 class="font-display text-primary font-bold text-2xl uppercase">
+    Our Vision
+  </h2>
+  <h3 class="font-display text-6xl font-bold">Make Web3 easy for everyone</h3>
+  <p class="font-body text-3xl text-body">
+    Web3 offers freedom of speech, data sovereignty, and privacy. We simplify
+    Web3 by bridging the gap between the two webs, enabling easy usage without
+    censorship or backdoors.over your personal web.
+  </p>
+  <div class="pt-10">
+    <a
+      href="#"
+      class="text-2xl rounded-md bg-primary py-3 px-10 text-[black] font-body"
+      >Download Extension</a
+    >
   </div>
 </section>
diff --git a/src/components/Layout/Navbar/Navbar.astro b/src/components/Layout/Navbar/Navbar.astro
index 0977685..b3720b8 100644
--- a/src/components/Layout/Navbar/Navbar.astro
+++ b/src/components/Layout/Navbar/Navbar.astro
@@ -14,7 +14,7 @@ function getActiveClass(linkView) {
     </a>
   </div>
   <menu
-    class="hidden flex-col items-center gap-14 z-20 max-sm:bg-black max-sm:absolute max-sm:right-0 max-sm:top-0 max-sm:bottom-0 max-sm:z-20 max-sm:py-20 max-sm:px-10 max-sm:bg-black md:flex-row md:flex"
+    class="hidden flex-col items-center gap-14 z-20 max-sm:bg-black max-sm:absolute max-sm:right-0 max-sm:top-0 max-sm:bottom-0 max-sm:z-20 max-sm:py-20 max-sm:px-10 max-sm:bg-black lg:flex-row lg:flex"
   >
     <li>
       <a href="/" class={getActiveClass("home")}>Home</a>
diff --git a/src/components/Layout/Navbar/Navbar.jsx b/src/components/Layout/Navbar/Navbar.jsx
deleted file mode 100644
index bf2bbad..0000000
--- a/src/components/Layout/Navbar/Navbar.jsx
+++ /dev/null
@@ -1,74 +0,0 @@
-import React, { useState, useEffect } from 'react';
-import './Navbar.scss';
-import logo from '/src/assets/lume-logo.png';
-
-function Navbar({ view }) {
-  const [nav, setNav] = useState(false);
-
-  const toggleNav = () => {
-    if(nav) {
-      document.body.classList.remove("scroll-lock");
-      setNav(false);
-    } else {
-      document.body.classList.add("scroll-lock");
-      setNav(true);
-    }
-  }
-
-  const onMenuClick = function(event) {
-    if(!nav) {
-      return;
-    }
-
-    if(event.pageX < event.target.offsetLeft) {
-      // click outside of menu
-      toggleNav();
-    }
-  }
-
-  useEffect(() => {
-    let resizeTimeout;
-    const onResize = () => {
-      clearTimeout(resizeTimeout);
-      resizeTimeout = setTimeout(() => {
-        if(nav && window.innerWidth >= 900) {
-          toggleNav();
-        }
-      }, 25);
-    };
-
-    window.addEventListener('resize', onResize);
-
-    return () => window.removeEventListener('resize', onResize);
-  }, [nav]);
-
-  return (
-    <nav>
-      <div className="logo">
-        <a href="/">
-          <img src={logo.src} alt="Lume" />
-        </a>
-      </div>
-      <menu className={nav ? 'active' : undefined} onClick={onMenuClick}>
-        <li>
-          <a href="/" className={view === 'home' ? 'current' : undefined} aria-current={view === 'home' ? 'page' : undefined}>Home</a>
-        </li>
-        <li>
-          <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' ? 'current' : undefined} aria-current={view === 'what' ? 'page' : undefined}>What is Web3</a>
-        </li>
-        <li>
-          <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>
-        </li>
-      </menu>
-      <button className="hamburger" onClick={toggleNav}>☰</button>
-    </nav>
-  )
-}
-
-export default Navbar
diff --git a/src/components/Layout/Navbar/Navbar.scss b/src/components/Layout/Navbar/Navbar.scss
deleted file mode 100644
index 9ec267e..0000000
--- a/src/components/Layout/Navbar/Navbar.scss
+++ /dev/null
@@ -1,115 +0,0 @@
-@import "/src/styles/mixins.scss";
-@import "/src/styles/vars.scss";
-
-nav {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  padding: 2em 3.75%;
-  @include fluid-font-size(1.25rem);
-  white-space: nowrap;
-
-  .logo {
-    flex-shrink: 0;
-
-    img {
-      @include fluid-width-height(13.125rem, 4.375rem);
-    }
-  }
-}
-
-menu {
-  display: flex;
-  align-items: center;
-
-  li > a {
-    display: block;
-    padding: 0.55em 0.9em;
-    @include fluid-font-size(1.25rem);
-    text-decoration: underline;
-    text-decoration-color: transparent;
-    transition: text-decoration-color $transition-duration;
-
-    &.current, &:hover, &:active {
-      text-decoration-color: inherit;
-    }
-
-    &.current {
-      font-weight: 700;
-    }
-  }
-
-  .download-btn {
-    margin-left: 0.9em;
-    @include fluid-font-size(1.25rem);
-    text-decoration: none;
-  }
-}
-
-.hamburger {
-  display: none;
-  font-size: 2rem;
-  cursor: pointer;
-  z-index: 1;
-  margin: 0 3.75% 0 2rem;
-}
-
-@media screen and (max-width: 56rem) {
-  nav {
-    position: sticky;
-    top: 0;
-    background: rgba($color-blue-charcoal-2, 0.8);
-    z-index: 2;
-  }
-
-  menu {
-    display: flex;
-    align-items: flex-start;
-    flex-direction: column;
-    position: fixed;
-    top: 0;
-    right: min(-20rem, -100vw);
-    bottom: 0;
-    padding: 7.5em 7.5% 1em;
-    background: rgba($color-blue-charcoal-2, 0.8);
-    transition: right $transition-duration;
-    overflow-y: auto;
-
-    &.active {
-      right: 0;
-
-      &::before {
-        content: "";
-        position: fixed;
-        inset: 0;
-        background: $color-black;
-        animation: $transition-duration bg-opacity forwards;
-        z-index: -1;
-      }
-    }
-
-    li > a {
-      font-size: 1.25rem;
-      padding-left: 0.8em;
-    }
-
-    .download-btn {
-      font-size: 1.25rem;
-      margin: 1.1em 0 0 0;
-    }
-  }
-
-  .hamburger {
-    display: block;
-  }
-}
-
-@keyframes bg-opacity {
-  0% {
-    opacity: 0;
-  }
-
-  100% {
-    opacity: 0.8;
-  }
-}