binary-com · habib-deriv · Jan 23, 2023 · Jan 23, 2023 · Jan 23, 2023 · Jan 23, 2023
diff --git a/crowdin/messages.json b/crowdin/messages.json
@@ -1112,7 +1112,6 @@
   "1542393407": "CFD trading features on Deriv",
   "1546535785": "Are there any conditions that I should meet before I can withdraw my commission?",
   "1546917177": "5 - 750",
-  "1549497379": "High leverage, tight forex spreads",
   "1550284135": "Jordan",
   "1550574351": "Let’s say you want to keep two lots of EUR/USD with a point value of 0.00001 and swap rate of -0.12 open for one night.",
   "1551153165": "You can trade the following options on Deriv:",
@@ -2360,11 +2359,11 @@
   "-327214682": "25+ crypto pairs",
   "-819550264": "Zero commission",
   "-601411843": "Derived FX gives you the opportunity to trade on simulated assets based on major forex pairs at the volatility of your choice. Our advanced algorithms track real-world currency prices and dampen the fluctuations caused by market sentiment and unexpected news events.",
-  "-1389465070": "Why trade Derived FX on Deriv",
   "-895517965": "Derived FX trades available on Deriv",
+  "-1389465070": "Why trade Derived FX on Deriv",
   "-393616618": "Start trading Derived FX on Deriv in 3 simple steps",
-  "-1379291897": "Why trade forex on Deriv",
   "-1573631881": "forex",
+  "-1379291897": "Why trade forex on Deriv",
   "-673420280": "Start trading forex on Deriv in 3 simple steps",
   "-1718265662": "Open a real account, make a deposit, and start trading stocks, indices and other markets.",
   "-1823217929": "Why trade stocks & indices on Deriv",

diff --git a/src/components/elements/common-header-section.tsx b/src/components/elements/common-header-section.tsx
@@ -0,0 +1,82 @@
+import React from 'react'
+import { TString } from 'types/generics'
+import { Localize } from 'components/localization'
+import { Flex } from 'components/containers'
+
+type CommonHeaderSectionProps = {
+    title?: TString
+    subtitle?: TString
+    padding?: string
+    bgcolor?: string
+    title_font_size?: string
+    subtitle_font_size?: string
+    color?: string
+    text_color?: string
+    font_weight?: string
+    font_style?: string
+    margin?: string
+    title_text_color?: string
+    subtitle_text_color?: string
+    width?: string
+    height?: string
+    align_title?: string
+    align_subtitle?: string
+}
+
+const CommonHeaderSection = ({
+    title,
+    subtitle,
+    padding,
+    margin,
+    bgcolor,
+    color,
+    title_text_color,
+    subtitle_text_color,
+    title_font_size,
+    subtitle_font_size,
+    width,
+    height,
+    align_title,
+    align_subtitle,
+}: CommonHeaderSectionProps) => {
+    return (
+        <div
+            style={{
+                backgroundColor: bgcolor,
+                color: color,
+                padding: padding,
+                width: width,
+                height: height,
+            }}
+        >
+            <Flex direction="column">
+                <h1
+                    style={{
+                        color: title_text_color,
+                        fontSize: title_font_size,
+                        fontFamily: 'Ubuntu',
+                        fontWeight: 'bold',
+                        margin: margin,
+                        textAlign: align_title,
+                    }}
+                >
+                    <Localize translate_text={title} />
+                </h1>
+                <p
+                    style={{
+                        color: subtitle_text_color,
+                        fontSize: subtitle_font_size,
+                        fontFamily: 'IBM Plex Sans',
+                        fontWeight: 'normal',
+                        margin: margin,
+                        textAlign: align_subtitle,
+                    }}
+                >
+                    <Localize translate_text={subtitle} />
+                </p>
+            </Flex>
+        </div>
+    )
+}
+
+export default CommonHeaderSection
diff --git a/...arkets/components/sections/_why-trade.tsx → ...nents/elements/full-width-multicolumn.tsx b/...arkets/components/sections/_why-trade.tsx → ...nents/elements/full-width-multicolumn.tsx
@@ -4,10 +4,9 @@ import { SectionContainer, Flex, Box } from 'components/containers'
 import { Header, Text } from 'components/elements'
 import device from 'themes/device'
 
