-
+
{localize('Revenue share')}
-
-
+
+
{localize(
'Earn based on the monthly net revenue generated by your clients.',
)}
-
+
{RevenueShare.map((col, index) => (
+
-
+
{localize('CPA (EU only)')}
-
- {localize('Earn based on each successful referral.')}
+
+
+ {localize('Earn based on each successful referral.')}
+
-
+
-
+
+
+
@@ -232,8 +328,8 @@ const DerivAffiliateProgramme = () => {
{!is_calculated ? (
+
{localize('How it’s calculated')}
-
+
{data.calculation}
+
+ {localize('Back')}
+
{
>
{localize('Become an affiliate')}
-
- {localize('Back')}
-
)}
-
-
+
{data.name}
-
- {data.description}
+
+ {data.description}
{data.assets.map((asset, idx) => (
@@ -226,18 +346,21 @@ const DMT5Synthetic = ({ data }) => {
/>
)}
-
+
) : (
<>
-
{!is_calculated ? (
+
{localize('How it’s calculated')}
-
+
{data.calculation}
+
+ {localize('Back')}
+
{
>
{localize('Become an affiliate')}
-
- {localize('Back')}
-
)}
-
-
+
{data.name}
-
- {data.description}
+
+ {data.description}
{data.assets.map((asset, idx) => (
-
+
) : (
<>
-
{!is_calculated ? (
+
{localize('How it’s calculated')}
-
+
{data.calculation}
+
+ {localize('Back')}
+
{
>
{localize('Become an affiliate')}
-
- {localize('Back')}
-
)}
@@ -435,7 +555,7 @@ const DMT5Advanced = ({ data }) => {
const ib_dmt5_standard = {
name:
+
-
+
+
+
),
}
const ib_dmt5_advanced = {
name:
-
+ <>
+
+
+
+
+
),
}
const ib_dmt5_synthetic = {
- name:
+
-
+
+
-
+
+
+
),
}
diff --git a/src/pages/partners/affiliate-ib/_faq-data.js b/src/pages/partners/affiliate-ib/_faq-data.js
index d0189a37c48..5da6f7163ad 100644
--- a/src/pages/partners/affiliate-ib/_faq-data.js
+++ b/src/pages/partners/affiliate-ib/_faq-data.js
@@ -6,8 +6,7 @@ import { Header, Text, LinkText } from 'components/elements'
import { isBrowser, affiliate_signup_url } from 'common/utility'
const ItemContainer = styled(SectionContainer)`
- padding: 4rem 0;
- max-width: 79rem;
+ padding: 0;
`
const HeaderPrimary = styled(Header)`
@@ -25,12 +24,11 @@ const TextSecondary = styled(Text)`
const TextList = styled(Text)`
margin-top: 1.6rem;
margin-bottom: 0.8rem;
- font-weight: bold;
`
const StyledLink = styled(LinkText)`
color: var(--color-red);
- font-weight: bold;
+ font-weight: normal;
`
const StyledUl = styled.ul`
@@ -41,8 +39,9 @@ const StyledUl = styled.ul`
const LocalizedLinkText = styled((props) =>
@@ -319,8 +318,8 @@ const IBAccountManagement = () => (
diff --git a/src/pages/partners/affiliate-ib/_faq.js b/src/pages/partners/affiliate-ib/_faq.js
index 2642b6bcaed..b2010a01363 100644
--- a/src/pages/partners/affiliate-ib/_faq.js
+++ b/src/pages/partners/affiliate-ib/_faq.js
@@ -8,25 +8,69 @@ import {
IBAccountManagement,
IBReferralTools,
} from './_faq-data'
+import device from 'themes/device'
import { SectionContainer } from 'components/containers'
import { localize } from 'components/localization'
import { Header, Accordion, AccordionItem } from 'components/elements'
import DotPattern from 'images/svg/dot-pattern.svg'
+const FaqHeader = styled(Header)`
+ @media ${device.tabletL} {
+ font-size: 24px;
+ }
+`
+
+const FaqSubHeader = styled(Header)`
+ @media ${device.tabletL} {
+ margin-top: 24px;
+ }
+`
+
const RelativeContainer = styled(SectionContainer)`
position: relative;
overflow: hidden;
+
+ @media ${device.tabletL} {
+ padding: 40px 0;
+ }
`
const TopLeftDot = styled.img`
+ width: 730px;
position: absolute;
top: 4px;
left: 0;
+
+ @media ${device.laptopL} {
+ width: 630px;
+ left: -50px;
+ }
+
+ @media ${device.laptop} {
+ left: -250px;
+ }
+
+ @media ${device.tabletL} {
+ left: -500px;
+ }
`
const BottomRightDot = styled.img`
position: absolute;
bottom: 16px;
right: 0;
+ height: 154px;
+
+ @media ${device.laptopL} {
+ right: 0;
+ }
+
+ @media ${device.laptop} {
+ right: -200px;
+ }
+
+ @media ${device.tabletL} {
+ right: -450px;
+ }
`
const AccordionWrapper = styled.div`
max-width: 99.6rem;
@@ -35,27 +79,43 @@ const AccordionWrapper = styled.div`
z-index: 2;
`
+const StyledAccordionWrapper = styled(AccordionWrapper)`
+ p,
+ h1,
+ h5 {
+ font-size: 16px !important;
+ }
+`
const Faq = () => {
const parent_style = {
- marginBottom: '4rem',
+ marginBottom: '2.4rem',
}
const item_style = {
padding: '4rem',
- background: 'var(--color-grey-4)',
+ background: 'var(--color-grey-35)',
}
const header_style = {
padding: '1.6rem 4rem',
border: 'none',
+ borderRadius: '8px',
+ position: 'relative',
+ boxShadow: '0 4px 8px 0 rgba(14, 14, 14, 0.1)',
}
return (
-
+
{localize('Browse our FAQ')}
-
-
+
+
{localize('Deriv Affiliate Programme')}
-
-
+
+
{
{
-
-
+
+
{localize('Deriv IB Programme')}
-
-
-
+
+
+
{
{
-
+
diff --git a/src/pages/partners/affiliate-ib/_hero.js b/src/pages/partners/affiliate-ib/_hero.js
index ec4eba9cdc1..209b42a86db 100644
--- a/src/pages/partners/affiliate-ib/_hero.js
+++ b/src/pages/partners/affiliate-ib/_hero.js
@@ -2,7 +2,7 @@ import React from 'react'
import PropTypes from 'prop-types'
import styled from 'styled-components'
import { graphql, useStaticQuery } from 'gatsby'
-import { Container } from 'components/containers'
+import { Container, Show } from 'components/containers'
import { BackgroundImage } from 'components/elements'
const StyeldContainer = styled(Container)`
@@ -14,23 +14,44 @@ const query = graphql`
image: file(relativePath: { eq: "partners-banner.png" }) {
...backGroundBlur
}
+
+ image_mobile: file(relativePath: { eq: "partners-banner-mobile.png" }) {
+ ...backGroundBlur
+ }
}
`
const Hero = ({ children }) => {
const hero_img = useStaticQuery(query)
return (
-
-
- {children}
-
-
+ <>
+
+
+
+ {children}
+
+
+
+
+
+
+ {children}
+
+
+
+
)
}
diff --git a/src/pages/partners/affiliate-ib/_more-reason.js b/src/pages/partners/affiliate-ib/_more-reason.js
index c33a130fe7b..313193c5339 100644
--- a/src/pages/partners/affiliate-ib/_more-reason.js
+++ b/src/pages/partners/affiliate-ib/_more-reason.js
@@ -8,6 +8,12 @@ import GlobalAffiliate from 'images/svg/global-affiliate-support.svg'
import ProvenReferral from 'images/svg/proven-referral-tools.svg'
import HighValue from 'images/svg/high-value-partnership.svg'
+const ReasonHeader = styled(Header)`
+ @media ${device.tabletL} {
+ font-size: 24px;
+ }
+`
+
const Reason = styled.div`
width: 38.4rem;
margin-top: 4rem;
@@ -24,6 +30,19 @@ const Reason = styled.div`
h4 {
margin-top: 1.6rem;
}
+
+ @media ${device.tabletL} {
+ text-align: center;
+
+ h4 {
+ text-align: center;
+ font-size: 16px;
+ }
+ p {
+ text-align: center;
+ font-size: 14px;
+ }
+ }
`
const StyledFlex = styled(Flex)`
margin-top: -2rem;
@@ -34,19 +53,27 @@ const StyledFlex = styled(Flex)`
`
const StyledSection = styled(SectionContainer)`
box-shadow: 0 1px 0 0 rgba(0, 0, 0, 0.1);
+
+ @media ${device.tabletL} {
+ padding: 40px 0;
+ }
+`
+
+const StyledHeader = styled(Header)`
+ margin-top: 0 !important;
`
const MoreReason = () => {
return (
-
+
{localize('More reasons to join')}
-
+
-
+
{localize('High-value partnership')}
@@ -56,8 +83,8 @@ const MoreReason = () => {
- 
-
+
+
{localize('Proven creative materials')}
@@ -68,9 +95,9 @@ const MoreReason = () => {
-
+
{localize('Global affiliate support')}
-
+
{localize(
'Got questions? Need help? Call or email a dedicated team of affiliate managers for all the answers.',
diff --git a/src/pages/partners/affiliate-ib/_partner-cta.js b/src/pages/partners/affiliate-ib/_partner-cta.js
index 1336314b6c4..585282d5e39 100644
--- a/src/pages/partners/affiliate-ib/_partner-cta.js
+++ b/src/pages/partners/affiliate-ib/_partner-cta.js
@@ -29,6 +29,21 @@ const StyledSection = styled(SectionContainer)`
const LightButton = styled(LinkButton)`
color: var(--color-white);
margin-top: 1.6rem;
+ border-radius: 4px;
+ border: solid 1px #6e6e6e;
+ padding-top: 7px;
+ height: 32px;
+ @media ${device.tabletL} {
+ padding-top: 9px;
+ }
+`
+const RedButton = styled(LinkButton)`
+ border-radius: 4px;
+ padding-top: 0.5rem;
+ height: 32px;
+ @media ${device.tabletL} {
+ padding-top: 1rem;
+ }
`
const CTA = () => {
@@ -44,7 +59,7 @@ const CTA = () => {
@@ -57,7 +72,7 @@ const CTA = () => {
'Enjoy generous commissions and all the other benefits of being a Deriv partner',
)}
- {
secondary
>
{localize('Sign up')}
-
+
diff --git a/src/pages/partners/affiliate-ib/_table.js b/src/pages/partners/affiliate-ib/_table.js
index aacf58b01fb..82aeac723ac 100644
--- a/src/pages/partners/affiliate-ib/_table.js
+++ b/src/pages/partners/affiliate-ib/_table.js
@@ -1,5 +1,5 @@
import styled from 'styled-components'
-
+import device from 'themes/device'
function ColGen(num, is_balance) {
let grid_col_template = ''
for (let i = 0; i < num; i++) {
@@ -40,5 +40,28 @@ const TR = styled.div`
padding: 0.8rem 1rem 0.8rem 0;
background-color: ${(props) => (props.isTitle === 'true' ? 'var(--color-grey-8)' : 'unset')};
border-bottom: 2px solid var(--color-grey-8);
+ @media ${device.tabletL} {
+ p {
+ white-space: ${(props) => (props.isTitle === 'true' ? '' : 'nowrap')};
+ font-size: 14px;
+ }
+ }
+ @media ${device.mobileL} {
+ p {
+ font-size: 12px;
+ }
+ }
+`
+
+const TRAP = styled.div`
+ padding: 0.8rem 1rem 0.8rem 0;
+ background-color: ${(props) => (props.isTitle === 'true' ? 'var(--color-grey-8)' : 'unset')};
+ border-bottom: 2px solid var(--color-grey-8);
+ height: 30px;
+ @media ${device.mobileL} {
+ height: ${(props) => (props.isTitle === 'true' ? '60px' : '40px')};
+ display: flex;
+ align-items: center;
+ }
`
-export { TR, TC, Table }
+export { TR, TRAP, TC, Table }
diff --git a/src/pages/partners/affiliate-ib/_who-can-apply.js b/src/pages/partners/affiliate-ib/_who-can-apply.js
index 56ddd092efb..67fee922310 100644
--- a/src/pages/partners/affiliate-ib/_who-can-apply.js
+++ b/src/pages/partners/affiliate-ib/_who-can-apply.js
@@ -1,6 +1,6 @@
import React from 'react'
import styled, { css } from 'styled-components'
-import { SectionContainer, Container } from 'components/containers'
+import { SectionContainer, Container, Show } from 'components/containers'
import { Header, Text } from 'components/elements/typography'
import { localize } from 'components/localization'
import { LinkButton } from 'components/form'
@@ -28,6 +28,27 @@ const StyledSection = styled(Container)`
const SectionWrapper = styled(SectionContainer)`
box-shadow: 0 1px 0 0 rgba(0, 0, 0, 0.1);
`
+
+const StyledSectionWrapper = styled(SectionWrapper)`
+ @media ${device.tabletL} {
+ padding: 40px 0;
+ }
+`
+
+const ImageWrapper = styled.img`
+ margin-right: 1.6rem;
+ width: 48px;
+ height: 48px;
+`
+
+const ApplyImageWrapper = styled(ImageWrapper)`
+ margin-top: 0;
+`
+
+const TradingExpertsImageWrapper = styled(ImageWrapper)`
+ margin-top: 10px;
+`
+
const CenteredSection = styled(SectionContainer)`
text-align: center;
`
@@ -43,20 +64,29 @@ const Wrapper = styled.div`
margin-top: 4rem;
`
-const ImageWrapper = styled.img`
- margin-right: 1.6rem;
- width: 48px;
- height: 48px;
-`
-
const Content = styled.div`
display: flex;
flex-direction: column;
max-width: ${(props) => props.max_width};
+
+ @media (max-width: 749px) {
+ margin-top: ${(props) => props.mt_mobile};
+ }
`
+
+const GetStartedContent = styled(Content)`
+ @media (max-width: 749px) {
+ max-width: 360px;
+ position: relative;
+ top: -3px;
+ }
+`
+
const Separator = styled.div`
+ position: relative;
+ top: 40px;
width: 1px;
- height: 50rem;
+ height: 452px;
background-color: var(--color-grey-8);
margin: 0 9.2rem;
@@ -67,6 +97,11 @@ const Separator = styled.div`
const StyledHeader = styled(Header)`
width: 100%;
max-width: 42.8rem;
+
+ @media ${device.tabletL} {
+ font-size: 24px;
+ text-align: center;
+ }
`
const SecondaryHeader = styled(StyledHeader)`
@@ -76,6 +111,8 @@ const SecondaryHeader = styled(StyledHeader)`
}
@media ${device.mobileM} {
margin-left: 0;
+ margin-top: 32px;
+ margin-bottom: 16px;
}
`
const Flex = styled.div`
@@ -105,10 +142,6 @@ const HowToApply = styled(Col)`
}
@media ${device.tablet} {
- margin-left: 7rem;
- }
-
- @media ${device.mobileM} {
margin-left: 1rem;
}
`
@@ -118,6 +151,12 @@ const WhoCanApplyWrapper = styled(Col)`
display: flex;
flex-direction: column;
`
+const ContentWrapper = styled(Wrapper)`
+ @media (max-width: 749px) {
+ flex-flow: wrap;
+ margin-top: 16px;
+ }
+`
const HowToApplyContent = styled.div`
display: flex;
@@ -128,19 +167,30 @@ const HowToApplyContent = styled.div`
}
`
+const StyledLinkButton = styled(LinkButton)`
+ @media ${device.tablet} {
+ display: block;
+ margin: auto;
+ font-size: 14px;
+ width: 216px;
+ height: 40px;
+ }
+`
+
const WhoCanApply = () => {
return (
-
+
-
- {localize('Who can apply')}
-
-
-
-
+ {localize('Who can apply')}
+
+
+
{localize('Trading experts')}
@@ -149,11 +199,11 @@ const WhoCanApply = () => {
)}
-
-
+
+
-
+
+
{localize('Software developers')}
@@ -162,11 +212,11 @@ const WhoCanApply = () => {
)}
-
-
+
+
-
+
+
{localize('Community managers')}
@@ -175,21 +225,23 @@ const WhoCanApply = () => {
)}
-
+
-
+
{localize('Get started easily')}
-
-
+
+
+
+
{localize('Sign up')}
@@ -197,14 +249,16 @@ const WhoCanApply = () => {
'Fill out the online application form. We’ll review your application and get in touch once it’s approved.',
)}
-
+
-
-
+
+
+
+
{localize('Advertise')}
@@ -212,22 +266,24 @@ const WhoCanApply = () => {
'Use your unique affiliate link and our tried-and-tested referral tools to bring new clients to Deriv.',
)}
-
+
-
-
+
+
+
+
{localize('Earn')}
{localize(
- 'Start earning based on your chosen commission plan –– 45% of the total net revenue generated by your referred clients.',
+ 'Start earning based on your chosen commission plan –– up to 45% of the total net revenue generated by your referred clients.',
)}
-
+
@@ -235,7 +291,7 @@ const WhoCanApply = () => {
- {
is_affiliate_link
>
{localize('Sign up')}
-
+
-
+
)
}
diff --git a/src/pages/partners/affiliate-ib/_why-us.js b/src/pages/partners/affiliate-ib/_why-us.js
index 5b5c187662d..7ba08327caa 100644
--- a/src/pages/partners/affiliate-ib/_why-us.js
+++ b/src/pages/partners/affiliate-ib/_why-us.js
@@ -31,7 +31,26 @@ const StyledContainer = styled(SectionContainer)`
section:last-child {
padding-bottom: 0;
}
+
+ @media ${device.tabletL} {
+ padding: 40px 0;
+ }
+`
+
+const StyledHeader = styled(Header)`
+ margin-bottom: 0 !important;
+ @media ${device.tabletL} {
+ text-align: left !important;
+ font-size: 20px;
+ }
`
+
+const WhyUsHeader = styled(Header)`
+ @media ${device.tabletL} {
+ font-size: 24px;
+ }
+`
+
const Row = styled(SectionContainer)`
display: flex;
flex-direction: ${(props) => props.flex_direction};
@@ -44,11 +63,15 @@ const Row = styled(SectionContainer)`
}
@media ${device.tabletL} {
- flex-direction: column;
+ flex-direction: column-reverse;
div {
max-width: unset;
}
+ ${Text} {
+ text-align: justify;
+ font-size: 16px;
+ }
}
`
const Content = styled.div`
@@ -67,17 +90,15 @@ const WhyUs = ({ items }) => {
return (
-
+
{localize('Why partner with us')}
-
+
{items.map((item, index) => {
let is_even = index % 2
return (
-
- {item.title}
-
+ {item.title}
{item.subtitle}
import('components/custom/_dnumbers.js'))
const WhyUs = Loadable(() => import('./_why-us.js'))
const WhoCanAplly = Loadable(() => import('./_who-can-apply.js'))
@@ -20,8 +22,47 @@ const CTA = Loadable(() => import('./_partner-cta'))
const StyledHeader = styled(Header)`
width: 100%;
max-width: 70rem;
- margin-bottom: 4rem;
+ @media ${device.tabletS} {
+ font-size: 40px;
+ text-align: left;
+ }
+
+ &:nth-child(2) {
+ margin-bottom: 4rem;
+ }
+`
+
+const StyledLinkButton = styled(LinkButton)`
+ border-radius: 4px;
+ @media ${device.tabletS} {
+ font-size: 14px;
+ width: 230px;
+ height: 40px;
+ padding: 1.2rem 1rem;
+ white-space: nowrap;
+ }
+`
+
+const StyledSectionContainer = styled(SectionContainer)`
+ @media ${device.tabletL} {
+ padding-top: 40px;
+ padding-bottom: 40px;
+ padding-right: 16px;
+ padding-left: 16px;
+ }
+`
+
+const SubtitleHeader = styled(Header)`
+ width: 1170px;
+ @media ${device.laptopL} {
+ width: 100%;
+ }
+ @media ${device.tabletL} {
+ font-size: 16px;
+ text-align: justify;
+ }
`
+
const items = [
{ title: '47K+', subtitle:
-
- {localize('Partner with a trusted online trading provider')}
+
+ {localize('Partner with a trusted')}
+
+
+ {localize('online trading provider')}
-
- {localize('Sign up as our affiliate & IB')}
-
+ {localize('Sign up as our affiliate and IB')}
+
-
+
-
+
{localize(
- 'Earn 45% lifetime commission with an online trading provider that enables anyone to trade on popular financial markets with the utmost convenience. Deriv Group Ltd - the owner of Binary.com and Deriv.com - has a proven track record of running successful referral programmes with prompt payouts.',
+ 'Earn up to 45% lifetime commission with an online trading provider that enables anyone to trade on popular financial markets with the utmost convenience. Deriv Group Ltd – the owner of Binary.com and Deriv.com – has a proven track record of running successful referral programmes with prompt payouts.',
)}
-
+
-
+
-
+
{data.name}
-
- {data.description}
+
+ {data.description}
{data.assets.map((asset, idx) => (
-
+
) : (
<>
-