From cf36b56c34c6f0a862294b02916c3dd0365e4938 Mon Sep 17 00:00:00 2001
From: Joshua <joshua.brigati@gmail.com>
Date: Mon, 5 Feb 2024 15:19:38 -0600
Subject: [PATCH 1/4] added new video and make some other uodates

---
 src/components/ Navigation/Navigation.tsx |   4 +-
 src/sections/LandingSection.tsx           | 169 +++++++++++++---------
 src/styles/LandingSection.module.scss     |  77 +++++++++-
 src/styles/globals.scss                   |   3 +
 4 files changed, 181 insertions(+), 72 deletions(-)

diff --git a/src/components/ Navigation/Navigation.tsx b/src/components/ Navigation/Navigation.tsx
index 400c0b5..e7b2f6e 100644
--- a/src/components/ Navigation/Navigation.tsx	
+++ b/src/components/ Navigation/Navigation.tsx	
@@ -79,11 +79,11 @@ const Navigation = (
         </div>
         <a
           className={styles.terra_link}
-          href='https://docs.alliance.terra.money/guides/get-started/'
+          href='https://docs.alliance.terra.money/overview/'
           target="_blank"
           rel="noopener noreferrer"
         >
-          <span>Integrate Alliance</span>
+          <span>Learn more</span>
         </a>
       </div>
     </motion.nav>
diff --git a/src/sections/LandingSection.tsx b/src/sections/LandingSection.tsx
index 085a051..739573e 100644
--- a/src/sections/LandingSection.tsx
+++ b/src/sections/LandingSection.tsx
@@ -11,6 +11,7 @@ const LandingSection = () => {
   const { scrollY } = useScroll() as any;
   const [northScrollY, setNorthScrollY] = useState(false);
   const isMobile = useMediaQuery('(max-width: 768px)');
+  const videoCutOff = useMediaQuery('(max-width: 1100px)');
 
   useEffect(() => {
     scrollY.onChange(() => {
@@ -49,95 +50,131 @@ const LandingSection = () => {
 
   return (
     <section className={styles.landing_section}>
-      <motion.div
-        className={styles.text_container}
-        variants={textContainerVariants}
-        initial="default"
-        whileInView="visible"
-        viewport={{ once: false }}
-      >
-        <div>
+      <div className={styles.container}>
+        <motion.div
+          className={styles.text_container}
+          variants={textContainerVariants}
+          initial="default"
+          whileInView="visible"
+          viewport={{ once: false }}
+        >
+          <div>
+            <motion.div
+              variants={fadeInVariants}
+              initial="initial"
+              whileInView="animate"
+              viewport={{ once: false }}
+            >
+              <h1>
+                Collaborate.
+              </h1>
+              <h1>
+                Reward.
+              </h1>
+              <h1>
+                Grow.
+              </h1>
+
+            </motion.div>
+          </div>
           <motion.div
             variants={fadeInVariants}
             initial="initial"
             whileInView="animate"
             viewport={{ once: false }}
           >
-            <h1>
-              Collaborate.
-            </h1>
-            <h1>
-              Reward.
-            </h1>
-            <h1>
-              Grow.
-            </h1>
-
+            <h6>
+              Alliance allows blockchains to trade yield with each other.
+            </h6>
           </motion.div>
-        </div>
-        <motion.div
-          variants={fadeInVariants}
-          initial="initial"
-          whileInView="animate"
-          viewport={{ once: false }}
-        >
-          <h6>
-            Alliance allows blockchains to trade yield with each other.
-          </h6>
-        </motion.div>
-        <motion.div
-          variants={fadeInVariants}
-          initial="initial"
-          whileInView="animate"
-          viewport={{ once: false }}
-        >
-          <p>
-            Alliance is an open-source Cosmos SDK module that enables blockchains to form mutually beneficial relationships, similar to trade agreements between countries. Using Alliance, a chain can allow almost any token—including liquid staking tokens, stablecoins, liquidity provider tokens, and other Cosmos assets—to be staked on their chain to earn staking rewards. In turn for providing a portion of the chain’s staking rewards to stakers of these tokens, the chain can redistribute a percentage of these staked Alliance assets to native token stakers.
-          </p>
-        </motion.div>
-        <motion.div
-          className={styles.button_container}
-          variants={fadeInVariants}
-          initial="initial"
-          whileInView="animate"
-          viewport={{ once: false }}
-        >
-          <a
-            className={styles.button}
-            href="https://twitter.com/terra_money/status/1695426843787305313"
-            target="_blank"
-            rel="noopener noreferrer"
+          {videoCutOff && (
+            <motion.div
+              variants={fadeInVariants}
+              initial="initial"
+              whileInView="animate"
+              viewport={{ once: false }}
+            >
+              <div className={styles.video__responsive}>
+                <iframe
+                  width="560"
+                  height="315"
+                  src="https://www.youtube.com/embed/Xoe9hTzKyeo?si=gU3eAbGoL9_cWqXb"
+                  title="YouTube video player"
+                  // frameBorder="0"
+                  allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
+                  allowFullScreen
+                />
+              </div>
+            </motion.div>
+          )}
+          <motion.div
+            variants={fadeInVariants}
+            initial="initial"
+            whileInView="animate"
+            viewport={{ once: false }}
           >
-            Stake Alliance assets
-          </a>
-          <a
-            className={styles.button}
-            href="https://docs.alliance.terra.money/overview/"
-            target="_blank"
-            rel="noopener noreferrer"
+            <p>
+              Alliance is an open-source Cosmos SDK module that enables blockchains to form mutually beneficial relationships, similar to trade agreements between countries. Using Alliance, a chain can allow almost any token—including liquid staking tokens, stablecoins, liquidity provider tokens, and other Cosmos assets—to be staked on their chain to earn staking rewards. In turn for providing a portion of the chain’s staking rewards to stakers of these tokens, the chain can redistribute a percentage of these staked Alliance assets to native token stakers.
+            </p>
+          </motion.div>
+          <motion.div
+            className={styles.button_container}
+            variants={fadeInVariants}
+            initial="initial"
+            whileInView="animate"
+            viewport={{ once: false }}
           >
-            Learn more
-          </a>
+            <a
+              className={styles.button}
+              href="https://medium.com/terra-money/how-to-stake-alliance-assets-a-step-by-step-guide-8e1b263830c2"
+              target="_blank"
+              rel="noopener noreferrer"
+            >
+              Stake Alliance Assets
+            </a>
+            <a
+              className={styles.button}
+              href='https://docs.alliance.terra.money/guides/get-started/'
+              target="_blank"
+              rel="noopener noreferrer"
+            >
+              Integrate Alliance
+            </a>
+          </motion.div>
         </motion.div>
-      </motion.div>
+
+        {!videoCutOff && (
+          <div className={styles.video__responsive}>
+            <iframe
+              width="560"
+              height="315"
+              src="https://www.youtube.com/embed/Xoe9hTzKyeo?si=gU3eAbGoL9_cWqXb"
+              title="YouTube video player"
+              // frameBorder="0"
+              allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
+              allowFullScreen
+            />
+          </div>
+        )}
+      </div>
 
       <div className={styles.blob_1} />
-      <div className={styles.blob_2} />
+      {/* <div className={styles.blob_2} /> */}
       <div className={styles.blob_3} />
 
       <div className={styles.ellipse_1} />
       <div className={styles.ellipse_2} />
-      <motion.div
+      {/* <motion.div
         variants={fadeInVariants}
         initial="initial"
         whileInView="animate"
         viewport={{ once: false }}
         custom={2}
         className={styles.ellipse_3}
-      />
+      /> */}
       <div className={styles.ellipse_4} />
 
-      <motion.img
+      {/* <motion.img
         variants={fadeInVariants}
         initial="initial"
         whileInView="animate"
@@ -147,7 +184,7 @@ const LandingSection = () => {
         alt="Alliance Logo"
         className={styles.alliance_outline}
         width={800}
-      />
+      /> */}
 
       <div className={cx(styles.integrations, { isMobile })}>
         <h3>
diff --git a/src/styles/LandingSection.module.scss b/src/styles/LandingSection.module.scss
index 0d8875c..0a6e5b7 100644
--- a/src/styles/LandingSection.module.scss
+++ b/src/styles/LandingSection.module.scss
@@ -6,19 +6,73 @@
   height: 100vh;
   min-height: 700px;
   width: 100%;
-  padding: 0 10vmax;
+  padding: 0 5vmax;
   text-align: center;
   position: relative;
   overflow-x: hidden;
   overflow-y: scroll;
 
+  .container {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: space-between;
+    width: 100%;
+    gap: 96px;
+
+    .video__responsive {
+      position: relative;
+      height: 100%;
+      width: 100%;
+      z-index: 1000;
+      display: flex;
+      justify-content: flex-end;
+      align-items: flex-start;
+      margin-top: 148px;
+      flex: 2;
+      max-width: 800px;
+
+      iframe {
+        border: 2px solid var(--border-color);
+        border-radius: 8px;
+        // filter: drop-shadow(0px 20px 20px hsl(230, 9%, 7%));
+        filter: drop-shadow(0px 20px 20px hsla(230, 9%, 7%, 1));
+        width: 100%;
+        height: auto;
+        aspect-ratio: auto 560 / 315;
+      }
+    }
+
+    @media screen and (max-width: 1200px) {
+      gap: 48px;
+    }
+
+    @media screen and (max-width: 1100px) {
+      align-items: flex-start;
+      flex-direction: column;
+      gap: 2rem;
+
+      .video__responsive {
+        margin-top: 0;
+        justify-content: flex-start;
+
+        iframe {
+          width: 80%;
+          height: auto;
+        }
+      }
+    }
+  }
+
   .text_container {
     display: flex;
     flex-direction: column;
     justify-content: center;
     gap: 2.5rem;
     max-width: 600px;
+    min-width: 500px;
     z-index: 100;
+    flex: 1;
 
     h1 {
       font-size: 72px;
@@ -64,18 +118,33 @@
   @media screen and (max-height: 900px) {
     .text_container {
       gap: 2rem;
+      margin-top: 300px;
 
       h1 {
-        font-size: 58px;
+        font-size: 48px;
       }
     }
   }
 
-  @media screen and (max-width: 500px) {
+  @media screen and (max-width: 540px) {
     padding: 0 2vmax;
 
+    .container {
+
+      .video__responsive {
+        margin-top: 0;
+        justify-content: flex-start;
+
+        iframe {
+          width: 100%;
+          height: auto;
+        }
+      }
+    }
+
     .text_container {
-      margin-top: 3rem;
+      min-width: unset;
+      margin-top: 10rem;
       gap: 1.5rem;
 
       h1 {
diff --git a/src/styles/globals.scss b/src/styles/globals.scss
index fdf8278..7f6a590 100644
--- a/src/styles/globals.scss
+++ b/src/styles/globals.scss
@@ -33,6 +33,9 @@
   line-height: 120%;
   color: var(--font-color);
   font-family: "Gotham";
+  ::-webkit-scrollbar {
+    display: none;
+  }
 }
 
 html,

From db993a7e13ef0e30a485cdaa15ce58a4ccedf500 Mon Sep 17 00:00:00 2001
From: Joshua <joshua.brigati@gmail.com>
Date: Tue, 6 Feb 2024 12:07:52 -0600
Subject: [PATCH 2/4] fixing a lot of the responsive design

---
 .../ Navigation/MobileNavigation.module.scss  |   2 +-
 src/index.css                                 |  12 -
 src/sections/LandingSection.tsx               | 206 ++++++++--------
 src/styles/LandingSection.module.scss         | 233 ++++++++++--------
 src/styles/Navigation.module.scss             |   2 +-
 src/styles/globals.scss                       |  31 ++-
 6 files changed, 256 insertions(+), 230 deletions(-)

diff --git a/src/components/ Navigation/MobileNavigation.module.scss b/src/components/ Navigation/MobileNavigation.module.scss
index 06d4eb2..6c52dae 100644
--- a/src/components/ Navigation/MobileNavigation.module.scss	
+++ b/src/components/ Navigation/MobileNavigation.module.scss	
@@ -1,5 +1,5 @@
 .mobile_navigation {
-  position: absolute;
+  position: relative;
   z-index: 1000;
   display: flex;
   justify-content: space-between;
diff --git a/src/index.css b/src/index.css
index ec2585e..8b13789 100644
--- a/src/index.css
+++ b/src/index.css
@@ -1,13 +1 @@
-body {
-  margin: 0;
-  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
-    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
-    sans-serif;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-}
 
-code {
-  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
-    monospace;
-}
diff --git a/src/sections/LandingSection.tsx b/src/sections/LandingSection.tsx
index 739573e..c147547 100644
--- a/src/sections/LandingSection.tsx
+++ b/src/sections/LandingSection.tsx
@@ -51,97 +51,126 @@ const LandingSection = () => {
   return (
     <section className={styles.landing_section}>
       <div className={styles.container}>
-        <motion.div
-          className={styles.text_container}
-          variants={textContainerVariants}
-          initial="default"
-          whileInView="visible"
-          viewport={{ once: false }}
-        >
-          <div>
+        <div className={styles.text__section}>
+          <motion.div
+            className={styles.text_container}
+            variants={textContainerVariants}
+            initial="default"
+            whileInView="visible"
+            viewport={{ once: false }}
+          >
+            <div>
+              <motion.div
+                variants={fadeInVariants}
+                initial="initial"
+                whileInView="animate"
+                viewport={{ once: false }}
+              >
+                <h1>
+                  Collaborate.
+                </h1>
+                <h1>
+                  Reward.
+                </h1>
+                <h1>
+                  Grow.
+                </h1>
+
+              </motion.div>
+            </div>
             <motion.div
               variants={fadeInVariants}
               initial="initial"
               whileInView="animate"
               viewport={{ once: false }}
             >
-              <h1>
-                Collaborate.
-              </h1>
-              <h1>
-                Reward.
-              </h1>
-              <h1>
-                Grow.
-              </h1>
-
+              <h6>
+                Alliance allows blockchains to trade yield with each other.
+              </h6>
             </motion.div>
-          </div>
-          <motion.div
-            variants={fadeInVariants}
-            initial="initial"
-            whileInView="animate"
-            viewport={{ once: false }}
-          >
-            <h6>
-              Alliance allows blockchains to trade yield with each other.
-            </h6>
-          </motion.div>
-          {videoCutOff && (
+            {videoCutOff && (
+              <motion.div
+                variants={fadeInVariants}
+                initial="initial"
+                whileInView="animate"
+                viewport={{ once: false }}
+              >
+                <div className={styles.video__responsive}>
+                  <iframe
+                    width="560"
+                    height="315"
+                    src="https://www.youtube.com/embed/Xoe9hTzKyeo?si=gU3eAbGoL9_cWqXb"
+                    title="YouTube video player"
+                    // frameBorder="0"
+                    allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
+                    allowFullScreen
+                  />
+                </div>
+              </motion.div>
+            )}
             <motion.div
               variants={fadeInVariants}
               initial="initial"
               whileInView="animate"
               viewport={{ once: false }}
             >
-              <div className={styles.video__responsive}>
-                <iframe
-                  width="560"
-                  height="315"
-                  src="https://www.youtube.com/embed/Xoe9hTzKyeo?si=gU3eAbGoL9_cWqXb"
-                  title="YouTube video player"
-                  // frameBorder="0"
-                  allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
-                  allowFullScreen
-                />
-              </div>
+              <p>
+                Alliance is an open-source Cosmos SDK module that enables blockchains to form mutually beneficial relationships, similar to trade agreements between countries. Using Alliance, a chain can allow almost any token—including liquid staking tokens, stablecoins, liquidity provider tokens, and other Cosmos assets—to be staked on their chain to earn staking rewards. In turn for providing a portion of the chain’s staking rewards to stakers of these tokens, the chain can redistribute a percentage of these staked Alliance assets to native token stakers.
+              </p>
             </motion.div>
-          )}
-          <motion.div
-            variants={fadeInVariants}
-            initial="initial"
-            whileInView="animate"
-            viewport={{ once: false }}
-          >
-            <p>
-              Alliance is an open-source Cosmos SDK module that enables blockchains to form mutually beneficial relationships, similar to trade agreements between countries. Using Alliance, a chain can allow almost any token—including liquid staking tokens, stablecoins, liquidity provider tokens, and other Cosmos assets—to be staked on their chain to earn staking rewards. In turn for providing a portion of the chain’s staking rewards to stakers of these tokens, the chain can redistribute a percentage of these staked Alliance assets to native token stakers.
-            </p>
-          </motion.div>
-          <motion.div
-            className={styles.button_container}
-            variants={fadeInVariants}
-            initial="initial"
-            whileInView="animate"
-            viewport={{ once: false }}
-          >
-            <a
-              className={styles.button}
-              href="https://medium.com/terra-money/how-to-stake-alliance-assets-a-step-by-step-guide-8e1b263830c2"
-              target="_blank"
-              rel="noopener noreferrer"
-            >
-              Stake Alliance Assets
-            </a>
-            <a
-              className={styles.button}
-              href='https://docs.alliance.terra.money/guides/get-started/'
-              target="_blank"
-              rel="noopener noreferrer"
+            <motion.div
+              className={styles.button_container}
+              variants={fadeInVariants}
+              initial="initial"
+              whileInView="animate"
+              viewport={{ once: false }}
             >
-              Integrate Alliance
-            </a>
+              <a
+                className={styles.button}
+                href="https://medium.com/terra-money/how-to-stake-alliance-assets-a-step-by-step-guide-8e1b263830c2"
+                target="_blank"
+                rel="noopener noreferrer"
+              >
+                Stake Alliance Assets
+              </a>
+              <a
+                className={styles.button}
+                href='https://docs.alliance.terra.money/guides/get-started/'
+                target="_blank"
+                rel="noopener noreferrer"
+              >
+                Integrate Alliance
+              </a>
+            </motion.div>
           </motion.div>
-        </motion.div>
+
+          <div className={cx(styles.integrations, { isMobile })}>
+            <h3>
+              Integrations & Partners
+            </h3>
+            <div className={styles.icons}>
+              {chains.map((chain, index) => (
+                <a
+                  key={index}
+                  href={chain.link}
+                  target="_blank"
+                  rel="noopener noreferrer"
+                  className={styles.icon_only}
+                >
+                  <img
+                    src={chain.logo}
+                    alt={chain.name}
+                    style={{
+                      width: chain.sizeOverride || '28px',
+                      height: chain.sizeOverride || '28px',
+                      margin: chain.sizeOverride ? '0 -6px' : '0px',
+                    }}
+                  />
+                </a>
+              ))}
+            </div>
+          </div>
+        </div>
 
         {!videoCutOff && (
           <div className={styles.video__responsive}>
@@ -185,33 +214,6 @@ const LandingSection = () => {
         className={styles.alliance_outline}
         width={800}
       /> */}
-
-      <div className={cx(styles.integrations, { isMobile })}>
-        <h3>
-          Integrations & Partners
-        </h3>
-        <div className={styles.icons}>
-          {chains.map((chain, index) => (
-            <a
-              key={index}
-              href={chain.link}
-              target="_blank"
-              rel="noopener noreferrer"
-              className={styles.icon_only}
-            >
-              <img
-                src={chain.logo}
-                alt={chain.name}
-                style={{
-                  width: chain.sizeOverride || '28px',
-                  height: chain.sizeOverride || '28px',
-                  margin: chain.sizeOverride ? '0 -6px' : '0px',
-                }}
-              />
-            </a>
-          ))}
-        </div>
-      </div>
     </section>
   )
 };
diff --git a/src/styles/LandingSection.module.scss b/src/styles/LandingSection.module.scss
index 0a6e5b7..2a752c2 100644
--- a/src/styles/LandingSection.module.scss
+++ b/src/styles/LandingSection.module.scss
@@ -3,22 +3,66 @@
   flex-direction: column;
   align-items: flex-start;
   justify-content: center;
-  height: 100vh;
+  height: 100%;
   min-height: 700px;
   width: 100%;
-  padding: 0 5vmax;
+  padding: 24px 5vmax;
   text-align: center;
   position: relative;
-  overflow-x: hidden;
-  overflow-y: scroll;
+  min-height: calc(100vh - 55px);
 
   .container {
     display: flex;
     flex-direction: row;
-    align-items: center;
+    // align-items: center;
+    align-items: stretch;
     justify-content: space-between;
     width: 100%;
     gap: 96px;
+    flex: 1;
+
+    .text__section {
+      display: flex;
+      flex-direction: column;
+      justify-content: space-between;
+      flex: 1;
+      gap: 72px;
+
+      .text_container {
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        gap: 28px;
+        max-width: 600px;
+        min-width: 500px;
+        z-index: 100;
+        flex: 1;
+
+        h1 {
+          font-size: 72px;
+          text-align: start;
+          font-weight: 600;
+          font-family: 'Poppins';
+          color: #F6F7FA
+        }
+        h6 {
+          font-size: 18px;
+          text-align: start;
+          font-weight: 600;
+          color: #F6F7FA;
+          letter-spacing: 0.05px;
+          line-height: 140%;
+        }
+        p {
+          font-size: 14px;
+          color: #8f929e;
+          text-align: start;
+          font-weight: 500;
+          letter-spacing: 0.05px;
+          line-height: 140%;
+        }
+      }
+    }
 
     .video__responsive {
       position: relative;
@@ -28,14 +72,14 @@
       display: flex;
       justify-content: flex-end;
       align-items: flex-start;
-      margin-top: 148px;
-      flex: 2;
+      flex: 1;
       max-width: 800px;
+      margin: auto;
 
       iframe {
+        margin-top: -96px;
         border: 2px solid var(--border-color);
         border-radius: 8px;
-        // filter: drop-shadow(0px 20px 20px hsl(230, 9%, 7%));
         filter: drop-shadow(0px 20px 20px hsla(230, 9%, 7%, 1));
         width: 100%;
         height: auto;
@@ -43,6 +87,12 @@
       }
     }
 
+    @media screen and (max-width: 1400px){
+      .video__responsive {
+        flex: 2;
+      }
+    }
+
     @media screen and (max-width: 1200px) {
       gap: 48px;
     }
@@ -50,13 +100,14 @@
     @media screen and (max-width: 1100px) {
       align-items: flex-start;
       flex-direction: column;
-      gap: 2rem;
+      gap: 28px;
 
       .video__responsive {
         margin-top: 0;
         justify-content: flex-start;
 
         iframe {
+          margin-top: 0;
           width: 80%;
           height: auto;
         }
@@ -64,111 +115,80 @@
     }
   }
 
-  .text_container {
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-    gap: 2.5rem;
-    max-width: 600px;
-    min-width: 500px;
-    z-index: 100;
-    flex: 1;
-
-    h1 {
-      font-size: 72px;
-      text-align: start;
-      font-weight: 600;
-      font-family: 'Poppins';
-      color: #F6F7FA
-    }
-    h6 {
-      font-size: 18px;
-      text-align: start;
-      font-weight: 600;
-      color: #F6F7FA;
-      letter-spacing: 0.05px;
-      line-height: 140%;
-    }
-    p {
-      font-size: 14px;
-      color: #8f929e;
-      text-align: start;
-      font-weight: 500;
-      letter-spacing: 0.05px;
-      line-height: 140%;
-    }
-  }
-
   @media screen and (max-width: 768px) {
-    padding: 0 5vmax;
+    padding: 0 24px;
+    min-height: calc(100vh - 48px);
 
-    .text_container {
-      h1 {
-        font-size: 58px;
-      }
-      h6 {
-        font-size: 16px;
-      }
-      p {
-        font-size: 14px;
+    .container {
+      .text__section {
+        .text_container {
+          h1 {
+            font-size: 58px;
+          }
+          h6 {
+            font-size: 16px;
+          }
+          p {
+            font-size: 14px;
+          }
+        }
       }
     }
   }
 
   @media screen and (max-height: 900px) {
-    .text_container {
-      gap: 2rem;
-      margin-top: 300px;
+    .container {
+      .video__responsive {
+        iframe {
+          margin-top: 0;
+          filter: none;
+        }
+      }
 
-      h1 {
-        font-size: 48px;
+      .text__section {
+        .text_container {
+          gap: 24px;
+
+          h1 {
+            font-size: 48px;
+          }
+        }
       }
     }
   }
 
   @media screen and (max-width: 540px) {
-    padding: 0 2vmax;
-
     .container {
-
       .video__responsive {
         margin-top: 0;
         justify-content: flex-start;
 
         iframe {
+          margin-top: 0;
           width: 100%;
           height: auto;
+          filter: none;
         }
       }
-    }
-
-    .text_container {
-      min-width: unset;
-      margin-top: 10rem;
-      gap: 1.5rem;
-
-      h1 {
-        font-size: 36px;
-      }
 
-      h6 {
-        font-size: 14px;
-      }
+      .text__section {
+        .text_container {
+          min-width: unset;
+          margin-top: 20px;
+          gap: 12px;
 
-      p {
-        font-size: 12px;
-      }
-    }
-  }
+          h1 {
+            font-size: 36px;
+          }
 
-  @media screen and (max-height: 667px) {
-    .text_container {
-      h6 {
-        font-size: 12px;
-      }
+          h6 {
+            font-size: 14px;
+          }
 
-      p {
-        font-size: 10px;
+          p {
+            font-size: 12px;
+          }
+        }
       }
     }
   }
@@ -237,7 +257,7 @@
       }
     }
     @media screen and (max-width: 767px) {
-      margin-top: 2rem;
+      margin-top: 12px;
 
       .button {
         background-image: linear-gradient(90deg,#228bbc,#002c81);
@@ -247,20 +267,19 @@
     @media screen and (max-width: 500px) {
       .button {
         min-width: 120px;
-        // 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;
-    }
+    // @media screen and (max-height: 667px) {
+    //   .button {
+    //     padding: 8px 10px;
+    //     font-size: 11px;
+    //     min-width: unset;
+    //   }
+    //   margin-top: 0;
+    // }
   }
 
   .alliance_outline {
@@ -451,7 +470,7 @@
   }
 
   .integrations {
-    position: absolute;
+    // position: absolute;
     bottom: 28px;
     display: flex;
     flex-direction: column;
@@ -477,8 +496,19 @@
       }
     }
 
-    @media screen and (max-height: 760px) {
-      bottom: -112px;
+    // @media screen and (max-height: 760px) {
+    //   bottom: -112px;
+    // }
+
+    @media screen and (max-width: 500px) {
+      .icons {
+        .icon_only {
+          img {
+            width: 22px !important;
+            height: 22px !important;
+          }
+        }
+      }
     }
 
     @media screen and (max-width: 300px) {
@@ -495,12 +525,11 @@
   .isMobile {
     position: relative;
     bottom: 0;
-    margin-top: 48px;
     gap: 8px;
+    margin-bottom: 12px;
 
     @media screen and (max-height: 700px) {
       gap: 4px;
-      margin-top: 28px;
     }
   }
 }
diff --git a/src/styles/Navigation.module.scss b/src/styles/Navigation.module.scss
index 7f1ad04..5429b46 100644
--- a/src/styles/Navigation.module.scss
+++ b/src/styles/Navigation.module.scss
@@ -1,5 +1,5 @@
 .navigation {
-  position: absolute;
+  position: relative;
   display: flex;
   justify-content: space-between;
   align-items: center;
diff --git a/src/styles/globals.scss b/src/styles/globals.scss
index 7f6a590..912c30d 100644
--- a/src/styles/globals.scss
+++ b/src/styles/globals.scss
@@ -26,35 +26,42 @@
   // --input-bg: #1F1F2C;
 }
 
+html {
+  box-sizing: border-box;
+}
+
 * {
   box-sizing: border-box;
   padding: 0;
   margin: 0;
-  line-height: 120%;
-  color: var(--font-color);
-  font-family: "Gotham";
+
   ::-webkit-scrollbar {
     display: none;
   }
 }
 
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+}
+
 html,
 body {
-  max-width: 100vw;
-  font-size: 14px;
-  font-family: "Gotham", sans-serif;
-  height: 100%;
   scroll-behavior: smooth;
-
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-  text-rendering: optimizeLegibility;
+  max-width: 100vw;
+  overflow-x: hidden;
 }
 
 body {
+  text-rendering: optimizeLegibility;
+  -webkit-font-smoothing: antialiased;
+  font-feature-settings: "tnum";
   color: var(--font-color);
   background: var(--bg);
-  overflow: hidden;
+  font-size: 14px;
+  font-family: "Gotham", sans-serif;
+  overflow-y: hidden;
 }
 
 a {

From d94c65912a57bc7a1ca635841c39a8d0060d5e5b Mon Sep 17 00:00:00 2001
From: Joshua <joshua.brigati@gmail.com>
Date: Tue, 6 Feb 2024 12:19:44 -0600
Subject: [PATCH 3/4] Added a 'Get in Touch link in the nav

---
 src/components/ Navigation/MobileNavigation.tsx | 9 +++++++++
 src/components/ Navigation/Navigation.tsx       | 7 +++++++
 2 files changed, 16 insertions(+)

diff --git a/src/components/ Navigation/MobileNavigation.tsx b/src/components/ Navigation/MobileNavigation.tsx
index aa18f68..40eec3c 100644
--- a/src/components/ Navigation/MobileNavigation.tsx	
+++ b/src/components/ Navigation/MobileNavigation.tsx	
@@ -88,6 +88,15 @@ const MobileNavigation = forwardRef<
               Docs
             </a>
           </h2>
+          <h2 className={styles.menu_heading}>
+            <a
+              href='https://forms.gle/mWSKNN6MznpEpW5f8'
+              target="_blank"
+              rel="noopener noreferrer"
+            >
+              Get in Touch
+            </a>
+          </h2>
           <h2 className={styles.menu_heading}>
             <a
               className={styles.terra_link}
diff --git a/src/components/ Navigation/Navigation.tsx b/src/components/ Navigation/Navigation.tsx
index e7b2f6e..bbfb6ad 100644
--- a/src/components/ Navigation/Navigation.tsx	
+++ b/src/components/ Navigation/Navigation.tsx	
@@ -65,6 +65,13 @@ const Navigation = (
           >
             Docs
           </a>
+          <a
+            href='https://forms.gle/mWSKNN6MznpEpW5f8'
+            target="_blank"
+            rel="noopener noreferrer"
+          >
+            Get in Touch
+          </a>
           <a
             href='https://discord.com/invite/terra-money'
             target="_blank"

From 5441e5ef318b8b6c3d9cdfae71a071fd1a495544 Mon Sep 17 00:00:00 2001
From: Joshua <joshua.brigati@gmail.com>
Date: Tue, 6 Feb 2024 12:23:10 -0600
Subject: [PATCH 4/4] nav button alignment fix

---
 src/styles/Navigation.module.scss | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/styles/Navigation.module.scss b/src/styles/Navigation.module.scss
index 5429b46..5a86590 100644
--- a/src/styles/Navigation.module.scss
+++ b/src/styles/Navigation.module.scss
@@ -67,6 +67,7 @@
     .terra_link {
       height: 30px;
       display: flex;
+      align-items: center;
       gap: 8px;
       padding: 0.5rem 1rem;
       font-size: 12px;