binary-com · habib-deriv · Dec 27, 2021 · Dec 27, 2021 · Dec 27, 2021 · Dec 27, 2021
diff --git a/src/images/common/about-us-carousel/media-1.jpg b/src/images/common/about-us-carousel/media-1.jpg
diff --git a/src/images/common/about-us-carousel/media-2.jpg b/src/images/common/about-us-carousel/media-2.jpg
diff --git a/src/images/common/about-us-carousel/media-3.jpg b/src/images/common/about-us-carousel/media-3.jpg
diff --git a/src/images/common/about-us-carousel/media-4.jpg b/src/images/common/about-us-carousel/media-4.jpg
diff --git a/src/images/common/about-us-carousel/media-5.jpg b/src/images/common/about-us-carousel/media-5.jpg
diff --git a/src/images/common/about-us-carousel/media-6.jpg b/src/images/common/about-us-carousel/media-6.jpg
diff --git a/src/pages/about-us/_MakeTrading.tsx b/src/pages/about-us/_MakeTrading.tsx
@@ -1,10 +1,10 @@
 import React from 'react'
 import styled from 'styled-components'
+import { first_section_texts } from './_data'
 import { localize } from 'components/localization'
 import { SectionContainer } from 'components/containers'
 import { Header } from 'components/elements'
 import device from 'themes/device'
-import { first_section_texts } from './_data'
 
 const FirstSectionContainer = styled(SectionContainer)`
     display: flex;

diff --git a/src/pages/about-us/_OurLeadership.tsx b/src/pages/about-us/_OurLeadership.tsx
@@ -1,12 +1,12 @@
 import React, { FocusEvent } from 'react'
 import styled from 'styled-components'
 import { graphql, useStaticQuery } from 'gatsby'
+import { ImageDataLike } from 'gatsby-plugin-image'
 import { localize, LocalizedLink } from 'components/localization'
 import { SectionContainer, Flex, CssGrid } from 'components/containers'
 import { Header, QueryImage, ImageWrapper } from 'components/elements'
 import { ImageWrapperProps } from 'components/elements/query-image'
 import device from 'themes/device'
-import { ImageDataLike } from 'gatsby-plugin-image'
 import Linkedin from 'images/svg/about-us/linkedin.svg'
 
 const query = graphql`

diff --git a/src/pages/about-us/_OurPrinciples.tsx b/src/pages/about-us/_OurPrinciples.tsx
@@ -1,11 +1,11 @@
 import React from 'react'
 import styled from 'styled-components'
+import { our_principles } from './_data'
 import { localize } from 'components/localization'
 import { SectionContainer, Flex, Box } from 'components/containers'
 import { Header, Divider } from 'components/elements'
 import device from 'themes/device'
 import { LinkButton } from 'components/form'
