Translation 1819 translations mt5 ib

src/pages/partners/affiliate-ib/_dmt5-cards.tsx

@@ -76,33 +76,76 @@ const query = graphql`
         deriv_x_vol: file(relativePath: { eq: "affiliate-and-ib/deriv_x_vol.png" }) {
             ...fadeIn
         }
+        mt5_forex: file(relativePath: { eq: "affiliate-and-ib/mt5_forex.png" }) {
+            ...fadeIn
+        }
+        mt5_metal: file(relativePath: { eq: "affiliate-and-ib/mt5_metal.png" }) {
+            ...fadeIn
+        }
+        mt5_oil: file(relativePath: { eq: "affiliate-and-ib/mt5_oil.png" }) {
+            ...fadeIn
+        }
+        mt5_crypto: file(relativePath: { eq: "affiliate-and-ib/mt5_crypto.png" }) {
+            ...fadeIn
+        }
+        mt5_stocks: file(relativePath: { eq: "affiliate-and-ib/mt5_stocks.png" }) {
+            ...fadeIn
+        }
+        mt5_stock_indices: file(relativePath: { eq: "affiliate-and-ib/mt5_stock_indices.png" }) {
+            ...fadeIn
+        }
+        mt5_volatility: file(relativePath: { eq: "affiliate-and-ib/mt5_volatility.png" }) {
+            ...fadeIn
+        }
+        mt5_step: file(relativePath: { eq: "affiliate-and-ib/mt5_step.png" }) {
+            ...fadeIn
+        }
+        derived_crash: file(relativePath: { eq: "affiliate-and-ib/derived_crash.png" }) {
+            ...fadeIn
+        }
+        derived_jump: file(relativePath: { eq: "affiliate-and-ib/derived_jump.png" }) {
+            ...fadeIn
+        }
+        derived_step: file(relativePath: { eq: "affiliate-and-ib/derived_step.png" }) {
+            ...fadeIn
+        }
+        derived_volatility: file(relativePath: { eq: "affiliate-and-ib/derived_volatility.png" }) {
+            ...fadeIn
+        }
+        fin_crypto: file(relativePath: { eq: "affiliate-and-ib/fin_crypto.png" }) {
+            ...fadeIn
+        }
+        fin_forex: file(relativePath: { eq: "affiliate-and-ib/fin_forex.png" }) {
+            ...fadeIn
+        }
+        fin_metal: file(relativePath: { eq: "affiliate-and-ib/fin_metal.png" }) {
+            ...fadeIn
+        }
+        fin_oil: file(relativePath: { eq: "affiliate-and-ib/fin_oil.png" }) {
+            ...fadeIn
+        }
+        fin_stock: file(relativePath: { eq: "affiliate-and-ib/fin_stock.png" }) {
+            ...fadeIn
+        }
+        stp_forex: file(relativePath: { eq: "affiliate-and-ib/stp_forex.png" }) {
+            ...fadeIn
+        }
+        stp_crypto: file(relativePath: { eq: "affiliate-and-ib/stp_crypto.png" }) {
+            ...fadeIn
+        }
     }
 `
 
 const StyledCard = styled(Card)`
-    min-height: 42.6rem;
-    height: 100%;
+    min-block-size: 42.6rem;
+    block-size: fit-content;
+    inline-size: 38.4rem;
     position: relative;
     border-radius: 0.8rem;
-    min-width: calc((100% - 4.8rem) / 3);
-    width: calc((100% - 4.8rem) / 3);
     justify-content: flex-start;
 
-    :nth-child(2) {
-        margin: 1.6rem 2.4rem 0;
-
-        @media ${device.tabletL} {
-            margin: 2.4rem 0;
-        }
-    }
-
-    @media ${device.laptopM} {
-        min-width: 38.4rem;
-        width: 38.4rem;
-    }
-
     @media ${device.tabletL} {
-        min-width: 32.8rem;
+        min-inline-size: 32.8rem;
         padding: 1.6rem 1.6rem 0;
         ${(props) => props.tabletHeight && 'height:' + props.tabletHeight};
 
@@ -112,11 +155,12 @@ const StyledCard = styled(Card)`
     }
 
     @media ${device.mobileM} {
-        min-width: unset;
-        width: 100%;
+        min-inline-size: unset;
+        inline-size: 100%;
         ${(props) => props.mobileHeight && 'height:' + props.mobileHeight};
     }
 `
+
 const CardWrappers = styled(Flex)`
     min-height: 33.8rem;
     flex-direction: column;
@@ -131,7 +175,7 @@ const CardText = styled(Text)`
 `
 const AccordionWrapper = styled.div`
     max-width: 99.6rem;
-    width: fit-content;
+    width: 100%;
     margin: 0 auto;
     position: relative;
     z-index: 2;
@@ -285,36 +329,19 @@ const DMT5Cards = ({ data }: DMT5Props) => {
                                 ))}
                             </Accordion>
                         </AccordionWrapper>
-                        {data.countDetails.map((valueCalc, indexCalc) => (
-                            <Flex key={indexCalc} direction="column" ai="flex-start" height="auto">
-                                {valueCalc.disclaimer &&
-                                    valueCalc.disclaimer.map((valueNotes, notesIndex) => (
-                                        <Flex
-                                            direction="column"
-                                            ai="flex-start"
-                                            height="auto"
-                                            style={{
-                                                borderTop: '0.1rem solid var(--color-grey-21)',
-                                            }}
-                                            key={notesIndex}
-                                        >
-                                            <Header
-                                                type="main-paragraph"
-                                                as="p"
-                                                mt="1.4rem"
-                                                mb="0.8rem"
-                                            >
-                                                <Localize translate_text={valueNotes.title} />
-                                            </Header>
-                                            <Header type="main-paragraph" as="p" mb="0.8rem">
-                                                <Localize
-                                                    translate_text={valueNotes.desc.firstText}
-                                                />
-                                            </Header>
-                                        </Flex>
-                                    ))}
-                            </Flex>
-                        ))}
+                        <Flex
+                            style={{ borderTop: '0.1rem solid var(--color-grey-21)' }}
+                            direction="column"
+                            ai="flex-start"
+                            height="auto"
+                        >
+                            <Header type="main-paragraph" as="p" mt="1.4rem" mb="0.8rem">
+                                <Localize translate_text="_t_Disclaimer:_t_" />
+                            </Header>
+                            <Header type="main-paragraph" as="p" mb="0.8rem">
+                                <Localize translate_text="_t_This plan is not available for IBs who promote to clients residing in the EU._t_" />
+                            </Header>
+                        </Flex>
                     </CardWrappers>
                     <HowItsCalculate>
                         <StyledButton flat onClick={toggleCalculated} className="calculated">