chore: added forex page

src/features/pages/markets/components.tsx

@@ -0,0 +1,34 @@
+import React, { PropsWithChildren, ReactNode } from 'react'
+import { qtMerge } from '@deriv/quill-design'
+import { CustomLink, CustomLinkProps } from '@deriv-com/components'
+
+export const FaqBox = ({ children }: PropsWithChildren) => (
+    <div className="mb-1200 flex flex-col gap-800">{children}</div>
+)
+
+export const FaqLink = ({ children, href }: CustomLinkProps) => (
+    <CustomLink className="m-200 inline w-fit underline" size="md" href={href}>
+        {children}
+    </CustomLink>
+)
+export const FaqList = ({
+    data,
+    variant = 'bullet',
+}: {
+    data: ReactNode[]
+    variant?: 'decimal' | 'bullet' | 'none'
+}) => (
+    <ul
+        className={qtMerge(
+            'list-outside',
+            variant === 'bullet' && 'list-disc',
+            variant === 'decimal' && 'list-decimal',
+            variant === 'none' && 'list-none',
+            'flex flex-col gap-general-sm pl-general-md text-opacity-black-800',
+        )}
+    >
+        {data.map((d, k) => (
+            <li key={`${d}-${k}`}>{d}</li>
+        ))}
+    </ul>
+)

src/features/pages/markets/forex/faq-section/index.tsx

@@ -0,0 +1,34 @@
+import React from 'react'
+import { AccordionBlock } from '@deriv-com/blocks'
+import { Section } from '@deriv/quill-design'
+import { AccordionProps } from '@deriv-com/components'
+import { FAQContent } from './data'
+
+const FAQSection = () => {
+    const { header, data } = FAQContent
+
+    const accordionItems: AccordionProps[] = []
+
+    data.forEach((item) => {
+        const answer = item.answers ? item.answers[0] : () => <></>
+        accordionItems.push({
+            title: item.title,
+            content: answer,
+            divider: 'bottom',
+        })
+    })
+
+    return (
+        <Section className="mt-2400 flex flex-col">
+            <AccordionBlock
+                title={header}
+                content={{
+                    data: [accordionItems],
+                }}
+                className="pb-2400 pt-general-none border-opacity-black-100 border-x-none"
+            />
+        </Section>
+    )
+}
+
+export default FAQSection

src/features/pages/markets/forex/hero-banner/index.tsx

@@ -0,0 +1,33 @@
+import React from 'react'
+import { Hero } from '@deriv-com/blocks'
+import { StaticImage } from 'gatsby-plugin-image'
+import { Button } from '@deriv/quill-design'
+import { localize } from 'components/localization'
+
+const HeroBanner = () => {
+    return (
+        <Hero.ContentLimit
+            title={localize('_t_Forex trading_t_')}
+            description={localize(
+                '_t_Trade the most popular forex (FX) currency pairs, and take advantage of our high leverage, tight spreads, and low capital requirements._t_',
+            )}
+            content={() => (
+                <StaticImage
+                    src="../../../../../images/migration/markets/forex-banner.png"
+                    alt={localize('_t_Forex banner_t_')}
+                    loading="eager"
+                    formats={['webp', 'auto']}
+                />
+            )}
+        >
+            <div className="flex gap-gap-md">
+                <Button size="lg">{localize('_t_Open demo Account_t_')}</Button>
+                <Button size="lg" variant="secondary" colorStyle="black">
+                    {localize('_t_Forex FAQs_t_')}
+                </Button>
+            </div>
+        </Hero.ContentLimit>
+    )
+}
+
+export default HeroBanner

src/features/pages/markets/forex/index.tsx

@@ -0,0 +1,53 @@
+import React from 'react'
+import { BreakpointProvider, FluidContainer, ThemeProvider } from '@deriv/quill-design'
+import { Breadcrumbs, PageLayout } from '@deriv-com/components'
+import MarketTab from '../market-tab'
+import Layout from 'features/components/templates/layout'
+import HeroBanner from './hero-banner'
+import WhyTradeInDeriv from './why-trade-in-deriv'
+import PlatformsToTrade from './platforms-available'
+import TradingInDeriv from './trading-in-deriv'
+import OtherMarkets from './other-markets'
+import FAQSection from './faq-section'
+import MainRowNavigation from 'features/pages/home/navigation'
+
+const ForexMarket = () => {
+    return (
+        <BreakpointProvider>
+            <ThemeProvider theme="light">
+                <Layout>
+                    <MainRowNavigation />
+                    <PageLayout>
+                        <FluidContainer>
+                            <Breadcrumbs
+                                className="py-general-md"
+                                links={[
+                                    {
+                                        content: 'Home',
+                                        href: '/',
+                                    },
+                                    {
+                                        content: 'Markets',
+                                        href: '',
+                                    },
+                                    {
+                                        content: 'Forex',
+                                        href: '',
+                                    },
+                                ]}
+                            />
+                        </FluidContainer>
+                        <MarketTab />
+                        <HeroBanner />
+                        <WhyTradeInDeriv />
+                        <PlatformsToTrade />
+                        <TradingInDeriv />
+                        <OtherMarkets />
+                        <FAQSection />
+                    </PageLayout>
+                </Layout>
+            </ThemeProvider>
+        </BreakpointProvider>
+    )
+}
+export default ForexMarket

