From 4e12eee4ae7fe3b1b4e8ed0efe8c6babc05d5246 Mon Sep 17 00:00:00 2001
From: Payal Bhalerao <payal@joshsoftware.com>
Date: Thu, 24 Dec 2020 16:01:18 +0530
Subject: [PATCH] Add css for banner text

---
 src/assets/stylesheets/pages/_home.scss | 37 ++++++++++++++++++++++++-
 src/components/home/HomePageBanner.js   | 32 +++++++++++++--------
 src/components/home/index.js            |  1 -
 3 files changed, 56 insertions(+), 14 deletions(-)

diff --git a/src/assets/stylesheets/pages/_home.scss b/src/assets/stylesheets/pages/_home.scss
index fa47f6dc..15f7f724 100644
--- a/src/assets/stylesheets/pages/_home.scss
+++ b/src/assets/stylesheets/pages/_home.scss
@@ -674,10 +674,45 @@
   }
   @include media-breakpoint-down(sm) {
     min-height: 150px;
-    max-height: 150px
+    max-height: 150px;
+  }
+}
+
+#page-wrap {
+  @include media-breakpoint-down(sm) {
+    padding-top: 54px;
+  }
+  @include media-breakpoint-up(sm) {
+    padding-top: 76px;
   }
 }
 
 .bg-light-gray {
   background-color: $gray-96;
 }
+
+.banner-wrapper-mb {
+  height: 384px;
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  background: transparent url('../images/home/banner_mb.png') no-repeat top center;
+  background-size: cover;
+  flex-direction: column;
+  padding-bottom: 48px;
+}
+
+.banner-wrapper {
+  height: 384px;
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  background: transparent url('../images/home/banner.png') no-repeat top center;
+  background-size: cover;
+  flex-direction: column;
+  padding-bottom: 48px;
+}
+
+.btn-banner-contact-us {
+
+}
diff --git a/src/components/home/HomePageBanner.js b/src/components/home/HomePageBanner.js
index c5c848cc..54aa978d 100644
--- a/src/components/home/HomePageBanner.js
+++ b/src/components/home/HomePageBanner.js
@@ -1,7 +1,5 @@
 import React from 'react';
 import { Row, Col } from 'reactstrap';
-import Banner from '../../assets/images/home/banner.png';
-import BannerMob from '../../assets/images/home/banner_mb.png';
 import Santa from '../../assets/images/home/santa.png';
 import Media from 'react-media';
 
@@ -11,12 +9,23 @@ const HomePageBanner = () => {
       {matches =>
         matches ? (
           <section className="bg-light-gray justify-content-center">
-            <img src={BannerMob} alt="banner-mobile" />
-
-            <div className="text-center">
+            <div className="banner-wrapper-mb">
+                <h2 className="font-weight-bold text-white">
+                  INNOVATION & DISRUPTION
+                </h2>
+                <h5 className="font-weight-bold text-white">
+                  is the way We change the Game
+                </h5>
+                <a href="/contact_us" className="btn btn-xs btn-danger rounded-pill mb-1 btn-banner-contact-us">
+                  Contact us
+                </a>
+                <h6 className="text-white">
+                    to change yours
+                </h6>
+            </div>
+            <div className="text-center banner-text" style={{ marginTop: '-4px' }}>
               <img src={Santa} alt="santa-mobile" />
             </div>
-
             <Row className="justify-content-center m-auto p-md-3">
               <Col>
                 <p className="text-center disruption-margin">
@@ -29,23 +38,22 @@ const HomePageBanner = () => {
           </section>
         ) : (
           <section className="bg-light-gray justify-content-center">
-            <img src={Banner} alt="banner" />
-            <div className="text-center">
+            <div className="banner-wrapper">
                 <h2 className="font-weight-bold text-white">
                   INNOVATION & DISRUPTION
                 </h2>
-                <h5 className="text-white">
+                <h5 className="font-weight-bold text-white">
                   is the way We change the Game
                 </h5>
-                <a href="/contact_us" className="btn btn-danger rounded-pill btn-xs">
+                <a href="/contact_us" className="btn btn-danger rounded-pill mb-1 btn-banner-contact-us">
                   Contact us
                 </a>
                 <h6 className="text-white">
                     to change yours
                 </h6>
             </div>
-            <div className="text-center">
-              <img src={Santa} alt="santa-mobile" />
+            <div className="text-center" style={{ marginTop: '-4px' }}>
+              <img src={Santa} alt="santa" />
             </div>
             <Row className="justify-content-center m-auto p-md-3">
               <Col>
diff --git a/src/components/home/index.js b/src/components/home/index.js
index 1297b10d..ccc64297 100644
--- a/src/components/home/index.js
+++ b/src/components/home/index.js
@@ -14,7 +14,6 @@ const Home = () => {
 
   return (
     <>
-      <div className="main-container" />
       <main id="page-wrap">
         <HomePageBanner />
         <DomainExpertise />