-type WhyTradeProps = {
+type FullWidthMultiColumnProps = {
     children?: ReactElement[]
     header?: ReactElement
-    description?: ReactElement
 }
 
 const Item = styled(Flex)`
@@ -33,28 +32,28 @@ const ItemContainer = styled(Box)`
     display: flex;
     margin: 40px 0 32px;
     flex-direction: row;
-    justify-content: space-between;
     max-width: 140.4rem;
 
     @media ${device.tabletL} {
-        flex-wrap: wrap;
-        margin: 20px 0 32px 0;
-        gap: 22px;
-        max-width: 40.6rem;
-    }
-    @media (max-width: 336px) {
+        flex-direction: column;
         justify-content: center;
+        align-items: center;
+        gap: 40px;
     }
 `
 const StyledHeader = styled(Header)`
-    font-size: 48px;
+    font-weight: 700;
+    font-size: 32px;
+    line-height: 40px;
+    color: white;
 
     @media ${device.tablet} {
         text-align: center;
         max-width: 80vw;
-        font-size: 28px;
-        line-height: 1.5;
         margin-bottom: 8px;
+        font-weight: 700;
+        font-size: 24px;
+        line-height: 30px;
     }
 `
 const StyledText = styled(Text)`
@@ -71,28 +70,30 @@ const StyledText = styled(Text)`
         font-size: 14px;
     }
 `
-const StyledSection = styled(SectionContainer)`
-    padding: 6rem 0;
-
-    @media ${device.tabletL} {
-        padding: 0 16px;
-    }
-`
 const StyledTextContent = styled(Text)`
     text-align: center;
     margin-top: 1.6rem;
+    color: white;
+    font-weight: 400;
     font-size: 16px;
+    line-height: 24px;
 
     @media ${device.tabletL} {
         font-size: 14px;
     }
 `
 
-export const WhyTrade = ({ children, header, description }: WhyTradeProps) => {
+const StyledSectionContainer = styled(SectionContainer)`
+    padding: 55px 0;
+    margin: auto;
+    background: #414652;
+    color: white;
+`
+
+export const FullWidthMultiColumn = ({ children, header }: FullWidthMultiColumnProps) => {
     return (
-        <StyledSection>
+        <StyledSectionContainer>
             <Flex direction="column" max_width="99.6rem" m="0 auto" jc="space-between" ai="center">
-                <StyledText>{description}</StyledText>
                 <div>
                     <StyledHeader as="h2" type="section-title" align="center" mb="1.2rem" lh="1.25">
                         {header}
@@ -112,6 +113,6 @@ export const WhyTrade = ({ children, header, description }: WhyTradeProps) => {
                     })}
                 </ItemContainer>
             </Flex>
-        </StyledSection>
+        </StyledSectionContainer>
     )
 }
diff --git a/src/pages/markets/components/markets/_basket-indices.tsx b/src/pages/markets/components/markets/_basket-indices.tsx
@@ -1,7 +1,6 @@
 import React from 'react'
 import Loadable from '@loadable/component'
 import PageNotFound from '../../../404'
-import { WhyTrade } from '../sections/_why-trade'
 import AvailableTrades from '../helper/_available-trades'
 import { basket_indices_content, basket_indices_content_eu } from '../../static/content/_basket'
 import type { BasketIndicesContent } from '../../static/content/_basket'
@@ -13,8 +12,10 @@ import { basket_options } from '../../static/content/_digital-options'
 import CFDs from '../sub-markets/_cfds'
 import Multipliers from '../sub-markets/_multipliers'
 import DigitalOptions from '../sub-markets/_digital-options'
+import { TradeDetails } from '../sections/_trade-details'
 import { Localize, localize } from 'components/localization'
 import useRegion from 'components/hooks/use-region'
+import { FullWidthMultiColumn } from 'components/elements/full-width-multicolumn'
 
 //Lazy-load
 const SimpleSteps = Loadable(() => import('components/custom/_simple-steps'))
