additional changes

src/sections/LandingSection.tsx

@@ -1,11 +1,16 @@
 import { useEffect, useState } from 'react';
 import { motion, useScroll } from 'framer-motion';
+import { useMediaQuery } from 'usehooks-ts';
 import { chains } from './integrationsData';
 import styles from "styles/LandingSection.module.scss"
+import classNames from 'classnames/bind';
+
+const cx = classNames.bind(styles);
 
 const LandingSection = () => {
   const { scrollY } = useScroll() as any;
   const [northScrollY, setNorthScrollY] = useState(false);
+  const isMobile = useMediaQuery('(max-width: 768px)');
 
   useEffect(() => {
     scrollY.onChange(() => {
@@ -144,7 +149,7 @@ const LandingSection = () => {
         width={800}
       />
 
-      <div className={styles.integrations}>
+      <div className={cx(styles.integrations, { isMobile })}>
         <h3>
           Integrations & Staking Partners
         </h3>
@@ -161,8 +166,8 @@ const LandingSection = () => {
                 src={chain.logo}
                 alt={chain.name}
                 style={{
-                  width: chain.sizeOverride || '32px',
-                  height: chain.sizeOverride || '32px',
+                  width: chain.sizeOverride || '28px',
+                  height: chain.sizeOverride || '28px',
                   margin: chain.sizeOverride ? '0 -6px' : '0px',
                 }}
               />

src/sections/integrationsData.tsx

@@ -24,7 +24,7 @@ const chains = [
     name: 'Carbon',
     logo: '/Images/Integrations/CarbonLogo.svg',
     link: 'https://carbon.network',
-    sizeOverride: '42px',
+    sizeOverride: '38px',
   },
   {
     name: 'Backbone Labs',
@@ -35,7 +35,7 @@ const chains = [
     name: 'Chihuahua',
     logo: '/Images/Integrations/ChihuahuaLogo.svg',
     link: 'https://www.chihuahua.wtf/',
-    sizeOverride: '42px',
+    sizeOverride: '38px',
   },
 ];
 

src/styles/LandingSection.module.scss

@@ -79,7 +79,7 @@
       gap: 1.5rem;
 
       h1 {
-        font-size: 42px;
+        font-size: 36px;
       }
 
       h6 {
@@ -92,6 +92,18 @@
     }
   }
 
+  @media screen and (max-height: 667px) {
+    .text_container {
+      h6 {
+        font-size: 12px;
+      }
+
+      p {
+        font-size: 10px;
+      }
+    }
+  }
+
   .button_container {
     display: flex;
     flex-direction: row;
@@ -115,7 +127,7 @@
       padding: 14px 36px;
       font-family: Gotham,sans-serif;
       font-size: 14px;
-      font-weight: 500;
+      font-weight: 600;
       line-height: 21px;
       transition: all .2s;
 
@@ -166,12 +178,18 @@
     @media screen and (max-width: 500px) {
       .button {
         min-width: 120px;
-        padding: 12px 28px;
-        font-size: 14px;
+        // padding: 12px 28px;
+        padding: 10px 14px;
+        font-size: 12px;
       }
     }
 
     @media screen and (max-height: 667px) {
+      .button {
+        padding: 8px 10px;
+        font-size: 11px;
+        min-width: unset;
+      }
       margin-top: 0;
     }
   }
@@ -384,7 +402,6 @@
       gap: 14px;
       .icon_only {
         img {
-
           width: 32px;
           height: 32px;
         }
@@ -396,8 +413,25 @@
     }
 
     @media screen and (max-width: 300px) {
-      flex-wrap: wrap;
-      bottom: -200px;
+      h3 {
+        font-size: 14px;
+      }
+      .icons {
+        width: 100%;
+        flex-wrap: wrap;
+      }
+    }
+  }
+
+  .isMobile {
+    position: relative;
+    bottom: 0;
+    margin-top: 48px;
+    gap: 8px;
+
+    @media screen and (max-height: 700px) {
+      gap: 4px;
+      margin-top: 28px;
     }
   }
 }

src/styles/globals.scss

@@ -51,6 +51,7 @@ body {
 body {
   color: var(--font-color);
   background: var(--bg);
+  overflow: hidden;
 }
 
 a {