fixing a lot of the responsive design

terra-money · Feb 6, 2024 · db993a7 · db993a7
1 parent cf36b56
commit db993a7
Show file tree

Hide file tree

Showing 6 changed files with 256 additions and 230 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/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
@@ -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>
   )
 };