Fix all homepage banner styling and images

joshsoftware · Dec 28, 2020 · a68c9ec · a68c9ec
1 parent 4e12eee
commit a68c9ec
Show file tree

Hide file tree

Showing 6 changed files with 70 additions and 46 deletions.
diff --git a/public/index.html b/public/index.html
@@ -34,10 +34,8 @@
       Limited
     </title>
     <!-- <link rel="stylesheet" href="styles/main.min.css" /> -->
-    <link
-      href="https://fonts.googleapis.com/css?family=Lato:100,300,400,700"
-      rel="stylesheet"
-    />
+    <link rel="preconnect" href="https://fonts.gstatic.com">
+    <link href="https://fonts.googleapis.com/css2?family=Lato:wght@100;300;400;700;900&display=swap" rel="stylesheet">
     <script
       type="text/javascript"
       async=""

diff --git a/src/assets/images/home/contact_us_btn.png b/src/assets/images/home/contact_us_btn.png
diff --git a/src/assets/images/home/contact_us_btn_mb.png b/src/assets/images/home/contact_us_btn_mb.png
diff --git a/src/assets/images/home/contact_us_mb.png b/src/assets/images/home/contact_us_mb.png
diff --git a/src/assets/stylesheets/pages/_home.scss b/src/assets/stylesheets/pages/_home.scss
@@ -504,7 +504,7 @@
 }
 
 .disruption-margin {
-  margin: 3.5rem 3.5rem !important;
+  margin: 1rem 1rem !important;
 }
 
 .slider {
@@ -678,15 +678,6 @@
   }
 }
 
-#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;
 }
@@ -713,6 +704,40 @@
   padding-bottom: 48px;
 }
 
+.banner-normal-text {
+  margin-top: -10px;
+  font-size: 16px;
+  line-height: 20px;
+  @include media-breakpoint-down(sm) {
+    margin-top: -4px;
+  }
+}
+
 .btn-banner-contact-us {
+  margin-bottom: 8px;
+}
+
+.banner-heading-font-weight-bold {
+  font-weight: 900;
+  font-size: 52px;
+  line-height: 62px;
+  margin-bottom: 24px;
+  @include media-breakpoint-down(sm) {
+    font-size: 30px;
+    line-height: 36px;
+    margin-bottom: 18px;
+  }
+}
+
+.banner-secondary-heading-font-weight-bold {
+  font-weight: 700;
+  line-height: 0px;
+  font-size: 24px;
+  margin-bottom: 24px;
+    @include media-breakpoint-down(sm) {
+      line-height: 16px;
+      font-size: 18px;
+      margin-bottom: 16px;
+    }
 
 }
diff --git a/src/components/home/HomePageBanner.js b/src/components/home/HomePageBanner.js
@@ -1,69 +1,70 @@
 import React from 'react';
 import { Row, Col } from 'reactstrap';
 import Santa from '../../assets/images/home/santa.png';
+import SantaMob from '../../assets/images/home/santa_mb.png';
+import ContactUsBtn from '../../assets/images/home/contact_us_btn.png';
+import ContactUsBtnMob from '../../assets/images/home/contact_us_btn_mb.png';
 import Media from 'react-media';
 
+const TagLines = () => {
+  return (
+    <Row className="justify-content-center">
+      <Col>
+        <p className="text-center disruption-margin">
+          Disruption is not the future, it is the present. In an ever evolving technological landscape, it is
+          <br/>
+          imperative for innovation to win over the mundane, and that's exactly what we aim to achieve.
+        </p>
+      </Col>
+    </Row>
+  )
+};
+
 const HomePageBanner = () => {
   return (
     <Media query="(max-width: 500px)">
       {matches =>
         matches ? (
           <section className="bg-light-gray justify-content-center">
             <div className="banner-wrapper-mb">
-                <h2 className="font-weight-bold text-white">
+                <h2 className="banner-heading-font-weight-bold text-white text-center">
                   INNOVATION & DISRUPTION
                 </h2>
-                <h5 className="font-weight-bold text-white">
+                <h5 className="banner-secondary-heading-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 href="/contact_us">
+                  <img src={ContactUsBtnMob} alt="contact-us" />
                 </a>
-                <h6 className="text-white">
+                <h6 className="text-white banner-normal-text">
                     to change yours
                 </h6>
             </div>
-            <div className="text-center banner-text" style={{ marginTop: '-4px' }}>
-              <img src={Santa} alt="santa-mobile" />
+            <div className="text-center banner-text">
+              <img src={SantaMob} alt="santa-mobile" style={{ transform: `rotate(-10deg)` }}/>
             </div>
-            <Row className="justify-content-center m-auto p-md-3">
-              <Col>
-                <p className="text-center disruption-margin">
-                  Disruption is not the future, it is the present. In an ever evolving technological landscape, it is
-                  <br/>
-                  imperative for innovation to win over the mundane, and that's exactly what we aim to achieve.
-                </p>
-              </Col>
-            </Row>
+            <TagLines />
           </section>
         ) : (
           <section className="bg-light-gray justify-content-center">
             <div className="banner-wrapper">
-                <h2 className="font-weight-bold text-white">
+                <h2 className="banner-heading-font-weight-bold text-white">
                   INNOVATION & DISRUPTION
                 </h2>
-                <h5 className="font-weight-bold text-white">
+                <h5 className="banner-secondary-heading-font-weight-bold text-white">
                   is the way We change the Game
                 </h5>
-                <a href="/contact_us" className="btn btn-danger rounded-pill mb-1 btn-banner-contact-us">
-                  Contact us
+                <a href="/contact_us">
+                  <img src={ContactUsBtn} alt="contact-us" />
                 </a>
-                <h6 className="text-white">
+                <h6 className="text-white banner-normal-text">
                     to change yours
                 </h6>
             </div>
-            <div className="text-center" style={{ marginTop: '-4px' }}>
-              <img src={Santa} alt="santa" />
+            <div className="text-center">
+              <img src={Santa} alt="santa" style={{ transform: `rotate(-10deg)` }}/>
             </div>
-            <Row className="justify-content-center m-auto p-md-3">
-              <Col>
-                <p className="text-center disruption-margin">
-                  Disruption is not the future, it is the present. In an ever evolving technological landscape, it is
-                  <br/>
-                  imperative for innovation to win over the mundane, and that's exactly what we aim to achieve.
-                </p>
-              </Col>
-            </Row>
+            <TagLines />
           </section>
         )
       }