Thanks to visit codestin.com
Credit goes to github.com

Skip to content
This repository was archived by the owner on May 20, 2025. It is now read-only.

Commit 76889f3

Browse files
habib-derivhabib-deriv
authored
Revert "Pr 85511 optimise rebranded home page (#4249)" (#4260)
This reverts commit 7a49d64.
1 parent 7a49d64 commit 76889f3

File tree

16 files changed

+358
-126
lines changed

16 files changed

+358
-126
lines changed

‎crowdin/messages.json

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -441,6 +441,7 @@
441441
"622253642": "Save time – no need to open, monitor, and close trades.",
442442
"623188171": "Trade cryptocurrencies and synthetic indices anytime, even on weekends and holidays.",
443443
"624256060": "Define optional parameters that give you more control over your trading, including stop loss, take profit, and deal cancellation.",
444+
"627388563": "More on CFDs",
444445
"627774646": "Additional income stream from monthly subscriptions.",
445446
"627845959": "Things to keep in mind when trading multipliers",
446447
"629101274": "If you select ‘Only Downs’, you win the payout if consecutive ticks fall successively after the entry spot. No payout if any tick rises or is equal to any of the previous ticks.",
@@ -664,6 +665,7 @@
664665
"887615993": " Stop loss or ",
665666
"888619169": "If you have made a deposit or have added a real MT5 account, follow these steps:",
666667
"888978991": "Each of these indices replicates the performance of top publicly traded companies in financial markets in Europe.",
668+
"889704223": "Trade the way you want with {{trade_no}} flexible trade types.",
667669
"890667695": "45%",
668670
"892120700": "Accumulators (also known as accumulator options) is amongst our simplest trade types that offer almost unlimited potential profit.",
669671
"893607771": "Benefit from round-the-clock trading hours (Monday to Friday), high liquidity, low barriers to entry, a wide range of offerings, and opportunities to trade on world events.",
@@ -1442,6 +1444,7 @@
14421444
"1881441674": "Read our terms and conditions to know how Deriv manages data feeds, security, privacy, and more.",
14431445
"1881705591": "Commodities trading on Deriv lets you profit from correctly predicting the market movement on precious metals and crude oil.",
14441446
"1882011796": "If you don’t ask for a removal of self-exclusion after the expiry, it is not removed automatically.",
1447+
"1882436352": "More on multipliers",
14451448
"1889326047": "Available as web and mobile apps",
14461449
"1890990339": "<0>Hong Kong 50</0> tracks the stock performance of the 50 largest listed companies in Hong Kong.",
14471450
"1893015908": "Uber Technologies Inc",
@@ -2259,8 +2262,8 @@
22592262
"-295883723": "Trade on the rising and falling prices of the most popular cryptocurrencies without the need to own a digital wallet.",
22602263
"-2124080301": "Choose from {{platforms_no}} powerful platforms — each designed with your needs in mind.",
22612264
"-246108767": "Learn more >",
2262-
"-151476073": "Learn More >",
22632265
"-1016982945": "Earn a range of payouts by correctly predicting market movements.",
2266+
"-674746835": "More on options",
22642267
"-502915460": "Multiply your potential profit without risking more than your stake.",
22652268
"-313388618": "Dtrader trading platform at Deriv",
22662269
"-1382581758": "My experience so far is just awesome! You can do instant buying and selling, and I hope to continue enjoying using Deriv P2P. Keep up the good work!",

‎src/components/elements/full-width-multicolumn.tsx

Lines changed: 1 addition & 35 deletions
Original file line numberDiff line numberDiff line change
@@ -6,12 +6,10 @@ import Button from 'components/custom/_button'
66
import device from 'themes/device'
77
import { TString } from 'types/generics'
88
import useHandleSignup from 'components/hooks/use-handle-signup'
9-
import { LocalizedLink } from 'components/localization/localized-link'
109

1110
type FullWidthMultiColumnProps = {
1211
children?: ReactElement[]
1312
header?: ReactElement
14-
sub_header?: ReactElement
1513
button_title?: ReactElement
1614
button_text?: TString | ReactElement
1715
multiple_row?: boolean
@@ -65,20 +63,6 @@ const StyledHeader = styled(Header)`
6563
line-height: 30px;
6664
}
6765
`
68-
const StyledSubHeader = styled(Header)`
69-
font-size: 24px;
70-
line-height: 36px;
71-
color: white;
72-
font-family: Ubuntu, sans-serif;
73-
74-
@media ${device.tablet} {
75-
text-align: center;
76-
max-width: 80vw;
77-
margin-bottom: 8px;
78-
font-size: 22px;
79-
line-height: 30px;
80-
}
81-
`
8266
const StyledTitle = styled(Header)`
8367
font-weight: 700;
8468
font-size: 16px;
@@ -115,7 +99,6 @@ const StyledTextContent = styled(Text)`
11599
font-weight: 400;
116100
font-size: 16px;
117101
line-height: 24px;
118-
font-family: Ubuntu, sans-serif;
119102
margin-bottom: 1.6rem;
120103
121104
@media ${device.tabletL} {
@@ -131,16 +114,10 @@ const StyledSectionContainer = styled(SectionContainer)`
131114
background: #414652;
132115
color: white;
133116
`
134-
const LearnMore = styled(LocalizedLink)`
135-
font-size: 16px;
136-
font-family: Ubuntu, sans-serif;
137-
color: var(--color-white-1);
138-
`
139117

140118
export const FullWidthMultiColumn = ({
141119
children,
142120
header,
143-
sub_header,
144121
multiple_row,
145122
button_title,
146123
button_text,
@@ -155,26 +132,15 @@ export const FullWidthMultiColumn = ({
155132
<StyledHeader as="h2" type="section-title" align="center" mb="1.2rem" lh="1.25">
156133
{header}
157134
</StyledHeader>
158-
<StyledSubHeader
159-
as="p"
160-
type="section-title"
161-
align="center"
162-
mb="1.2rem"
163-
lh="1.25"
164-
weight="400"
165-
>
166-
{sub_header}
167-
</StyledSubHeader>
168135
{items.map((group, i) => (
169136
<ItemContainer max-width="48.6rem" width="100%" key={i}>
170137
{group.map((child, idx) => {
171-
const { text, icon, item_title, link_text, link } = child.props
138+
const { text, icon, item_title } = child.props
172139
return (
173140
<Item key={idx} ai="center" direction="column">
174141
{icon}
175142
{item_title && <StyledTitle as="h3">{item_title}</StyledTitle>}
176143
{text && <StyledTextContent>{text}</StyledTextContent>}
177-
{link_text && <LearnMore to={link}>{link_text}</LearnMore>}
178144
</Item>
179145
)
180146
})}

‎src/images/common/home/banners/arabic/image-1.jpg

476 KB
Loading

‎src/images/svg/home/cfd_icon.svg

Lines changed: 0 additions & 5 deletions
This file was deleted.

‎src/images/svg/home/multipliers_icon.svg

Lines changed: 0 additions & 3 deletions
This file was deleted.

‎src/images/svg/home/option_icon.svg

Lines changed: 0 additions & 4 deletions
This file was deleted.

‎src/pages/home/_arabic-banner-data.tsx

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
import React from 'react'
2+
import { graphql, useStaticQuery } from 'gatsby'
3+
import InfiniteSlideshow from './_infinite-slide-show'
4+
import BannerInnerContent from './_banner-inner-content'
5+
6+
const query = graphql`
7+
query {
8+
image_1: file(relativePath: { eq: "home/banners/arabic/image-1.jpg" }) {
9+
...homePageHeroFadeIn
10+
}
11+
}
12+
`
13+
type HeroProps = {
14+
is_ppc?: boolean
15+
}
16+
17+
const ArabicBannerData = ({ is_ppc }: HeroProps) => {
18+
const data = useStaticQuery(query)
19+
20+
return (
21+
<InfiniteSlideshow images={data}>
22+
<BannerInnerContent is_ppc={is_ppc} />
23+
</InfiniteSlideshow>
24+
)
25+
}
26+
27+
export default ArabicBannerData

‎src/pages/home/_eu-banner-data.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -19,11 +19,11 @@ const query = graphql`
1919
}
2020
}
2121
`
22-
type THeroProps = {
22+
type HeroProps = {
2323
is_ppc?: boolean
2424
}
2525

26-
const EuBannerData = ({ is_ppc = false }: THeroProps) => {
26+
const EuBannerData = ({ is_ppc }: HeroProps) => {
2727
const data = useStaticQuery(query)
2828

2929
return (

‎src/pages/home/_eu-mobile-banner-data.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -19,11 +19,11 @@ const query = graphql`
1919
}
2020
}
2121
`
22-
type THeroProps = {
22+
type HeroProps = {
2323
is_ppc?: boolean
2424
}
2525

26-
const EuMobileBannerData = ({ is_ppc = false }: THeroProps) => {
26+
const EuMobileBannerData = ({ is_ppc }: HeroProps) => {
2727
const data = useStaticQuery(query)
2828

2929
return (

‎src/pages/home/_hero.tsx

Lines changed: 33 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,24 +1,49 @@
11
import React from 'react'
2+
import styled from 'styled-components'
23
import RawBannerData from './_row-banner-data'
34
import EuBannerData from './_eu-banner-data'
45
import EuMobileBannerData from './_eu-mobile-banner-data'
56
import RowMobileBannerData from './_row-mobile-banner-data'
7+
import device from 'themes/device'
68
import useRegion from 'components/hooks/use-region'
79
import useBreakpoints from 'components/hooks/use-breakpoints'
810

9-
type THeroProps = {
11+
type HeroProps = {
1012
is_ppc?: boolean
1113
}
1214

13-
const Hero = ({ is_ppc }: THeroProps) => {
14-
const { is_eu, is_row } = useRegion()
15-
const { is_mobile_or_tablet } = useBreakpoints()
15+
const HeroWrapper = styled.section`
16+
width: 100%;
17+
min-height: 100%;
18+
position: relative;
19+
margin-top: 72px;
20+
@media ${device.tabletL} {
21+
flex-wrap: wrap;
22+
justify-content: flex-start;
23+
min-height: 100%;
24+
margin-top: 58px;
25+
}
26+
`
1627

17-
if (is_eu && is_mobile_or_tablet) return <EuMobileBannerData is_ppc={is_ppc} />
18-
if (is_eu) return <EuBannerData is_ppc={is_ppc} />
19-
if (is_row && is_mobile_or_tablet) return <RowMobileBannerData is_ppc={is_ppc} />
28+
const Hero = ({ is_ppc }: HeroProps) => {
29+
const { is_eu } = useRegion()
30+
const { is_mobile_or_tablet } = useBreakpoints()
2031

21-
return <RawBannerData is_ppc={is_ppc} />
32+
return (
33+
<HeroWrapper>
34+
{is_eu ? (
35+
is_mobile_or_tablet ? (
36+
<EuMobileBannerData is_ppc={is_ppc} />
37+
) : (
38+
<EuBannerData is_ppc={is_ppc} />
39+
)
40+
) : is_mobile_or_tablet ? (
41+
<RowMobileBannerData is_ppc={is_ppc} />
42+
) : (
43+
<RawBannerData is_ppc={is_ppc} />
44+
)}
45+
</HeroWrapper>
46+
)
2247
}
2348

2449
export default Hero

‎src/pages/home/_infinite-slide-show.tsx

Lines changed: 14 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,22 @@
1-
import React, { useState, useEffect } from 'react'
1+
import React, { useState, useEffect, ReactNode } from 'react'
2+
import styled from 'styled-components'
3+
import device from 'themes/device'
24
import Background from 'components/elements/background-image'
35
import useBreakpoints from 'components/hooks/use-breakpoints'
46

5-
type TProps = {
7+
interface Props {
68
images: string[]
9+
children?: ReactNode
710
}
811

9-
const InfiniteSlideshow: React.FC<React.PropsWithChildren<TProps>> = ({ images, children }) => {
12+
interface State {
13+
currentImageIndex: number
14+
currentImageName: string
15+
}
16+
17+
const InfiniteSlideshow: React.FC<Props> = ({ images, children }) => {
1018
const { is_mobile_or_tablet } = useBreakpoints()
11-
const [currentImageIndex, setCurrentImageIndex] = useState(0)
19+
const [currentImageIndex, setCurrentImageIndex] = useState<State['currentImageIndex']>(0)
1220
const imageDataSize = Object.keys(images).length
1321

1422
const CustomBGStyles = {
@@ -22,13 +30,12 @@ const InfiniteSlideshow: React.FC<React.PropsWithChildren<TProps>> = ({ images,
2230
}
2331

2432
useEffect(() => {
25-
let intervalId: ReturnType<typeof setTimeout>
2633
if (imageDataSize > 1) {
27-
intervalId = setTimeout(() => {
34+
const intervalId = setInterval(() => {
2835
setCurrentImageIndex((currentImageIndex + 1) % imageDataSize)
2936
}, 3000)
37+
return () => clearInterval(intervalId)
3038
}
31-
return () => clearTimeout(intervalId)
3239
}, [images, currentImageIndex, imageDataSize])
3340

3441
return (

‎src/pages/home/_row-banner-data.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -19,11 +19,11 @@ const query = graphql`
1919
}
2020
}
2121
`
22-
type THeroProps = {
22+
type HeroProps = {
2323
is_ppc?: boolean
2424
}
2525

26-
const RawBannerData = ({ is_ppc = false }: THeroProps) => {
26+
const RawBannerData = ({ is_ppc }: HeroProps) => {
2727
const data = useStaticQuery(query)
2828

2929
return (

‎src/pages/home/_row-mobile-banner-data.tsx

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -19,12 +19,13 @@ const query = graphql`
1919
}
2020
}
2121
`
22-
type THeroProps = {
22+
type HeroProps = {
2323
is_ppc?: boolean
2424
}
2525

26-
const RawMobileBannerData = ({ is_ppc = false }: THeroProps) => {
26+
const RawMobileBannerData = ({ is_ppc }: HeroProps) => {
2727
const data = useStaticQuery(query)
28+
console.log('here in mobile view banners')
2829
return (
2930
<InfiniteSlideshow images={data}>
3031
<BannerInnerContent is_ppc={is_ppc} />

0 commit comments

Comments
 (0)