Add Toolbox Page and rename help page

common/config.js

@@ -9,7 +9,8 @@ export const getPageNames = (radar) => {
   return [
     'index',
     'overview',
-    'help',
+    'help-and-about-tech-radar',
+    'aoe-toolbox',
     ...quadrants,
     ...getItemPageNames(radar.items),
   ]

js/components/Header.js

@@ -66,7 +66,7 @@ class Header extends React.Component {
       >
         <div className="nav">
           <div className="nav__item">
-            <Link pageName="help" className="icon-link">
+            <Link pageName="help-and-about-tech-radar" className="icon-link">
               <span className="icon icon--question icon-link__icon"></span>How to Use Technology Radar?
             </Link>
           </div>

js/components/PageToolbox.js

@@ -0,0 +1,41 @@
+import React from 'react';
+import HeroHeadline from './HeroHeadline';
+import Fadeable from './Fadeable';
+import SetTitle from './SetTitle';
+
+export default function PageToolbox({ leaving, onLeave, ...props }) {
+  return (
+    <Fadeable leaving={leaving} onLeave={onLeave}>
+      <SetTitle {...props} title="Small AOE Toolbox" />
+      <HeroHeadline>Small AOE Toolbox</HeroHeadline>
+      <div className="fullpage-content">
+        <h3>Useful Tools</h3>
+        <p>
+          <ul>
+            <li>Fiddler - free web debugging proxy ( http://www.telerik.com/fiddler )</li>
+            <li>SoapUI - Webservice Test Tool (https://www.soapui.org/ )</li>
+            <li>Postman - API Test Tool ( https://www.getpostman.com/ )</li>
+            <li> Modelio  - Simple free UML Modelling tool ( https://www.modelio.org/ )</li>
+          </ul>
+        </p>
+        <h3>Useful Tools (commercial)</h3>
+        <p>
+          <ul>
+            <li> Paw Rest Client</li>
+          </ul>
+        </p>
+
+        <h3>Estabilshed Technologies</h3>
+        <p>
+          Not mentionable but adopted for a while now:
+          <ul>
+            <li>Jenkins</li>
+            <li>Redis</li>
+            <li>Varnish</li>
+            <li>Symfony2</li>
+          </ul>
+        </p>
+      </div>
+    </Fadeable>
+  );
+}

js/components/Router.js

@@ -2,6 +2,7 @@ import React from 'react';
 import PageIndex from './PageIndex';
 import PageOverview from './PageOverview';
 import PageHelp from './PageHelp';
+import PageToolbox from './PageToolbox';
 import PageQuadrant from './PageQuadrant';
 import PageItem from './PageItem';
 import { quadrants, getItemPageNames } from '../../common/config';
@@ -14,9 +15,12 @@ const getPageByName = (items, pageName) => {
   if (pageName === 'overview') {
     return PageOverview;
   }
-  if (pageName === 'help') {
+  if (pageName === 'help-and-about-tech-radar') {
     return PageHelp;
   }
+  if (pageName === 'aoe-toolbox') {
+    return PageToolbox;
+  }
   if (quadrants.includes(pageName)) {
     return PageQuadrant;
   }