Mitra/Hotfixes for landing page

src/indexPage/react-components/binary-landing/Hero.jsx

@@ -38,7 +38,7 @@ const carouselSettings = {
 
 const Hero = () => {
     const renderContent = () => (
-        <div className='container-x_box-x left-x'>
+        <div className='hero-wrapper-container_box-binary hero-wrapper-container-left-binary'>
             <h1>{translate('We’re moving!')}</h1>
             <h2>
                 {translate('We’ve been')}<b>{translate(' Binary.com')}</b>{translate(' for 2 decades and it’s time for an exciting new chapter.')}
@@ -56,7 +56,7 @@ const Hero = () => {
     )
 
     const renderCarousel = () => (
-        <div className='container-x_box-x right-x'>
+        <div className='hero-wrapper-container_box-binary hero-wrapper-container-right-binary'>
             <Slider {...carouselSettings}>
                 {carouselImages.map((slide, index) => <img key={index} src={slide} />)}
             </Slider>
@@ -65,11 +65,11 @@ const Hero = () => {
 
 
     return (
-        <div className='background-x'>
-            <section className="container-x">
+        <div className='hero-wrapper'>
+            <section className="hero-wrapper-container">
                 {renderContent()}
                 {renderCarousel()}
-                <div className="logo-x">
+                <div className="hero-wrapper-container-logo-binary">
                     <img src="image/binary.png" />
                 </div>
             </section>

src/indexPage/react-components/binary-landing/SwitchSection.jsx

@@ -1,6 +1,5 @@
 import React from 'react';
 import { translate } from '../../../common/i18n';
-import { getOAuthURLDeriv } from '../../../common/appId';
 
 const SwitchSection = () => (
     <section className="switch">

src/indexPage/react-components/binary-landing/WaitSection.jsx

@@ -3,7 +3,7 @@ import { translate } from '../../../common/i18n';
 
 const WaitSection = () => (
     <section className='binary-wait-wrapper'>
-        <div className='binary-wait-wrapper-inner section-container'>
+        <div className='binary-wait-wrapper-inner binary-section-container'>
             <div className='binary-wait-wrapper-inner-content'>
                 <h1>{translate('Don’t wait')}</h1>
                 <h2>{translate('Future-proof your trading. Come over to Deriv now.')}</h2>
@@ -13,9 +13,9 @@ const WaitSection = () => (
                     </a>
                 </div>
             </div>
-            <img src="../image/dont-wait-image.png" className='binary-wait-wrapper-inner-placeholder-binary-desktop'/>
+            <img src="../image/dont-wait-image.png" className='binary-wait-wrapper-inner-placeholder-binary-desktop' />
             <div className='binary-wait-wrapper-inner-placeholder-binary'>
-                <img src="../image/dtrader-mobile.png"  className='binary-wait-wrapper-inner-placeholder-binary-mobile'/>
+                <img src="../image/dtrader-mobile.png" className='binary-wait-wrapper-inner-placeholder-binary-mobile' />
                 <h1>{translate('Come over to Deriv and future-proof your trading now.')}</h1>
             </div>
         </div>

static/css/_carousel.scss

@@ -86,7 +86,7 @@
         padding: 0.625rem 0.75rem 0.625rem 1rem;
         font-size: 0.875rem;
         font-weight: 700;
-        width: 8.18rem;
+        min-width: 8.18rem;
         color: #FF444F;
         background: #FFFFFF;
         border-radius: 6.25rem;
@@ -111,14 +111,19 @@
 
     &__btn_inner {
         display: flex;
-        gap: 0.5rem;
+        align-items: center;
+        justify-content: center;
+        height: 20px;
+        img {
+            margin-left: 0.5rem;
+        }
     }
 }
 
 .carousel_section__mobile .carousel_section__slide_card {
     flex-direction: column;
     max-width: 20.5rem;
-    max-height: 26.125rem;
+    max-height: 27rem;
     display: flex;
     text-align: center;
     outline: none;
@@ -145,6 +150,7 @@
 
     @include for-size(mobile) {
         top: 10.375rem;
+        margin-bottom: 0.2rem;
       }
 
 }
@@ -156,7 +162,7 @@
     margin-bottom: 0.5rem;
     @include for-size(mobile) {
       font: 700 1.3rem $font-IBM;
-      margin-bottom: 0.5rem;
+      margin: 0.5rem;
     }
 
   }

static/css/_landing-binary.scss

@@ -64,7 +64,6 @@ $header-color : #333333;
 }
 
 .binary-section-container {
-  padding: 0 2rem;
   margin: 0 auto;
   max-width: 1400px;
 
@@ -446,6 +445,8 @@ $header-color : #333333;
       justify-content: center;
       text-align: center;
       flex-direction: column;
+      box-shadow: inset 0px 1px 0px #f2f3f4;
+      margin-top: 2rem;
     }
 
     &-content {
@@ -731,7 +732,7 @@ $header-color : #333333;
 
 }
 
-.background-x {
+.hero-wrapper {
   display: flex;
   justify-content: center;
   align-items: center;
@@ -742,81 +743,82 @@ $header-color : #333333;
     background: $hero-BG url(../image/hero_mobile.png) no-repeat;
     background-size: cover;
   }
-}
-
-.container-x {
-  height: 100vh;
-  width: 100%;
-  max-width: 1440px;
-  display: flex;
-  flex: 1;
-  flex-direction: row;
-  padding: 0px 3rem;
-  gap: 2.4rem;
-
-  @include for-size(mobile) {
-    flex-direction: column-reverse;
-    padding: 1rem 1.4rem 0px 1.4rem;
-  }
-
-  &_box-x {
+  &-container{
+    height: 100vh;
+    width: 100%;
+    max-width: 1440px;
     display: flex;
     flex: 1;
-    flex-direction: column;
-    justify-content: center;
-  }
-
-  h1 {
-    color: #FFF;
-    margin: 2rem 2rem 2rem 0;
-    font: 700 5rem $font-IBM;
-
+    flex-direction: row;
+    padding: 0px 3rem;
+    gap: 2.4rem;
     @include for-size(mobile) {
-      font: 700 2rem $font-IBM;
-      margin: 0 0 1rem 0;
+      flex-direction: column-reverse;
+      padding: 1rem 1.4rem 0px 1.4rem;
+      gap: unset;
     }
-  }
-
-  h2 {
-    color: $white;
-    line-height: 40px;
-    margin-bottom: 2rem;
-    font: 400 2rem $font-IBM;
-
-    @include for-size(mobile) {
-      font: 400 1rem $font-IBM;
-      margin: 0 0 1.5rem 0;
+    &_box-binary {
+      display: flex;
+      flex: 1;
+      flex-direction: column;
+      justify-content: center;
+      h1 {
+        color: #FFF;
+        margin: 2rem 2rem 2rem 0;
+        font: 700 5rem $font-IBM;
+
+        @include for-size(mobile) {
+          font: 700 2rem $font-IBM;
+          margin: 0 0 1rem 0;
+        }
+      }
+
+      h2 {
+        color: $white;
+        line-height: 40px;
+        margin-bottom: 2rem;
+        font: 400 2rem $font-IBM;
+
+        @include for-size(mobile) {
+          font: 400 1rem $font-IBM;
+          margin: 0 0 1.5rem 0;
+        }
+      }
     }
-  }
-}
-
-.left-x {
-  align-items: start;
-
-  @include for-size(mobile) {
-    flex: 0;
-  }
-}
+    &-left-binary {
+      align-items: start;
+
+      @include for-size(mobile) {
+        flex: 0;
+      }
+    }
+
+    &-right-binary {
+      align-items: end;
+      min-width: 0px;
+
+      @include for-size(mobile) {
+        margin: 0 10%;
+      }
+    }
+    &-logo-binary {
+      display: none;
+      justify-content: center;
+
+      img {
+        width: 50%;
+      }
+
+      @include for-size(mobile) {
+        display: flex;
+      }
 
-.right-x {
-  align-items: end;
-  min-width: 0px;
+      @media only screen
 
-  @include for-size(mobile) {
-    margin: 0 10%;
-  }
+and (max-device-width: 375px) {
+
 }
-
-.logo-x {
-  display: none;
-  justify-content: center;
-
-  img {
-    width: 50%;
-  }
-
-  @include for-size(mobile) {
-    display: flex;
+    }
   }
 }
 

static/css/bot.scss

@@ -127,7 +127,7 @@ body {
     text-align: right;
     padding: 3px 20px;
     display: table;
-    @media (max-width: 400px) {
+    @media (max-width: 1024px) {
         min-height: 25px !important;
     }    
 }