From 1e9d4a0e587e909a69e55431d03310b9c44a2bf7 Mon Sep 17 00:00:00 2001 From: mitra-deriv Date: Mon, 4 Jul 2022 15:38:28 +0800 Subject: [PATCH 1/4] fix: responsive issue in hero section --- .../react-components/binary-landing/Hero.jsx | 143 ++++++------- static/css/_landing-binary.scss | 192 +++++++----------- 2 files changed, 136 insertions(+), 199 deletions(-) diff --git a/src/indexPage/react-components/binary-landing/Hero.jsx b/src/indexPage/react-components/binary-landing/Hero.jsx index 374edf05b3..2996ace53c 100644 --- a/src/indexPage/react-components/binary-landing/Hero.jsx +++ b/src/indexPage/react-components/binary-landing/Hero.jsx @@ -2,95 +2,72 @@ import React from 'react' import Slider from 'react-slick'; import { translate } from '../../../common/i18n'; -const carouselImageArray = [ - { - img: 'image/hero-dmt5.png', - }, - { - img: 'image/hero-derivgo.png', - }, - { - img: 'image/hero-derivx.png', - }, - { - img: 'image/hero-dtrader.png', - }, +const carouselImages = [ + 'image/hero-dmt5.png', + 'image/hero-derivgo.png', + 'image/hero-derivx.png', + 'image/hero-dtrader.png', ] -const Hero = () => { - const settings = { - dots : false, - infinite : true, - speed : 1000, - slidesToShow : 1, - slidesToScroll: 1, - arrows : false, - autoplay : true, - autoplaySpeed : 3000, - responsive : [ - { - breakpoint: 1024, - settings : { - slidesToShow : 1, - slidesToScroll: 1, - }, +const carouselSettings = { + dots : false, + infinite : true, + speed : 1000, + slidesToShow : 1, + slidesToScroll: 1, + arrows : false, + autoplay : true, + autoplaySpeed : 3000, + responsive : [ + { + breakpoint: 1024, + settings : { + slidesToShow : 1, + slidesToScroll: 1, }, - { - breakpoint: 700, - settings : { - slidesToShow : 1, - slidesToScroll: 1, - }, + }, + { + breakpoint: 700, + settings : { + slidesToShow : 1, + slidesToScroll: 1, }, - ], - }; - return ( -
-
+ }, + ], +}; -
-

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

-

- {translate('We’ve been')}{translate(' Binary.com')}{translate(' for 2 decades and it’s time for an exciting new chapter.')} -

-
-

{translate('Say hello to our new home,')}{translate(' Deriv.')} -

-
-
- - - - -
-
-
- - - -
- - {carouselImageArray.map((slide, index) => { - const { img } = slide; - return ( -
-
- -
-
- ) - } - )} - -
-
+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.')} +

+

{translate('Say hello to our new home,')}{translate(' Deriv.')}

+
+ + + +
+
+ ) + + const renderCarousel = () => ( +
+ + {carouselImages.map((slide, index) => )} + +
+ ) + + + return ( +
+ {renderContent()} + {renderCarousel()}
) }; diff --git a/static/css/_landing-binary.scss b/static/css/_landing-binary.scss index 59e38cda73..93a33b1996 100644 --- a/static/css/_landing-binary.scss +++ b/static/css/_landing-binary.scss @@ -20,11 +20,15 @@ $header-color : #333333; } } - .navigation { display: block; padding: 0 2rem; background: #16212d; + position: absolute; + top: 0; + left: 0; + right: 0; + @include for-size(mobile) { display: none; } @@ -39,8 +43,6 @@ $header-color : #333333; margin: 0px auto; } - - &-logo { width: 138px; @@ -63,116 +65,6 @@ $header-color : #333333; max-width: 1400px; } -.binary-hero { - margin-top: -107px; - padding: 0px 20px; - height: 100vh; - display: flex; - - @include for-size(mobile) { - margin-top: unset; - } - background: $hero-BG url(../image/hero_desktop.png) no-repeat; - background-size: cover; - @include for-size(mobile) { - background: $hero-BG url(../image/hero_mobile.png) no-repeat; - background-size: cover; - } - &-inner { - display: flex; - align-items: center; - padding: calc(7rem + 5rem) 1rem; - - @include for-size(desktop) { - padding: calc(7rem + 5rem) 2rem; - } - - @include for-size(mobile) { - flex-direction: column-reverse; - padding: 4rem 2rem; - - .btn-group { - text-align: left; - } - } - - &__content { - flex: 1 1 50%; - - h1 { - color: #FFF; - margin: 2rem 2rem 2rem 0; - font: 700 5rem $font-IBM; - - @include for-size(mobile) { - font: 700 3rem $font-IBM; - margin: 0 0 2rem 0; - } - } - - h2 { - color: $white; - line-height: 40px; - margin-bottom: 2rem; - font: 400 2rem $font-IBM; - - @include for-size(mobile) { - font: 400 1.5rem $font-IBM; - margin: 0 0 2.5rem 0; - } - } - &-subheader { - margin-top: 2.3rem; - } - } - - &__placeholder { - flex: 1 1 50%; - display: flex; - align-items: center; - justify-content: center; - - @include for-size(mobile) { - flex-direction: column; - } - - img { - @include for-size(mobile) { - object-fit: contain; - width: 100%; - } - } - &-inner { - width: 600px !important; - @include for-size(mobile) { - width: 300px !important; - } - - } - &-image-container { - width: 600px !important; - @include for-size(mobile) { - width: 300px !important; - } - img { - width : 100% !important; - object-fit : 'cover' !important; - } - } - } - - &__binary_logo { - display: none; - width: 14.75rem !important; - margin-bottom: 3rem; - - @include for-size(mobile) { - display: block; - } - } - } -} - .l-btn { height: 2.5rem; border-radius: 0.25rem; @@ -517,7 +409,6 @@ $header-color : #333333; } } - .arrow { &.right { transform: rotate(180deg); @@ -703,7 +594,6 @@ $header-color : #333333; } } - .bot-gif-placeholder { display: flex; align-items: center; @@ -740,7 +630,6 @@ $header-color : #333333; display: none !important; } - .card-container{ padding: 2rem 0rem 3rem 0rem; margin: 0 auto; @@ -822,4 +711,75 @@ $header-color : #333333; } +.container-x { + height: 100vh; + width: 100%; + display: flex; + flex: 1; + flex-direction: row; + background: $hero-BG url(../image/hero_desktop.png) no-repeat; + background-size: cover; + padding: 0px 5rem; + gap: 2.4rem; + @include for-size(mobile) { + background: $hero-BG url(../image/hero_mobile.png) no-repeat; + background-size: cover; + flex-direction: column-reverse; + padding: 1rem 1.4rem 0px 1.4rem; + } + + &_box-x { + 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; + + } +} + +.right-x { + align-items: end; + min-width: 0px; +} + +.slick-slider { + width: 100%; +} + +.slick-track { + display: flex !important; + justify-content: center; + align-items: center; +} \ No newline at end of file From 2ea710734f13923c926fbc22d105d93852e80d8a Mon Sep 17 00:00:00 2001 From: mitra-deriv Date: Mon, 4 Jul 2022 17:31:09 +0800 Subject: [PATCH 2/4] fix: add logo for mobile --- .../react-components/binary-landing/Hero.jsx | 13 +++++-- static/css/_landing-binary.scss | 37 ++++++++++++++++--- 2 files changed, 40 insertions(+), 10 deletions(-) diff --git a/src/indexPage/react-components/binary-landing/Hero.jsx b/src/indexPage/react-components/binary-landing/Hero.jsx index 2996ace53c..325d2effc7 100644 --- a/src/indexPage/react-components/binary-landing/Hero.jsx +++ b/src/indexPage/react-components/binary-landing/Hero.jsx @@ -65,10 +65,15 @@ const Hero = () => { return ( -
- {renderContent()} - {renderCarousel()} -
+
+
+ {renderContent()} + {renderCarousel()} +
+ +
+
+
) }; diff --git a/static/css/_landing-binary.scss b/static/css/_landing-binary.scss index 93a33b1996..eccd1d037c 100644 --- a/static/css/_landing-binary.scss +++ b/static/css/_landing-binary.scss @@ -711,20 +711,29 @@ $header-color : #333333; } +.background-x { + display: flex; + justify-content: center; + align-items: center; + background: $hero-BG url(../image/hero_desktop.png) no-repeat; + background-size: cover; + + @include for-size(mobile) { + background: $hero-BG url(../image/hero_mobile.png) no-repeat; + } +} + .container-x { height: 100vh; width: 100%; + max-width: 1440px; display: flex; flex: 1; flex-direction: row; - background: $hero-BG url(../image/hero_desktop.png) no-repeat; - background-size: cover; - padding: 0px 5rem; + padding: 0px 3rem; gap: 2.4rem; @include for-size(mobile) { - background: $hero-BG url(../image/hero_mobile.png) no-repeat; - background-size: cover; flex-direction: column-reverse; padding: 1rem 1.4rem 0px 1.4rem; } @@ -765,13 +774,29 @@ $header-color : #333333; @include for-size(mobile) { flex: 0; - } } .right-x { align-items: end; min-width: 0px; + + @include for-size(mobile) { + margin: 0 10%; + } +} + +.logo-x { + display: none; + justify-content: center; + + img { + width: 50%; + } + + @include for-size(mobile) { + display: flex; + } } .slick-slider { From fe1b1c7cbc374f608248a650922d714e98403277 Mon Sep 17 00:00:00 2001 From: mitra-deriv Date: Mon, 4 Jul 2022 17:38:45 +0800 Subject: [PATCH 3/4] background fix --- static/css/_landing-binary.scss | 1 + 1 file changed, 1 insertion(+) diff --git a/static/css/_landing-binary.scss b/static/css/_landing-binary.scss index eccd1d037c..fe3ab4a4bd 100644 --- a/static/css/_landing-binary.scss +++ b/static/css/_landing-binary.scss @@ -720,6 +720,7 @@ $header-color : #333333; @include for-size(mobile) { background: $hero-BG url(../image/hero_mobile.png) no-repeat; + background-size: cover; } } From a0a251bd1bf1828442165ef6f13cc70f6bcbcd7d Mon Sep 17 00:00:00 2001 From: mitra-deriv Date: Mon, 4 Jul 2022 17:55:06 +0800 Subject: [PATCH 4/4] style: new line --- static/css/_landing-binary.scss | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/static/css/_landing-binary.scss b/static/css/_landing-binary.scss index 81d98c3673..726e1dba83 100644 --- a/static/css/_landing-binary.scss +++ b/static/css/_landing-binary.scss @@ -819,6 +819,7 @@ $header-color : #333333; } } +// To make the slider responsive, we need to override the default slider style. .slick-slider { width: 100%; } @@ -827,4 +828,4 @@ $header-color : #333333; display: flex !important; justify-content: center; align-items: center; -} \ No newline at end of file +}