fix: small improvement on 4k screens

src/components/Home/CTO/CTO.astro

@@ -26,8 +26,7 @@ import abstractBg from "/src/assets/single-brand-bg-1.png";
       </div>
     </div>
   </div>
-  <img
+  <div class="float-right w-1/2 -z-10 max-w-7xl">
-    src={abstractBg.src}
+    <img src={abstractBg.src} class="absolute max-xl:right-0 w-[800px]" />
-    class="float-right -z-10 absolute right-0 w-[800px]"
+  </div>
-  />
 </section>

src/components/Home/CTO/CTO.scss

@@ -1,66 +0,0 @@
-@import "/src/styles/mixins.scss";
-@import "/src/styles/vars.scss";
-
-#cto {
-  position: relative;
-  display: flex;
-  justify-content: flex-end;
-  align-items: center;
-  max-width: 185.6em;
-  min-height: 58.8em;
-  margin: 0 auto;
-
-  &::before {
-    content: "";
-    position: absolute;
-    top: 0;
-    bottom: 0;
-    left: min(0em, calc((100% - 95em) / 2));
-    width: calc(100% - 64em - 7.5%);
-    min-width: 95em;
-    background-image: url("/src/assets/single-brand-bg-1.png");
-    background-position: 50% 100%;
-    background-repeat: no-repeat;
-    background-size: contain;
-    z-index: -1;
-  }
-
-  .feature-group {
-    box-sizing: content-box;
-    margin: 6em 7.5%;
-    max-width: 64em;
-  }
-
-  .bio {
-    display: inline-flex;
-    align-items: center;
-    margin-top: 1.5em;
-    gap: 1.2em;
-    font-family: $font-family-jaldi;
-    @include fluid-font-size(1.5rem);
-    color: $color-cloud;
-
-    img {
-        @include fluid-width-height(5.875rem, 5.875rem);
-    }
-
-    strong {
-        @include fluid-font-size(1.625rem);
-        line-height: 133%;
-        color: $color-white;
-    }
-  }
-
-  @media screen and (max-width: 80rem) {
-    p, .bio div {
-      background: rgba($color-blue-charcoal-2, 0.75);
-      border-radius: 0 0.5em 0.5em 0;
-      padding: 0.3em 0.5em;
-      margin: -0.3em -0.5em;
-    }
-
-    .bio {
-      margin-top: 1.27em;
-    }
-  }
-}

src/components/Home/Grid/Grid.astro

@@ -1,30 +0,0 @@
----
-import './Grid.scss';
----
-
-<section id="grid" class="feature-grid">
-  <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>
-  <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>
-</section>

src/components/Home/Grid/Grid.scss

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

src/components/Home/Meme/Meme.scss

@@ -1,94 +0,0 @@
-@import "/src/styles/mixins.scss";
-@import "/src/styles/vars.scss";
-
-#meme {
-  display: flex;
-  align-items: center;
-  padding: 12em 7.5%;
-  gap: 10em;
-
-  .feature-group {
-    max-width: 64em;
-  }
-
-  .meme-items {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    gap: 1.5em;
-  }
-
-  .meme-item {
-    display: flex;
-    align-items: center;
-    gap: 2em;
-
-    div {
-      flex-shrink: 0;
-      display: flex;
-      align-items: center;
-      gap: 2em;
-    }
-
-    img {
-      @include fluid-width(13.125rem);
-    }
-
-    h2 {
-      width: 8.6em;
-      @include fluid-font-size(1.5625rem);
-      font-weight: 700;
-      text-align: center;
-      color: $color-aquamarine;
-      text-transform: uppercase;
-    }
-
-    p {
-      font-family: $font-family-jaldi;
-      @include fluid-font-size(1.3125rem);
-      line-height: 123.81%;
-      color: $color-cloud;
-    }
-  }
-
-  @media screen and (max-width: 80rem) {
-    flex-direction: column;
-    gap: 5em;
-
-    .feature-group {
-      max-width: none;
-      margin: 2em 0;
-    }
-  }
-
-  @media screen and (max-width: 56rem) {
-    .feature-group {
-      max-width: 64em;
-    }
-
-    .meme-items {
-      gap: 3em;
-    }
-
-    .meme-item {
-      flex-direction: column;
-      max-width: 64em;
-
-      p {
-        text-align: center;
-      }
-
-      img {
-        @include fluid-width(11.25rem);
-      }
-    }
-  }
-
-  @media screen and (min-width: 80.000001rem) and (max-width: 100rem) {
-    .meme-item {
-      h2 {
-        width: 4.5em;
-      }
-    }
-  }
-}

src/components/Home/Vision/Vision.astro

@@ -16,7 +16,7 @@
   <div class="pt-10 w-full">
     <a
       href="#"
-      class="text-2xl w-full block text-center sm:w-auto rounded-md bg-primary py-3 px-10 text-[black] font-body"
+      class="text-2xl w-full block text-center md:max-w-[350px] rounded-md bg-primary py-3 px-10 text-black font-body"
       >Download Extension</a
     >
   </div>

src/components/Home/Web3/Web3.astro

@@ -22,7 +22,7 @@
     <div class="pt-10 w-full">
       <a
         href="#"
-        class="text-2xl w-full block text-center sm:w-auto rounded-md bg-primary py-3 px-10 text-[black] font-body"
+        class="text-2xl w-full block text-center md:max-w-[250px] rounded-md bg-primary py-3 px-10 text-[black] font-body"
         >Learn More</a
       >
     </div>

src/layouts/Layout.astro

@@ -27,7 +27,7 @@ const { view, title } = Astro.props;
     />
     <meta name="keywords" content="Web3 Extension, Lume Web, Web3" />
   </head>
-  <body>
+  <body class="max-w-[1600px] mx-auto">
     <Navbar view={view} />
     <main class={view + " space-y-40"}>
       <slot />