diff --git a/src/common/utility.js b/src/common/utility.js index f917dd72239..b33d8d285fc 100644 --- a/src/common/utility.js +++ b/src/common/utility.js @@ -101,6 +101,7 @@ const zoho_url = 'https://deriv.zohorecruit.com/' const brand_name = 'Deriv' const map_api_key = 'AIzaSyAEha6-HeZuI95L9JWmX3m6o-AxQr_oFqU' const gtm_test_domain = 'deriv-com.binary.sx' +const p2p_playstore_url = 'https://play.google.com/store/apps/details?id=com.deriv.dp2p' const mga_link_url = 'https://authorisation.mga.org.mt/verification.aspx?lang=EN&company=a5fd1edc-d072-4c26-b0cd-ab3fa0f0cc40&details=1' @@ -144,4 +145,5 @@ export { toHashFormat, zoho_url, trimSpaces, + p2p_playstore_url, } diff --git a/src/images/common/p2p_banner.png b/src/images/common/p2p/p2p_banner.png similarity index 100% rename from src/images/common/p2p_banner.png rename to src/images/common/p2p/p2p_banner.png diff --git a/src/images/common/p2p_banner_mobile.png b/src/images/common/p2p/p2p_banner_mobile.png similarity index 100% rename from src/images/common/p2p_banner_mobile.png rename to src/images/common/p2p/p2p_banner_mobile.png diff --git a/src/images/common/p2p_buy_sell.png b/src/images/common/p2p/p2p_buy_sell.png similarity index 100% rename from src/images/common/p2p_buy_sell.png rename to src/images/common/p2p/p2p_buy_sell.png diff --git a/src/images/common/p2p_hero_background.png b/src/images/common/p2p/p2p_hero_background.png similarity index 100% rename from src/images/common/p2p_hero_background.png rename to src/images/common/p2p/p2p_hero_background.png diff --git a/src/images/common/p2p_hero_background_mobile.png b/src/images/common/p2p/p2p_hero_background_mobile.png similarity index 100% rename from src/images/common/p2p_hero_background_mobile.png rename to src/images/common/p2p/p2p_hero_background_mobile.png diff --git a/src/images/common/p2p_hero_img.png b/src/images/common/p2p/p2p_hero_img.png similarity index 100% rename from src/images/common/p2p_hero_img.png rename to src/images/common/p2p/p2p_hero_img.png diff --git a/src/images/common/p2p_local_currency.png b/src/images/common/p2p/p2p_local_currency.png similarity index 100% rename from src/images/common/p2p_local_currency.png rename to src/images/common/p2p/p2p_local_currency.png diff --git a/src/images/common/p2p/p2p_playstore.png b/src/images/common/p2p/p2p_playstore.png new file mode 100644 index 00000000000..80917c1e571 Binary files /dev/null and b/src/images/common/p2p/p2p_playstore.png differ diff --git a/src/images/common/p2p_web_and_mobile.png b/src/images/common/p2p/p2p_web_and_mobile.png similarity index 100% rename from src/images/common/p2p_web_and_mobile.png rename to src/images/common/p2p/p2p_web_and_mobile.png diff --git a/src/pages/p2p/components/_availability.js b/src/pages/p2p/components/_availability.js index 3e12de2e5c2..0b6078f0ada 100644 --- a/src/pages/p2p/components/_availability.js +++ b/src/pages/p2p/components/_availability.js @@ -1,12 +1,14 @@ import React from 'react' +import { graphql, useStaticQuery } from 'gatsby' import styled from 'styled-components' import Desktop from 'images/svg/p2p-desktop.svg' import Mobile from 'images/svg/p2p-mobile.svg' import { localize, Localize } from 'components/localization' -import { Header, LocalizedLinkText, SpanLinkText, Text } from 'components/elements' -import { Flex, SectionContainer } from 'components/containers' +import { Header, LocalizedLinkText, SpanLinkText, Text, QueryImage } from 'components/elements' +import { Flex, SectionContainer, Show } from 'components/containers' import Login from 'common/login' import device from 'themes/device' +import { p2p_playstore_url } from 'common/utility' const Row = styled.div` display: flex; @@ -79,13 +81,16 @@ const StyledText = styled(Text)` ` const Line = styled.div` width: 1px; - height: 38rem; + height: 44rem; border: solid 1px var(--color-grey-21); margin: 0 4.5rem; @media ${device.laptop} { height: 47rem; } + @media ${device.tabletL} { + height: 52rem; + } @media ${device.tablet} { height: 1px; width: 50rem; @@ -102,7 +107,24 @@ const Line = styled.div` } ` +const Left = styled.div` + width: 78%; +` + +const Right = styled.div` + width: 22%; +` + +const query = graphql` + query { + qr_code: file(relativePath: { eq: "p2p/p2p_playstore.png" }) { + ...fadeIn + } + } +` + const Availability = () => { + const data = useStaticQuery(query) const handleLogin = () => { Login.redirectToLogin() } @@ -116,7 +138,8 @@ const Availability = () => { as="h2" mb="4rem" > - {localize('Available on desktop and mobile')} + {localize('How to get DP2P')} + {localize('Available on desktop and mobile')} { - + + + + + +
@@ -169,24 +197,58 @@ const Availability = () => { - + + + + + +
- , - ]} - /> + + + + , + ]} + /> + + + + + + + + , + ]} + /> + diff --git a/src/pages/p2p/components/_dp2p.js b/src/pages/p2p/components/_dp2p.js index a037cb03b29..de0e6193fac 100644 --- a/src/pages/p2p/components/_dp2p.js +++ b/src/pages/p2p/components/_dp2p.js @@ -89,13 +89,13 @@ const Row = styled.div` ` const query = graphql` query { - buy_sell: file(relativePath: { eq: "p2p_buy_sell.png" }) { + buy_sell: file(relativePath: { eq: "p2p/p2p_buy_sell.png" }) { ...fadeIn } - local_currency: file(relativePath: { eq: "p2p_local_currency.png" }) { + local_currency: file(relativePath: { eq: "p2p/p2p_local_currency.png" }) { ...fadeIn } - web_and_mobile: file(relativePath: { eq: "p2p_web_and_mobile.png" }) { + web_and_mobile: file(relativePath: { eq: "p2p/p2p_web_and_mobile.png" }) { ...fadeIn } } diff --git a/src/pages/p2p/components/_hero.js b/src/pages/p2p/components/_hero.js index 525355f9bb6..8801346b2f3 100644 --- a/src/pages/p2p/components/_hero.js +++ b/src/pages/p2p/components/_hero.js @@ -192,13 +192,15 @@ const HeroComponent = ({ title, content, background_data, img_data }) => { const query = graphql` query { - p2p_hero_background: file(relativePath: { eq: "p2p_hero_background.png" }) { + p2p_hero_background: file(relativePath: { eq: "p2p/p2p_hero_background.png" }) { ...fadeIn } - p2p_hero_background_mobile: file(relativePath: { eq: "p2p_hero_background_mobile.png" }) { + p2p_hero_background_mobile: file( + relativePath: { eq: "p2p/p2p_hero_background_mobile.png" } + ) { ...fadeIn } - p2p_hero_img: file(relativePath: { eq: "p2p_hero_img.png" }) { + p2p_hero_img: file(relativePath: { eq: "p2p/p2p_hero_img.png" }) { ...fadeIn } } diff --git a/src/pages/p2p/components/_p2pbanner.js b/src/pages/p2p/components/_p2pbanner.js index d787a1891d6..c28fe0c4854 100644 --- a/src/pages/p2p/components/_p2pbanner.js +++ b/src/pages/p2p/components/_p2pbanner.js @@ -94,10 +94,10 @@ const StyledHeader = styled(Header)` const query = graphql` query { - p2p_banner: file(relativePath: { eq: "p2p_banner.png" }) { + p2p_banner: file(relativePath: { eq: "p2p/p2p_banner.png" }) { ...fadeIn } - p2p_banner_mobile: file(relativePath: { eq: "p2p_banner_mobile.png" }) { + p2p_banner_mobile: file(relativePath: { eq: "p2p/p2p_banner_mobile.png" }) { ...fadeIn } }