diff --git a/src/components/ Navigation/MobileNavigation.module.scss b/src/components/ Navigation/MobileNavigation.module.scss
index 06d4eb2..6c52dae 100644
--- 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
index aa18f68..40eec3c 100644
--- a/src/components/ Navigation/MobileNavigation.tsx
+++ b/src/components/ Navigation/MobileNavigation.tsx
@@ -88,6 +88,15 @@ const MobileNavigation = forwardRef<
Docs
+
Docs
+
+ Get in Touch
+
- Integrate Alliance
+ Learn more
diff --git a/src/index.css b/src/index.css
index ec2585e..8b13789 100644
--- 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
index 085a051..c147547 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,160 @@ const LandingSection = () => {
return (
-
-
+
+
-
- Collaborate.
-
-
- Reward.
-
-
- Grow.
-
+
+
+
+ Collaborate.
+
+
+ Reward.
+
+
+ Grow.
+
+
+
+
+
+ Alliance allows blockchains to trade yield with each other.
+
+
+ {videoCutOff && (
+
+
+ VIDEO
+
+
+ )}
+
+
+ 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.
+
+
+
+
+ Stake Alliance Assets
+
+
+ Integrate Alliance
+
+
+
+
+
+ Integrations & Partners
+
+
+ {chains.map((chain, index) => (
+
+
+
+ ))}
+
+
-
-
- Alliance allows blockchains to trade yield with each other.
-
-
-
-
- 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.
-
-
-
-
- Stake Alliance assets
-
-
- Learn more
-
-
-
+
+ {!videoCutOff && (
+
+ VIDEO
+
+ )}
+
-
+ {/*
*/}
-
+ /> */}
-
{
alt="Alliance Logo"
className={styles.alliance_outline}
width={800}
- />
-
-
-
- Integrations & Partners
-
-
- {chains.map((chain, index) => (
-
-
-
- ))}
-
-
+ /> */}
)
};
diff --git a/src/styles/LandingSection.module.scss b/src/styles/LandingSection.module.scss
index 0d8875c..2a752c2 100644
--- 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
index 7f1ad04..5a86590 100644
--- 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
index fdf8278..912c30d 100644
--- 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 {