-import { our_principles } from './_data'
 
 const StyledSection = styled(SectionContainer)`
     display: flex;

diff --git a/src/pages/about-us/carousel/_Carousel.tsx b/src/pages/about-us/carousel/_Carousel.tsx
@@ -0,0 +1,194 @@
+import React, { useState, useEffect, useCallback } from 'react'
+import styled from 'styled-components'
+import { graphql, useStaticQuery } from 'gatsby'
+import { useEmblaCarousel } from 'embla-carousel/react'
+import { ImageDataLike } from 'gatsby-plugin-image'
+import { QueryImage } from 'components/elements'
+import device from 'themes/device'
+
+const queryCarouselData = graphql`
+    query {
+        media1: file(relativePath: { eq: "about-us-carousel/media-1.jpg" }) {
+            ...fadeIn
+        }
+        media2: file(relativePath: { eq: "about-us-carousel/media-2.jpg" }) {
+            ...fadeIn
+        }
+        media3: file(relativePath: { eq: "about-us-carousel/media-3.jpg" }) {
+            ...fadeIn
+        }
+        media4: file(relativePath: { eq: "about-us-carousel/media-4.jpg" }) {
+            ...fadeIn
+        }
+        media5: file(relativePath: { eq: "about-us-carousel/media-5.jpg" }) {
+            ...fadeIn
+        }
+        media6: file(relativePath: { eq: "about-us-carousel/media-6.jpg" }) {
+            ...fadeIn
+        }
+    }
+`
+
+const Carousel = styled.div`
+    position: relative;
+    margin-left: auto;
+    margin-right: auto;
+    padding-bottom: 50px;
+`
+
+type CarouselViewportType = {
+    isDragging: boolean
+}
+
+const CarouselViewport = styled.div<CarouselViewportType>`
+    overflow: hidden;
+    width: 100%;
+}
+`
+const CarouselContainer = styled.div`
+    display: flex;
+    user-select: none;
+    -webkit-touch-callout: none;
+    -khtml-user-select: none;
+    -webkit-tap-highlight-color: transparent;
+    margin-left: -10px;
+`
+
+const CarouselSlide = styled.div`
+    position: relative;
+    padding-left: 20px;
+
+    @media ${device.tablet} {
+        padding-left: 10px;
+    }
+
+    &:nth-child(1) {
+        min-width: 384px;
+
+        @media ${device.tablet} {
+            min-width: 328px;
+        }
+    }
+
+    &:nth-child(2) {
+        min-width: 792px;
+
+        @media ${device.tablet} {
+            min-width: 328px;
+        }
+    }
+
+    &:nth-child(3) {
+        min-width: 384px;
+
+        @media ${device.tablet} {
+            min-width: 328px;
+        }
+    }
+
+    &:nth-child(4) {
+        min-width: 792px;
+        @media ${device.tablet} {
+            min-width: 328px;
+        }
+    }
+
+    &:nth-child(5) {
+        min-width: 384px;
+
+        @media ${device.tablet} {
+            min-width: 192px;
+        }
+    }
+
+    &:nth-child(6) {
+        min-width: 384px;
+
+        @media ${device.tablet} {
+            min-width: 192px;
+        }
+    }
+`
+const StyledImageWrapper = styled.div`
+    position: relative;
+    overflow: hidden;
+    border-radius: 8px;
+    height: 480px;
+
+    @media ${device.tablet} {
+        height: 240px;
+    }
+`
+const StyledQueryImage = styled(QueryImage)`
+    position: absolute;
+    display: block;
+    top: 50%;
+    left: 50%;
+    min-height: 100%;
+    min-width: 100%;
+    height: 480px;
+    transform: translate(-50%, -50%);
+
+    @media ${device.tablet} {
+        height: 240px;
+    }
+
+    & .gatsby-image-wrapper img {
+        height: 480px;
+
+        @media ${device.tablet} {
+            height: 240px;
+        }
+    }
+`
+
+const EmblaCarousel = () => {
+    const carousel_data = useStaticQuery(queryCarouselData)
+    const carousel_images: ImageDataLike[] = [
+        carousel_data.media1,
+        carousel_data.media2,
+        carousel_data.media3,
+        carousel_data.media4,
+        carousel_data.media5,
+        carousel_data.media6,
+    ]
+
+    const [viewportRef, embla] = useEmblaCarousel({
+        containScroll: 'keepSnaps',
+        dragFree: true,
+        draggable: true,
+    })
+
+    const [, setPrevBtnEnabled] = useState(false)
+    const [, setNextBtnEnabled] = useState(false)
+
+    const onSelect = useCallback(() => {
+        if (!embla) return
+        setPrevBtnEnabled(embla.canScrollPrev())
+        setNextBtnEnabled(embla.canScrollNext())
+    }, [embla])
+
+    useEffect(() => {
+        if (!embla) return
+        embla.on('select', onSelect)
+        onSelect()
+    }, [embla, onSelect])
+
+    return (
+        <Carousel>
+            <CarouselViewport isDragging ref={viewportRef}>
+                <CarouselContainer>
+                    {carousel_images.map((carouselItem, index) => (
+                        <CarouselSlide key={index}>
+                            <StyledImageWrapper>
+                                <StyledQueryImage data={carouselItem} alt="" loading="lazy" />
+                            </StyledImageWrapper>
+                        </CarouselSlide>
+                    ))}
+                </CarouselContainer>
+            </CarouselViewport>
+        </Carousel>
+    )
+}
+
+export default EmblaCarousel
diff --git a/src/pages/about-us/index.tsx b/src/pages/about-us/index.tsx
@@ -1,16 +1,17 @@
 import React from 'react'
 import styled from 'styled-components'
-import { localize, WithIntl } from 'components/localization'
-import Layout from 'components/layout/layout'
-import { SEO } from 'components/containers'
-import device from 'themes/device'
 import MakeTrading from './_MakeTrading'
 import OurValues from './_OurValues'
 import OurPrinciples from './_OurPrinciples'
 import Hero from './components/_hero'
 import OurLeadership from './_OurLeadership'
 import AboutUsBanner from './_AboutUsBanner'
 import DerivNumbers from './_DerivNumbers'
+import EmblaCarousel from './carousel/_Carousel'
+import device from 'themes/device'
+import { SEO } from 'components/containers'
+import Layout from 'components/layout/layout'
+import { localize, WithIntl } from 'components/localization'
 
 const StartSeparator = styled.div`
     width: 0;
@@ -42,7 +43,7 @@ const AboutUs = (): React.ReactNode => {
                     'Deriv.com - A Binary.com brand, is a pioneer and award-winning online trading platform in the trading market.',
                 )}
             />
-            <Hero />
+            {/* <Hero /> */}
             <MakeTrading />
             <StartSeparator />
             <OurValues />
@@ -51,6 +52,7 @@ const AboutUs = (): React.ReactNode => {
             <OurLeadership />
             <AboutUsBanner />
             <DerivNumbers />
+            <EmblaCarousel />
         </Layout>
     )
 }

diff --git a/src/pages/our-principles/index.tsx b/src/pages/our-principles/index.tsx
@@ -1,11 +1,11 @@
 import React from 'react'
 import styled from 'styled-components'
+import { principles } from './_data'
 import Layout from 'components/layout/layout'
 import { Header, Text } from 'components/elements'
 import { SEO, Container, Flex, SectionContainer } from 'components/containers'
 import { localize, WithIntl } from 'components/localization'
 import device from 'themes/device'
-import { principles } from './_data'
 
 type SeparatorInterface = {
     background: string