chore: added crypto etf and commodities markets

src/features/pages/markets/commodities/commodity-content.tsx

@@ -0,0 +1,23 @@
+import React from 'react'
+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'
+
+const CommoditiesContent = () => {
+    return (
+        <>
+            <HeroBanner />
+            <PlatformsToTrade />
+            <WhyTradeInDeriv />
+
+            <TradingInDeriv />
+            <OtherMarkets />
+            <FAQSection />
+        </>
+    )
+}
+
+export default CommoditiesContent

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

@@ -0,0 +1,35 @@
+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 '../../forex/faq-section/data'
+import { localize } from 'components/localization'
+
+const FAQSection = () => {
+    const { 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={localize('_t_Commodities FAQs_t_')}
+                content={{
+                    data: [accordionItems],
+                }}
+                className="pb-2400 pt-general-none border-opacity-black-100 border-x-none"
+            />
+        </Section>
+    )
+}
+
+export default FAQSection

src/features/pages/markets/commodities/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_Commodities_t_')}
+            description={localize(
+                '_t_Trade popular assets in the commodities market such as silver, gold, oil, and more without owning the underlying asset. Speculate on the price movements and benefit from our high leverage and competitive spreads._t_',
+            )}
+            content={() => (
+                <StaticImage
+                    src="../../../../../images/migration/markets/commodities.png"
+                    alt={localize('_t_Commodities 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_Commodities FAQs_t_')}
+                </Button>
+            </div>
+        </Hero.ContentLimit>
+    )
+}
+
+export default HeroBanner

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

@@ -0,0 +1,22 @@
+import React from 'react'
+import { BreakpointProvider, ThemeProvider } from '@deriv/quill-design'
+import { PageLayout } from '@deriv-com/components'
+import MarketTab from '../market-tab'
+import Layout from 'features/components/templates/layout'
+import MainRowNavigation from 'features/pages/home/navigation'
+
+const CommoditiesMarket = () => {
+    return (
+        <BreakpointProvider>
+            <ThemeProvider theme="light">
+                <Layout>
+                    <MainRowNavigation />
+                    <PageLayout>
+                        <MarketTab />
+                    </PageLayout>
+                </Layout>
+            </ThemeProvider>
+        </BreakpointProvider>
+    )
+}
+export default CommoditiesMarket

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

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

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

@@ -0,0 +1,26 @@
+import React from 'react'
+import { Features } from '@deriv-com/blocks'
+import { cards } from '../../forex/platforms-available/data'
+import { localize } from 'components/localization'
+
+const PlatformsToTrade = () => {
+    const filteredCards = cards.filter((card) => {
+        const headerText = card.header.toLowerCase()
+        return (
+            headerText.includes('deriv mt5') ||
+            headerText.includes('deriv x') ||
+            headerText.includes('deriv ctrader')
+        )
+    })
+    return (
+        <>
+            <Features.Card
+                className="!bg-background-primary-base"
+                title={localize('_t_Platforms to trade Commodities_t_')}
+                cards={filteredCards}
+                cols="three"
+            />
+        </>
+    )
+}
+export default PlatformsToTrade

src/features/pages/markets/commodities/trading-in-deriv/index.tsx

@@ -0,0 +1,18 @@
+import React from 'react'
+import { Features } from '@deriv-com/blocks'
+import { cards } from '../../forex/trading-in-deriv/data'
+import { localize } from 'components/localization'
+
+const TradingInDeriv = () => {
+    return (
+        <>
+            <Features.Card
+                className="!bg-background-primary-base"
+                title={localize('_t_Trading Commodities on Deriv_t_')}
+                cards={cards}
+                cols="three"
+            />
+        </>
+    )
+}
+export default TradingInDeriv

src/features/pages/markets/commodities/why-trade-in-deriv/index.tsx

@@ -0,0 +1,22 @@
+import React from 'react'
+import { Features } from '@deriv-com/blocks'
+import { cards } from '../../forex/why-trade-in-deriv/data'
+import { localize } from 'components/localization'
+
+const WhyTradeInDeriv = () => {
+    return (
+        <>
+            <Features.ContentSlider
+                title={localize('_t_Why trade Commodities on Deriv_t_')}
+                className="!bg-background-primary-container)"
+                cardSliderProps={{
+                    cards: cards,
+                    variant: 'ContentBottom',
+                    slideClasses: 'max-w-[240px]',
+                    className: 'w-full',
+                }}
+            />
+        </>
+    )
+}
+export default WhyTradeInDeriv

