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 09b1a39

Browse files
mohammad-hashemi-derivmohammad-hashemi-deriv
authored
MohammadH/ EU UK Homepage Images (#2719)
* update package-lock.json * update package lock * feat: update all eu uk homepage images * perf: compress new pngs * chore: update graphql.types * fix: remove DMT5 Signals and Academy from EU UK nav * fix: add missing full stops in two sentences * refactor: remove mobile images and use desktop images in mobile carousel * revert: bring back DMT5 Signals and Academy to navbar for EU UK * fix: update eu-uk comments and remove 24x7 from uk hero
1 parent 12dc9db commit 09b1a39

31 files changed

+284
-71
lines changed

‎src/components/custom/_signup-public.js

Lines changed: 18 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,7 @@ import { Header, LinkText, QueryImage, Text } from 'components/elements'
88
import { localize } from 'components/localization'
99
import { Flex, Show, Box, Container } from 'components/containers'
1010
import { deriv_app_url } from 'common/constants'
11+
import { getCountryRule } from 'components/containers/visibility'
1112
import device from 'themes/device.js'
1213
// SVG
1314
import Apple from 'images/svg/custom/apple-40.svg'
@@ -20,6 +21,12 @@ const query = graphql`
2021
deriv_platform: file(relativePath: { eq: "sign-up/banner-phone.png" }) {
2122
...fadeIn
2223
}
24+
deriv_platform_eu: file(relativePath: { eq: "sign-up/banner-phone-eu.png" }) {
25+
...fadeIn
26+
}
27+
deriv_platform_uk: file(relativePath: { eq: "sign-up/banner-phone-uk.png" }) {
28+
...fadeIn
29+
}
2330
}
2431
`
2532
const StyledSectionContainer = styled(Box).attrs({ as: 'section' })`
@@ -303,6 +310,7 @@ const SignupPublic = ({
303310
is_submitting,
304311
}) => {
305312
const data = useStaticQuery(query)
313+
const { is_row, is_eu, is_uk } = getCountryRule()
306314
const [is_checked, setChecked] = useState(false)
307315
const handleChange = (event) => {
308316
setChecked(event.currentTarget.checked)
@@ -405,7 +413,11 @@ const SignupPublic = ({
405413
</SignupFormWrapper>
406414
<BackgroundWrapper direction="row" ai="center">
407415
<QueryImage
408-
data={data['deriv_platform']}
416+
data={
417+
(is_row && data['deriv_platform']) ||
418+
(is_eu && data['deriv_platform_eu']) ||
419+
(is_uk && data['deriv_platform_uk'])
420+
}
409421
alt="DTrader platform black theme"
410422
width="225px"
411423
/>
@@ -439,7 +451,11 @@ const SignupPublic = ({
439451
<MobileBackground>
440452
<MobilePlatform>
441453
<QueryImage
442-
data={data['deriv_platform']}
454+
data={
455+
(is_row && data['deriv_platform']) ||
456+
(is_eu && data['deriv_platform_eu']) ||
457+
(is_uk && data['deriv_platform_uk'])
458+
}
443459
alt="DTrader platform black theme"
444460
width="100%"
445461
/>

‎src/images/common/home/hero_platform1_eu.png

206 KB
Loading

‎src/images/common/home/hero_platform1_uk.png

209 KB
Loading

‎src/images/common/home/hero_platform2_eu.png

320 KB
Loading

‎src/images/common/home/hero_platform2_uk.png

320 KB
Loading

‎src/images/common/home/platforms_api_m.png

-16.8 KB
Binary file not shown.

‎src/images/common/home/platforms_binary_bot_m.png

-19.8 KB
Binary file not shown.

‎src/images/common/home/platforms_dbot_m.png

-20.3 KB
Binary file not shown.

‎src/images/common/home/platforms_deriv_go_m.png

-11 KB
Binary file not shown.

‎src/images/common/home/platforms_derivx_m.png

-22.9 KB
Binary file not shown.

‎src/images/common/home/platforms_dtrader_eu.png

84.9 KB
Loading

‎src/images/common/home/platforms_dtrader_m.png

-19 KB
Binary file not shown.

‎src/images/common/home/platforms_dtrader_uk.png

82 KB
Loading

‎src/images/common/home/platforms_mt5_eu.png

140 KB
Loading

‎src/images/common/home/platforms_mt5_m.png

-39.7 KB
Binary file not shown.

‎src/images/common/home/platforms_mt5_uk.png

140 KB
Loading

‎src/images/common/home/platforms_smarttrader_m.png

-13 KB
Binary file not shown.

‎src/images/common/home/trade_type_cfds_eu.png

37.4 KB
Loading

‎src/images/common/home/trade_type_cfds_uk.png

37.4 KB
Loading

‎src/images/common/home/trade_type_multipliers_eu.png

32.4 KB
Loading

‎src/images/common/home/trade_type_multipliers_uk.png

31.5 KB
Loading

‎src/images/common/sign-up/banner-phone-eu.png

69.1 KB
Loading

‎src/images/common/sign-up/banner-phone-uk.png

69.2 KB
Loading

‎src/pages/home/_hero.tsx

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -139,7 +139,9 @@ const Hero = ({ is_ppc }: HeroProps) => {
139139
>
140140
{text}
141141
</Header>
142-
<VerticalCarousel contents={!is_ppc ? contents : contents_ppc} />
142+
<VerticalCarousel
143+
contents={!is_ppc && !is_uk ? contents : contents_ppc}
144+
/>
143145
<Box tabletL={{ mt: '-8px' }}>
144146
<HeroButton
145147
id="dm-hero-signup"

‎src/pages/home/_our_platforms.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -34,7 +34,7 @@ const OurPlatforms = () => {
3434
mobileM={{ max_width: '328px' }}
3535
>
3636
<Localize
37-
translate_text="Choose from {{platforms_no}} powerful platforms — each designed with your needs in mind"
37+
translate_text="Choose from {{platforms_no}} powerful platforms — each designed with your needs in mind."
3838
values={{ platforms_no: is_row ? '8' : '2' }}
3939
/>
4040
</Header>

‎src/pages/home/_platform-slideshow.tsx

Lines changed: 28 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -12,9 +12,21 @@ const query = graphql`
1212
hero_platform1: file(relativePath: { eq: "home/hero_platform1.png" }) {
1313
...homePageHeroFadeIn
1414
}
15+
hero_platform1_eu: file(relativePath: { eq: "home/hero_platform1_eu.png" }) {
16+
...homePageHeroFadeIn
17+
}
18+
hero_platform1_uk: file(relativePath: { eq: "home/hero_platform1_uk.png" }) {
19+
...homePageHeroFadeIn
20+
}
1521
hero_platform2: file(relativePath: { eq: "home/hero_platform2.png" }) {
1622
...homePageHeroFadeIn
1723
}
24+
hero_platform2_eu: file(relativePath: { eq: "home/hero_platform2_eu.png" }) {
25+
...homePageHeroFadeIn
26+
}
27+
hero_platform2_uk: file(relativePath: { eq: "home/hero_platform2_uk.png" }) {
28+
...homePageHeroFadeIn
29+
}
1830
hero_platform3: file(relativePath: { eq: "home/hero_platform3.png" }) {
1931
...homePageHeroFadeIn
2032
}
@@ -54,19 +66,23 @@ const StyledImage = styled(QueryImage)<{ $is_hidden: boolean }>`
5466
const PlatformSlideshow = () => {
5567
const [active_index, setActiveIndex] = useState(0)
5668
const data = useStaticQuery(query)
57-
const { is_row } = getCountryRule()
69+
const { is_row, is_eu, is_uk } = getCountryRule()
5870

59-
const slide_images = is_row
60-
? [
61-
{ key: 'hero1', image: data.hero_platform1 },
62-
{ key: 'hero2', image: data.hero_platform2 },
63-
{ key: 'hero3', image: data.hero_platform3 },
64-
{ key: 'hero4', image: data.hero_platform4 },
65-
]
66-
: [
67-
{ key: 'hero2', image: data.hero_platform2 },
68-
{ key: 'hero3', image: data.hero_platform3 },
69-
]
71+
const slide_images =
72+
(is_row && [
73+
{ key: 'hero1', image: data.hero_platform1 },
74+
{ key: 'hero2', image: data.hero_platform2 },
75+
{ key: 'hero3', image: data.hero_platform3 },
76+
{ key: 'hero4', image: data.hero_platform4 },
77+
]) ||
78+
(is_eu && [
79+
{ key: 'hero1', image: data.hero_platform1_eu },
80+
{ key: 'hero2', image: data.hero_platform2_eu },
81+
]) ||
82+
(is_uk && [
83+
{ key: 'hero1', image: data.hero_platform1_uk },
84+
{ key: 'hero2', image: data.hero_platform2_uk },
85+
])
7086

7187
const setNextImage = useCallback(() => {
7288
setActiveIndex((prevIndex) => (prevIndex >= slide_images.length - 1 ? 0 : prevIndex + 1))

‎src/pages/home/_trade-types.tsx

Lines changed: 46 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -27,6 +27,12 @@ const query = graphql`
2727
trade_type_cfds: file(relativePath: { eq: "home/trade_type_cfds.png" }) {
2828
...fadeIn
2929
}
30+
trade_type_cfds_eu: file(relativePath: { eq: "home/trade_type_cfds_eu.png" }) {
31+
...fadeIn
32+
}
33+
trade_type_cfds_uk: file(relativePath: { eq: "home/trade_type_cfds_uk.png" }) {
34+
...fadeIn
35+
}
3036
trade_type_digitaloptions: file(
3137
relativePath: { eq: "home/trade_type_digitaloptions.png" }
3238
) {
@@ -35,6 +41,16 @@ const query = graphql`
3541
trade_type_multipliers: file(relativePath: { eq: "home/trade_type_multipliers.png" }) {
3642
...fadeIn
3743
}
44+
trade_type_multipliers_eu: file(
45+
relativePath: { eq: "home/trade_type_multipliers_eu.png" }
46+
) {
47+
...fadeIn
48+
}
49+
trade_type_multipliers_uk: file(
50+
relativePath: { eq: "home/trade_type_multipliers_uk.png" }
51+
) {
52+
...fadeIn
53+
}
3854
trade_type_spreads: file(relativePath: { eq: "home/trade_type_spreads.png" }) {
3955
...fadeIn
4056
}
@@ -72,9 +88,9 @@ const items_details_cr: TradeTypesProps[] = [
7288
},
7389
]
7490

75-
const items_details_eu_uk: TradeTypesProps[] = [
91+
const items_details_eu: TradeTypesProps[] = [
7692
{
77-
image_url: 'trade_type_cfds',
93+
image_url: 'trade_type_cfds_eu',
7894
image_alt: <Localize translate_text="CFDs" />,
7995
header: <Localize translate_text="CFDs" />,
8096
desc: (
@@ -84,7 +100,30 @@ const items_details_eu_uk: TradeTypesProps[] = [
84100
link_text: <Localize translate_text="More on CFDs" />,
85101
},
86102
{
87-
image_url: 'trade_type_multipliers',
103+
image_url: 'trade_type_multipliers_eu',
104+
image_alt: <Localize translate_text="Multipliers" />,
105+
header: <Localize translate_text="Multipliers" />,
106+
desc: (
107+
<Localize translate_text="Multiply your potential profit without risking more than your stake." />
108+
),
109+
link: '/trade-types/multiplier/',
110+
link_text: <Localize translate_text="More on multipliers" />,
111+
},
112+
]
113+
114+
const items_details_uk: TradeTypesProps[] = [
115+
{
116+
image_url: 'trade_type_cfds_uk',
117+
image_alt: <Localize translate_text="CFDs" />,
118+
header: <Localize translate_text="CFDs" />,
119+
desc: (
120+
<Localize translate_text="Trade with leverage and low spreads for better returns on successful trades." />
121+
),
122+
link: '/trade-types/cfds/',
123+
link_text: <Localize translate_text="More on CFDs" />,
124+
},
125+
{
126+
image_url: 'trade_type_multipliers_uk',
88127
image_alt: <Localize translate_text="Multipliers" />,
89128
header: <Localize translate_text="Multipliers" />,
90129
desc: (
@@ -237,8 +276,9 @@ const TradeItems = ({ items_details }: TradeItemsProps): ReactElement => {
237276
}
238277

239278
const TradeTypes = (): React.ReactNode => {
240-
const { is_row } = getCountryRule()
241-
const items_details_by_region = is_row ? items_details_cr : items_details_eu_uk
279+
const { is_row, is_eu, is_uk } = getCountryRule()
280+
const items_details_by_region =
281+
(is_row && items_details_cr) || (is_eu && items_details_eu) || (is_uk && items_details_uk)
242282
const [is_not_big_screen] = useBrowserResize(1979)
243283
const settings = {
244284
options: {
@@ -278,7 +318,7 @@ const TradeTypes = (): React.ReactNode => {
278318
tablet={{ mb: '16px' }}
279319
>
280320
<Localize
281-
translate_text="Trade the way you want with {{trade_no}} flexible trade types"
321+
translate_text="Trade the way you want with {{trade_no}} flexible trade types."
282322
values={{ trade_no: is_row ? '3' : '2' }}
283323
/>
284324
</Header>

‎src/pages/home/_what-our-clients-say.tsx

Lines changed: 129 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,7 @@ import { Container, Flex } from 'components/containers'
77
import device from 'themes/device'
88
import { addScript } from 'common/utility'
99
import Quote from 'images/svg/testimonials/quote.svg'
10+
import { getCountryRule } from 'components/containers/visibility'
1011

1112
const StyledContainer = styled.div`
1213
background: linear-gradient(76.83deg, #b1c9df 4.59%, #eaf4f5 66.44%);
@@ -235,6 +236,127 @@ const testimonial_slides = [
235236
},
236237
]
237238

239+
const testimonial_slides_eu = [
240+
{
241+
id: 'angeh',
242+
name: 'Angeh',
243+
quote: (
244+
<Localize translate_text="Weekend trades, fast deposits & withdrawals, plus synthetics trading - what’s better than this?" />
245+
),
246+
},
247+
{
248+
id: 'osilva',
249+
name: 'O.Silva',
250+
quote: (
251+
<Localize translate_text="Deriv is the best broker in the world so far in terms of the assets they offer, ease of withdrawals and deposits, plus other services. Keep on giving us the best, Deriv!" />
252+
),
253+
},
254+
{
255+
id: 'john',
256+
name: 'John',
257+
quote: (
258+
<Localize translate_text="I have never seen a platform that is so flexible with multiple resources that meet everyone’s needs. If that’s not enough, Deriv is second to none on customer support services!" />
259+
),
260+
},
261+
{
262+
id: 'frank',
263+
name: 'Frank',
264+
quote: <Localize translate_text="Excellent and reliable services; tested and trusted!" />,
265+
},
266+
{
267+
id: 'isaac',
268+
name: 'Isaac',
269+
quote: (
270+
<Localize translate_text="Deriv is the most reliable broker - excellent customer support and fast payments. It’s a great platform for commodities, forex, and synthetics trading." />
271+
),
272+
},
273+
{
274+
id: 'simon',
275+
name: 'Simon',
276+
quote: (
277+
<Localize translate_text="Low spreads on Synthetics and fast withdrawals - Deriv is a good broker!" />
278+
),
279+
},
280+
{
281+
id: 'francoise',
282+
name: 'Francoise',
283+
quote: (
284+
<Localize translate_text="It's the best broker in the world. I will recommend it to anyone every day all the time. Their support agents are really helpful in all areas." />
285+
),
286+
},
287+
{
288+
id: 'jackline',
289+
name: 'Jackline',
290+
quote: (
291+
<Localize translate_text="I've been a trader for many years, and I've never encountered a good broker like Deriv before – it's the best for customer care and payment options!" />
292+
),
293+
},
294+
{
295+
id: 'vikas',
296+
name: 'Vikas',
297+
quote: (
298+
<Localize translate_text="It's been a really great experience trading forex on Deriv - it's a smooth and seamless operation!" />
299+
),
300+
},
301+
{
302+
id: 'ls',
303+
name: 'LS',
304+
quote: (
305+
<Localize translate_text="Deriv is the best forex broker I have ever come across!" />
306+
),
307+
},
308+
]
309+
310+
const testimonial_slides_uk = [
311+
{
312+
id: 'osilva',
313+
name: 'O.Silva',
314+
quote: (
315+
<Localize translate_text="Deriv is the best broker in the world so far in terms of the assets they offer, ease of withdrawals and deposits, plus other services. Keep on giving us the best, Deriv!" />
316+
),
317+
},
318+
{
319+
id: 'john',
320+
name: 'John',
321+
quote: (
322+
<Localize translate_text="I have never seen a platform that is so flexible with multiple resources that meet everyone’s needs. If that’s not enough, Deriv is second to none on customer support services!" />
323+
),
324+
},
325+
{
326+
id: 'frank',
327+
name: 'Frank',
328+
quote: <Localize translate_text="Excellent and reliable services; tested and trusted!" />,
329+
},
330+
{
331+
id: 'francoise',
332+
name: 'Francoise',
333+
quote: (
334+
<Localize translate_text="It's the best broker in the world. I will recommend it to anyone every day all the time. Their support agents are really helpful in all areas." />
335+
),
336+
},
337+
{
338+
id: 'jackline',
339+
name: 'Jackline',
340+
quote: (
341+
<Localize translate_text="I've been a trader for many years, and I've never encountered a good broker like Deriv before – it's the best for customer care and payment options!" />
342+
),
343+
},
344+
{
345+
id: 'vikas',
346+
name: 'Vikas',
347+
quote: (
348+
<Localize translate_text="It's been a really great experience trading forex on Deriv - it's a smooth and seamless operation!" />
349+
),
350+
},
351+
{
352+
id: 'ls',
353+
name: 'LS',
354+
quote: (
355+
<Localize translate_text="Deriv is the best forex broker I have ever come across!" />
356+
),
357+
},
358+
]
359+
238360
type ClientSideProps = {
239361
quote: ReactElement
240362
name: string
@@ -254,6 +376,8 @@ const ClientSlide = ({ quote, name }: ClientSideProps) => (
254376
)
255377

256378
const WhatOurClientsSay = () => {
379+
const { is_row, is_eu, is_uk } = getCountryRule()
380+
257381
useEffect(() => {
258382
addScript({
259383
src: 'https://widget.trustpilot.com/bootstrap/v5/tp.widget.bootstrap.min.js',
@@ -327,7 +451,11 @@ const WhatOurClientsSay = () => {
327451
}}
328452
>
329453
<Carousel>
330-
{testimonial_slides.map(({ id, name, quote }) => (
454+
{(
455+
(is_row && testimonial_slides) ||
456+
(is_eu && testimonial_slides_eu) ||
457+
(is_uk && testimonial_slides_uk)
458+
).map(({ id, name, quote }) => (
331459
<ClientSlide key={id} quote={quote} name={name} />
332460
))}
333461
</Carousel>

0 commit comments

Comments
 (0)