Jia/1167 add check trading specs button in et fs (#5672)

* feat: add the check trading specs button on the etfs market page

* fix: remove wrongly added code

* style: change to mobile first approach and container from fluid to fixed

* style: added fixed container

src/features/pages/markets/etf/check-trading/index.tsx

@@ -0,0 +1,38 @@
+import React from 'react'
+import * as styles from './styles.module.scss'
+import Flex from 'features/components/atoms/flex-box'
+import { Localize } from 'components/localization'
+import LinkButton from 'features/components/atoms/link-button'
+import Typography from 'features/components/atoms/typography'
+
+const CheckTrading = () => {
+    return (
+        <Flex.Box direction="col" container="fixed" className={styles.item_container}>
+            <Flex.Box
+                direction="col"
+                container="fluid"
+                justify="center"
+                align="center"
+                pb="30x"
+                pt="20x"
+                md={{ pb: '40x', mb: '20x' }}
+            >
+                <Typography.Paragraph mb="10x" textcolor="black" align="center">
+                    <Localize translate_text="_t_Want to know more about CFD trading conditions for the instruments we offer?_t_" />
+                </Typography.Paragraph>
+                <LinkButton.Primary
+                    font_family="UBUNTU"
+                    size="medium"
+                    url={{
+                        type: 'internal',
+                        to: '/trading-specification',
+                    }}
+                >
+                    <Localize translate_text="_t_Check trading specs_t_" />
+                </LinkButton.Primary>
+            </Flex.Box>
+        </Flex.Box>
+    )
+}
+
+export default CheckTrading

src/features/pages/markets/etf/check-trading/styles.module.scss

@@ -0,0 +1,10 @@
+@use 'features/styles/theme/theme-mixins' as *;
+@import 'features/styles/theme/variables';
+
+.item_container {
+    box-shadow: rgba(0, 0, 0, 0.1) 0 0 3px 0;
+
+    @include breakpoints(tablet) {
+        box-shadow: none;
+    }
+}

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

@@ -5,6 +5,7 @@ import Banner from './banner'
 import InstrumentsTable from './instruments'
 import InstrumentsContent from './instrumental-content'
 import TradeTypes from './trades-available'
+import CheckTrading from './check-trading'
 import SignupPublic from 'features/components/templates/signup/with-banner'
 import Flex from 'features/components/atoms/flex-box'
 import OtherMarketsSlider from 'features/components/molecules/other-markets-slider'
@@ -24,10 +25,12 @@ const ETFMarket = () => {
                 direction="col"
                 as="section"
                 padding_inline="8x"
+                md={{ pb: '20x' }}
             >
                 <InstrumentsTable />
                 <InstrumentsContent />
             </Flex.Box>
+            <CheckTrading />
             <WhyTrade />
             <Steps />
             <OtherMarketsSlider current_market="etfs" />

src/features/pages/markets/etf/instrumental-content/index.tsx

@@ -11,13 +11,14 @@ const InstrumentsContent = () => {
             <Flex.Box
                 container="fixed"
                 className={styles.content_wrapper}
-                mb="20x"
+                mb="12x"
                 padding_inline="7x"
                 padding_block="15x"
                 gap="8x"
                 direction="col"
                 md={{
                     padding_inline: '15x',
+                    mb: '0x',
                 }}
             >
                 {instrumental_content.map((data) => (