Feature/add 404 route

frontend/src/App.js

@@ -4,6 +4,7 @@ import ptBr from 'moment/locale/pt-br';
 import {
   Router,
   Route,
+  Switch,
 } from 'react-router-dom';
 import ReactGA from 'react-ga';
 import createHistory from 'history/createBrowserHistory';
@@ -14,6 +15,7 @@ import About from './containers/About';
 import Contact from './containers/Contact';
 import Results from './containers/Results';
 import Login from './containers/Login';
+import NotFound from './containers/NotFound';
 import ForgotPassword from './containers/ForgotPassword';
 import ResetPassword from './containers/ResetPassword';
 import OrganizationProfile from './containers/OrganizationProfile';
@@ -65,16 +67,19 @@ initGA(history);
 const App = () => (
   <Router history={history}>
     <div className="App">
-      <Route exact path="/" component={Home} />
-      <Route exact path="/sobre" component={About} />
-      <Route exact path="/contato" component={Contact} />
-      <Route exact path="/busca/:searchParams" component={Results} />
-      <Route exact path="/entidade/:organizationId" component={OrganizationProfile} />
-      <Route exact path="/detalhes/:requestId" component={Home} />
-      <Route exact path="/login" component={Login} />
-      <Route exact path="/esqueci-senha" component={ForgotPassword} />
-      <Route exact path="/complete-registration/:token" component={ResetPassword} />
-      <Route exact path="/recover-password/:token" component={ResetPassword} />
+      <Switch>
+        <Route exact path="/" component={Home} />
+        <Route exact path="/sobre" component={About} />
+        <Route exact path="/contato" component={Contact} />
+        <Route exact path="/busca/:searchParams" component={Results} />
+        <Route exact path="/entidade/:organizationId" component={OrganizationProfile} />
+        <Route exact path="/detalhes/:requestId" component={Home} />
+        <Route exact path="/login" component={Login} />
+        <Route exact path="/esqueci-senha" component={ForgotPassword} />
+        <Route exact path="/complete-registration/:token" component={ResetPassword} />
+        <Route exact path="/recover-password/:token" component={ResetPassword} />
+        <Route component={NotFound} />
+      </Switch>
     </div>
   </Router>
 );

frontend/src/containers/NotFound/NotFound.js

@@ -0,0 +1,33 @@
+import React from 'react';
+import { Row, Col } from 'antd';
+import { Link } from 'react-router-dom';
+import Layout from '../../components/Layout';
+import styles from './styles.module.scss';
+
+const NotFound = () => (
+  <Layout>
+    <Row>
+      <Col
+        xl={{ span: 14, offset: 5 }}
+        lg={{ span: 16, offset: 4 }}
+        md={{ span: 20, offset: 2 }}
+        sm={{ span: 22, offset: 1 }}
+        xs={{ span: 22, offset: 1 }}
+      >
+        <div className={styles.sectionWrapper}>
+          <h1 className={styles.title}>404</h1><br />
+          <h2>
+            O link que você clicou parece estar quebrado ou a página pode ter sido removida.
+          </h2>
+          <h3>
+            Visite nossa <Link to="/" className={styles.link}>Página Inicial</Link> ou
+            &nbsp;<Link to="/contato" className={styles.link}>entre em contato</Link> conosco
+            para relatar um problema.
+          </h3>
+        </div>
+      </Col>
+    </Row>
+  </Layout>
+);
+
+export default NotFound;

frontend/src/containers/NotFound/index.js

@@ -0,0 +1,3 @@
+import NotFound from './NotFound';
+
+export default NotFound;

frontend/src/containers/NotFound/styles.module.scss

@@ -0,0 +1,41 @@
+require('../../utils/styles/colors.js');
+@import 'src/utils/styles/common.scss';
+
+h1 {
+    display: flex;
+    margin-top: 20px;
+    padding-bottom: 0;
+    margin-bottom: 0;
+    color: $grey_500;
+}
+
+h2 {
+    font-size: 130%;
+    text-align: center;
+    margin-top: 10px;
+    color: $grey_500;
+}
+
+h3 {
+    text-align: center;
+    color: $grey_500;
+}
+
+.sectionWrapper {
+    display: flex;
+    flex-direction: column;
+    margin-top: 80px;
+}
+
+.title {
+    display: flex;
+    flex-direction: column;
+    font-size: 600%;
+    font-weight: bolder;
+    text-align: center
+}
+
+.link {
+    text-decoration: underline;
+    color: $pink_800;
+}