Merge pull request #12 from terra-money/new-video

added new video and make some other uodates
terra-money · Feb 6, 2024 · 520d4aa · 520d4aa
2 parents 9617d6d + 5441e5e
commit 520d4aa
Showing 8 changed files with 361 additions and 209 deletions.
diff --git 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/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
@@ -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"
@@ -79,11 +86,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/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
@@ -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,160 @@ 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}>
+        <div className={styles.text__section}>
           <motion.div
-            variants={fadeInVariants}
-            initial="initial"
-            whileInView="animate"
+            className={styles.text_container}
+            variants={textContainerVariants}
+            initial="default"
+            whileInView="visible"
             viewport={{ once: false }}
           >
-            <h1>
-              Collaborate.
-            </h1>
-            <h1>
-              Reward.
-            </h1>
-            <h1>
-              Grow.
-            </h1>
+            <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 }}
+            >
+              <h6>
+                Alliance allows blockchains to trade yield with each other.
+              </h6>
+            </motion.div>
+            {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 }}
+            >
+              <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"
+              >
+                Integrate Alliance
+              </a>
+            </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>
-        <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"
-          >
-            Stake Alliance assets
-          </a>
-          <a
-            className={styles.button}
-            href="https://docs.alliance.terra.money/overview/"
-            target="_blank"
-            rel="noopener noreferrer"
-          >
-            Learn more
-          </a>
-        </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,34 +213,7 @@ const LandingSection = () => {
         alt="Alliance Logo"
         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
@@ -3,103 +3,192 @@
   flex-direction: column;
   align-items: flex-start;
   justify-content: center;
-  height: 100vh;
+  height: 100%;
   min-height: 700px;
   width: 100%;
-  padding: 0 10vmax;
+  padding: 24px 5vmax;
   text-align: center;
   position: relative;
-  overflow-x: hidden;
-  overflow-y: scroll;
+  min-height: calc(100vh - 55px);
 
-  .text_container {
+  .container {
     display: flex;
-    flex-direction: column;
-    justify-content: center;
-    gap: 2.5rem;
-    max-width: 600px;
-    z-index: 100;
-
-    h1 {
-      font-size: 72px;
-      text-align: start;
-      font-weight: 600;
-      font-family: 'Poppins';
-      color: #F6F7FA
+    flex-direction: row;
+    // 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%;
+        }
+      }
     }
-    h6 {
-      font-size: 18px;
-      text-align: start;
-      font-weight: 600;
-      color: #F6F7FA;
-      letter-spacing: 0.05px;
-      line-height: 140%;
+
+    .video__responsive {
+      position: relative;
+      height: 100%;
+      width: 100%;
+      z-index: 1000;
+      display: flex;
+      justify-content: flex-end;
+      align-items: flex-start;
+      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 hsla(230, 9%, 7%, 1));
+        width: 100%;
+        height: auto;
+        aspect-ratio: auto 560 / 315;
+      }
     }
-    p {
-      font-size: 14px;
-      color: #8f929e;
-      text-align: start;
-      font-weight: 500;
-      letter-spacing: 0.05px;
-      line-height: 140%;
+
+    @media screen and (max-width: 1400px){
+      .video__responsive {
+        flex: 2;
+      }
     }
-  }
 
-  @media screen and (max-width: 768px) {
-    padding: 0 5vmax;
+    @media screen and (max-width: 1200px) {
+      gap: 48px;
+    }
 
-    .text_container {
-      h1 {
-        font-size: 58px;
-      }
-      h6 {
-        font-size: 16px;
-      }
-      p {
-        font-size: 14px;
+    @media screen and (max-width: 1100px) {
+      align-items: flex-start;
+      flex-direction: column;
+      gap: 28px;
+
+      .video__responsive {
+        margin-top: 0;
+        justify-content: flex-start;
+
+        iframe {
+          margin-top: 0;
+          width: 80%;
+          height: auto;
+        }
       }
     }
   }
 
-  @media screen and (max-height: 900px) {
-    .text_container {
-      gap: 2rem;
-
-      h1 {
-        font-size: 58px;
+  @media screen and (max-width: 768px) {
+    padding: 0 24px;
+    min-height: calc(100vh - 48px);
+
+    .container {
+      .text__section {
+        .text_container {
+          h1 {
+            font-size: 58px;
+          }
+          h6 {
+            font-size: 16px;
+          }
+          p {
+            font-size: 14px;
+          }
+        }
       }
     }
   }
 
-  @media screen and (max-width: 500px) {
-    padding: 0 2vmax;
-
-    .text_container {
-      margin-top: 3rem;
-      gap: 1.5rem;
-
-      h1 {
-        font-size: 36px;
+  @media screen and (max-height: 900px) {
+    .container {
+      .video__responsive {
+        iframe {
+          margin-top: 0;
+          filter: none;
+        }
       }
 
-      h6 {
-        font-size: 14px;
-      }
+      .text__section {
+        .text_container {
+          gap: 24px;
 
-      p {
-        font-size: 12px;
+          h1 {
+            font-size: 48px;
+          }
+        }
       }
     }
   }
 
-  @media screen and (max-height: 667px) {
-    .text_container {
-      h6 {
-        font-size: 12px;
+  @media screen and (max-width: 540px) {
+    .container {
+      .video__responsive {
+        margin-top: 0;
+        justify-content: flex-start;
+
+        iframe {
+          margin-top: 0;
+          width: 100%;
+          height: auto;
+          filter: none;
+        }
       }
 
-      p {
-        font-size: 10px;
+      .text__section {
+        .text_container {
+          min-width: unset;
+          margin-top: 20px;
+          gap: 12px;
+
+          h1 {
+            font-size: 36px;
+          }
+
+          h6 {
+            font-size: 14px;
+          }
+
+          p {
+            font-size: 12px;
+          }
+        }
       }
     }
   }
@@ -168,7 +257,7 @@
       }
     }
     @media screen and (max-width: 767px) {
-      margin-top: 2rem;
+      margin-top: 12px;
 
       .button {
         background-image: linear-gradient(90deg,#228bbc,#002c81);
@@ -178,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 {
@@ -382,7 +470,7 @@
   }
 
   .integrations {
-    position: absolute;
+    // position: absolute;
     bottom: 28px;
     display: flex;
     flex-direction: column;
@@ -408,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) {
@@ -426,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
@@ -1,5 +1,5 @@
 .navigation {
-  position: absolute;
+  position: relative;
   display: flex;
   justify-content: space-between;
   align-items: center;
@@ -67,6 +67,7 @@
     .terra_link {
       height: 30px;
       display: flex;
+      align-items: center;
       gap: 8px;
       padding: 0.5rem 1rem;
       font-size: 12px;

diff --git a/src/styles/globals.scss b/src/styles/globals.scss
@@ -26,32 +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 {