@@ -29,22 +30,11 @@ const BasketIndices = ({ simple_step_content }: BasketIndicesProps) => {
         <>
             {is_row && (
                 <>
-                    <WhyTrade
+                    <TradeDetails
                         description={
                             <Localize translate_text="Trade your favourite currency against a basket of major currencies and benefit from reduced risk and volatility." />
                         }
-                        header={<Localize translate_text="Why trade basket indices on Deriv" />}
-                    >
-                        {(!is_eu ? basket_indices_content : basket_indices_content_eu).map(
-                            (content: BasketIndicesContent, index) => (
-                                <StyledBox
-                                    key={index}
-                                    text={content.text}
-                                    icon={<img src={content.src} alt={content.alt} />}
-                                />
-                            ),
-                        )}
-                    </WhyTrade>
+                    />
                     <AvailableTrades
                         CFDs={
                             <CFDs market_content={basket_cfds} market_tab_name={'basket-indices'} />
@@ -61,6 +51,19 @@ const BasketIndices = ({ simple_step_content }: BasketIndicesProps) => {
                             <Localize translate_text="Basket indices trades  available on Deriv" />
                         }
                     />
+                    <FullWidthMultiColumn
+                        header={<Localize translate_text="Why trade basket indices on Deriv" />}
+                    >
+                        {(!is_eu ? basket_indices_content : basket_indices_content_eu).map(
+                            (content: BasketIndicesContent, index) => (
+                                <StyledBox
+                                    key={index}
+                                    text={content.text}
+                                    icon={<img src={content.src} alt={content.alt} />}
+                                />
+                            ),
+                        )}
+                    </FullWidthMultiColumn>
                     <SimpleSteps
                         header={
                             <Localize translate_text="Start trading basket indices on Deriv in 3 simple steps" />

diff --git a/src/pages/markets/components/markets/_commodities.tsx b/src/pages/markets/components/markets/_commodities.tsx
@@ -1,7 +1,7 @@
 import React from 'react'
 import Loadable from '@loadable/component'
 import AvailableTrades from '../helper/_available-trades'
-import { WhyTrade } from '../sections/_why-trade'
+import { WhyTrade } from '../sections/_trade-details'
 import commodities from '../../static/content/_commodities'
 import { commodities_cfds } from '../../static/content/_cfds'
 import { commodities_options } from '../../static/content/_digital-options'
@@ -11,6 +11,7 @@ import { StyledBox } from '../../static/style/_markets-style'
 import { SimpleStepContentElement } from '../../static/content/_simple_step_content'
 import { Localize, localize } from 'components/localization'
 import useRegion from 'components/hooks/use-region'
+import { FullWidthMultiColumn } from 'components/elements/full-width-multicolumn'
 //Lazy-load
 const SimpleSteps = Loadable(() => import('components/custom/_simple-steps'))
 const OtherMarkets = Loadable(() => import('../sections/_other-markets'))
@@ -27,15 +28,6 @@ const Commodities = ({ simple_step_content }: CommoditiesProps) => {
 
     return (
         <>
-            <WhyTrade header={<Localize translate_text="Why trade commodities on Deriv" />}>
-                {commodities.map((content, index) => (
-                    <StyledBox
-                        key={index}
-                        text={content.text}
-                        icon={<img src={content.src} alt={content.alt} />}
-                    />
-                ))}
-            </WhyTrade>
             {is_eu ? (
                 <AvailableTrades
                     CFDs={<CFDs market_content={commodities_cfds} />}
@@ -57,6 +49,17 @@ const Commodities = ({ simple_step_content }: CommoditiesProps) => {
                     }
                 />
             )}
+            <FullWidthMultiColumn
+                header={<Localize translate_text="Why trade commodities on Deriv" />}
+            >
+                {commodities.map((content, index) => (
+                    <StyledBox
+                        key={index}
+                        text={content.text}
+                        icon={<img src={content.src} alt={content.alt} />}
+                    />
+                ))}
+            </FullWidthMultiColumn>
             <SimpleSteps
                 header={
                     <Localize translate_text="Start trading commodities on Deriv in 3 simple steps" />

diff --git a/src/pages/markets/components/markets/_cryptocurrencies.tsx b/src/pages/markets/components/markets/_cryptocurrencies.tsx
@@ -1,6 +1,5 @@
 import React from 'react'
 import Loadable from '@loadable/component'
-import { WhyTrade } from '../sections/_why-trade'
 import AvailableTrades from '../helper/_available-trades'
 import { crypto_cfds } from '../../static/content/_cfds'
 import { crypto_multiplier } from '../../static/content/_multipliers'
@@ -14,6 +13,7 @@ import CryptoPairs from 'images/svg/markets/crypto-pairs-new.svg'
 import ZeroCommission from 'images/svg/markets/zero-commission-new.svg'
 import Leverage from 'images/svg/stock-indices/stocks-high-leverage.svg'
 import useRegion from 'components/hooks/use-region'
+import { FullWidthMultiColumn } from 'components/elements/full-width-multicolumn'
 
 //Lazy-load
 const SimpleSteps = Loadable(() => import('components/custom/_simple-steps'))
@@ -56,22 +56,24 @@ const Cryptocurrencies = ({ simple_step_content }: CryptocurrenciesProps) => {
 
     return (
         <>
-            <WhyTrade header={<Localize translate_text="Why trade cryptocurrencies on Deriv" />}>
-                {crypto_content.map((content, index) => (
-                    <StyledBox
-                        key={index}
-                        text={content.text}
-                        icon={<img src={content.src} alt="" />}
-                    ></StyledBox>
-                ))}
-            </WhyTrade>
             <AvailableTrades
                 CFDs={<CFDs market_content={crypto_cfds} />}
                 Multipliers={<Multipliers market_content={crypto_multiplier} is_crypto={true} />}
                 display_title={
                     <Localize translate_text="Cryptocurrency trades available on Deriv" />
                 }
             />
+            <FullWidthMultiColumn
+                header={<Localize translate_text="Why trade cryptocurrencies on Deriv" />}
+            >
+                {crypto_content.map((content, index) => (
+                    <StyledBox
+                        key={index}
+                        text={content.text}
+                        icon={<img src={content.src} alt="" />}
+                    ></StyledBox>
+                ))}
+            </FullWidthMultiColumn>
             <SimpleSteps
                 header={
                     <Localize translate_text="Start trading cryptocurrencies on Deriv in 3 simple steps" />