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

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

@@ -1,42 +1,97 @@
 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}
-        >
-            {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>
+        <div className="max-w-[816px] mx-auto px-800">
+            <Hero.ContentLess
+                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}
+                    >
+                        <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>
+        </div>
     )
 }
 

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,3 @@
+.accordion_border{
+    border-bottom: 2px solid #F6F7F8 ;
+}

src/features/pages/options/accumulator/data.ts → src/features/pages/options/accumulator/data.tsx

@@ -1,41 +1,74 @@
-import PayoutWin from 'images/svg/trade-types/options/accumulator/payout_win.svg'
-import PayoutKnockedOut from 'images/svg/trade-types/options/accumulator/payout_knocked_out.svg'
+import React from 'react'
+import { CardContent } from '@deriv-com/components'
 import {
-    OptionContentAvailability,
-    OptionContentItemData,
-    OptionsFAQDataItem,
-} from 'features/components/templates/options-content/type'
-import {
-    allOptionsMarkets,
-    allOptionsTradePlatforms,
-} from 'features/components/organisms/available-markets-platforms/data'
+    IllustrativePayoutIcon,
+    IllustrativeMinimalCapitalIcon,
+    IllustrativeSupport247Icon,
+    IllustrativePaidProgrammeIcon,
+    // eslint-disable-next-line import/no-unresolved
+} from '@deriv/quill-icons/Illustrative'
+import Image from 'features/components/atoms/image'
+import TickDuration from 'images/svg/options/tick_duration.svg'
+import { Localize } from 'components/localization'
+import { OptionsFAQDataItem } from 'features/components/templates/options-content/type'
 
-export const accumulatorOptionsContentItems: OptionContentItemData[] = [
+export const accumulatorCards: CardContent[] = [
     {
-        type: 'single',
-        images: [
-            {
-                src: PayoutWin,
-                alt: '_t_A chart illustrating an accumulators contract payout_t_',
-            },
-            {
-                src: PayoutKnockedOut,
-                alt: '_t_A chart illustrating a terminated accumulators contract_t_',
-            },
-        ],
-        texts: [
-            '_t_Accumulator options allow you to express your view on the range of movement of an index. With accumulators, your payout will grow exponentially as long as the current spot price remains within a predefined range from the previous spot price._t_',
-            '_t_The size of the predefined range depends on the growth rate and the chosen index when opening the contract. You can set the growth rate at 1%, 2%, 3%, 4%, or 5%. A higher growth rate means a narrower range, and vice versa._t_',
-            '_t_Your payout will grow exponentially based on the chosen growth rate for each small movement (tick) in the spot price, as long as the current spot price remains within the range. The payout can continue to grow until either the maximum number of ticks or the maximum payout is reached._t_',
-            '_t_You can manually close the contract any time before the price touches or breaches either the upper or lower range. By doing so, you will receive the current accumulated payout, which is the sum of your initial stake and profit. However, if the current spot price touches or moves outside the range, the contract is terminated, and you lose the accumulated payout._t_',
-        ],
+        id: 1,
+        header: <Localize translate_text="_t_1-5% growth rate_t_" />,
+        description: (
+            <Localize translate_text="_t_Choose your growth rate to tailor risk/reward. _t_" />
+        ),
+        icon: <IllustrativeMinimalCapitalIcon width="48" height="48" />,
+        color: 'gray',
+        align: 'start',
+        size: 'md',
     },
-]
 
-export const accumulatorMarkets: OptionContentAvailability[] = [allOptionsMarkets.derived_indices]
-
-export const accumulatorPlatforms: OptionContentAvailability[] = [
-    allOptionsTradePlatforms.deriv_trader,
+    {
+        id: 2,
+        header: <Localize translate_text="_t_45-230 tick duration_t_" />,
+        description: (
+            <Localize translate_text="_t_Fast-paced action with durations up to 230 ticks._t_" />
+        ),
+        icon: <Image src={TickDuration} width="48" height="48" />,
+        color: 'gray',
+        align: 'start',
+        size: 'md',
+    },
+    {
+        id: 3,
+        header: <Localize translate_text="_t_Controlled Risk_t_" />,
+        description: (
+            <Localize translate_text="_t_Potential loss is limited to the initial amount you decide to trade._t_" />
+        ),
+        icon: <IllustrativePayoutIcon width="48" height="48" />,
+        color: 'gray',
+        align: 'start',
+        size: 'md',
+    },
+    {
+        id: 4,
+        header: <Localize translate_text="_t_Practise with demo_t_" />,
+        description: (
+            <Localize translate_text="_t_Hone your strategies risk-free with a demo account._t_" />
+        ),
+        icon: <IllustrativePaidProgrammeIcon width="48" height="48" />,
+        color: 'gray',
+        align: 'start',
+        size: 'md',
+    },
+    {
+        id: 5,
+        header: <Localize translate_text="_t_24/7 support_t_" />,
+        description: (
+            <Localize translate_text="_t_Get round-the-clock assistance from our Customer Support team._t_" />
+        ),
+        icon: <IllustrativeSupport247Icon width="48" height="48" />,
+        color: 'gray',
+        align: 'start',
+        size: 'md',
+    },
 ]
 
 export const accumulatorFAQ: OptionsFAQDataItem[] = [