fix: last minute details

src/components/Home/Socials/Socials.scss

@@ -1,50 +0,0 @@
-@import "/src/styles/mixins.scss";
-@import "/src/styles/vars.scss";
-
-#socials {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    justify-content: center;
-    gap: 3em;
-    margin: 12em 7.5% 8em;
-
-    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;
-    }
-
-    a {
-        padding: 0.5em;
-        color: $color-alto;
-
-        &:hover {
-            color: $color-white;
-        }
-    }
-
-    .github-logo svg {
-        @include fluid-width(3.5rem);
-    }
-
-    .git-logo svg {
-        @include fluid-width(3.5rem);
-    }
-
-    .discord-logo svg {
-        @include fluid-width(3.5rem);
-    }
-
-    .twitter-logo svg {
-        @include fluid-width(3.5rem);
-    }
-}

src/components/Layout/JoinCommunity/JoinCommunity.astro

@@ -7,10 +7,12 @@ import svgTwitter from "/src/assets/icons/twitter.svg?raw";
 
 <section
   id="join-community"
-  class="bg-primary space-between text-black p-20 lg:px-40 flex flex-col lg:flex-row"
+  class="bg-primary max-w-[100vw] space-between text-black gap-10 p-10 my-10 lg:py-20 lg:px-40 flex flex-col lg:flex-row"
 >
-  <div class="w-full">
+  <div
-    <h2 class="text-3xl font-bold lg:text-4xl font-display">
+    class="w-full items-center justify-center lg:items-start lg:justify-start flex flex-col"
+  >
+    <h2 class="text-3xl font-bold lg:text-4xl font-display mb-3">
       Join our community, lend a hand.
     </h2>
     <p class="text-xl lg:text-2xl font-body">

src/components/What/NewWorld/NewWorld.astro

@@ -3,7 +3,10 @@ import FeaturedGroup from "../../ui/FeaturedGroup.astro";
 import backgroundSrc from "/src/assets/new-world-bg.png";
 ---
 
-<section id="new-world" class="mx-10 md:mx-20 lg:mx-40 relative h-[850px]">
+<section
+  id="new-world"
+  class="mx-10 md:mx-20 lg:mx-40 relative h-[400px] lg:h-[850px]"
+>
   <div class="-z-10 absolute top-0 right-0 bottom-0 w-[1500px] -mx-40 h-full">
     <img class="object-cover w-full max-w-none" src={backgroundSrc.src} />
   </div>