Skip to content
This repository was archived by the owner on Feb 22, 2024. It is now read-only.

Commit 0c423eb

Browse files
prince-derivprince-deriv
authored
Merge pull request #3709 from mitra-deriv/hotfixes-for-landing-page
Mitra/Hotfixes for landing page
2 parents e008776 + 3c33665 commit 0c423eb

File tree

6 files changed

+90
-83
lines changed

6 files changed

+90
-83
lines changed

‎src/indexPage/react-components/binary-landing/Hero.jsx‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -38,7 +38,7 @@ const carouselSettings = {
3838

3939
const Hero = () => {
4040
const renderContent = () => (
41-
<div className='container-x_box-x left-x'>
41+
<div className='hero-wrapper-container_box-binary hero-wrapper-container-left-binary'>
4242
<h1>{translate('We’re moving!')}</h1>
4343
<h2>
4444
{translate('We’ve been')}<b>{translate(' Binary.com')}</b>{translate(' for 2 decades and it’s time for an exciting new chapter.')}
@@ -56,7 +56,7 @@ const Hero = () => {
5656
)
5757

5858
const renderCarousel = () => (
59-
<div className='container-x_box-x right-x'>
59+
<div className='hero-wrapper-container_box-binary hero-wrapper-container-right-binary'>
6060
<Slider {...carouselSettings}>
6161
{carouselImages.map((slide, index) => <img key={index} src={slide} />)}
6262
</Slider>
@@ -65,11 +65,11 @@ const Hero = () => {
6565

6666

6767
return (
68-
<div className='background-x'>
69-
<section className="container-x">
68+
<div className='hero-wrapper'>
69+
<section className="hero-wrapper-container">
7070
{renderContent()}
7171
{renderCarousel()}
72-
<div className="logo-x">
72+
<div className="hero-wrapper-container-logo-binary">
7373
<img src="image/binary.png" />
7474
</div>
7575
</section>

‎src/indexPage/react-components/binary-landing/SwitchSection.jsx‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,5 @@
11
import React from 'react';
22
import { translate } from '../../../common/i18n';
3-
import { getOAuthURLDeriv } from '../../../common/appId';
43

54
const SwitchSection = () => (
65
<section className="switch">

‎src/indexPage/react-components/binary-landing/WaitSection.jsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ import { translate } from '../../../common/i18n';
33

44
const WaitSection = () => (
55
<section className='binary-wait-wrapper'>
6-
<div className='binary-wait-wrapper-inner section-container'>
6+
<div className='binary-wait-wrapper-inner binary-section-container'>
77
<div className='binary-wait-wrapper-inner-content'>
88
<h1>{translate('Don’t wait')}</h1>
99
<h2>{translate('Future-proof your trading. Come over to Deriv now.')}</h2>
@@ -13,9 +13,9 @@ const WaitSection = () => (
1313
</a>
1414
</div>
1515
</div>
16-
<img src="../image/dont-wait-image.png" className='binary-wait-wrapper-inner-placeholder-binary-desktop'/>
16+
<img src="../image/dont-wait-image.png" className='binary-wait-wrapper-inner-placeholder-binary-desktop' />
1717
<div className='binary-wait-wrapper-inner-placeholder-binary'>
18-
<img src="../image/dtrader-mobile.png" className='binary-wait-wrapper-inner-placeholder-binary-mobile'/>
18+
<img src="../image/dtrader-mobile.png" className='binary-wait-wrapper-inner-placeholder-binary-mobile' />
1919
<h1>{translate('Come over to Deriv and future-proof your trading now.')}</h1>
2020
</div>
2121
</div>

‎static/css/_carousel.scss‎

Lines changed: 10 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -86,7 +86,7 @@
8686
padding: 0.625rem 0.75rem 0.625rem 1rem;
8787
font-size: 0.875rem;
8888
font-weight: 700;
89-
width: 8.18rem;
89+
min-width: 8.18rem;
9090
color: #FF444F;
9191
background: #FFFFFF;
9292
border-radius: 6.25rem;
@@ -111,14 +111,19 @@
111111

112112
&__btn_inner {
113113
display: flex;
114-
gap: 0.5rem;
114+
align-items: center;
115+
justify-content: center;
116+
height: 20px;
117+
img {
118+
margin-left: 0.5rem;
119+
}
115120
}
116121
}
117122

118123
.carousel_section__mobile .carousel_section__slide_card {
119124
flex-direction: column;
120125
max-width: 20.5rem;
121-
max-height: 26.125rem;
126+
max-height: 27rem;
122127
display: flex;
123128
text-align: center;
124129
outline: none;
@@ -145,6 +150,7 @@
145150

146151
@include for-size(mobile) {
147152
top: 10.375rem;
153+
margin-bottom: 0.2rem;
148154
}
149155

150156
}
@@ -156,7 +162,7 @@
156162
margin-bottom: 0.5rem;
157163
@include for-size(mobile) {
158164
font: 700 1.3rem $font-IBM;
159-
margin-bottom: 0.5rem;
165+
margin: 0.5rem;
160166
}
161167

162168
}

‎static/css/_landing-binary.scss‎

Lines changed: 71 additions & 69 deletions
Original file line numberDiff line numberDiff line change
@@ -64,7 +64,6 @@ $header-color : #333333;
6464
}
6565

6666
.binary-section-container {
67-
padding: 0 2rem;
6867
margin: 0 auto;
6968
max-width: 1400px;
7069

@@ -446,6 +445,8 @@ $header-color : #333333;
446445
justify-content: center;
447446
text-align: center;
448447
flex-direction: column;
448+
box-shadow: inset 0px 1px 0px #f2f3f4;
449+
margin-top: 2rem;
449450
}
450451

451452
&-content {
@@ -731,7 +732,7 @@ $header-color : #333333;
731732

732733
}
733734

734-
.background-x {
735+
.hero-wrapper {
735736
display: flex;
736737
justify-content: center;
737738
align-items: center;
@@ -742,81 +743,82 @@ $header-color : #333333;
742743
background: $hero-BG url(../image/hero_mobile.png) no-repeat;
743744
background-size: cover;
744745
}
745-
}
746-
747-
.container-x {
748-
height: 100vh;
749-
width: 100%;
750-
max-width: 1440px;
751-
display: flex;
752-
flex: 1;
753-
flex-direction: row;
754-
padding: 0px 3rem;
755-
gap: 2.4rem;
756-
757-
@include for-size(mobile) {
758-
flex-direction: column-reverse;
759-
padding: 1rem 1.4rem 0px 1.4rem;
760-
}
761-
762-
&_box-x {
746+
&-container{
747+
height: 100vh;
748+
width: 100%;
749+
max-width: 1440px;
763750
display: flex;
764751
flex: 1;
765-
flex-direction: column;
766-
justify-content: center;
767-
}
768-
769-
h1 {
770-
color: #FFF;
771-
margin: 2rem 2rem 2rem 0;
772-
font: 700 5rem $font-IBM;
773-
752+
flex-direction: row;
753+
padding: 0px 3rem;
754+
gap: 2.4rem;
774755
@include for-size(mobile) {
775-
font: 700 2rem $font-IBM;
776-
margin: 0 0 1rem 0;
756+
flex-direction: column-reverse;
757+
padding: 1rem 1.4rem 0px 1.4rem;
758+
gap: unset;
777759
}
778-
}
779-
780-
h2 {
781-
color: $white;
782-
line-height: 40px;
783-
margin-bottom: 2rem;
784-
font: 400 2rem $font-IBM;
785-
786-
@include for-size(mobile) {
787-
font: 400 1rem $font-IBM;
788-
margin: 0 0 1.5rem 0;
760+
&_box-binary {
761+
display: flex;
762+
flex: 1;
763+
flex-direction: column;
764+
justify-content: center;
765+
h1 {
766+
color: #FFF;
767+
margin: 2rem 2rem 2rem 0;
768+
font: 700 5rem $font-IBM;
769+
770+
@include for-size(mobile) {
771+
font: 700 2rem $font-IBM;
772+
margin: 0 0 1rem 0;
773+
}
774+
}
775+
776+
h2 {
777+
color: $white;
778+
line-height: 40px;
779+
margin-bottom: 2rem;
780+
font: 400 2rem $font-IBM;
781+
782+
@include for-size(mobile) {
783+
font: 400 1rem $font-IBM;
784+
margin: 0 0 1.5rem 0;
785+
}
786+
}
789787
}
790-
}
791-
}
792-
793-
.left-x {
794-
align-items: start;
795-
796-
@include for-size(mobile) {
797-
flex: 0;
798-
}
799-
}
788+
&-left-binary {
789+
align-items: start;
790+
791+
@include for-size(mobile) {
792+
flex: 0;
793+
}
794+
}
795+
796+
&-right-binary {
797+
align-items: end;
798+
min-width: 0px;
799+
800+
@include for-size(mobile) {
801+
margin: 0 10%;
802+
}
803+
}
804+
&-logo-binary {
805+
display: none;
806+
justify-content: center;
807+
808+
img {
809+
width: 50%;
810+
}
811+
812+
@include for-size(mobile) {
813+
display: flex;
814+
}
800815

801-
.right-x {
802-
align-items: end;
803-
min-width: 0px;
816+
@media only screen
804817

805-
@include for-size(mobile) {
806-
margin: 0 10%;
807-
}
818+
and (max-device-width: 375px) {
819+
808820
}
809-
810-
.logo-x {
811-
display: none;
812-
justify-content: center;
813-
814-
img {
815-
width: 50%;
816-
}
817-
818-
@include for-size(mobile) {
819-
display: flex;
821+
}
820822
}
821823
}
822824

‎static/css/bot.scss‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -127,7 +127,7 @@ body {
127127
text-align: right;
128128
padding: 3px 20px;
129129
display: table;
130-
@media (max-width: 400px) {
130+
@media (max-width: 1024px) {
131131
min-height: 25px !important;
132132
}
133133
}

0 commit comments

Comments
 (0)