Add custom 404 page (#3276)

website/pages/en/404.js

@@ -0,0 +1,42 @@
+const React = require("react");
+const siteConfig = require(`${process.cwd()}/siteConfig.js`);
+
+class ErrorPage extends React.Component {
+  getTrackingScript() {
+    if (!siteConfig.gaTrackingId) {
+      return null;
+    }
+
+    return {__html:`
+      ga('create', "${siteConfig.gaTrackingId}");
+      ga('send', {
+        hitType: 'event',
+        eventCategory: '404 Response',
+        eventAction: window.location.href,
+        eventLabel: document.referrer
+      });`
+    }
+  }
+
+  render() {
+    const trackingScript = this.getTrackingScript();
+
+    return (
+      <div className="error-page">
+      {trackingScript && <script dangerouslySetInnerHTML={trackingScript}/>}
+        <div className="error-message">
+          <div className=" error-message-container container">
+            <span>404 </span>
+            <p>Page Not Found.</p>
+            <a href="/">Return to the front page</a>
+          </div>
+        </div>
+      </div>
+    );
+  }
+}
+
+ErrorPage.title = "Page Not Found"
+
+
+module.exports = ErrorPage;

website/static/css/404.css

@@ -0,0 +1,34 @@
+.error-page .error-message-container {
+    margin-left: auto;
+    margin-right: auto;
+    padding-top: 40px;
+    max-width: 1400px;
+    width: 87%;
+}
+ .error-page .error-message {
+    min-height: 90vh;
+    background: white;
+}
+ .error-page .error-message span {
+    color: #764ABC;
+    font-size: 8.8em;
+    font-weight: 700;
+    display: inline-block;
+    margin-top: 10vh;
+    text-align: center;
+    display: block;
+}
+ .error-page .error-message p {
+    color: black;
+    margin-top: 50px;
+    font-size: 1.6em;
+    text-align: center;
+}
+
+.error-page .error-message a {
+   margin-bottom: 50px;
+   font-size: 1.6em;
+   text-align: center;
+   display: block;
+   text-decoration: underline;
+}