patch fix

src/features/components/organisms/what-are-digital-options/accumulator/index.tsx

@@ -0,0 +1,83 @@
+import React from 'react'
+import { Hero } from '@deriv-com/blocks'
+// eslint-disable-next-line import/no-unresolved
+import { v4 as uuidv4 } from 'uuid'
+import { Text, Heading, Button } from '@deriv/quill-design'
+import { Localize } from 'components/localization'
+import { TString } from 'types/generics'
+import Label from 'features/components/atoms/label'
+import useScrollToElement from 'features/hooks/use-scroll-to-element'
+import TradersHubCtaButton from 'features/components/molecules/traders-hub-cta-button'
+import { useFloatingCtaContext } from 'features/contexts/floating-cta/cta.provider'
+import FloatingCta from 'features/pages/home/hero/floating-cta'
+
+interface WhatAreDigitalOptionsProps {
+    heading: TString
+    description: TString
+    is_coming_soon: boolean
+    has_content_block: boolean
+}
+
+const WhatAreDigitalOptions = ({
+    heading,
+    description,
+    is_coming_soon,
+    has_content_block,
+}: WhatAreDigitalOptionsProps) => {
+    const clickToScrollHandler = useScrollToElement('faqs', -100)
+    const uniq = `navbuttons_uniq_class_${uuidv4()}`
+    const { ctaBottom, visibilityPercentage, entryRef } = useFloatingCtaContext()
+
+    return (
+        <>
+            <Hero.ContentLess
+                className="px-800  md:px-1200 lg:px-gap-none"
+                description={
+                    <Text className="leading-6">
+                        <Localize translate_text={description} />
+                    </Text>
+                }
+                title={
+                    <Heading>
+                        <Localize translate_text={heading} />
+                    </Heading>
+                }
+            >
+                {is_coming_soon && (
+                    <Label text="_t_Available on Demo accounts only_t_" bgcolor="blue" />
+                )}
+                {has_content_block && (
+                    <div
+                        className="flex flex-col items-center gap-400 md:!flex-row md:justify-center"
+                        id={uniq}
+                    >
+                        <TradersHubCtaButton
+                            ref={entryRef}
+                            className="w-full md:!w-auto"
+                            size="lg"
+                        />
+                        <Button
+                            size="lg"
+                            variant="secondary"
+                            colorStyle="black"
+                            className="w-full md:!w-auto hover:!bg-solid-slate-50 sm:hover:!bg-opacity-black-100"
+                            onClick={clickToScrollHandler}
+                        >
+                            <Localize translate_text="_t_Read FAQs_t_" />
+                        </Button>
+                    </div>
+                )}
+            </Hero.ContentLess>
+            {has_content_block && (
+                <FloatingCta
+                    style={{
+                        transform: `translateY(${visibilityPercentage - 100}%)`,
+                        bottom: `${-68 + ctaBottom}px`,
+                    }}
+                />
+            )}
+        </>
+    )
+}
+
+export default WhatAreDigitalOptions

src/features/components/organisms/what-are-digital-options/index.tsx

@@ -1,82 +1,42 @@
 import React from 'react'
-import { Hero } from '@deriv-com/blocks'
-// eslint-disable-next-line import/no-unresolved
-import { v4 as uuidv4 } from 'uuid'
-import { Text, Heading, Button } from '@deriv/quill-design'
+import { options_heading_section } from './styles.module.scss'
+import Flex from 'features/components/atoms/flex-box'
+import Typography from 'features/components/atoms/typography'
 import { Localize } from 'components/localization'
 import { TString } from 'types/generics'
 import Label from 'features/components/atoms/label'
