feature(help): hard code help route

app/routes.js

@@ -5,12 +5,14 @@ import App from './routes/app'
 import Activity from './routes/activity'
 import Contacts from './routes/contacts'
 import Network from './routes/network'
+import Help from './routes/help'
 
 const routes = () => (
   <App>
     <Switch>
       <Route path='/contacts' component={Contacts} />
       <Route path='/network' component={Network} />
+      <Route path='/help' component={Help} />
       <Route path='/' component={Activity} />
     </Switch>
   </App>

app/routes/help/components/Help.js

@@ -0,0 +1,95 @@
+import { shell } from 'electron'
+import React, { Component } from 'react'
+import PropTypes from 'prop-types'
+
+import { MdSearch } from 'react-icons/lib/md'
+
+import styles from './Help.scss'
+
+class Help extends Component {
+  constructor(props) {
+    super(props)
+
+    this.state = {
+      videos: [
+        {
+          id: 'GYIHrd7e-n0',
+          title: 'Joyner Lucas - Mask Off Remix (Mask On)'
+        },
+        {
+          id: 'ZFy7RdZWwj8',
+          title: 'Joyner Lucas - Bank Account (Remix)'
+        },
+        {
+          id: 'DlFmfxACvig',
+          title: 'Lil Skies - Nowadays ft. Landon Cube (Dir. by @_ColeBennett_)'
+        },
+        {
+          id: 'XbZ0OXmXw38',
+          title: 'Dave - Wanna Know ft. Drake (Audio)'
+        },
+        {
+          id: 'sRrcogH7F_I',
+          title: 'Bryson Tiller - How About Now (Freestyle)'
+        },
+        {
+          id: 'j6Np8vCO0hQ',
+          title: 'Young Pappy - Killa (Official Music Video)'
+        },
+        {
+          id: 'PjqKPHZJgF0',
+          title: 'Lil Wayne - Family Feud feat. Drake (Official Audio) | Dedication 6'
+        }
+      ]
+    }
+  }
+
+  render() {
+    const { videos } = this.state
+    return (
+      <div className={styles.helpContainer}>
+        <header className={styles.header}>
+          <h1>Video tutorials</h1>
+        </header>
+
+        <div className={styles.search}>
+          <label className={`${styles.label} ${styles.input}`} htmlFor='helpSearch'>
+            <MdSearch />
+          </label>
+          <input
+            value={''}
+            onChange={event => console.log('gang')}
+            className={`${styles.text} ${styles.input}`}
+            placeholder='Search the video library...'
+            type='text'
+            id='helpSearch'
+          />
+        </div>
+
+        <ul className={styles.videos}>
+          {
+            videos.map((video, index) => {
+              return (
+                <li key={index}>
+                  <iframe
+                    src={`https://www.youtube.com/embed/${video.id}`}
+                    frameBorder='0'
+                  />
+                  <section className={styles.info} onClick={() => shell.openExternal(`https://www.youtube.com/watch?v=${video.id}`)}>
+                    <h2>{video.title}</h2>
+                  </section>
+                </li>
+              )
+            })
+          }
+        </ul>
+      </div>
+    )
+  }
+}
+
+Help.propTypes = {
+  
+}
+
+export default Help

app/routes/help/components/Help.scss

@@ -0,0 +1,88 @@
+@import '../../../variables.scss';
+
+.header {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  background: $lightgrey;
+  padding: 20px 40px;
+
+  h1 {
+    text-transform: uppercase;
+    font-size: 26px;
+    margin-right: 5px;
+  }
+}
+
+.search {
+  height: 55px;
+  padding: 2px 25px;
+  border-top: 1px solid $darkgrey;
+  border-bottom: 1px solid $darkgrey;
+  background: $white;
+
+  .input {
+    display: inline-block;
+    vertical-align: top;
+    height: 100%;
+  }
+
+  .label {
+    width: 5%;
+    line-height: 50px;
+    font-size: 20px;
+    text-align: center;
+    cursor: pointer;
+  }
+
+  .text {
+    width: 95%;
+    outline: 0;
+    padding: 0;
+    border: 0;
+    border-radius: 0;
+    height: 50px;
+    font-size: 16px;
+  }
+}
+
+.videos {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  justify-content: space-around;
+  padding: 20px 40px;
+
+  li {
+    position: relative;
+    width: 50%;
+    text-align: center;
+    margin: 20px 0;
+    width: 400px;
+    height: 400px;
+    transition: all 0.25s;
+
+    &:hover {
+      opacity: 0.5;
+
+      .info {
+        padding: 50px 15px;
+      }
+    }
+
+    iframe {
+      width: 100%;
+      height: 100%;
+    }
+
+    .info {
+      position: absolute;
+      bottom: 0;
+      width: calc(100% - 30px);
+      padding: 15px;
+      background: $darkgrey;
+      cursor: pointer;
+      transition: all 0.25s;
+    }
+  }
+}

app/routes/help/containers/HelpContainer.js

@@ -0,0 +1,10 @@
+import { withRouter } from 'react-router'
+import { connect } from 'react-redux'
+
+import Help from '../components/Help'
+
+const mapDispatchToProps = {}
+
+const mapStateToProps = state => ({})
+
+export default withRouter(connect(mapStateToProps, mapDispatchToProps)(Help))

app/routes/help/index.js

@@ -0,0 +1,3 @@
+import HelpContainer from './containers/HelpContainer'
+
+export default HelpContainer