Skip to content

Commit

Permalink
added new video and make some other uodates
Browse files Browse the repository at this point in the history
  • Loading branch information
@JoshuaBrigati
JoshuaBrigati committed Feb 5, 2024
1 parent 9617d6d commit cf36b56
Show file tree
Hide file tree
Showing 4 changed files with 181 additions and 72 deletions.
4 changes: 2 additions & 2 deletions src/components/ Navigation/Navigation.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
169 changes: 103 additions & 66 deletions src/sections/LandingSection.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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(() => {
Expand Down Expand Up @@ -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"
Expand All @@ -147,7 +184,7 @@ const LandingSection = () => {
alt="Alliance Logo"
className={styles.alliance_outline}
width={800}
/>
/> */}

<div className={cx(styles.integrations, { isMobile })}>
<h3>
Expand Down
77 changes: 73 additions & 4 deletions src/styles/LandingSection.module.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down Expand Up @@ -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 {
Expand Down
3 changes: 3 additions & 0 deletions src/styles/globals.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -33,6 +33,9 @@
line-height: 120%;
color: var(--font-color);
font-family: "Gotham";
::-webkit-scrollbar {
display: none;
}
}

html,
Expand Down

0 comments on commit cf36b56

Please sign in to comment.