binary-com · Jun 30, 2021 · Jun 17, 2021 · Jun 18, 2021 · Jun 18, 2021 · Jun 18, 2021
@@ -2,7 +2,6 @@ import { useState, useEffect } from 'react'
 import { getClientInformation, getDomain } from 'common/utility'
 
 export const useClientInformation = () => {
-
     const [client_information, setClientInformation] = useState(false)
     const [current_client_information, setCurrentClientInformation] = useState(false)
 

@@ -61,10 +61,11 @@ const LanguageSwitch = ({ i18n, is_high_nav, short_name }) => {
         if (`/${current_lang}/` !== id) {
             const current_path = window.location.pathname
             const current_hash = window.location.hash
-            const destination_path = `${path}${current_lang === 'en'
-                ? current_path.replace(/\//u, '')
-                : nonENLangUrlReplace(current_path)
-                }${current_hash}`
+            const destination_path = `${path}${
+                current_lang === 'en'
+                    ? current_path.replace(/\//u, '')
+                    : nonENLangUrlReplace(current_path)
+            }${current_hash}`
 
             if (path === '/ach/') {
                 localStorage.setItem('i18n', 'ach')

@@ -38,10 +38,15 @@ const WhatIsBeSquare = () => {
         <Section>
             <ContentContainer>
                 <ContentWrapper>
-                    <Title as="h2" text_align={'left'} max_width={['450px']} margin={['0', '0 auto']}>
+                    <Title
+                        as="h2"
+                        text_align={'left'}
+                        max_width={['450px']}
+                        margin={['0', '0 auto']}
+                    >
                         {what_is_be_square.title}
                     </Title>
-                    <TextWrapper max_width={['486px', '328px']} margin={['8px 0 0', '16px 0']} >
+                    <TextWrapper max_width={['486px', '328px']} margin={['8px 0 0', '16px 0']}>
                         {what_is_be_square.subtitle}
                     </TextWrapper>
                 </ContentWrapper>

@@ -12,7 +12,7 @@ export const HeroContainer = styled.div`
     @media ${device.laptop} {
         grid-template-columns: auto;
     }
-    
+
     @media ${device.tablet} {
         height: 370px;
     }

@@ -0,0 +1,65 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import styled from 'styled-components'
+import ArticleCard from './_article-card'
+import FeaturedArticle from './_featured-article'
+import { Flex } from 'components/containers'
+import { Text, LocalizedLinkText } from 'components/elements'
+import device from 'themes/device'
+import RightArrow from 'images/svg/black-right-arrow.svg'
+
+const VideoGrid = styled.div`
+    display: grid;
+    width: 100%;
+    height: 100%;
+    margin: 40px 0;
+    grid-template-columns: repeat(auto-fit, minmax(288px, 384px));
+    grid-row-gap: 40px;
+    grid-column-gap: 24px;
+    grid-template-rows: auto;
+`
+
+const Container = styled(Flex)`
+    width: 90%;
+    max-width: 1200px;
+
+    @media ${device.desktopL} {
+        max-width: 1600px;
+    }
+    @media ${device.tabletL} {
+        width: 100%;
+        padding: 0 16px;
+    }
+`
+
+const AllArticles = ({ article_data }) => {
+    return (
+        <Container m="0 auto" fd="column" ai="center">
+            <Flex jc="flex-start" ai="center" mt="40px">
+                <LocalizedLinkText to="/blog/" color="grey-5">
+                    Home
+                </LocalizedLinkText>
+                <img
+                    src={RightArrow}
+                    alt="Right arrow"
+                    height="16"
+                    width="16"
+                    style={{ margin: '0 8px' }}
+                />
+                <Text>All articles</Text>
+            </Flex>
+            <FeaturedArticle article_data={article_data} />
+            <VideoGrid style={{ justifyContent: 'center' }}>
+                {article_data.map((item) => {
+                    return <ArticleCard key={item.id} item={item} />
+                })}
+            </VideoGrid>
+        </Container>
+    )
+}
+
+AllArticles.propTypes = {
+    article_data: PropTypes.arrayOf(PropTypes.object),
+}
+
+export default AllArticles
@@ -0,0 +1,112 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import styled from 'styled-components'
+import { Flex } from 'components/containers'
+import { Header } from 'components/elements'
+import { LocalizedLink } from 'components/localization'
+import device from 'themes/device'
+
+const ArticleCardWrapper = styled(Flex)`
+    max-width: 384px;
+    flex-direction: column;
+    justify-content: flex-start;
+    text-decoration: none;
+    position: relative;
+    height: 100%;
+    border-radius: 8px;
+    border: 1px solid var(--color-grey-8);
+    background: var(--color-white);
+    transition: transform 0.3s;
+    overflow: hidden;
+    cursor: pointer;
+
+    &:hover {
+        transform: translateY(-1.1rem) scale(1.02);
+    }
+`
+
+const ImageWrapper = styled.div`
+    height: 200px;
+    width: 384px;
+    position: relative;
+    z-index: 1;
+    overflow: hidden;
+
+    @media ${device.mobileL} {
+        width: 100%;
+        height: 184px;
+    }
+`
+
+const StyledCategories = styled(Header)`
+    width: fit-content;
+    border-radius: 8px;
+    background-color: var(--color-blue-10);
+    color: var(--color-blue-9);
+    padding: 2px 8px 0;
+    margin: 0 8px 8px 0;
+`
+
+const ContentWrapper = styled.div`
+    padding: 16px 24px;
+
+    @media ${device.mobileL} {
+        padding: 16px;
+    }
+`
+
+const RedirectLink = styled(LocalizedLink)`
+    text-decoration: none;
+`
+
+const ArticleCard = ({ item }) => {
+    return (
+        <RedirectLink to={`/blog/articles/${item.slug}`}>
+            <ArticleCardWrapper>
+                <ImageWrapper>
+                    <img
+                        src={item.image}
+                        alt="Video card"
+                        width="100%"
+                        style={{ objectFit: 'contain' }}
+                    />
+                </ImageWrapper>
+                <ContentWrapper>
+                    <Flex jc="flex-start" height="auto" fw="wrap">
+                        {item.category.slice(0, 2).map((item_category) => (
+                            <StyledCategories as="h4" type="paragraph-2" key={item_category}>
+                                {item_category}
+                            </StyledCategories>
+                        ))}
+                        {item.category.length > 2 && (
+                            <StyledCategories as="h4" type="paragraph-2">
+                                {`+${item.category.slice(2).length.toString()}`}
+                            </StyledCategories>
+                        )}
+                        <Header
+                            as="h5"
+                            type="paragraph-2"
+                            weight="normal"
+                            color="grey-5"
+                            width="auto"
+                        >
+                            {`• ${item.reading_time} min read`}
+                        </Header>
+                    </Flex>
+                    <Header as="h3" type="subtitle-2">
+                        {item.title}
+                    </Header>
+                    <Header as="p" type="paragraph-2" weight="normal" mt="8px" color="grey-5">
+                        {item.description}
+                    </Header>
+                </ContentWrapper>
+            </ArticleCardWrapper>
+        </RedirectLink>
+    )
+}
+
+ArticleCard.propTypes = {
+    item: PropTypes.arrayOf(PropTypes.object),
+}
+
+export default ArticleCard
@@ -0,0 +1,101 @@
+export const article_data = [
+    {
+        image: 'https://source.unsplash.com/random/1',
+        reading_time: '2',
+        category: ['Multipliers', 'CFD', 'Stocks', 'Forex', 'Category'],
+        title: 'How to trade multipliers on Deriv',
+        description:
+            'To help you begin, we will look at the basics of cryptocurrency: what it is, how it works, and how to start trading cryptos on Deriv.com.',
+        date: '12 June 2021',
+        slug: 'how-to-trade-multipliers-on-deriv',
+        id: 1,
+    },
+    {
+        image: 'https://source.unsplash.com/random/2',
+        reading_time: '2',
+        category: ['Multipliers'],
+        title: 'How to trade multipliers on Deriv this is for really long titles',
+        description:
+            'To help you begin, we will look at the basics of cryptocurrency: what it is, how it works, and how to start trading cryptos on Deriv.com.',
+        date: '12 June 2021',
+        slug: 'how-to-trade-multipliers-on-deriv',
+        id: 2,
+    },
+    {
+        image: 'https://source.unsplash.com/random/3',
+        reading_time: '2',
+        category: ['Multipliers'],
+        title: 'How to trade multipliers on Deriv',
+        description:
+            'To help you begin, we will look at the basics of cryptocurrency: what it is, how it works, and how to start trading cryptos on Deriv.com. This has an extra extra long section of the description for testing purposes.',
+        date: '12 June 2021',
+        slug: 'how-to-trade-multipliers-on-deriv',
+        id: 3,
+    },
+    {
+        image: 'https://source.unsplash.com/random/4',
+        reading_time: '2',
+        category: ['Multipliers'],
+        title: 'How to trade multipliers on Deriv',
+        description:
+            'To help you begin, we will look at the basics of cryptocurrency: what it is, how it works, and how to start trading cryptos on Deriv.com.',
+        date: '12 June 2021',
+        slug: 'how-to-trade-multipliers-on-deriv',
+        id: 4,
+    },
+    {
+        image: 'https://source.unsplash.com/random/5',
+        reading_time: '2',
+        category: ['Multipliers'],
+        title: 'How to trade multipliers on Deriv',
+        description:
+            'To help you begin, we will look at the basics of cryptocurrency: what it is, how it works, and how to start trading cryptos on Deriv.com.',
+        date: '12 June 2021',
+        slug: 'how-to-trade-multipliers-on-deriv',
+        id: 5,
+    },
+    {
+        image: 'https://source.unsplash.com/random/6',
+        reading_time: '2',
+        category: ['Multipliers'],
+        title: 'How to trade multipliers on Deriv',
+        description:
+            'To help you begin, we will look at the basics of cryptocurrency: what it is, how it works, and how to start trading cryptos on Deriv.com.',
+        date: '12 June 2021',
+        slug: 'how-to-trade-multipliers-on-deriv',
+        id: 6,
+    },
+    {
+        image: 'https://source.unsplash.com/random/7',
+        reading_time: '2',
+        category: ['Multipliers'],
+        title: 'How to trade multipliers on Deriv',
+        description:
+            'To help you begin, we will look at the basics of cryptocurrency: what it is, how it works, and how to start trading cryptos on Deriv.com.',
+        date: '12 June 2021',
+        slug: 'how-to-trade-multipliers-on-deriv',
+        id: 7,
+    },
+    {
+        image: 'https://source.unsplash.com/random/8',
+        reading_time: '2',
+        category: ['Multipliers'],
+        title: 'How to trade multipliers on Deriv',
+        description:
+            'To help you begin, we will look at the basics of cryptocurrency: what it is, how it works, and how to start trading cryptos on Deriv.com.',
+        date: '12 June 2021',
+        slug: 'how-to-trade-multipliers-on-deriv',
+        id: 8,
+    },
+    {
+        image: 'https://source.unsplash.com/random/9',
+        reading_time: '2',
+        category: ['Multipliers'],
+        title: 'How to trade multipliers on Deriv',
+        description:
+            'To help you begin, we will look at the basics of cryptocurrency: what it is, how it works, and how to start trading cryptos on Deriv.com.',
+        date: '12 June 2021',
+        slug: 'how-to-trade-multipliers-on-deriv',
+        id: 9,
+    },
+]