fix header bug, add about section

src/components/Header.js

@@ -88,7 +88,7 @@ class HeaderComponent extends Component {
     const { open } = this.state;
     const { open } = this.state;
     return (
     return (
       <Navbar
       <Navbar
-        fixed={"top"}
+        // fixed={"top"}
         transparent={true}
         transparent={true}
         active={open}
         active={open}
         style={{ padding: "0.5rem 2rem" }}
         style={{ padding: "0.5rem 2rem" }}

src/components/Home/About.js

 import React from "react";
 import React from "react";
+import WindowDimensions from "components/utils/WindowDimension";
 
 
-export default class About extends React.Component {
-  render() {
+const About = ({ isMobileSized }) => {
   return (
   return (
-      <>
-        <div>test</div>
-      </>
+    <div
+      style={{
+        display: "flex",
+        flexDirection: isMobileSized ? "column" : "row",
+        height: "90%"
+      }}
+      className="content-width section"
+    >
+      {isMobileSized ? null : <div style={{ flex: 1 }} />}
+
+      <div
+        style={{
+          flex: 1,
+          padding: isMobileSized ? "10px 20px" : "60",
+          display: "flex",
+          flexDirection: "column",
+          justifyContent: "space-evenly"
+        }}
+      >
+        <h1 className="title">About Nexpie IOT Platform</h1>
+        <p className="descriptionStyle">
+          Connecting everything - everywhere with IoT platform to improve your
+          business productive and efficiency for creates best opportunities to
+          your organization in new Technology era unlike anything before.
+        </p>
+        <p className="descriptionStyle">
+          NEXPIE IoT Platform provides tools and software libraries that
+          accelerates the IoT development process, so developers can spend more
+          time innovating and less time worrying about administration of
+          back-end servers and data storage.
+        </p>
+      </div>
+    </div>
   );
   );
-  }
-}
+};
+
+export default WindowDimensions(About);

src/components/Home/Banner.js

 import React from "react";
 import React from "react";
-import { FormattedMessage } from "react-intl";
 
 
 export default class Banner extends React.Component {
 export default class Banner extends React.Component {
   render() {
   render() {
@@ -10,7 +9,7 @@ export default class Banner extends React.Component {
           background: "linear-gradient(to right bottom, #194db7, #3fd4e6)"
           background: "linear-gradient(to right bottom, #194db7, #3fd4e6)"
         }}
         }}
       >
       >
-        <div style={{ marginTop: 60 }}>
+        <div className="content-width">
           <h1
           <h1
             style={{
             style={{
               fontSize: 72,
               fontSize: 72,

src/components/utils/WindowDimension.js

+import React, { Component } from "react";
+
+export default function WindowDimensions(WrappedComponent) {
+  return class extends Component {
+    state = { width: 0, height: 0 };
+
+    componentDidMount() {
+      this.updateWindowDimensions();
+      window.addEventListener("resize", this.updateWindowDimensions);
+    }
+
+    componentWillUnmount() {
+      window.removeEventListener("resize", this.updateWindowDimensions);
+    }
+
+    updateWindowDimensions = () => {
+      this.setState({ width: window.innerWidth, height: window.innerHeight });
+    };
+
+    render() {
+      return (
+        <WrappedComponent
+          {...this.props}
+          windowWidth={this.state.width}
+          windowHeight={this.state.height}
+          isMobileSized={this.state.width < 770}
+        />
+      );
+    }
+  };
+}

src/pages/Homepage.js

 import React, { Component } from "react";
 import React, { Component } from "react";
-import { FullPage, Slide } from "react-full-page";
 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";
@@ -16,9 +15,7 @@ class Homepage extends Component {
 
 
   render() {
   render() {
     const baseStyle = {
     const baseStyle = {
-      // alignItems: 'center',
       display: "flex",
       display: "flex",
-
       justifyContent: "stretch"
       justifyContent: "stretch"
     };
     };
 
 

src/scss/_variables.scss

+// color
+$primary: #05366c;
+$lightprimary: #0384ce;
+$grey: #4a4a4a;
+$white: #ffffff;

src/scss/style.scss

 @import "~react-bulma-components/src/index.sass";
 @import "~react-bulma-components/src/index.sass";
-
+@import "_variables.scss";
 // @import '../../node_modules/bulma/bulma.sass';
 // @import '../../node_modules/bulma/bulma.sass';
 // @import '../../node_modules/bulma/sass/utilities/_all.sass';
 // @import '../../node_modules/bulma/sass/utilities/_all.sass';
 // @import '../../node_modules/bulma/sass/base/_all.sass';
 // @import '../../node_modules/bulma/sass/base/_all.sass';
@@ -15,16 +15,31 @@ body {
 }
 }
 
 
 .button.is-white {
 .button.is-white {
-  background-color: white;
+  background-color: $white;
   border-color: transparent;
   border-color: transparent;
-  color: #4a4a4a;
+  color: $grey;
 }
 }
 .section {
 .section {
   padding: 20px;
   padding: 20px;
   width: 100%;
   width: 100%;
   height: 100%;
   height: 100%;
   display: "flex";
   display: "flex";
-  justify-content: "stretch";
+  justify-content: "center";
+}
+.content-width {
+  width: 1396px;
+  max-width: 100%;
+  margin: 0 auto;
+  position: relative;
+  padding: 0 15px;
+}
+.descriptionStyle {
+  font-size: 22px;
+  color: $grey;
+}
+.title {
+  font-size: 35px;
+  color: $primary;
 }
 }
 
 
 @media screen and (max-width: 1087px) {
 @media screen and (max-width: 1087px) {
@@ -32,6 +47,12 @@ body {
     box-shadow: 0 8px 16px rgba(10, 10, 10, 0);
     box-shadow: 0 8px 16px rgba(10, 10, 10, 0);
   }
   }
 }
 }
+
+@media screen and (max-width: 768px) {
+  .descriptionStyle {
+    font-size: 18px;
+  }
+}
 // .dropdown-item {
 // .dropdown-item {
 // 	display: 'flex';
 // 	display: 'flex';
 // 	flex: 1;
 // 	flex: 1;