add why us section

src/components/Home/WhyUs.js

+import React from "react";
+import WindowDimensions from "components/utils/WindowDimension";
+const Card = () => {
+  return (
+    <div className="why-card">
+      <figure className="image is-128x128">
+        <img
+          className="is-rounded"
+          src="https://bulma.io/images/placeholders/128x128.png"
+        />
+      </figure>
+      <h1 className="title">Connectivity</h1>
+      <p className="description" style={{ textAlign: "center" }}>
+        Connecting your device with NEXPIE IoT platform.
+      </p>
+    </div>
+  );
+};
+const WhyUS = ({ isMobileSized }) => {
+  return (
+    <div
+      className="section content-width"
+      style={{
+        flexDirection: "column",
+        alignItems: "center",
+        justifyContent: "space-evenly"
+      }}
+    >
+      <h1 className="title">Why choose NEXPIE </h1>
+      <p
+        className="descriptionStyle"
+        style={{ textAlign: "center", maxWidth: 1140 }}
+      >
+        NEXPIE provide the Internet of Things (IoT) technology tools for helping
+        your organization to achieve the most benefit in Commercial Marketing.
+      </p>
+      <div className="row">
+        <div className="why-bg" />
+        <Card />
+        <Card />
+        <Card />
+      </div>
+    </div>
+  );
+};
+
+export default WindowDimensions(WhyUS);

src/pages/Homepage.js

@@ -2,6 +2,7 @@ import React, { Component } from "react";
 import Banner from "../components/Home/Banner";
 import Banner from "../components/Home/Banner";
 import About from "../components/Home/About";
 import About from "../components/Home/About";
 import { Scroller, Section } from "react-fully-scrolled";
 import { Scroller, Section } from "react-fully-scrolled";
+import WhyUs from "components/Home/WhyUs";
 
 
 class Homepage extends Component {
 class Homepage extends Component {
   constructor(props) {
   constructor(props) {
@@ -44,7 +45,7 @@ class Homepage extends Component {
               background: "#00c4ff"
               background: "#00c4ff"
             }}
             }}
           >
           >
-            <h1>3</h1>
+            <WhyUs />
           </Section>
           </Section>
           <Section
           <Section
             style={{
             style={{

src/scss/_variables.scss

@@ -2,4 +2,5 @@
 $primary: #05366c;
 $primary: #05366c;
 $lightprimary: #0384ce;
 $lightprimary: #0384ce;
 $grey: #4a4a4a;
 $grey: #4a4a4a;
+$lightgrey: #858585;
 $white: #ffffff;
 $white: #ffffff;

src/scss/style.scss

@@ -22,9 +22,9 @@ body {
 .section {
 .section {
   padding: 20px;
   padding: 20px;
   width: 100%;
   width: 100%;
-  height: 100%;
-  display: "flex";
-  justify-content: "center";
+  height: 91%;
+  display: flex;
+  justify-content: center;
 }
 }
 .content-width {
 .content-width {
   width: 1396px;
   width: 1396px;
@@ -36,11 +36,46 @@ body {
 .descriptionStyle {
 .descriptionStyle {
   font-size: 22px;
   font-size: 22px;
   color: $grey;
   color: $grey;
+  font-weight: 100;
 }
 }
 .title {
 .title {
   font-size: 35px;
   font-size: 35px;
   color: $primary;
   color: $primary;
 }
 }
+.why-card {
+  width: 348px;
+  height: 399px;
+  border-radius: 6px;
+  box-shadow: 0 52px 85px 0 rgba(0, 0, 0, 0.09);
+  background-color: $white;
+  margin: 30px 30px;
+  z-index: 1;
+  padding: 40px;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-evenly;
+  align-items: center;
+  &.title {
+    font-size: 20px;
+    color: $grey;
+  }
+  &.description {
+    font-size: 16px;
+    color: $lightgrey;
+  }
+}
+.row {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-evenly;
+}
+.why-bg {
+  width: 93%;
+  height: 180px;
+  border-radius: 6px;
+  background-image: linear-gradient(276deg, #3473bf, #0891df);
+  position: absolute;
+}
 
 
 @media screen and (max-width: 1087px) {
 @media screen and (max-width: 1087px) {
   .navbar-menu {
   .navbar-menu {