Move frontend pages to nested directory

app/src/frontend/app.tsx

@@ -6,23 +6,25 @@ import { parse } from 'query-string';
 import '../../node_modules/bootstrap/dist/css/bootstrap.min.css';
 import './app.css';
 
-import AboutPage from './about';
 import BuildingEdit from './building-edit';
 import BuildingView from './building-view';
-import MultiEdit from './multi-edit';
 import ColouringMap from './map';
 import Header from './header';
-import Overview from './overview';
 import Login from './login';
-import MyAccountPage from './my-account';
+import MultiEdit from './multi-edit';
+import Overview from './overview';
 import SignUp from './signup';
-import Welcome from './welcome';
-import { parseCategoryURL } from '../parse';
-import PrivacyPolicyPage from './privacy-policy';
-import ContributorAgreementPage from './contributor-agreement';
 import ForgottenPassword from './forgotten-password';
 import PasswordReset from './password-reset';
 
+import AboutPage from './pages/about';
+import ContributorAgreementPage from './pages/contributor-agreement';
+import MyAccountPage from './pages/my-account';
+import PrivacyPolicyPage from './pages/privacy-policy';
+import Welcome from './pages/welcome';
+
+import { parseCategoryURL } from '../parse';
+
 /**
  * App component
  *

app/src/frontend/pages/about.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 
-import SupporterLogos from './supporter-logos';
+import SupporterLogos from '../supporter-logos';
 import './about.css';
 
 const AboutPage = () => (

app/src/frontend/pages/contributor-agreement.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { Link } from 'react-router-dom';
 
-import InfoBox from './info-box';
+import InfoBox from '../info-box';
 
 const ContributorAgreementPage : React.SFC<any> = () => (
     <article>

app/src/frontend/pages/my-account.tsx

@@ -2,8 +2,8 @@ import React, { Component, FormEvent } from 'react';
 import { Link, Redirect } from 'react-router-dom';
 import PropTypes from 'prop-types';
 
-import ErrorBox from './error-box';
-import ConfirmationModal from './confirmation-modal';
+import ConfirmationModal from '../confirmation-modal';
+import ErrorBox from '../error-box';
 
 class MyAccountPage extends Component<any, any> { // TODO: add proper types
     static propTypes = { // TODO: generate propTypes from TS
@@ -86,7 +86,7 @@ class MyAccountPage extends Component<any, any> { // TODO: add proper types
                 credentials: 'same-origin'
             });
             const data = await res.json();
-            
+
             if(data.error) {
                 this.setState({ error: data.error });
             } else {

app/src/frontend/pages/privacy-policy.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { Link } from 'react-router-dom';
 
-import InfoBox from './info-box';
+import InfoBox from '../info-box';
 
 const PrivacyPolicyPage: React.SFC<any> = () => (
     <article>

app/src/frontend/pages/welcome.css

@@ -0,0 +1,23 @@
+/**
+ * Welcome jumbotron
+ */
+.welcome-float {
+    position: absolute;
+    z-index: 10000;
+    top: 0;
+    width: 100%;
+    border-radius: 0;
+    padding: 1.5em 2.5em 2.5em;
+}
+.welcome-float.jumbotron {
+    background: #fff;
+    background-color: rgba(255,255,255,0.95);
+}
+@media (min-width: 768px){
+    .welcome-float {
+        left: 50%;
+        margin-left: -22.5em;
+        width: 45em;
+        top: 1em;
+    }
+}

app/src/frontend/pages/welcome.tsx

@@ -0,0 +1,28 @@
+import React from 'react';
+import { Link } from 'react-router-dom';
+
+import './welcome.css';
+
+const Welcome = () => (
+    <div className="jumbotron welcome-float">
+        <h1 className="h1">Welcome to Colouring London</h1>
+
+        <p className="lead">
+        Colouring London is a citizen science platform collecting information on every
+        building in London, to help make the city more sustainable. We&rsquo;re building it at The
+        Bartlett Centre for Advanced Spatial Analysis, University College London.
+        </p>
+        <p className="lead">
+        Can you help us? We&rsquo;re still at an early stage of development, and we&rsquo;re looking for
+        volunteers of all ages and abilities to test and provide feedback on the site as we
+        build it.
+        </p>
+        <Link to="/view/age.html"
+            className="btn btn-outline-dark btn-lg btn-block">
+            Start Colouring Here!
+        </Link>
+        <img src="images/supporter-logos.png" alt="Colouring London collaborating organisations: The Bartlett UCL, Ordnance Survey, Historic England, Greater London Authority" />
+    </div>
+);
+
+export default Welcome;