[#49] Coming Soon page

src/_sass/coming_soon.scss

@@ -0,0 +1,27 @@
+.coming-soon {
+  .container-fluid {
+    padding-top: 220px;
+    background-image: url(../assets/images/coming_soon.png);
+    background-position: top center;
+    background-repeat: no-repeat;
+    background-size: cover;
+    background-color: #fff;
+    text-align: center;
+    min-height: 800px;
+  }
+
+  h1 {
+    font-size: 6em;
+  }
+
+  .dml-logo {
+    width: 250px;
+    height: 150px;
+    background-image: url(../assets/images/DML-Logo-web-150x-high.png);
+    background-position: top center;
+    background-repeat: no-repeat;
+    background-size: cover;
+    text-indent: -9999px;
+    margin: 0 auto;
+  }
+}

src/_sass/shared.scss

@@ -0,0 +1,3 @@
+.dml-button {
+
+}

src/css/main.scss

@@ -2,3 +2,4 @@
 ---
 
 @import "background";
+@import "coming_soon";

webpack/components/ComingSoonLayout.jsx

@@ -0,0 +1,22 @@
+import React from 'react';
+
+export default class ComingSoonLayout extends React.Component {
+  static get propTypes() {
+    return {
+      children: React.PropTypes.any
+    };
+  }
+
+  render() {
+    return (
+      <div className="page-wrap coming-soon">
+
+        <div className="container-fluid">
+          <div className="wrapper">
+            { this.props.children }
+          </div>
+        </div>
+      </div>
+    );
+  }
+}

webpack/components/Footer.jsx

@@ -8,7 +8,7 @@ export default class Footer extends React.Component {
   render() {
     const _displayFooterItem = Object.keys(nav).map((key, index) => {
       return (
-        <LinkContainer to={ '/' + key } key={ index }><a eventKey={ index }>{ nav[key] }</a></LinkContainer>
+        <LinkContainer to={ '/wip/' + key } key={ index }><a eventKey={ index }>{ nav[key] }</a></LinkContainer>
       );
     });
 

webpack/components/Nav.jsx

@@ -8,7 +8,7 @@ export default class Nav extends React.Component {
   render() {
     const _displayNavItem = Object.keys(nav).map((key, index) => {
       return (
-        <LinkContainer to={ '/' + key } key={ index }><NavItem eventKey={ index }>{ nav[key] }</NavItem></LinkContainer>
+        <LinkContainer to={ '/wip/' + key } key={ index }><NavItem eventKey={ index }>{ nav[key] }</NavItem></LinkContainer>
       );
     });
 

webpack/components/Root.jsx

@@ -1,6 +1,9 @@
 import React from 'react';
 import { Router, Route, IndexRoute, hashHistory } from 'react-router';
 
+import ComingSoonLayout from './ComingSoonLayout.jsx';
+import ComingSoon from './pages/ComingSoon.jsx';
+
 import Layout from './Layout.jsx';
 import About from './pages/About.jsx';
 import Contact from './pages/Contact.jsx';
@@ -16,8 +19,11 @@ module.exports = React.createClass({
   render() {
     return (
       <Router history={ hashHistory }>
-        <Route path="/" component={ Layout }>
-          <IndexRoute component={ Home } />
+        <Route path="/" component={ ComingSoonLayout }>
+          <IndexRoute component={ ComingSoon } />
+        </Route>
+
+        <Route path="/wip" component={ Layout }>
           <Route path="home" component={ Home }/>
           <Route path="about" component={ About }/>
           <Route path="contact" component={ Contact }/>

webpack/components/pages/ComingSoon.jsx

@@ -0,0 +1,25 @@
+import React from 'react';
+import { PageHeader } from 'react-bootstrap-4';
+
+import { comingSoon } from '../../copy/coming_soon.js';
+import DMLButton from '../shared/DMLButton.jsx';
+
+export default class ComingSoon extends React.Component {
+  render() {
+    return (
+      <div className="container">
+        <PageHeader className="title">{ comingSoon.title }</PageHeader>
+
+        <div className="dml-logo">
+          Draw My Life logo
+        </div>
+
+        <p>{ comingSoon.tagline }</p>
+
+        <DMLButton buttonText={ comingSoon.callToActionText } buttonURL={ comingSoon.callToActionURL } />
+
+        <div dangerouslySetInnerHTML={ comingSoon.description } />
+      </div>
+    );
+  }
+}

webpack/components/shared/DMLButton.jsx

@@ -0,0 +1,18 @@
+import React from 'react';
+
+export default class DMLButton extends React.Component {
+  static get propTypes() {
+    return {
+      buttonText: React.PropTypes.string,
+      buttonURL: React.PropTypes.string
+    };
+  }
+
+  render() {
+    return (
+      <div>
+        <a className="btn btn-primary dml-button" href={ this.props.buttonURL } role="button">{ this.props.buttonText }</a>
+      </div>
+    );
+  }
+}

webpack/copy/coming_soon.js

@@ -0,0 +1,11 @@
+export const comingSoon = {
+  title:    'Coming Soon',
+  tagline:    'A Perception of Migration Through Anonymised Childrens\' Drawings & Data',
+  callToActionText: 'Contact Us',
+  callToActionURL: 'mailto:drawmylife@empowerhack.com',
+  description: {__html: `
+      <p>How can the humanitarian community strengthen and understand the voice of child refugees?</p>
+      <p>Draw My Life is inspired by how childrens' art therapy in the field can become a basis for better data around the needs and experience of refugee children.</p>
+      <p>Read more about us and other projects at <a href="http://empowerhack.io/#drawmylife">EmpowerHack</a>.</p>
+  `}
+};