src/features/pages/markets/forex/other-markets/data.tsx

@@ -0,0 +1,82 @@
+import React from 'react'
+import { CardContent } from '@deriv-com/components'
+import {
+    IllustrativeCommoditiesIcon,
+    IllustrativeCryptocurrenciesIcon,
+    IllustrativeDerivedIcon,
+    IllustrativeEtfIcon,
+    IllustrativeStocksAndIndicesIcon,
+} from '@deriv/quill-icons'
+import { localize } from 'components/localization'
+
+export const cards: CardContent[] = [
+    {
+        header: localize('_t_Derived indices_t_'),
+        description: localize(
+            '_t_Trade 24/7 on indices which are based on simulated and real-world markets._t_',
+        ),
+        icon: <IllustrativeDerivedIcon fill="black" iconSize="md" />,
+        size: 'md',
+        align: 'start',
+        color: 'light',
+        link: {
+            content: localize('_t_Learn more_t_'),
+            href: '/markets/synthetic/',
+        },
+    },
+    {
+        header: localize('_t_Stocks & indices_t_'),
+        description: localize(
+            '_t_Diversify your portfolio with popular brands and international stock indices._t_',
+        ),
+        icon: <IllustrativeStocksAndIndicesIcon fill="black" iconSize="md" />,
+        size: 'md',
+        align: 'start',
+        color: 'light',
+        link: {
+            content: localize('_t_Learn more_t_'),
+            href: '/markets/stock/',
+        },
+    },
+    {
+        header: localize('_t_Exchange-traded funds (ETFs)_t_'),
+        description: localize(
+            '_t_Speculate on the prices of exchange-traded funds that measure performance by industries._t_',
+        ),
+        icon: <IllustrativeEtfIcon fill="black" iconSize="md" />,
+        size: 'md',
+        align: 'start',
+        color: 'light',
+        link: {
+            content: localize('_t_Learn more_t_'),
+            href: '/markets/exchange-traded-funds/',
+        },
+    },
+    {
+        header: localize('_t_Cryptocurrencies_t_'),
+        description: localize(
+            '_t_Potentially profit from the high volatility and frequent price fluctuations of digital coins._t_',
+        ),
+        icon: <IllustrativeCryptocurrenciesIcon fill="black" iconSize="md" />,
+        size: 'md',
+        align: 'start',
+        color: 'light',
+        link: {
+            content: localize('_t_Learn more_t_'),
+            href: '/markets/cryptocurrencies/',
+        },
+    },
+    {
+        header: localize('_t_Commodities_t_'),
+        description: localize('_t_Trade on the prices of precious metals and energy._t_'),
+        icon: <IllustrativeCommoditiesIcon fill="black" iconSize="md" />,
+        size: 'md',
+        align: 'start',
+        color: 'light',
+        className: 'flex justify-center',
+        link: {
+            content: localize('_t_Learn more_t_'),
+            href: '/markets/commodities/',
+        },
+    },
+]

src/features/pages/markets/forex/other-markets/index.tsx

@@ -0,0 +1,19 @@
+import { Features } from '@deriv-com/blocks'
+import React from 'react'
+import { cards } from './data'
+import { localize } from 'components/localization'
+
+const OtherMarkets = () => {
+    return (
+        <>
+            <Features.Card
+                className="!bg-background-primary-base"
+                title={localize('_t_Other markets to trade_t_')}
+                cards={cards}
+                cols="three"
+            />
+        </>
+    )
+}
+
+export default OtherMarkets

src/features/pages/markets/forex/platforms-available/data.tsx

