Implemented a landing page for production (#1443)

Author: edwinjue

client/App.jsx

@@ -1,7 +1,9 @@
 import React, { useEffect } from 'react';
 import PropTypes from 'proptypes';
 import { connect } from 'react-redux';
-import { BrowserRouter as Router, Switch, Route } from 'react-router-dom';
+import {
+  BrowserRouter as Router, Switch, Route, Redirect,
+} from 'react-router-dom';
 import 'focus-visible';
 import { getMetadataRequest } from '@reducers/metadata';
 
@@ -12,8 +14,11 @@ import Header from '@components/main/header/Header';
 import Footer from '@components/main/footer/Footer';
 import StaticFooter from '@components/main/footer/StaticFooter';
 import { SnapshotRenderer } from '@components/export/SnapshotService';
+import MaintenanceMode from '@components/MaintenanceMode';
 import Routes from './Routes';
 
+const maintenanceMode = true;
+
 const App = ({
   getMetadata,
 }) => {
@@ -22,17 +27,28 @@ const App = ({
   });
 
   return (
-    <Router>
-      <RouteChange actions={actions} />
-      <Header />
-      <Routes />
-      <Switch>
-        <Route path="/(about|contact|privacy|faq)" component={StaticFooter} />
-        <Route path="/" component={Footer} />
-      </Switch>
-      <SnapshotRenderer />
-      <CookieNotice />
-    </Router>
+    maintenanceMode === true
+      ? (
+        <Router>
+          <Switch>
+            <Route path="/" component={MaintenanceMode} />
+            <Redirect to="/" />
+          </Switch>
+        </Router>
+      )
+      : (
+        <Router>
+          <RouteChange actions={actions} />
+          <Header />
+          <Routes />
+          <Switch>
+            <Route path="/(about|contact|privacy|faq)" component={StaticFooter} />
+            <Route path="/" component={Footer} />
+          </Switch>
+          <SnapshotRenderer />
+          <CookieNotice />
+        </Router>
+      )
   );
 };
 

client/components/MaintenanceMode/index.jsx

@@ -0,0 +1,20 @@
+import React from 'react';
+
+const MaintenanceMode = () => (
+  <div className="maintenance" role="banner">
+    <div className="maintenance-overlay-text">
+      <span className="text-311">311</span>
+      <span className="text-data">DATA</span>
+      <div className="maintenance-text">
+        <div>
+          <span>
+            311-Data.com is temporarily unavailable while we prepare for our new version.
+            Please check back again for our improved analytics tools. Thank you!
+          </span>
+        </div>
+      </div>
+    </div>
+  </div>
+);
+
+export default MaintenanceMode;