fix: responsive is now all over the page :)

src/components/Home/CTO/CTO.astro

@@ -3,15 +3,17 @@ import avatar from "/src/assets/cto-avatar.png";
 import abstractBg from "/src/assets/single-brand-bg-1.png";
 ---
 
-<section id="cto" class="w-full my-24 mx-20 xl:mx-40 flex flex-row">
+<section id="cto" class="w-full my-24 flex flex-row">
-  <div class="flex flex-col max-w-xl space-y-10">
+  <div class="flex flex-col mx-10 sm:mx-20 xl:mx-40 lg:max-w-xl gap-y-10">
-    <h2 class="font-display text-primary font-bold text-2xl uppercase">
+    <h2
+      class="font-display text-primary font-bold text-xl md:text-2xl uppercase"
+    >
       Community-Powered
     </h2>
-    <h3 class="font-display text-6xl font-bold">
+    <h3 class="font-display text-4xl md:text-6xl font-bold">
       Building a new world for your data
     </h3>
-    <p class="font-body text-2xl text-body">
+    <p class="font-body text-xl md:text-3xl 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.

src/components/Home/Meme/Meme.astro

@@ -1,29 +1,29 @@
 ---
-import meme1 from "/src/assets/meme-1.png";
-import meme2 from "/src/assets/meme-2.png";
-import meme3 from "/src/assets/meme-3.png";
-import meme4 from "/src/assets/meme-4.png";
 import mulletMeme from "/src/assets/centralized-mullet-meme.png";
 ---
 
 <section id="meme" class="tilted-bg">
-  <div class="flex flex-row gap-10 md:mx-20 xl:mx-40">
+  <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 class="font-display text-primary font-bold text-2xl uppercase">
+      <h2
+        class="font-display text-primary font-bold text-xl md:text-2xl uppercase"
+      >
         BUSTING THE DECENTERALIZED WEB3 MYTH
       </h2>
-      <h3 class="font-display text-6xl font-bold">The Centralized Mullet</h3>
+      <h3 class="font-display text-4xl md:text-6xl font-bold">
-      <p class="font-body text-2xl text-body">
+        The Centralized Mullet
+      </h3>
+      <p class="font-body text-xl md:text-3xl text-body">
         Right now, despite many claims, a majority, if not all, the services
         that build the legos of Web3 are actually centralized, both with what
         you can see and what you can't.
       </p>
 
-      <p class="font-body text-2xl text-body">
+      <p class="font-body text-xl md:text-3xl text-body">
         While some blockchains may be more decentralized than others, access to
         nearly every blockchain is also entralized.
       </p>
-      <p class="font-body text-2xl text-body">
+      <p class="font-body text-xl md:text-3xl text-body">
         So consider this a call to action for our community to go back to ethos
         and make Web3 real.
       </p>

src/components/Home/Typewriter/Typewriter.astro

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

src/components/Home/Typewriter/Typewriter.scss

@@ -1,24 +0,0 @@
-@import "/src/styles/mixins.scss";
-@import "/src/styles/vars.scss";
-
-#typewriter {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  padding: 0 7.5%;
-
-  h1 {
-    @apply text-9xl;
-    display: flex;
-    align-items: center;
-    min-height: 2.2em;
-    margin: max(1.1em, 5rem) 0 max(0.9em, 7rem);
-    line-height: 110%;
-    letter-spacing: -0.06em;
-    text-align: center;
-  }
-
-  .highlight {
-    color: $color-aquamarine;
-  }
-}

src/components/Home/Typewriter/TypewriterContent.jsx

@@ -12,13 +12,13 @@ const HeaderContent = () => {
     words = randomString.split(' ');
 
   return (
-    <Typewriter options={{ cursor: '<span class="highlight">_</span>' }} onInit={(typewriter) => {
+    <Typewriter options={{ cursor: '<span class="text-primary">_</span>' }} onInit={(typewriter) => {
       typewriter
         .changeDelay(50)
         .typeString(randomString.substring(0, randomString.lastIndexOf(' ')) + ' ')
         .start();
       typewriter
-        .typeString('<span class="highlight">' + words[words.length - 1] + '</span>')
+        .typeString('<span class="text-primary">' + words[words.length - 1] + '</span>')
     }} />
   );
 };

src/components/Home/Vision/Vision.astro

@@ -1,17 +1,22 @@
-<section id="vision" class="space-y-10 mx-20 xl:mx-40">
+<section
-  <h2 class="font-display text-primary font-bold text-2xl uppercase">
+  id="vision"
+  class="bg-black/40 p-5 lg:bg-transparent lg:p-0 space-y-10 mx-10 sm:mx-20 xl:mx-40"
+>
+  <h2 class="font-display text-primary font-bold text-xl md:text-2xl uppercase">
     Our Vision
   </h2>
-  <h3 class="font-display text-6xl font-bold">Make Web3 easy for everyone</h3>
+  <h3 class="font-display text-4xl md:text-6xl font-bold">
-  <p class="font-body text-3xl text-body">
+    Make Web3 easy for everyone
+  </h3>
+  <p class="font-body text-xl md: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">
+  <div class="pt-10 w-full">
     <a
       href="#"
-      class="text-2xl rounded-md bg-primary py-3 px-10 text-[black] font-body"
+      class="text-2xl w-full block text-center sm:w-auto rounded-md bg-primary py-3 px-10 text-[black] font-body"
       >Download Extension</a
     >
   </div>

src/components/Home/Web3/Web3.astro

@@ -1,21 +1,28 @@
-<section id="web3" class="flex flex-row mx-40">
+<section
-  <div class="flex-1 -ml-40">
+  id="web3"
-    <img src="/src/assets/home-gfx-left.png" />
+  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 -ml-10 -mr-20 lg:-ml-40 lg:mr-0">
+    <img src="/src/assets/home-gfx-left.png" class="w-full" />
   </div>
-  <div class="flex-1 space-y-10 flex flex-col justify-center">
+  <div class="flex-1 -mt-40 space-y-10 flex flex-col justify-center">
-    <h2 class="font-display text-primary font-bold text-2xl uppercase">
+    <h2
+      class="font-display text-primary font-bold text-xl md:text-2xl uppercase"
+    >
       What is the Web?
     </h2>
-    <h3 class="font-display text-6xl font-bold">Why Web3 matters</h3>
+    <h3 class="font-display text-4xl md:text-6xl font-bold">
-    <p class="font-body text-3xl text-body">
+      Why Web3 matters
+    </h3>
+    <p class="font-body text-xl md:text-3xl text-body">
       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>
-    <div class="pt-10">
+    <div class="pt-10 w-full">
       <a
-        href="/what-is-web3"
+        href="#"
-        class="text-2xl rounded-md bg-primary py-3 px-10 text-[black] font-body"
+        class="text-2xl w-full block text-center sm:w-auto rounded-md bg-primary py-3 px-10 text-[black] font-body"
         >Learn More</a
       >
     </div>

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 lg:flex-row lg:flex"
+    class="hidden flex-col items-center gap-14 z-20 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>