diff --git a/src/indexPage/react-components/binary-landing/Hero.jsx b/src/indexPage/react-components/binary-landing/Hero.jsx index 7d1952766d..1dfa446375 100644 --- a/src/indexPage/react-components/binary-landing/Hero.jsx +++ b/src/indexPage/react-components/binary-landing/Hero.jsx @@ -38,7 +38,7 @@ const carouselSettings = { const Hero = () => { const renderContent = () => ( -
+

{translate('We’re moving!')}

{translate('We’ve been')}{translate(' Binary.com')}{translate(' for 2 decades and it’s time for an exciting new chapter.')} @@ -56,7 +56,7 @@ const Hero = () => { ) const renderCarousel = () => ( -
+
{carouselImages.map((slide, index) => )} @@ -65,11 +65,11 @@ const Hero = () => { return ( -
-
+
+
{renderContent()} {renderCarousel()} -
+
diff --git a/src/indexPage/react-components/binary-landing/SwitchSection.jsx b/src/indexPage/react-components/binary-landing/SwitchSection.jsx index 7aba9e26f6..b418e22e2f 100644 --- a/src/indexPage/react-components/binary-landing/SwitchSection.jsx +++ b/src/indexPage/react-components/binary-landing/SwitchSection.jsx @@ -1,6 +1,5 @@ import React from 'react'; import { translate } from '../../../common/i18n'; -import { getOAuthURLDeriv } from '../../../common/appId'; const SwitchSection = () => (
diff --git a/src/indexPage/react-components/binary-landing/WaitSection.jsx b/src/indexPage/react-components/binary-landing/WaitSection.jsx index e246bb3501..ae87831b6b 100644 --- a/src/indexPage/react-components/binary-landing/WaitSection.jsx +++ b/src/indexPage/react-components/binary-landing/WaitSection.jsx @@ -3,7 +3,7 @@ import { translate } from '../../../common/i18n'; const WaitSection = () => (
-
+

{translate('Don’t wait')}

{translate('Future-proof your trading. Come over to Deriv now.')}

@@ -13,9 +13,9 @@ const WaitSection = () => (
- +
- +

{translate('Come over to Deriv and future-proof your trading now.')}

diff --git a/static/css/_carousel.scss b/static/css/_carousel.scss index 6b54aaf4c4..53ddc10353 100644 --- a/static/css/_carousel.scss +++ b/static/css/_carousel.scss @@ -86,7 +86,7 @@ padding: 0.625rem 0.75rem 0.625rem 1rem; font-size: 0.875rem; font-weight: 700; - width: 8.18rem; + min-width: 8.18rem; color: #FF444F; background: #FFFFFF; border-radius: 6.25rem; @@ -111,14 +111,19 @@ &__btn_inner { display: flex; - gap: 0.5rem; + align-items: center; + justify-content: center; + height: 20px; + img { + margin-left: 0.5rem; + } } } .carousel_section__mobile .carousel_section__slide_card { flex-direction: column; max-width: 20.5rem; - max-height: 26.125rem; + max-height: 27rem; display: flex; text-align: center; outline: none; @@ -145,6 +150,7 @@ @include for-size(mobile) { top: 10.375rem; + margin-bottom: 0.2rem; } } @@ -156,7 +162,7 @@ margin-bottom: 0.5rem; @include for-size(mobile) { font: 700 1.3rem $font-IBM; - margin-bottom: 0.5rem; + margin: 0.5rem; } } diff --git a/static/css/_landing-binary.scss b/static/css/_landing-binary.scss index b8f819535f..d922c319ff 100644 --- a/static/css/_landing-binary.scss +++ b/static/css/_landing-binary.scss @@ -64,7 +64,6 @@ $header-color : #333333; } .binary-section-container { - padding: 0 2rem; margin: 0 auto; max-width: 1400px; @@ -446,6 +445,8 @@ $header-color : #333333; justify-content: center; text-align: center; flex-direction: column; + box-shadow: inset 0px 1px 0px #f2f3f4; + margin-top: 2rem; } &-content { @@ -731,7 +732,7 @@ $header-color : #333333; } -.background-x { +.hero-wrapper { display: flex; justify-content: center; align-items: center; @@ -742,81 +743,82 @@ $header-color : #333333; background: $hero-BG url(../image/hero_mobile.png) no-repeat; background-size: cover; } -} - -.container-x { - height: 100vh; - width: 100%; - max-width: 1440px; - display: flex; - flex: 1; - flex-direction: row; - padding: 0px 3rem; - gap: 2.4rem; - - @include for-size(mobile) { - flex-direction: column-reverse; - padding: 1rem 1.4rem 0px 1.4rem; - } - - &_box-x { + &-container{ + height: 100vh; + width: 100%; + max-width: 1440px; display: flex; flex: 1; - flex-direction: column; - justify-content: center; - } - - h1 { - color: #FFF; - margin: 2rem 2rem 2rem 0; - font: 700 5rem $font-IBM; - + flex-direction: row; + padding: 0px 3rem; + gap: 2.4rem; @include for-size(mobile) { - font: 700 2rem $font-IBM; - margin: 0 0 1rem 0; + flex-direction: column-reverse; + padding: 1rem 1.4rem 0px 1.4rem; + gap: unset; } - } - - h2 { - color: $white; - line-height: 40px; - margin-bottom: 2rem; - font: 400 2rem $font-IBM; - - @include for-size(mobile) { - font: 400 1rem $font-IBM; - margin: 0 0 1.5rem 0; + &_box-binary { + display: flex; + flex: 1; + flex-direction: column; + justify-content: center; + h1 { + color: #FFF; + margin: 2rem 2rem 2rem 0; + font: 700 5rem $font-IBM; + + @include for-size(mobile) { + font: 700 2rem $font-IBM; + margin: 0 0 1rem 0; + } + } + + h2 { + color: $white; + line-height: 40px; + margin-bottom: 2rem; + font: 400 2rem $font-IBM; + + @include for-size(mobile) { + font: 400 1rem $font-IBM; + margin: 0 0 1.5rem 0; + } + } } - } -} - -.left-x { - align-items: start; - - @include for-size(mobile) { - flex: 0; - } -} + &-left-binary { + align-items: start; + + @include for-size(mobile) { + flex: 0; + } + } + + &-right-binary { + align-items: end; + min-width: 0px; + + @include for-size(mobile) { + margin: 0 10%; + } + } + &-logo-binary { + display: none; + justify-content: center; + + img { + width: 50%; + } + + @include for-size(mobile) { + display: flex; + } -.right-x { - align-items: end; - min-width: 0px; + @media only screen - @include for-size(mobile) { - margin: 0 10%; - } +and (max-device-width: 375px) { + } - -.logo-x { - display: none; - justify-content: center; - - img { - width: 50%; - } - - @include for-size(mobile) { - display: flex; + } } } diff --git a/static/css/bot.scss b/static/css/bot.scss index 769eabc940..2fd79f718e 100644 --- a/static/css/bot.scss +++ b/static/css/bot.scss @@ -127,7 +127,7 @@ body { text-align: right; padding: 3px 20px; display: table; - @media (max-width: 400px) { + @media (max-width: 1024px) { min-height: 25px !important; } }