refactor: revise and restructure css/layout/header/footer/meme/etc (wip)

.gitignore

@@ -1 +1,2 @@
 node_modules
+dist

astro.config.mjs

@@ -1,9 +1,9 @@
 import { defineConfig } from 'astro/config';
-import tailwind from "@astrojs/tailwind";
+import tailwind from '@astrojs/tailwind';
 import react from '@astrojs/react';
-import image from "@astrojs/image";
+import image from '@astrojs/image';
 
 // https://astro.build/config
 export default defineConfig({
-  integrations: [tailwind(), image(), react()]
+  integrations: [tailwind({ config: { applyBaseStyles: false } }), image(), react()],
 });

package-lock.json

@@ -15,6 +15,7 @@
         "@types/react-dom": "^18.2.1",
         "astro": "^2.3.2",
         "astro-icon": "^0.8.0",
+        "autoprefixer": "^10.4.14",
         "dynamic-react-grid": "^0.2.0",
         "react": "^18.2.0",
         "react-dom": "^18.2.0",

package.json

@@ -17,6 +17,7 @@
     "@types/react-dom": "^18.2.1",
     "astro": "^2.3.2",
     "astro-icon": "^0.8.0",
+    "autoprefixer": "^10.4.14",
     "dynamic-react-grid": "^0.2.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",

postcss.config.cjs

@@ -0,0 +1,6 @@
+module.exports = {
+  plugins: {
+    "tailwindcss/nesting": {},
+    "tailwindcss": {},
+  },
+};

public/robots.txt

@@ -1,3 +1,2 @@
 User-Agent: *
 Allow: /
-

src/components/Footer/Footer.astro

@@ -0,0 +1,62 @@
+---
+import "./FooterStyles.css";
+import logo from "../../../src/assets/lume-logo.webp";
+---
+
+<footer>
+  <div>
+    <div class="footer-logo">
+      <a href="/">
+        <img src={logo.src} alt="Lume" />
+      </a>
+    </div>
+    <div class="footer-contact">
+      <a href="mailto:contact@lumeweb.com">
+        <span></span> contact@lumeweb.com
+      </a>
+    </div>
+    <div class="footer-phrase">Freedom, privacy, ownership.</div>
+  </div>
+  <div>
+    <h5>General</h5>
+    <ul>
+      <li>Home</li>
+      <li>Get Started</li>
+      <li>Documentation</li>
+      <li>Projects</li>
+    </ul>
+  </div>
+  <div>
+    <h5>Community</h5>
+    <ul>
+      <li>GitHub</li>
+      <li>Discord</li>
+      <li>Twitter</li>
+      <li>Facebook</li>
+    </ul>
+  </div>
+  <div>
+    <h5>Ecosystem</h5>
+    <ul>
+      <li>Browser</li>
+      <li>Extension</li>
+      <li>Universal Storage</li>
+    </ul>
+  </div>
+  <div>
+    <h5>Other</h5>
+    <ul>
+      <li>Browser</li>
+      <li>Extension</li>
+      <li>Universal Storage</li>
+    </ul>
+  </div>
+  <div>
+    <h5>Support Us</h5>
+    <ul>
+      <li>Donate</li>
+      <li>Download App</li>
+      <li>Partnerships</li>
+    </ul>
+  </div>
+</footer>

src/components/Footer/FooterStyles.css

@@ -0,0 +1,87 @@
+footer {
+  display: flex;
+  gap: 2.5rem;
+  padding: 4% 12%;
+  background-color: #020E10;
+
+  > div {
+    flex-basis: 0;
+    flex-grow: 1;
+
+    &:first-child {
+			flex-grow: 2 !important;
+		  display: flex;
+		  flex-direction: column;
+    }
+  }
+
+  h5 {
+    @apply text-2xl;
+    white-space: nowrap;
+    margin-bottom: 0.5rem;
+  }
+
+  li {
+    @apply text-xl leading-8;
+    font-family: var(--font-family-jaldi);
+    color: var(--cloud);
+    list-style-type: none;
+    white-space: nowrap;
+  }
+}
+
+.footer-logo {
+  a {
+    display: inline-block;
+  }
+
+  img {
+    width: 126px;
+  }
+}
+
+.footer-contact {
+  margin: auto 0;
+  color: var(--cloud);
+
+  a {
+    display: flex;
+    align-items: center;
+  }
+
+  span {
+    display: block;
+    background-image: url('../../assets/email-icon.webp');
+    background-size: cover;
+    margin-right: 0.5rem;
+    width: 1.0625rem;
+    height: 0.875rem;
+  }
+}
+
+.footer-phrase {
+  @apply text-xl;
+  margin: auto 0 0;
+  color: var(--aquamarine);
+}
+
+@media screen and (width <= 900px) {
+  footer {
+    flex-direction: column;
+    padding: 12% 8% 12%;
+    text-align: center;
+
+    > div:first-child {;
+    	margin-top: 1.5rem;
+    	order: 2;
+  	}
+  }
+
+  .footer-contact {
+  	margin: 4% 0;
+
+  	a {
+  		justify-content: center;
+  	}
+  }
+}

