New homepage banner design changes

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=""

src/assets/stylesheets/pages/_home.scss

@@ -504,7 +504,7 @@
 }
 
 .disruption-margin {
-  margin: 3.5rem 3.5rem !important;
+  margin: 1rem 1rem !important;
 }
 
 .slider {
@@ -674,6 +674,70 @@
   }
   @include media-breakpoint-down(sm) {
     min-height: 150px;
-    max-height: 150px
+    max-height: 150px;
   }
 }
+
+.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 bottom 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 bottom center;
+  background-size: cover;
+  flex-direction: column;
+  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;
+    }
+
+}

src/components/home/HomePageBanner.js

@@ -0,0 +1,75 @@
+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="banner-heading-font-weight-bold text-white text-center">
+                  INNOVATION & DISRUPTION
+                </h2>
+                <h5 className="banner-secondary-heading-font-weight-bold text-white">
+                  is the way We change the Game
+                </h5>
+                <a href="/contact_us">
+                  <img src={ContactUsBtnMob} alt="contact-us" />
+                </a>
+                <h6 className="text-white banner-normal-text">
+                    to change yours
+                </h6>
+            </div>
+            <div className="text-center banner-text">
+              <img src={SantaMob} alt="santa-mobile" style={{ transform: `rotate(-10deg)` }}/>
+            </div>
+            <TagLines />
+          </section>
+        ) : (
+          <section className="bg-light-gray justify-content-center">
+            <div className="banner-wrapper">
+                <h2 className="banner-heading-font-weight-bold text-white">
+                  INNOVATION & DISRUPTION
+                </h2>
+                <h5 className="banner-secondary-heading-font-weight-bold text-white">
+                  is the way We change the Game
+                </h5>
+                <a href="/contact_us">
+                  <img src={ContactUsBtn} alt="contact-us" />
+                </a>
+                <h6 className="text-white banner-normal-text">
+                    to change yours
+                </h6>
+            </div>
+            <div className="text-center">
+              <img src={Santa} alt="santa" style={{ transform: `rotate(-10deg)` }}/>
+            </div>
+            <TagLines />
+          </section>
+        )
+      }
+      </Media>
+  );
+}
+
+export default HomePageBanner;

src/components/home/domainExpertise.js

@@ -105,13 +105,6 @@ const DomainExpertise = props => {
 
   return (
     <Fragment>
-      <section className="gray-back justify-content-center">
-        <Row className="justify-content-around m-auto tech-list">
-          <Col md={8} xs={12} sm={12}>
-            <JoshCarousel items={carouselItems} settings={carouselSettings} />
-          </Col>
-        </Row>
-      </section>
       <section id="clientsSlide" className="section-home">
         <Heading1>Domain Expertise</Heading1>
         <Row className="justify-content-around m-auto">
@@ -145,25 +138,10 @@ const DomainExpertise = props => {
           <Col sm={2} md={3} />
         </Row>
       </section>
-      <section className="gray-back d-flex justify-content-center">
-        <Row className="d-xs-none w-55">
-          <Col>
-            <p className="text-center disruption-margin">
-              Disruption is not the future, it is the present. In an ever
-              evolving technological landscape, it is imperative for innovation
-              to win over the mundane, and that's exactly what we aim to
-              achieve.
-            </p>
-          </Col>
-        </Row>
-        <Row className="justify-content-center d-md-none m-auto w-100 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 imperative for innovation
-              to win over the mundane, and that's exactly what we aim to
-              achieve.
-            </p>
+      <section className="gray-back justify-content-center">
+        <Row className="justify-content-around m-auto tech-list">
+          <Col md={8} xs={12} sm={12}>
+            <JoshCarousel items={carouselItems} settings={carouselSettings} />
           </Col>
         </Row>
       </section>

src/components/home/homePageCarousal.js

@@ -82,6 +82,12 @@ HomePageCarousal.defaultProps = {
         title: "Gopher Guide",
         subTitle: "Past event."
       },
+      {
+        image: "gophercon",
+        name: "Gophercon 2020",
+        title: "Gophercon 2020",
+        subTitle: "Upcoming event."
+      },
     ]
 }
 

src/components/home/index.js

@@ -1,6 +1,6 @@
 import React from 'react'
 
-import HomePageCarousal from './homePageCarousal.js';
+import HomePageBanner from './HomePageBanner.js';
 import { Clients } from './clients.js';
 import Testimonials from './testimonials.js';
 import Company from "./company.js";
@@ -14,9 +14,8 @@ const Home = () => {
 
   return (
     <>
-      <div className="main-container" />
       <main id="page-wrap">
-        <HomePageCarousal />
+        <HomePageBanner />
         <DomainExpertise />
         <WhatWeDo />
         <Innovations />

src/components/home/testimonials.js

@@ -112,6 +112,12 @@ const Testimonial = (props) => {
 
 Testimonials.defaultProps = {
   testimonialData: [
+    {
+      "description": "At this moment I would like to take the opportunity to say thanks to the entire Josh Team who have been part of this journey. I must say that it has been the most comfortable engagements ever in my experience so far.",
+      "clientName": "Mr. Prakash Pandey",
+      "designation": "Head of Technology",
+      "projectName": "BCSG/Legalzoom UK"
+    },
     {
       "description": "Josh Team has been able to turnaround our CRM and mobile App by understanding our needs, engaging in continuous dialogue during development phase to align the output and giving a product which is working with wonderful speed and ease for our doctors and patients. Deeper listening, long term view, flexibility and timely output have been some qualities that have made this a mutually beneficial experience!",
       "clientName": "Dr. Pramod Tripathi",

src/components/testimonials/index.js

@@ -30,6 +30,15 @@ const TestimonialsList = (props) => {
 
 TestimonialsList.defaultProps = {
   testimonialList: [
+    {
+      "description": <div>
+        <p className="para-text">At this moment I would like to take the opportunity to say thanks to the entire Josh Team who have been part of this journey. I must say that it has been the most comfortable engagements ever in my experience so far.</p>
+        <p className="para-text">I must say I am thoroughly impressed with Josh team.  They have managed the expectation very well from the engagement perspective. They are technically very sound on the project as well as professional in delivering the output yet keeping things very informal and comfortable for the client.
+All in all, it was a thorough satisfying journey with Josh so far in my experience. </p></div>,
+      "clientName": "Mr. Prakash Pandey",
+      "designation": "Head of Technology",
+      "projectName": "BCSG/Legalzoom UK"
+    },
     {
       "description": <div>
         <p className="para-text">The search for a development partner can be a daunting task. You are not just looking for the right skill set and experience, you need a team you can trust. My search finished a little over 6 years ago when I found Josh. Since the early days of Brandscope, the Josh team have been with us all the way. They have worked with us, not for us, and have helped transform Brandscope into something we are all proud of.</p>