1. top banner component seperated out

M-ZubairAhmed · M-ZubairAhmed · commit 319277445567 · 2017-10-22T08:47:49.000+05:30
2. top-banner included in events and space page
diff --git a/components/top-banner.js b/components/top-banner.js
@@ -0,0 +1,25 @@
+import React from 'react';
+
+export default props => (
+  <div>
+    <div>
+      <div className="top_banner_root">
+        <h1 className="top_banner_headline">{props.pageTitle}</h1>
+        <h2>{props.pageSubTitle}</h2>
+      </div>
+      <style jsx>{`
+        .top_banner_root {
+          background-color: #f4f7fb;
+          min-height: 200px;
+          text-align: center;
+        }
+        .top_banner_headline {
+          padding-top: 20px;
+          font-size: 4em;
+          color: #df1cb5;
+          font-weight: 900;
+        }
+      `}</style>
+    </div>
+  </div>
+);
diff --git a/pages/events.js b/pages/events.js
@@ -3,6 +3,7 @@ import fetch from 'isomorphic-unfetch';
 import { Card, Divider, Dimmer, Loader } from 'semantic-ui-react';
 
 import publicPage from '../hocs/public-page';
+import TopBanner from '../components/top-banner';
 import { baseEventsURL, futureEventsURL, pastEventsURL } from '../utils/urls';
 import RowEvent from '../components/row-events';
 
@@ -98,10 +99,10 @@ class Events extends React.Component {
   render() {
     return (
       <div>
-        <div className="top_banner_root">
-          <h1 className="top_banner_headline">Events</h1>
-          <h2>Because you cannot change the world alone</h2>
-        </div>
+        <TopBanner
+          pageTitle="Events"
+          pageSubTitle="Because you cannot change the world alone"
+        />
         <main>
           {this.state.loading ? (
             <Dimmer active>
@@ -124,17 +125,6 @@ class Events extends React.Component {
             align-items: center;
             flex-direction: column;
           }
-          .top_banner_root {
-            background-color: #f4f7fb;
-            min-height: 200px;
-            text-align: center;
-          }
-          .top_banner_headline {
-            padding-top: 20px;
-            font-size: 4em;
-            color: #df1cb5;
-            font-weight: 900;
-          }
         `}</style>
       </div>
     );
diff --git a/pages/space.js b/pages/space.js
@@ -1,19 +1,23 @@
 import React from 'react';
 
-import Icon from '../components/icon';
+import TopBanner from '../components/top-banner';
 import publicPage from '../hocs/public-page';
 
 export default publicPage(() => (
   <div>
-    <main>
-      <Icon />
-      <h3>Under Construction, Coming Soon!...</h3>
-    </main>
+    <TopBanner
+      pageTitle="Space"
+      pageSubTitle="Physical spaces for collaboration, peer-learning and self-learning"
+    />
+    <main>llll</main>
     <style jsx>{`
       main {
+        background-color: #ffffff;
+        padding-top: 30px;
+        padding-bottom: 30px;
+        padding-left: 30px;
+        padding-right: 30px;
         min-height: calc(100vh - 70px);
-        background: #f4f7fb;
-        color: #314159;
         display: flex;
         justify-content: center;
         align-items: center;
