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
Show file tree

Hide file tree

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>
   )
 };