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

Commit 1e9d4a0

Browse files
mitra-derivmitra-deriv
committed
fix: responsive issue in hero section
1 parent 3b75518 commit 1e9d4a0

File tree

2 files changed

+136
-199
lines changed

2 files changed

+136
-199
lines changed

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

Lines changed: 60 additions & 83 deletions
Original file line numberDiff line numberDiff line change
@@ -2,95 +2,72 @@ import React from 'react'
22
import Slider from 'react-slick';
33
import { translate } from '../../../common/i18n';
44

5-
const carouselImageArray = [
6-
{
7-
img: 'image/hero-dmt5.png',
8-
},
9-
{
10-
img: 'image/hero-derivgo.png',
11-
},
12-
{
13-
img: 'image/hero-derivx.png',
14-
},
15-
{
16-
img: 'image/hero-dtrader.png',
17-
},
5+
const carouselImages = [
6+
'image/hero-dmt5.png',
7+
'image/hero-derivgo.png',
8+
'image/hero-derivx.png',
9+
'image/hero-dtrader.png',
1810
]
1911

20-
const Hero = () => {
21-
const settings = {
22-
dots : false,
23-
infinite : true,
24-
speed : 1000,
25-
slidesToShow : 1,
26-
slidesToScroll: 1,
27-
arrows : false,
28-
autoplay : true,
29-
autoplaySpeed : 3000,
30-
responsive : [
31-
{
32-
breakpoint: 1024,
33-
settings : {
34-
slidesToShow : 1,
35-
slidesToScroll: 1,
36-
},
12+
const carouselSettings = {
13+
dots : false,
14+
infinite : true,
15+
speed : 1000,
16+
slidesToShow : 1,
17+
slidesToScroll: 1,
18+
arrows : false,
19+
autoplay : true,
20+
autoplaySpeed : 3000,
21+
responsive : [
22+
{
23+
breakpoint: 1024,
24+
settings : {
25+
slidesToShow : 1,
26+
slidesToScroll: 1,
3727
},
38-
{
39-
breakpoint: 700,
40-
settings : {
41-
slidesToShow : 1,
42-
slidesToScroll: 1,
43-
},
28+
},
29+
{
30+
breakpoint: 700,
31+
settings : {
32+
slidesToShow : 1,
33+
slidesToScroll: 1,
4434
},
45-
],
46-
};
47-
return (
48-
<section className="binary-hero">
49-
<div className="binary-hero-inner section-container">
35+
},
36+
],
37+
};
5038

51-
<div className="binary-hero-inner__content">
52-
<h1>{translate('We’re moving!')}</h1>
53-
<h2>
54-
{translate('We’ve been')}<b>{translate(' Binary.com')}</b>{translate(' for 2 decades and it’s time for an exciting new chapter.')}
55-
</h2>
56-
<div className='binary-hero-inner_content-subheader'>
57-
<h2>{translate('Say hello to our new home,')}<b>{translate(' Deriv.')}</b>
58-
</h2>
59-
</div>
60-
<div className="btn-group">
61-
<a href="https://deriv.com" target="_blank">
62-
<button className="l-btn primary">{translate('Hello Deriv!')}</button>
63-
</a>
64-
<a href="https://www.binary.com" target="blank" id="logo">
65-
<button className="l-btn">{translate('Maybe later')}</button>
66-
</a>
67-
</div>
68-
</div>
69-
<div className="binary-hero-inner__placeholder">
70-
<a href=''>
71-
<img className='binary-hero-inner__binary_logo' src="image/binary.svg" />
72-
</a>
73-
<div className="binary-hero-inner__placeholder-inner">
74-
<Slider {...settings}>
75-
{carouselImageArray.map((slide, index) => {
76-
const { img } = slide;
77-
return (
78-
<div>
79-
<div className='binary-hero-inner__placeholder-image-container'>
80-
<img
81-
className="binary-hero-inner__slide_img"
82-
key={index}
83-
src={img}
84-
/>
85-
</div>
86-
</div>
87-
)
88-
}
89-
)}
90-
</Slider>
91-
</div>
92-
</div>
39+
const Hero = () => {
40+
const renderContent = () => (
41+
<div className='container-x_box-x left-x'>
42+
<h1>{translate('We’re moving!')}</h1>
43+
<h2>
44+
{translate('We’ve been')}<b>{translate(' Binary.com')}</b>{translate(' for 2 decades and it’s time for an exciting new chapter.')}
45+
</h2>
46+
<h2>{translate('Say hello to our new home,')}<b>{translate(' Deriv.')}</b></h2>
47+
<div className="btn-group">
48+
<a href="https://deriv.com" target="_blank">
49+
<button className="l-btn primary">{translate('Hello Deriv!')}</button>
50+
</a>
51+
<a href="https://www.binary.com" target="blank" id="logo">
52+
<button className="l-btn">{translate('Maybe later')}</button>
53+
</a>
9354
</div>
55+
</div>
56+
)
57+
58+
const renderCarousel = () => (
59+
<div className='container-x_box-x right-x'>
60+
<Slider {...carouselSettings}>
61+
{carouselImages.map((slide, index) => <img key={index} src={slide}/>)}
62+
</Slider>
63+
</div>
64+
)
65+
66+
67+
return (
68+
<section className="container-x">
69+
{renderContent()}
70+
{renderCarousel()}
9471
</section>
9572
)
9673
};

‎static/css/_landing-binary.scss

Lines changed: 76 additions & 116 deletions
Original file line numberDiff line numberDiff line change
@@ -20,11 +20,15 @@ $header-color : #333333;
2020
}
2121
}
2222

23-
2423
.navigation {
2524
display: block;
2625
padding: 0 2rem;
2726
background: #16212d;
27+
position: absolute;
28+
top: 0;
29+
left: 0;
30+
right: 0;
31+
2832
@include for-size(mobile) {
2933
display: none;
3034
}
@@ -39,8 +43,6 @@ $header-color : #333333;
3943
margin: 0px auto;
4044
}
4145

42-
43-
4446
&-logo {
4547
width: 138px;
4648

@@ -63,116 +65,6 @@ $header-color : #333333;
6365
max-width: 1400px;
6466
}
6567

66-
.binary-hero {
67-
margin-top: -107px;
68-
padding: 0px 20px;
69-
height: 100vh;
70-
display: flex;
71-
72-
@include for-size(mobile) {
73-
margin-top: unset;
74-
}
75-
background: $hero-BG url(../image/hero_desktop.png) no-repeat;
76-
background-size: cover;
77-
@include for-size(mobile) {
78-
background: $hero-BG url(../image/hero_mobile.png) no-repeat;
79-
background-size: cover;
80-
}
81-
&-inner {
82-
display: flex;
83-
align-items: center;
84-
padding: calc(7rem + 5rem) 1rem;
85-
86-
@include for-size(desktop) {
87-
padding: calc(7rem + 5rem) 2rem;
88-
}
89-
90-
@include for-size(mobile) {
91-
flex-direction: column-reverse;
92-
padding: 4rem 2rem;
93-
94-
.btn-group {
95-
text-align: left;
96-
}
97-
}
98-
99-
&__content {
100-
flex: 1 1 50%;
101-
102-
h1 {
103-
color: #FFF;
104-
margin: 2rem 2rem 2rem 0;
105-
font: 700 5rem $font-IBM;
106-
107-
@include for-size(mobile) {
108-
font: 700 3rem $font-IBM;
109-
margin: 0 0 2rem 0;
110-
}
111-
}
112-
113-
h2 {
114-
color: $white;
115-
line-height: 40px;
116-
margin-bottom: 2rem;
117-
font: 400 2rem $font-IBM;
118-
119-
@include for-size(mobile) {
120-
font: 400 1.5rem $font-IBM;
121-
margin: 0 0 2.5rem 0;
122-
}
123-
}
124-
&-subheader {
125-
margin-top: 2.3rem;
126-
}
127-
}
128-
129-
&__placeholder {
130-
flex: 1 1 50%;
131-
display: flex;
132-
align-items: center;
133-
justify-content: center;
134-
135-
@include for-size(mobile) {
136-
flex-direction: column;
137-
}
138-
139-
img {
140-
@include for-size(mobile) {
141-
object-fit: contain;
142-
width: 100%;
143-
}
144-
}
145-
&-inner {
146-
width: 600px !important;
147-
@include for-size(mobile) {
148-
width: 300px !important;
149-
}
150-
151-
}
152-
&-image-container {
153-
width: 600px !important;
154-
@include for-size(mobile) {
155-
width: 300px !important;
156-
}
157-
img {
158-
width : 100% !important;
159-
object-fit : 'cover' !important;
160-
}
161-
}
162-
}
163-
164-
&__binary_logo {
165-
display: none;
166-
width: 14.75rem !important;
167-
margin-bottom: 3rem;
168-
169-
@include for-size(mobile) {
170-
display: block;
171-
}
172-
}
173-
}
174-
}
175-
17668
.l-btn {
17769
height: 2.5rem;
17870
border-radius: 0.25rem;
@@ -517,7 +409,6 @@ $header-color : #333333;
517409
}
518410
}
519411

520-
521412
.arrow {
522413
&.right {
523414
transform: rotate(180deg);
@@ -703,7 +594,6 @@ $header-color : #333333;
703594
}
704595
}
705596

706-
707597
.bot-gif-placeholder {
708598
display: flex;
709599
align-items: center;
@@ -740,7 +630,6 @@ $header-color : #333333;
740630
display: none !important;
741631
}
742632

743-
744633
.card-container{
745634
padding: 2rem 0rem 3rem 0rem;
746635
margin: 0 auto;
@@ -822,4 +711,75 @@ $header-color : #333333;
822711

823712
}
824713

714+
.container-x {
715+
height: 100vh;
716+
width: 100%;
717+
display: flex;
718+
flex: 1;
719+
flex-direction: row;
720+
background: $hero-BG url(../image/hero_desktop.png) no-repeat;
721+
background-size: cover;
722+
padding: 0px 5rem;
723+
gap: 2.4rem;
825724

725+
@include for-size(mobile) {
726+
background: $hero-BG url(../image/hero_mobile.png) no-repeat;
727+
background-size: cover;
728+
flex-direction: column-reverse;
729+
padding: 1rem 1.4rem 0px 1.4rem;
730+
}
731+
732+
&_box-x {
733+
display: flex;
734+
flex: 1;
735+
flex-direction: column;
736+
justify-content: center;
737+
}
738+
739+
h1 {
740+
color: #FFF;
741+
margin: 2rem 2rem 2rem 0;
742+
font: 700 5rem $font-IBM;
743+
744+
@include for-size(mobile) {
745+
font: 700 2rem $font-IBM;
746+
margin: 0 0 1rem 0;
747+
}
748+
}
749+
750+
h2 {
751+
color: $white;
752+
line-height: 40px;
753+
margin-bottom: 2rem;
754+
font: 400 2rem $font-IBM;
755+
756+
@include for-size(mobile) {
757+
font: 400 1rem $font-IBM;
758+
margin: 0 0 1.5rem 0;
759+
}
760+
}
761+
}
762+
763+
.left-x {
764+
align-items: start;
765+
766+
@include for-size(mobile) {
767+
flex: 0;
768+
769+
}
770+
}
771+
772+
.right-x {
773+
align-items: end;
774+
min-width: 0px;
775+
}
776+
777+
.slick-slider {
778+
width: 100%;
779+
}
780+
781+
.slick-track {
782+
display: flex !important;
783+
justify-content: center;
784+
align-items: center;
785+
}

0 commit comments

Comments
 (0)
pFad - Phonifier reborn

Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.

Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.


Alternative Proxies:

Alternative Proxy

pFad Proxy

pFad v3 Proxy

pFad v4 Proxy