feat: ctrader faq section

src/features/pages/deriv-ctrader/browse-our-faq/index.tsx

@@ -0,0 +1,19 @@
+import React from 'react'
+import { ctrader_faq_data } from './data'
+import DerivPrimeFaq from 'features/pages/partners/deriv-prime/browse-our-faq/deriv-prime-faq'
+import Typography from 'features/components/atoms/typography'
+import { Localize } from 'components/localization'
+import Container from 'features/components/atoms/container'
+
+const BrowseOurFaq = () => {
+    return (
+        <Container.Fixed margin_block="20x">
+            <Typography.Heading md={{ pt: '40x' }} align="center" as="h2">
+                <Localize translate_text="_t_Browse our FAQ_t_" />
+            </Typography.Heading>
+            <DerivPrimeFaq faqs={ctrader_faq_data} />
+        </Container.Fixed>
+    )
+}
+
+export default BrowseOurFaq

src/features/pages/deriv-ctrader/index.tsx

@@ -3,6 +3,7 @@ import CTraderHero from './hero-banner'
 import CTraderNumbers from './trade-numbers'
 import CTraderTradeDescription from './trade-description'
 import CTraderWhyTrade from './why-trade'
+import BrowseOurFaq from './browse-our-faq'
 import CTraderTradeFeatures from './platform-features'
 import HowToStartCTrader from './how-to-start'
 import CTraderPlatformBanner from './platform-banner'
@@ -31,6 +32,7 @@ const DerivCTrader = () => {
             )}
 
             <OtherPlatforms />
+            <BrowseOurFaq />
             <Footer />
         </Layout>
     )

src/features/pages/partners/deriv-prime/browse-our-faq/deriv-prime-faq.tsx

@@ -9,7 +9,7 @@ import { TString } from 'types/generics'
 
 interface DerivPrimeFaqProps {
     faqs: DerivPrimeFAQDataItem[]
-    subsection: TString
+    subsection?: TString
 }
 
 const DerivPrimeFaq = ({ faqs, subsection }: DerivPrimeFaqProps) => {
@@ -21,7 +21,7 @@ const DerivPrimeFaq = ({ faqs, subsection }: DerivPrimeFaqProps) => {
                 font_family="UBUNTU"
                 size="xlarge"
             >
-                <Localize translate_text={subsection} />
+                {subsection && <Localize translate_text={subsection} />}
             </Typography.Paragraph>
             <Accordion.Root type="multiple">
                 {faqs.map((faqItem) => (
@@ -44,7 +44,10 @@ const DerivPrimeFaq = ({ faqs, subsection }: DerivPrimeFaqProps) => {
                                 <Flex.Box key={answerItem.id}>
                                     {answerItem.type === 'text' ? (
                                         <Typography.Paragraph>
-                                            <Localize translate_text={answerItem.text} />
+                                            <Localize
+                                                translate_text={answerItem.text}
+                                                components={answerItem.components}
+                                            />
                                         </Typography.Paragraph>
                                     ) : answerItem.type === 'list' ? (
                                         <ul>

src/features/pages/partners/deriv-prime/browse-our-faq/types.ts

@@ -1,9 +1,11 @@
+import { ReactElement } from 'react'
 import { TString } from 'types/generics'
 
 export interface DerivPrimeFAQTextItem {
     type: 'text'
     id: number
     text: TString
+    components?: ReactElement[]
 }
 
 export interface DerivPrimeFAQListItem {