@@ -0,0 +1,87 @@
+import React from 'react'
+import { CardContent } from '@deriv-com/components'
+import {
+    DerivProductDerivBotBrandDarkLogoHorizontalIcon,
+    DerivProductDerivGoBrandDarkLogoHorizontalIcon,
+    DerivProductDerivTraderBrandDarkLogoHorizontalIcon,
+    DerivProductDerivXBrandDarkLogoIcon,
+    PartnersProductDerivCtraderBrandLightLogoHorizontalIcon,
+    PartnersProductDerivMt5BrandLightLogoHorizontalIcon,
+    // eslint-disable-next-line import/no-unresolved
+} from '@deriv/quill-icons/Logo'
+import { localize } from 'components/localization'
+export const cards: CardContent[] = [
+    {
+        header: localize('_t_Deriv MT5_t_'),
+        description: localize('_t_The most popular and comprehensive CFDs trading platform._t_'),
+        icon: <PartnersProductDerivMt5BrandLightLogoHorizontalIcon width={48} height={48} />,
+        size: 'md',
+        align: 'start',
+        color: 'light',
+        link: {
+            content: localize('_t_Learn more_t_'),
+            href: '/dmt5',
+        },
+    },
+    {
+        header: localize('_t_Deriv cTrader_t_'),
+        description: localize('_t_Fast CFDs trading platform with inbuilt copy trading._t_'),
+        icon: <PartnersProductDerivCtraderBrandLightLogoHorizontalIcon height="48" width="48" />,
+        size: 'md',
+        align: 'start',
+        color: 'light',
+        link: {
+            content: localize('_t_Learn more_t_'),
+            href: '/deriv-ctrader',
+        },
+    },
+    {
+        header: localize('_t_Deriv X_t_'),
+        description: localize('_t_User-friendly and customisable CFDs trading platform._t_'),
+        icon: <DerivProductDerivXBrandDarkLogoIcon height="48" width="48" />,
+        size: 'md',
+        align: 'start',
+        color: 'light',
+        link: {
+            content: localize('_t_Learn more_t_'),
+            href: '/derivx',
+        },
+    },
+    {
+        header: localize('_t_Deriv Trader_t_'),
+        description: localize('_t_Powerful, easy-to-use options trading platform._t_'),
+        icon: <DerivProductDerivTraderBrandDarkLogoHorizontalIcon height="48" width="48" />,
+        size: 'md',
+        align: 'start',
+        color: 'light',
+        link: {
+            content: localize('_t_Learn more_t_'),
+            href: '/dtrader',
+        },
+    },
+    {
+        header: localize('_t_Deriv Bot_t_'),
+        description: localize('_t_Automated bot trading, no coding required._t_'),
+        icon: <DerivProductDerivBotBrandDarkLogoHorizontalIcon height="48" width="48" />,
+        size: 'md',
+        align: 'start',
+        color: 'light',
+        className: 'flex justify-center',
+        link: {
+            content: localize('_t_Learn more_t_'),
+            href: '/dbot',
+        },
+    },
+    {
+        header: localize('_t_Deriv GO_t_'),
+        description: localize('_t_Mobile app optimised for trading multipliers on the go._t_'),
+        icon: <DerivProductDerivGoBrandDarkLogoHorizontalIcon width={48} height={48} />,
+        size: 'md',
+        align: 'start',
+        color: 'light',
+        link: {
+            content: localize('_t_Learn more_t_'),
+            href: '/deriv-go',
+        },
+    },
+]

src/features/pages/markets/forex/platforms-available/index.tsx

@@ -0,0 +1,18 @@
+import React from 'react'
+import { Features } from '@deriv-com/blocks'
+import { cards } from './data'
+import { localize } from 'components/localization'
+
+const PlatformsToTrade = () => {
+    return (
+        <>
+            <Features.Card
+                className="!bg-background-primary-base"
+                title={localize('_t_Platforms to trade forex_t_')}
+                cards={cards}
+                cols="three"
+            />
+        </>
+    )
+}
+export default PlatformsToTrade

src/features/pages/markets/forex/trading-in-deriv/data.tsx

@@ -0,0 +1,30 @@
+import { CardContent } from '@deriv-com/components'
+import { localize } from 'components/localization'
+export const cards: CardContent[] = [
+    {
+        header: localize('_t_CFDs_t_'),
+        description: localize(
+            '_t_Speculate on the price movements of popular forex pairs with high leverage and advanced technical indicators._t_',
+        ),
+        size: 'md',
+        align: 'start',
+        color: 'light',
+        link: {
+            content: localize('_t_Learn more_t_'),
+            href: '/',
+        },
+    },
+    {
+        header: localize('_t_Options_t_'),
+        description: localize(
+            '_t_Predict the market trends of FX currency pairs without the risk of losing your initial stake_t_',
+        ),
+        size: 'md',
+        align: 'start',
+        color: 'light',
+        link: {
+            content: localize('_t_Learn more_t_'),
+            href: '/',
+        },
+    },
+]