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

Mitra/Fix responsive issue #3672

Merged
habib-deriv merged 5 commits into from
Jul 4, 2022
Merged

Mitra/Fix responsive issue #3672

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
1e9d4a0
fix: responsive issue in hero section
mitra-deriv Jul 4, 2022
2ea7107
fix: add logo for mobile
mitra-deriv Jul 4, 2022
fe1b1c7
background fix
mitra-deriv Jul 4, 2022
82ff32d
Merge branch 'binary-com-lp-new' into fix-responsive-issue
mitra-deriv Jul 4, 2022
a0a251b
style: new line
mitra-deriv Jul 4, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
150 changes: 66 additions & 84 deletions src/indexPage/react-components/binary-landing/Hero.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,96 +2,78 @@ 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 (
<section className="binary-hero">
<div className="binary-hero-inner section-container">
},
],
};

<div className="binary-hero-inner__content">
<h1>{translate('We’re moving!')}</h1>
<h2>
{translate('We’ve been')}<b>{translate(' Binary.com')}</b>{translate(' for 2 decades and it’s time for an exciting new chapter.')}
</h2>
<div className='binary-hero-inner_content-subheader'>
<h2>{translate('Say hello to our new home,')}<b>{translate(' Deriv.')}</b>
</h2>
</div>
<div className="btn-group">
<a href="https://deriv.com">
<button className="l-btn primary">{translate('Hello Deriv!')}</button>
</a>
<a href="https://www.binary.com?binary-bot-lp" id="logo">
<button className="l-btn">{translate('Maybe later')}</button>
</a>
</div>
</div>
<div className="binary-hero-inner__placeholder">
<a href=''>
<img className='binary-hero-inner__binary_logo' src="image/binary.svg" />
</a>
<div className="binary-hero-inner__placeholder-inner">
<Slider {...settings}>
{carouselImageArray.map((slide, index) => {
const { img } = slide;
return (
<div>
<div className='binary-hero-inner__placeholder-image-container'>
<img
className="binary-hero-inner__slide_img"
key={index}
src={img}
/>
</div>
</div>
)
}
)}
</Slider>
</div>
</div>
const Hero = () => {
const renderContent = () => (
<div className='container-x_box-x left-x'>
<h1>{translate('We’re moving!')}</h1>
<h2>
{translate('We’ve been')}<b>{translate(' Binary.com')}</b>{translate(' for 2 decades and it’s time for an exciting new chapter.')}
</h2>
<h2>{translate('Say hello to our new home,')}<b>{translate(' Deriv.')}</b></h2>
<div className="btn-group">
<a href="https://deriv.com" target="_blank">
<button className="l-btn primary">{translate('Hello Deriv!')}</button>
</a>
<a href="https://www.binary.com?binary-bot-lp" target="blank" id="logo">
<button className="l-btn">{translate('Maybe later')}</button>
</a>
</div>
</section>
</div>
)

const renderCarousel = () => (
<div className='container-x_box-x right-x'>
<Slider {...carouselSettings}>
{carouselImages.map((slide, index) => <img key={index} src={slide}/>)}
</Slider>
</div>
)


return (
<div className='background-x'>
<section className="container-x">
{renderContent()}
{renderCarousel()}
<div class="logo-x">
<img src="image/binary.png"/>
</div>
</section>
</div>
)
};

Expand Down
Loading