Merge pull request #3614 from mitra-deriv/add-exclusively-on-deriv-section

Mitra/Add exclusively on deriv section

Author: habib-deriv

src/indexPage/react-components/bot-landing/Card.jsx

@@ -0,0 +1,57 @@
+import React from 'react';
+import { translate } from '../../../common/i18n';
+
+const CardSection = () => {
+    const cardContentArray = [
+        {
+            title  : translate('Trade multipliers'),
+            content: translate('Amplify your potential profit without risking more than your stake.'),
+            img    : 'image/multiplier.png',
+        },
+        {
+            title  : translate('Peer-to-peer payments'),
+            content: translate('Exchange your local currency with fellow traders to get funds in and out of your account with Deriv P2P.'),
+            img    : 'image/p2p.png',
+        },
+        {
+            title  : translate('Learn with Deriv Academy'),
+            content: translate('Enjoy complimentary articles and videos to help you learn the ropes of online trading.'),
+            img    : 'image/academy.png',
+        },
+        {
+            title  : translate('Crash/Boom indices'),
+            content: translate('Predict and potentially gain from exciting spikes and dips. Only available with multipliers on DTrader.'),
+            img    : 'image/crashboom.png',
+        },
+    ]
+
+    return (
+        <div className='card-container card-wrapper'>
+            <div className='section-container-holder card-wrapper-holder'>
+                <div className="container-header  card-wrapper-holder-header">
+                    <h1>{translate ('Exclusively on Deriv')}</h1>
+                    <h2>{translate('There’s a bright future ahead.')}</h2>
+                    <h2>{translate ('Find these bonus features and more on Deriv:')}</h2>
+                </div>
+            </div>
+            <div className="card-container card-wrapper-holder-container">
+                {cardContentArray.map((card, index) => {
+                    const { title, content,img } = card;
+                    return (
+                        <div className='card-wrapper-holder-container-content' key={index}>
+                            <div>
+                                <img src={img} />
+                            </div>
+                            <h1>{title}</h1>
+                            <h2>{content}</h2>
+                        </div>
+                    )
+                })
+                } 
+            </div>
+
+        </div>
+    )
+}
+
+export default CardSection;

src/indexPage/react-components/bot-landing/index.js

@@ -2,6 +2,7 @@ import React from 'react';
 import Hero from './Hero.jsx';
 import SwitchSection from './SwitchSection.jsx';
 import Carousel from './Carousel.jsx';
+import CardSection from './Card.jsx';
 import WaitSection from './WaitSection.jsx';
 import ChooseSection from './ChooseSection.jsx';
 import Footer from './Footer.jsx';
@@ -13,6 +14,7 @@ const BotLanding = () => (
         <SwitchSection />
         <Carousel />
         <ChooseSection />
+        <CardSection />
         <WaitSection />
         <Footer />
     </div>

static/css/_landing.scss

@@ -631,4 +631,88 @@ $header-color : #333333;
 
 .hidden{
   display: none !important;
-}
+}
+
+
+.card-container{
+  padding: 2rem 0rem 3rem 0rem;
+  margin: 0 auto;
+  max-width: 1400px;
+}
+
+.card-wrapper {
+  &-holder{
+    
+    &-header{
+      h1,h2 {
+        font: 700 3rem $font-IBM;
+        color: $header-color;
+        text-align: center;
+        line-height: 2.3rem;
+      }
+      h2 {
+        font: 400 1.4rem $font-IBM;
+        line-height: 0.8rem;
+      }
+      @include for-size(mobile) {
+      h1 {
+        font: 700 2rem $font-IBM;
+        @include for-size(mobile) {
+          margin-bottom: 1rem;
+        }
+      }
+      h2 {
+        line-height: 1.625rem;
+        @include for-size(mobile) {
+          margin-bottom: 0.2rem;
+        }
+      }
+      h2:last-child{
+        @include for-size(mobile) {
+          margin-top: 0;
+        }
+      }
+    }
+    }
+    &-container{
+      display: flex;
+      @include for-size(mobile) {
+        flex-direction: column;
+        align-items: center;
+      }
+      &-content
+      {
+        box-shadow: 0 4px 8px rgba(14, 14, 14, 0.1);
+        border-radius: 0.5rem;
+        margin: 0 1.5rem;
+        max-width: 282px;
+        max-height: 420px;
+
+        @include for-size(mobile) {
+          margin-bottom: 1.5rem;
+        }
+        img{
+          width: 100%;
+        }  
+       
+        h1 {
+          font: 700 1.5rem $font-IBM;
+          color: $header-color;
+          padding: 24px 32px 0;
+          text-align: center;
+        }
+        h2 {
+          font: 400 1rem $font-IBM;
+          color: $header-color;
+          padding: 0 2rem;
+          margin-top: 0;
+          text-align: center;
+      }
+
+      }
+    }
+  }
+
+}
+
+