src/components/Home/Meme/Meme.astro

@@ -0,0 +1,39 @@
+---
+import "./MemeStyles.css";
+
+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 class="meme-wrapper">
+  <div class="meme-text">
+    <h2>TITLE</h2>
+    <h3>Building a new world for your data</h3>
+    <p>
+      Right now, Lume has only one full-time developer and limited
+      helper staff! We need help from developers, fundraisers,
+      funders, and contributors to bring the new internet to the
+      masses.
+    </p>
+  </div>
+  <div class="meme-grid">
+    <div>
+      <img src={meme1.src} alt="Web 1" />
+      Web1
+    </div>
+    <div>
+      <img src={meme2.src} />
+      Web2
+    </div>
+    <div>
+      <img src={meme3.src} />
+      Crypto &amp; Defi
+    </div>
+    <div>
+      <img src={meme4.src} />
+      Web3
+    </div>
+  </div>
+</div>

src/components/Home/Meme/MemeStyles.css

@@ -0,0 +1,56 @@
+.meme-wrapper {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  padding: 8% 12%;
+  background-image: url("../../../assets/tilted-rectangle.webp");
+  background-size: 100% 100%;
+}
+
+.meme-text {
+  width: 60%;
+  margin-right: 5%;
+  flex-shrink: 0;
+
+  p {
+    margin-top: 1rem;
+    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;
+  }
+}
+
+.meme-grid { 
+  display: grid;
+  grid-template-columns: 50% 50%;
+  gap: 1rem;
+  max-width: 31.25rem;
+
+  img {
+    margin-bottom: 0.5rem;
+  }
+
+  > div {
+    color: var(--aquamarine);
+    font-size: calc(15px + (25 - 10) * ((100vw - 300px) / (1600 - 300)) / 2.5);
+    text-align: center;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+}
+
+@media screen and (width <=900px) {
+  .meme-wrapper {
+    flex-direction: column;
+    padding: 20% 8%;
+    text-align: center;
+  }
+
+  .meme-text {
+    width: auto;
+    margin: 0 0 10%;
+  }
+}

src/components/Home/Vision/Vision.astro

@@ -0,0 +1,32 @@
+---
+import "./VisionStyles.css";
+---
+
+<div
+  class="mt-[166px] items-start flex pb-[5vh] bg-[url(../../../src/assets/video-placeholder.webp)] pb-[10%] bg-[80%_65%] bg-no-repeat bg-contain transition-[0.5s]"
+  style="padding-bottom: 5vh; vertical-align: center; padding-inline: 11.9%;"
+>
+  <div>
+    <span id="vision"></span>
+    <h2
+      class="text-[calc(15px_+_(25_-_10)_*_((100vw_-_300px)_/_(1600_-_300)))] text-[color:var(--aquamarine)] uppercase font-bold"
+    >
+      OUR VISION
+    </h2>
+    <h3
+      class="text-[calc(30px_+_(45_-_30)_*_((100vw_-_300px)_/_(1600_-_300)))] min-w-[75vw] z-[999] mt-[0.5em]"
+    >
+      Make Web3 easy for <br /> everyone
+    </h3>
+    <h4
+      class="left vt transition-[0.5s] 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]"
+    >
+      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.
+    </h4>
+    <div>
+      <a class="btn-main mt-8" href="#">Download Extension</a>
+    </div>
+  </div>
+</div>

src/components/Home/Vision/VisionStyles.css

@@ -0,0 +1,11 @@
+.vt {
+  background-color: rgba(0 0 0 0%);
+}
+
+@media screen and (width <=1200px) {
+  .vt {
+    background-color: #031418a7;
+    border-radius: 15px;
+    transition: 0.5s;
+  }
+}

src/components/Navbar/Navbar.jsx

@@ -1,40 +1,53 @@
-import React, {useState} from 'react'
+import React, { useState, useEffect } from 'react';
-import './NavbarStyles.css'
+import './NavbarStyles.css';
+import logo from '../../../src/assets/lume-logo.png';
 
-function Navbar() {
+function Navbar({ view }) {
-    const [nav, setNav] = useState(false)
+  const [nav, setNav] = useState(false);
-    const toggleNav = () => setNav(!nav)
+  const toggleNav = () => setNav(!nav);
+
+  useEffect(() => {
+    let resizeTimeout;
+    const onResize = () => {
+      clearTimeout(resizeTimeout);
+      resizeTimeout = setTimeout(() => {
+        if(nav && window.innerWidth > 940) {
+          setNav(false);
+        }
+      }, 25);
+    };
+
+    window.addEventListener('resize', onResize);
+
+    return () => window.removeEventListener('resize', onResize);
+  }, [nav]);
 
   return (
-        <div class='w-full h-20 flex justify-between items-center whitespace-nowrap gap-9 bg-[#031418] pt-[75px] px-[3%]'>
+    <nav>
-            <div class="bg-[url(../../src/assets/lume-logo.webp)] bg-no-repeat bg-contain h-[55px] min-w-[210px] z-[998] ml-[1%]">
+      <div className="logo">
-            </div>
+        <a href="/">
-            <ul class='transition-opacity duration-150 ease-out md:max-lg:opacity-0 lg:opacity-100 nav-menu'>
+          <img src={logo.src} alt="Lume" />
-                <li><a href="#">Home</a></li>
+        </a>
-                <li><a href="#vision">Vision</a></li>
-                <li><a href="#whatisweb3">What is Web3</a></li>
-                <li>Donate</li>
-                <div class='text-[color:var(--black)] font-normal not-italic items-end bg-[color:var(--aquamarine)] flex h-[52px] max-w-[195px] transition-[0.5s] border px-[5.2px] py-3 rounded-[5px] border-solid border-transparent scale-100 hover:transition-[0.5s] hover:bg-transparent hover:border hover:border-[color:var(--aquamarine)] hover:text-[white] hover:border-solid;'>
-                    <a class='download-btn' href="#">Download Extension</a>
-                </div>
-            </ul>
-
-            <div class="transition-opacity duration-150 ease-out nav-menu hamburger" onClick={toggleNav}>
-            ☰
-            </div>
-            <div class={nav ? 'mobile-menu active class="transition duration-[0.55s] linear"' : 'mobile-menu class="transition duration-[0.55s] linear"'}>
-                <ul class="mobile-nav">
-                    <li onClick={toggleNav}><a href="#">Home</a></li>
-                    <li onClick={toggleNav}><a href="#vision">Vision</a></li>
-                    <li onClick={toggleNav}><a href="#whatisweb3">What is Web3</a></li>
-                    <li onClick={toggleNav}><a href="#donate">Donate</a></li>
-                    <div class='text-[color:var(--black)] text-[length:var(--font-size-s)] font-normal not-italic items-end bg-[color:var(--aquamarine)] flex h-[52px] min-w-[245px] transition-[0.5s] border px-[5.2px] py-3 rounded-[5px] border-solid border-transparent scale-100 hover:transition-[0.5s] hover:bg-transparent hover:border hover:border-[color:var(--aquamarine)] hover:text-[white] hover:border-solid transition-[0.5s] ml-[-0.8em] scale-[0.7] hover:scale-75'>
-                        <a class="download-btn pl-2.5" href="#">Download Extension</a>
-                    </div>
-                </ul>
-                <div class="mobile-menu-btn"></div>
-            </div>
       </div>
+      <menu className={nav ? 'active' : undefined}>
+        <li>
+          <a href="/" className={view === 'home' ? 'underline' : undefined} aria-current={view === 'home' ? 'page' : undefined}>Home</a>
+        </li>
+        <li>
+          <a href="/vision" className={view === 'vision' ? 'underline' : undefined} aria-current={view === 'vision' ? 'page' : undefined}>Vision</a>
+        </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>
+        </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>
+        </li>
+      </menu>
+      <button className="hamburger" onClick={toggleNav}>☰</button>
+    </nav>
   )
 }
 

src/components/Navbar/NavbarStyles.css

@@ -1,83 +1,73 @@
-.nav-menu {
+nav {
   display: flex;
-    align-items: flex-end;
+  justify-content: space-between;
-    padding: 1em;
+  align-items: center;
+  height: 9.375rem;
+  padding: 2.5rem 3%;
+  background: #031418;
+  font-size: 1.125rem;
+  white-space: nowrap;
+
+  .logo {
+    flex-shrink: 0;
+
+    img {
+      width: 13.125rem;
+      height: 4.274rem;
+    }
+  }
 }
 
-li {
+menu {
-    padding: 1rem;
+  display: flex;
-}
+  align-items: center;
 
-.header-alt {
+  li > a {
-    color: var(--aquamarine);
+    display: block;
-    font-family: var(--font-family-jetbrains-mono);
+    padding: 1rem 1.125rem;
   }
 
   .download-btn {
-    letter-spacing: 0;
+    margin-left: 1.25rem;
-    min-height: 26px;
+  }
-    text-align: center;
-    width: 234px;
-    display: block;
 }
 
 .hamburger {
   display: none;
-    cursor: default;
+  font-size: var(--font-size-xxl);
-}
+  cursor: pointer;
-
+  z-index: 1;
-.mobile-menu {
+  margin: 0 2.125rem;
-    display: none;
 }
 
 @media screen and (width <=940px) {
-    .nav-menu {
+  menu {
-        display: none;
+    display: flex;
+    align-items: flex-start;
+    flex-direction: column;
+    position: absolute;
+    top: -100vh;
+    right: 3%;
+    padding: 1rem;
+    border: 1px solid red;
+    border-radius: 0.5rem;
+    transition: top 250ms;
+
+    &.active {
+      top: 2.25rem;
+    }
+
+    li > a {
+      padding-top: 0.5rem;
+      padding-bottom: 0.5rem;
+    }
+
+    .download-btn {
+      margin: 0.5rem 0 0 0;
+    }
   }
 
   .hamburger {
     display: block;
-        position: flex;
-        max-width: fit-content;
-        z-index: 999;
-        font-size: var(--font-size-xl);
-        -webkit-tap-highlight-color: transparent;
-        cursor: default;
-    }
-
-    .mobile-menu {
-        display: flex;
-        flex-direction: column;
-        width: auto;
-        margin-left: 50%;
-        top: -100vh;
-        right: 0;
-        opacity: 100;
-        position: absolute;
-        justify-content: space-between;
-        align-items: flex-end;
-        background-color: #031418;
-        border-radius: 10px;
-        outline: solid #07363fa7 0.1px;
-        box-shadow: 0.1px 4px 4px #00000096;
-        transition: 0.55s;
-        z-index: 998 !important;
-    }
-
-    .active {
-        top: 2em;
-    }
-
-    .mobile-menu li {
-        padding: 1em 0.5em;
-        margin: 0 1em;
-    }
-
-    .download-btn {
-        letter-spacing: 0;
-        min-height: 26px;
-        text-align: center;
-        width: 234px;
-        display: block;
   }
 }

src/components/P1/Footer/Footer.astro

@@ -1,144 +0,0 @@
----
-import "./FooterStyles.css";
----
-
-<div class="footer-cards">
-    <div class="h-auto bg-[#020E10];">
-        <h6>
-            <div class="footer-logo"></div>
-            <ul>
-                <span class="footer-email"></span><span
-                    class="text-[calc(10px_+_(21_-_10)_*_((100vw_-_300px)_/_(1600_-_300)))] font-thin not-italic pr-[6vw]"
-                    >contact@lumeweb.com</span
-                >
-                <span class="footer-h2">Freedom, privacy, ownership.</span>
-                <div class="footer-span"></div>
-            </ul>
-        </h6>
-    </div>
-    <div class="h-auto bg-[#020E10];">
-        <h5
-            class="inline-block text-left text-[calc(15px_+_(21_-_10)_*_((100vw_-_300px)_/_(1600_-_300)))]"
-            style="padding-left: 0.25em;"
-        >
-            General
-        </h5><br /><h6>
-            <li
-                class="footer-li text-[#808687] text-[calc(10px_+_(21_-_10)_*_((100vw_-_300px)_/_(1600_-_300)))] font-thin not-italic leading-[1px] pl-0"
-            >
-                Home
-            </li>
-            <li
-                class="footer-li text-[#808687] text-[calc(10px_+_(21_-_10)_*_((100vw_-_300px)_/_(1600_-_300)))] font-thin not-italic leading-[1px] pl-0"
-            >
-                Get Started
-            </li>
-            <li
-                class="footer-li text-[#808687] text-[calc(10px_+_(21_-_10)_*_((100vw_-_300px)_/_(1600_-_300)))] font-thin not-italic leading-[1px] pl-0"
-            >
-                Documentation
-            </li>
-            <li
-                class="footer-li text-[#808687] text-[calc(10px_+_(21_-_10)_*_((100vw_-_300px)_/_(1600_-_300)))] font-thin not-italic leading-[1px] pl-0"
-            >
-                Projects
-            </li>
-        </h6>
-    </div>
-    <div class="h-auto bg-[#020E10];">
-        <h5
-            class="inline-block text-left text-[calc(15px_+_(21_-_10)_*_((100vw_-_300px)_/_(1600_-_300)))]"
-            style="padding-left: 0.25em;"
-        >
-            Community
-        </h5><br /><h6>
-            <li
-                class="footer-li text-[#808687] text-[calc(10px_+_(21_-_10)_*_((100vw_-_300px)_/_(1600_-_300)))] font-thin not-italic leading-[1px] pl-0"
-            >
-                GitHub
-            </li>
-            <li
-                class="footer-li text-[#808687] text-[calc(10px_+_(21_-_10)_*_((100vw_-_300px)_/_(1600_-_300)))] font-thin not-italic leading-[1px] pl-0"
-            >
-                Discord
-            </li>
-            <li
-                class="footer-li text-[#808687] text-[calc(10px_+_(21_-_10)_*_((100vw_-_300px)_/_(1600_-_300)))] font-thin not-italic leading-[1px] pl-0"
-            >
-                Twitter
-            </li>
-            <li
-                class="footer-li text-[#808687] text-[calc(10px_+_(21_-_10)_*_((100vw_-_300px)_/_(1600_-_300)))] font-thin not-italic leading-[1px] pl-0"
-            >
-                facebook
-            </li>
-        </h6>
-    </div>
-    <div class="h-auto bg-[#020E10];">
-        <h5
-            class="inline-block text-left text-[calc(15px_+_(21_-_10)_*_((100vw_-_300px)_/_(1600_-_300)))]"
-            style="padding-left: 0.25em;"
-        >
-            Ecosystem
-        </h5><br /><h6>
-            <li
-                class="footer-li text-[#808687] text-[calc(10px_+_(21_-_10)_*_((100vw_-_300px)_/_(1600_-_300)))] font-thin not-italic leading-[1px] pl-0"
-            >
-                Browser
-            </li>
-            <li
-                class="footer-li text-[#808687] text-[calc(10px_+_(21_-_10)_*_((100vw_-_300px)_/_(1600_-_300)))] font-thin not-italic leading-[1px] pl-0"
-            >
-                Extension
-            </li>
-            <li
-                class="footer-li text-[#808687] text-[calc(10px_+_(21_-_10)_*_((100vw_-_300px)_/_(1600_-_300)))] font-thin not-italic leading-[1px] pl-0"
-            >
-                Universal Storage
-            </li>
-        </h6>
-    </div>
-    <div class="h-auto bg-[#020E10];">
-        <h5
-            class="inline-block text-left text-[calc(15px_+_(21_-_10)_*_((100vw_-_300px)_/_(1600_-_300)))]"
-            style="padding-left: 0.25em;"
-        >
-            Other
-        </h5><br /><h6>
-            <li
-                class="footer-li text-[#808687] text-[calc(10px_+_(21_-_10)_*_((100vw_-_300px)_/_(1600_-_300)))] font-thin not-italic leading-[1px] pl-0"
-            >
-                BrowserUniversal
-            </li>
-            <li
-                class="footer-li text-[#808687] text-[calc(10px_+_(21_-_10)_*_((100vw_-_300px)_/_(1600_-_300)))] font-thin not-italic leading-[1px] pl-0"
-            >
-                Storage
-            </li>
-        </h6>
-    </div>
-    <div class="h-auto bg-[#020E10];">
-        <h5
-            class="inline-block text-left text-[calc(15px_+_(21_-_10)_*_((100vw_-_300px)_/_(1600_-_300)))]"
-            style="padding-left: 0.25em;"
-        >
-            Support Us
-        </h5><br /><h6>
-            <li
-                class="footer-li text-[#808687] text-[calc(10px_+_(21_-_10)_*_((100vw_-_300px)_/_(1600_-_300)))] font-thin not-italic leading-[1px] pl-0"
-            >
-                Donate
-            </li>
-            <li
-                class="footer-li text-[#808687] text-[calc(10px_+_(21_-_10)_*_((100vw_-_300px)_/_(1600_-_300)))] font-thin not-italic leading-[1px] pl-0"
-            >
-                Download App
-            </li>
-            <li
-                class="footer-li text-[#808687] text-[calc(10px_+_(21_-_10)_*_((100vw_-_300px)_/_(1600_-_300)))] font-thin not-italic leading-[1px] pl-0"
-            >
-                Partnerships
-            </li>
-        </h6>
-    </div>
-</div>

src/components/P1/Footer/FooterStyles.css

@@ -1,86 +0,0 @@
-.footer-li {
-    font-family: var(--font-family-jaldi);
-    margin-inline: 0.5vw;
-    list-style-type: none;
-    white-space: nowrap;
-}
-
-.footer-cards {
-    margin: 0 auto;
-    display: grid;
-    gap: 1rem;
-    padding: 7% 12%;
-    background-color: #020E10;
-    height: auto;
-}
-
-@media (width >=600px) {
-    .footer-cards {
-        grid-template-columns: repeat(3, 1fr);
-        gap: 1rem;
-    }
-
-    .footer-li {
-        margin-inline: 0.7vw;
-    }
-}
-
-@media (width >=900px) {
-    .footer-cards {
-        grid-template-columns: repeat(6, 1fr);
-    }
-
-    .footer-li {
-        margin-inline: 0.5vw;
-    }
-}
-
-@media (width <=600px) {
-    .footer-li {
-        margin-inline: 1vw;
-    }
-}
-
-.footer-logo {
-    background-image: url('../../../assets/lume-logo.webp');
-    background-repeat: no-repeat;
-    background-size: contain;
-    height: 8.1vh;
-    min-width: 130px;
-    display: inline-block;
-    text-align: left;
-    z-index: 998 !important;
-}
-
-.footer-email {
-    background-image: url('../../../assets/email-icon.webp');
-    background-repeat: no-repeat;
-    background-size: contain;
-    background-position: left;
-    margin-right: 2%;
-    padding-inline: 10px;
-    height: 14px;
-    line-height: 5.5vh;
-}
-
-.footer-h2 {
-    font-size: calc(12px + (20 - 10) * ((100vw - 300px) / (1600 - 300)));
-    color: var(--aquamarine);
-    line-height: 1vh;
-    z-index: 999;
-    margin-top: 5em;
-    white-space: nowrap;
-}
-
-.footer-padding {
-    display: inline-block;
-    text-align: left;
-    font-family: var(--font-family-jaldi);
-    font-size: calc(15px + (21 - 10) * ((100vw - 300px) / (1600 - 300)));
-    margin-inline: -5px;
-    margin-top: 5vh;
-}
-
-.footer-span {
-    margin-top: 1em;
-}

src/components/P1/Meme/Meme.astro

@@ -1,35 +0,0 @@
----
-import "./MemeStyles.css";
----
-
-<div class="meme-container">
-    <div class="meme-wrapper">
-        <div class="meme-bg">
-            <span
-                class="absolute leading-[18.5vh] text-[#2C9940] left-[65%] top-[10%]"
-                >web1<br />web2<br />crypto & defi<br />web3</span
-            >
-            <div class="meme-columns meme-translucent">
-                <h2
-                    class="text-[calc(15px_+_(25_-_10)_*_((100vw_-_300px)_/_(1600_-_300)))] text-[color:var(--aquamarine)] uppercase font-bold"
-                >
-                    TITLE
-                </h2>
-                <h3
-                    class="left meme-bp text-[calc(30px_+_(45_-_30)_*_((100vw_-_300px)_/_(1600_-_300)))] min-w-[75vw] z-[999] mt-[0.5em]"
-                >
-                    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>
-        </div>
-        <div class="img-right"></div>
-    </div>
-</div>

src/components/P1/Meme/MemeStyles.css

@@ -1,107 +0,0 @@
-.meme-container {
-    align-self: flex-start;
-    position: relative;
-    width: 100%;
-    justify-content: center;
-    margin-block: 5vh;
-    padding-block: 5vh;
-}
-
-.meme-bp {
-    padding-right: 45%;
-}
-
-.meme-wrapper {
-    background-image: url("../../../assets/tilted-rectangle.webp");
-    background-size: 100% 100%;
-    background-position: center;
-    background-repeat: no-repeat;
-    width: 100%;
-    padding-block: 2.1em;
-    justify-content: center;
-    align-items: center;
-    overflow: hidden;
-    display: flex;
-    height: 80vh;
-    transition: 0.5s;
-}
-
-.meme-bg {
-    background-image: url("../../../assets/meme.webp");
-    background-position: 60% 50%;
-    background-size: contain;
-    background-repeat: no-repeat;
-    height: calc(100% + 3vh);
-    transition: 0.5s;
-}
-
-.meme-columns {
-    display: grid;
-    position: relative;
-    margin-block: calc(10% + 1.5625vh);
-}
-
-@media screen and (width <=1050px) {
-    .meme-container {
-        z-index: 999 !important;
-        width: 100%;
-        transition: 0.5s;
-    }
-
-    .meme-bp {
-        padding-right: 0%;
-    }
-
-    .meme-wrapper {
-        width: 100%;
-        padding-inline: 15%;
-        padding-left: 18%;
-        height: 80vh;
-        transition: 0.5s;
-    }
-
-    .meme-translucent {
-        max-width: 100%;
-        transition: 0.5s;
-        background-color: #020e10ac;
-        border-radius: 15px;
-    }
-
-    .meme-bg {
-        background-position: 50% 50%;
-        z-index: 999 !important;
-    }
-
-    .meme-columns {
-        display: grid;
-        position: relative;
-        margin-block: calc(25% + 1.5625vh);
-        transition: 0.5s;
-    }
-}
-
-@media screen and (width >=2200px) {
-    .meme-container {
-        width: 100%;
-        justify-content: center;
-        display: inline-block;
-        transition: 0.5s;
-    }
-
-    .meme-translucent {
-        max-width: 30%;
-        transition: 0.5s;
-        background-color: none;
-        border-radius: 15px;
-    }
-}
-
-@keyframes textShine {
-    0% {
-        background-position: 0% 50%;
-    }
-
-    100% {
-        background-position: 100% 50%;
-    }
-}

src/components/P1/Vision/Vision.astro

@@ -1,39 +0,0 @@
----
-import "./VisionStyles.css";
----
-
-<div
-    class="mt-[166px] items-start flex pb-[5vh] bg-[url(../../../src/assets/video-placeholder.webp)] pb-[10%] bg-[80%_65%] bg-no-repeat bg-contain transition-[0.5s]"
-    style="padding-bottom: 5vh; vertical-align: center; padding-inline: 11.9%;"
->
-    <div>
-        <span id="vision"></span>
-        <h2
-            class="text-[calc(15px_+_(25_-_10)_*_((100vw_-_300px)_/_(1600_-_300)))] text-[color:var(--aquamarine)] uppercase font-bold"
-        >
-            OUR VISION
-        </h2>
-        <h3
-            class="text-[calc(30px_+_(45_-_30)_*_((100vw_-_300px)_/_(1600_-_300)))] min-w-[75vw] z-[999] mt-[0.5em]"
-        >
-            Make Web3 easy for <br /> everyone
-        </h3>
-        <h4
-            class="left vt transition-[0.5s] 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]"
-        >
-            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.
-        </h4>
-        <div
-            class="items-center transition-[0.3s] hover:text-[white] bg-[color:var(--aquamarine)] flex h-[49px] ml-[-1.5px] max-w-[195px] text-black mt-[22px] px-[3px] py-0 rounded-[5px] border-solid border-transparent scale-100 hover:transition-[0.5s] hover:bg-transparent hover:border hover:border-[color:var(--aquamarine)] hover:text-[white] hover:border-solid transition-[0.5s]"
-        >
-            <a
-                class="tracking-[0] min-h-[26px] text-center w-[234px] block"
-                href="#"
-            >
-                Download Extension</a
-            >
-        </div>
-    </div>
-</div>

src/components/P1/Vision/VisionStyles.css

@@ -1,11 +0,0 @@
-.vt {
-    background-color: rgba(0 0 0 0%);
-}
-
-@media screen and (width <=1200px) {
-    .vt {
-        background-color: #031418a7;
-        border-radius: 15px;
-        transition: 0.5s;
-    }
-}

src/layouts/Layout.astro

@@ -0,0 +1,30 @@
+---
+import "../styles/global.css";
+import Navbar from "../components/Navbar/Navbar.jsx";
+import Footer from "../components/Footer/Footer.astro";
+
+export interface Props {
+  view: string;
+  title: string;
+}
+
+const { view, title } = Astro.props;
+---
+
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <title>{title}</title>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=5.0" />
+    <meta name="description" content="Lume Web - Web3 for the masses | Install the Lume Web3 Extension and have a 1-click gateway into the Web3 internet on Opera, Vivaldi, Edge and Firefox." />
+    <meta name="keywords" content="Web3 Extension, Lume Web, Web3" />
+  </head>
+  <body>
+    <Navbar view={view} client:load />
+    <main>
+      <slot />
+    </main>
+    <Footer />
+  </body>
+</html>

src/pages/donate.astro

@@ -0,0 +1,7 @@
+---
+import Layout from '../layouts/Layout.astro';
+---
+
+<Layout view="donate" title="Donate - Lume Web">
+
+</Layout>

src/pages/index.astro

@@ -1,36 +1,17 @@
 ---
-import Navbar from "../components/Navbar/Navbar.jsx";
+import Layout from '../layouts/Layout.astro';
-import CTO from "../components/P1/CTO/CTO.astro";
+import CTO from "../components/Home/CTO/CTO.astro";
-import Footer from "../components/P1/Footer/Footer.astro";
+import Grids from "../components/Home/Grid/Grid.astro";
-import Grids from "../components/P1/Grid/Grid.astro";
+import Header from "../components/Home/Header/Header.astro";
-import Header from "../components/P1/Header/Header.astro";
+import Meme from "../components/Home/Meme/Meme.astro";
-import Meme from "../components/P1/Meme/Meme.astro";
+import Message from "../components/Home/Message/Message.astro";
-import Message from "../components/P1/Message/Message.astro";
+import Powered from "../components/Home/Powered/Powered.astro";
-import Powered from "../components/P1/Powered/Powered.astro";
+import Socials from "../components/Home/Socials/Socials.astro";
-import Socials from "../components/P1/Socials/Socials.astro";
+import Vision from "../components/Home/Vision/Vision.astro";
-import Vision from "../components/P1/Vision/Vision.astro";
+import Whatisweb3 from "../components/Home/Whatisweb3/Whatisweb3.astro";
-import Whatisweb3 from "../components/P1/Whatisweb3/Whatisweb3.astro";
-import "../index.css";
 ---
 
-<!DOCTYPE html>
+<Layout view="home" title="Lume Web - Web3 for the masses">
-<html lang="en">
-	<head>
-		<title>Lume Web - Web3 for the masses</title>
-		<meta charset="utf-8" />
-		<meta
-			name="viewport"
-			content="width=device-width, initial-scale=1.0, maximum-scale=5.0"
-		/>
-		<meta
-			name="description"
-			content="Lume Web - Web3 for the masses | Install the Lume Web3 Extension and have a 1-click gateway into the Web3 internet on Opera, Vivaldi, Edge, and Firefox."
-		/>
-		<meta name="keywords" content="Web3 Extension, Lume Web, Web3" />
-		<link rel="stylesheet" href="./src/index.css" />
-	</head>
-	<body>
-		<Navbar client:load />
   <Header />
   <Vision />
   <Whatisweb3 />
@@ -40,6 +21,4 @@ import "../index.css";
   <Socials />
   <CTO />
   <Message />
-		<Footer />
+</Layout>
-	</body>
-</html>

src/pages/vision.astro

@@ -0,0 +1,7 @@
+---
+import Layout from "../layouts/Layout.astro";
+---
+
+<Layout view="vision" title="Vision - Lume Web">
+
+</Layout>

src/pages/what-is-web3.astro

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

src/styles/global.css

@@ -1,55 +1,51 @@
 @import url("https://fonts.googleapis.com/css?family=Jaldi:400|JetBrains+Mono:400,700|IBM+Plex+Sans+Devanagari:400");
 
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
 :root {
   --primary-dark: rgba(0 0 0 100%);
   --primary-light: rgba(255 255 255 100%);
-  --black:
+  --black: rgba(0 0 0);
-    rgba(0 0 0);
+  --blue-charcoal: rgba(1 14 16);
-  --blue-charcoal:
+  --blue-charcoal-2: rgba(3 21 24);
-    rgba(1 14 16);
+  --aquamarine: rgba(122 252 187);
-  --blue-charcoal-2:
+  --cloud: rgba(199 199 199);
-    rgba(3 21 24);
+  --alto: rgba(217 217 217);
-  --aquamarine:
+  --white: rgba(255 255 255);
-    rgba(122 252 187);
+  --font-size-s: 10.25rem; /* 20px */
-  --cloud:
+  --font-size-m: 1.3125rem; /* 21px */
-    rgba(199 199 199);
+  --font-size-l: 1.5625rem; /* 25px */
-  --alto:
+  --font-size-xl: 1.875rem; /* 30px */
-    rgba(217 217 217);
+  --font-size-xxl: 2rem; /* 32px */
-  --white:
+  --font-size-xxxl: 2.8125rem; /* 45px */
-    rgba(255 255 255);
+  --font-size-xxxxl: 6.25rem; /* 100px */
-  --font-size-s: 20px;
-  --font-size-m: 21px;
-  --font-size-l: 25px;
-  --font-size-xl: 30px;
-  --font-size-xxl: 32px;
-  --font-size-xxxl: 45px;
-  --font-size-xxxxl: 100px;
   --font-family-ibm-plex-sans-devanagari: "IBM Plex Sans Devanagari";
   --font-family-jaldi: "Jaldi";
   --font-family-jetbrains-mono: "JetBrains Mono";
 }
 
-* {
-  box-sizing: border-box;
-  margin: 0;
-  padding: 0;
-}
-
 html {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
   scroll-behavior: smooth;
 }
 
-a,
-a:visited {
-  text-decoration: none;
-}
-
 body {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
   font-family: "JetBrains Mono", sans-serif;
   background-color: rgb(3 20 24);
   color: white;
 }
 
+main {
+  flex-grow: 1;
+}
+
 .body-block {
   align-items: center;
   display: flex;
@@ -96,7 +92,6 @@ h2 {
 
 h3 {
   font-size: calc(30px + (45 - 30) * ((100vw - 300px) / (1600 - 300)));
-  min-width: 75vw;
   margin-top: 0.5em;
   z-index: 999;
 }
@@ -131,16 +126,27 @@ h6 {
   max-width: 300;
 }
 
-ul {
-  list-style-type: none;
-}
-
 .container {
   max-width: 1240px;
   margin: auto;
   padding: 0 1rem;
 }
 
+.btn-main {
+    display: inline-block;
+    color: var(--black);
+    background: var(--aquamarine);
+    border: 1px solid var(--aquamarine);
+    padding: 0.625rem 1rem;
+    border-radius: 0.3125rem;
+    transition: color 200ms, background 200ms;
+
+    &:hover {
+        color: var(--white);
+        background: transparent;
+    }
+}
+
 @media screen and (width <= 1050px) {
   .left {
     display: flex;