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] 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,