src/features/pages/markets/cryptocurrency/crypto-content.tsx

@@ -0,0 +1,23 @@
+import React from 'react'
+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'
+
+const CryptoContent = () => {
+    return (
+        <>
+            <HeroBanner />
+            <PlatformsToTrade />
+            <WhyTradeInDeriv />
+
+            <TradingInDeriv />
+            <OtherMarkets />
+            <FAQSection />
+        </>
+    )
+}
+
+export default CryptoContent

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

@@ -0,0 +1,35 @@
+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 '../../forex/faq-section/data'
+import { localize } from 'components/localization'
+
+const FAQSection = () => {
+    const { 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={localize('_t_Cryptocurrencies FAQs_t_')}
+                content={{
+                    data: [accordionItems],
+                }}
+                className="pb-2400 pt-general-none border-opacity-black-100 border-x-none"
+            />
+        </Section>
+    )
+}
+
+export default FAQSection

src/features/pages/markets/cryptocurrency/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_Cryptocurrencies_t_')}
+            description={localize(
+                "_t_Take advantage of a highly liquid market with round-the-clock trading. Profit from correctly predicting the movement of the worl's most popular cryptocurrencies._t_",
+            )}
+            content={() => (
+                <StaticImage
+                    src="../../../../../images/migration/markets/cryptocurrencies.png"
+                    alt={localize('_t_ETF 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_Cryptocurrencies FAQs_t_')}
+                </Button>
+            </div>
+        </Hero.ContentLimit>
+    )
+}
+
+export default HeroBanner

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

@@ -0,0 +1,22 @@
+import React from 'react'
+import { BreakpointProvider, ThemeProvider } from '@deriv/quill-design'
+import { PageLayout } from '@deriv-com/components'
+import MarketTab from '../market-tab'
+import Layout from 'features/components/templates/layout'
+import MainRowNavigation from 'features/pages/home/navigation'
+
+const CryptoMarket = () => {
+    return (
+        <BreakpointProvider>
+            <ThemeProvider theme="light">
+                <Layout>
+                    <MainRowNavigation />
+                    <PageLayout>
+                        <MarketTab />
+                    </PageLayout>
+                </Layout>
+            </ThemeProvider>
+        </BreakpointProvider>
+    )
+}
+export default CryptoMarket

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

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

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

@@ -0,0 +1,26 @@
+import React from 'react'
+import { Features } from '@deriv-com/blocks'
+import { cards } from '../../forex/platforms-available/data'
+import { localize } from 'components/localization'
+
+const PlatformsToTrade = () => {
+    const filteredCards = cards.filter((card) => {
+        const headerText = card.header.toLowerCase()
+        return (
+            headerText.includes('deriv mt5') ||
+            headerText.includes('deriv x') ||
+            headerText.includes('deriv ctrader')
+        )
+    })
+    return (
+        <>
+            <Features.Card
+                className="!bg-background-primary-base"
+                title={localize('_t_Platforms to trade Cryptocurrencies_t_')}
+                cards={filteredCards}
+                cols="three"
+            />
+        </>
+    )
+}
+export default PlatformsToTrade

src/features/pages/markets/cryptocurrency/trading-in-deriv/index.tsx

@@ -0,0 +1,19 @@
+import React from 'react'
+import { Features } from '@deriv-com/blocks'
+import { cards } from '../../forex/trading-in-deriv/data'
+import { localize } from 'components/localization'
+
+const TradingInDeriv = () => {
+    const filteredCards = cards.filter((card) => card.header !== localize('_t_Options_t_'))
+    return (
+        <>
+            <Features.Card
+                className="!bg-background-primary-base"
+                title={localize('_t_Trading Cryptocurrencies on Deriv_t_')}
+                cards={filteredCards}
+                cols="three"
+            />
+        </>
+    )
+}
+export default TradingInDeriv