Konstantinos/DPROD-3579/Accumulators Rest of the sections of options page

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

@@ -1,42 +1,96 @@
 import React from 'react'
-import { options_heading_section } from './styles.module.scss'
-import Flex from 'features/components/atoms/flex-box'
-import Typography from 'features/components/atoms/typography'
+import { Hero } from '@deriv-com/blocks'
+// eslint-disable-next-line import/no-unresolved
+import { LabelPairedGrid2CaptionBoldIcon } from '@deriv/quill-icons/LabelPaired'
+import { v4 as uuidv4 } from 'uuid'
+import { Text, Heading, Button } from '@deriv/quill-design'
 import { Localize } from 'components/localization'
+import { handleRedirectToTradersHub } from 'components/custom/utils'
 import { TString } from 'types/generics'
+import usePpc from 'features/hooks/use-ppc'
+import useAuthCheck from 'components/hooks/use-auth-check'
+import { isBrowser } from 'common/utility'
+import useHandleSignup from 'components/hooks/use-handle-signup'
 import Label from 'features/components/atoms/label'
+import useScrollToElement from 'features/hooks/use-scroll-to-element'
 
 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 { is_ppc_redirect } = usePpc()
+    const clickToScrollHandler = useScrollToElement('faqs', -100)
+    const [is_logged_in] = useAuthCheck()
+    const handleSignup = useHandleSignup(is_ppc_redirect)
+    const isRealDevice = isBrowser()
+    const renderSignupButton = isRealDevice && !is_logged_in
+    const renderTradershubButton = isRealDevice && is_logged_in
+    const uniq = `navbuttons_uniq_class_${uuidv4()}`
+
     return (
-        <Flex.Box
-            justify="center"
-            align="center"
-            direction="col"
-            padding_block="12x"
-            md={{ padding_block: '20x' }}
-            gap={'8x'}
-            className={options_heading_section}
+        <Hero.ContentLess
+            className="px-800"
+            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" />
             )}
-            <Typography.Heading align="center" as="h1">
-                <Localize translate_text={heading} />
-            </Typography.Heading>
-            <Typography.Paragraph align="center">
-                <Localize translate_text={description} />
-            </Typography.Paragraph>
-        </Flex.Box>
+            {has_content_block && (
+                <div
+                    className="flex flex-col items-center gap-400 md:!flex-row md:justify-center"
+                    id={uniq}
+                >
+                    <Button
+                        size="lg"
+                        onClick={handleRedirectToTradersHub}
+                        icon={LabelPairedGrid2CaptionBoldIcon}
+                        iconPosition="start"
+                        className={`navbuttons_tradershub ${uniq} ${
+                            renderTradershubButton ? '' : 'navbuttons_tradershub--hidden'
+                        }`}
+                    >
+                        {`Trader's Hub`}
+                    </Button>
+
+                    <Button
+                        size="lg"
+                        onClick={handleSignup}
+                        className={`w-full md:!w-auto navbuttons_login ${uniq} ${
+                            renderSignupButton ? '' : 'navbuttons_login--hidden'
+                        }`}
+                    >
+                        <Localize translate_text="_t_Open demo account_t_" />
+                    </Button>
+                    <Button
+                        size="lg"
+                        variant="secondary"
+                        colorStyle="black"
+                        className="w-full md:!w-auto"
+                        onClick={clickToScrollHandler}
+                    >
+                        <Localize translate_text="_t_Read FAQs_t_" />
+                    </Button>
+                </div>
+            )}
+        </Hero.ContentLess>
     )
 }
 

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

@@ -1,4 +1,5 @@
 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'
@@ -46,6 +47,19 @@ 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

@@ -1,10 +1,7 @@
 import React, { ReactNode } from 'react'
 import MainRowNavigation from '../navigation/main-nav'
 import Layout from 'features/components/templates/layout'
-import { start_trading_data, why_trade_options_data } from './data'
 import MainFooter from 'features/components/templates/footer'
-import StartTrading from 'features/components/templates/start-trading'
-import WhyTradeOptions from 'features/components/templates/why-trade-options'
 import { TString } from 'types/generics'
 import OptionsTopTab from 'features/components/organisms/options-top-tab'
 import WhatAreDigitalOptions from 'features/components/organisms/what-are-digital-options'
@@ -14,13 +11,15 @@ interface OptionsLayoutProps {
     heading: TString
     description: TString
     is_coming_soon?: boolean
+    has_content_block?: boolean
 }
 
 const OptionsLayout = ({
     heading,
     description,
     children,
     is_coming_soon = false,
+    has_content_block = false,
 }: OptionsLayoutProps) => {
     return (
         <Layout>
@@ -30,10 +29,9 @@ const OptionsLayout = ({
                 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>
     )

src/features/pages/options/accumulator/accumulators_faq.module.scss

@@ -0,0 +1,5 @@
+@import 'features/styles/theme/variables';
+
+.accordion_border{
+    border-bottom: 2px solid var(--color-grey-45) ;
+}