-import useScrollToElement from 'features/hooks/use-scroll-to-element'
-import TradersHubCtaButton from 'features/components/molecules/traders-hub-cta-button'
-import { useFloatingCtaContext } from 'features/contexts/floating-cta/cta.provider'
-import FloatingCta from 'features/pages/home/hero/floating-cta'
 
 interface WhatAreDigitalOptionsProps {
     heading: TString
     description: TString
     is_coming_soon: boolean
-    has_content_block: boolean
 }
 
 const WhatAreDigitalOptions = ({
     heading,
     description,
     is_coming_soon,
-    has_content_block,
 }: WhatAreDigitalOptionsProps) => {
-    const clickToScrollHandler = useScrollToElement('faqs', -100)
-    const uniq = `navbuttons_uniq_class_${uuidv4()}`
-    const { ctaBottom, visibilityPercentage, entryRef } = useFloatingCtaContext()
-
     return (
-        <>
-            <Hero.ContentLess
-                className="px-800  md:px-1200 lg:px-gap-none"
-                description={
-                    <Text className="leading-6">
-                        <Localize translate_text={description} />
-                    </Text>
-                }
-                title={
-                    <Heading>
-                        <Localize translate_text={heading} />
-                    </Heading>
-                }
-            >
-                {is_coming_soon && (
-                    <Label text="_t_Available on Demo accounts only_t_" bgcolor="blue" />
-                )}
-                {has_content_block && (
-                    <div
-                        className="flex flex-col items-center gap-400 md:!flex-row md:justify-center"
-                        id={uniq}
-                    >
-                        <TradersHubCtaButton
-                            ref={entryRef}
-                            className="w-full md:!w-auto"
-                            size="lg"
-                        />
-                        <Button
-                            size="lg"
-                            variant="secondary"
-                            colorStyle="black"
-                            className="w-full md:!w-auto hover:!bg-solid-slate-50 sm:hover:!bg-opacity-black-100"
-                            onClick={clickToScrollHandler}
-                        >
-                            <Localize translate_text="_t_Read FAQs_t_" />
-                        </Button>
-                    </div>
-                )}
-            </Hero.ContentLess>
-            {has_content_block && (
-                <FloatingCta
-                    style={{
-                        transform: `translateY(${visibilityPercentage - 100}%)`,
-                        bottom: `${-68 + ctaBottom}px`,
-                    }}
-                />
+        <Flex.Box
+            justify="center"
+            align="center"
+            direction="col"
+            padding_block="12x"
+            md={{ padding_block: '20x' }}
+            gap={'8x'}
+            className={options_heading_section}
+        >
+            {is_coming_soon && (
+                <Label text="_t_Available on Demo accounts only_t_" bgcolor="blue" />
             )}
-        </>
+            <Typography.Heading align="center" as="h1">
+                <Localize translate_text={heading} />
+            </Typography.Heading>
+            <Typography.Paragraph align="center">
+                <Localize translate_text={description} />
+            </Typography.Paragraph>
+        </Flex.Box>
     )
 }
 

src/features/components/quill/options-layout/index.tsx

@@ -4,7 +4,7 @@ import Layout from '../quill-layout'
 import MainFooter from 'features/components/templates/footer'
 import { TString } from 'types/generics'
 import OptionsTopTab from 'features/components/organisms/options-top-tab'
-import WhatAreDigitalOptions from 'features/components/organisms/what-are-digital-options'
+import WhatAreDigitalOptions from 'features/components/organisms/what-are-digital-options/accumulator'
 
 interface OptionsLayoutProps {
     children?: ReactNode

src/features/components/templates/navigation/tab-nav-without-border/index.tsx

@@ -1,5 +1,4 @@
 import React, { useEffect, useState, useRef } from 'react'
-import { Breadcrumbs } from '@deriv-com/components'
 import { SwiperSlide, Swiper } from 'swiper/react'
 import SwiperCore, { Navigation } from 'swiper'
 import NavigationTabMenu from '../../tabs/navigation-menu'
@@ -47,19 +46,6 @@ const NavigationTabWithoutBorder = ({ tab_data }: NavigationTabWithoutBorderType
 
     return (
         <Container.Fluid pt="25x">
-            <Breadcrumbs
-                className="py-general-md mt-600 ml-400"
-                links={[
-                    {
-                        content: 'Home',
-                        href: '/',
-                    },
-                    {
-                        content: 'Options',
-                        href: '/trade-types/options',
-                    },
-                ]}
-            />
             <Flex.Box
                 padding_block="10x"
                 gap="6x"

src/features/components/templates/options-layout/index.tsx

@@ -22,25 +22,21 @@ const OptionsLayout = ({
     description,
     children,
     is_coming_soon = false,
-    has_content_block = false,
 }: OptionsLayoutProps) => {
     return (
-        <>
-            <Layout>
-                <MainRowNavigation />
-                <OptionsTopTab />
-                <WhatAreDigitalOptions
-                    heading={heading}
-                    description={description}
-                    is_coming_soon={is_coming_soon}
-                    has_content_block={has_content_block}
-                />
-                {children}
-                <WhyTradeOptions data={why_trade_options_data} />
-                <StartTrading data={start_trading_data} />
-                <MainFooter />
-            </Layout>
-        </>
+        <Layout>
+            <MainRowNavigation />
+            <OptionsTopTab />
+            <WhatAreDigitalOptions
+                heading={heading}
+                description={description}
+                is_coming_soon={is_coming_soon}
+            />
+            {children}
+            <WhyTradeOptions data={why_trade_options_data} />
+            <StartTrading data={start_trading_data} />
+            <MainFooter />
+        </Layout>
     )
 }