diff --git a/.all-contributorsrc b/.all-contributorsrc
new file mode 100644
index 000000000..e774e4384
--- /dev/null
+++ b/.all-contributorsrc
@@ -0,0 +1,229 @@
+{
+  "projectName": "coderplex",
+  "projectOwner": "coderplex",
+  "files": [
+    "README.md"
+  ],
+  "imageSize": 100,
+  "commit": true,
+  "contributors": [
+    {
+      "login": "vinaypuppal",
+      "name": "Vinay Puppal",
+      "avatar_url": "https://avatars1.githubusercontent.com/u/8843216?v=4",
+      "profile": "https://www.vinaypuppal.com/",
+      "contributions": [
+        "bug",
+        "code",
+        "ideas",
+        "review"
+      ]
+    },
+    {
+      "login": "M-ZubairAhmed",
+      "name": "Md_ZubairAhmed",
+      "avatar_url": "https://avatars2.githubusercontent.com/u/17708702?v=4",
+      "profile": "https://in.linkedin.com/in/mzubairahmed",
+      "contributions": [
+        "bug",
+        "code",
+        "doc",
+        "example",
+        "ideas",
+        "plugin",
+        "review",
+        "test",
+        "question"
+      ]
+    },
+    {
+      "login": "pbteja1998",
+      "name": "P Bhanu Teja",
+      "avatar_url": "https://avatars3.githubusercontent.com/u/17903466?v=4",
+      "profile": "https://github.com/pbteja1998",
+      "contributions": [
+        "question",
+        "bug",
+        "code",
+        "ideas"
+      ]
+    },
+    {
+      "login": "saiabhijitht",
+      "name": "Sai Abhijith",
+      "avatar_url": "https://avatars0.githubusercontent.com/u/23223985?v=4",
+      "profile": "https://github.com/saiabhijitht",
+      "contributions": [
+        "design",
+        "ideas",
+        "review"
+      ]
+    },
+    {
+      "login": "duttakapil",
+      "name": "Kapil Dutta",
+      "avatar_url": "https://avatars1.githubusercontent.com/u/6577624?v=4",
+      "profile": "http://duttakapil.github.io/",
+      "contributions": [
+        "bug",
+        "ideas",
+        "review"
+      ]
+    },
+    {
+      "login": "shivakrishna9",
+      "name": "Shiva Krishna Yadav",
+      "avatar_url": "https://avatars0.githubusercontent.com/u/15874356?v=4",
+      "profile": "https://github.com/shivakrishna9",
+      "contributions": [
+        "code",
+        "doc"
+      ]
+    },
+    {
+      "login": "VineethKanaparthi",
+      "name": "Vineeth Kanaparthi",
+      "avatar_url": "https://avatars2.githubusercontent.com/u/14841940?v=4",
+      "profile": "https://github.com/VineethKanaparthi",
+      "contributions": [
+        "doc"
+      ]
+    },
+    {
+      "login": "buoyantair",
+      "name": "buoyantair",
+      "avatar_url": "https://avatars2.githubusercontent.com/u/5159834?v=4",
+      "profile": "https://github.com/buoyantair",
+      "contributions": [
+        "code"
+      ]
+    },
+    {
+      "login": "jberry93",
+      "name": "Jeffrey Berry",
+      "avatar_url": "https://avatars2.githubusercontent.com/u/5133505?v=4",
+      "profile": "https://github.com/jberry93",
+      "contributions": [
+        "code"
+      ]
+    },
+    {
+      "login": "HerrVoennchen",
+      "name": "Sebastian",
+      "avatar_url": "https://avatars2.githubusercontent.com/u/6535023?v=4",
+      "profile": "https://github.com/HerrVoennchen",
+      "contributions": [
+        "code"
+      ]
+    },
+    {
+      "login": "hafiz703",
+      "name": "Hafiz T",
+      "avatar_url": "https://avatars3.githubusercontent.com/u/15249170?v=4",
+      "profile": "https://github.com/hafiz703",
+      "contributions": [
+        "code"
+      ]
+    },
+    {
+      "login": "rkaranam",
+      "name": "Raja Sekhar Karanam",
+      "avatar_url": "https://avatars0.githubusercontent.com/u/13974570?v=4",
+      "profile": "https://github.com/rkaranam",
+      "contributions": [
+        "doc"
+      ]
+    },
+    {
+      "login": "cg-cnu",
+      "name": "sreenivas alapati",
+      "avatar_url": "https://avatars0.githubusercontent.com/u/2767425?v=4",
+      "profile": "https://twitter.com/CgCnu",
+      "contributions": [
+        "code"
+      ]
+    },
+    {
+      "login": "luixlacrux",
+      "name": "Luis Lacruz",
+      "avatar_url": "https://avatars0.githubusercontent.com/u/11747818?v=4",
+      "profile": "https://about.me/luislacruz",
+      "contributions": [
+        "code"
+      ]
+    },
+    {
+      "login": "majidmazin",
+      "name": "Mazin Majid",
+      "avatar_url": "https://avatars0.githubusercontent.com/u/32811957?v=4",
+      "profile": "https://github.com/majidmazin",
+      "contributions": [
+        "doc"
+      ]
+    },
+    {
+      "login": "loangelak",
+      "name": "loangelak",
+      "avatar_url": "https://avatars0.githubusercontent.com/u/22547780?v=4",
+      "profile": "https://github.com/loangelak",
+      "contributions": [
+        "code"
+      ]
+    },
+    {
+      "login": "hur",
+      "name": "Atte Niemi",
+      "avatar_url": "https://avatars0.githubusercontent.com/u/4998544?v=4",
+      "profile": "http://twitter.com/HursCode",
+      "contributions": [
+        "code"
+      ]
+    },
+    {
+      "login": "tdeschryver",
+      "name": "tdeschryver",
+      "avatar_url": "https://avatars1.githubusercontent.com/u/28659384?v=4",
+      "profile": "https://github.com/tdeschryver",
+      "contributions": [
+        "code"
+      ]
+    },
+    {
+      "login": "aliciaphes",
+      "name": "Alicia Perez",
+      "avatar_url": "https://avatars1.githubusercontent.com/u/5432702?v=4",
+      "profile": "http://www.linkedin.com/in/aliciapr",
+      "contributions": [
+        "code"
+      ]
+    },
+    {
+      "login": "abiduzz420",
+      "name": "abiduzz420",
+      "avatar_url": "https://avatars2.githubusercontent.com/u/18336304?v=4",
+      "profile": "https://medium.com/@abiduzair420",
+      "contributions": [
+        "code",
+        "talk"
+      ]
+    },
+    {
+      "login": "thepriefy",
+      "name": "thepriefy",
+      "avatar_url": "https://avatars2.githubusercontent.com/u/10849586?v=4",
+      "profile": "https://github.com/thepriefy",
+      "contributions": [
+        "code"
+      ]
+    },
+    {
+      "login": "aravindballa",
+      "name": "Aravind Balla",
+      "avatar_url": "https://avatars0.githubusercontent.com/u/8036315?v=4",
+      "profile": "http://aravindballa.com",
+      "contributions": [
+        "review"
+      ]
+    }
+  ]
+}
diff --git a/.babelrc b/.babelrc
index f39067037..557c60187 100644
--- a/.babelrc
+++ b/.babelrc
@@ -12,9 +12,9 @@
   },
   "plugins": [
     [
-      "lodash",
+      "emotion",
       {
-        "id": ["lodash", "semantic-ui-react"]
+        "inline": true
       }
     ]
   ]
diff --git a/.editorconfig b/.editorconfig
new file mode 100644
index 000000000..1a62086d8
--- /dev/null
+++ b/.editorconfig
@@ -0,0 +1,9 @@
+root = true
+
+[*]
+indent_style = space
+indent_size = 2
+end_of_line = lf
+charset = utf-8
+trim_trailing_whitespace = false
+insert_final_newline = false
\ No newline at end of file
diff --git a/CODE_OF_CONDUCT.md b/.github/CODE_OF_CONDUCT.md
similarity index 100%
rename from CODE_OF_CONDUCT.md
rename to .github/CODE_OF_CONDUCT.md
diff --git a/.github/CONTRIBUTING.md b/.github/CONTRIBUTING.md
new file mode 100644
index 000000000..39a32038c
--- /dev/null
+++ b/.github/CONTRIBUTING.md
@@ -0,0 +1,223 @@
+# How to Contribute
+
+Coderplex web application comprises of two repositories :
+
+* [Coderplex](https://github.com/coderplex/coderplex) : Frontend of the application
+
+* [Coderplex-Backend](https://github.com/coderplex/coderplex-backend) : Backend of the application
+
+## Table Of Contents
+
+<!-- START doctoc generated TOC please keep comment here to allow auto update -->
+<!-- DON'T EDIT THIS SECTION, INSTEAD RE-RUN doctoc TO UPDATE -->
+<!-- DON'T EDIT THIS SECTION, INSTEAD RE-RUN doctoc TO UPDATE -->
+
+- [Code of Conduct](#code-of-conduct)
+- [Open Development](#open-development)
+- [Branching Model](#branching-model)
+- [Development Workflow](#development-workflow)
+  - [Work on Issues](#work-on-issues)
+  - [Proposing a Change](#proposing-a-change)
+  - [Prerequisites](#prerequisites)
+  - [Sending a Pull Request](#sending-a-pull-request)
+    - [Running Locally](#running-locally)
+    - [Before submitting](#before-submitting)
+    - [Add yourself as a contributor](#add-yourself-as-a-contributor)
+    - [Submitting PullRequest](#submitting-pullrequest)
+    - [After submitting](#after-submitting)
+      - [Received a review request](#received-a-review-request)
+  - [How to get in touch](#how-to-get-in-touch)
+- [Appendix](#appendix)
+  - [Node Version Manager](#node-version-manager)
+    - [nvm for Linux & macOS](#nvm-for-linux--macos)
+    - [nvm-windows for Windows](#nvm-windows-for-windows)
+  - [Local host occupied](#local-host-occupied)
+
+<!-- END doctoc generated TOC please keep comment here to allow auto update -->
+
+## Code of Conduct
+
+Coderplex has adopted [Contributor Covenant](https://github.com/coderplex/coderplex/blob/develop/.github/CODE_OF_CONDUCT.md) that we expect project participants to adhere to.
+
+## Open Development
+
+All work related to the application takes place on Github itself. We use [Issues](https://github.com/coderplex/coderplex/issues) to track bugs, discuss ideas and to engage open source contributors. [Projects](https://github.com/coderplex/coderplex/projects) are used to keep track of everything and is our project management tool. We maintain [Wiki](https://github.com/coderplex/coderplex/wiki) for structuring our long term thoughts. Both core team members and contributors sends a pull request which goes through the same review process. Whole process is as transparent as it can be and we strive to keep it that way.
+
+## Branching Model
+
+The `master` branch of coderplex is relatively stable branch which we update for every release. We also have auto deployment in place for that particular branch i.e any changes in that branch gets reflected in [https://coderplex.org](https://coderplex.org). It is highly recommended for both maintainers and contributors to raise a pull request to `develop` branch. Before every release we throughly test develop branch and merge into master.
+
+![Imgur](https://i.imgur.com/KPO2dLul.png)
+
+_A pull request to any other branch may most likely be closed by our bots_.
+
+## Development Workflow
+
+We welcome pull requests from beginners and seasoned javaScript developers alike!
+
+### Work on Issues
+
+1. Find an issue that needs assistance by searching for the [open issues](https://github.com/coderplex/coderplex/labels/help-wanted).
+1. If you decide to fix an issue, please be sure to check the comment thread in case somebody is already working on a fix. If nobody is working on it at the moment, please leave a comment stating that you intend to work on it so other people don’t accidentally duplicate your effort.
+1. If somebody claims an issue but doesn’t follow up for more than a weeks, it’s fine to take over it but you should still leave a comment.
+
+### Proposing a Change
+
+1. Open a new issue if you would like report a bug or suggest improvements.
+1. Please wait for core team members to comment on the thread. This lets us reach an agreement on your proposal before you put significant effort into it.
+
+### Prerequisites
+
+1. [NodeJS](https://nodejs.org/)
+
+   * Minimum version v8.0.0+
+
+   ```bash
+   # To check node version
+   node -v
+   ```
+
+   Any lower version than mentioned above may results in this [error](https://github.com/coderplex/coderplex/issues/100).
+
+   > If you face problem updating your node then you might need a Node version manager tool. [Follow here](#node-version-manager)
+
+1. [Yarn](https://yarnpkg.com)
+
+   * Minimum version v1.2.0+
+   * Installing instructions are at [official docs](https://yarnpkg.com/en/docs/install#windows-tab). Use yarn over npm
+
+   > Our team's official policy (for now) is: We only use [Yarn](https://yarnpkg.com/en/docs/install) as our official Node package manager, and so we request you to use Yarn instead of npm and commit `yarn.lock` file.
+
+1. [Git](https://git-scm.com/download/linux) (Familiarity with git is mandatory).
+
+### Sending a Pull Request
+
+*Working on your first Pull Request? You can learn how from this *free* series [How to Contribute to an Open Source Project on GitHub](https://egghead.io/series/how-to-contribute-to-an-open-source-project-on-github)*
+
+#### Running Locally
+
+1. Fork the [repository](https://github.com/coderplex/coderplex).
+1. Then clone your forked repository
+   ```bash
+    git clone <your forked repository url>
+   ```
+1. Move to the repository root folder
+   ```bash
+    cd coderplex
+   ```
+1. Install dependencies
+   ```bash
+    yarn
+   ```
+1. Start the development server
+   ```bash
+    yarn dev
+   ```
+   App now opens at `localhost:3000` in your default browser.
+   > You may get this [error](#local-host-occupied) if any other app is already running the above port.
+
+#### Before submitting
+
+1. From your fork, create a [branch](https://help.github.com/articles/creating-and-deleting-branches-within-your-repository/) and name it. eg. `typo-in-readme`
+1. If you’ve fixed a bug or added code that should be tested, add tests!
+1. Ensure that all test pass
+   ```bash
+    yarn test
+   ```
+1. Run code formatters
+   ```bash
+    yarn lint
+   ```
+1. Add and commit your code. Please give meaning full commit messages.
+
+#### Add yourself as a contributor
+
+This project follows the [all-contributors](https://github.com/kentcdodds/all-contributors) specification. Contributions of any kind welcome!
+
+To add yourself to the table of contributors on the `README.md`, please use the automated script as part of your PR:
+
+```bash
+yarn run add-contributor
+```
+
+Follow the prompt and commit `.all-contributorsrc` and `README.md` in the PR.
+
+#### Submitting PullRequest
+
+1. Pull latest code from [upstream repository's](https://help.github.com/articles/merging-an-upstream-repository-into-your-fork/)`develop`, if in case anything new were merged while you were working on your fork.
+1. Push the code to your fork.
+1. Raise the pull request from your created branch to `develop` branch of coderplex. [why develop instead of master branch?](https://www.atlassian.com/git/tutorials/comparing-workflows)
+1. Take some time to give a brief description of the work you have done.
+
+#### After submitting
+
+1. Wait for all checks to pass in below section.
+1. Your changes are deployed with a unique link `https://deploy-preview-xx--coderplex.netlify.com`.
+
+   _`- xx` is your pull request number._
+
+1. The core team will review your pull request and either merge it, request changes to it, or close it with an explanation.
+
+##### Received a review request
+
+* Work on the requested changes
+* Push the changes as you did earlier, the pull request will automatically catch those and update itself.
+
+### How to get in touch
+
+* Coderplex [Discord Channel](https://discord.gg/dVnQ2Gf)
+* Tweet core team members :
+  * Vinay Puppal [@VinayPuppal](https://twitter.com/vinaypuppal)
+  * Md-ZubairAhmed [@Md_ZubairAhmed](https://twitter.com/Md_ZubairAhmed)
+
+## Appendix
+
+### Node Version Manager
+
+#### [nvm](https://github.com/creationix/nvm) for Linux & macOS
+
+```bash
+# Installation
+curl -o- https://raw.githubusercontent.com/creationix/nvm/v0.33.6/install.sh | bash
+
+# Install latest node lts
+nvm install --lts
+
+# Use installed version
+nvm use --lts
+
+# Run the app in the same terminal session
+```
+
+_Make sure you have [curl](https://curl.haxx.se/) installed_
+
+#### [nvm-windows](https://github.com/coreybutler/nvm-windows) for Windows
+
+It comes with an [installer](https://github.com/coreybutler/nvm-windows#installation--upgrades).
+
+```bash
+# Install particular version
+nvm install 8.9.1
+
+# Use installed version
+nvm use 8.9.1
+```
+
+Still facing problem this [article](https://medium.com/appseed-io/how-to-run-multiple-versions-of-node-js-with-nvm-for-windows-ffbe5c7a2b47) from [@skounis](https://twitter.com/skounis) explain in details.
+
+### Local host occupied
+
+```js
+Error: listen EADDRINUSE :::3000
+    at Object._errnoException (util.js:1024:11)
+    at _exceptionWithHostPort (util.js:1046:20)
+    at Server.setupListenHandle [as _listen2] (net.js:1351:14)
+    at listenInCluster (net.js:1392:12)
+    at Server.listen (net.js:1476:7)
+    at app.prepare.then (/home/m-zubairahmed/github/official/coderplex-frontend/server.js:26:6)
+    at <anonymous>
+    at process._tickCallback (internal/process/next_tick.js:188:7)
+error Command failed with exit code 1.
+```
+
+If you get this error while running `yarn dev` then probably another app is occupying `localhost:3000`. You may want to close that and run the command again.
diff --git a/.github/ISSUE_TEMPLATE.md b/.github/ISSUE_TEMPLATE.md
new file mode 100644
index 000000000..4b7dc2ef2
--- /dev/null
+++ b/.github/ISSUE_TEMPLATE.md
@@ -0,0 +1,41 @@
+<!--- Provide a general summary of the issue in the Title above -->
+
+<!--
+    Thank you very much for contributing to coderplex by creating an issue! ❤️
+    To avoid duplicate issues we ask you to check off the following list
+-->
+
+<!-- Checked checkbox should look like this: [x] -->
+
+* [ ] I have searched the [issues](https://github.com/coderplex/coderplex/issues) of this repository and believe that this is not a duplicate.
+
+# Expected Behavior
+
+<!--- If you're describing a bug, tell us what should happen -->
+
+<!--- If you're suggesting a change/improvement, tell us how it should work -->
+
+# Current Behavior
+
+<!--- If describing a bug, tell us what happens instead of the expected behavior -->
+
+<!--- If suggesting a change/improvement, explain the difference from current behavior -->
+
+## Steps to Reproduce (for bugs)
+
+<!--- Provide unambiguous set of steps to -->
+
+<!--- reproduce this bug. Include screenshot, if relevant -->
+
+1. <!-- Step 1 -->
+1. <!-- Step 2 -->
+
+## Your Environment
+
+<!--- Include as many relevant details about the environment you experienced the bug in -->
+
+| Tech    | Version |
+| ------- | ------- |
+| OS      |         |
+| browser |         |
+| etc     |         |
diff --git a/.github/PULL_REQUEST_TEMPLATE.md b/.github/PULL_REQUEST_TEMPLATE.md
new file mode 100644
index 000000000..60aa30dc9
--- /dev/null
+++ b/.github/PULL_REQUEST_TEMPLATE.md
@@ -0,0 +1,45 @@
+<!--
+    Thank you very much for contributing to coderplex by creating an PR! ❤️
+-->
+
+<!--
+Please make sure you are familiar with and follow the instructions in the
+contributing guidelines (found in the CONTRIBUTING.md file).
+
+Please fill out the information below to expedite the review and (hopefully)
+merge of your pull request!
+-->
+
+<!-- Is it a Bug fix, feature, docs update, ... -->
+
+# What kind of change does this PR introduce
+
+<!-- You can also link to an open issue here -->
+
+## What is the current behavior
+
+<!-- if this is a feature change -->
+
+## What is the new behavior
+
+<!-- Have you done all of these things?  -->
+
+### Checklist for this PR
+
+<!-- add "N/A" to the end of each line that's irrelevant to your changes -->
+
+<!-- to check an item, place an "x" in the box like so: "- [x] Documentation" -->
+
+* [ ] I have read [contributing guidelines](https://github.com/coderplex/coderplex/blob/develop/.github/CONTRIBUTING.md).
+* [ ] I executed `yarn lint` locally to format my code.
+* [ ] I added revelant Tests to verify my code.
+* [ ] All tests `yarn test` ran successfully.
+* [ ] Pull request is towards `develop` branch.
+* [ ] I have tested responsiveness of the UI by checking on devices using [ScreenFly](http://quirktools.com/screenfly/) <!--If change is related to UI then tick this checkbox otherwise mention N/A-->
+* [ ] Added myself to contributors table <!-- this is optional, see the contributing guidelines for instructions -->
+* [ ] Documentation
+* [ ] Ready to be merged <!-- In your opinion, is this ready to be merged as soon as it's reviewed? -->
+
+<!-- feel free to add additional comments -->
+
+<!-- Thank you for contributing! -->
diff --git a/.gitignore b/.gitignore
index d05f5f2d1..7a82b5398 100644
--- a/.gitignore
+++ b/.gitignore
@@ -45,10 +45,7 @@ node_modules
 
 # IDE - VSCode
 .vscode/*
-!.vscode/settings.json
-!.vscode/tasks.json
-!.vscode/launch.json
-!.vscode/extensions.json
+jsconfig.json
 
 ### Linux ###
 *~
diff --git a/.markdownlint.json b/.markdownlint.json
new file mode 100644
index 000000000..25b022d75
--- /dev/null
+++ b/.markdownlint.json
@@ -0,0 +1,6 @@
+{
+  "line-length": false,
+  "ul-style": false,
+  "no-inline-html": false,
+  "first-line-h1": false
+}
diff --git a/.prettierignore b/.prettierignore
new file mode 100644
index 000000000..466e24805
--- /dev/null
+++ b/.prettierignore
@@ -0,0 +1 @@
+out/
\ No newline at end of file
diff --git a/.prettierrc b/.prettierrc
new file mode 100644
index 000000000..a3042a80a
--- /dev/null
+++ b/.prettierrc
@@ -0,0 +1,8 @@
+{
+  "printWidth": 120,
+  "semi": true,
+  "trailingComma": "es5",
+  "singleQuote": true,
+  "jsxBracketSameLine": true,
+  "proseWrap": never
+}
diff --git a/.yarnclean b/.yarnclean
new file mode 100644
index 000000000..b591611ea
--- /dev/null
+++ b/.yarnclean
@@ -0,0 +1,45 @@
+# test directories
+__tests__
+test
+tests
+powered-test
+
+# asset directories
+docs
+doc
+website
+images
+assets
+
+# examples
+example
+examples
+
+# code coverage directories
+coverage
+.nyc_output
+
+# build scripts
+Makefile
+Gulpfile.js
+Gruntfile.js
+
+# configs
+appveyor.yml
+circle.yml
+codeship-services.yml
+codeship-steps.yml
+wercker.yml
+.tern-project
+.gitattributes
+.editorconfig
+.*ignore
+.eslintrc
+.jshintrc
+.flowconfig
+.documentup.json
+.yarn-metadata.json
+.travis.yml
+
+# misc
+*.md
diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md
deleted file mode 100644
index 87a55e60c..000000000
--- a/CONTRIBUTING.md
+++ /dev/null
@@ -1,29 +0,0 @@
-# Contribution guidlines
-
-We welcome pull requests from hackerspace members (our students) and seasoned JavaScript developers alike! Follow these steps to contribute:
-
-1. Find an issue that needs assistance by searching for the [Help Wanted](https://github.com/coderplex/coderplex/labels/help-wanted) tag.
-
-1. Let us know you are working on it by posting a comment on the issue.
-
-1. Follow the [Contribution Guidelines](#contribution-guidelines) to start working on the issue.
-
-Remember to feel free to ask for help in our [Discord](https://discordapp.com/invite/dVnQ2Gf) rooms.
-
-Working on your first Pull Request? You can learn how from this *free* series [How to Contribute to an Open Source Project on GitHub](https://egghead.io/series/how-to-contribute-to-an-open-source-project-on-github)
-
-## Running this project locally
-
-1. Make sure you have [NodeJS](https://nodejs.org/) and [Yarn](https://yarnpkg.com/en/docs/install) installed.
-    > Make sure you install node version 8 or above and check node version by running `node -v`
-1. Then clone this repo
-    ```bash
-    git clone https://github.com/coderplex/coderplex.git
-    ```
-1. `cd coderplex`
-1. `npm install`
-1. `npm run dev` to start local development server
-1. App opens at `localhost:3000`
-
-**Note:**
-> So our team's official policy (for now) is: We only use [Yarn](https://yarnpkg.com/en/docs/install) as our official Node package manager, and so we request you to use Yarn instead of npm and commit yarn.lock file.
diff --git a/README.md b/README.md
index 6958413d8..db216cac4 100644
--- a/README.md
+++ b/README.md
@@ -1,20 +1,34 @@
-# Coderplex Website [Work In Progress]
+# Coderplex Website
 
-[![Greenkeeper badge](https://badges.greenkeeper.io/coderplex/coderplex.svg)](https://greenkeeper.io/)
-[![XO code style](https://img.shields.io/badge/code_style-XO-5ed9c7.svg)](https://github.com/sindresorhus/xo)
-[![styled with prettier](https://img.shields.io/badge/styled_with-prettier-ff69b4.svg)](https://github.com/prettier/prettier)
-[![Build Status](https://travis-ci.org/coderplex/coderplex.svg?branch=master)](https://travis-ci.org/coderplex/coderplex)
-[![License](https://img.shields.io/badge/License-BSD%203--Clause-blue.svg)](https://github.com/coderplex/coderplex/blob/master/LICENSE)
+[![Build Status](https://travis-ci.org/coderplex/coderplex.svg?branch=master)](https://travis-ci.org/coderplex/coderplex) [![styled with prettier](https://img.shields.io/badge/styled_with-prettier-ff69b4.svg)](https://github.com/prettier/prettier) [![XO code style](https://img.shields.io/badge/code_style-XO-5ed9c7.svg)](https://github.com/sindresorhus/xo) [![Greenkeeper badge](https://badges.greenkeeper.io/coderplex/coderplex.svg)](https://greenkeeper.io/) [![All Contributors](https://img.shields.io/badge/all_contributors-22-orange.svg?style=flat-square)](#contributors) [![License](https://img.shields.io/badge/License-BSD%203--Clause-blue.svg)](https://github.com/coderplex/coderplex/blob/master/LICENSE)
+
+## Follow our community here at [https://www.coderplex.org](https://www.coderplex.org)
+
+> :construction: under active development, you can check progress at [https://dev.coderplex.org](https://dev.coderplex.org) which will be merged soon to main site
 
 ## About
 
 This project mainly uses
 
-- [Next.js](https://github.com/zeit/next.js/)
-- [Semantic UI React](http://react.semantic-ui.com/introduction)
-
-### [Join our community here](https://www.coderplex.org)
+* [ReactJS](https://reactjs.org/) - A declarative, efficient, and flexible JavaScript library for building user interfaces.
+* [Next.js](https://github.com/zeit/next.js/) - A minimalistic framework for server-rendered React applications.
+* [emotion](https://emotion.sh) - A high performance, lightweight css-in-js library.
 
 ## Contributing
 
-We welcome pull requests from hackerspace members (our students) and seasoned JavaScript developers alike! Please follow [these steps](CONTRIBUTING.md) to contribute.
+We welcome pull requests from beginners and seasoned javaScript developers alike!. You can work on open issues, fix bugs and more. Be sure to read our [contributing guide](https://github.com/coderplex/coderplex/blob/develop/.github/CONTRIBUTING.md). This project follows the [all-contributors](https://github.com/kentcdodds/all-contributors) specification. Contributions of any kind welcome!.
+
+## Contributors
+
+Thanks goes to these wonderful people ([emoji key](https://github.com/kentcdodds/all-contributors#emoji-key)):
+
+<!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section -->
+
+<!-- prettier-ignore -->
+| [<img src="https://avatars1.githubusercontent.com/u/8843216?v=4" width="100px;"/><br /><sub><b>Vinay Puppal</b></sub>](https://www.vinaypuppal.com/)<br />[🐛](https://github.com/coderplex/coderplex/issues?q=author%3Avinaypuppal "Bug reports") [💻](https://github.com/coderplex/coderplex/commits?author=vinaypuppal "Code") [🤔](#ideas-vinaypuppal "Ideas, Planning, & Feedback") [👀](#review-vinaypuppal "Reviewed Pull Requests") | [<img src="https://avatars2.githubusercontent.com/u/17708702?v=4" width="100px;"/><br /><sub><b>Md_ZubairAhmed</b></sub>](https://in.linkedin.com/in/mzubairahmed)<br />[🐛](https://github.com/coderplex/coderplex/issues?q=author%3AM-ZubairAhmed "Bug reports") [💻](https://github.com/coderplex/coderplex/commits?author=M-ZubairAhmed "Code") [📖](https://github.com/coderplex/coderplex/commits?author=M-ZubairAhmed "Documentation") [💡](#example-M-ZubairAhmed "Examples") [🤔](#ideas-M-ZubairAhmed "Ideas, Planning, & Feedback") [🔌](#plugin-M-ZubairAhmed "Plugin/utility libraries") [👀](#review-M-ZubairAhmed "Reviewed Pull Requests") [⚠️](https://github.com/coderplex/coderplex/commits?author=M-ZubairAhmed "Tests") [💬](#question-M-ZubairAhmed "Answering Questions") | [<img src="https://avatars3.githubusercontent.com/u/17903466?v=4" width="100px;"/><br /><sub><b>P Bhanu Teja</b></sub>](https://github.com/pbteja1998)<br />[💬](#question-pbteja1998 "Answering Questions") [🐛](https://github.com/coderplex/coderplex/issues?q=author%3Apbteja1998 "Bug reports") [💻](https://github.com/coderplex/coderplex/commits?author=pbteja1998 "Code") [🤔](#ideas-pbteja1998 "Ideas, Planning, & Feedback") | [<img src="https://avatars0.githubusercontent.com/u/23223985?v=4" width="100px;"/><br /><sub><b>Sai Abhijith</b></sub>](https://github.com/saiabhijitht)<br />[🎨](#design-saiabhijitht "Design") [🤔](#ideas-saiabhijitht "Ideas, Planning, & Feedback") [👀](#review-saiabhijitht "Reviewed Pull Requests") | [<img src="https://avatars1.githubusercontent.com/u/6577624?v=4" width="100px;"/><br /><sub><b>Kapil Dutta</b></sub>](http://duttakapil.github.io/)<br />[🐛](https://github.com/coderplex/coderplex/issues?q=author%3Aduttakapil "Bug reports") [🤔](#ideas-duttakapil "Ideas, Planning, & Feedback") [👀](#review-duttakapil "Reviewed Pull Requests") | [<img src="https://avatars0.githubusercontent.com/u/15874356?v=4" width="100px;"/><br /><sub><b>Shiva Krishna Yadav</b></sub>](https://github.com/shivakrishna9)<br />[💻](https://github.com/coderplex/coderplex/commits?author=shivakrishna9 "Code") [📖](https://github.com/coderplex/coderplex/commits?author=shivakrishna9 "Documentation") | [<img src="https://avatars2.githubusercontent.com/u/14841940?v=4" width="100px;"/><br /><sub><b>Vineeth Kanaparthi</b></sub>](https://github.com/VineethKanaparthi)<br />[📖](https://github.com/coderplex/coderplex/commits?author=VineethKanaparthi "Documentation") |
+| :---: | :---: | :---: | :---: | :---: | :---: | :---: |
+| [<img src="https://avatars2.githubusercontent.com/u/5159834?v=4" width="100px;"/><br /><sub><b>buoyantair</b></sub>](https://github.com/buoyantair)<br />[💻](https://github.com/coderplex/coderplex/commits?author=buoyantair "Code") | [<img src="https://avatars2.githubusercontent.com/u/5133505?v=4" width="100px;"/><br /><sub><b>Jeffrey Berry</b></sub>](https://github.com/jberry93)<br />[💻](https://github.com/coderplex/coderplex/commits?author=jberry93 "Code") | [<img src="https://avatars2.githubusercontent.com/u/6535023?v=4" width="100px;"/><br /><sub><b>Sebastian</b></sub>](https://github.com/HerrVoennchen)<br />[💻](https://github.com/coderplex/coderplex/commits?author=HerrVoennchen "Code") | [<img src="https://avatars3.githubusercontent.com/u/15249170?v=4" width="100px;"/><br /><sub><b>Hafiz T</b></sub>](https://github.com/hafiz703)<br />[💻](https://github.com/coderplex/coderplex/commits?author=hafiz703 "Code") | [<img src="https://avatars0.githubusercontent.com/u/13974570?v=4" width="100px;"/><br /><sub><b>Raja Sekhar Karanam</b></sub>](https://github.com/rkaranam)<br />[📖](https://github.com/coderplex/coderplex/commits?author=rkaranam "Documentation") | [<img src="https://avatars0.githubusercontent.com/u/2767425?v=4" width="100px;"/><br /><sub><b>sreenivas alapati</b></sub>](https://twitter.com/CgCnu)<br />[💻](https://github.com/coderplex/coderplex/commits?author=cg-cnu "Code") | [<img src="https://avatars0.githubusercontent.com/u/11747818?v=4" width="100px;"/><br /><sub><b>Luis Lacruz</b></sub>](https://about.me/luislacruz)<br />[💻](https://github.com/coderplex/coderplex/commits?author=luixlacrux "Code") |
+| [<img src="https://avatars0.githubusercontent.com/u/32811957?v=4" width="100px;"/><br /><sub><b>Mazin Majid</b></sub>](https://github.com/majidmazin)<br />[📖](https://github.com/coderplex/coderplex/commits?author=majidmazin "Documentation") | [<img src="https://avatars0.githubusercontent.com/u/22547780?v=4" width="100px;"/><br /><sub><b>loangelak</b></sub>](https://github.com/loangelak)<br />[💻](https://github.com/coderplex/coderplex/commits?author=loangelak "Code") | [<img src="https://avatars0.githubusercontent.com/u/4998544?v=4" width="100px;"/><br /><sub><b>Atte Niemi</b></sub>](http://twitter.com/HursCode)<br />[💻](https://github.com/coderplex/coderplex/commits?author=hur "Code") | [<img src="https://avatars1.githubusercontent.com/u/28659384?v=4" width="100px;"/><br /><sub><b>tdeschryver</b></sub>](https://github.com/tdeschryver)<br />[💻](https://github.com/coderplex/coderplex/commits?author=tdeschryver "Code") | [<img src="https://avatars1.githubusercontent.com/u/5432702?v=4" width="100px;"/><br /><sub><b>Alicia Perez</b></sub>](http://www.linkedin.com/in/aliciapr)<br />[💻](https://github.com/coderplex/coderplex/commits?author=aliciaphes "Code") | [<img src="https://avatars2.githubusercontent.com/u/18336304?v=4" width="100px;"/><br /><sub><b>abiduzz420</b></sub>](https://medium.com/@abiduzair420)<br />[💻](https://github.com/coderplex/coderplex/commits?author=abiduzz420 "Code") [📢](#talk-abiduzz420 "Talks") | [<img src="https://avatars2.githubusercontent.com/u/10849586?v=4" width="100px;"/><br /><sub><b>thepriefy</b></sub>](https://github.com/thepriefy)<br />[💻](https://github.com/coderplex/coderplex/commits?author=thepriefy "Code") |
+| [<img src="https://avatars0.githubusercontent.com/u/8036315?v=4" width="100px;"/><br /><sub><b>Aravind Balla</b></sub>](http://aravindballa.com)<br />[👀](#review-aravindballa "Reviewed Pull Requests") |
+
+<!-- ALL-CONTRIBUTORS-LIST:END -->
diff --git a/__tests__/__snapshots__/common-banner.test.js.snap b/__tests__/__snapshots__/common-banner.test.js.snap
deleted file mode 100644
index bf1ab05a1..000000000
--- a/__tests__/__snapshots__/common-banner.test.js.snap
+++ /dev/null
@@ -1,22 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`Testing CommonBanner of \`components/common-banner\` Check the snapshot 1`] = `
-<div
-  className="jsx-1924801089"
->
-  <div
-    className="jsx-1924801089 root"
-  >
-    <h1
-      className="jsx-1924801089 headline"
-    />
-    <h2
-      className="jsx-1924801089"
-    />
-  </div>
-  <JSXStyle
-    css=".root.jsx-1924801089{background-color:#f4f7fb;min-height:150px;text-align:center;padding-top:30px;padding-bottom:30px;}.headline.jsx-1924801089{font-size:4em;color:#df1cb5;font-weight:900;}h2.jsx-1924801089{max-width:1024px;margin-left:auto;margin-right:auto;-webkit-letter-spacing:2px;-moz-letter-spacing:2px;-ms-letter-spacing:2px;letter-spacing:2px;line-height:2;}@media (max-width:720px){h2.jsx-1924801089{font-size:14px;padding:0 10px;}}"
-    styleId="1924801089"
-  />
-</div>
-`;
diff --git a/__tests__/common-banner.test.js b/__tests__/common-banner.test.js
deleted file mode 100644
index db15756d8..000000000
--- a/__tests__/common-banner.test.js
+++ /dev/null
@@ -1,38 +0,0 @@
-import React from 'react';
-import { shallow } from 'enzyme';
-
-import CommonBanner from '../components/common-banner';
-
-describe('Testing CommonBanner of `components/common-banner`', () => {
-  const shallowWrapper = shallow(<CommonBanner />);
-
-  it('Check the snapshot', () => {
-    expect(shallowWrapper).toMatchSnapshot();
-  });
-
-  it('should have title tag rendered', () => {
-    expect(shallowWrapper.find('h1').length).toBe(1);
-  });
-
-  it('should have subtitle tag rendered', () => {
-    expect(shallowWrapper.find('h2').length).toBe(1);
-  });
-
-  describe('should render the props', () => {
-    const pageTitle = 'title of the page';
-    const pageSubTitle = 'Subtitle of the page';
-    const rootWrapper = shallow(
-      <CommonBanner pageTitle={pageTitle} pageSubTitle={pageSubTitle} />,
-    );
-
-    it('should display title', () => {
-      const headerElement = rootWrapper.find('.headline');
-      expect(headerElement.props().children).toEqual(pageTitle);
-    });
-
-    it('should display subtitle', () => {
-      const subHeaderElement = rootWrapper.find('h2');
-      expect(subHeaderElement.props().children).toEqual(pageSubTitle);
-    });
-  });
-});
diff --git a/__tests__/header.test.js b/__tests__/header.test.js
new file mode 100644
index 000000000..aedef0a2e
--- /dev/null
+++ b/__tests__/header.test.js
@@ -0,0 +1,31 @@
+describe('Testing Header of `components/header`', () => {
+  it('Sample test', () => {
+    expect('A').toEqual('A');
+  });
+  /**
+   * Disable for now
+    it('should have title tag rendered', () => {
+      expect(shallowWrapper.find('h1').length).toBe(1);
+    });
+
+    it('should have subtitle tag rendered', () => {
+      expect(shallowWrapper.find('h2').length).toBe(1);
+    });
+
+    describe('should render the props', () => {
+      const pageTitle = 'title of the page';
+      const pageSubTitle = 'Subtitle of the page';
+      const rootWrapper = shallow(<CommonBanner pageTitle={pageTitle} pageSubTitle={pageSubTitle} />);
+
+      it('should display title', () => {
+        const headerElement = rootWrapper.find('.headline');
+        expect(headerElement.props().children).toEqual(pageTitle);
+      });
+
+      it('should display subtitle', () => {
+        const subHeaderElement = rootWrapper.find('h2');
+        expect(subHeaderElement.props().children).toEqual(pageSubTitle);
+      });
+    });
+   */
+});
diff --git a/__tests__/index.test.js b/__tests__/index.test.js
deleted file mode 100644
index 6e9a7a543..000000000
--- a/__tests__/index.test.js
+++ /dev/null
@@ -1,5 +0,0 @@
-describe('Setting up jest', () => {
-  it('Runs tests', () => {
-    expect('foo').toEqual('foo');
-  });
-});
diff --git a/components/common-banner.js b/components/common-banner.js
deleted file mode 100644
index e8a0b09b9..000000000
--- a/components/common-banner.js
+++ /dev/null
@@ -1,37 +0,0 @@
-import React from 'react';
-
-export default props => (
-  <div>
-    <div className="root">
-      <h1 className="headline">{props.pageTitle}</h1>
-      <h2>{props.pageSubTitle}</h2>
-    </div>
-    <style jsx>{`
-      .root {
-        background-color: #f4f7fb;
-        min-height: 150px;
-        text-align: center;
-        padding-top: 30px;
-        padding-bottom: 30px;
-      }
-      .headline {
-        font-size: 4em;
-        color: #df1cb5;
-        font-weight: 900;
-      }
-      h2 {
-        max-width: 1024px;
-        margin-left: auto;
-        margin-right: auto;
-        letter-spacing: 2px;
-        line-height: 2;
-      }
-      @media (max-width: 720px) {
-        h2 {
-          font-size: 14px;
-          padding: 0 10px;
-        }
-      }
-    `}</style>
-  </div>
-);
diff --git a/components/common/banner.js b/components/common/banner.js
new file mode 100644
index 000000000..64b418c10
--- /dev/null
+++ b/components/common/banner.js
@@ -0,0 +1,21 @@
+import React from 'react';
+import styled from 'react-emotion';
+import { space } from 'styled-system';
+
+import { Container, Title, SubTitle } from '../../utils/base.styles';
+
+const BannerSection = styled.section`
+  background-color: #374355;
+  min-height: 150px;
+  text-align: center;
+  ${space};
+`;
+
+export default ({ title, subTitle, textInverted = false }) => (
+  <BannerSection py={[2, 3]} px={[2, 1]}>
+    <Container>
+      <Title inverted={textInverted}>{title}</Title>
+      <SubTitle inverted={textInverted}>{subTitle}</SubTitle>
+    </Container>
+  </BannerSection>
+);
diff --git a/components/common/footer/index.js b/components/common/footer/index.js
new file mode 100644
index 000000000..6670d94da
--- /dev/null
+++ b/components/common/footer/index.js
@@ -0,0 +1,238 @@
+import React from 'react';
+import styled from 'react-emotion';
+import { Flex, Box } from 'grid-emotion';
+import FaFacebook from 'react-icons/lib/fa/facebook';
+import FaYoutube from 'react-icons/lib/fa/youtube-play';
+import FaGithub from 'react-icons/lib/fa/github-alt';
+import FaInstagram from 'react-icons/lib/fa/instagram';
+import FaTwitter from 'react-icons/lib/fa/twitter';
+
+import { Container, baseButton } from '../../../utils/base.styles';
+import { baseEventsURL, subscribeURL } from '../../../utils/urls';
+
+const Footer = styled.footer`
+  background: #222;
+  color: #fff;
+  @media (max-width: 480px) {
+    .follow {
+      background: #111;
+    }
+  }
+`;
+
+const SocialLinks = styled.ul`
+  margin: 0;
+  padding: 0;
+  list-style: none;
+  display: flex;
+  justify-content: center;
+  flex-wrap: wrap;
+`;
+
+const SocialLink = styled.li`
+  margin: 0 10px;
+  & a {
+    width: 50px;
+    height: 50px;
+    padding: 10px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    color: #fff;
+    text-decoration: none;
+    border: 1px solid #fff;
+    border-radius: 50%;
+    transition: all 0.25s;
+    font-weight: bold;
+    &:hover {
+      background: #fff;
+      color: #314159;
+    }
+    @media (max-width: 480px) {
+      margin: 10px;
+    }
+  }
+`;
+
+const Title = styled.h3`
+  text-align: center;
+  margin-bottom: 20px;
+  font-size: 1.1rem;
+  font-weight: 300;
+  color: #fff;
+  @media (max-width: 1000px) {
+    margin-bottom: 10px;
+  }
+  @media (max-width: 780px) {
+    font-size: 1rem;
+    line-height: 1.8rem;
+  }
+`;
+
+const Form = styled.form`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-wrap: wrap;
+  text-align: center;
+  & input {
+    border: none;
+    margin-right: 10px;
+    padding: 10px;
+    width: 240px;
+    font-size: 1rem;
+  }
+  & button {
+    ${baseButton};
+    padding: 0.6rem 1rem;
+    font-size: 1rem;
+    border: none;
+    outline: none;
+    display: flex;
+    align-items: center;
+    cursor: pointer;
+    @media (max-width: 401px) {
+      margin-top: 20px;
+    }
+  }
+`;
+
+const Message = styled.div`
+  width: 300px;
+  color: #fff;
+  font-weight: bold;
+  background: #888;
+  text-align: center;
+  margin: 15px 0 0 0;
+  display: none;
+  & h4 {
+    margin: 5px;
+  }
+  &.error {
+    display: block;
+    background: tomato;
+  }
+`;
+
+export default class FooterBar extends React.Component {
+  state = {
+    subscribersEmail: '',
+    submittingEmail: false,
+    emailSubmittingError: '',
+    subscriberEmailPosted: false,
+  };
+  handleChange = event => {
+    this.setState({
+      subscribersEmail: event.target.value,
+      emailSubmittingError: '',
+    });
+  };
+
+  handleSubmit = e => {
+    e.preventDefault();
+    console.log('submitting....');
+    this.setState({ emailSubmittingError: '' });
+    const emailRegx = /^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
+    const email = this.state.subscribersEmail;
+    if (!email) {
+      this.setState({
+        emailSubmittingError: 'Please enter a email',
+      });
+      return;
+    }
+    if (!emailRegx.test(email)) {
+      this.setState({
+        emailSubmittingError: 'Please enter a valid email',
+      });
+      return;
+    }
+    this.postSubscriberEmail(email);
+  };
+
+  async postSubscriberEmail(subscribersEmail) {
+    await this.setState({ submittingEmail: true });
+    const postSubscriberEmailRequest = await fetch(`${baseEventsURL}${subscribeURL}`, {
+      method: 'post',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({ email: subscribersEmail }),
+    });
+    if (postSubscriberEmailRequest.status === 200) {
+      this.setState({
+        subscriberEmailPosted: true,
+        submittingEmail: false,
+        emailSubmittingError: '',
+      });
+    } else {
+      this.setState({
+        submittingEmail: false,
+        emailSubmittingError: 'Submission Failed Try Again.',
+      });
+    }
+  }
+  render() {
+    return (
+      <Footer>
+        <Container>
+          <Flex wrap py={[0, 3]}>
+            <Flex align="center" direction="column" justify="center" width={[1, 1, 1 / 2]} px={[2, 3]} py={[3, 0]}>
+              <Title>
+                We are constantly updating our platform.
+                <br />Do subscribe to stay informed.
+              </Title>
+              {this.state.subscriberEmailPosted ? (
+                <h3>Thank you, we will keep you posted</h3>
+              ) : (
+                <Form onSubmit={this.handleSubmit}>
+                  <input
+                    disabled={this.state.submittingEmail}
+                    onChange={this.handleChange}
+                    type="text"
+                    placeholder="Enter your email..."
+                  />
+                  <button type="submit" disabled={this.state.submittingEmail}>
+                    {this.state.submittingEmail ? 'Subscribing...' : 'Subscribe'}
+                  </button>
+                </Form>
+              )}
+              <Message className={this.state.emailSubmittingError ? 'error' : ''}>
+                <p>{this.state.emailSubmittingError}</p>
+              </Message>
+            </Flex>
+            <Flex className="follow" align="center" justify="center" width={[1, 1, 1 / 2]}>
+              <Box p={[1, 2]}>
+                <Title>Follow Us</Title>
+                <SocialLinks>
+                  <SocialLink>
+                    <a href="https://www.youtube.com/channel/UCTkguToherUvVNnzMFINk-w">
+                      <FaYoutube size={20} />
+                    </a>
+                  </SocialLink>
+                  <SocialLink>
+                    <a href="https://www.facebook.com/coderplex">
+                      <FaFacebook size={20} />
+                    </a>
+                  </SocialLink>
+                  <SocialLink>
+                    <a href="https://github.com/coderplex">
+                      <FaGithub size={20} />
+                    </a>
+                  </SocialLink>
+                  <SocialLink>
+                    <a href="https://www.twitter.com/coderplex/">
+                      <FaTwitter size={20} />
+                    </a>
+                  </SocialLink>
+                  <SocialLink>
+                    <a href="https://www.instagram.com/coderplex/">
+                      <FaInstagram size={20} />
+                    </a>
+                  </SocialLink>
+                </SocialLinks>
+              </Box>
+            </Flex>
+          </Flex>
+        </Container>
+      </Footer>
+    );
+  }
+}
diff --git a/components/common/header/index.js b/components/common/header/index.js
new file mode 100644
index 000000000..d36375ba8
--- /dev/null
+++ b/components/common/header/index.js
@@ -0,0 +1,126 @@
+import React from 'react';
+import Router, { withRouter } from 'next/router';
+import Headroom from 'react-headroom';
+import NProgress from 'nprogress';
+import Link from 'next/link';
+import { hydrate } from 'react-emotion';
+
+import MetaInfo from '../../../config/meta-info';
+import { Container } from '../../../utils/base.styles';
+import Meta from '../meta';
+import { Header, Nav, NavLinks, NavLink, NavLogo, MobileMenuBtn } from './index.styles';
+
+Router.onRouteChangeStart = () => {
+  NProgress.start();
+};
+
+Router.onRouteChangeComplete = () => {
+  NProgress.done();
+};
+
+Router.onRouteChangeError = () => {
+  NProgress.done();
+};
+
+// Adds server generated styles to emotion cache.
+// '__NEXT_DATA__.ids' is set in '_document.js'
+if (typeof window !== 'undefined' && window.__NEXT_DATA__) {
+  hydrate(window.__NEXT_DATA__.ids);
+}
+
+class NavBar extends React.Component {
+  state = {
+    menuOpen: false,
+    navItems: [
+      {
+        title: 'Learn',
+        path: '/learn',
+        external: false,
+      },
+      {
+        title: 'Space',
+        path: '/space',
+        external: false,
+      },
+      {
+        title: 'Events',
+        path: '/events',
+        external: false,
+      },
+      {
+        title: 'Blog',
+        path: 'https://coderplex.org/blog',
+        external: true,
+      },
+    ],
+  };
+  toggleMenu = e => {
+    e.preventDefault();
+    this.setState(state => {
+      return { menuOpen: !state.menuOpen };
+    });
+  };
+  render() {
+    const pathName = this.props.router.pathname;
+    const metaData = MetaInfo[pathName === '/' ? 'home' : pathName.split('/')[1]];
+    const title =
+      pathName.split('/')[1] === 'learn' && pathName.split('/')[2]
+        ? `${this.props.router.query.chapter.replace(
+            /-/gi,
+            ' '
+          )} | Learn ${this.props.router.query.subject[0].toUpperCase() +
+            this.props.router.query.subject.slice(1)} | Coderplex`
+        : metaData.title;
+    const description = metaData.description;
+    const image = metaData.image;
+    return (
+      <Headroom>
+        <Header>
+          <Meta title={title} description={description} image={image} />
+          <Container>
+            <Nav>
+              <MobileMenuBtn onClick={this.toggleMenu} className={this.state.menuOpen ? 'open' : ''}>
+                <span>Menu</span>
+              </MobileMenuBtn>
+              <NavLogo>
+                <Link href="/">
+                  <img
+                    src="https://res.cloudinary.com/coderplex/image/upload/c_scale,w_45/v1510788480/website__assets/logo.png"
+                    alt="coderplex_logo"
+                  />
+                </Link>
+              </NavLogo>
+              <NavLinks className={this.state.menuOpen ? 'open' : ''}>
+                {this.state.navItems.filter(item => !item.external).map(item => (
+                  <NavLink key={item.path}>
+                    <Link href={item.path}>
+                      <a className={pathName === item.path ? 'active' : ''}>
+                        <span>{item.title}</span>
+                      </a>
+                    </Link>
+                  </NavLink>
+                ))}
+                {this.state.navItems.filter(item => item.external).map(item => (
+                  <NavLink key={item.path}>
+                    <a href={item.path} rel="noopener noreferrer" className={pathName === item.path ? 'active' : ''}>
+                      <span>{item.title}</span>
+                    </a>
+                  </NavLink>
+                ))}
+                <NavLink>
+                  <Link href="/login">
+                    <a className={pathName === '/login' ? 'btn active' : 'btn'}>
+                      <span>Login / Signup</span>
+                    </a>
+                  </Link>
+                </NavLink>
+              </NavLinks>
+            </Nav>
+          </Container>
+        </Header>
+      </Headroom>
+    );
+  }
+}
+
+export default withRouter(NavBar);
diff --git a/components/common/header/index.styles.js b/components/common/header/index.styles.js
new file mode 100644
index 000000000..c94444ea1
--- /dev/null
+++ b/components/common/header/index.styles.js
@@ -0,0 +1,228 @@
+import styled, { injectGlobal } from 'react-emotion';
+
+export const Header = styled.header`
+  padding: 2px 10px;
+  width: 100%;
+  background: #fff;
+  z-index: 1000;
+  border-bottom: 1px solid #eee;
+`;
+
+export const Nav = styled.nav`
+  display: flex;
+  height: 55px;
+  align-items: center;
+  position: relative;
+  @media (max-width: 885px) {
+    justify-content: center;
+  }
+`;
+
+export const NavLogo = styled.div`
+  flex: 1;
+  display: flex;
+  align-items: center;
+  padding: 10px 0;
+  & img {
+    width: 45px;
+    height: 45px;
+    margin-right: 5px;
+    cursor: pointer;
+  }
+  @media (max-width: 885px) {
+    flex: initial;
+  }
+`;
+
+export const NavLinks = styled.ul`
+  margin: 0;
+  padding: 0;
+  list-style: none;
+  flex: 3;
+  justify-content: flex-end;
+  display: flex;
+  align-items: center;
+  @media (max-width: 885px) {
+    height: auto;
+    flex-direction: column;
+    width: 100%;
+    position: fixed;
+    z-index: -1;
+    top: -600%;
+    left: 0;
+    background: #fbfbfb;
+    border-bottom: 1px solid #eee;
+    font-size: 10px;
+    transition: all 0.25s;
+    &.open {
+      top: 60px;
+    }
+  }
+`;
+
+export const NavLink = styled.li`
+  height: inherit;
+  text-align: center;
+  display: flex;
+  justify-content: center;
+  margin: 0 20px;
+  @media(max-width: 885px) {
+    width: 100%;
+    border-top: 1px solid #eee;
+  }
+  & a {
+    text-decoration: none;
+    color: #525c65;
+    font-size: 0.9rem;
+    line-height: 1.9rem;
+    padding: 0.5rem 1rem;
+    display: flex;
+    align-items: center;
+    position: relative;
+    text-transform: capitalize;
+    transition: all 0.25s
+    letter-spacing: 1px;
+    will-change: color, background, box-shadow;
+    &:hover {
+      color: #222;
+      text-shadow:0.8px 0px 0px #222
+      @media(max-width: 885px) {
+        color: #222;
+      }
+    }
+    &.active {
+      pointer-events: none;
+      color: #222;
+      text-shadow:0.8px 0px 0px #222
+    }
+    &.btn {
+      color: #7657fb;
+      @media(max-width: 885px) {
+        background: transparent;
+        color: #888;
+        padding: 0.5rem 1rem;
+        &:hover {
+          color: #222;
+          background: transparent;
+        }
+      }
+    }
+    @media(max-width: 885px) {
+      width: 100%;
+      font-size: 14px;
+      font-weight: bold;
+      padding: 12px 15px;
+      color: #888;
+    }
+  }
+`;
+
+export const MobileMenuBtn = styled.a`
+  display: none;
+  text-decoration: none;
+  width: 32px;
+  height: 24px;
+  cursor: pointer;
+  top: 15px;
+  left: 5px;
+  position: absolute;
+  z-index: 1;
+  & span {
+    position: absolute;
+    width: 100%;
+    overflow: hidden;
+    height: 2px;
+    border-radius: 4px;
+    background: #888;
+    top: 50%;
+    transition: all 0.5s;
+    transform: translate3d(-2px, 0, 0) scale3d(0.6, 1, 1);
+  }
+  &::after,
+  &:before {
+    content: '';
+    width: 100%;
+    height: 2px;
+    border-radius: 4px;
+    position: absolute;
+    background: #888;
+    top: 50%;
+    transition: transform 0.5s;
+    transform-origin: 50% 50%;
+  }
+  &:before {
+    transform: translate3d(0, 10px, 0) scale3d(0.8, 1, 1);
+  }
+  &:after {
+    transform: translate3d(0, -10px, 0) scale3d(0.8, 1, 1);
+  }
+  &.open {
+    & span {
+      transform: translate3d(-2px, 0, 0) scale3d(0, 1, 1);
+    }
+    &:before {
+      transform: rotate3d(0, 0, 1, -45deg) scale3d(0.8, 1, 1);
+    }
+    &:after {
+      transform: rotate3d(0, 0, 1, 45deg) scale3d(0.8, 1, 1);
+    }
+  }
+  @media (max-width: 885px) {
+    display: block;
+  }
+`;
+
+/* eslint-disable no-unused-expressions */
+injectGlobal`
+  *,
+  *::after,
+  *::before {
+    box-sizing: border-box;
+  }
+  body {
+    height: 100%;
+    width: 100%;
+    padding: 0;
+    margin: 0;
+    font-size: 14px;
+    line-height: 1.428rem;
+    background: #fafafa;
+    font-family: -apple-system, system-ui, BlinkMacSystemFont, 'Segoe UI',
+      Roboto, Oxygen-Sans, Ubuntu, Cantarell, 'Fira Sans', 'Droid Sans',
+      'Helvetica Neue', sans-serif;
+    font-weight: 400;
+    color: #444;
+    text-rendering: optimizeLegibility;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+  }
+  #nprogress {
+    pointer-events: none;
+  }
+  #nprogress .bar {
+    background: #aa97fb;
+    position: fixed;
+    z-index: 1031;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 4px;
+  }
+  #nprogress .peg {
+    display: block;
+    position: absolute;
+    right: 0px;
+    width: 100px;
+    height: 100%;
+    box-shadow: 0 0 10px #aa97fb, 0 0 5px #aa97fb;
+    opacity: 1;
+    transform: rotate(3deg) translate(0px, -4px);
+  }
+  .headroom--pinned header {
+    box-shadow: 0 2px 4px rgba(61, 71, 82, 0.1);
+  }
+  .headroom--scrolled {
+    z-index: 99999 !important;
+  }
+`;
+/* eslint-enable no-unused-expressions */
diff --git a/components/common/layout.js b/components/common/layout.js
new file mode 100644
index 000000000..06e724175
--- /dev/null
+++ b/components/common/layout.js
@@ -0,0 +1,12 @@
+import React from 'react';
+
+import Header from './header';
+import Footer from './footer';
+
+export default ({ children }) => (
+  <div>
+    <Header />
+    {children}
+    <Footer />
+  </div>
+);
diff --git a/components/common/meta.js b/components/common/meta.js
new file mode 100644
index 000000000..0e8f99735
--- /dev/null
+++ b/components/common/meta.js
@@ -0,0 +1,33 @@
+import React from 'react';
+import Head from 'next/head';
+
+export default ({ title, description, image }) => {
+  return (
+    <Head>
+      <meta charSet="utf-8" />
+      <meta name="viewport" content="width=device-width,initial-scale=1" />
+      <meta name="mobile-web-app-capable" content="yes" />
+      <meta name="apple-mobile-web-app-capable" content="yes" />
+      <link rel="apple-touch-icon" sizes="180x180" href="/static/favicons/apple-touch-icon.png" />
+      <link rel="icon" type="image/png" href="/static/favicons/favicon-32x32.png" sizes="32x32" />
+      <link rel="icon" type="image/png" href="/static/favicons/favicon-16x16.png" sizes="16x16" />
+      <link rel="manifest" href="/static/favicons/manifest.json" />
+      <link rel="mask-icon" href="/static/favicons/safari-pinned-tab.svg" color="#c201b9" />
+      <link rel="shortcut icon" href="/static/favicons/favicon.ico" />
+      <link
+        rel="stylesheet"
+        href="https://cdn.rawgit.com/konpa/devicon/df6431e323547add1b4cf45992913f15286456d3/devicon.min.css"
+      />
+      <meta name="msapplication-config" content="/static/favicons/browserconfig.xml" />
+      <meta name="theme-color" content="#c201b9" />
+      <title>{title}</title>
+      <meta name="description" content={description} />
+      <meta property="og:type" content="website" />
+      <meta property="og:title" content={title} />
+      <meta property="og:url" content="https://coderplex.org" />
+      <meta property="og:image" content={image || 'https://coderplex.org/static/favicons/android-chrome-512x512.png'} />
+      <meta property="og:site_name" content="coderplex.org" />
+      <meta property="og:description" content={description} />
+    </Head>
+  );
+};
diff --git a/components/content-loaders.js b/components/content-loaders.js
deleted file mode 100644
index 95d03654a..000000000
--- a/components/content-loaders.js
+++ /dev/null
@@ -1,243 +0,0 @@
-import React from 'react';
-
-export const CardContentLoader = () => (
-  <div className="root">
-    <div className="main">
-      <div className="animation-background">
-        <div className="background-masker header-right" />
-        <div className="background-masker subheader-bottom" />
-        <div className="background-masker content-first-end" />
-        <div className="background-masker content-second-line" />
-        <div className="background-masker content-third-end" />
-      </div>
-    </div>
-    <style jsx>{`
-      @keyframes placeHolderShimmer {
-        0% {
-          background-position: -468px 0;
-        }
-        100% {
-          background-position: 468px 0;
-        }
-      }
-
-      .root {
-        color: #141823;
-        padding: 20px;
-      }
-
-      .main {
-        background: #fff;
-        border: 1px solid;
-        border-color: #e5e6e9 #dfe0e4 #d0d1d5;
-        border-radius: 3px;
-        padding: 12px;
-        margin: 0 auto;
-        max-width: 600px;
-        min-height: 120px;
-      }
-
-      .animation-background {
-        animation-duration: 1s;
-        animation-fill-mode: forwards;
-        animation-iteration-count: infinite;
-        animation-name: placeHolderShimmer;
-        animation-timing-function: linear;
-        background: #f6f7f8;
-        background: #eeeeee;
-        background: linear-gradient(
-          to right,
-          #eeeeee 8%,
-          #dddddd 18%,
-          #eeeeee 33%
-        );
-        background-size: 800px 104px;
-        height: 96px;
-        position: relative;
-      }
-
-      .background-masker {
-        background: #fff;
-        position: absolute;
-        box-sizing: border-box;
-      }
-
-      .outlined .background-masker {
-        border: 1px solid #ddd;
-      }
-
-      .outlined:hover .background-masker {
-        border: none;
-      }
-
-      .outlined:hover .background-masker:hover {
-        border: 1px solid #ccc;
-        z-index: 1;
-      }
-
-      .background-masker.header-top,
-      .background-masker.header-bottom,
-      .background-masker.subheader-bottom {
-        top: 0;
-        left: 0;
-        right: 0;
-        height: 20px;
-      }
-
-      .background-masker.header-left,
-      .background-masker.subheader-left,
-      .background-masker.header-right,
-      .background-masker.subheader-right {
-        top: 00px;
-        left: 40px;
-        height: 30px;
-        width: 10px;
-      }
-
-      .background-masker.header-bottom {
-        top: 18px;
-        height: 6px;
-      }
-
-      .background-masker.subheader-right {
-        top: 24px;
-        height: 18px;
-      }
-
-      .background-masker.header-right,
-      .background-masker.subheader-right {
-        width: auto;
-        left: 300px;
-        right: 0;
-      }
-
-      .background-masker.subheader-right {
-        left: 230px;
-      }
-
-      .background-masker.subheader-bottom {
-        top: 30px;
-        height: 25px;
-      }
-
-      .background-masker.content-top,
-      .background-masker.content-second-line,
-      .background-masker.content-third-line,
-      .background-masker.content-second-end,
-      .background-masker.content-third-end,
-      .background-masker.content-first-end {
-        top: 40px;
-        left: 0;
-        right: 0;
-        height: 6px;
-      }
-
-      .background-masker.content-top {
-        height: 20px;
-      }
-
-      .background-masker.content-first-end,
-      .background-masker.content-second-end {
-        width: auto;
-        left: 180px;
-        right: 0;
-        top: 40px;
-        height: 30px;
-      }
-      .background-masker.content-third-end {
-        width: auto;
-        right: 0;
-        height: 10px;
-      }
-
-      .background-masker.content-second-line {
-        top: 68px;
-        height: 20px;
-      }
-
-      .background-masker.content-second-end {
-        left: 420px;
-        top: 74px;
-      }
-
-      .background-masker.content-third-line {
-        top: 82px;
-      }
-
-      .background-masker.content-third-end {
-        left: 500px;
-        top: 88px;
-      }
-    `}</style>
-  </div>
-);
-
-export const TextContentLoader = props => (
-  <div className="root">
-    <div className="animation-background">
-      <div className="background-masker subheader-right" />
-    </div>
-    <style jsx>{`
-      @keyframes placeHolderShimmer {
-        0% {
-          background-position: -468px 0;
-        }
-        100% {
-          background-position: 468px 0;
-        }
-      }
-
-      .root {
-        background: #fff;
-        padding-top: ${props.topPadding};
-        margin: 0 auto;
-        max-width: 600px;
-      }
-
-      .animation-background {
-        animation-duration: 1s;
-        animation-fill-mode: forwards;
-        animation-iteration-count: infinite;
-        animation-name: placeHolderShimmer;
-        animation-timing-function: linear;
-        background: #f6f7f8;
-        background: #eeeeee;
-        background: linear-gradient(
-          to right,
-          #eeeeee 8%,
-          #dddddd 18%,
-          #eeeeee 33%
-        );
-        background-size: 800px 104px;
-        height: 20px;
-        position: relative;
-      }
-
-      .background-masker {
-        background: #fff;
-        position: absolute;
-        box-sizing: border-box;
-      }
-
-      .outlined .background-masker {
-        border: 1px solid #ddd;
-      }
-
-      .outlined:hover .background-masker {
-        border: none;
-      }
-
-      .outlined:hover .background-masker:hover {
-        border: 1px solid #ccc;
-        z-index: 1;
-      }
-
-      .background-masker.subheader-right {
-        top: 0px;
-        right: 0px;
-        height: 30px;
-        width: 300px;
-      }
-    `}</style>
-  </div>
-);
diff --git a/components/events/event-card.js b/components/events/event-card.js
new file mode 100644
index 000000000..5365a9791
--- /dev/null
+++ b/components/events/event-card.js
@@ -0,0 +1,145 @@
+import React from 'react';
+import styled from 'react-emotion';
+import { space, fontSize } from 'styled-system';
+import { Flex, Box } from 'grid-emotion';
+import TimeIcon from 'react-icons/lib/fa/calendar';
+import format from 'date-fns/format';
+import LocationIcon from 'react-icons/lib/md/location-on';
+import AttendeesIcon from 'react-icons/lib/md/people';
+import TicketIcon from 'react-icons/lib/md/exit-to-app';
+import StreamIcon from 'react-icons/lib/md/desktop-mac';
+
+import { breakpoints, Button, graySecondary } from '../../utils/base.styles';
+import truncateString from '../../utils';
+
+const Card = styled(Flex)`
+  ${space};
+  background: #fff;
+  border: 1px solid ${graySecondary};
+  min-height: 120px;
+  color: #8393a7;
+  text-align: left;
+  & .eventPhoto {
+    height: 120px;
+    width: 100%;
+    ${breakpoints.sm} {
+      object-fit: cover;
+      height: 200px;
+    }
+    ${breakpoints.xs} {
+      height: 200px;
+      object-fit: cover;
+    }
+  }
+  & .eventDetails {
+    min-height: 120px;
+  }
+  & .secondaryText {
+    ${fontSize};
+    color: #8393a7;
+  }
+  & .icons {
+    font-size: 1.2rem;
+    margin-right: 0.25rem;
+    margin-bottom: 0.25rem;
+    color: #8393a7;
+  }
+  & .rsvp {
+    text-align: right;
+    ${breakpoints.sm} {
+      text-align: left;
+      & > * {
+        width: 100%;
+        display: block;
+        text-align: center;
+        margin: 0;
+      }
+    }
+    ${breakpoints.xs} {
+      text-align: left;
+      & > * {
+        width: 100%;
+        display: block;
+        text-align: center;
+        margin: 0;
+      }
+    }
+  }
+`;
+
+const CardTitle = styled.h3`
+  ${space};
+  color: #374355;
+  font-weight: 500;
+  border-bottom: 1px solid ${graySecondary};
+`;
+
+export default props => (
+  <Card my={[3]} wrap>
+    {props.showImg && (
+      <Flex align="streach" width={[1, 1, 1 / 4]}>
+        <img
+          className="eventPhoto"
+          src={`https://res.cloudinary.com/coderplex/image/fetch/w_200,h_150/${props.image}`}
+          srcSet={`https://res.cloudinary.com/coderplex/image/fetch/w_300,h_200/${
+            props.image
+          } 720w, https://res.cloudinary.com/coderplex/image/fetch/w_200,h_150/${props.image} 1024w`}
+        />
+      </Flex>
+    )}
+    <Box className="eventDetails" width={props.showImg ? [1, 1, 3 / 4] : [1, 1, 1]}>
+      <Flex className="eventDetails" column justify="space-between">
+        <CardTitle inverted color="#222" px={[2]} py={[1]} m={0}>
+          {truncateString(props.name, 64)}
+        </CardTitle>
+        <Box fontSize={[12, 14, 16]} className="secondaryText" px={[2]} my={props.showImg ? [1, 1, 0] : [1, 1, 1]}>
+          <LocationIcon className="icons" />
+          <span>{truncateString(props.location, 55)}</span>
+        </Box>
+        <Box px={2} pb={[2, 1]}>
+          <Flex wrap>
+            <Box
+              fontSize={[12, 14, 16]}
+              width={props.showImg ? [1, 1, 0.38] : [1, 1, 1 / 2]}
+              className="secondaryText"
+              pr={1}
+              mr={[0]}
+              my={props.showImg ? [1, 1, 0] : [1, 1, 1]}>
+              <TimeIcon className="icons" />
+              <span>{format(props.time, "ddd MMM Do 'YY, h:mm A")}</span>
+            </Box>
+            <Box
+              fontSize={[12, 14, 16]}
+              width={props.showImg ? [1, 1, 0.24] : [1, 1, 1 / 2]}
+              className="secondaryText"
+              pr={1}
+              mx={[0]}
+              my={props.showImg ? [1, 1, 0] : [1, 1, 1]}>
+              <AttendeesIcon className="icons" />
+              <span>{props.tense === 'past' ? `${props.attendees} attended` : `${props.attendees} attending`}</span>
+            </Box>
+            <Box
+              fontSize={[12, 14, 16]}
+              width={props.showImg ? [1, 1, 0.21] : [1, 1, 1 / 2]}
+              className="secondaryText"
+              pr={1}
+              mx={[0]}
+              my={props.showImg ? [1, 1, 0] : [1, 1, 1]}>
+              {props.online ? <StreamIcon className="icons" /> : <TicketIcon className="icons" />}
+              <span>{props.online ? 'Free session' : 'Free entry'}</span>
+            </Box>
+            <Box
+              fontSize={[12, 14, 16]}
+              width={props.showImg ? [1, 1, 0.17] : [1, 1, 1 / 2]}
+              mt={props.showImg ? [1, 1, 0] : [1, 1, 1]}
+              className="rsvp">
+              <Button href={props.link} inverted medium>
+                {props.tense === 'past' ? 'View' : 'RSVP'}
+              </Button>
+            </Box>
+          </Flex>
+        </Box>
+      </Flex>
+    </Box>
+  </Card>
+);
diff --git a/components/events/event-content-loader.js b/components/events/event-content-loader.js
new file mode 100644
index 000000000..eb093df1e
--- /dev/null
+++ b/components/events/event-content-loader.js
@@ -0,0 +1,37 @@
+import React from 'react';
+import ContentLoader from 'react-content-loader';
+import styled from 'react-emotion';
+import { space } from 'styled-system';
+import { Flex } from 'grid-emotion';
+
+import { breakpoints, graySecondary } from '../../utils/base.styles';
+
+const EventLoader = styled(Flex)`
+  ${space};
+  border: 1px solid ${graySecondary};
+  margin: 32px 0;
+  min-height: 120px;
+  ${breakpoints.md} {
+    padding-right: 15px;
+  }
+  ${breakpoints.sm} {
+    padding-right: 15px;
+  }
+  ${breakpoints.xs} {
+    padding-right: 15px;
+  }
+`;
+
+export default () => (
+  <EventLoader my={[3]} wrap>
+    <ContentLoader width="100%" speed={4} primaryColor={'#f3f3f3'} secondaryColor={'#ecebeb'}>
+      <rect x="0" y="0" rx="5" ry="5" width="200" height="132" />
+      <rect x="207" y="7" rx="4" ry="4" width="550" height="20" />
+      <rect x="210" y="54" rx="4" ry="4" width="300" height="15" />
+      <rect x="210" y="100" rx="4" ry="4" width="120" height="15" />
+      <rect x="355" y="100" rx="4" ry="4" width="120" height="15" />
+      <rect x="503" y="100" rx="4" ry="4" width="120" height="15" />
+      <rect x="636" y="74" rx="4" ry="4" width="120" height="40" />
+    </ContentLoader>
+  </EventLoader>
+);
diff --git a/components/footer.js b/components/footer.js
deleted file mode 100644
index b8dc8b4ea..000000000
--- a/components/footer.js
+++ /dev/null
@@ -1,84 +0,0 @@
-import React from 'react';
-import FaFacebook from 'react-icons/lib/fa/facebook';
-import FaYoutube from 'react-icons/lib/fa/youtube-play';
-import FaGithub from 'react-icons/lib/fa/github-alt';
-import FaInstagram from 'react-icons/lib/fa/instagram';
-import FaTwitter from 'react-icons/lib/fa/twitter';
-
-export default () => (
-  <footer>
-    <div className="footer__container">
-      <div className="footer__content">
-        <h3>Follow Us</h3>
-        <ul>
-          <li>
-            <a href="https://www.youtube.com/channel/UCZ2EgRcIyY8lcHz0c5-lOUw">
-              <FaYoutube size={20} />
-            </a>
-          </li>
-          <li>
-            <a href="https://www.facebook.com/coderplex">
-              <FaFacebook size={20} />
-            </a>
-          </li>
-          <li>
-            <a href="https://github.com/coderplex">
-              <FaGithub size={20} />
-            </a>
-          </li>
-          <li>
-            <a href="https://www.instagram.com/coderplex/">
-              <FaInstagram size={20} />
-            </a>
-          </li>
-          <li>
-            <a href="https://www.twitter.com/coderplex/"><FaTwitter size={20}/></a>
-          </li>
-        </ul>
-      </div>
-    </div>
-    <style jsx>{`
-      footer {
-        padding: 50px 0;
-        background: #c454df linear-gradient(to bottom, #ec53ab, #d354cf);
-        color: #fff;
-      }
-      .footer__container {
-        max-width: 1280px;
-        margin: 0 auto;
-      }
-      .footer__content {
-        text-align: center;
-      }
-      ul {
-        margin: 0;
-        padding: 0;
-        list-style: none;
-        display: flex;
-        justify-content: center;
-        flex-wrap: wrap;
-      }
-      ul li {
-        margin: 0 10px;
-      }
-      ul li a {
-        width: 50px;
-        height: 50px;
-        padding: 10px;
-        display: flex;
-        justify-content: center;
-        align-items: center;
-        color: #fff;
-        text-decoration: none;
-        border: 1px solid #fff;
-        border-radius: 50%;
-        transition: all 0.25s;
-        font-weight: bold;
-      }
-      ul li a:hover {
-        background: #fff;
-        color: #314159;
-      }
-    `}</style>
-  </footer>
-);
diff --git a/components/global-styles.js b/components/global-styles.js
deleted file mode 100644
index 317d5179a..000000000
--- a/components/global-styles.js
+++ /dev/null
@@ -1,137 +0,0 @@
-import React from 'react';
-
-export default () => (
-  <div>
-    <style jsx global>{`
-      *,
-      *::after,
-      *::before {
-        box-sizing: border-box;
-      }
-      body {
-        height: 100%;
-        width: 100%;
-        padding: 0;
-        margin: 0;
-        background: #fafafa;
-        font-family: -apple-system, system-ui, BlinkMacSystemFont, 'Segoe UI',
-          Roboto, Oxygen-Sans, Ubuntu, Cantarell, 'Fira Sans', 'Droid Sans',
-          'Helvetica Neue', sans-serif;
-        font-weight: 400;
-        color: #444;
-        text-rendering: optimizeLegibility;
-        -webkit-font-smoothing: antialiased;
-        -moz-osx-font-smoothing: grayscale;
-      }
-      #nprogress {
-        pointer-events: none;
-      }
-      #nprogress .bar {
-        background: #f9d1ed;
-        position: fixed;
-        z-index: 1031;
-        top: 0;
-        left: 0;
-        width: 100%;
-        height: 4px;
-      }
-      /* Fancy blur effect */
-      #nprogress .peg {
-        display: block;
-        position: absolute;
-        right: 0px;
-        width: 100px;
-        height: 100%;
-        box-shadow: 0 0 10px #f9d1ed, 0 0 5px #f9d1ed;
-        opacity: 1;
-        transform: rotate(3deg) translate(0px, -4px);
-      }
-      .headroom--pinned header {
-        box-shadow: 0 2px 4px rgba(61, 71, 82, 0.1);
-      }
-      .headroom--scrolled {
-        z-index: 99999 !important;
-      }
-      .learn_search {
-        padding-top: 40px;
-        padding-bottom: 40px;
-      }
-      table {
-        width: 100%;
-        border-collapse: collapse;
-        text-align: center;
-      }
-      th {
-        background: #f4f6fb;
-        font-weight: bold;
-      }
-      td,
-      th {
-        padding: 6px;
-        border: 1px solid #ccc;
-        text-align: center;
-      }
-      @media only screen and (max-width: 760px),
-        (min-device-width: 768px) and (max-device-width: 1024px) {
-        table,
-        thead,
-        tbody,
-        th,
-        td,
-        tr {
-          display: block;
-          text-align: center;
-          margin-bottom: 10px;
-        }
-
-        thead tr {
-          position: absolute;
-          top: -9999px;
-          left: -9999px;
-        }
-
-        tr {
-          border: 1px solid #ccc;
-          text-align: center;
-        }
-
-        td {
-          border: none;
-          border-bottom: 1px solid #eee;
-          position: relative;
-          padding-left: 50%;
-        }
-
-        td:before {
-          position: absolute;
-          top: 6px;
-          left: 6px;
-          width: 30%;
-          padding-right: 5px;
-          white-space: normal;
-          font-size: 12px;
-          text-align: left;
-        }
-
-        td:nth-of-type(1):before {
-          content: 'Concept';
-        }
-        td:nth-of-type(1) {
-          background: #f4f6fb;
-        }
-        td:nth-of-type(2):before {
-          content: 'Best video';
-        }
-        td:nth-of-type(3):before {
-          content: 'Best text';
-        }
-        td:nth-of-type(4):before {
-          content: 'Duration';
-        }
-        td:nth-of-type(5):before {
-          content: 'Prereq';
-        }
-      }
-    `}</style>
-  </div>
-);
diff --git a/components/head.js b/components/head.js
deleted file mode 100644
index c85ae2430..000000000
--- a/components/head.js
+++ /dev/null
@@ -1,63 +0,0 @@
-import React from 'react';
-import Head from 'next/head';
-
-export default ({ title, description, image }) => (
-  <Head>
-    <meta charSet="utf-8" />
-    <meta
-      name="viewport"
-      content="width=device-width, initial-scale=1.0, maximum-scale=1.0"
-    />
-    <link
-      rel="apple-touch-icon"
-      sizes="180x180"
-      href="/static/favicons/apple-touch-icon.png"
-    />
-    <link
-      rel="icon"
-      type="image/png"
-      href="/static/favicons/favicon-32x32.png"
-      sizes="32x32"
-    />
-    <link
-      rel="icon"
-      type="image/png"
-      href="/static/favicons/favicon-16x16.png"
-      sizes="16x16"
-    />
-    <link rel="manifest" href="/static/favicons/manifest.json" />
-    <link
-      rel="mask-icon"
-      href="/static/favicons/safari-pinned-tab.svg"
-      color="#c201b9"
-    />
-    <link rel="shortcut icon" href="/static/favicons/favicon.ico" />
-    <meta
-      name="msapplication-config"
-      content="/static/favicons/browserconfig.xml"
-    />
-    <meta name="theme-color" content="#c201b9" />
-    <link
-      rel="stylesheet"
-      href="//cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.2/semantic.min.css"
-    />
-    <link
-      rel="stylesheet"
-      href="https://cdn.rawgit.com/konpa/devicon/df6431e323547add1b4cf45992913f15286456d3/devicon.min.css"
-    />
-    <title>{title}</title>
-    <meta name="description" content={description} />
-    <meta property="og:type" content="website" />
-    <meta property="og:title" content={title} />
-    <meta property="og:url" content="https://coderplex.org" />
-    <meta
-      property="og:image"
-      content={
-        image ||
-        'https://coderplex.org/static/favicons/android-chrome-512x512.png'
-      }
-    />
-    <meta property="og:site_name" content="coderplex.org" />
-    <meta property="og:description" content={description} />
-  </Head>
-);
diff --git a/components/header.js b/components/header.js
deleted file mode 100644
index 897372cf4..000000000
--- a/components/header.js
+++ /dev/null
@@ -1,301 +0,0 @@
-import React from 'react';
-import Headroom from 'react-headroom';
-import NProgress from 'nprogress';
-import Router from 'next/router';
-import Link from 'next/link';
-import GoHome from 'react-icons/lib/go/home';
-import GoBook from 'react-icons/lib/md/school';
-import GoStar from 'react-icons/lib/md/library-books';
-import GoCalender from 'react-icons/lib/go/calendar';
-import GoOrg from 'react-icons/lib/go/organization';
-
-import MetaInfo from '../config/meta-info';
-import GlobalStyles from './global-styles';
-import Head from './head';
-
-Router.onRouteChangeStart = () => {
-  NProgress.start();
-};
-
-Router.onRouteChangeComplete = () => {
-  NProgress.done();
-};
-
-Router.onRouteChangeError = () => {
-  NProgress.done();
-};
-
-export default props => {
-  const title =
-    props.url.pathname === '/' ? 'home' : props.url.pathname.split('/')[1];
-  const metaData = MetaInfo[title];
-  const navItems = [
-    {
-      title: 'Home',
-      path: '/',
-      external: false,
-      icon: GoHome,
-    },
-    {
-      title: 'Learn',
-      path: '/learn',
-      external: false,
-      icon: GoBook,
-    },
-    {
-      title: 'Space',
-      path: '/space',
-      external: false,
-      icon: GoOrg,
-    },
-    {
-      title: 'Events',
-      path: '/events',
-      external: false,
-      icon: GoCalender,
-    },
-    {
-      title: 'Blog',
-      path: 'https://coderplex.org/blog',
-      external: true,
-      icon: GoStar,
-    },
-  ];
-  return (
-    <Headroom>
-      <header>
-        <Head
-          title={metaData.title}
-          description={metaData.description}
-          image={metaData.image}
-        />
-        <GlobalStyles />
-        <div className="header__container">
-          <nav>
-            <div className="nav__logo">
-              <Link href="/">
-                <img src="/static/favicons/android-chrome-192x192.png" alt="" />
-              </Link>
-            </div>
-            <input id="menu" type="checkbox" />
-            <label htmlFor="menu" className="mobile__menu">
-              <span>Menu</span>
-            </label>
-            <ul className="nav__links">
-              {navItems.map(item => {
-                return (
-                  <li key={item.title} className="nav__linkItem">
-                    {item.external ? (
-                      <a
-                        href={item.path}
-                        className={`nav__link ${props.url.pathname === item.path
-                          ? 'nav__link--active'
-                          : ''}`}
-                      >
-                        {React.createElement(item.icon)}
-                        <span>{item.title}</span>
-                      </a>
-                    ) : (
-                      <Link href={item.path}>
-                        <a
-                          className={`nav__link ${props.url.pathname ===
-                          item.path
-                            ? 'nav__link--active'
-                            : ''}`}
-                        >
-                          {React.createElement(item.icon)}
-                          <span>{item.title}</span>
-                        </a>
-                      </Link>
-                    )}
-                  </li>
-                );
-              })}
-            </ul>
-          </nav>
-        </div>
-      </header>
-      <style jsx>{`
-        header {
-          padding: 5px 10px;
-          width: 100%;
-          background: #c454df linear-gradient(to top, #ec53ab, #d354cf);
-          z-index: 1000;
-        }
-        .header__container {
-          max-width: 1280px;
-          margin: 0 auto;
-        }
-        nav {
-          display: flex;
-          height: 56px;
-          align-items: center;
-          position: relative;
-        }
-        .nav__logo {
-          flex: 1;
-          display: flex;
-          align-items: center;
-        }
-        .nav__logo img {
-          width: 50px;
-          height: 50px;
-          margin-right: 5px;
-          cursor: pointer;
-        }
-        .nav__links {
-          margin: 0;
-          padding: 0;
-          list-style: none;
-          flex: 2;
-          display: flex;
-          align-items: center;
-        }
-        .nav__linkItem {
-          flex: 1;
-          text-align: center;
-          display: flex;
-          justify-content: center;
-        }
-        .nav__linkItem :global(.dropdown__linkItem) {
-          display: flex;
-          justify-content: center;
-          align-items: center;
-        }
-        .nav__linkItem img {
-          width: 30px;
-          height: 30px;
-          border-radius: 50%;
-          margin-right: 5px;
-        }
-        .nav__link {
-          text-decoration: none;
-          color: #fff;
-          font-size: 16px;
-          font-weight: bold;
-          padding-bottom: 4px;
-          display: flex;
-          align-items: center;
-        }
-        .nav__link span {
-          margin-left: 5px;
-        }
-        .nav__link:hover {
-          color: #e1e1e1;
-        }
-        .nav__link--active {
-          border-bottom: 2px solid #fff;
-          pointer-events: none;
-        }
-        input[type='checkbox'] {
-          position: absolute;
-          display: none;
-          top: 25px;
-          left: 25px;
-        }
-        .mobile__menu {
-          width: 30px;
-          height: 24px;
-          display: none;
-          cursor: pointer;
-          top: 15px;
-          left: 5px;
-          position: absolute;
-          z-index: 1;
-        }
-        .mobile__menu:after,
-        .mobile__menu:before {
-          content: '';
-          width: 100%;
-          height: 2px;
-          border-radius: 4px;
-          position: absolute;
-          background: #fff;
-          top: 50%;
-          -webkit-transition: -webkit-transform 0.5s;
-          transition: -webkit-transform 0.5s;
-          transition: transform 0.5s;
-          transition: transform 0.5s, -webkit-transform 0.5s;
-          -webkit-transform-origin: 50% 50%;
-          transform-origin: 50% 50%;
-        }
-        .mobile__menu:after {
-          -webkit-transform: translate3d(0, -10px, 0) scale3d(0.8, 1, 1);
-          transform: translate3d(0, -10px, 0) scale3d(0.8, 1, 1);
-        }
-        .mobile__menu:before {
-          -webkit-transform: translate3d(0, 10px, 0) scale3d(0.8, 1, 1);
-          transform: translate3d(0, 10px, 0) scale3d(0.8, 1, 1);
-        }
-        .mobile__menu span {
-          position: absolute;
-          width: 100%;
-          overflow: hidden;
-          height: 2px;
-          border-radius: 4px;
-          background: #fff;
-          top: 50%;
-          -webkit-transition: all 0.5s;
-          transition: all 0.5s;
-        }
-        input[type='checkbox']:checked ~ .mobile__menu span {
-          -webkit-transform: scale3d(0, 1, 1);
-          transform: scale3d(0, 1, 1);
-        }
-        input[type='checkbox']:checked ~ .mobile__menu:after {
-          -webkit-transform: rotate3d(0, 0, 1, 45deg);
-          transform: rotate3d(0, 0, 1, 45deg);
-        }
-        input[type='checkbox']:checked ~ .mobile__menu:before {
-          -webkit-transform: rotate3d(0, 0, 1, -45deg);
-          transform: rotate3d(0, 0, 1, -45deg);
-        }
-        input[type='checkbox']:checked ~ .nav__links {
-          display: flex;
-        }
-        @media (max-width: 700px) {
-          nav {
-            justify-content: center;
-          }
-          .nav__logo {
-            flex: initial;
-          }
-          .mobile__menu {
-            display: block;
-          }
-          input[type='checkbox'] {
-            display: block;
-            opacity: 0;
-          }
-          .nav__links {
-            flex-direction: column;
-            width: 100%;
-            position: fixed;
-            top: 66px;
-            background: #fafafa;
-            display: none;
-            border-bottom: 1px solid #eee;
-            font-size: 10px;
-          }
-          .nav__linkItem {
-            width: 100%;
-            border-top: 1px solid #eee;
-          }
-          .nav__link {
-            width: 100%;
-            font-size: 14px;
-            font-weight: bold;
-            padding: 12px 15px;
-            color: #888;
-          }
-          .nav__link:hover {
-            color: #222;
-          }
-          .nav__link--active {
-            border: none;
-          }
-        }
-      `}</style>
-    </Headroom>
-  );
-};
diff --git a/components/icons.js b/components/icons.js
deleted file mode 100644
index cd77a8c84..000000000
--- a/components/icons.js
+++ /dev/null
@@ -1,102 +0,0 @@
-import React from 'react';
-
-export const UnderConstructionSVG = props => (
-  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
-    <path
-      fill="#6B4841"
-      d="M79.448 247.172h35.31v-35.31h-35.31v35.31zm317.793 0h35.31v-35.31h-35.31v35.31zm17.656-176.551c-6.179 0-12.359-1.766-17.655-5.297v40.607h35.31V65.324c-5.297 3.531-11.476 5.297-17.655 5.297m-317.794 0c-6.179 0-12.359-1.766-17.655-5.297v40.607h35.31V65.324c-5.296 3.531-11.475 5.297-17.655 5.297"
-    />
-    <path fill="#556080" d="M0 211.862h512V105.931H0v105.931z" />
-    <path
-      fill="#E15649"
-      d="M132.414 35.31c0-19.421-15.89-35.31-35.31-35.31s-35.31 15.89-35.31 35.31 15.89 35.31 35.31 35.31 35.31-15.889 35.31-35.31"
-    />
-    <path
-      fill="#6B4841"
-      d="M79.448 512h35.31V353.103h-35.31V512zm317.793 0h35.31V353.103h-35.31V512z"
-    />
-    <path fill="#4C2C28" d="M114.759 467.862h282.483v-52.966H114.759v52.966z" />
-    <path
-      fill="#ECBA16"
-      d="M67.972 105.931L0 173.903v37.959h87.393l105.931-105.931H67.972zm143.89 105.931h124.469l105.931-105.931H317.793L211.862 211.862z"
-    />
-    <path
-      fill="#556080"
-      d="M336.331 211.862H460.8l50.317-50.317v-55.614h-69.738L336.331 211.862z"
-    />
-    <path fill="#ECBA16" d="M512 211.862v-50.317l-50.317 50.317H512z" />
-    <path fill="#556080" d="M0 353.103h512V247.172H0v105.931z" />
-    <path
-      fill="#ECBA16"
-      d="M67.972 247.172L0 315.145v37.959h87.393l105.931-105.931H67.972zm143.89 105.931h124.469l105.931-105.931H317.793L211.862 353.103z"
-    />
-    <path
-      fill="#556080"
-      d="M336.331 353.103H460.8l50.317-50.317v-55.614h-69.738L336.331 353.103z"
-    />
-    <path fill="#ECBA16" d="M512 353.103v-50.317l-50.317 50.317H512z" />
-    <path
-      fill="#E15649"
-      d="M379.586 35.31c0-19.421 15.89-35.31 35.31-35.31 19.421 0 35.31 15.89 35.31 35.31s-15.89 35.31-35.31 35.31c-19.42.001-35.31-15.889-35.31-35.31"
-    />
-    <style jsx>{`
-      svg {
-        width: ${props.size};
-        height: ${props.size};
-      }
-    `}</style>
-  </svg>
-);
-
-export const LaravelSVG = props => (
-  <svg
-    version="1.1"
-    id="Layer_1"
-    xmlns="http://www.w3.org/2000/svg"
-    viewBox="0 0 700 700"
-  >
-    <path
-      fill="#FB503B"
-      d="M556.8,344.2c-2.9-3.2-42.3-52.6-49.3-61c-7-8.4-10.3-6.9-14.6-6.2s-54.2,9-60,10c-5.8,1-9.4,3.3-5.9,8.3
-      c3.2,4.4,36,51,43.2,61.2l-130.5,31.3L236.1,214.3c-4.1-6.1-5-8.3-14.4-7.8c-9.4,0.4-81.4,6.4-86.5,6.8c-5.1,0.4-10.8,2.7-5.6,14.8
-      c5.1,12.1,86.9,188.3,89.2,193.4c2.3,5.1,8.2,13.4,22.1,10.1c14.2-3.4,63.5-16.3,90.4-23.3c14.2,25.8,43.3,78,48.6,85.5
-      c7.2,10,12.1,8.3,23.1,5c8.6-2.6,134.4-47.8,140.1-50.2c5.7-2.3,9.2-4,5.3-9.7c-2.8-4.2-36-48.6-53.4-71.9
-      c11.9-3.2,54.2-14.4,58.8-15.7C559,350,559.7,347.4,556.8,344.2z M319.6,392.7c-1.6,0.3-74.6,17.8-78.5,18.7
-      c-3.9,0.9-3.9,0.4-4.3-0.9c-0.4-1.3-86.9-179.6-88.1-181.8c-1.2-2.2-1.1-4,0-4c1.1,0,69-6.1,71.4-6.2s2.1,0.4,3,1.9
-      c0,0,95.7,165.2,97.4,168.1C322.2,391.5,321.2,392.4,319.6,392.7z M525.7,431.3c1.2,1.8,2.3,3-1.3,4.3c-3.7,1.3-123.7,41.8-126,42.8
-      c-2.3,1-4.2,1.3-7.2-3s-42-71.9-42-71.9l127.2-33.1c3.2-1,4.2-1.7,6.2,1.5S524.5,429.5,525.7,431.3z M533.8,341
-      c-2.9,0.6-49.6,12.2-49.6,12.2l-38.2-52.4c-1.1-1.5-2-3,0.7-3.4c2.7-0.4,46.1-8.2,48-8.6c2-0.4,3.7-1,6.1,2.3
-      c2.4,3.3,35.4,45.1,36.7,46.7C538.8,339.4,536.7,340.4,533.8,341z"
-    />
-    <style jsx>{`
-      svg {
-        width: ${props.size};
-        height: ${props.size};
-      }
-    `}</style>
-  </svg>
-);
-
-export const ReactSVG = props => (
-  <svg
-    id="Layer_1"
-    data-name="Layer 1"
-    xmlns="http://www.w3.org/2000/svg"
-    viewBox="0 0 823.85795 733"
-  >
-    <path
-      d="M677.3796,237.5782v-.00013q-13.15347-4.51184-26.52168-8.35682,2.2162-9.00546,4.09815-18.08832c20.07545-97.45293,6.9495-175.96071-37.87563-201.8043C574.10386-15.45755,503.81433,10.386,432.82482,72.16188q-10.49272,9.15182-20.513,18.8248-6.70815-6.42994-13.651-12.60818c-74.39859-66.06005-148.97227-93.89436-193.75-67.97423-42.93648,24.85548-55.65406,98.66342-37.5803,191.01912q2.69729,13.71891,6.08893,27.28742c-10.55176,2.99712-20.74263,6.19108-30.49228,9.58925C55.70506,268.70848,0,316.37033,0,365.80411c0,51.06,59.796,102.27313,150.64951,133.32334q11.05033,3.759,22.27764,6.96393-3.64625,14.61321-6.47177,29.4132c-17.23148,90.75134-3.77376,162.80916,39.04973,187.51155,44.23076,25.50438,118.46536-.71107,190.75293-63.898q8.57022-7.49254,17.19138-15.84583,10.8498,10.46823,22.27032,20.3197c70.01968,60.25168,139.17161,84.58221,181.9586,59.81425,44.19066-25.581,58.549-102.99126,39.90285-197.17376q-2.13293-10.79053-4.94043-22.02241,7.82091-2.308,15.32089-4.78369C762.41022,468.13563,823.858,417.546,823.858,365.80425,823.858,316.19178,766.35894,268.20914,677.3796,237.5782ZM455.93017,98.71275c60.82417-52.934,117.67049-73.83348,143.5724-58.89543h.00007c27.58633,15.9116,38.31685,80.072,20.98329,164.213q-1.70415,8.22186-3.70447,16.37829A843.11184,843.11184,0,0,0,506.62552,203.0058c-22.63859-32.23516-46.09393-61.54615-69.6405-86.91573Q446.24028,107.16747,455.93017,98.71275ZM243.25691,408.03318q11.17562,21.58674,23.35692,42.63018,12.4265,21.46008,25.86547,42.30946a749.41279,749.41279,0,0,1-75.92641-12.20726C223.8269,457.27737,232.789,432.86312,243.25691,408.03318Zm-.0401-82.7737c-10.24913-24.30852-19.018-48.20874-26.17895-71.28855,23.50634-5.26129,48.57329-9.56006,74.69032-12.82331q-13.1139,20.4542-25.25653,41.50721Q254.34864,303.68289,243.21681,325.25948ZM261.9249,366.65q16.266-33.856,35.04269-66.41735v.00731q18.75838-32.54479,39.94668-63.59526c24.50177-1.85227,49.62338-2.82209,75.01843-2.82209,25.50817,0,50.66256.97714,75.15708,2.844q20.95959,30.97974,39.695,63.38007,18.82881,32.46544,35.51663,66.10381-16.50682,33.96338-35.39993,66.68714l-.00366.00007q-18.71978,32.51932-39.52367,63.77022c-24.44345,1.7466-49.70364,2.64707-75.44509,2.64707-25.63571,0-50.575-.79833-74.5919-2.35527q-21.33273-31.16146-40.26388-63.86883Q278.245,400.51974,261.9249,366.65Zm295.46159,83.76919q12.43081-21.55706,23.8929-43.65115h.00007a747.44376,747.44376,0,0,1,27.66653,72.4735,746.90393,746.90393,0,0,1-76.85248,13.10041Q545.15579,471.63431,557.38649,450.41918ZM580.944,325.28495Q569.52351,303.615,557.24445,282.4141v.00007q-12.081-20.868-25.05238-41.20092c26.2884,3.31791,51.472,7.72974,75.12057,13.1296A750.753,750.753,0,0,1,580.944,325.28495ZM412.32291,141.25908A752.67935,752.67935,0,0,1,460.805,199.78624q-48.65887-2.29927-97.37267-.02188C379.43872,178.65711,395.83523,159.04842,412.32291,141.25908ZM222.5434,40.86376C250.10793,24.9084,311.05246,47.66,375.2895,104.696c4.10546,3.64609,8.22921,7.46354,12.36021,11.41226a843.39474,843.39474,0,0,0-70.18008,86.8501A859.96423,859.96423,0,0,0,207.53247,220.044q-3.15066-12.6187-5.66241-25.38408v.00359C186.38506,115.5322,196.667,55.84191,222.5434,40.86376ZM182.3707,472.19q-10.24566-2.93259-20.33792-6.3661c-40.17271-13.73122-73.34857-31.57522-96.0893-51.04533-20.43275-17.50133-30.75117-34.875-30.75117-48.97441,0-29.99646,44.72664-68.26231,119.3222-94.26995q14.04424-4.87509,28.35573-8.922A844.0802,844.0802,0,0,0,223.02473,366.661,856.90089,856.90089,0,0,0,182.3707,472.19ZM373.09815,632.61472c-31.96537,27.94364-63.99632,47.76386-92.22443,57.736l-.00366-.00013c-25.36593,8.95844-45.56892,9.21367-57.7797,2.17319-25.98942-14.9856-36.78916-72.84909-22.05526-150.45626q2.62813-13.75741,6.01605-27.35312c33.74463,7.46354,71.0989,12.83435,111.02376,16.07206a856.43741,856.43741,0,0,0,70.71972,87.37518Q381.12547,625.58012,373.09815,632.61472Zm40.19824-39.779c-16.68093-18.00074-33.318-37.90848-49.56871-59.322q23.65952.92986,48.20142.93338,25.19087,0,49.73277-1.10475A748.43012,748.43012,0,0,1,413.2964,592.83569Zm213.71969,48.96723c-4.90764,26.44873-14.774,44.0814-26.97381,51.14381-25.96389,15.02922-81.49033-4.50652-141.36655-56.0333q-10.29837-8.85989-20.71716-18.88671c23.21474-25.3914,46.41485-54.91026,69.05717-87.68879,39.83-3.53291,77.45769-9.31215,111.58149-17.19849q2.51586,10.17258,4.45924,19.92955v-.00013C631.3003,574.71465,632.47794,612.3679,627.01609,641.80291Zm29.87976-175.78216h-.00359c-4.50293,1.49124-9.12622,2.93148-13.837,4.3279-10.42787-33.00808-24.50177-68.10909-41.71868-104.36958a825.689,825.689,0,0,0,40.09617-102.84915c8.42612,2.44291,16.60791,5.01338,24.4908,7.72974,76.24,26.241,122.74232,65.0464,122.74232,94.94445C788.6659,397.65278,738.44091,438.99953,656.89585,466.02076Z"
-      fill="#00D1FF"
-    />
-    <path
-      d="M411.929,292.23677a73.56917,73.56917,0,1,1-73.56735,73.56735A73.56713,73.56713,0,0,1,411.929,292.23677"
-      fill="#00D1FF"
-    />
-    <style jsx>{`
-      svg {
-        width: ${props.size};
-        height: ${props.size};
-      }
-    `}</style>
-  </svg>
-);
diff --git a/components/learn-components/accord-guide.js b/components/learn-components/accord-guide.js
deleted file mode 100644
index 47b051fac..000000000
--- a/components/learn-components/accord-guide.js
+++ /dev/null
@@ -1,73 +0,0 @@
-import React, { Component } from 'react';
-import fetch from 'isomorphic-unfetch';
-import marked from 'marked';
-import { Accordion, Icon, Loader } from 'semantic-ui-react';
-
-export default class AccordGuide extends Component {
-  constructor(props) {
-    super(props);
-    marked.setOptions({
-      renderer: new marked.Renderer(),
-      gfm: true,
-      tables: true,
-      breaks: true,
-      pedantic: false,
-      sanitize: true,
-      smartLists: true,
-      smartypants: false,
-    });
-    this.state = {
-      markdown: '',
-      activeIndex: -1,
-    };
-  }
-
-  handleClick = (e, titleProps) => {
-    const { index } = titleProps;
-    const { activeIndex } = this.state;
-    const newIndex = activeIndex === index ? -1 : index;
-
-    this.setState({ activeIndex: newIndex });
-  };
-
-  async componentDidMount() {
-    try {
-      const request = await fetch(this.props.url);
-      const response = await request.text();
-      await this.setState({ markdown: response, loading: false });
-    } catch (err) {
-      console.log(err);
-    }
-  }
-
-  render() {
-    const { activeIndex } = this.state;
-    return (
-      <div>
-        <main>
-          <Accordion fluid styled>
-            <Accordion.Title
-              active={activeIndex === 0}
-              onClick={this.handleClick}
-              index={0}
-            >
-              <Icon name="dropdown" />
-              {this.props.title}
-            </Accordion.Title>
-            <Accordion.Content active={activeIndex === 0}>
-              {this.state.markdown === '' ? (
-                <Loader active inline="centered" />
-              ) : (
-                <div
-                  dangerouslySetInnerHTML={{
-                    __html: marked(this.state.markdown),
-                  }}
-                />
-              )}
-            </Accordion.Content>
-          </Accordion>
-        </main>
-      </div>
-    );
-  }
-}
diff --git a/components/learn-components/row-contributors.js b/components/learn-components/row-contributors.js
deleted file mode 100644
index 507970432..000000000
--- a/components/learn-components/row-contributors.js
+++ /dev/null
@@ -1,65 +0,0 @@
-import React from 'react';
-import { Card, Image, Icon, Header } from 'semantic-ui-react';
-
-export default props => (
-  <div className="main">
-    <Card fluid href={props.userPage}>
-      <div className="root">
-        <div className="profile">
-          <Header as="h4">
-            <Image shape="circular" src={props.userImage} />
-            <Header.Content>{props.userName}</Header.Content>
-          </Header>
-        </div>
-        <div className="stats">
-          {props.contributions.map((contribution, index) => {
-            const icon =
-              contribution.type === 'topic'
-                ? 'code'
-                : contribution.type === 'article' ? 'book' : 'film';
-            const valueVerb =
-              contribution.count === 1
-                ? contribution.type
-                : `${contribution.type}s`;
-            return (
-              <Header
-                key={index}
-                style={{ paddingRight: '30px', margin: '2rem 0 1rem' }}
-                as="h6"
-                icon
-              >
-                <Icon name={icon} />
-                <Header.Subheader
-                >{`${contribution.count} ${valueVerb}`}</Header.Subheader>
-              </Header>
-            );
-          })}
-        </div>
-      </div>
-    </Card>
-    <style jsx>{`
-      .main {
-        margin-bottom: 10px;
-      }
-      .root {
-        display: flex;
-        flex-direction: row;
-        flex-wrap: wrap;
-        justify-content: flex-start;
-        align-content: center;
-        align-items: center;
-      }
-      .profile {
-        order: 0;
-        flex: 1 1 auto;
-        align-self: center;
-        padding: 20px;
-      }
-      .stats {
-        order: 0;
-        flex: 0 1 auto;
-        align-self: center;
-      }
-    `}</style>
-  </div>
-);
diff --git a/components/learn-components/subject-banner.js b/components/learn-components/subject-banner.js
deleted file mode 100644
index cd95d8116..000000000
--- a/components/learn-components/subject-banner.js
+++ /dev/null
@@ -1,37 +0,0 @@
-import React from 'react';
-
-export default props => (
-  <div>
-    <div className="header">
-      <div className={`logo ${props.logo}`} />
-      <div className="headline">{props.subject}</div>
-    </div>
-    <style jsx>{`
-      .header {
-        display: flex;
-        flex-direction: row;
-        flex-wrap: wrap;
-        justify-content: center;
-        align-content: center;
-        align-items: center;
-        background-color: #f4f7fb;
-        min-height: 200px;
-      }
-      .logo {
-        order: 1;
-        flex: 0 1 auto;
-        align-self: auto;
-        font-size: 4.5em;
-        padding-right: 30px;
-      }
-      .headline {
-        order: 2;
-        flex: 0 1 auto;
-        align-self: auto;
-        font-size: 5em;
-        text-align: center;
-        text-transform: capitalize;
-      }
-    `}</style>
-  </div>
-);
diff --git a/components/learn/subject-banner.js b/components/learn/subject-banner.js
new file mode 100644
index 000000000..0b6dbdba3
--- /dev/null
+++ b/components/learn/subject-banner.js
@@ -0,0 +1,63 @@
+import React from 'react';
+import styled from 'react-emotion';
+import { space } from 'styled-system';
+import { Flex, Box } from 'grid-emotion';
+
+import { baseContainer, Title, SubTitle, Button, breakpoints } from '../../utils/base.styles';
+
+const BannerSection = styled.section`
+  ${space};
+  background: #374355;
+  min-height: 150px;
+`;
+
+const Container = styled.section`
+  ${baseContainer};
+  & .logo {
+    padding: 10px 15px;
+    font-size: 10rem;
+    background: #fff;
+    ${breakpoints.xs} {
+      text-align: left;
+      font-size: 4.5rem;
+    }
+  }
+  & .title {
+    text-align: left;
+  }
+  & .subtitle {
+    text-align: left;
+    margin-left: 0px;
+    margin-right: 0px;
+    margin-bottom: 0px;
+  }
+  & .edit {
+    display: block;
+    ${breakpoints.xs} {
+      display: none;
+    }
+  }
+`;
+
+export default ({ title, subTitle, icon }) => (
+  <BannerSection py={[1, 3]} px={[2, 1]}>
+    <Container>
+      <Flex wrap={false} align={'flex-end'}>
+        <Box flex={'0 1 auto'}>
+          <div className="logo">
+            <i className={icon} />
+          </div>
+        </Box>
+        <Box flex={'1 1 auto'} px={[2, 2, 3]}>
+          <Title className="title">{title}</Title>
+          <SubTitle className="subtitle">{subTitle}</SubTitle>
+        </Box>
+        <Box flex={['0 1 auto']}>
+          <Button inverted medium className="edit">
+            EDIT
+          </Button>
+        </Box>
+      </Flex>
+    </Container>
+  </BannerSection>
+);
diff --git a/components/learn/subject-card.js b/components/learn/subject-card.js
new file mode 100644
index 000000000..d6c0a2f63
--- /dev/null
+++ b/components/learn/subject-card.js
@@ -0,0 +1,120 @@
+import React from 'react';
+import styled from 'react-emotion';
+import { Flex, Box } from 'grid-emotion';
+import { space, fontSize } from 'styled-system';
+import Link from 'next/link';
+import LearningIcon from 'react-icons/lib/fa/book';
+import EstimateIcon from 'react-icons/lib/md/access-time';
+
+import { breakpoints, Button } from '../../utils/base.styles';
+
+const SubjectCard = styled.div`
+  ${space};
+  text-decoration: none;
+  width: calc(25% - 24px);
+  margin-top: 24px;
+  display: inline-block;
+  min-height: 200px;
+  border: 1px solid #d3d3d3;
+  transition: all 0.25s;
+  & .logo {
+    background: #ebeff3;
+    text-align: center;
+    padding: 1.5rem 0 1.5rem 0;
+    font-size: 7rem;
+    ${breakpoints.xs} {
+      font-size: 5rem;
+    }
+  }
+  & .content {
+    padding: 10px;
+    color: #444;
+    background: #fff;
+    text-align: left;
+  }
+  & .title {
+    color: #374355;
+    font-weight: 500;
+    margin-bottom: 0px;
+    margin-top: 0px;
+    ${breakpoints.xs} {
+      font-size: 1.2rem;
+    }
+  }
+  & .subtitle {
+    ${fontSize};
+    color: #8393a7;
+    margin-top: 0px;
+    margin-bottom: 10px;
+  }
+  & .stats {
+    ${fontSize};
+    color: #8393a7;
+  }
+  & .icons {
+    font-size: 1.2rem;
+    margin-right: 0.25rem;
+    margin-bottom: 0.25rem;
+    color: #8393a7;
+  }
+  & .view {
+    width: 100%;
+    display: block;
+    text-align: center;
+  }
+  ${breakpoints.md} {
+    width: calc(33% - 30px);
+  }
+  ${breakpoints.sm} {
+    width: calc(50% - 50px);
+    margin: 20px auto;
+  }
+  ${breakpoints.xs} {
+    width: 90%;
+    margin: 20px auto;
+  }
+`;
+
+export default ({ subject }) => (
+  <SubjectCard>
+    <div className="logo">
+      <i className={subject.icon} />
+    </div>
+    <div className="content">
+      <h3 className="title">Learn {subject.title}</h3>
+      <p className="subtitle" fontSize={[12, 14, 16]}>
+        {subject.domain}
+      </p>
+      <Flex className="stats" wrap>
+        <Box pr={[1]} pb={[1]} fontSize={[12, 14, 16]}>
+          <LearningIcon className="icons" />
+          <span>20 learning</span>
+        </Box>
+        <Box fontSize={[12, 14, 16]}>
+          <EstimateIcon className="icons" />
+          <span>20 hours</span>
+        </Box>
+      </Flex>
+      {subject.isGuideCompleted ? (
+        <Link
+          href={`/learn/subject?subject=${subject.subjectId}&chapter=${subject.path.split('/').reverse()[0]}`}
+          as={subject.path}>
+          <Button inverted medium fluid href={subject.path} className="view">
+            VIEW GUIDE
+          </Button>
+        </Link>
+      ) : (
+        <Button
+          inverted
+          medium
+          fluid
+          href={subject.githubUrl}
+          target="_blank"
+          rel="noopener noreferrer"
+          className="view">
+          VIEW GUIDE
+        </Button>
+      )}
+    </div>
+  </SubjectCard>
+);
diff --git a/components/learn/subject-marked.js b/components/learn/subject-marked.js
new file mode 100644
index 000000000..517100dad
--- /dev/null
+++ b/components/learn/subject-marked.js
@@ -0,0 +1,127 @@
+import React from 'react';
+import marked from 'marked';
+import styled from 'react-emotion';
+import ContentLoader from 'react-content-loader';
+
+import { breakpoints } from '../../utils/base.styles';
+
+const Marked = styled.div`
+  background-color: #fff;
+  table {
+    width: 100%;
+    border-collapse: collapse;
+    text-align: center;
+  }
+  td,
+  tr,
+  table th th {
+    text-align: center;
+  }
+  th {
+    background: #f5f5f5;
+    font-weight: 400;
+    text-align: center;
+  }
+  td,
+  th {
+    padding: 15px;
+    border: 1px solid #ccc;
+    text-align: center;
+  }
+  ${breakpoints.xs} {
+    table,
+    thead,
+    tbody,
+    th,
+    td,
+    tr {
+      display: block;
+      text-align: center;
+      margin-bottom: 30px;
+    }
+    thead tr {
+      position: absolute;
+      top: -9999px;
+      left: -9999px;
+    }
+    tr {
+      border: 1px solid #ccc;
+      text-align: center;
+    }
+    td {
+      border: none;
+      border-bottom: 1px solid #eee;
+      position: relative;
+      padding-left: 50%;
+      text-align: center;
+    }
+    td:before {
+      text-align: center;
+      position: absolute;
+      left: 6px;
+      width: 30%;
+      font-size: 0.7rem;
+    }
+    td:nth-of-type(1):before {
+      content: 'Concept';
+    }
+    td:nth-of-type(1) {
+      background: #f4f6fb;
+      text-align: center;
+    }
+    td:nth-of-type(2):before {
+      content: 'Best video';
+    }
+    td:nth-of-type(3):before {
+      content: 'Best text';
+    }
+    td:nth-of-type(4):before {
+      content: 'Duration';
+    }
+    td:nth-of-type(5):before {
+      content: 'Prereq.';
+    }
+  }
+`;
+
+export default class MarkedJS extends React.Component {
+  constructor(props) {
+    super(props);
+    marked.setOptions({
+      renderer: new marked.Renderer(),
+      gfm: true,
+      tables: true,
+      breaks: false,
+      pedantic: false,
+      sanitize: true,
+      smartLists: true,
+      smartypants: false,
+    });
+  }
+
+  render() {
+    return (
+      <div>
+        {this.props.loading ? (
+          <div>
+            <ContentLoader height={200} width={600} speed={2} primaryColor={'#f3f3f3'} secondaryColor={'#ecebeb'}>
+              <rect x="0" y="0" rx="3" ry="3" width="600" height="10" />
+              <rect x="0" y="20" rx="3" ry="3" width="500" height="10" />
+              <rect x="0" y="40" rx="3" ry="3" width="600" height="10" />
+              <rect x="0" y="60" rx="3" ry="3" width="500" height="10" />
+              <rect x="0" y="80" rx="3" ry="3" width="600" height="10" />
+              <rect x="0" y="100" rx="3" ry="3" width="500" height="10" />
+              <rect x="0" y="120" rx="3" ry="3" width="500" height="10" />
+            </ContentLoader>
+          </div>
+        ) : (
+          <Marked
+            dangerouslySetInnerHTML={{
+              __html: marked(this.props.markdown),
+            }}
+          />
+        )}
+      </div>
+    );
+  }
+}
diff --git a/components/learn/syllabus-tree/syllabus-tree-component.js b/components/learn/syllabus-tree/syllabus-tree-component.js
new file mode 100644
index 000000000..a36311fce
--- /dev/null
+++ b/components/learn/syllabus-tree/syllabus-tree-component.js
@@ -0,0 +1,85 @@
+import React from 'react';
+import styled from 'react-emotion';
+
+export default class TreeView extends React.PureComponent {
+  constructor(props) {
+    super(props);
+    this.state = {
+      collapsed: this.props.collapsed,
+    };
+  }
+
+  unitClick = (...args) => {
+    this.setState({ collapsed: !this.state.collapsed });
+    if (this.props.onClick) {
+      this.props.onClick(...args);
+    }
+  };
+
+  render() {
+    const Container = styled.div`
+      overflow-y: hidden;
+      .unit {
+        display: flex;
+        flex-wrap: nowrap;
+        justify-content: center;
+        align-content: stretch;
+        align-items: center;
+        padding: 0.5rem;
+        border-left: 2px solid #fff;
+        :hover {
+          background-color: #f5f5f5;
+          border-left: 2px solid #374355;
+          cursor: pointer;
+        }
+      }
+
+      .unit-active {
+        background-color: #f5f5f5;
+        border-left: 2px solid #f5f5f5;
+        :hover {
+        }
+      }
+
+      .chapters {
+        padding-left: 0.8rem;
+      }
+
+      .chapters-collapsed {
+        height: 0px;
+      }
+
+      .pointer {
+        cursor: pointer;
+        user-select: none;
+        transition: all 0.1s;
+        order: 2;
+        flex: 0 1 auto;
+        align-self: auto;
+        color: #b9c3d2;
+        :after {
+          content: '▾';
+        }
+      }
+
+      .pointer-collapsed {
+        transform: rotate(-90deg);
+        color: #374355;
+      }
+    `;
+
+    return (
+      <Container>
+        <div
+          className={this.props.unitName === this.props.activeUnit ? 'unit unit-active' : 'unit'}
+          onClick={this.unitClick}>
+          {this.props.UnitNameComponent}
+          <div className={this.state.collapsed ? 'pointer pointer-collapsed' : 'pointer'} />
+        </div>
+        <div className={this.state.collapsed ? 'chapters chapters-collapsed' : 'chapters'}>
+          {this.state.collapsed ? null : this.props.children}
+        </div>
+      </Container>
+    );
+  }
+}
diff --git a/components/learn/syllabus-tree/syllabus-tree-container.js b/components/learn/syllabus-tree/syllabus-tree-container.js
new file mode 100644
index 000000000..1f2436b5e
--- /dev/null
+++ b/components/learn/syllabus-tree/syllabus-tree-container.js
@@ -0,0 +1,93 @@
+import React from 'react';
+import styled from 'react-emotion';
+import { withRouter } from 'next/router';
+import TreeView from './syllabus-tree-component';
+
+export default withRouter(
+  class SyllabusTree extends React.Component {
+    state = {
+      nodeStateTracker: [false, ...this.props.data.map(() => true).slice(1)],
+      activeUnit: this.props.data[0].unit,
+      activeChapter: this.props.data[0].chapters[0].cdnUrl,
+    };
+
+    handleClick = i => {
+      this.setState({
+        nodeStateTracker: [
+          ...this.state.nodeStateTracker.slice(0, i),
+          !this.state.nodeStateTracker[i],
+          ...this.state.nodeStateTracker.slice(i + 1),
+        ],
+      });
+    };
+
+    clickOnChapter(chapter, unitName) {
+      if (chapter.cdnUrl !== this.state.activeChapter) {
+        this.setState({ activeChapter: chapter.cdnUrl, activeUnit: unitName });
+        this.props.changeChapter(chapter);
+      }
+    }
+
+    render() {
+      const Container = styled.div`
+        & .chapter {
+          padding: 5px;
+          font-size: 0.85rem;
+          user-select: none;
+          border-left: 2px solid #fff;
+          color: #888;
+          :hover {
+            background-color: #f5f5f5;
+            border-left: 2px solid #374355;
+            cursor: pointer;
+          }
+        }
+
+        & .active {
+          color: #374355;
+          background-color: #f5f5f5;
+          border-left: 2px solid #374355;
+          :hover {
+            cursor: default;
+          }
+        }
+
+        & .unit_name {
+          order: 1;
+          flex: 1 1 auto;
+          align-self: auto;
+        }
+      `;
+
+      return (
+        <Container>
+          {this.props.data.map((unitNode, i) => {
+            const UnitNameComponent = (
+              <div className="unit_name" key={unitNode.unit} onClick={() => this.handleClick(i)}>
+                {unitNode.unit}
+              </div>
+            );
+            return (
+              <TreeView
+                key={i}
+                unitName={unitNode.unit}
+                UnitNameComponent={UnitNameComponent}
+                activeUnit={this.state.activeUnit}
+                collapsed={this.state.nodeStateTracker[i]}
+                onClick={() => this.handleClick(i)}>
+                {unitNode.chapters.map(chapter => (
+                  <div
+                    className={`chapter ${this.state.activeChapter === chapter.cdnUrl ? 'active' : ''}`}
+                    key={chapter.cdnUrl}
+                    onClick={() => this.clickOnChapter(chapter, unitNode.unit)}>
+                    {chapter.name}
+                  </div>
+                ))}
+              </TreeView>
+            );
+          })}
+        </Container>
+      );
+    }
+  }
+);
diff --git a/components/marked-js.js b/components/marked-js.js
deleted file mode 100644
index 8fbad66a7..000000000
--- a/components/marked-js.js
+++ /dev/null
@@ -1,35 +0,0 @@
-import React from 'react';
-import marked from 'marked';
-import { Loader } from 'semantic-ui-react';
-
-export default class MarkedJS extends React.Component {
-  constructor(props) {
-    super(props);
-    marked.setOptions({
-      renderer: new marked.Renderer(),
-      gfm: true,
-      tables: true,
-      breaks: false,
-      pedantic: false,
-      sanitize: true,
-      smartLists: true,
-      smartypants: false,
-    });
-  }
-
-  render() {
-    return (
-      <div>
-        {this.props.loading ? (
-          <Loader active inline="centered" />
-        ) : (
-          <div
-            dangerouslySetInnerHTML={{
-              __html: marked(this.props.markdown),
-            }}
-          />
-        )}
-      </div>
-    );
-  }
-}
diff --git a/components/row-events.js b/components/row-events.js
deleted file mode 100644
index 5b106cb79..000000000
--- a/components/row-events.js
+++ /dev/null
@@ -1,82 +0,0 @@
-import React from 'react';
-import { Card, Icon, Image } from 'semantic-ui-react';
-import format from 'date-fns/format';
-import PropTypes from 'prop-types';
-
-const extractImageUrl = input => {
-  const regex = /<img.*?src=['"](.*?)['"]/;
-  const matches = regex.exec(input);
-  return matches ? matches[1] : '';
-};
-
-const RowEvent = ({
-  link,
-  isMultiLine,
-  fluid,
-  description,
-  name,
-  venue,
-  time,
-  yesCount,
-  status,
-}) => {
-  return (
-    <Card fluid={fluid} raised centered target="_blank" href={link}>
-      {description ? <Image src={extractImageUrl(description)} /> : <div />}
-      <Card.Content>
-        <Card.Header>{name}</Card.Header>
-        <div className="card_venue">
-          <Card.Meta>{venue === undefined ? 'Online' : venue.name}</Card.Meta>
-        </div>
-      </Card.Content>
-      <Card.Content extra>
-        <span className="card_icons">
-          <Icon name="clock" />
-          {format(time, "h:mm A, ddd MMM Do 'YY")}
-        </span>
-        <span className="card_icons">
-          <Icon name="users" />
-          {yesCount}
-          {status === 'upcoming' ? ' attending' : ' attended'}
-        </span>
-        <span className="card_icons">
-          <Icon name="log out" />
-          {venue === undefined ? 'Free session' : 'Free entry'}
-        </span>
-      </Card.Content>
-      <style jsx>{`
-        .card_venue {
-          margin-top: 15px;
-        }
-        .card_icons {
-          margin-right: 15px;
-          display: ${isMultiLine ? 'block' : null};
-          text-align: left;
-        }
-        @media (max-width: 700px) {
-          .card_icons {
-            display: flex;
-            margin: 5px 0;
-          }
-        }
-      `}</style>
-    </Card>
-  );
-};
-
-RowEvent.defaultProps = {
-  fluid: false,
-};
-
-RowEvent.propTypes = {
-  fluid: PropTypes.bool,
-  link: PropTypes.string,
-  description: PropTypes.string,
-  name: PropTypes.string,
-  venue: PropTypes.object,
-  time: PropTypes.number,
-  yesCount: PropTypes.number,
-  status: PropTypes.string,
-};
-
-export default RowEvent;
diff --git a/components/subscribe.js b/components/subscribe.js
deleted file mode 100644
index a87956d45..000000000
--- a/components/subscribe.js
+++ /dev/null
@@ -1,126 +0,0 @@
-import React, { Component } from 'react';
-import { Form, Message, Grid } from 'semantic-ui-react';
-import { baseEventsURL, subscribeURL } from '../utils/urls';
-
-class Subscribe extends Component {
-  state = {
-    subscribersEmail: '',
-    submittingEmail: false,
-    emailSubmittingError: '',
-    subscriberEmailPosted: false,
-  };
-
-  handleChange = event => {
-    this.setState({
-      subscribersEmail: event.target.value,
-      emailSubmittingError: '',
-    });
-  };
-
-  handleSubmit = () => {
-    this.setState({ emailSubmittingError: '' });
-    const emailRegx = /^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
-    const email = this.state.subscribersEmail;
-    if (!email) {
-      this.setState({
-        emailSubmittingError: 'Please enter a email',
-      });
-      return;
-    }
-    if (!emailRegx.test(email)) {
-      this.setState({
-        emailSubmittingError: 'Please enter a valid email',
-      });
-      return;
-    }
-    this.postSubscriberEmail(email);
-  };
-
-  async postSubscriberEmail(subscribersEmail) {
-    await this.setState({ submittingEmail: true });
-    const postSubscriberEmailRequest = await fetch(
-      `${baseEventsURL}${subscribeURL}`,
-      {
-        method: 'post',
-        headers: { 'Content-Type': 'application/json' },
-        body: JSON.stringify({ email: subscribersEmail }),
-      },
-    );
-    if (postSubscriberEmailRequest.status === 200) {
-      this.setState({
-        subscriberEmailPosted: true,
-        submittingEmail: false,
-        emailSubmittingError: '',
-      });
-    } else {
-      this.setState({
-        submittingEmail: false,
-        emailSubmittingError: 'Submission Failed Try Again.',
-      });
-    }
-  }
-  render() {
-    const hasError = this.state.emailSubmittingError !== '';
-
-    return (
-      <div>
-        <section className="update">
-          <div>
-            <h3 className="taglines">
-              We are constanly updating our platform.<br />If you would like to
-              stay informed about our updates, drop your email.
-            </h3>
-            <div className="update_content">
-              {this.state.subscriberEmailPosted ? (
-                <h2>Thank you, we will keep you posted</h2>
-              ) : (
-                <Form onSubmit={this.handleSubmit} error={hasError}>
-                  <Form.Group>
-                    <Grid stackable columns={2}>
-                      <Grid.Column width={12}>
-                        <Form.Input
-                          placeholder="Enter email address"
-                          name="email"
-                          value={this.state.subscribersEmail}
-                          onChange={this.handleChange}
-                          disabled={this.state.submittingEmail}
-                        />
-                      </Grid.Column>
-                      <Grid.Column width={4}>
-                        <Form.Button
-                          loading={this.state.submittingEmail}
-                          color="pink"
-                          content="Subscribe"
-                        />
-                      </Grid.Column>
-                    </Grid>
-                  </Form.Group>
-                  <Message
-                    error
-                    header="Action Forbidden"
-                    content={this.state.emailSubmittingError}
-                  />
-                </Form>
-              )}
-            </div>
-          </div>
-        </section>
-        <style jsx>{`
-          .taglines {
-            padding-bottom: 20px;
-          }
-          .update_content {
-            display: flex;
-            flex-direction: row;
-            flex-wrap: wrap;
-            justify-content: center;
-            align-content: center;
-            align-items: center;
-          }
-        `}</style>
-      </div>
-    );
-  }
-}
-
-export default Subscribe;
diff --git a/config/meta-info.json b/config/meta-info.json
index 578de1dd0..84544aa00 100644
--- a/config/meta-info.json
+++ b/config/meta-info.json
@@ -1,8 +1,7 @@
 {
   "home": {
     "title": "Coderplex | Learn, Collaborate and Create with a Community",
-    "description":
-      "We're a non-profit startup on a mission to improve the state of tech across India",
+    "description": "We're a non-profit startup on a mission to improve the state of tech across India",
     "image": ""
   },
   "learn": {
@@ -21,5 +20,10 @@
     "title": "Online and Offline Tech Events | Coderplex",
     "description": "We host frequent online and offline events, from sessions to competitions",
     "image": ""
+  },
+  "login": {
+    "title": "Login Or Register | Coderplex",
+    "description": "Join our community",
+    "image": ""
   }
 }
diff --git a/hocs/public-page.js b/hocs/public-page.js
deleted file mode 100644
index f03453572..000000000
--- a/hocs/public-page.js
+++ /dev/null
@@ -1,25 +0,0 @@
-import React from 'react';
-
-import Header from '../components/header';
-import Footer from '../components/footer';
-
-export default Page => {
-  return class PublicPage extends React.Component {
-    static async getInitialProps(ctx) {
-      let initialProps = {};
-      if (Page.getInitialProps) {
-        initialProps = await Page.getInitialProps(ctx);
-      }
-      return { ...initialProps };
-    }
-    render() {
-      return (
-        <div>
-          <Header {...this.props} />
-          <Page {...this.props} />
-          <Footer />
-        </div>
-      );
-    }
-  };
-};
diff --git a/jest.setup.js b/jest.setup.js
index d64b40d3c..c41592ade 100644
--- a/jest.setup.js
+++ b/jest.setup.js
@@ -1,6 +1,5 @@
 /* eslint import/no-unassigned-import:0 */
 import 'raf/polyfill';
-
 import Enzyme from 'enzyme';
 import Adapter from 'enzyme-adapter-react-16';
 
diff --git a/next.config.js b/next.config.js
index 6c8ce8887..dabf74431 100644
--- a/next.config.js
+++ b/next.config.js
@@ -2,96 +2,388 @@ const { ANALYZE } = process.env;
 
 // For now copy paste from utils mockdata later we will fetch these from API
 // We cannot import from utils/mockData.js because this file is not transpiled so does not support es6 modules
+
 const listOfSubjects = [
   {
     id: '2132',
     title: 'Laravel',
     domain: 'Web Development',
-    url: '/learn/laravel',
+    path: '/learn/laravel/Choosing-laravel',
     subjectId: 'laravel',
     icon: 'devicon-laravel-plain colored',
     learningCount: '20',
-    learnGuideStatus: true,
+    isGuideCompleted: true,
+    githubUrl: 'https://github.com/coderplex/learn/blob/master/web-dev/Backend/Learn-Laravel.md',
   },
   {
     id: '213',
     title: 'ReactJS',
     domain: 'Web Development',
-    url: '/learn/reactjs',
+    path: '/learn/reactjs/Choosing-ReactJS',
     subjectId: 'reactjs',
     icon: 'devicon-react-original colored',
     learningCount: '28',
-    learnGuideStatus: false,
+    isGuideCompleted: true,
+    githubUrl:
+      'https://github.com/coderplex/learn/blob/master/web-dev/Frontend/Libraries%20%26%20Frameworks/Learn-React.md',
   },
   {
     id: '2131',
     title: 'Go',
     domain: 'Programming Language',
-    url: '/learn/go',
+    path: '/learn/go',
     subjectId: 'go',
-    icon: 'devicon-go-plain ',
+    icon: 'devicon-go-plain colored',
     learningCount: '7',
-    learnGuideStatus: false,
+    isGuideCompleted: false,
+    githubUrl: 'https://github.com/coderplex/learn/blob/master/programming-languages/Go/learn-go.md',
   },
   {
     id: '21fa3',
     title: 'Android',
     domain: 'Mobile Technology',
-    url: '/learn/android',
+    path: '/learn/android',
     subjectId: 'android',
     icon: 'devicon-android-plain colored',
     learningCount: '9',
-    learnGuideStatus: false,
+    isGuideCompleted: false,
+    githubUrl: 'https://github.com/coderplex/learn/blob/master/mobile-dev/Android/learn-android.md',
   },
   {
     id: '21afasda3',
     title: 'Rails',
     domain: 'Backend Development',
-    url: '/learn/rails',
+    path: '/learn/rails',
     subjectId: 'rails',
     icon: 'devicon-rails-plain colored',
     learningCount: '14',
-    learnGuideStatus: false,
+    isGuideCompleted: false,
+    githubUrl: 'https://github.com/coderplex/learn/blob/master/web-dev/Backend/Learn-Rails.md',
   },
   {
     id: '21wqerwqe3',
     title: 'Python',
     domain: 'Programming Language',
-    url: '/learn/python',
+    path: '/learn/python',
     subjectId: 'python',
     icon: 'devicon-python-plain colored',
     learningCount: '32',
-    learnGuideStatus: false,
+    isGuideCompleted: false,
+    githubUrl: 'https://github.com/coderplex/learn/tree/master/programming-languages/Python',
   },
   {
     id: '2bxcvbx13',
     title: 'iOS',
     domain: 'Mobile Technology',
-    url: '/learn/ios',
+    path: '/learn/ios',
     subjectId: 'ios',
     icon: 'devicon-swift-plain colored',
     learningCount: '45',
-    learnGuideStatus: false,
+    isGuideCompleted: false,
+    githubUrl: 'https://github.com/coderplex/learn/blob/master/mobile-dev/iOS/Learn-iOS.md',
   },
   {
     id: '2bxczzxcvbx13',
     title: 'Javascript',
     domain: 'Programming Language',
-    url: '/learn/javascript',
+    path: '/learn/javascript',
     subjectId: 'javascript',
     icon: 'devicon-javascript-plain colored',
     learningCount: '31',
-    learnGuideStatus: false,
+    isGuideCompleted: false,
+    githubUrl: 'https://github.com/coderplex/learn/blob/master/web-dev/Frontend/learn-intermediate.md',
   },
   {
     id: '2bxdfasczzxcvbx13',
     title: 'Angular',
     domain: 'Frontend Development',
-    url: '/learn/angular',
+    path: '/learn/angular',
     subjectId: 'angular',
     icon: 'devicon-angularjs-plain colored',
     learningCount: '3',
-    learnGuideStatus: false,
+    isGuideCompleted: false,
+    githubUrl:
+      'https://github.com/coderplex/learn/blob/master/web-dev/Frontend/Libraries%20%26%20Frameworks/Learn-Angular.md',
+  },
+];
+
+const laravelSyllabus = [
+  {
+    unit: 'Preface',
+    chapters: [
+      {
+        name: 'Choosing laravel',
+        cdnUrl: 'https://rawgit.com/coderplex/learn/cdn/laravel/choosing-laravel.md',
+      },
+      {
+        name: 'Prerequisites',
+        cdnUrl: 'https://rawgit.com/coderplex/learn/cdn/laravel/prerequisites.md',
+      },
+      {
+        name: 'Installation',
+        cdnUrl: 'https://rawgit.com/coderplex/learn/cdn/laravel/installation.md',
+      },
+    ],
+  },
+  {
+    unit: 'Models, Views, Controllers and Routes',
+    chapters: [
+      {
+        name: 'Introduction to MVC',
+        cdnUrl: 'https://rawgit.com/coderplex/learn/cdn/laravel/introduction-to-mvc.md',
+      },
+      {
+        name: 'Basic Routing and Views',
+        cdnUrl: 'https://rawgit.com/coderplex/learn/cdn/laravel/basic-routing-and-views.md',
+      },
+      {
+        name: 'Pass Data to Views',
+        cdnUrl: 'https://rawgit.com/coderplex/learn/cdn/laravel/pass-data-to-views.md',
+      },
+      {
+        name: 'Database Setup',
+        cdnUrl: 'https://rawgit.com/coderplex/learn/cdn/laravel/database-setup.md',
+      },
+      {
+        name: 'Working with Query Builder',
+        cdnUrl: 'https://rawgit.com/coderplex/learn/cdn/laravel/working-with-query-builder.md',
+      },
+      {
+        name: 'Eloquent',
+        cdnUrl: 'https://rawgit.com/coderplex/learn/cdn/laravel/eloquent.md',
+      },
+      {
+        name: 'Controllers',
+        cdnUrl: 'https://rawgit.com/coderplex/learn/cdn/laravel/controllers.md',
+      },
+      {
+        name: 'Route Model Binding',
+        cdnUrl: 'https://rawgit.com/coderplex/learn/cdn/laravel/route-model-binding.md',
+      },
+    ],
+  },
+  {
+    unit: 'Front-End',
+    chapters: [
+      {
+        name: 'Layouts and Structures',
+        cdnUrl: 'https://rawgit.com/coderplex/learn/cdn/laravel/layouts-and-structures.md',
+      },
+      {
+        name: 'Form Requests and CSRF',
+        cdnUrl: 'https://rawgit.com/coderplex/learn/cdn/laravel/form-requests-and-CSRF.md',
+      },
+      {
+        name: 'Form Validation',
+        cdnUrl: 'https://rawgit.com/coderplex/learn/cdn/laravel/form-validation.md',
+      },
+      {
+        name: 'Rendering',
+        cdnUrl: 'https://rawgit.com/coderplex/learn/cdn/laravel/rendering',
+      },
+      {
+        name: 'Laravel Mix',
+        cdnUrl: 'https://rawgit.com/coderplex/learn/cdn/laravel/laravel-mix.md',
+      },
+      {
+        name: 'Flash Messaging',
+        cdnUrl: 'https://rawgit.com/coderplex/learn/cdn/laravel/flash-messaging.md',
+      },
+    ],
+  },
+  {
+    unit: 'Relationships',
+    chapters: [
+      {
+        name: 'Eloquent Relationships',
+        cdnUrl: 'https://rawgit.com/coderplex/learn/cdn/laravel/eloquent-relationships.md',
+      },
+      {
+        name: 'One-to-Many Relationship',
+        cdnUrl: 'https://rawgit.com/coderplex/learn/cdn/laravel/one-to-many-relationship.md',
+      },
+      {
+        name: 'Pivot Tables',
+        cdnUrl: 'https://rawgit.com/coderplex/learn/cdn/laravel/pivot-tables.md',
+      },
+    ],
+  },
+  {
+    unit: 'Authentication',
+    chapters: [
+      {
+        name: 'Scaffold Authentication',
+        cdnUrl: 'https://rawgit.com/coderplex/learn/cdn/laravel/scaffold-authentication.md',
+      },
+      {
+        name: 'Manual Authentication',
+        cdnUrl: 'https://rawgit.com/coderplex/learn/cdn/laravel/manual-authentication.md',
+      },
+    ],
+  },
+  {
+    unit: 'View Composers and Archives',
+    chapters: [
+      {
+        name: 'Add Archives',
+        cdnUrl: 'https://rawgit.com/coderplex/learn/cdn/laravel/add-archives.md',
+      },
+      {
+        name: 'View Composers',
+        cdnUrl: 'https://rawgit.com/coderplex/learn/cdn/laravel/view-composers.md',
+      },
+    ],
+  },
+  {
+    unit: 'Testing & Seeding',
+    chapters: [
+      {
+        name: 'Testing',
+        cdnUrl: 'https://rawgit.com/coderplex/learn/cdn/laravel/testing.md',
+      },
+      {
+        name: 'Seeding',
+        cdnUrl: 'https://rawgit.com/coderplex/learn/cdn/laravel/seeding.md',
+      },
+    ],
+  },
+];
+
+const reactSyllabus = [
+  {
+    unit: 'Preface',
+    chapters: [
+      {
+        name: 'Choosing ReactJS',
+        cdnUrl: 'https://rawgit.com/coderplex/learn/cdn/react/choosing-reactjs.md',
+      },
+      {
+        name: 'Prerequisites',
+        cdnUrl: 'https://rawgit.com/coderplex/learn/cdn/react/prerequisites.md',
+      },
+      {
+        name: 'Philosophy',
+        cdnUrl: 'https://rawgit.com/coderplex/learn/cdn/react/philosophy.md',
+      },
+    ],
+  },
+  {
+    unit: 'Getting Started',
+    chapters: [
+      {
+        name: 'Trying React',
+        cdnUrl: 'https://rawgit.com/coderplex/learn/cdn/react/trying-react.md',
+      },
+      {
+        name: 'Create React App',
+        cdnUrl: 'https://rawgit.com/coderplex/learn/cdn/react/create-react-app.md',
+      },
+      {
+        name: 'JavaScript XML Syntax',
+        cdnUrl: 'https://rawgit.com/coderplex/learn/cdn/react/javascript-xml-syntax.md',
+      },
+    ],
+  },
+  {
+    unit: 'Components',
+    chapters: [
+      {
+        name: 'Custom Components',
+        cdnUrl: 'https://rawgit.com/coderplex/learn/cdn/react/custom-components.md',
+      },
+      {
+        name: 'Rendering',
+        cdnUrl: 'https://rawgit.com/coderplex/learn/cdn/react/rendering.md',
+      },
+      {
+        name: 'Conditional Rendering',
+        cdnUrl: 'https://rawgit.com/coderplex/learn/cdn/react/conditional-rendering.md',
+      },
+      {
+        name: 'Data Flow',
+        cdnUrl: 'https://rawgit.com/coderplex/learn/cdn/react/data-flow.md',
+      },
+      {
+        name: 'Lifecycle',
+        cdnUrl: 'https://rawgit.com/coderplex/learn/cdn/react/lifecycle.md',
+      },
+      {
+        name: 'Events',
+        cdnUrl: 'https://rawgit.com/coderplex/learn/cdn/react/events.md',
+      },
+    ],
+  },
+  {
+    unit: 'Forms',
+    chapters: [
+      {
+        name: 'Controlled Components',
+        cdnUrl: 'https://rawgit.com/coderplex/learn/cdn/react/controlled-components.md',
+      },
+      {
+        name: 'Uncontrolled Components',
+        cdnUrl: 'https://rawgit.com/coderplex/learn/cdn/react/uncontrolled-components.md',
+      },
+    ],
+  },
+  {
+    unit: 'Composition',
+    chapters: [
+      {
+        name: 'Lifting State Up',
+        cdnUrl: 'https://rawgit.com/coderplex/learn/cdn/react/lifting-state-up.md',
+      },
+      {
+        name: 'Composition vs Inheritance',
+        cdnUrl: 'https://rawgit.com/coderplex/learn/cdn/react/composition-vs-inheritance.md',
+      },
+      {
+        name: 'Context',
+        cdnUrl: 'https://rawgit.com/coderplex/learn/cdn/react/context.md',
+      },
+    ],
+  },
+  {
+    unit: 'Tools',
+    chapters: [
+      {
+        name: 'Developer Tools',
+        cdnUrl: 'https://rawgit.com/coderplex/learn/cdn/react/developer-tools.md',
+      },
+      {
+        name: 'Proptypes',
+        cdnUrl: 'https://rawgit.com/coderplex/learn/cdn/react/proptypes.md',
+      },
+      {
+        name: 'Error Boundaries',
+        cdnUrl: 'https://rawgit.com/coderplex/learn/cdn/react/error-boundaries.md',
+      },
+    ],
+  },
+  {
+    unit: 'In depth discussions',
+    chapters: [
+      {
+        name: 'JSX In Depth',
+        cdnUrl: 'https://rawgit.com/coderplex/learn/cdn/react/jsx-in-depth.md',
+      },
+      {
+        name: 'Synthetic Events',
+        cdnUrl: 'https://rawgit.com/coderplex/learn/cdn/react/synthetic-events.md',
+      },
+      {
+        name: 'React Without JSX',
+        cdnUrl: 'https://rawgit.com/coderplex/learn/cdn/react/react-without-jsx.md',
+      },
+      {
+        name: 'React without ES6',
+        cdnUrl: 'https://rawgit.com/coderplex/learn/cdn/react/react-without-es6.md',
+      },
+      {
+        name: 'Reconcilation Diff Algorithm',
+        cdnUrl: 'https://rawgit.com/coderplex/learn/cdn/react/reconcilation---diff-algorithm.md',
+      },
+    ],
   },
 ];
 
@@ -99,6 +391,13 @@ module.exports = {
   webpack: (config, { dev }) => {
     /* Enable only in Production */
     if (!dev) {
+      // Preact
+      // console.log('> Using Preact instead of React');
+      // config.resolve.alias = {
+      //   react: 'preact-compat/dist/preact-compat',
+      //   'react-dom': 'preact-compat/dist/preact-compat',
+      //   'react-emotion': 'preact-emotion',
+      // };
       if (ANALYZE) {
         const { BundleAnalyzerPlugin } = require('webpack-bundle-analyzer');
         config.plugins.push(
@@ -106,7 +405,7 @@ module.exports = {
             analyzerMode: 'server',
             analyzerPort: 8888,
             openAnalyzer: true,
-          }),
+          })
         );
       }
     }
@@ -118,12 +417,33 @@ module.exports = {
       '/events': { page: '/events' },
       '/learn': { page: '/learn' },
       '/space': { page: '/space' },
+      '/login': { page: '/login' },
+    };
+    const getSubject = subjectId => {
+      switch (subjectId) {
+        case 'laravel':
+          return laravelSyllabus;
+        case 'reactjs':
+          return reactSyllabus;
+        default:
+          return [];
+      }
     };
     for (const subject of listOfSubjects) {
-      routes[subject.url] = {
-        page: '/learn/subject',
-        query: { id: subject.subjectId },
-      };
+      for (const unit of getSubject(subject.subjectId)) {
+        const chapters = unit.chapters;
+        for (const chapter of chapters) {
+          const chapterSlug = chapter.name.replace(/\s/gi, '-');
+          const route = `learn/${subject.subjectId}/${chapterSlug}`;
+          routes[route] = {
+            page: '/learn/subject',
+            query: {
+              subject: subject.subjectId,
+              chapter: chapterSlug,
+            },
+          };
+        }
+      }
     }
     console.log(routes);
     return routes;
diff --git a/package.json b/package.json
index 237235d85..273c2280d 100644
--- a/package.json
+++ b/package.json
@@ -6,13 +6,15 @@
   "scripts": {
     "test": "xo && jest",
     "lint":
-      "prettier 'utils/**/*.js' 'components/**/*.js' 'pages/**/*.js' 'lib/**/*.js' 'hocs/**/*.js' '*.js' --write --single-quote --print-width='80' --trailing-comma='all' && xo --fix",
+      "prettier 'utils/**/*.js' 'components/**/*.js' 'pages/**/*.js' 'lib/**/*.js' 'hocs/**/*.js' '*.js' '*.json' --write && xo && markdownlint .",
     "precommit": "lint-staged",
     "analyze": "cross-env ANALYZE=1 next build",
     "dev": "cross-env NODE_ENV=development node server.js",
     "start": "cross-env NODE_ENV=production next start",
     "build": "next build",
-    "export": "cross-env NODE_ENV=production yarn build && next export"
+    "export": "cross-env NODE_ENV=production yarn build && next export",
+    "add-contributor": "all-contributors add",
+    "generate-contributors": "all-contributors generate"
   },
   "xo": {
     "parser": "babel-eslint",
@@ -34,42 +36,61 @@
   },
   "lint-staged": {
     "*.js": [
-      "prettier --write --single-quote --print-width=80 --trailing-comma=all",
+      "prettier --write --single-quote --print-width=120 --trailing-comma=es5 --jsx-bracket-same-line",
       "xo",
       "jest --findRelatedTests",
       "git add"
-    ]
+    ],
+    "**/*.md": ["prettier", "markdownlint", "git add"],
+    ".github/CONTRIBUTING.md": ["doctoc", "prettier", "git add"]
   },
   "dependencies": {
-    "date-fns": "1.29.0",
+    "babel-plugin-emotion": "^8.0.10",
+    "date-fns": "^1.29.0",
+    "emotion": "^8.0.10",
+    "emotion-server": "^8.0.10",
+    "get-port": "^3.2.0",
+    "grid-emotion": "^2.1.0",
     "isomorphic-unfetch": "2.0.0",
+    "lodash.take": "^4.1.1",
     "marked": "^0.3.6",
     "next": "^4.1.0",
     "nprogress": "^0.2.0",
     "path-match": "1.2.4",
+    "preact": "^8.2.6",
+    "preact-compat": "^3.17.0",
+    "preact-emotion": "^8.0.10",
     "prop-types": "^15.5.10",
     "react": "^16.0.0",
+    "react-content-loader": "^1.7.1",
     "react-dom": "^16.0.0",
+    "react-emotion": "^8.0.10",
+    "react-event-timeline": "^1.4.0",
     "react-headroom": "^2.1.6",
     "react-icons": "^2.2.5",
-    "semantic-ui-react": "^0.76.0"
+    "styled-system": "^1.0.8"
   },
   "devDependencies": {
+    "all-contributors-cli": "^4.10.0",
     "babel-eslint": "^8.0.1",
     "babel-plugin-lodash": "^3.2.11",
     "cross-env": "^5.0.2",
+    "doctoc": "^1.3.0",
     "enzyme": "^3.1.1",
     "enzyme-adapter-react-16": "^1.0.4",
     "enzyme-to-json": "^3.2.2",
     "eslint-config-prettier": "^2.3.0",
     "eslint-plugin-react": "^7.1.0",
     "husky": "^0.14.3",
-    "jest": "^21.2.1",
-    "lint-staged": "^5.0.0",
+    "jest": "^22.0.0",
+    "lint-staged": "^6.0.0",
+    "markdownlint-cli": "^0.5.0",
     "opn": "^5.1.0",
     "prettier": "^1.7.0",
     "raf": "^3.4.0",
     "react-test-renderer": "^16.0.0",
+    "typescript": "^2.6.1",
+    "typescript-styled-plugin": "^0.2.0",
     "webpack-bundle-analyzer": "^2.8.3",
     "xo": "^0.18.2"
   },
diff --git a/pages/_document.js b/pages/_document.js
new file mode 100644
index 000000000..dc445a090
--- /dev/null
+++ b/pages/_document.js
@@ -0,0 +1,33 @@
+import React from 'react';
+import Document, { Head, Main, NextScript } from 'next/document';
+import { extractCritical } from 'emotion-server';
+
+export default class MyDocument extends Document {
+  static getInitialProps({ renderPage }) {
+    const page = renderPage();
+    const styles = extractCritical(page.html);
+    return { ...page, ...styles };
+  }
+
+  constructor(props) {
+    super(props);
+    const { __NEXT_DATA__, ids } = props;
+    if (ids) {
+      __NEXT_DATA__.ids = ids;
+    }
+  }
+
+  render() {
+    return (
+      <html lang="en">
+        <Head>
+          <style dangerouslySetInnerHTML={{ __html: this.props.css }} />
+        </Head>
+        <body>
+          <Main />
+          <NextScript />
+        </body>
+      </html>
+    );
+  }
+}
diff --git a/pages/events.js b/pages/events.js
index f5c486ee9..eadae11bb 100644
--- a/pages/events.js
+++ b/pages/events.js
@@ -1,39 +1,58 @@
 import React from 'react';
 import fetch from 'isomorphic-unfetch';
-import { Card, Divider } from 'semantic-ui-react';
+import { Flex, Box } from 'grid-emotion';
+import styled from 'react-emotion';
+import { space } from 'styled-system';
 
-import publicPage from '../hocs/public-page';
-import CommonBanner from '../components/common-banner';
-import { baseEventsURL, futureEventsURL, pastEventsURL } from '../utils/urls';
-import RowEvent from '../components/row-events';
-import {
-  TextContentLoader,
-  CardContentLoader,
-} from '../components/content-loaders';
+import Layout from '../components/common/layout';
+import BannerSection from '../components/common/banner';
+import { Container, SubTitle, Button } from '../utils/base.styles';
+import { baseEventsURL, futureEventsURL, pastEventsURL, imagePlaceholderURL } from '../utils/urls';
+import EventCard from '../components/events/event-card';
+import EventLoader from '../components/events/event-content-loader';
 
-class Events extends React.Component {
+const EventsSection = styled.section`
+  ${space};
+  background: #fff;
+  position: relative;
+  & .loadmore_div {
+    text-align: center;
+    margin-top: 2rem;
+    margin-bottom: 0.8rem;
+  }
+  & .event_type_title {
+    color: #374355;
+    font-weight: bold;
+  }
+`;
+
+export default class Events extends React.Component {
   state = {
-    pastEvents: null,
-    futureEvents: null,
+    pastEvents: [],
+    pastEventsLoadLimit: 2,
+    futureEvents: [],
+    futureEventsLoadLimit: 2,
     fetchError: null,
     loading: true,
   };
 
   async componentDidMount() {
     try {
-      const pastEvents = await fetch(
-        `${baseEventsURL}${pastEventsURL}`,
-      ).then(res => {
-        if (res.ok) return res.json();
-        throw new Error('Failed to Retrieve Events');
-      });
-      const futureEvents = await fetch(
-        `${baseEventsURL}${futureEventsURL}`,
-      ).then(res => {
-        if (res.ok) return res.json();
-        throw new Error('Failed to Retrieve Events');
-      });
-      await this.setState({
+      let pastEvents;
+      let futureEvents;
+      const pastEventsResponse = await fetch(`${baseEventsURL}${pastEventsURL}`);
+      if (pastEventsResponse.ok) {
+        pastEvents = await pastEventsResponse.json();
+      } else {
+        throw new Error('Failed to Retrieve past events');
+      }
+      const futureEventsResponse = await fetch(`${baseEventsURL}${futureEventsURL}`);
+      if (futureEventsResponse.ok) {
+        futureEvents = await futureEventsResponse.json();
+      } else {
+        throw new Error('Failed to retieve future events');
+      }
+      this.setState({
         pastEvents,
         futureEvents,
         fetchError: null,
@@ -41,7 +60,7 @@ class Events extends React.Component {
       });
     } catch (err) {
       console.log(err);
-      await this.setState({
+      this.setState({
         pastEvents: null,
         futureEvents: null,
         fetchError: err.message,
@@ -50,95 +69,98 @@ class Events extends React.Component {
     }
   }
 
-  renderEvents() {
-    if (this.state.fetchError) {
-      return <div>{this.state.fetchError}</div>;
+  renderEvents(events, loadLimit) {
+    if (this.state.loading) {
+      return [1, 2].map(i => {
+        return <EventLoader key={i} />;
+      });
+    } else if (events.length === 0) {
+      return (
+        <SubTitle inverted color="#222">
+          No upcoming events yet, check back later
+        </SubTitle>
+      );
+    } else if (events === null) {
+      return (
+        <SubTitle inverted color="#222">
+          Oops! somethings went wrong while fetching the events
+        </SubTitle>
+      );
     }
     return (
       <div>
-        <section>
-          <h2>Upcoming events</h2>
-          <div>
-            {this.state.futureEvents.map(event => (
-              <Card.Group key={event.id}>
-                <RowEvent
-                  name={event.name}
-                  yesCount={event.yes_rsvp_count}
-                  time={event.time}
-                  venue={event.venue}
-                  link={event.link}
-                  status={event.status}
-                  fluid={true}
-                />
-              </Card.Group>
-            ))}
-          </div>
-        </section>
-        <Divider />
-        <section>
-          <h2>Recent events</h2>
-          <div>
-            {this.state.pastEvents.map(event => (
-              <Card.Group key={event.id}>
-                <RowEvent
-                  key={event.id}
-                  name={event.name}
-                  yesCount={event.yes_rsvp_count}
-                  time={event.time}
-                  venue={event.venue}
-                  link={event.link}
-                  status={event.status}
-                  fluid={true}
-                />
-              </Card.Group>
-            ))}
-          </div>
-        </section>
-        <style jsx>{`
-          section {
-            margin: 50px 0;
-          }
-        `}</style>
+        {events.slice(0, loadLimit).map(event => {
+          console.log(event);
+          const regexForImageSrc = /<img.*?src="([^">]*\/([^">]*?))".*?>/g;
+          const imgs = regexForImageSrc.exec(event.description);
+          const imageSrc = imgs
+            ? imgs[1]
+            : event.featured_photo ? event.featured_photo.photo_link : imagePlaceholderURL;
+          return (
+            <EventCard
+              showImg
+              key={event.id}
+              image={imageSrc}
+              name={event.name}
+              location={event.venue ? event.venue.name : 'Online'}
+              online={!event.venue}
+              time={event.time}
+              attendees={event.yes_rsvp_count}
+              tense={event.status}
+              link={event.link}
+            />
+          );
+        })}
       </div>
     );
   }
 
+  renderLoadMoreButton(eventsTotalLength, loadLimit, isPastEvent) {
+    return loadLimit >= eventsTotalLength ? null : (
+      <div className="loadmore_div" mb={[5, 5]}>
+        <Button inverted medium onClick={() => this.loadMore(isPastEvent)}>
+          Load more
+        </Button>
+      </div>
+    );
+  }
+
+  loadMore(isPastEvent) {
+    return isPastEvent
+      ? this.setState({ pastEventsLoadLimit: this.state.pastEventsLoadLimit + 5 })
+      : this.setState({ futureEventsLoadLimit: this.state.futureEventsLoadLimit + 5 });
+  }
+
   render() {
+    const { loading } = this.state;
     return (
-      <div>
-        <CommonBanner
-          pageTitle="Events"
-          pageSubTitle="Because you cannot change the world alone"
-        />
-        <div>
-          {this.state.loading ? (
-            <div style={{ backgroundColor: '#FFF' }}>
-              <TextContentLoader topPadding="80px" />
-              <CardContentLoader />
-              <CardContentLoader />
-              <CardContentLoader />
-            </div>
-          ) : (
-            <main>{this.renderEvents()}</main>
-          )}
-        </div>
-        <style jsx>{`
-          main {
-            background-color: #ffffff;
-            padding-top: 30px;
-            padding-bottom: 30px;
-            padding-left: 30px;
-            padding-right: 30px;
-            min-height: calc(100vh - 70px);
-            display: flex;
-            justify-content: center;
-            align-items: center;
-            flex-direction: column;
-          }
-        `}</style>
-      </div>
+      <Layout>
+        <BannerSection title="Online & Offline Events" subTitle="Because you cannot change the world alone" />
+        <EventsSection py={[2, 2]} px={[2, 1]}>
+          <Container>
+            <Flex pb={[2, 2]} direction="column" align="center" justify="center">
+              <Box width={[1, 0.75]}>
+                <h3 className="event_type_title" inverted color="#222">
+                  Upcoming Events
+                </h3>
+                {this.renderEvents(this.state.futureEvents, this.state.futureEventsLoadLimit)}
+                {!loading &&
+                  this.renderLoadMoreButton(this.state.futureEvents.length, this.state.futureEventsLoadLimit, false)}
+              </Box>
+            </Flex>
+            <Flex direction="column" align="center" justify="center">
+              <Box width={[1, 0.75]}>
+                <h3 className="event_type_title" inverted color="#222">
+                  Recent Events
+                </h3>
+                {this.renderEvents(this.state.pastEvents, this.state.pastEventsLoadLimit)}
+                {!loading &&
+                  this.renderLoadMoreButton(this.state.pastEvents.length, this.state.pastEventsLoadLimit, true)}
+              </Box>
+            </Flex>
+          </Container>
+        </EventsSection>
+      </Layout>
     );
   }
 }
-
-export default publicPage(Events);
diff --git a/pages/index.js b/pages/index.js
index 0be9ef4d3..e36e07076 100644
--- a/pages/index.js
+++ b/pages/index.js
@@ -1,266 +1,321 @@
 import React from 'react';
+import styled from 'react-emotion';
+import { space } from 'styled-system';
+import { Flex, Box } from 'grid-emotion';
+import take from 'lodash.take';
 import Link from 'next/link';
 
-import { Card, Button, Divider, Grid, Segment } from 'semantic-ui-react';
-import { baseEventsURL, indexPageEventURL } from '../utils/urls';
-import RowEvent from '../components/row-events';
-import publicPage from '../hocs/public-page';
-import Subscribe from '../components/subscribe';
+import Hide, { Container, Button, Title, SubTitle, breakpoints } from '../utils/base.styles';
+import { listOfSubjects } from '../utils/mock-data';
+import Layout from '../components/common/layout';
+import SubjectCard from '../components/learn/subject-card';
+import EventCard from '../components/events/event-card';
 
-const indexPageLearns = [
-  {
-    subjectId: 'react',
-    url: 'learn/react',
-    title: 'ReactJS',
-    subject: 'Frontend Web Development',
-  },
-  {
-    subjectId: 'laravel',
-    url: 'learn/laravel',
-    title: 'Laravel',
-    subject: 'Backend Web Development',
-  },
-  {
-    subjectId: 'go',
-    url: 'learn/go',
-    title: 'Go',
-    subject: 'Programming Language',
-  },
-  {
-    subjectId: 'introductiontoCS',
-    url: 'learn/introductiontoCS',
-    title: 'Introduction to C.S',
-    subject: 'Computer Science',
-  },
-  {
-    subjectId: 'blockchain',
-    url: 'learn/blockchain',
-    title: 'Blockchain',
-    subject: 'Decentralized Systems',
-  },
-  {
-    subjectId: 'android',
-    url: 'learn/android',
-    title: 'Android',
-    subject: 'Mobile Development',
-  },
-];
+import {
+  baseEventsURL,
+  indexPageEventURL,
+  heroPatternURL,
+  heroBannerURL,
+  spaceCoverURL,
+  eventsCoverURL,
+  imagePlaceholderURL,
+} from '../utils/urls';
 
-class Home extends React.Component {
+const HeroSection = styled.section`
+  ${space};
+  background-color: #fff;
+  position: relative;
+  text-align: center;
+  background-image: url(${heroPatternURL});
+  & h1 {
+    font-size: 2.5rem;
+    font-weight: 300;
+    color: #36434d;
+    ${breakpoints.md} {
+      font-size: 2.3rem;
+    }
+    ${breakpoints.sm} {
+      font-size: 1.8rem;
+    }
+    ${breakpoints.xs} {
+      font-size: 1.5rem;
+      line-height: 1.8rem;
+    }
+  }
+  & img {
+    width: 100%;
+  }
+`;
+
+const LearnSection = styled.section`
+  ${space};
+  background-color: #f6f6f6;
+  position: relative;
+  text-align: center;
+`;
+
+const SpaceSection = styled.section`
+  ${space};
+  background-color: #7657fb;
+  position: relative;
+  text-align: left;
+  color: #fff;
+  & .box {
+    position: relative;
+    z-index: 2;
+    & img {
+      width: 100%;
+      min-height: 332px;
+    }
+    ${breakpoints.sm} {
+      text-align: center;
+    }
+    ${breakpoints.xs} {
+      text-align: center;
+    }
+  }
+`;
+
+const EventsSection = styled.section`
+  ${space};
+  background: #6f19ed;
+  color: #fff;
+  position: relative;
+  text-align: left;
+  padding-bottom: 30px;
+  & img {
+    width: 100%;
+    min-height: 427px;
+  }
+  & .box {
+    position: relative;
+    z-index: 2;
+    & img {
+      width: 100%;
+      ${breakpoints.sm} {
+        width: 50%;
+      }
+      ${breakpoints.xs} {
+        width: 100%;
+      }
+    }
+    ${breakpoints.sm} {
+      text-align: center;
+    }
+    ${breakpoints.xs} {
+      text-align: center;
+    }
+  }
+`;
+
+const DiscordSection = styled.section`
+  ${space};
+  background: #fff;
+  color: #222;
+  text-align: center;
+  position: relative;
+`;
+
+const SpaceOverlay = styled.div`
+  background: #6f19ed;
+  height: 200px;
+  width: 100%;
+  position: absolute;
+  z-index: 1;
+  bottom: 0;
+  left: 0;
+  ${breakpoints.sm} {
+    display: none;
+  }
+  ${breakpoints.xs} {
+    display: none;
+  }
+`;
+
+class UpcomingEvent extends React.Component {
   state = {
-    indexPageEvent: '',
+    events: null,
+    loading: true,
+    fetchError: null,
   };
-
   async componentDidMount() {
     try {
-      const requestEvent = await fetch(`${baseEventsURL}${indexPageEventURL}`);
-      const requestEventJson = await requestEvent.json();
+      let events;
+      const eventsResponse = await fetch(`${baseEventsURL}${indexPageEventURL}`);
+      if (eventsResponse.ok) {
+        events = await eventsResponse.json();
+      } else {
+        throw new Error('Failed to Retrieve past events');
+      }
       await this.setState({
-        indexPageEvent: requestEventJson[0],
+        events,
+        fetchError: null,
+        loading: false,
       });
     } catch (err) {
       console.log(err);
+      await this.setState({
+        event: null,
+        fetchError: err.message,
+        loading: false,
+      });
     }
   }
-
   render() {
+    const { loading, events } = this.state;
+    if (loading) {
+      return (
+        <SubTitle inverted color="#222">
+          Loading..
+        </SubTitle>
+      );
+    } else if (events.length === 0) {
+      return <img src={eventsCoverURL} alt="events__pic" />;
+    } else if (events === null) {
+      return <img src={eventsCoverURL} alt="events__pic" />;
+    }
     return (
       <div>
-        <main>
-          <section className="about">
-            <div className="about__container">
-              <div className="about__content">
-                <img src="/static/banner1280x370.png" alt="words" />
-              </div>
-              <h1 className="about__tag">
-                On a mission to improve the state of tech in India
-              </h1>
-            </div>
-            <Divider section />
-          </section>
-          <section className="learn">
-            <div className="container">
-              <h2 className="titles">Open Source Learning Guides</h2>
-              <h3 className="taglines">
-                Our guides are crowd-sourced recommendations of free online
-                resources to learn any technology
-              </h3>
-              <div className="content">
-                <Card.Group itemsPerRow={3} stackable>
-                  {indexPageLearns.map(learn => (
-                    <Link
-                      href={`/learn/subject?id=${learn.subjectId}`}
-                      as={learn.url}
-                      key={learn.url}
-                    >
-                      <Card header={learn.title} meta={learn.subject} />
-                    </Link>
-                  ))}
-                </Card.Group>
-              </div>
-              <Link href={'/learn'}>
-                <Button basic color="grey">
-                  SEE ALL AVAILABLE GUIDES
-                </Button>
-              </Link>
-            </div>
-          </section>
-          <Divider section />
-          <section className="space">
-            <div className="container">
-              <h2 className="titles">Offline Co-Learning Spaces</h2>
-              <h3 className="taglines">
-                Physical spaces where you can come down to engage in self
-                learning, peer-learning and collaboration.
-              </h3>
-              <div className="space-content">
-                <div className="space_content_info">
-                  These are dynamic learning environments where everyone learns
-                  at their own pace and compliments each other. We also organize
-                  weekly group activities like Open source evenings, casual
-                  hackathons etc.
-                </div>
-                <img
-                  className="space_content_info"
-                  src="https://static.vecteezy.com/system/resources/thumbnails/000/139/966/small/free-office-workspace-vector.png"
-                />
-              </div>
-              <Link href={'/learn'}>
-                <Button basic color="grey">
+        {events.slice(0, 1).map(event => {
+          const regexForImageSrc = /<img.*?src="([^">]*\/([^">]*?))".*?>/g;
+          const imageSrc = regexForImageSrc.exec(event.description);
+          return (
+            <EventCard
+              key={event.id}
+              image={imageSrc ? imageSrc[1] : imagePlaceholderURL}
+              name={event.name}
+              location={event.venue ? event.venue.name : 'Online'}
+              online={!event.venue}
+              time={event.time}
+              attendees={event.yes_rsvp_count}
+              tense={event.status}
+              link={event.link}
+            />
+          );
+        })}
+      </div>
+    );
+  }
+}
+
+export default () => (
+  <Layout>
+    <HeroSection pb={[2, 4]} px={[2, 1]}>
+      <Container>
+        <Flex justify="center" align="center" direction="column">
+          <Box width={1}>
+            <img src={heroBannerURL} alt="words" />
+            <h1>On a mission to improve the state of tech across India</h1>
+          </Box>
+        </Flex>
+      </Container>
+    </HeroSection>
+    <LearnSection pb={[3, 4]} pt={[2, 3]} px={[2, 1]}>
+      <Container>
+        <Flex justify="center" align="center" direction="column">
+          <Box width={1}>
+            <Title inverted>Open Source Learning Guides</Title>
+            <SubTitle inverted>
+              Our guides are crowd-sourced recommendations of free online resources to learn any technology
+            </SubTitle>
+          </Box>
+          <Box width={1}>
+            <Flex justify="space-around" align="center" wrap>
+              {take(listOfSubjects, 4).map(subject => {
+                return <SubjectCard key={subject.path} subject={subject} />;
+              })}
+            </Flex>
+          </Box>
+          <Flex justify="center" width={[1]} pt={[2, 3]}>
+            <Link href={'/learn'}>
+              <Button href={'/learn'} inverted medium>
+                SEE ALL AVAILABLE GUIDES
+              </Button>
+            </Link>
+          </Flex>
+        </Flex>
+      </Container>
+    </LearnSection>
+    <SpaceSection>
+      <Container>
+        <Flex justify="center" wrap>
+          <Box order={[2, 2, 1]} className="box" width={[1, 1, 1 / 2]} py={[0, 2, 3]} px={[2, 4, 3]}>
+            <Title>Offline Co-Learning Spaces</Title>
+            <SubTitle small>
+              Physical spaces where you can come down to engage in self learning, peer-learning and collaboration.
+            </SubTitle>
+            <SubTitle small>
+              These are dynamic learning environments where everyone learns at their own pace and compliments each
+              other. We also organize weekly group activities like Open Source evenings, casual hackathons etc.
+            </SubTitle>
+            <Box
+              mx={['auto', 'auto', 0]}
+              my={['auto', 'auto', 0]}
+              className="box"
+              width={[1]}
+              pt={[2, 3]}
+              pb={[4, 4, 0]}>
+              <Link href={'/space'}>
+                <Button href={'/space'} medium>
                   LEARN MORE ABOUT HACKERSPACE
                 </Button>
               </Link>
-            </div>
-          </section>
-          <Divider section />
-          <section className="events">
-            <div className="container">
-              <h2 className="titles">Online & Offline Events</h2>
-              <h3 className="taglines">
-                We do frequent online and offline events, covering broad range
-                of topics.
-              </h3>
-              <div className="content">
-                {this.state.indexPageEvent ? (
-                  <RowEvent
-                    isMultiLine={true}
-                    key={this.state.indexPageEvent.id}
-                    name={this.state.indexPageEvent.name}
-                    description={this.state.indexPageEvent.description}
-                    yesCount={this.state.indexPageEvent.yes_rsvp_count}
-                    time={this.state.indexPageEvent.time}
-                    venue={this.state.indexPageEvent.venue}
-                    link={this.state.indexPageEvent.link}
-                    status={this.state.indexPageEvent.status}
-                  />
-                ) : (
-                  <div />
-                )}
-              </div>
+            </Box>
+          </Box>
+          <Box order={1} className="box" width={[1, 1, 1 / 2]} pt={4} pb={[0, 1, 4]} px={[3, 4, 3]}>
+            <img className="space__img" alt="sapce__img" src={spaceCoverURL} />
+          </Box>
+        </Flex>
+      </Container>
+      <SpaceOverlay />
+    </SpaceSection>
+    <EventsSection>
+      <Container>
+        <Flex align="center" justify="center" wrap>
+          <Box order={[2, 2, 1]} width={[1, 1, 1 / 2]} px={[4, 4, 3]}>
+            <Hide sm xs>
+              <UpcomingEvent />
+            </Hide>
+          </Box>
+          <Box order={1} width={[1, 1, 1 / 2]} px={[2, 3]} pt={[3, 4, 0]} pb={[4, 4, 0]}>
+            <Title>Online & Offline Events</Title>
+            <SubTitle small>
+              We do frequent online and offline events, covering broad range of topics, from Web Development to Data
+              Science. The goal of these events are to share knowledge, connect with people and enable collaboration. We
+              also partner with local comunities to help them reach a wider audience.
+            </SubTitle>
+            <Box className="box" width={[1]} pt={[2]} px={[3, 0]}>
+              <Hide md lg>
+                <UpcomingEvent />
+              </Hide>
               <Link href={'/events'}>
-                <Button basic color="grey">
+                <Button href={'/events'} medium>
                   VIEW ALL EVENTS
                 </Button>
               </Link>
-            </div>
-          </section>
-          <Divider hidden />
-          <section className="discord-subscribe">
-            <div className="container">
-              <Grid stackable columns={2} divided>
-                <Grid.Column>
-                  <Segment basic>
-                    <section className="discord">
-                      <div>
-                        <h3 className="taglines">
-                          Join our Discord server, and say Hello World!
-                        </h3>
-                        <Button.Group basic>
-                          <Button
-                            content="Join Chat"
-                            icon="discussions"
-                            labelPosition="left"
-                            onClick={() =>
-                              window.open(
-                                'https://discord.gg/dVnQ2Gf',
-                                '_blank',
-                              )}
-                          />
-                        </Button.Group>
-                      </div>
-                    </section>
-                  </Segment>
-                </Grid.Column>
-                <Grid.Column>
-                  <Subscribe />
-                </Grid.Column>
-              </Grid>
-            </div>
-          </section>
-        </main>
-        <style jsx>{`
-          main {
-            background-color: #ffffff;
-          }
-          .about {
-            background-color: #f4f7fb;
-            position: relative;
-            text-align: center;
-          }
-          .about__container {
-            padding-bottom: 30px;
-            min-height: 200px;
-            margin: 0 auto;
-            display: flex;
-            justify-content: center;
-            align-items: center;
-            flex-direction: column;
-          }
-          .about__content img {
-            width: 100%;
-          }
-          .about__tag {
-            font-size: 2.5rem;
-          }
-          .container {
-            background-color: #ffffff;
-            text-align: center;
-            padding: 20px;
-          }
-          .taglines {
-            padding-bottom: 20px;
-          }
-          .content {
-            padding-bottom: 50px;
-          }
-          .space-content {
-            display: flex;
-            flex-wrap: wrap-reverse
-            flex-wrap: wrap;
-            justify-content: center;
-            align-content: center;
-            align-items: center;
-          }
-          .space_content_info {
-            order: 0;
-            flex: 0 1 auto;
-            align-self: center;
-            max-width: 600px;
-            padding-left: 30px;
-            padding-right: 30px;
-          }
-          .discord-subscribe .container {
-            background: #FAFAFA;
-          }
-          @media (max-width: 720px) {
-            .about__tag {
-              font-size: 1.5rem;
-            }
-          }
-        `}</style>
-      </div>
-    );
-  }
-}
-
-export default publicPage(Home);
+            </Box>
+          </Box>
+        </Flex>
+      </Container>
+    </EventsSection>
+    <DiscordSection>
+      <Container>
+        <Box py={[4]} px={[2]}>
+          <Title inverted color="#222">
+            Join our Discord Server, and say &#34;Hello, world!&#34;
+          </Title>
+          <Box pt={[4]} pb={[3]}>
+            <Button
+              href="https://discordapp.com/invite/dVnQ2Gf"
+              rel="noopener noreferrer"
+              target="_blank"
+              inverted
+              large>
+              Join Discord
+            </Button>
+          </Box>
+        </Box>
+      </Container>
+    </DiscordSection>
+  </Layout>
+);
diff --git a/pages/learn/index.js b/pages/learn/index.js
index c19b91875..8c43d0b2e 100644
--- a/pages/learn/index.js
+++ b/pages/learn/index.js
@@ -1,157 +1,43 @@
 import React from 'react';
-import {
-  Card,
-  Icon,
-  Label,
-  Popup,
-  Grid,
-  Button,
-  Search,
-  Header,
-} from 'semantic-ui-react';
-import Link from 'next/link';
+import { Flex } from 'grid-emotion';
+import styled from 'react-emotion';
+import { space } from 'styled-system';
 
-import publicPage from '../../hocs/public-page';
-import CommonBanner from '../../components/common-banner';
+import Layout from '../../components/common/layout';
+import BannerSection from '../../components/common/banner';
+import SubjectCard from '../../components/learn/subject-card';
+import { baseContainer } from '../../utils/base.styles';
+import { listOfSubjects } from '../../utils/mock-data';
 
-import { listOfSubjects, listOfDomains } from '../../utils/mock-data';
+const LearnSection = styled.section`
+  ${space};
+  ${baseContainer};
+  position: relative;
+`;
 
-let numOfFilteredSubjects;
-class Learn extends React.Component {
-  state = {
-    filter: 'All',
-    filteredSubjects: listOfSubjects,
-  };
-
-  componentDidUpdate(prevProps, prevState) {
-    if (prevState.filter !== this.state.filter) {
-      const filteredSubjects = listOfSubjects.filter(subject => {
-        if (this.state.filter === 'All') {
-          return true;
-        }
-        return subject.domain === this.state.filter;
-      });
-      numOfFilteredSubjects = filteredSubjects.length;
-      this.setState({
-        filteredSubjects,
-      });
-    }
+const FilterContainer = styled.div`
+  ${space};
+  & .title_filter {
+    text-align: center;
   }
-
-  render() {
-    return (
-      <div>
-        <CommonBanner
-          pageTitle="Learn"
-          pageSubTitle="Open Source Learning Guides to master your favorite technology"
-        />
-        <main>
-          <section>
-            <div className="filters">
-              {listOfDomains.map(domain => (
-                <Button
-                  key={domain}
-                  style={{ marginBottom: '10px' }}
-                  className="filter_button"
-                  basic
-                  color="pink"
-                  onClick={() => this.setState({ filter: domain })}
-                >
-                  {domain}
-                </Button>
-              ))}
-            </div>
-            <Search placeholder="Search topics" />
-            <Header
-              as="h3"
-              dividing
-              style={{ marginBottom: '40px', textAlign: 'center' }}
-            >
-              {this.state.filter === 'All'
-                ? 'Showing all courses'
-                : numOfFilteredSubjects === 0
-                  ? `Currenlty we dont have any subjects under ${this.state
-                      .filter}`
-                  : `Showing ${numOfFilteredSubjects} courses under ${this.state
-                      .filter}`}
-            </Header>
-            <Grid stackable columns={3}>
-              {this.state.filteredSubjects.map(subject => (
-                <Grid.Column
-                  style={{ paddingBottom: '4.5rem' }}
-                  key={subject.id}
-                >
-                  <Link
-                    as={subject.url}
-                    href={`/learn/subject?id=${subject.subjectId}`}
-                  >
-                    <Card href={subject.url} raised>
-                      <Label attached="bottom right">
-                        <Popup
-                          trigger={
-                            <Icon
-                              style={{ marginRight: '0px' }}
-                              name={
-                                subject.learnGuideStatus ? 'checkmark' : 'info'
-                              }
-                            />
-                          }
-                          position="top center"
-                        >
-                          {subject.learnGuideStatus
-                            ? 'Complete guide'
-                            : 'Guide underconstruction'}
-                        </Popup>
-                      </Label>
-                      <logo className={subject.icon} />
-                      <Card.Content>
-                        <Card.Header>{subject.title}</Card.Header>
-                        <Card.Meta>{subject.domain}</Card.Meta>
-                      </Card.Content>
-                      <Card.Content extra>
-                        <Icon name="student" />
-                        {`${subject.learningCount} learning`}
-                      </Card.Content>
-                    </Card>
-                  </Link>
-                </Grid.Column>
-              ))}
-            </Grid>
-          </section>
-        </main>
-        <style jsx>{`
-          .root {
-            background-color: #ffffff;
-          }
-          main {
-            display: flex;
-            flex-direction: row;
-            flex-wrap: wrap;
-            justify-content: center;
-            align-content: flex-start;
-            align-items: flex-start;
-            background-color: #ffffff;
-            padding: 20px;
-            min-height: calc(100vh - 70px);
-            margin: 0 auto;
-          }
-          section {
-            margin: 50px 0;
-            max-width: 800px;
-          }
-          .filters {
-            margin-bottom: 20px;
-          }
-          logo {
-            font-size: 12em;
-            text-align: center;
-            padding-top: 10px;
-            padding-bottom: 10px;
-          }
-        `}</style>
-      </div>
-    );
+  & .title_fitler_by {
+    font-weight: 400;
   }
-}
+`;
 
-export default publicPage(Learn);
+export default () => (
+  <Layout>
+    <BannerSection title="Open Source Learning Guides" subTitle="To master your favorite technology" />
+    <LearnSection py={[2, 3]} px={[2, 1]}>
+      <FilterContainer my={[1, 2]}>
+        <h2 className="title_filter">Available Guides</h2>
+        {/* <h4 className="title_fitler_by">Filter by domain :</h4> */}
+      </FilterContainer>
+      <Flex justify="space-between" align="center" wrap>
+        {listOfSubjects.map(subject => {
+          return <SubjectCard key={subject.url} subject={subject} />;
+        })}
+      </Flex>
+    </LearnSection>
+  </Layout>
+);
diff --git a/pages/learn/subject.js b/pages/learn/subject.js
index 95d81c8a5..54b9f21d7 100644
--- a/pages/learn/subject.js
+++ b/pages/learn/subject.js
@@ -1,146 +1,170 @@
 import React from 'react';
+import Router from 'next/router';
 import fetch from 'isomorphic-unfetch';
-import { Tab } from 'semantic-ui-react';
+import styled from 'react-emotion';
+import { space } from 'styled-system';
+import { Flex, Box } from 'grid-emotion';
+import ExpandTOC from 'react-icons/lib/fa/angle-double-right';
+import CollapseTOC from 'react-icons/lib/fa/angle-double-left';
 
-import publicPage from '../../hocs/public-page';
-import SubjectBanner from '../../components/learn-components/subject-banner';
-import MarkedJS from '../../components/marked-js';
-import AccordGuide from '../../components/learn-components/accord-guide';
-import { contentsOfLaravel } from '../../utils/mock-data';
-import RowContributors from '../../components/learn-components/row-contributors';
-import { UnderConstructionSVG } from '../../components/icons';
+import { baseContainer, breakpoints } from '../../utils/base.styles';
+import Layout from '../../components/common/layout';
+import BannerSection from '../../components/learn/subject-banner';
+import SyllabusTree from '../../components/learn/syllabus-tree/syllabus-tree-container';
+import SubjectMarkdown from '../../components/learn/subject-marked';
 
-export default publicPage(
-  class Subjects extends React.Component {
-    constructor(props) {
-      super(props);
-      this.state = {
-        overview: '',
-        overviewLoading: true,
-      };
-    }
+import { laravelSyllabus, reactSyllabus, listOfSubjects } from '../../utils/mock-data';
 
-    componentDidMount() {
-      this.requestOverviewContent();
-    }
+const CurriculumSection = styled.section`
+  ${baseContainer};
+  ${space};
+  border: 1px solid #f5f5f5;
+  min-height: 80vh;
+  background-color: #fff;
+  & .box_toc {
+    border-right: 1px solid #f5f5f5;
+    min-width: 250px;
+  }
+  & .toc_title {
+    background-color: #374355;
+    color: #fff;
+    font-weight: 500;
+    padding: 10px;
+  }
+  & .chapter_name {
+    font-weight: 500;
+  }
+`;
+
+const Fab = styled.div`
+  position: sticky;
+  z-index: 3;
+  left: 0;
+  margin-top: 0.5rem;
+  top: 10rem;
+  display: none;
+  & .fab_symbol {
+    opacity: 0.5;
+    padding: 0.05rem;
+    border-radius: 0 5px 5px 0;
+    background: #fff;
+    border: 0.5px solid #555;
+    width: 1.2rem;
+    height: 2rem;
+  }
+  ${breakpoints.xs} {
+    display: inherit;
+  }
+`;
 
-    async requestOverviewContent() {
-      try {
-        const overviewPromise = await fetch(contentsOfLaravel.overview);
-        const overview = await overviewPromise.text();
-        await this.setState({
-          overview,
-          overviewLoading: false,
-        });
-      } catch (err) {
-        console.log(err);
-      }
+export default class Subject extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      activeSubject: this.selectSubject(this.props.url.query.subject),
+      activeChapterContent: '',
+      activeChapterName: '',
+      loading: true,
+      isSidebarOpen: true,
+    };
+  }
+
+  selectSubject(openedGuide) {
+    switch (openedGuide) {
+      case 'laravel':
+        return laravelSyllabus;
+      case 'reactjs':
+        return reactSyllabus;
+      default:
+        return null;
     }
+  }
+  selectChapter(syllabus, chapterName) {
+    return syllabus
+      .map(item => {
+        return item.chapters.find(chapter => chapter.name === chapterName);
+      })
+      .filter(Boolean)[0];
+  }
 
-    render() {
-      return (
-        <div>
-          {this.props.url.query.id === 'laravel' ? (
-            <div>
-              <SubjectBanner
-                logo={contentsOfLaravel.logo}
-                subject={this.props.url.query.id}
-              />
-              <main>
-                <section>
-                  <Tab
-                    menu={{
-                      color: 'pink',
-                      attached: false,
-                      tabular: false,
-                      borderless: true,
-                    }}
-                    panes={[
-                      {
-                        menuItem: 'Overview',
-                        render: () => (
-                          <Tab.Pane attached={false}>
-                            <MarkedJS
-                              loading={this.state.overviewLoading}
-                              markdown={this.state.overview}
-                            />
-                          </Tab.Pane>
-                        ),
-                      },
-                      {
-                        menuItem: 'Guide',
-                        render: () => (
-                          <Tab.Pane attached={false}>
-                            {contentsOfLaravel.guides.map(guide => (
-                              <AccordGuide
-                                key={guide.url}
-                                title={guide.name}
-                                url={guide.url}
-                              />
-                            ))}
-                          </Tab.Pane>
-                        ),
-                      },
-                      {
-                        menuItem: 'Contributors',
-                        render: () => (
-                          <Tab.Pane attached={false}>
-                            {contentsOfLaravel.contributors.map(contributor => (
-                              <RowContributors
-                                key={contributor.userPage}
-                                userPage={contributor.userPage}
-                                userName={contributor.userName}
-                                userImage={contributor.userImage}
-                                contributions={contributor.contributions}
-                              />
-                            ))}
-                          </Tab.Pane>
-                        ),
-                      },
-                    ]}
-                  />
-                </section>
-              </main>
-            </div>
-          ) : (
-            <div className="comingSoon">
-              <UnderConstructionSVG size={'200px'} />
-              <h2>{`${this.props.url.query
-                .id} and other guides coming soon...!`}</h2>
-            </div>
-          )}
-          <style jsx>{`
-            main {
-              background-color: #ffffff;
-              padding-top: 30px;
-              padding-bottom: 30px;
-              padding-left: 30px;
-              padding-right: 30px;
-              min-height: calc(100vh - 70px);
-            }
-            section {
-              max-width: 800px;
-              margin: 0 auto;
-            }
-            h2 {
-              text-transform: uppercase;
-              padding-bottom: 10px;
-            }
-            divide {
-              width: 100%;
-            }
-            .comingSoon {
-              min-height: calc(100vh - 70px);
-              background: #f4f7fb;
-              color: #314159;
-              display: flex;
-              justify-content: center;
-              align-items: center;
-              flex-direction: column;
-            }
-          `}</style>
-        </div>
-      );
+  getChapter(subject, chapter) {
+    const activeSubject = this.selectSubject(subject);
+    const activeChapterName = chapter.replace(/-/gi, ' ');
+    if (activeSubject !== null) {
+      this.setState({
+        activeChapterName,
+        activeSubject,
+      });
+      const activeChapterUrl = this.selectChapter(activeSubject, activeChapterName).cdnUrl;
+      this.getChapterContent(activeChapterUrl);
     }
-  },
-);
+  }
+
+  componentDidMount() {
+    const { subject, chapter } = this.props.url.query;
+    this.getChapter(subject, chapter);
+  }
+
+  componentWillReceiveProps(nextProps) {
+    const { subject, chapter } = nextProps.url.query;
+    this.getChapter(subject, chapter);
+  }
+
+  changeChapter = selectedChapter => {
+    const subjectName = this.props.url.query.subject;
+    const chapterName = selectedChapter.name.replace(/\s/gi, '-');
+    Router.push(`/learn/subject?subject=${subjectName}&chapter=${chapterName}`, `/learn/${subjectName}/${chapterName}`);
+  };
+
+  async getChapterContent(chapterUrl) {
+    this.setState({
+      activeChapterContent: '',
+      loading: true,
+    });
+    const activeChapterContentPromise = await fetch(chapterUrl);
+    const activeChapterContent = await activeChapterContentPromise.text();
+    await this.setState({
+      activeChapterContent,
+      loading: false,
+    });
+  }
+
+  render() {
+    const subject = listOfSubjects.find(item => item.subjectId === this.props.url.query.subject);
+    return this.state.activeSubject === null ? (
+      <Layout>
+        <BannerSection
+          textInverted
+          title={`Learn ${subject.title}`}
+          subTitle={`Curriculum for ${this.props.url.query.subject.toUpperCase()} and others Coming soon!!`}
+          icon={subject.icon}
+        />
+      </Layout>
+    ) : (
+      <Layout>
+        <BannerSection textInverted title={`Learn ${subject.title}`} subTitle={subject.domain} icon={subject.icon} />
+        <CurriculumSection my={[0, 4]}>
+          <Flex column={false}>
+            {this.state.isSidebarOpen ? (
+              <Box width={[0, 0.2]} flex={'1 1 auto'} className="box_toc">
+                <div className="toc_title">Table of content</div>
+                <SyllabusTree data={this.state.activeSubject} changeChapter={this.changeChapter} />
+              </Box>
+            ) : null}
+            <Box width={[1, 0.8]} flex={'1 1 auto'} px={[1, 2]} className="box_content">
+              <Fab onClick={() => this.setState({ isSidebarOpen: !this.state.isSidebarOpen })}>
+                {this.state.isSidebarOpen ? (
+                  <CollapseTOC className="fab_symbol" />
+                ) : (
+                  <ExpandTOC className="fab_symbol" />
+                )}
+              </Fab>
+              <h2 className="chapter_name">{this.state.activeChapterName}</h2>
+              <SubjectMarkdown loading={this.state.loading} markdown={this.state.activeChapterContent} />
+            </Box>
+          </Flex>
+        </CurriculumSection>
+      </Layout>
+    );
+  }
+}
diff --git a/pages/login.js b/pages/login.js
new file mode 100644
index 000000000..5ea8d58ef
--- /dev/null
+++ b/pages/login.js
@@ -0,0 +1,12 @@
+import React from 'react';
+
+import Layout from '../components/common/layout';
+import BannerSection from '../components/common/banner';
+
+export default () => {
+  return (
+    <Layout>
+      <BannerSection title="Login / Register" subTitle="Coming Soon..." />
+    </Layout>
+  );
+};
diff --git a/pages/space.js b/pages/space.js
index 2770ee67c..599422403 100644
--- a/pages/space.js
+++ b/pages/space.js
@@ -1,144 +1,141 @@
 import React from 'react';
-import { Card, Segment, Header, Divider } from 'semantic-ui-react';
+import styled from 'react-emotion';
+import { space } from 'styled-system';
+import FaCalender from 'react-icons/lib/fa/calendar';
+import { Timeline, TimelineEvent } from 'react-event-timeline'; // eslint-disable-line import/no-unresolved
 
-import CommonBanner from '../components/common-banner';
-import publicPage from '../hocs/public-page';
+import Layout from '../components/common/layout';
+import BannerSection from '../components/common/banner';
+import { Container, Title, breakpoints, SubTitle } from '../utils/base.styles';
 
-export default publicPage(() => (
-  <div>
-    <CommonBanner
-      pageTitle="Space"
-      pageSubTitle="Physical spaces for collaboration, peer-learning and self-learning. These are dynamic learning environments, where everyone learns at their own pace and
-            compliments each other. You can also participate in weekly group activities like Open
-            source evenings and other casual competitions"
-    />
-    <main>
-      <section>
-        <h2>Who is this for?</h2>
-        <div>
-          <Segment.Group raised piled>
-            <Segment textAlign="left">
-              People who are genuinely passionate about tech, who get excited
-              about learning new skills, building, solving and discussing
-              problems in latest tech.
-            </Segment>
-            <Segment textAlign="left" secondary>
-              Graduates who are struggling to get a job, who want to build their
-              expertise in modern technologies and are willing to invest a
-              significant amount of their time self-learning
-            </Segment>
-            <Segment textAlign="left">
-              Students who are willing to learn outside of their college
-              curriculum, would like to become professional developers down the
-              line and get exposure to the real world
-            </Segment>
-            <Segment textAlign="left" secondary>
-              Experienced developers, who want to interact with other
-              developers, contribute to open source, expand their horizons and
-              learn new technologies.
-            </Segment>
-            <Segment textAlign="left">
-              Professionals from non-tech background, who want to get started
-              with tech or switch their careers.
-            </Segment>
-          </Segment.Group>
-        </div>
-      </section>
-      <section>
-        <h2>Activities & Schedule</h2>
-        <div>
-          <Segment.Group raised piled>
-            <Segment textAlign="left">
-              We will help you pick a technology and provide you with learning
-              guides to learn and build something on a daily basis.
-            </Segment>
-            <Segment textAlign="left" secondary>
-              <h4>Daily</h4>
-              You will engage in daily code review and pair programming
-              exercises with other members.
-            </Segment>
-            <Segment textAlign="left">
-              <h4>Wednesday</h4>
-              We will have an Open Source Evening, where everyone will be
-              encouraged to find open source projects and contribute to them.
-            </Segment>
-            <Segment textAlign="left" secondary>
-              <h4>Thursday</h4>
-              We will have a casual coding competition, where members will
-              participate to solve coding challenges together.
-            </Segment>
-            <Segment textAlign="left">
-              <h4>Friday - Saturday</h4>
-              We will have casual hackathons, where everyone will participate to
-              build a project, big or small.
-            </Segment>
-            <Segment textAlign="left" secondary>
-              <h4>Saturday</h4>
-              In the evening, we will screen a tech-related documentary, movie
-              or TV show.
-            </Segment>
-            <Segment textAlign="left">
-              <h4>Sunday</h4>
-              Members will present their work i.e. projects or new topics they
-              have made or learned in the past week
-            </Segment>
-          </Segment.Group>
-        </div>
-      </section>
-      <divide>
-        <Divider section />
-      </divide>
-      <section>
-        <h2>Pricing</h2>
-        <div>
-          <Card>
-            <Card.Content>
-              <Segment inverted color="pink">
-                <Header as="h2" inverted>
-                  INR 1000/-
-                  <Header.Subheader>per month</Header.Subheader>
-                </Header>
-              </Segment>
-              <Card.Description>
-                For membership mail us<br />space@coderplex.org
-              </Card.Description>
-            </Card.Content>
-          </Card>
-        </div>
-        <h2>Mode of payment</h2>
-        <Segment.Group horizontal>
-          <Segment>UPI</Segment>
-          <Segment>PayTM</Segment>
-          <Segment>Cash</Segment>
-        </Segment.Group>
-      </section>
-    </main>
-    <style jsx>{`
-      main {
-        background-color: #ffffff;
-        padding-top: 30px;
-        padding-bottom: 30px;
-        padding-left: 30px;
-        padding-right: 30px;
-        min-height: calc(100vh - 70px);
-        display: flex;
-        justify-content: center;
-        align-items: center;
-        flex-direction: column;
-        text-align: center;
-        margin: 0 auto;
-      }
-      section {
-        max-width: 800px;
-        margin: 50px 0;
-      }
-      h2 {
-        text-transform: uppercase;
-        padding-bottom: 10px;
-      }
-      divide {
-        width: 100%;
-      }
-    `}</style>
-  </div>
-));
+const ForWhomSection = styled.section`
+  ${space};
+  background: #fff;
+  color: #222;
+  text-align: center;
+  & ul {
+    text-align: left;
+    max-width: 900px;
+    margin-left: auto;
+    margin-right: auto;
+    font-size: 1.1rem;
+    line-height: 2rem;
+    ${breakpoints.md} {
+      font-size: 1rem;
+    }
+    ${breakpoints.sm} {
+      font-size: 1rem;
+    }
+    ${breakpoints.xs} {
+      font-size: 0.9rem;
+    }
+  }
+`;
+
+const ActivitySection = styled.section`
+  ${space};
+  background: #fbfbfb;
+  color: #222;
+  text-align: center;
+`;
+
+const ActivityTimeline = styled(Timeline)`
+  max-width: 600px;
+  text-align: left;
+`;
+
+const ActiviteEvent = styled(TimelineEvent)`
+  font-size: 1.5rem;
+  ${breakpoints.sm} {
+    font-size: 1.2rem;
+  }
+  ${breakpoints.xs} {
+    font-size: 1rem;
+  }
+`;
+
+const PricingSection = styled.section`
+  ${space};
+  background: #fff;
+  text-align: center;
+  position: relative;
+`;
+
+const forWhomPoints = [
+  'People who are genuinely passionate about tech, who get excited about learning new skills, building, solving and discussing problems in latest tech.',
+  'Graduates who are struggling to get a job, who want to build their expertise in modern technologies and are willing to invest a significant amount of their time self-learning',
+  'Students who are willing to learn outside of their college curriculum, would like to become professional developers down the line and get exposure to the real world',
+  'Experienced developers, who want to interact with other developers, contribute to open source, expand their horizons and learn new technologies.',
+  'Professionals from non-tech background, who want to get started with tech or switch their careers.',
+];
+
+const activities = [
+  {
+    day: 'Daily',
+    task: 'You will engage in daily code review and pair programming exercises with other members.',
+  },
+  {
+    day: 'Wednesday',
+    task:
+      'We will have an Open Source Evening, where everyone will be encouraged to find open source projects and contribute to them.',
+  },
+  {
+    day: 'Thursday',
+    task:
+      'We will have a casual coding competition, where members will participate to solve coding challenges together.',
+  },
+  {
+    day: 'Friday',
+    task: 'We will have casual hackathons, where everyone will participate to build a project, big or small.',
+  },
+  {
+    day: 'Saturday',
+    task: 'In the evening, we will screen a tech-related documentary, movie or TV show.',
+  },
+  {
+    day: 'Sunday',
+    task: 'Members will present their work i.e. projects or new topics they have made or learned in the past week',
+  },
+];
+
+export default () => (
+  <Layout>
+    <BannerSection title="Offline Co-Learning Spaces" subTitle="Physical spaces for peer-learning and collaboration" />
+    <ForWhomSection py={[2, 4]} px={[2, 1]}>
+      <Container>
+        <Title inverted color="#222">
+          Who Is This For?
+        </Title>
+        <ul>{forWhomPoints.map(point => <li key={point}>{point}</li>)}</ul>
+      </Container>
+    </ForWhomSection>
+    <ActivitySection py={[2, 4]} px={[2, 1]}>
+      <Container>
+        <Title inverted color="#222">
+          Activites and Schedule
+        </Title>
+        <SubTitle inverted>
+          We will help you pick a technology and provide you with learning guides to learn and build something on a
+          daily basis.
+        </SubTitle>
+        <ActivityTimeline>
+          {activities.map(activity => (
+            <ActiviteEvent key={activity.day} title={activity.day} icon={<FaCalender />} iconColor="#222">
+              {activity.task}
+            </ActiviteEvent>
+          ))}
+        </ActivityTimeline>
+      </Container>
+    </ActivitySection>
+    <PricingSection py={[2, 4]} px={[2, 1]}>
+      <Container>
+        <Title inverted color="#222">
+          Pricing
+        </Title>
+        <SubTitle inverted>
+          INR 1000/- per month. For membership mail us at <a href="mailto:space@codeplex.org">space@coderplex.org</a>
+        </SubTitle>
+      </Container>
+    </PricingSection>
+  </Layout>
+);
diff --git a/server.js b/server.js
index e50f94b16..9811953e2 100644
--- a/server.js
+++ b/server.js
@@ -3,29 +3,31 @@ const { parse } = require('url');
 const next = require('next');
 const pathMatch = require('path-match');
 const opn = require('opn');
+const getPort = require('get-port');
 
-const port = parseInt(process.env.PORT, 10) || 3000;
 const dev = process.env.NODE_ENV !== 'production';
 const app = next({ dev });
 const handle = app.getRequestHandler();
 const route = pathMatch();
-const match = route('/learn/:id');
+const match = route('/learn/:subject/:chapter');
 
-app.prepare().then(() => {
-  createServer((req, res) => {
-    const { pathname, query } = parse(req.url, true);
-    const params = match(pathname);
-    if (params === false) {
-      handle(req, res);
-      return;
-    }
-    // Assigning `query` into the params means that we still
-    // get the query string passed to our application
-    // i.e. /blog/foo?show-comments=true
-    app.render(req, res, '/learn/subject', Object.assign(params, query));
-  }).listen(port, err => {
-    if (err) throw err;
-    console.log(`>> App running on http://localhost:${port}`);
-    opn(`http://localhost:${port}`);
+getPort({ port: 3000 }).then(port => {
+  app.prepare().then(() => {
+    createServer((req, res) => {
+      const { pathname, query } = parse(req.url, true);
+      const params = match(pathname);
+      if (params === false) {
+        handle(req, res);
+        return;
+      }
+      // Assigning `query` into the params means that we still
+      // get the query string passed to our application
+      // i.e. /blog/foo?show-comments=true
+      app.render(req, res, '/learn/subject', Object.assign(params, query));
+    }).listen(port, err => {
+      if (err) throw err;
+      console.log(`>> App running on http://localhost:${port}`);
+      opn(`http://localhost:${port}`);
+    });
   });
 });
diff --git a/static/banner.png b/static/banner.png
deleted file mode 100644
index 87e7ad92f..000000000
Binary files a/static/banner.png and /dev/null differ
diff --git a/static/banner1280x370.png b/static/banner1280x370.png
deleted file mode 100644
index d1fb5275e..000000000
Binary files a/static/banner1280x370.png and /dev/null differ
diff --git a/static/bg.png b/static/bg.png
deleted file mode 100644
index eab6d06d2..000000000
Binary files a/static/bg.png and /dev/null differ
diff --git a/static/favicons/manifest.json b/static/favicons/manifest.json
index ebd929b74..2ddc86456 100644
--- a/static/favicons/manifest.json
+++ b/static/favicons/manifest.json
@@ -1,18 +1,21 @@
 {
-    "name": "CoderPlex",
-    "icons": [
-        {
-            "src": "/static/favicons/android-chrome-192x192.png",
-            "sizes": "192x192",
-            "type": "image/png"
-        },
-        {
-            "src": "/static/favicons/android-chrome-512x512.png",
-            "sizes": "512x512",
-            "type": "image/png"
-        }
-    ],
-    "theme_color": "#c201b9",
-    "background_color": "#c201b9",
-    "display": "standalone"
-}
\ No newline at end of file
+  "name": "CoderPlex",
+  "short_name": "CoderPlex",
+  "icons": [
+    {
+      "src": "/static/favicons/android-chrome-192x192.png",
+      "sizes": "192x192",
+      "type": "image/png"
+    },
+    {
+      "src": "/static/favicons/android-chrome-512x512.png",
+      "sizes": "512x512",
+      "type": "image/png"
+    }
+  ],
+  "theme_color": "#c201b9",
+  "background_color": "#c201b9",
+  "start_url": "/",
+  "display": "standalone",
+  "orientation": "portrait-primary"
+}
diff --git a/static/wordcloud.png b/static/wordcloud.png
deleted file mode 100644
index 10a1ccef2..000000000
Binary files a/static/wordcloud.png and /dev/null differ
diff --git a/utils/base.styles.js b/utils/base.styles.js
new file mode 100644
index 000000000..3259902ee
--- /dev/null
+++ b/utils/base.styles.js
@@ -0,0 +1,115 @@
+import styled, { css } from 'react-emotion';
+
+export const purplePrimary = '#7657fb';
+export const purpleSecondary = '#6f19ed';
+export const whiteFull = '#ffffff';
+export const blackPure = '#000000';
+export const graySecondary = '#ddd';
+
+export const breakpoints = {
+  xs: '@media screen and (max-width: 40em)',
+  sm: '@media screen and (min-width: 40em) and (max-width: 52em)',
+  md: '@media screen and (min-width: 52em) and (max-width: 64em)',
+  lg: '@media screen and (min-width: 64em)',
+};
+
+export const hidden = key => props =>
+  props[key]
+    ? {
+        [breakpoints[key]]: {
+          display: 'none',
+        },
+      }
+    : null;
+
+export const xs = hidden('xs');
+export const sm = hidden('sm');
+export const md = hidden('md');
+export const lg = hidden('lg');
+
+const Hide = styled.div([], xs, sm, md, lg);
+
+export const baseContainer = css`
+  max-width: 1024px;
+  margin: 0 auto;
+`;
+
+export const Container = styled.div`
+  ${baseContainer};
+`;
+
+export const baseButton = css`
+  background: #7657fb;
+  padding: 0.2rem 1rem;
+  color: #fff;
+  text-decoration: none;
+  transition: all 0.25s;
+  &:hover {
+    background: #6f19ed;
+    font-weight: normal;
+  }
+`;
+
+export const Button = styled.a`
+  ${baseButton};
+  width: ${props => (props.fluid ? '100%' : 'auto')}
+  background: ${props => (props.inverted ? '#7657fb' : props.ghost ? '#fff' : '#fff')}
+  color: ${props => (props.inverted ? '#fff' : props.ghost ? purpleSecondary : '#222')}
+  padding: ${props =>
+    props.large ? '0.8rem 2.25rem' : props.medium ? '0.6rem 1.2rem' : props.small ? '0.3rem 1.1rem' : '0.2rem 1rem'};
+  font-size: ${props => (props.large ? '1.8rem' : props.medium ? '1rem' : '0.8rem')};
+  font-weight: ${props => (props.ghost ? 600 : 500)};
+  border: ${props => (props.ghost ? `2px solid ${purpleSecondary}` : 'none')};
+  cursor: pointer;
+  user-select: none;
+  -webkit-touch-callout: none;
+  &:hover {
+    font-weight: ${props => (props.ghost ? 600 : 500)};
+    background: ${props => (props.inverted ? purpleSecondary : props.ghost ? purpleSecondary : '#eee')};
+    color: ${props => (props.inverted ? '#fff' : props.ghost ? whiteFull : '#222')}
+  }
+`;
+
+export const Title = styled.h2`
+  font-size: 2rem;
+  font-weight: 400;
+  color: ${props => (props.inverted ? (props.color ? props.color : '#7657fb') : '#fff')};
+  ${breakpoints.md} {
+    font-size: 1.8rem;
+  }
+  ${breakpoints.sm} {
+    font-size: 1.8rem;
+    line-height: 1.8rem;
+    text-align: center;
+  }
+  ${breakpoints.xs} {
+    font-size: 1.8rem;
+    line-height: 2rem;
+    text-align: center;
+  }
+`;
+
+export const SubTitle = styled.h3`
+  font-size: ${props => (props.small ? '1rem' : '1.2rem')};
+  font-weight: 400;
+  color: ${props => (props.inverted ? '#222' : '#fff')};
+  max-width: 900px;
+  margin-left: auto;
+  margin-right: auto;
+  line-height: ${props => (props.small ? '1.4rem' : '2rem')};
+  ${breakpoints.md} {
+    font-size: 1rem;
+  }
+  ${breakpoints.sm} {
+    font-size: 1rem;
+    text-align: center;
+  }
+  ${breakpoints.xs} {
+    font-size: 0.9rem;
+    text-align: center;
+    font-weight: 600;
+    line-height: ${props => (props.small ? '1.4rem' : '1.8rem')};
+  }
+`;
+
+export default Hide;
diff --git a/utils/mock-data.js b/utils/mock-data.js
index abaea1909..43dee5c31 100644
--- a/utils/mock-data.js
+++ b/utils/mock-data.js
@@ -3,239 +3,381 @@ export const listOfSubjects = [
     id: '2132',
     title: 'Laravel',
     domain: 'Web Development',
-    url: '/learn/laravel',
+    path: '/learn/laravel/Choosing-laravel',
     subjectId: 'laravel',
     icon: 'devicon-laravel-plain colored',
     learningCount: '20',
-    learnGuideStatus: true,
+    isGuideCompleted: true,
+    githubUrl: 'https://github.com/coderplex/learn/blob/master/web-dev/Backend/Learn-Laravel.md',
   },
   {
     id: '213',
     title: 'ReactJS',
     domain: 'Web Development',
-    url: '/learn/reactjs',
+    path: '/learn/reactjs/Choosing-ReactJS',
     subjectId: 'reactjs',
     icon: 'devicon-react-original colored',
     learningCount: '28',
-    learnGuideStatus: false,
+    isGuideCompleted: true,
+    githubUrl:
+      'https://github.com/coderplex/learn/blob/master/web-dev/Frontend/Libraries%20%26%20Frameworks/Learn-React.md',
   },
   {
     id: '2131',
     title: 'Go',
     domain: 'Programming Language',
-    url: '/learn/go',
+    path: '/learn/go',
     subjectId: 'go',
-    icon: 'devicon-go-plain ',
+    icon: 'devicon-go-plain colored',
     learningCount: '7',
-    learnGuideStatus: false,
+    isGuideCompleted: false,
+    githubUrl: 'https://github.com/coderplex/learn/blob/master/programming-languages/Go/learn-go.md',
   },
   {
     id: '21fa3',
     title: 'Android',
     domain: 'Mobile Technology',
-    url: '/learn/android',
+    path: '/learn/android',
     subjectId: 'android',
     icon: 'devicon-android-plain colored',
     learningCount: '9',
-    learnGuideStatus: false,
+    isGuideCompleted: false,
+    githubUrl: 'https://github.com/coderplex/learn/blob/master/mobile-dev/Android/learn-android.md',
   },
   {
     id: '21afasda3',
     title: 'Rails',
     domain: 'Backend Development',
-    url: '/learn/rails',
+    path: '/learn/rails',
     subjectId: 'rails',
     icon: 'devicon-rails-plain colored',
     learningCount: '14',
-    learnGuideStatus: false,
+    isGuideCompleted: false,
+    githubUrl: 'https://github.com/coderplex/learn/blob/master/web-dev/Backend/Learn-Rails.md',
   },
   {
     id: '21wqerwqe3',
     title: 'Python',
     domain: 'Programming Language',
-    url: '/learn/python',
+    path: '/learn/python',
     subjectId: 'python',
     icon: 'devicon-python-plain colored',
     learningCount: '32',
-    learnGuideStatus: false,
+    isGuideCompleted: false,
+    githubUrl: 'https://github.com/coderplex/learn/tree/master/programming-languages/Python',
   },
   {
     id: '2bxcvbx13',
     title: 'iOS',
     domain: 'Mobile Technology',
-    url: '/learn/ios',
+    path: '/learn/ios',
     subjectId: 'ios',
     icon: 'devicon-swift-plain colored',
     learningCount: '45',
-    learnGuideStatus: false,
+    isGuideCompleted: false,
+    githubUrl: 'https://github.com/coderplex/learn/blob/master/mobile-dev/iOS/Learn-iOS.md',
   },
   {
     id: '2bxczzxcvbx13',
     title: 'Javascript',
     domain: 'Programming Language',
-    url: '/learn/javascript',
+    path: '/learn/javascript',
     subjectId: 'javascript',
     icon: 'devicon-javascript-plain colored',
     learningCount: '31',
-    learnGuideStatus: false,
+    isGuideCompleted: false,
+    githubUrl: 'https://github.com/coderplex/learn/blob/master/web-dev/Frontend/learn-intermediate.md',
   },
   {
     id: '2bxdfasczzxcvbx13',
     title: 'Angular',
     domain: 'Frontend Development',
-    url: '/learn/angular',
+    path: '/learn/angular',
     subjectId: 'angular',
     icon: 'devicon-angularjs-plain colored',
     learningCount: '3',
-    learnGuideStatus: false,
+    isGuideCompleted: false,
+    githubUrl:
+      'https://github.com/coderplex/learn/blob/master/web-dev/Frontend/Libraries%20%26%20Frameworks/Learn-Angular.md',
   },
 ];
 
-export const indexPageLearns = [
+export const laravelSyllabus = [
   {
-    link:
-      'https://github.com/coderplex/learn/blob/master/web-dev/Frontend/Libraries%20%26%20Frameworks/Learn-React.md',
-    title: 'ReactJS',
-    subject: 'Frontend Web Development',
-    image: '',
+    unit: 'Preface',
+    chapters: [
+      {
+        name: 'Choosing laravel',
+        cdnUrl: 'https://rawgit.com/coderplex/learn/cdn/laravel/choosing-laravel.md',
+      },
+      {
+        name: 'Prerequisites',
+        cdnUrl: 'https://rawgit.com/coderplex/learn/cdn/laravel/prerequisites.md',
+      },
+      {
+        name: 'Installation',
+        cdnUrl: 'https://rawgit.com/coderplex/learn/cdn/laravel/installation.md',
+      },
+    ],
   },
   {
-    link:
-      'https://github.com/coderplex/learn/blob/master/web-dev/Backend/Learn-Laravel.md',
-    title: 'Laravel',
-    subject: 'Backend Web Development',
-    image: '',
+    unit: 'Models, Views, Controllers and Routes',
+    chapters: [
+      {
+        name: 'Introduction to MVC',
+        cdnUrl: 'https://rawgit.com/coderplex/learn/cdn/laravel/introduction-to-mvc.md',
+      },
+      {
+        name: 'Basic Routing and Views',
+        cdnUrl: 'https://rawgit.com/coderplex/learn/cdn/laravel/basic-routing-and-views.md',
+      },
+      {
+        name: 'Pass Data to Views',
+        cdnUrl: 'https://rawgit.com/coderplex/learn/cdn/laravel/pass-data-to-views.md',
+      },
+      {
+        name: 'Database Setup',
+        cdnUrl: 'https://rawgit.com/coderplex/learn/cdn/laravel/database-setup.md',
+      },
+      {
+        name: 'Working with Query Builder',
+        cdnUrl: 'https://rawgit.com/coderplex/learn/cdn/laravel/working-with-query-builder.md',
+      },
+      {
+        name: 'Eloquent',
+        cdnUrl: 'https://rawgit.com/coderplex/learn/cdn/laravel/eloquent.md',
+      },
+      {
+        name: 'Controllers',
+        cdnUrl: 'https://rawgit.com/coderplex/learn/cdn/laravel/controllers.md',
+      },
+      {
+        name: 'Route Model Binding',
+        cdnUrl: 'https://rawgit.com/coderplex/learn/cdn/laravel/route-model-binding.md',
+      },
+    ],
   },
   {
-    link:
-      'https://github.com/coderplex/learn/blob/master/programming-languages/Go/learn-go.md',
-    title: 'Go',
-    subject: 'Programming Language',
-    image: '',
+    unit: 'Front-End',
+    chapters: [
+      {
+        name: 'Layouts and Structures',
+        cdnUrl: 'https://rawgit.com/coderplex/learn/cdn/laravel/layouts-and-structures.md',
+      },
+      {
+        name: 'Form Requests and CSRF',
+        cdnUrl: 'https://rawgit.com/coderplex/learn/cdn/laravel/form-requests-and-CSRF.md',
+      },
+      {
+        name: 'Form Validation',
+        cdnUrl: 'https://rawgit.com/coderplex/learn/cdn/laravel/form-validation.md',
+      },
+      {
+        name: 'Rendering',
+        cdnUrl: 'https://rawgit.com/coderplex/learn/cdn/laravel/rendering',
+      },
+      {
+        name: 'Laravel Mix',
+        cdnUrl: 'https://rawgit.com/coderplex/learn/cdn/laravel/laravel-mix.md',
+      },
+      {
+        name: 'Flash Messaging',
+        cdnUrl: 'https://rawgit.com/coderplex/learn/cdn/laravel/flash-messaging.md',
+      },
+    ],
   },
   {
-    link:
-      'https://github.com/coderplex/learn/blob/master/computer-science/Learn-CS.md',
-    title: 'Introduction to C.S',
-    subject: 'Computer Science',
-    image: '',
+    unit: 'Relationships',
+    chapters: [
+      {
+        name: 'Eloquent Relationships',
+        cdnUrl: 'https://rawgit.com/coderplex/learn/cdn/laravel/eloquent-relationships.md',
+      },
+      {
+        name: 'One-to-Many Relationship',
+        cdnUrl: 'https://rawgit.com/coderplex/learn/cdn/laravel/one-to-many-relationship.md',
+      },
+      {
+        name: 'Pivot Tables',
+        cdnUrl: 'https://rawgit.com/coderplex/learn/cdn/laravel/pivot-tables.md',
+      },
+    ],
   },
   {
-    link:
-      'https://github.com/coderplex/learn/blob/master/Blockchain/blockchain-basics.md',
-    title: 'Blockchain',
-    subject: 'Decentralized Systems',
-    image: '',
+    unit: 'Authentication',
+    chapters: [
+      {
+        name: 'Scaffold Authentication',
+        cdnUrl: 'https://rawgit.com/coderplex/learn/cdn/laravel/scaffold-authentication.md',
+      },
+      {
+        name: 'Manual Authentication',
+        cdnUrl: 'https://rawgit.com/coderplex/learn/cdn/laravel/manual-authentication.md',
+      },
+    ],
   },
   {
-    link:
-      'https://github.com/coderplex/learn/blob/master/mobile-dev/Android/learn-android.md',
-    title: 'Android',
-    subject: 'Mobile Development',
-    image: '',
+    unit: 'View Composers and Archives',
+    chapters: [
+      {
+        name: 'Add Archives',
+        cdnUrl: 'https://rawgit.com/coderplex/learn/cdn/laravel/add-archives.md',
+      },
+      {
+        name: 'View Composers',
+        cdnUrl: 'https://rawgit.com/coderplex/learn/cdn/laravel/view-composers.md',
+      },
+    ],
+  },
+  {
+    unit: 'Testing & Seeding',
+    chapters: [
+      {
+        name: 'Testing',
+        cdnUrl: 'https://rawgit.com/coderplex/learn/cdn/laravel/testing.md',
+      },
+      {
+        name: 'Seeding',
+        cdnUrl: 'https://rawgit.com/coderplex/learn/cdn/laravel/seeding.md',
+      },
+    ],
   },
 ];
 
-export const listOfDomains = [
-  'All',
-  'Computer Science',
-  'Programming Language',
-  'Web Development',
-  'Mobile Technology',
-  'Data Science',
-  'Artificial Intelligence',
-  'BlockChain',
+export const reactSyllabus = [
+  {
+    unit: 'Preface',
+    chapters: [
+      {
+        name: 'Choosing ReactJS',
+        cdnUrl: 'https://rawgit.com/coderplex/learn/cdn/react/choosing-reactjs.md',
+      },
+      {
+        name: 'Prerequisites',
+        cdnUrl: 'https://rawgit.com/coderplex/learn/cdn/react/prerequisites.md',
+      },
+      {
+        name: 'Philosophy',
+        cdnUrl: 'https://rawgit.com/coderplex/learn/cdn/react/philosophy.md',
+      },
+    ],
+  },
+  {
+    unit: 'Getting Started',
+    chapters: [
+      {
+        name: 'Trying React',
+        cdnUrl: 'https://rawgit.com/coderplex/learn/cdn/react/trying-react.md',
+      },
+      {
+        name: 'Create React App',
+        cdnUrl: 'https://rawgit.com/coderplex/learn/cdn/react/create-react-app.md',
+      },
+      {
+        name: 'JavaScript XML Syntax',
+        cdnUrl: 'https://rawgit.com/coderplex/learn/cdn/react/javascript-xml-syntax.md',
+      },
+    ],
+  },
+  {
+    unit: 'Components',
+    chapters: [
+      {
+        name: 'Custom Components',
+        cdnUrl: 'https://rawgit.com/coderplex/learn/cdn/react/custom-components.md',
+      },
+      {
+        name: 'Rendering',
+        cdnUrl: 'https://rawgit.com/coderplex/learn/cdn/react/rendering.md',
+      },
+      {
+        name: 'Conditional Rendering',
+        cdnUrl: 'https://rawgit.com/coderplex/learn/cdn/react/conditional-rendering.md',
+      },
+      {
+        name: 'Data Flow',
+        cdnUrl: 'https://rawgit.com/coderplex/learn/cdn/react/data-flow.md',
+      },
+      {
+        name: 'Lifecycle',
+        cdnUrl: 'https://rawgit.com/coderplex/learn/cdn/react/lifecycle.md',
+      },
+      {
+        name: 'Events',
+        cdnUrl: 'https://rawgit.com/coderplex/learn/cdn/react/events.md',
+      },
+    ],
+  },
+  {
+    unit: 'Forms',
+    chapters: [
+      {
+        name: 'Controlled Components',
+        cdnUrl: 'https://rawgit.com/coderplex/learn/cdn/react/controlled-components.md',
+      },
+      {
+        name: 'Uncontrolled Components',
+        cdnUrl: 'https://rawgit.com/coderplex/learn/cdn/react/uncontrolled-components.md',
+      },
+    ],
+  },
+  {
+    unit: 'Composition',
+    chapters: [
+      {
+        name: 'Lifting State Up',
+        cdnUrl: 'https://rawgit.com/coderplex/learn/cdn/react/lifting-state-up.md',
+      },
+      {
+        name: 'Composition vs Inheritance',
+        cdnUrl: 'https://rawgit.com/coderplex/learn/cdn/react/composition-vs-inheritance.md',
+      },
+      {
+        name: 'Context',
+        cdnUrl: 'https://rawgit.com/coderplex/learn/cdn/react/context.md',
+      },
+    ],
+  },
+  {
+    unit: 'Tools',
+    chapters: [
+      {
+        name: 'Developer Tools',
+        cdnUrl: 'https://rawgit.com/coderplex/learn/cdn/react/developer-tools.md',
+      },
+      {
+        name: 'Proptypes',
+        cdnUrl: 'https://rawgit.com/coderplex/learn/cdn/react/proptypes.md',
+      },
+      {
+        name: 'Error Boundaries',
+        cdnUrl: 'https://rawgit.com/coderplex/learn/cdn/react/error-boundaries.md',
+      },
+    ],
+  },
+  {
+    unit: 'In depth discussions',
+    chapters: [
+      {
+        name: 'JSX In Depth',
+        cdnUrl: 'https://rawgit.com/coderplex/learn/cdn/react/jsx-in-depth.md',
+      },
+      {
+        name: 'Synthetic Events',
+        cdnUrl: 'https://rawgit.com/coderplex/learn/cdn/react/synthetic-events.md',
+      },
+      {
+        name: 'React Without JSX',
+        cdnUrl: 'https://rawgit.com/coderplex/learn/cdn/react/react-without-jsx.md',
+      },
+      {
+        name: 'React without ES6',
+        cdnUrl: 'https://rawgit.com/coderplex/learn/cdn/react/react-without-es6.md',
+      },
+      {
+        name: 'Reconcilation Diff Algorithm',
+        cdnUrl: 'https://rawgit.com/coderplex/learn/cdn/react/reconcilation---diff-algorithm.md',
+      },
+    ],
+  },
 ];
-
-export const contentsOfLaravel = {
-  logo: 'devicon-laravel-plain colored',
-  overview:
-    'https://cdn.rawgit.com/coderplex/learn/cdn/cdn/laravel/overview.md',
-  guides: [
-    {
-      name: 'Prerequisites',
-      url: 'https://cdn.rawgit.com/coderplex/learn/cdn/cdn/laravel/guide/0.md',
-    },
-    {
-      name: 'Introduction to MVC architecture in PHP',
-      url: 'https://cdn.rawgit.com/coderplex/learn/cdn/cdn/laravel/guide/1.md',
-    },
-    {
-      name: 'Models Views Controllers and Routes',
-      url: 'https://cdn.rawgit.com/coderplex/learn/cdn/cdn/laravel/guide/2.md',
-    },
-    {
-      name: 'FrontEnd',
-      url: 'https://cdn.rawgit.com/coderplex/learn/cdn/cdn/laravel/guide/3.md',
-    },
-    {
-      name: 'Relationships',
-      url: 'https://cdn.rawgit.com/coderplex/learn/cdn/cdn/laravel/guide/4.md',
-    },
-    {
-      name: 'Authentication',
-      url: 'https://cdn.rawgit.com/coderplex/learn/cdn/cdn/laravel/guide/5.md',
-    },
-    {
-      name: 'View Composers and Archives',
-      url: 'https://cdn.rawgit.com/coderplex/learn/cdn/cdn/laravel/guide/6.md',
-    },
-    {
-      name: 'Testing & Seeding',
-      url: 'https://cdn.rawgit.com/coderplex/learn/cdn/cdn/laravel/guide/7.md',
-    },
-    {
-      name: 'Final Project',
-      url: 'https://cdn.rawgit.com/coderplex/learn/cdn/cdn/laravel/guide/8.md',
-    },
-  ],
-  contributors: [
-    {
-      userName: 'P Bhanu Teja',
-      userPage: 'https://github.com/pbteja1998',
-      userImage: 'https://avatars0.githubusercontent.com/u/17903466?s=400&v=4',
-      contributions: [
-        {
-          type: 'topic',
-          count: '20',
-        },
-        {
-          type: 'article',
-          count: '30',
-        },
-        {
-          type: 'video',
-          count: '25',
-        },
-      ],
-    },
-    {
-      userName: 'M Zubair Ahmed',
-      userPage: 'https://github.com/M-ZubairAhmed',
-      userImage:
-        'https://avatars0.githubusercontent.com/u/17708702?s=400&u=032075b378bf6d82da48725b9ce5f31c7a6469fa&v=4',
-      contributions: [
-        {
-          type: 'topic',
-          count: '2',
-        },
-      ],
-    },
-    {
-      userName: 'Vinay Puppal',
-      userPage: 'https://www.vinaypuppal.com/',
-      userImage:
-        'https://s3-us-west-2.amazonaws.com/s.cdpn.io/214440/profile/profile-512.jpg?2',
-      contributions: [
-        {
-          type: 'topic',
-          count: '4',
-        },
-        {
-          type: 'article',
-          count: '2',
-        },
-      ],
-    },
-  ],
-};
diff --git a/utils/urls.js b/utils/urls.js
index 5e52c6447..9624e91e5 100644
--- a/utils/urls.js
+++ b/utils/urls.js
@@ -7,3 +7,18 @@ export const pastEventsURL = '/events/past';
 export const indexPageEventURL = '/events';
 
 export const subscribeURL = '/subscribe';
+
+export const imagePlaceholderURL =
+  'http://res.cloudinary.com/coderplex/image/upload/c_scale,h_400,w_600/v1511345686/website__assets/placeholder.png';
+
+export const heroPatternURL =
+  'https://res.cloudinary.com/coderplex/image/upload/v1510788480/website__assets/pattern.png';
+
+export const heroBannerURL =
+  'https://res.cloudinary.com/coderplex/image/upload/c_scale,w_1024/v1510788480/website__assets/banner1280x370.png';
+
+export const spaceCoverURL =
+  'https://res.cloudinary.com/coderplex/image/upload/c_scale,w_450/v1510788480/website__assets/space.png';
+
+export const eventsCoverURL =
+  'https://res.cloudinary.com/coderplex/image/upload/c_scale,w_348/v1510788480/website__assets/events.png';
diff --git a/yarn.lock b/yarn.lock
index 6914ec6b8..28e12cfeb 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2,6 +2,74 @@
 # yarn lockfile v1
 
 
+"@babel/code-frame@7.0.0-beta.31":
+  version "7.0.0-beta.31"
+  resolved "https://registry.yarnpkg.com/@babel/code-frame/-/code-frame-7.0.0-beta.31.tgz#473d021ecc573a2cce1c07d5b509d5215f46ba35"
+  dependencies:
+    chalk "^2.0.0"
+    esutils "^2.0.2"
+    js-tokens "^3.0.0"
+
+"@babel/code-frame@^7.0.0-beta.35":
+  version "7.0.0-beta.35"
+  resolved "https://registry.yarnpkg.com/@babel/code-frame/-/code-frame-7.0.0-beta.35.tgz#04eeb6dca7efef8f65776a4c214157303b85ad51"
+  dependencies:
+    chalk "^2.0.0"
+    esutils "^2.0.2"
+    js-tokens "^3.0.0"
+
+"@babel/helper-function-name@7.0.0-beta.31":
+  version "7.0.0-beta.31"
+  resolved "https://registry.yarnpkg.com/@babel/helper-function-name/-/helper-function-name-7.0.0-beta.31.tgz#afe63ad799209989348b1109b44feb66aa245f57"
+  dependencies:
+    "@babel/helper-get-function-arity" "7.0.0-beta.31"
+    "@babel/template" "7.0.0-beta.31"
+    "@babel/traverse" "7.0.0-beta.31"
+    "@babel/types" "7.0.0-beta.31"
+
+"@babel/helper-get-function-arity@7.0.0-beta.31":
+  version "7.0.0-beta.31"
+  resolved "https://registry.yarnpkg.com/@babel/helper-get-function-arity/-/helper-get-function-arity-7.0.0-beta.31.tgz#1176d79252741218e0aec872ada07efb2b37a493"
+  dependencies:
+    "@babel/types" "7.0.0-beta.31"
+
+"@babel/helper-module-imports@7.0.0-beta.31":
+  version "7.0.0-beta.31"
+  resolved "https://registry.yarnpkg.com/@babel/helper-module-imports/-/helper-module-imports-7.0.0-beta.31.tgz#75d246ab1d7528a571a5b326b5380cd3e3c103c0"
+  dependencies:
+    "@babel/types" "7.0.0-beta.31"
+    lodash "^4.2.0"
+
+"@babel/template@7.0.0-beta.31":
+  version "7.0.0-beta.31"
+  resolved "https://registry.yarnpkg.com/@babel/template/-/template-7.0.0-beta.31.tgz#577bb29389f6c497c3e7d014617e7d6713f68bda"
+  dependencies:
+    "@babel/code-frame" "7.0.0-beta.31"
+    "@babel/types" "7.0.0-beta.31"
+    babylon "7.0.0-beta.31"
+    lodash "^4.2.0"
+
+"@babel/traverse@7.0.0-beta.31":
+  version "7.0.0-beta.31"
+  resolved "https://registry.yarnpkg.com/@babel/traverse/-/traverse-7.0.0-beta.31.tgz#db399499ad74aefda014f0c10321ab255134b1df"
+  dependencies:
+    "@babel/code-frame" "7.0.0-beta.31"
+    "@babel/helper-function-name" "7.0.0-beta.31"
+    "@babel/types" "7.0.0-beta.31"
+    babylon "7.0.0-beta.31"
+    debug "^3.0.1"
+    globals "^10.0.0"
+    invariant "^2.2.0"
+    lodash "^4.2.0"
+
+"@babel/types@7.0.0-beta.31":
+  version "7.0.0-beta.31"
+  resolved "https://registry.yarnpkg.com/@babel/types/-/types-7.0.0-beta.31.tgz#42c9c86784f674c173fb21882ca9643334029de4"
+  dependencies:
+    esutils "^2.0.2"
+    lodash "^4.2.0"
+    to-fast-properties "^2.0.0"
+
 "@semantic-release/commit-analyzer@^3.0.1":
   version "3.0.7"
   resolved "https://registry.yarnpkg.com/@semantic-release/commit-analyzer/-/commit-analyzer-3.0.7.tgz#dc955444a6d3d2ae9b8e21f90c2c80c4e9142b2f"
@@ -48,8 +116,8 @@
     pify "^3.0.0"
 
 "@types/node@*":
-  version "8.0.50"
-  resolved "https://registry.yarnpkg.com/@types/node/-/node-8.0.50.tgz#dc545448e128c88c4eec7cd64025fcc3b7604541"
+  version "8.0.57"
+  resolved "https://registry.yarnpkg.com/@types/node/-/node-8.0.57.tgz#e5d8b4dc112763e35cfc51988f4f38da3c486d99"
 
 JSONStream@^1.0.4:
   version "1.3.1"
@@ -79,11 +147,11 @@ acorn-dynamic-import@^2.0.0:
   dependencies:
     acorn "^4.0.3"
 
-acorn-globals@^3.1.0:
-  version "3.1.0"
-  resolved "https://registry.yarnpkg.com/acorn-globals/-/acorn-globals-3.1.0.tgz#fd8270f71fbb4996b004fa880ee5d46573a731bf"
+acorn-globals@^4.0.0:
+  version "4.1.0"
+  resolved "https://registry.yarnpkg.com/acorn-globals/-/acorn-globals-4.1.0.tgz#ab716025dbe17c54d3ef81d32ece2b2d99fe2538"
   dependencies:
-    acorn "^4.0.4"
+    acorn "^5.0.0"
 
 acorn-jsx@^3.0.0:
   version "3.0.1"
@@ -95,11 +163,11 @@ acorn@^3.0.4:
   version "3.3.0"
   resolved "https://registry.yarnpkg.com/acorn/-/acorn-3.3.0.tgz#45e37fb39e8da3f25baee3ff5369e2bb5f22017a"
 
-acorn@^4.0.3, acorn@^4.0.4:
+acorn@^4.0.3:
   version "4.0.13"
   resolved "https://registry.yarnpkg.com/acorn/-/acorn-4.0.13.tgz#105495ae5361d697bd195c825192e1ad7f253787"
 
-acorn@^5.0.0, acorn@^5.1.1:
+acorn@^5.0.0, acorn@^5.1.1, acorn@^5.1.2, acorn@^5.2.1:
   version "5.2.1"
   resolved "https://registry.yarnpkg.com/acorn/-/acorn-5.2.1.tgz#317ac7821826c22c702d66189ab8359675f135d7"
 
@@ -141,10 +209,28 @@ align-text@^0.1.1, align-text@^0.1.3:
     longest "^1.0.1"
     repeat-string "^1.5.2"
 
+all-contributors-cli@^4.10.0:
+  version "4.10.0"
+  resolved "https://registry.yarnpkg.com/all-contributors-cli/-/all-contributors-cli-4.10.0.tgz#262a747a50a353bb95eba1df0b1a383e5acb6b60"
+  dependencies:
+    async "^2.0.0-rc.1"
+    chalk "^2.3.0"
+    inquirer "^4.0.0"
+    lodash "^4.11.2"
+    pify "^3.0.0"
+    request "^2.72.0"
+    yargs "^10.0.3"
+
 amdefine@>=0.0.4:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/amdefine/-/amdefine-1.0.1.tgz#4a5282ac164729e93619bcfd3ad151f817ce91f5"
 
+anchor-markdown-header@^0.5.5:
+  version "0.5.7"
+  resolved "https://registry.yarnpkg.com/anchor-markdown-header/-/anchor-markdown-header-0.5.7.tgz#045063d76e6a1f9cd327a57a0126aa0fdec371a7"
+  dependencies:
+    emoji-regex "~6.1.0"
+
 ansi-align@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/ansi-align/-/ansi-align-2.0.0.tgz#c36aeccba563b89ceb556f3690f0b1d9e3547f7f"
@@ -320,11 +406,21 @@ async-each@^1.0.0:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/async-each/-/async-each-1.0.1.tgz#19d386a1d9edc6e7c1c85d388aedbcc56d33602d"
 
+async-limiter@~1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/async-limiter/-/async-limiter-1.0.0.tgz#78faed8c3d074ab81f22b4e985d79e8738f720f8"
+
 async@^1.4.0, async@~1.5.2:
   version "1.5.2"
   resolved "https://registry.yarnpkg.com/async/-/async-1.5.2.tgz#ec6a61ae56480c0c3cb241c95618e20892f9672a"
 
-async@^2.0.1, async@^2.1.2, async@^2.1.4:
+async@^2.0.0-rc.1, async@^2.1.4:
+  version "2.6.0"
+  resolved "https://registry.yarnpkg.com/async/-/async-2.6.0.tgz#61a29abb6fcc026fea77e56d1c6ec53a795951f4"
+  dependencies:
+    lodash "^4.14.0"
+
+async@^2.0.1, async@^2.1.2:
   version "2.5.0"
   resolved "https://registry.yarnpkg.com/async/-/async-2.5.0.tgz#843190fd6b7357a0b9e1c956edddd5ec8462b54d"
   dependencies:
@@ -346,14 +442,6 @@ aws4@^1.2.1, aws4@^1.6.0:
   version "1.6.0"
   resolved "https://registry.yarnpkg.com/aws4/-/aws4-1.6.0.tgz#83ef5ca860b2b32e4a0deedee8c771b9db57471e"
 
-babel-code-frame@7.0.0-beta.0:
-  version "7.0.0-beta.0"
-  resolved "https://registry.yarnpkg.com/babel-code-frame/-/babel-code-frame-7.0.0-beta.0.tgz#418a7b5f3f7dc9a4670e61b1158b4c5661bec98d"
-  dependencies:
-    chalk "^2.0.0"
-    esutils "^2.0.2"
-    js-tokens "^3.0.0"
-
 babel-code-frame@^6.16.0, babel-code-frame@^6.26.0:
   version "6.26.0"
   resolved "https://registry.yarnpkg.com/babel-code-frame/-/babel-code-frame-6.26.0.tgz#63fd43f7dc1e3bb7ce35947db8fe369a3f58c74b"
@@ -387,13 +475,13 @@ babel-core@6.26.0, babel-core@^6.0.0, babel-core@^6.26.0:
     source-map "^0.5.6"
 
 babel-eslint@^8.0.1:
-  version "8.0.1"
-  resolved "https://registry.yarnpkg.com/babel-eslint/-/babel-eslint-8.0.1.tgz#5d718be7a328625d006022eb293ed3008cbd6346"
+  version "8.0.3"
+  resolved "https://registry.yarnpkg.com/babel-eslint/-/babel-eslint-8.0.3.tgz#f29ecf02336be438195325cd47c468da81ee4e98"
   dependencies:
-    babel-code-frame "7.0.0-beta.0"
-    babel-traverse "7.0.0-beta.0"
-    babel-types "7.0.0-beta.0"
-    babylon "7.0.0-beta.22"
+    "@babel/code-frame" "7.0.0-beta.31"
+    "@babel/traverse" "7.0.0-beta.31"
+    "@babel/types" "7.0.0-beta.31"
+    babylon "7.0.0-beta.31"
 
 babel-generator@6.26.0, babel-generator@^6.18.0, babel-generator@^6.26.0:
   version "6.26.0"
@@ -450,15 +538,6 @@ babel-helper-explode-assignable-expression@^6.24.1:
     babel-traverse "^6.24.1"
     babel-types "^6.24.1"
 
-babel-helper-function-name@7.0.0-beta.0:
-  version "7.0.0-beta.0"
-  resolved "https://registry.yarnpkg.com/babel-helper-function-name/-/babel-helper-function-name-7.0.0-beta.0.tgz#d1b6779b647e5c5c31ebeb05e13b998e4d352d56"
-  dependencies:
-    babel-helper-get-function-arity "7.0.0-beta.0"
-    babel-template "7.0.0-beta.0"
-    babel-traverse "7.0.0-beta.0"
-    babel-types "7.0.0-beta.0"
-
 babel-helper-function-name@^6.24.1:
   version "6.24.1"
   resolved "https://registry.yarnpkg.com/babel-helper-function-name/-/babel-helper-function-name-6.24.1.tgz#d3475b8c03ed98242a25b48351ab18399d3580a9"
@@ -469,12 +548,6 @@ babel-helper-function-name@^6.24.1:
     babel-traverse "^6.24.1"
     babel-types "^6.24.1"
 
-babel-helper-get-function-arity@7.0.0-beta.0:
-  version "7.0.0-beta.0"
-  resolved "https://registry.yarnpkg.com/babel-helper-get-function-arity/-/babel-helper-get-function-arity-7.0.0-beta.0.tgz#9d1ab7213bb5efe1ef1638a8ea1489969b5a8b6e"
-  dependencies:
-    babel-types "7.0.0-beta.0"
-
 babel-helper-get-function-arity@^6.24.1:
   version "6.24.1"
   resolved "https://registry.yarnpkg.com/babel-helper-get-function-arity/-/babel-helper-get-function-arity-6.24.1.tgz#8f7782aa93407c41d3aa50908f89b031b1b6853d"
@@ -489,6 +562,13 @@ babel-helper-hoist-variables@^6.24.1:
     babel-runtime "^6.22.0"
     babel-types "^6.24.1"
 
+babel-helper-module-imports@^7.0.0-beta.3:
+  version "7.0.0-beta.3"
+  resolved "https://registry.yarnpkg.com/babel-helper-module-imports/-/babel-helper-module-imports-7.0.0-beta.3.tgz#e15764e3af9c8e11810c09f78f498a2bdc71585a"
+  dependencies:
+    babel-types "7.0.0-beta.3"
+    lodash "^4.2.0"
+
 babel-helper-optimise-call-expression@^6.24.1:
   version "6.24.1"
   resolved "https://registry.yarnpkg.com/babel-helper-optimise-call-expression/-/babel-helper-optimise-call-expression-6.24.1.tgz#f7a13427ba9f73f8f4fa993c54a97882d1244257"
@@ -532,12 +612,12 @@ babel-helpers@^6.24.1:
     babel-runtime "^6.22.0"
     babel-template "^6.24.1"
 
-babel-jest@^21.2.0:
-  version "21.2.0"
-  resolved "https://registry.yarnpkg.com/babel-jest/-/babel-jest-21.2.0.tgz#2ce059519a9374a2c46f2455b6fbef5ad75d863e"
+babel-jest@^22.0.1:
+  version "22.0.1"
+  resolved "https://registry.yarnpkg.com/babel-jest/-/babel-jest-22.0.1.tgz#4232ded3a11ff8cad2d4417c5f75eaecdb2a73a5"
   dependencies:
-    babel-plugin-istanbul "^4.0.0"
-    babel-preset-jest "^21.2.0"
+    babel-plugin-istanbul "^4.1.5"
+    babel-preset-jest "^22.0.1"
 
 babel-loader@7.1.2:
   version "7.1.2"
@@ -547,9 +627,11 @@ babel-loader@7.1.2:
     loader-utils "^1.0.2"
     mkdirp "^0.5.1"
 
-babel-messages@7.0.0-beta.0:
-  version "7.0.0-beta.0"
-  resolved "https://registry.yarnpkg.com/babel-messages/-/babel-messages-7.0.0-beta.0.tgz#6df01296e49fc8fbd0637394326a167f36da817b"
+babel-macros@^1.2.0:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/babel-macros/-/babel-macros-1.2.0.tgz#39e47ed6d286d4a98f1948d8bab45dac17e4e2d4"
+  dependencies:
+    cosmiconfig "3.1.0"
 
 babel-messages@^6.23.0:
   version "6.23.0"
@@ -563,7 +645,19 @@ babel-plugin-check-es2015-constants@^6.22.0:
   dependencies:
     babel-runtime "^6.22.0"
 
-babel-plugin-istanbul@^4.0.0:
+babel-plugin-emotion@^8.0.10:
+  version "8.0.10"
+  resolved "https://registry.yarnpkg.com/babel-plugin-emotion/-/babel-plugin-emotion-8.0.10.tgz#9247856d60718f3a741a8487ef907d95a4f5b8a7"
+  dependencies:
+    "@babel/helper-module-imports" "7.0.0-beta.31"
+    babel-macros "^1.2.0"
+    babel-plugin-syntax-jsx "^6.18.0"
+    convert-source-map "^1.5.0"
+    emotion-utils "^8.0.10"
+    source-map "^0.5.7"
+    touch "^1.0.0"
+
+babel-plugin-istanbul@^4.1.5:
   version "4.1.5"
   resolved "https://registry.yarnpkg.com/babel-plugin-istanbul/-/babel-plugin-istanbul-4.1.5.tgz#6760cdd977f411d3e175bb064f2bc327d99b2b6e"
   dependencies:
@@ -571,16 +665,19 @@ babel-plugin-istanbul@^4.0.0:
     istanbul-lib-instrument "^1.7.5"
     test-exclude "^4.1.1"
 
-babel-plugin-jest-hoist@^21.2.0:
-  version "21.2.0"
-  resolved "https://registry.yarnpkg.com/babel-plugin-jest-hoist/-/babel-plugin-jest-hoist-21.2.0.tgz#2cef637259bd4b628a6cace039de5fcd14dbb006"
+babel-plugin-jest-hoist@^22.0.1:
+  version "22.0.1"
+  resolved "https://registry.yarnpkg.com/babel-plugin-jest-hoist/-/babel-plugin-jest-hoist-22.0.1.tgz#e5a65a213158d6c523686c542124591e29a35d47"
 
 babel-plugin-lodash@^3.2.11:
-  version "3.2.11"
-  resolved "https://registry.yarnpkg.com/babel-plugin-lodash/-/babel-plugin-lodash-3.2.11.tgz#21c8fdec9fe1835efaa737873e3902bdd66d5701"
+  version "3.3.2"
+  resolved "https://registry.yarnpkg.com/babel-plugin-lodash/-/babel-plugin-lodash-3.3.2.tgz#da3a5b49ba27447f54463f6c4fa81396ccdd463f"
   dependencies:
+    babel-helper-module-imports "^7.0.0-beta.3"
+    babel-types "^6.26.0"
     glob "^7.1.1"
-    lodash "^4.17.2"
+    lodash "^4.17.4"
+    require-package-name "^2.0.1"
 
 babel-plugin-module-resolver@2.7.1:
   version "2.7.1"
@@ -614,7 +711,7 @@ babel-plugin-syntax-flow@^6.18.0:
   version "6.18.0"
   resolved "https://registry.yarnpkg.com/babel-plugin-syntax-flow/-/babel-plugin-syntax-flow-6.18.0.tgz#4c3ab20a2af26aa20cd25995c398c4eb70310c8d"
 
-babel-plugin-syntax-jsx@6.18.0, babel-plugin-syntax-jsx@^6.3.13, babel-plugin-syntax-jsx@^6.8.0:
+babel-plugin-syntax-jsx@6.18.0, babel-plugin-syntax-jsx@^6.18.0, babel-plugin-syntax-jsx@^6.3.13, babel-plugin-syntax-jsx@^6.8.0:
   version "6.18.0"
   resolved "https://registry.yarnpkg.com/babel-plugin-syntax-jsx/-/babel-plugin-syntax-jsx-6.18.0.tgz#0af32a9a6e13ca7a3fd5069e62d7b0f58d0d8946"
 
@@ -927,11 +1024,11 @@ babel-preset-flow@^6.23.0:
   dependencies:
     babel-plugin-transform-flow-strip-types "^6.22.0"
 
-babel-preset-jest@^21.2.0:
-  version "21.2.0"
-  resolved "https://registry.yarnpkg.com/babel-preset-jest/-/babel-preset-jest-21.2.0.tgz#ff9d2bce08abd98e8a36d9a8a5189b9173b85638"
+babel-preset-jest@^22.0.1:
+  version "22.0.1"
+  resolved "https://registry.yarnpkg.com/babel-preset-jest/-/babel-preset-jest-22.0.1.tgz#e94c3f8d701502d233da6c63925cb6d938d3771f"
   dependencies:
-    babel-plugin-jest-hoist "^21.2.0"
+    babel-plugin-jest-hoist "^22.0.1"
     babel-plugin-syntax-object-rest-spread "^6.13.0"
 
 babel-preset-react@6.24.1:
@@ -957,7 +1054,7 @@ babel-register@^6.26.0:
     mkdirp "^0.5.1"
     source-map-support "^0.4.15"
 
-babel-runtime@6.26.0, babel-runtime@^6.18.0, babel-runtime@^6.22.0, babel-runtime@^6.25.0, babel-runtime@^6.26.0:
+babel-runtime@6.26.0, babel-runtime@^6.18.0, babel-runtime@^6.22.0, babel-runtime@^6.26.0, babel-runtime@^6.6.1:
   version "6.26.0"
   resolved "https://registry.yarnpkg.com/babel-runtime/-/babel-runtime-6.26.0.tgz#965c7058668e82b55d7bfe04ff2337bc8b5647fe"
   dependencies:
@@ -974,29 +1071,6 @@ babel-template@6.26.0, babel-template@^6.16.0, babel-template@^6.24.1, babel-tem
     babylon "^6.18.0"
     lodash "^4.17.4"
 
-babel-template@7.0.0-beta.0:
-  version "7.0.0-beta.0"
-  resolved "https://registry.yarnpkg.com/babel-template/-/babel-template-7.0.0-beta.0.tgz#85083cf9e4395d5e48bf5154d7a8d6991cafecfb"
-  dependencies:
-    babel-traverse "7.0.0-beta.0"
-    babel-types "7.0.0-beta.0"
-    babylon "7.0.0-beta.22"
-    lodash "^4.2.0"
-
-babel-traverse@7.0.0-beta.0:
-  version "7.0.0-beta.0"
-  resolved "https://registry.yarnpkg.com/babel-traverse/-/babel-traverse-7.0.0-beta.0.tgz#da14be9b762f62a2f060db464eaafdd8cd072a41"
-  dependencies:
-    babel-code-frame "7.0.0-beta.0"
-    babel-helper-function-name "7.0.0-beta.0"
-    babel-messages "7.0.0-beta.0"
-    babel-types "7.0.0-beta.0"
-    babylon "7.0.0-beta.22"
-    debug "^3.0.1"
-    globals "^10.0.0"
-    invariant "^2.2.0"
-    lodash "^4.2.0"
-
 babel-traverse@^6.18.0, babel-traverse@^6.24.1, babel-traverse@^6.25.0, babel-traverse@^6.26.0:
   version "6.26.0"
   resolved "https://registry.yarnpkg.com/babel-traverse/-/babel-traverse-6.26.0.tgz#46a9cbd7edcc62c8e5c064e2d2d8d0f4035766ee"
@@ -1020,9 +1094,9 @@ babel-types@6.23.0:
     lodash "^4.2.0"
     to-fast-properties "^1.0.1"
 
-babel-types@7.0.0-beta.0:
-  version "7.0.0-beta.0"
-  resolved "https://registry.yarnpkg.com/babel-types/-/babel-types-7.0.0-beta.0.tgz#eb8b6e556470e6dcc4aef982d79ad229469b5169"
+babel-types@7.0.0-beta.3:
+  version "7.0.0-beta.3"
+  resolved "https://registry.yarnpkg.com/babel-types/-/babel-types-7.0.0-beta.3.tgz#cd927ca70e0ae8ab05f4aab83778cfb3e6eb20b4"
   dependencies:
     esutils "^2.0.2"
     lodash "^4.2.0"
@@ -1037,14 +1111,18 @@ babel-types@^6.18.0, babel-types@^6.19.0, babel-types@^6.24.1, babel-types@^6.26
     lodash "^4.17.4"
     to-fast-properties "^1.0.3"
 
-babylon@7.0.0-beta.22:
-  version "7.0.0-beta.22"
-  resolved "https://registry.yarnpkg.com/babylon/-/babylon-7.0.0-beta.22.tgz#74f0ad82ed7c7c3cfeab74cf684f815104161b65"
+babylon@7.0.0-beta.31:
+  version "7.0.0-beta.31"
+  resolved "https://registry.yarnpkg.com/babylon/-/babylon-7.0.0-beta.31.tgz#7ec10f81e0e456fd0f855ad60fa30c2ac454283f"
 
 babylon@^6.18.0:
   version "6.18.0"
   resolved "https://registry.yarnpkg.com/babylon/-/babylon-6.18.0.tgz#af2f3b88fa6f5c1e4c634d1a0f8eac4f55b395e3"
 
+bail@^1.0.0:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/bail/-/bail-1.0.2.tgz#f7d6c1731630a9f9f0d4d35ed1f962e2074a1764"
+
 balanced-match@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/balanced-match/-/balanced-match-1.0.0.tgz#89b4d199ab2bee49de164ea02b89ce462d71b767"
@@ -1067,6 +1145,10 @@ binary-extensions@^1.0.0:
   version "1.10.0"
   resolved "https://registry.yarnpkg.com/binary-extensions/-/binary-extensions-1.10.0.tgz#9aeb9a6c5e88638aad171e167f5900abe24835d0"
 
+bindings@^1.2.1:
+  version "1.3.0"
+  resolved "https://registry.yarnpkg.com/bindings/-/bindings-1.3.0.tgz#b346f6ecf6a95f5a815c5839fc7cdb22502f1ed7"
+
 bl@~1.1.2:
   version "1.1.2"
   resolved "https://registry.yarnpkg.com/bl/-/bl-1.1.2.tgz#fdca871a99713aa00d19e3bbba41c44787a65398"
@@ -1120,9 +1202,13 @@ boom@5.x.x:
   dependencies:
     hoek "4.x.x"
 
+boundary@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/boundary/-/boundary-1.0.1.tgz#4d67dc2602c0cc16dd9bce7ebf87e948290f5812"
+
 boxen@^1.2.1:
-  version "1.2.2"
-  resolved "https://registry.yarnpkg.com/boxen/-/boxen-1.2.2.tgz#3f1d4032c30ffea9d4b02c322eaf2ea741dcbce5"
+  version "1.3.0"
+  resolved "https://registry.yarnpkg.com/boxen/-/boxen-1.3.0.tgz#55c6c39a8ba58d9c61ad22cd877532deb665a20b"
   dependencies:
     ansi-align "^2.0.0"
     camelcase "^4.0.0"
@@ -1130,7 +1216,7 @@ boxen@^1.2.1:
     cli-boxes "^1.0.0"
     string-width "^2.0.0"
     term-size "^1.2.0"
-    widest-line "^1.0.0"
+    widest-line "^2.0.0"
 
 brace-expansion@^1.1.7:
   version "1.1.8"
@@ -1151,6 +1237,10 @@ brorand@^1.0.1:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/brorand/-/brorand-1.1.0.tgz#12c25efe40a45e3c323eb8675a0a0ce57b22371f"
 
+browser-process-hrtime@^0.1.2:
+  version "0.1.2"
+  resolved "https://registry.yarnpkg.com/browser-process-hrtime/-/browser-process-hrtime-0.1.2.tgz#425d68a58d3447f02a04aa894187fce8af8b7b8e"
+
 browser-resolve@^1.11.2:
   version "1.11.2"
   resolved "https://registry.yarnpkg.com/browser-resolve/-/browser-resolve-1.11.2.tgz#8ff09b0a2c421718a1051c260b32e48f442938ce"
@@ -1322,6 +1412,10 @@ caseless@~0.12.0:
   version "0.12.0"
   resolved "https://registry.yarnpkg.com/caseless/-/caseless-0.12.0.tgz#1b681c21ff84033c826543090689420d187151dc"
 
+ccount@^1.0.0:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/ccount/-/ccount-1.0.2.tgz#53b6a2f815bb77b9c2871f7b9a72c3a25f1d8e89"
+
 center-align@^0.1.1:
   version "0.1.3"
   resolved "https://registry.yarnpkg.com/center-align/-/center-align-0.1.3.tgz#aa0d32629b6ee972200411cbd4461c907bc2b7ad"
@@ -1339,7 +1433,7 @@ chalk@^1.0.0, chalk@^1.1.1, chalk@^1.1.3:
     strip-ansi "^3.0.0"
     supports-color "^2.0.0"
 
-chalk@^2.0.0, chalk@^2.0.1, chalk@^2.1.0:
+chalk@^2.0.0, chalk@^2.0.1, chalk@^2.1.0, chalk@^2.3.0:
   version "2.3.0"
   resolved "https://registry.yarnpkg.com/chalk/-/chalk-2.3.0.tgz#b5ea48efc9c1793dccc9b4767c93914d3f2d52ba"
   dependencies:
@@ -1347,6 +1441,26 @@ chalk@^2.0.0, chalk@^2.0.1, chalk@^2.1.0:
     escape-string-regexp "^1.0.5"
     supports-color "^4.0.0"
 
+character-entities-html4@^1.0.0:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/character-entities-html4/-/character-entities-html4-1.1.1.tgz#359a2a4a0f7e29d3dc2ac99bdbe21ee39438ea50"
+
+character-entities-legacy@^1.0.0:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/character-entities-legacy/-/character-entities-legacy-1.1.1.tgz#f40779df1a101872bb510a3d295e1fccf147202f"
+
+character-entities@^1.0.0:
+  version "1.2.1"
+  resolved "https://registry.yarnpkg.com/character-entities/-/character-entities-1.2.1.tgz#f76871be5ef66ddb7f8f8e3478ecc374c27d6dca"
+
+character-reference-invalid@^1.0.0:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/character-reference-invalid/-/character-reference-invalid-1.1.1.tgz#942835f750e4ec61a308e60c2ef8cc1011202efc"
+
+chardet@^0.4.0:
+  version "0.4.2"
+  resolved "https://registry.yarnpkg.com/chardet/-/chardet-0.4.2.tgz#b5473b33dc97c424e5d98dc87d55d4d8a29c8bf2"
+
 cheerio@^1.0.0-rc.2:
   version "1.0.0-rc.2"
   resolved "https://registry.yarnpkg.com/cheerio/-/cheerio-1.0.0-rc.2.tgz#4b9f53a81b27e4d5dac31c0ffd0cfa03cc6830db"
@@ -1374,8 +1488,8 @@ chokidar@^1.7.0:
     fsevents "^1.0.0"
 
 ci-info@^1.0.0:
-  version "1.1.1"
-  resolved "https://registry.yarnpkg.com/ci-info/-/ci-info-1.1.1.tgz#47b44df118c48d2597b56d342e7e25791060171a"
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/ci-info/-/ci-info-1.1.2.tgz#03561259db48d0474c8bdc90f5b47b068b6bbfb4"
 
 cipher-base@^1.0.0, cipher-base@^1.0.1, cipher-base@^1.0.3:
   version "1.0.4"
@@ -1388,10 +1502,6 @@ circular-json@^0.3.1:
   version "0.3.3"
   resolved "https://registry.yarnpkg.com/circular-json/-/circular-json-0.3.3.tgz#815c99ea84f6809529d2f45791bdf82711352d66"
 
-classnames@^2.2.5:
-  version "2.2.5"
-  resolved "https://registry.yarnpkg.com/classnames/-/classnames-2.2.5.tgz#fb3801d453467649ef3603c7d61a02bd129bde6d"
-
 cli-boxes@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/cli-boxes/-/cli-boxes-1.0.0.tgz#4fa917c3e59c94a004cd61f8ee509da651687143"
@@ -1402,6 +1512,12 @@ cli-cursor@^1.0.1, cli-cursor@^1.0.2:
   dependencies:
     restore-cursor "^1.0.1"
 
+cli-cursor@^2.1.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/cli-cursor/-/cli-cursor-2.1.0.tgz#b35dac376479facc3e94747d41d0d0f5238ffcb5"
+  dependencies:
+    restore-cursor "^2.0.0"
+
 cli-spinners@^0.1.2:
   version "0.1.2"
   resolved "https://registry.yarnpkg.com/cli-spinners/-/cli-spinners-0.1.2.tgz#bb764d88e185fb9e1e6a2a1f19772318f605e31c"
@@ -1450,9 +1566,13 @@ codeclimate-test-reporter@^0.5.0:
     lcov-parse "0.0.10"
     request "~2.79.0"
 
+collapse-white-space@^1.0.0:
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/collapse-white-space/-/collapse-white-space-1.0.3.tgz#4b906f670e5a963a87b76b0e1689643341b6023c"
+
 color-convert@^1.9.0:
-  version "1.9.0"
-  resolved "https://registry.yarnpkg.com/color-convert/-/color-convert-1.9.0.tgz#1accf97dd739b983bf994d56fec8f95853641b7a"
+  version "1.9.1"
+  resolved "https://registry.yarnpkg.com/color-convert/-/color-convert-1.9.1.tgz#c1261107aeb2f294ebffec9ed9ecad529a6097ed"
   dependencies:
     color-name "^1.1.1"
 
@@ -1470,13 +1590,17 @@ combined-stream@^1.0.5, combined-stream@~1.0.5:
   dependencies:
     delayed-stream "~1.0.0"
 
-commander@2.9.0:
+commander@2.9.0, commander@~2.9.0:
   version "2.9.0"
   resolved "https://registry.yarnpkg.com/commander/-/commander-2.9.0.tgz#9c99094176e12240cb22d6c5146098400fe0f7d4"
   dependencies:
     graceful-readlink ">= 1.0.0"
 
-commander@^2.11.0, commander@^2.9.0:
+commander@^2.11.0:
+  version "2.12.2"
+  resolved "https://registry.yarnpkg.com/commander/-/commander-2.12.2.tgz#0f5946c427ed9ec0d91a46bb9def53e54650e555"
+
+commander@^2.9.0:
   version "2.11.0"
   resolved "https://registry.yarnpkg.com/commander/-/commander-2.11.0.tgz#157152fd1e7a6c8d98a5b715cf376df928004563"
 
@@ -1614,7 +1738,11 @@ convert-source-map@1.3.0:
   version "1.3.0"
   resolved "https://registry.yarnpkg.com/convert-source-map/-/convert-source-map-1.3.0.tgz#e9f3e9c6e2728efc2676696a70eb382f73106a67"
 
-convert-source-map@^1.4.0, convert-source-map@^1.5.0:
+convert-source-map@^1.4.0:
+  version "1.5.1"
+  resolved "https://registry.yarnpkg.com/convert-source-map/-/convert-source-map-1.5.1.tgz#b8278097b9bc229365de5c62cf5fcaed8b5599e5"
+
+convert-source-map@^1.5.0:
   version "1.5.0"
   resolved "https://registry.yarnpkg.com/convert-source-map/-/convert-source-map-1.5.0.tgz#9acd70851c6d5dfdd93d9282e5edf94a03ff46b5"
 
@@ -1637,7 +1765,11 @@ core-js@^1.0.0:
   version "1.2.7"
   resolved "https://registry.yarnpkg.com/core-js/-/core-js-1.2.7.tgz#652294c14651db28fa93bd2d5ff2983a4f08c636"
 
-core-js@^2.0.0, core-js@^2.4.0, core-js@^2.5.0:
+core-js@^2.0.0:
+  version "2.5.2"
+  resolved "https://registry.yarnpkg.com/core-js/-/core-js-2.5.2.tgz#bc4648656e7dc9dc80d7d3c7bbc172d96e744e63"
+
+core-js@^2.4.0, core-js@^2.5.0:
   version "2.5.1"
   resolved "https://registry.yarnpkg.com/core-js/-/core-js-2.5.1.tgz#ae6874dc66937789b80754ff5428df66819ca50b"
 
@@ -1645,7 +1777,7 @@ core-util-is@1.0.2, core-util-is@^1.0.1, core-util-is@~1.0.0:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/core-util-is/-/core-util-is-1.0.2.tgz#b5fd54220aa2bc5ab57aab7140c940754503c1a7"
 
-cosmiconfig@^3.1.0:
+cosmiconfig@3.1.0, cosmiconfig@^3.1.0:
   version "3.1.0"
   resolved "https://registry.yarnpkg.com/cosmiconfig/-/cosmiconfig-3.1.0.tgz#640a94bf9847f321800403cd273af60665c73397"
   dependencies:
@@ -1788,7 +1920,7 @@ dashdash@^1.12.0:
   dependencies:
     assert-plus "^1.0.0"
 
-date-fns@1.29.0, date-fns@^1.27.2:
+date-fns@^1.27.2, date-fns@^1.29.0:
   version "1.29.0"
   resolved "https://registry.yarnpkg.com/date-fns/-/date-fns-1.29.0.tgz#12e609cdcb935127311d04d33334e2960a2a54e6"
 
@@ -1803,7 +1935,7 @@ dateformat@^1.0.11, dateformat@^1.0.12:
     get-stdin "^4.0.1"
     meow "^3.3.0"
 
-debug@2.6.9, debug@^2.1.1, debug@^2.2.0, debug@^2.4.1, debug@^2.6.8, debug@^2.6.9:
+debug@2.6.9, debug@^2.1.1, debug@^2.1.3, debug@^2.2.0, debug@^2.4.1, debug@^2.6.8, debug@^2.6.9:
   version "2.6.9"
   resolved "https://registry.yarnpkg.com/debug/-/debug-2.6.9.tgz#5d128515df134ff327e90a4c93f4e077a536341f"
   dependencies:
@@ -1829,7 +1961,7 @@ deep-assign@^1.0.0:
   dependencies:
     is-obj "^1.0.0"
 
-deep-extend@~0.4.0:
+deep-extend@~0.4.0, deep-extend@~0.4.1:
   version "0.4.2"
   resolved "https://registry.yarnpkg.com/deep-extend/-/deep-extend-0.4.2.tgz#48b699c27e334bf89f10892be432f6e4c7d34a7f"
 
@@ -1916,6 +2048,10 @@ detect-libc@^1.0.2:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/detect-libc/-/detect-libc-1.0.2.tgz#71ad5d204bf17a6a6ca8f450c61454066ef461e1"
 
+detect-newline@^2.1.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/detect-newline/-/detect-newline-2.1.0.tgz#f41f1c10be4b00e87b5f13da680759f2c5bfd3e2"
+
 diff@^3.2.0:
   version "3.4.0"
   resolved "https://registry.yarnpkg.com/diff/-/diff-3.4.0.tgz#b1d85507daf3964828de54b37d0d73ba67dda56c"
@@ -1932,6 +2068,17 @@ discontinuous-range@1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/discontinuous-range/-/discontinuous-range-1.0.0.tgz#e38331f0844bba49b9a9cb71c771585aab1bc65a"
 
+doctoc@^1.3.0:
+  version "1.3.0"
+  resolved "https://registry.yarnpkg.com/doctoc/-/doctoc-1.3.0.tgz#7f0839851dd58c808a2cae55d9504e012d08ee30"
+  dependencies:
+    anchor-markdown-header "^0.5.5"
+    htmlparser2 "~3.9.2"
+    markdown-to-ast "~3.4.0"
+    minimist "~1.2.0"
+    underscore "~1.8.3"
+    update-section "^0.3.0"
+
 doctrine@1.5.0:
   version "1.5.0"
   resolved "https://registry.yarnpkg.com/doctrine/-/doctrine-1.5.0.tgz#379dce730f6166f76cefa4e6707a159b02c5a6fa"
@@ -1940,11 +2087,10 @@ doctrine@1.5.0:
     isarray "^1.0.0"
 
 doctrine@^2.0.0:
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/doctrine/-/doctrine-2.0.0.tgz#c73d8d2909d22291e1a007a395804da8b665fe63"
+  version "2.0.2"
+  resolved "https://registry.yarnpkg.com/doctrine/-/doctrine-2.0.2.tgz#68f96ce8efc56cc42651f1faadb4f175273b0075"
   dependencies:
     esutils "^2.0.2"
-    isarray "^1.0.0"
 
 dom-serializer@0, dom-serializer@~0.1.0:
   version "0.1.0"
@@ -1969,6 +2115,10 @@ domelementtype@~1.1.1:
   version "1.1.3"
   resolved "https://registry.yarnpkg.com/domelementtype/-/domelementtype-1.1.3.tgz#bd28773e2642881aec51544924299c5cd822185b"
 
+domexception@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/domexception/-/domexception-1.0.0.tgz#81fe5df81b3f057052cde3a9fa9bf536a85b9ab0"
+
 domhandler@^2.3.0:
   version "2.4.1"
   resolved "https://registry.yarnpkg.com/domhandler/-/domhandler-2.4.1.tgz#892e47000a99be55bbf3774ffea0561d8879c259"
@@ -2047,10 +2197,33 @@ emitter-mixin@0.0.3:
   version "0.0.3"
   resolved "https://registry.yarnpkg.com/emitter-mixin/-/emitter-mixin-0.0.3.tgz#5948cb286f2e48edc3b251a7cfc1f7883396d65c"
 
+emoji-regex@~6.1.0:
+  version "6.1.3"
+  resolved "https://registry.yarnpkg.com/emoji-regex/-/emoji-regex-6.1.3.tgz#ec79a3969b02d2ecf2b72254279bf99bc7a83932"
+
 emojis-list@^2.0.0:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/emojis-list/-/emojis-list-2.1.0.tgz#4daa4d9db00f9819880c79fa457ae5b09a1fd389"
 
+emotion-server@^8.0.10:
+  version "8.0.10"
+  resolved "https://registry.yarnpkg.com/emotion-server/-/emotion-server-8.0.10.tgz#159e214421a1346efdbb87716d9839a057872cb5"
+  dependencies:
+    emotion-utils "^8.0.10"
+
+emotion-utils@^8.0.10:
+  version "8.0.10"
+  resolved "https://registry.yarnpkg.com/emotion-utils/-/emotion-utils-8.0.10.tgz#b42dd1386f07d74e45d5c78d7675f6c8f3165ae1"
+
+emotion@^8.0.10:
+  version "8.0.10"
+  resolved "https://registry.yarnpkg.com/emotion/-/emotion-8.0.10.tgz#ea10f25afdd2039205aa488844c7c25dd559b7cd"
+  dependencies:
+    babel-plugin-emotion "^8.0.10"
+    emotion-utils "^8.0.10"
+    stylis "^3.3.2"
+    stylis-rule-sheet "^0.0.5"
+
 encodeurl@~1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/encodeurl/-/encodeurl-1.0.1.tgz#79e3d58655346909fe6f0f45a5de68103b294d20"
@@ -2081,8 +2254,8 @@ entities@^1.1.1, entities@~1.1.1:
   resolved "https://registry.yarnpkg.com/entities/-/entities-1.1.1.tgz#6e5c2d0a5621b5dadaecef80b90edfb5cd7772f0"
 
 enzyme-adapter-react-16@^1.0.4:
-  version "1.0.4"
-  resolved "https://registry.yarnpkg.com/enzyme-adapter-react-16/-/enzyme-adapter-react-16-1.0.4.tgz#67f898cc053452f5c786424e395fe0c63a0607fe"
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/enzyme-adapter-react-16/-/enzyme-adapter-react-16-1.1.0.tgz#86c5db7c10f0be6ec25d54ca41b59f2abb397cf4"
   dependencies:
     enzyme-adapter-utils "^1.1.0"
     lodash "^4.17.4"
@@ -2092,8 +2265,8 @@ enzyme-adapter-react-16@^1.0.4:
     react-test-renderer "^16.0.0-0"
 
 enzyme-adapter-utils@^1.1.0:
-  version "1.1.1"
-  resolved "https://registry.yarnpkg.com/enzyme-adapter-utils/-/enzyme-adapter-utils-1.1.1.tgz#689de8853f0751710590d6dfa730ff4056ea36b2"
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/enzyme-adapter-utils/-/enzyme-adapter-utils-1.2.0.tgz#7f4471ee0a70b91169ec8860d2bf0a6b551664b2"
   dependencies:
     lodash "^4.17.4"
     object.assign "^4.0.4"
@@ -2106,21 +2279,22 @@ enzyme-to-json@^3.2.2:
     lodash "^4.17.4"
 
 enzyme@^3.1.1:
-  version "3.1.1"
-  resolved "https://registry.yarnpkg.com/enzyme/-/enzyme-3.1.1.tgz#c6948dfccd055d75fbd8627ad1c96a024d0e247b"
+  version "3.2.0"
+  resolved "https://registry.yarnpkg.com/enzyme/-/enzyme-3.2.0.tgz#998bdcda0fc71b8764a0017f7cc692c943f54a7a"
   dependencies:
     cheerio "^1.0.0-rc.2"
     function.prototype.name "^1.0.3"
+    has "^1.0.1"
     is-subset "^0.1.1"
     lodash "^4.17.4"
     object-is "^1.0.1"
     object.assign "^4.0.4"
     object.entries "^1.0.4"
     object.values "^1.0.4"
-    raf "^3.3.2"
+    raf "^3.4.0"
     rst-selector-parser "^2.2.3"
 
-errno@^0.1.2, errno@^0.1.3, errno@^0.1.4:
+errno@^0.1.2, errno@^0.1.3:
   version "0.1.4"
   resolved "https://registry.yarnpkg.com/errno/-/errno-0.1.4.tgz#b896e23a9e5e8ba33871fc996abd3635fc9a1c7d"
   dependencies:
@@ -2144,9 +2318,9 @@ error-stack-parser@^2.0.0:
   dependencies:
     stackframe "^1.0.3"
 
-es-abstract@^1.6.1, es-abstract@^1.7.0:
-  version "1.9.0"
-  resolved "https://registry.yarnpkg.com/es-abstract/-/es-abstract-1.9.0.tgz#690829a07cae36b222e7fd9b75c0d0573eb25227"
+es-abstract@^1.5.1, es-abstract@^1.6.1, es-abstract@^1.7.0:
+  version "1.10.0"
+  resolved "https://registry.yarnpkg.com/es-abstract/-/es-abstract-1.10.0.tgz#1ecb36c197842a00d8ee4c2dfd8646bb97d60864"
   dependencies:
     es-to-primitive "^1.1.1"
     function-bind "^1.1.1"
@@ -2232,7 +2406,7 @@ escape-string-regexp@^1.0.2, escape-string-regexp@^1.0.5:
   version "1.0.5"
   resolved "https://registry.yarnpkg.com/escape-string-regexp/-/escape-string-regexp-1.0.5.tgz#1b61c0562190a8dff6ae3bb2cf0200ca130b86d4"
 
-escodegen@^1.6.1:
+escodegen@^1.9.0:
   version "1.9.0"
   resolved "https://registry.yarnpkg.com/escodegen/-/escodegen-1.9.0.tgz#9811a2f265dc1cd3894420ee3717064b632b8852"
   dependencies:
@@ -2253,8 +2427,8 @@ escope@^3.6.0:
     estraverse "^4.1.1"
 
 eslint-config-prettier@^2.3.0:
-  version "2.7.0"
-  resolved "https://registry.yarnpkg.com/eslint-config-prettier/-/eslint-config-prettier-2.7.0.tgz#7bbfef66ad783277836f4ea556e68b9bcc9da4d0"
+  version "2.9.0"
+  resolved "https://registry.yarnpkg.com/eslint-config-prettier/-/eslint-config-prettier-2.9.0.tgz#5ecd65174d486c22dff389fe036febf502d468a3"
   dependencies:
     get-stdin "^5.0.1"
 
@@ -2287,8 +2461,8 @@ eslint-module-utils@^2.1.1:
     pkg-dir "^1.0.0"
 
 eslint-plugin-ava@^4.2.0:
-  version "4.2.2"
-  resolved "https://registry.yarnpkg.com/eslint-plugin-ava/-/eslint-plugin-ava-4.2.2.tgz#0a20395ddf6d7452f4f9d6fd1a90f0bf4a5fc4d5"
+  version "4.4.0"
+  resolved "https://registry.yarnpkg.com/eslint-plugin-ava/-/eslint-plugin-ava-4.4.0.tgz#c1866e1f62e70daf2b7b5f60cfbc53bfe267a717"
   dependencies:
     arrify "^1.0.1"
     deep-strict-equal "^0.2.0"
@@ -2328,13 +2502,13 @@ eslint-plugin-promise@^3.4.0:
   resolved "https://registry.yarnpkg.com/eslint-plugin-promise/-/eslint-plugin-promise-3.6.0.tgz#54b7658c8f454813dc2a870aff8152ec4969ba75"
 
 eslint-plugin-react@^7.1.0:
-  version "7.4.0"
-  resolved "https://registry.yarnpkg.com/eslint-plugin-react/-/eslint-plugin-react-7.4.0.tgz#300a95861b9729c087d362dd64abcc351a74364a"
+  version "7.5.1"
+  resolved "https://registry.yarnpkg.com/eslint-plugin-react/-/eslint-plugin-react-7.5.1.tgz#52e56e8d80c810de158859ef07b880d2f56ee30b"
   dependencies:
     doctrine "^2.0.0"
     has "^1.0.1"
     jsx-ast-utils "^2.0.0"
-    prop-types "^15.5.10"
+    prop-types "^15.6.0"
 
 eslint-plugin-unicorn@^2.1.0:
   version "2.1.2"
@@ -2387,10 +2561,10 @@ eslint@^3.18.0:
     user-home "^2.0.0"
 
 espree@^3.1.3, espree@^3.4.0:
-  version "3.5.1"
-  resolved "https://registry.yarnpkg.com/espree/-/espree-3.5.1.tgz#0c988b8ab46db53100a1954ae4ba995ddd27d87e"
+  version "3.5.2"
+  resolved "https://registry.yarnpkg.com/espree/-/espree-3.5.2.tgz#756ada8b979e9dcfcdb30aad8d1a9304a905e1ca"
   dependencies:
-    acorn "^5.1.1"
+    acorn "^5.2.1"
     acorn-jsx "^3.0.0"
 
 esprima@^3.1.3:
@@ -2508,15 +2682,15 @@ expand-range@^1.8.1:
   dependencies:
     fill-range "^2.1.0"
 
-expect@^21.2.1:
-  version "21.2.1"
-  resolved "https://registry.yarnpkg.com/expect/-/expect-21.2.1.tgz#003ac2ac7005c3c29e73b38a272d4afadd6d1d7b"
+expect@^22.0.1:
+  version "22.0.1"
+  resolved "https://registry.yarnpkg.com/expect/-/expect-22.0.1.tgz#691a323968ad99e34fc14f1d62753ec48d6215bc"
   dependencies:
     ansi-styles "^3.2.0"
-    jest-diff "^21.2.1"
-    jest-get-type "^21.2.0"
-    jest-matcher-utils "^21.2.1"
-    jest-message-util "^21.2.1"
+    jest-diff "^22.0.1"
+    jest-get-type "^22.0.1"
+    jest-matcher-utils "^22.0.1"
+    jest-message-util "^22.0.1"
     jest-regex-util "^21.2.0"
 
 express@^4.15.2:
@@ -2554,10 +2728,18 @@ express@^4.15.2:
     utils-merge "1.0.1"
     vary "~1.1.2"
 
-extend@~3.0.0, extend@~3.0.1:
+extend@^3.0.0, extend@~3.0.0, extend@~3.0.1:
   version "3.0.1"
   resolved "https://registry.yarnpkg.com/extend/-/extend-3.0.1.tgz#a755ea7bc1adfcc5a31ce7e762dbaadc5e636444"
 
+external-editor@^2.1.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/external-editor/-/external-editor-2.1.0.tgz#3d026a21b7f95b5726387d4200ac160d372c3b48"
+  dependencies:
+    chardet "^0.4.0"
+    iconv-lite "^0.4.17"
+    tmp "^0.0.33"
+
 extglob@^0.3.1:
   version "0.3.2"
   resolved "https://registry.yarnpkg.com/extglob/-/extglob-0.3.2.tgz#2e18ff3d2f49ab2765cec9023f011daa8d8349a1"
@@ -2605,6 +2787,12 @@ figures@^1.3.5, figures@^1.7.0:
     escape-string-regexp "^1.0.5"
     object-assign "^4.1.0"
 
+figures@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/figures/-/figures-2.0.0.tgz#3ab1a2d2a62c8bfb431a0c94cb797a2fce27c962"
+  dependencies:
+    escape-string-regexp "^1.0.5"
+
 file-entry-cache@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/file-entry-cache/-/file-entry-cache-2.0.0.tgz#c392990c3e684783d838b8c84a45d8a048458361"
@@ -2770,13 +2958,20 @@ fs.realpath@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/fs.realpath/-/fs.realpath-1.0.0.tgz#1504ad2523158caa40db4a2787cb01411994ea4f"
 
-fsevents@^1.0.0, fsevents@^1.1.1:
+fsevents@^1.0.0:
   version "1.1.2"
   resolved "https://registry.yarnpkg.com/fsevents/-/fsevents-1.1.2.tgz#3282b713fb3ad80ede0e9fcf4611b5aa6fc033f4"
   dependencies:
     nan "^2.3.0"
     node-pre-gyp "^0.6.36"
 
+fsevents@^1.1.1:
+  version "1.1.3"
+  resolved "https://registry.yarnpkg.com/fsevents/-/fsevents-1.1.3.tgz#11f82318f5fe7bb2cd22965a108e9306208216d8"
+  dependencies:
+    nan "^2.3.0"
+    node-pre-gyp "^0.6.39"
+
 fstream-ignore@^1.0.5:
   version "1.0.5"
   resolved "https://registry.yarnpkg.com/fstream-ignore/-/fstream-ignore-1.0.5.tgz#9c31dae34767018fe1d249b24dada67d092da105"
@@ -2847,6 +3042,10 @@ get-pkg-repo@^1.0.0:
     parse-github-repo-url "^1.3.0"
     through2 "^2.0.0"
 
+get-port@^3.2.0:
+  version "3.2.0"
+  resolved "https://registry.yarnpkg.com/get-port/-/get-port-3.2.0.tgz#dd7ce7de187c06c8bf353796ac71e099f0980ebc"
+
 get-set-props@^0.1.0:
   version "0.1.0"
   resolved "https://registry.yarnpkg.com/get-set-props/-/get-set-props-0.1.0.tgz#998475c178445686d0b32246da5df8dbcfbe8ea3"
@@ -2974,9 +3173,20 @@ glob@^6.0.1:
     once "^1.3.0"
     path-is-absolute "^1.0.0"
 
+glob@~7.0.3:
+  version "7.0.6"
+  resolved "https://registry.yarnpkg.com/glob/-/glob-7.0.6.tgz#211bafaf49e525b8cd93260d14ab136152b3f57a"
+  dependencies:
+    fs.realpath "^1.0.0"
+    inflight "^1.0.4"
+    inherits "2"
+    minimatch "^3.0.2"
+    once "^1.3.0"
+    path-is-absolute "^1.0.0"
+
 global-dirs@^0.1.0:
-  version "0.1.0"
-  resolved "https://registry.yarnpkg.com/global-dirs/-/global-dirs-0.1.0.tgz#10d34039e0df04272e262cf24224f7209434df4f"
+  version "0.1.1"
+  resolved "https://registry.yarnpkg.com/global-dirs/-/global-dirs-0.1.1.tgz#b319c0dd4607f353f3be9cca4c72fc148c49f445"
   dependencies:
     ini "^1.3.4"
 
@@ -2988,8 +3198,8 @@ global@^4.3.0:
     process "~0.5.1"
 
 globals@^10.0.0:
-  version "10.3.0"
-  resolved "https://registry.yarnpkg.com/globals/-/globals-10.3.0.tgz#716aba93657b56630b5a0e77de5ea8ac6215afaa"
+  version "10.4.0"
+  resolved "https://registry.yarnpkg.com/globals/-/globals-10.4.0.tgz#5c477388b128a9e4c5c5d01c7a2aca68c68b2da7"
 
 globals@^9.14.0, globals@^9.18.0:
   version "9.18.0"
@@ -3040,6 +3250,14 @@ graceful-fs@^4.1.11, graceful-fs@^4.1.2, graceful-fs@^4.1.4, graceful-fs@^4.1.6:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/graceful-readlink/-/graceful-readlink-1.0.1.tgz#4cafad76bc62f02fa039b2f94e9a3dd3a391a725"
 
+grid-emotion@^2.1.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/grid-emotion/-/grid-emotion-2.1.0.tgz#5e62a8468f9cff4e50680afb9be9322a68336385"
+  dependencies:
+    prop-types "^15.6.0"
+    styled-system "^1.0.2"
+    tag-hoc "^1.0.0"
+
 growly@^1.3.0:
   version "1.3.0"
   resolved "https://registry.yarnpkg.com/growly/-/growly-1.3.0.tgz#f10748cbe76af964b7c96c93c6bcc28af120c081"
@@ -3198,7 +3416,7 @@ htmlescape@1.1.1:
   version "1.1.1"
   resolved "https://registry.yarnpkg.com/htmlescape/-/htmlescape-1.1.1.tgz#3a03edc2214bca3b66424a3e7959349509cb0351"
 
-htmlparser2@^3.9.1:
+htmlparser2@^3.9.1, htmlparser2@~3.9.2:
   version "3.9.2"
   resolved "https://registry.yarnpkg.com/htmlparser2/-/htmlparser2-3.9.2.tgz#1bdf87acca0f3f9e53fa4fcceb0f4b4cbb00b338"
   dependencies:
@@ -3264,7 +3482,7 @@ husky@^0.14.3:
     normalize-path "^1.0.0"
     strip-indent "^2.0.0"
 
-iconv-lite@0.4.19, iconv-lite@~0.4.13:
+iconv-lite@0.4.19, iconv-lite@^0.4.17, iconv-lite@~0.4.13:
   version "0.4.19"
   resolved "https://registry.yarnpkg.com/iconv-lite/-/iconv-lite-0.4.19.tgz#f7468f60135f5e5dad3399c0a81be9a1603a082b"
 
@@ -3276,6 +3494,12 @@ ignore@^3.2.0, ignore@^3.2.6:
   version "3.3.7"
   resolved "https://registry.yarnpkg.com/ignore/-/ignore-3.3.7.tgz#612289bfb3c220e186a58118618d5be8c1bab021"
 
+immutability-helper@^2.1.2:
+  version "2.5.0"
+  resolved "https://registry.yarnpkg.com/immutability-helper/-/immutability-helper-2.5.0.tgz#01ea7204334997c645bdfa7eb22e8b84c970946e"
+  dependencies:
+    invariant "^2.2.0"
+
 import-from@^2.1.0:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/import-from/-/import-from-2.1.0.tgz#335db7f2a7affd53aaa471d4b8021dee36b7f3b1"
@@ -3345,6 +3569,25 @@ inquirer@^0.12.0:
     strip-ansi "^3.0.0"
     through "^2.3.6"
 
+inquirer@^4.0.0:
+  version "4.0.1"
+  resolved "https://registry.yarnpkg.com/inquirer/-/inquirer-4.0.1.tgz#b25cd541789394b4bb56f6440fb213b121149096"
+  dependencies:
+    ansi-escapes "^3.0.0"
+    chalk "^2.0.0"
+    cli-cursor "^2.1.0"
+    cli-width "^2.0.0"
+    external-editor "^2.1.0"
+    figures "^2.0.0"
+    lodash "^4.3.0"
+    mute-stream "0.0.7"
+    run-async "^2.2.0"
+    rx-lite "^4.0.8"
+    rx-lite-aggregates "^4.0.8"
+    string-width "^2.1.0"
+    strip-ansi "^4.0.0"
+    through "^2.3.6"
+
 interpret@^1.0.0:
   version "1.0.4"
   resolved "https://registry.yarnpkg.com/interpret/-/interpret-1.0.4.tgz#820cdd588b868ffb191a809506d6c9c8f212b1b0"
@@ -3367,6 +3610,17 @@ irregular-plurals@^1.0.0:
   version "1.4.0"
   resolved "https://registry.yarnpkg.com/irregular-plurals/-/irregular-plurals-1.4.0.tgz#2ca9b033651111855412f16be5d77c62a458a766"
 
+is-alphabetical@^1.0.0:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/is-alphabetical/-/is-alphabetical-1.0.1.tgz#c77079cc91d4efac775be1034bf2d243f95e6f08"
+
+is-alphanumerical@^1.0.0:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/is-alphanumerical/-/is-alphanumerical-1.0.1.tgz#dfb4aa4d1085e33bdb61c2dee9c80e9c6c19f53b"
+  dependencies:
+    is-alphabetical "^1.0.0"
+    is-decimal "^1.0.0"
+
 is-arrayish@^0.2.1:
   version "0.2.1"
   resolved "https://registry.yarnpkg.com/is-arrayish/-/is-arrayish-0.2.1.tgz#77c99840527aa8ecb1a8ba697b80645a7a926a9d"
@@ -3401,6 +3655,10 @@ is-date-object@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/is-date-object/-/is-date-object-1.0.1.tgz#9aa20eb6aeebbff77fbd33e74ca01b33581d3a16"
 
+is-decimal@^1.0.0:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/is-decimal/-/is-decimal-1.0.1.tgz#f5fb6a94996ad9e8e3761fbfbd091f1fca8c4e82"
+
 is-directory@^0.3.1:
   version "0.3.1"
   resolved "https://registry.yarnpkg.com/is-directory/-/is-directory-0.3.1.tgz#61339b6f2475fc772fd9c9d83f5c8575dc154ae1"
@@ -3466,6 +3724,10 @@ is-glob@^4.0.0:
   dependencies:
     is-extglob "^2.1.1"
 
+is-hexadecimal@^1.0.0:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/is-hexadecimal/-/is-hexadecimal-1.0.1.tgz#6e084bbc92061fbb0971ec58b6ce6d404e24da69"
+
 is-installed-globally@^0.1.0:
   version "0.1.0"
   resolved "https://registry.yarnpkg.com/is-installed-globally/-/is-installed-globally-0.1.0.tgz#0dfd98f5a9111716dd535dda6492f67bf3d25a80"
@@ -3658,7 +3920,7 @@ isstream@~0.1.2:
   version "0.1.2"
   resolved "https://registry.yarnpkg.com/isstream/-/isstream-0.1.2.tgz#47e63f7af55afa6f92e1500e690eb8b8529c099a"
 
-istanbul-api@^1.1.1:
+istanbul-api@^1.1.14:
   version "1.2.1"
   resolved "https://registry.yarnpkg.com/istanbul-api/-/istanbul-api-1.2.1.tgz#0c60a0515eb11c7d65c6b50bba2c6e999acd8620"
   dependencies:
@@ -3674,7 +3936,7 @@ istanbul-api@^1.1.1:
     mkdirp "^0.5.1"
     once "^1.4.0"
 
-istanbul-lib-coverage@^1.0.1, istanbul-lib-coverage@^1.1.1:
+istanbul-lib-coverage@^1.1.1:
   version "1.1.1"
   resolved "https://registry.yarnpkg.com/istanbul-lib-coverage/-/istanbul-lib-coverage-1.1.1.tgz#73bfb998885299415c93d38a3e9adf784a77a9da"
 
@@ -3684,7 +3946,7 @@ istanbul-lib-hook@^1.1.0:
   dependencies:
     append-transform "^0.4.0"
 
-istanbul-lib-instrument@^1.4.2, istanbul-lib-instrument@^1.7.5, istanbul-lib-instrument@^1.9.1:
+istanbul-lib-instrument@^1.7.5, istanbul-lib-instrument@^1.8.0, istanbul-lib-instrument@^1.9.1:
   version "1.9.1"
   resolved "https://registry.yarnpkg.com/istanbul-lib-instrument/-/istanbul-lib-instrument-1.9.1.tgz#250b30b3531e5d3251299fdd64b0b2c9db6b558e"
   dependencies:
@@ -3705,7 +3967,7 @@ istanbul-lib-report@^1.1.2:
     path-parse "^1.0.5"
     supports-color "^3.1.2"
 
-istanbul-lib-source-maps@^1.1.0, istanbul-lib-source-maps@^1.2.2:
+istanbul-lib-source-maps@^1.2.1, istanbul-lib-source-maps@^1.2.2:
   version "1.2.2"
   resolved "https://registry.yarnpkg.com/istanbul-lib-source-maps/-/istanbul-lib-source-maps-1.2.2.tgz#750578602435f28a0c04ee6d7d9e0f2960e62c1c"
   dependencies:
@@ -3721,137 +3983,156 @@ istanbul-reports@^1.1.3:
   dependencies:
     handlebars "^4.0.3"
 
-jest-changed-files@^21.2.0:
-  version "21.2.0"
-  resolved "https://registry.yarnpkg.com/jest-changed-files/-/jest-changed-files-21.2.0.tgz#5dbeecad42f5d88b482334902ce1cba6d9798d29"
+jest-changed-files@^22.0.1:
+  version "22.0.1"
+  resolved "https://registry.yarnpkg.com/jest-changed-files/-/jest-changed-files-22.0.1.tgz#195ff30255b67ec8809698dd7d2dc65f8cdfe6a1"
   dependencies:
     throat "^4.0.0"
 
-jest-cli@^21.2.1:
-  version "21.2.1"
-  resolved "https://registry.yarnpkg.com/jest-cli/-/jest-cli-21.2.1.tgz#9c528b6629d651911138d228bdb033c157ec8c00"
+jest-cli@^22.0.1:
+  version "22.0.1"
+  resolved "https://registry.yarnpkg.com/jest-cli/-/jest-cli-22.0.1.tgz#4bd19c939dd561f5cf5aa701bf779240fd5014fc"
   dependencies:
     ansi-escapes "^3.0.0"
     chalk "^2.0.1"
     glob "^7.1.2"
     graceful-fs "^4.1.11"
     is-ci "^1.0.10"
-    istanbul-api "^1.1.1"
-    istanbul-lib-coverage "^1.0.1"
-    istanbul-lib-instrument "^1.4.2"
-    istanbul-lib-source-maps "^1.1.0"
-    jest-changed-files "^21.2.0"
-    jest-config "^21.2.1"
-    jest-environment-jsdom "^21.2.1"
-    jest-haste-map "^21.2.0"
-    jest-message-util "^21.2.1"
+    istanbul-api "^1.1.14"
+    istanbul-lib-coverage "^1.1.1"
+    istanbul-lib-instrument "^1.8.0"
+    istanbul-lib-source-maps "^1.2.1"
+    jest-changed-files "^22.0.1"
+    jest-config "^22.0.1"
+    jest-environment-jsdom "^22.0.1"
+    jest-get-type "^22.0.1"
+    jest-haste-map "^22.0.1"
+    jest-message-util "^22.0.1"
     jest-regex-util "^21.2.0"
     jest-resolve-dependencies "^21.2.0"
-    jest-runner "^21.2.1"
-    jest-runtime "^21.2.1"
-    jest-snapshot "^21.2.1"
-    jest-util "^21.2.1"
+    jest-runner "^22.0.1"
+    jest-runtime "^22.0.1"
+    jest-snapshot "^22.0.1"
+    jest-util "^22.0.1"
+    jest-worker "^22.0.1"
     micromatch "^2.3.11"
-    node-notifier "^5.0.2"
-    pify "^3.0.0"
+    node-notifier "^5.1.2"
+    realpath-native "^1.0.0"
+    rimraf "^2.5.4"
     slash "^1.0.0"
     string-length "^2.0.0"
     strip-ansi "^4.0.0"
     which "^1.2.12"
-    worker-farm "^1.3.1"
-    yargs "^9.0.0"
+    yargs "^10.0.3"
 
-jest-config@^21.2.1:
-  version "21.2.1"
-  resolved "https://registry.yarnpkg.com/jest-config/-/jest-config-21.2.1.tgz#c7586c79ead0bcc1f38c401e55f964f13bf2a480"
+jest-config@^22.0.1:
+  version "22.0.1"
+  resolved "https://registry.yarnpkg.com/jest-config/-/jest-config-22.0.1.tgz#c7c7ad41e88d4d6fed5a6ecbdac8db30da5beb3a"
   dependencies:
     chalk "^2.0.1"
     glob "^7.1.1"
-    jest-environment-jsdom "^21.2.1"
-    jest-environment-node "^21.2.1"
-    jest-get-type "^21.2.0"
-    jest-jasmine2 "^21.2.1"
+    jest-environment-jsdom "^22.0.1"
+    jest-environment-node "^22.0.1"
+    jest-get-type "^22.0.1"
+    jest-jasmine2 "^22.0.1"
     jest-regex-util "^21.2.0"
-    jest-resolve "^21.2.0"
-    jest-util "^21.2.1"
-    jest-validate "^21.2.1"
-    pretty-format "^21.2.1"
+    jest-resolve "^22.0.1"
+    jest-util "^22.0.1"
+    jest-validate "^22.0.1"
+    pretty-format "^22.0.1"
 
-jest-diff@^21.2.1:
-  version "21.2.1"
-  resolved "https://registry.yarnpkg.com/jest-diff/-/jest-diff-21.2.1.tgz#46cccb6cab2d02ce98bc314011764bb95b065b4f"
+jest-diff@^22.0.1:
+  version "22.0.1"
+  resolved "https://registry.yarnpkg.com/jest-diff/-/jest-diff-22.0.1.tgz#eeca8dc0e26e534b699632a4bebd5901929ebeee"
   dependencies:
     chalk "^2.0.1"
     diff "^3.2.0"
-    jest-get-type "^21.2.0"
-    pretty-format "^21.2.1"
+    jest-get-type "^22.0.1"
+    pretty-format "^22.0.1"
 
-jest-docblock@^21.2.0:
-  version "21.2.0"
-  resolved "https://registry.yarnpkg.com/jest-docblock/-/jest-docblock-21.2.0.tgz#51529c3b30d5fd159da60c27ceedc195faf8d414"
+jest-docblock@^22.0.1:
+  version "22.0.1"
+  resolved "https://registry.yarnpkg.com/jest-docblock/-/jest-docblock-22.0.1.tgz#ad1128eca5ff621b939001dfea4de3c2cca0af8c"
+  dependencies:
+    detect-newline "^2.1.0"
 
-jest-environment-jsdom@^21.2.1:
-  version "21.2.1"
-  resolved "https://registry.yarnpkg.com/jest-environment-jsdom/-/jest-environment-jsdom-21.2.1.tgz#38d9980c8259b2a608ec232deee6289a60d9d5b4"
+jest-environment-jsdom@^22.0.1:
+  version "22.0.1"
+  resolved "https://registry.yarnpkg.com/jest-environment-jsdom/-/jest-environment-jsdom-22.0.1.tgz#112f955ec77025a8755ddd06214918d4c3b06a5d"
   dependencies:
-    jest-mock "^21.2.0"
-    jest-util "^21.2.1"
-    jsdom "^9.12.0"
+    jest-mock "^22.0.1"
+    jest-util "^22.0.1"
+    jsdom "^11.5.1"
 
-jest-environment-node@^21.2.1:
-  version "21.2.1"
-  resolved "https://registry.yarnpkg.com/jest-environment-node/-/jest-environment-node-21.2.1.tgz#98c67df5663c7fbe20f6e792ac2272c740d3b8c8"
+jest-environment-node@^22.0.1:
+  version "22.0.1"
+  resolved "https://registry.yarnpkg.com/jest-environment-node/-/jest-environment-node-22.0.1.tgz#0099321a3887a301f3693fdd81be9bfc4e9f7a14"
   dependencies:
-    jest-mock "^21.2.0"
-    jest-util "^21.2.1"
+    jest-mock "^22.0.1"
+    jest-util "^22.0.1"
 
 jest-get-type@^21.2.0:
   version "21.2.0"
   resolved "https://registry.yarnpkg.com/jest-get-type/-/jest-get-type-21.2.0.tgz#f6376ab9db4b60d81e39f30749c6c466f40d4a23"
 
-jest-haste-map@^21.2.0:
-  version "21.2.0"
-  resolved "https://registry.yarnpkg.com/jest-haste-map/-/jest-haste-map-21.2.0.tgz#1363f0a8bb4338f24f001806571eff7a4b2ff3d8"
+jest-get-type@^22.0.1:
+  version "22.0.1"
+  resolved "https://registry.yarnpkg.com/jest-get-type/-/jest-get-type-22.0.1.tgz#0b80757b67dd5abc165290d039937175255e9a8e"
+
+jest-haste-map@^22.0.1:
+  version "22.0.1"
+  resolved "https://registry.yarnpkg.com/jest-haste-map/-/jest-haste-map-22.0.1.tgz#812f33c68496abf46e61af0adfc9e0b85126bf94"
   dependencies:
     fb-watchman "^2.0.0"
     graceful-fs "^4.1.11"
-    jest-docblock "^21.2.0"
+    jest-docblock "^22.0.1"
+    jest-worker "^22.0.1"
     micromatch "^2.3.11"
     sane "^2.0.0"
-    worker-farm "^1.3.1"
 
-jest-jasmine2@^21.2.1:
-  version "21.2.1"
-  resolved "https://registry.yarnpkg.com/jest-jasmine2/-/jest-jasmine2-21.2.1.tgz#9cc6fc108accfa97efebce10c4308548a4ea7592"
+jest-jasmine2@^22.0.1:
+  version "22.0.1"
+  resolved "https://registry.yarnpkg.com/jest-jasmine2/-/jest-jasmine2-22.0.1.tgz#4443ccacd103dfde706834244ed7d23a1bfcdae0"
   dependencies:
+    callsites "^2.0.0"
     chalk "^2.0.1"
-    expect "^21.2.1"
+    expect "^22.0.1"
     graceful-fs "^4.1.11"
-    jest-diff "^21.2.1"
-    jest-matcher-utils "^21.2.1"
-    jest-message-util "^21.2.1"
-    jest-snapshot "^21.2.1"
-    p-cancelable "^0.3.0"
+    jest-diff "^22.0.1"
+    jest-matcher-utils "^22.0.1"
+    jest-message-util "^22.0.1"
+    jest-snapshot "^22.0.1"
+    source-map-support "^0.5.0"
 
-jest-matcher-utils@^21.2.1:
-  version "21.2.1"
-  resolved "https://registry.yarnpkg.com/jest-matcher-utils/-/jest-matcher-utils-21.2.1.tgz#72c826eaba41a093ac2b4565f865eb8475de0f64"
+jest-leak-detector@^22.0.1:
+  version "22.0.1"
+  resolved "https://registry.yarnpkg.com/jest-leak-detector/-/jest-leak-detector-22.0.1.tgz#0f1a8ce716ad33e751ef73c3f795222762ef41c6"
+  dependencies:
+    pretty-format "^22.0.1"
+  optionalDependencies:
+    weak "^1.0.1"
+
+jest-matcher-utils@^22.0.1:
+  version "22.0.1"
+  resolved "https://registry.yarnpkg.com/jest-matcher-utils/-/jest-matcher-utils-22.0.1.tgz#e89427709b0b72bf68a6a0d3ad9d194597e68bab"
   dependencies:
     chalk "^2.0.1"
-    jest-get-type "^21.2.0"
-    pretty-format "^21.2.1"
+    jest-get-type "^22.0.1"
+    pretty-format "^22.0.1"
 
-jest-message-util@^21.2.1:
-  version "21.2.1"
-  resolved "https://registry.yarnpkg.com/jest-message-util/-/jest-message-util-21.2.1.tgz#bfe5d4692c84c827d1dcf41823795558f0a1acbe"
+jest-message-util@^22.0.1:
+  version "22.0.1"
+  resolved "https://registry.yarnpkg.com/jest-message-util/-/jest-message-util-22.0.1.tgz#6abec52c4fb2b43e601c9e532a69121c83078fc6"
   dependencies:
+    "@babel/code-frame" "^7.0.0-beta.35"
     chalk "^2.0.1"
     micromatch "^2.3.11"
     slash "^1.0.0"
+    stack-utils "^1.0.1"
 
-jest-mock@^21.2.0:
-  version "21.2.0"
-  resolved "https://registry.yarnpkg.com/jest-mock/-/jest-mock-21.2.0.tgz#7eb0770e7317968165f61ea2a7281131534b3c0f"
+jest-mock@^22.0.1:
+  version "22.0.1"
+  resolved "https://registry.yarnpkg.com/jest-mock/-/jest-mock-22.0.1.tgz#a544fa898bbe2fa20893ac3f4bf565db94644bbf"
 
 jest-regex-util@^21.2.0:
   version "21.2.0"
@@ -3863,75 +4144,75 @@ jest-resolve-dependencies@^21.2.0:
   dependencies:
     jest-regex-util "^21.2.0"
 
-jest-resolve@^21.2.0:
-  version "21.2.0"
-  resolved "https://registry.yarnpkg.com/jest-resolve/-/jest-resolve-21.2.0.tgz#068913ad2ba6a20218e5fd32471f3874005de3a6"
+jest-resolve@^22.0.1:
+  version "22.0.1"
+  resolved "https://registry.yarnpkg.com/jest-resolve/-/jest-resolve-22.0.1.tgz#53a891713d15673787df2e712901e1e743c7740f"
   dependencies:
     browser-resolve "^1.11.2"
     chalk "^2.0.1"
-    is-builtin-module "^1.0.0"
 
-jest-runner@^21.2.1:
-  version "21.2.1"
-  resolved "https://registry.yarnpkg.com/jest-runner/-/jest-runner-21.2.1.tgz#194732e3e518bfb3d7cbfc0fd5871246c7e1a467"
-  dependencies:
-    jest-config "^21.2.1"
-    jest-docblock "^21.2.0"
-    jest-haste-map "^21.2.0"
-    jest-jasmine2 "^21.2.1"
-    jest-message-util "^21.2.1"
-    jest-runtime "^21.2.1"
-    jest-util "^21.2.1"
-    pify "^3.0.0"
+jest-runner@^22.0.1:
+  version "22.0.1"
+  resolved "https://registry.yarnpkg.com/jest-runner/-/jest-runner-22.0.1.tgz#28df594192c948e7d70a5f17639dff36f7276719"
+  dependencies:
+    jest-config "^22.0.1"
+    jest-docblock "^22.0.1"
+    jest-haste-map "^22.0.1"
+    jest-jasmine2 "^22.0.1"
+    jest-leak-detector "^22.0.1"
+    jest-message-util "^22.0.1"
+    jest-runtime "^22.0.1"
+    jest-util "^22.0.1"
+    jest-worker "^22.0.1"
     throat "^4.0.0"
-    worker-farm "^1.3.1"
 
-jest-runtime@^21.2.1:
-  version "21.2.1"
-  resolved "https://registry.yarnpkg.com/jest-runtime/-/jest-runtime-21.2.1.tgz#99dce15309c670442eee2ebe1ff53a3cbdbbb73e"
+jest-runtime@^22.0.1:
+  version "22.0.1"
+  resolved "https://registry.yarnpkg.com/jest-runtime/-/jest-runtime-22.0.1.tgz#0fcb1d7bd1ab9897ad18993d44456b3648052918"
   dependencies:
     babel-core "^6.0.0"
-    babel-jest "^21.2.0"
-    babel-plugin-istanbul "^4.0.0"
+    babel-jest "^22.0.1"
+    babel-plugin-istanbul "^4.1.5"
     chalk "^2.0.1"
     convert-source-map "^1.4.0"
     graceful-fs "^4.1.11"
-    jest-config "^21.2.1"
-    jest-haste-map "^21.2.0"
+    jest-config "^22.0.1"
+    jest-haste-map "^22.0.1"
     jest-regex-util "^21.2.0"
-    jest-resolve "^21.2.0"
-    jest-util "^21.2.1"
+    jest-resolve "^22.0.1"
+    jest-util "^22.0.1"
     json-stable-stringify "^1.0.1"
     micromatch "^2.3.11"
+    realpath-native "^1.0.0"
     slash "^1.0.0"
     strip-bom "3.0.0"
     write-file-atomic "^2.1.0"
-    yargs "^9.0.0"
+    yargs "^10.0.3"
 
-jest-snapshot@^21.2.1:
-  version "21.2.1"
-  resolved "https://registry.yarnpkg.com/jest-snapshot/-/jest-snapshot-21.2.1.tgz#29e49f16202416e47343e757e5eff948c07fd7b0"
+jest-snapshot@^22.0.1:
+  version "22.0.1"
+  resolved "https://registry.yarnpkg.com/jest-snapshot/-/jest-snapshot-22.0.1.tgz#855578b1a20fc45ae4ec38b4d3ebc93b19c786d0"
   dependencies:
     chalk "^2.0.1"
-    jest-diff "^21.2.1"
-    jest-matcher-utils "^21.2.1"
+    jest-diff "^22.0.1"
+    jest-matcher-utils "^22.0.1"
     mkdirp "^0.5.1"
     natural-compare "^1.4.0"
-    pretty-format "^21.2.1"
+    pretty-format "^22.0.1"
 
-jest-util@^21.2.1:
-  version "21.2.1"
-  resolved "https://registry.yarnpkg.com/jest-util/-/jest-util-21.2.1.tgz#a274b2f726b0897494d694a6c3d6a61ab819bb78"
+jest-util@^22.0.1:
+  version "22.0.1"
+  resolved "https://registry.yarnpkg.com/jest-util/-/jest-util-22.0.1.tgz#750d644bd2be72931dab01fe4db278a0b00432c6"
   dependencies:
     callsites "^2.0.0"
     chalk "^2.0.1"
     graceful-fs "^4.1.11"
-    jest-message-util "^21.2.1"
-    jest-mock "^21.2.0"
-    jest-validate "^21.2.1"
+    is-ci "^1.0.10"
+    jest-message-util "^22.0.1"
+    jest-validate "^22.0.1"
     mkdirp "^0.5.1"
 
-jest-validate@^21.1.0, jest-validate@^21.2.1:
+jest-validate@^21.1.0:
   version "21.2.1"
   resolved "https://registry.yarnpkg.com/jest-validate/-/jest-validate-21.2.1.tgz#cc0cbca653cd54937ba4f2a111796774530dd3c7"
   dependencies:
@@ -3940,11 +4221,26 @@ jest-validate@^21.1.0, jest-validate@^21.2.1:
     leven "^2.1.0"
     pretty-format "^21.2.1"
 
-jest@^21.2.1:
-  version "21.2.1"
-  resolved "https://registry.yarnpkg.com/jest/-/jest-21.2.1.tgz#c964e0b47383768a1438e3ccf3c3d470327604e1"
+jest-validate@^22.0.1:
+  version "22.0.1"
+  resolved "https://registry.yarnpkg.com/jest-validate/-/jest-validate-22.0.1.tgz#1a40e8ac41f1e85123c9bc8bae9de779754e30f2"
+  dependencies:
+    chalk "^2.0.1"
+    jest-get-type "^22.0.1"
+    leven "^2.1.0"
+    pretty-format "^22.0.1"
+
+jest-worker@^22.0.1:
+  version "22.0.1"
+  resolved "https://registry.yarnpkg.com/jest-worker/-/jest-worker-22.0.1.tgz#6f9353e91a624ac44ee0b14f38bf43a62e5aa34e"
   dependencies:
-    jest-cli "^21.2.1"
+    merge-stream "^1.0.1"
+
+jest@^22.0.0:
+  version "22.0.1"
+  resolved "https://registry.yarnpkg.com/jest/-/jest-22.0.1.tgz#79047f5d133b8e31fa0a4c0afe5a2b5e06bd9e86"
+  dependencies:
+    jest-cli "^22.0.1"
 
 js-tokens@^3.0.0, js-tokens@^3.0.2:
   version "3.0.2"
@@ -3965,28 +4261,33 @@ jsbn@~0.1.0:
   version "0.1.1"
   resolved "https://registry.yarnpkg.com/jsbn/-/jsbn-0.1.1.tgz#a5e654c2e5a2deb5f201d96cefbca80c0ef2f513"
 
-jsdom@^9.12.0:
-  version "9.12.0"
-  resolved "https://registry.yarnpkg.com/jsdom/-/jsdom-9.12.0.tgz#e8c546fffcb06c00d4833ca84410fed7f8a097d4"
+jsdom@^11.5.1:
+  version "11.5.1"
+  resolved "https://registry.yarnpkg.com/jsdom/-/jsdom-11.5.1.tgz#5df753b8d0bca20142ce21f4f6c039f99a992929"
   dependencies:
     abab "^1.0.3"
-    acorn "^4.0.4"
-    acorn-globals "^3.1.0"
+    acorn "^5.1.2"
+    acorn-globals "^4.0.0"
     array-equal "^1.0.0"
+    browser-process-hrtime "^0.1.2"
     content-type-parser "^1.0.1"
     cssom ">= 0.3.2 < 0.4.0"
     cssstyle ">= 0.2.37 < 0.3.0"
-    escodegen "^1.6.1"
+    domexception "^1.0.0"
+    escodegen "^1.9.0"
     html-encoding-sniffer "^1.0.1"
-    nwmatcher ">= 1.3.9 < 2.0.0"
-    parse5 "^1.5.1"
-    request "^2.79.0"
+    left-pad "^1.2.0"
+    nwmatcher "^1.4.3"
+    parse5 "^3.0.2"
+    pn "^1.0.0"
+    request "^2.83.0"
+    request-promise-native "^1.0.3"
     sax "^1.2.1"
     symbol-tree "^3.2.1"
-    tough-cookie "^2.3.2"
-    webidl-conversions "^4.0.0"
+    tough-cookie "^2.3.3"
+    webidl-conversions "^4.0.2"
     whatwg-encoding "^1.0.1"
-    whatwg-url "^4.3.0"
+    whatwg-url "^6.3.0"
     xml-name-validator "^2.0.1"
 
 jsesc@^1.3.0:
@@ -4092,6 +4393,10 @@ lcov-parse@0.0.10:
   version "0.0.10"
   resolved "https://registry.yarnpkg.com/lcov-parse/-/lcov-parse-0.0.10.tgz#1b0b8ff9ac9c7889250582b70b71315d9da6d9a3"
 
+left-pad@^1.2.0:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/left-pad/-/left-pad-1.2.0.tgz#d30a73c6b8201d8f7d8e7956ba9616087a68e0ee"
+
 leven@^2.1.0:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/leven/-/leven-2.1.0.tgz#c2e7a9f772094dee9d34202ae8acce4687875580"
@@ -4103,14 +4408,21 @@ levn@^0.3.0, levn@~0.3.0:
     prelude-ls "~1.1.2"
     type-check "~0.3.2"
 
-lint-staged@5.0.0:
-  version "5.0.0"
-  resolved "https://registry.yarnpkg.com/lint-staged/-/lint-staged-5.0.0.tgz#f1c670e03e2fdf3f3d0eb81f72d3bcf658770e54"
+linkify-it@^2.0.0:
+  version "2.0.3"
+  resolved "https://registry.yarnpkg.com/linkify-it/-/linkify-it-2.0.3.tgz#d94a4648f9b1c179d64fa97291268bdb6ce9434f"
+  dependencies:
+    uc.micro "^1.0.1"
+
+lint-staged@^6.0.0:
+  version "6.0.0"
+  resolved "https://registry.yarnpkg.com/lint-staged/-/lint-staged-6.0.0.tgz#7ab7d345f2fe302ff196f1de6a005594ace03210"
   dependencies:
     app-root-path "^2.0.0"
     chalk "^2.1.0"
     commander "^2.11.0"
     cosmiconfig "^3.1.0"
+    debug "^3.1.0"
     dedent "^0.7.0"
     execa "^0.8.0"
     find-parent-dir "^0.3.0"
@@ -4264,6 +4576,10 @@ lodash.cond@^4.3.0:
   version "4.5.2"
   resolved "https://registry.yarnpkg.com/lodash.cond/-/lodash.cond-4.5.2.tgz#f471a1da486be60f6ab955d17115523dd1d255d5"
 
+lodash.flatten@~4.3.0:
+  version "4.3.0"
+  resolved "https://registry.yarnpkg.com/lodash.flatten/-/lodash.flatten-4.3.0.tgz#e5ec4efe87efc59ce52f917cba8bf160636469cf"
+
 lodash.flattendeep@^4.4.0:
   version "4.4.0"
   resolved "https://registry.yarnpkg.com/lodash.flattendeep/-/lodash.flattendeep-4.4.0.tgz#fb030917f86a3134e5bc9bec0d69e0013ddfedb2"
@@ -4300,6 +4616,14 @@ lodash.snakecase@^4.0.1:
   version "4.1.1"
   resolved "https://registry.yarnpkg.com/lodash.snakecase/-/lodash.snakecase-4.1.1.tgz#39d714a35357147837aefd64b5dcbb16becd8f8d"
 
+lodash.sortby@^4.7.0:
+  version "4.7.0"
+  resolved "https://registry.yarnpkg.com/lodash.sortby/-/lodash.sortby-4.7.0.tgz#edd14c824e2cc9c1e0b0a1b42bb5210516a42438"
+
+lodash.take@^4.1.1:
+  version "4.1.1"
+  resolved "https://registry.yarnpkg.com/lodash.take/-/lodash.take-4.1.1.tgz#0b4146dcb7a70c6153495187fc10b12b71fefadf"
+
 lodash.template@^4.0.2:
   version "4.4.0"
   resolved "https://registry.yarnpkg.com/lodash.template/-/lodash.template-4.4.0.tgz#e73a0385c8355591746e020b99679c690e68fba0"
@@ -4317,7 +4641,11 @@ lodash.upperfirst@^4.2.0:
   version "4.3.1"
   resolved "https://registry.yarnpkg.com/lodash.upperfirst/-/lodash.upperfirst-4.3.1.tgz#1365edf431480481ef0d1c68957a5ed99d49f7ce"
 
-lodash@^4.0.0, lodash@^4.13.1, lodash@^4.14.0, lodash@^4.15.0, lodash@^4.17.2, lodash@^4.17.4, lodash@^4.2.0, lodash@^4.2.1, lodash@^4.3.0, lodash@^4.5.1, lodash@^4.6.1:
+lodash.values@~4.2.0:
+  version "4.2.0"
+  resolved "https://registry.yarnpkg.com/lodash.values/-/lodash.values-4.2.0.tgz#932625f7d2c954b63db895255548f3b49f120e9a"
+
+lodash@^4.0.0, lodash@^4.11.2, lodash@^4.13.1, lodash@^4.14.0, lodash@^4.15.0, lodash@^4.17.4, lodash@^4.2.0, lodash@^4.2.1, lodash@^4.3.0, lodash@^4.5.1, lodash@^4.6.1:
   version "4.17.4"
   resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.4.tgz#78203a4d1c328ae1d86dca6460e369b57f4055ae"
 
@@ -4344,6 +4672,10 @@ log-update@^1.0.2:
     ansi-escapes "^1.0.0"
     cli-cursor "^1.0.2"
 
+longest-streak@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/longest-streak/-/longest-streak-1.0.0.tgz#d06597c4d4c31b52ccb1f5d8f8fe7148eafd6965"
+
 longest@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/longest/-/longest-1.0.1.tgz#30a0b2da38f73770e8294a0d22e6625ed77d0097"
@@ -4388,6 +4720,47 @@ map-obj@^1.0.0, map-obj@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/map-obj/-/map-obj-1.0.1.tgz#d933ceb9205d82bdcf4886f6742bdc2b4dea146d"
 
+markdown-it@8.3.2:
+  version "8.3.2"
+  resolved "https://registry.yarnpkg.com/markdown-it/-/markdown-it-8.3.2.tgz#df4b86530d17c3bc9beec3b68d770b92ea17ae96"
+  dependencies:
+    argparse "^1.0.7"
+    entities "~1.1.1"
+    linkify-it "^2.0.0"
+    mdurl "^1.0.1"
+    uc.micro "^1.0.3"
+
+markdown-table@^0.4.0:
+  version "0.4.0"
+  resolved "https://registry.yarnpkg.com/markdown-table/-/markdown-table-0.4.0.tgz#890c2c1b3bfe83fb00e4129b8e4cfe645270f9d1"
+
+markdown-to-ast@~3.4.0:
+  version "3.4.0"
+  resolved "https://registry.yarnpkg.com/markdown-to-ast/-/markdown-to-ast-3.4.0.tgz#0e2cba81390b0549a9153ec3b0d915b61c164be7"
+  dependencies:
+    debug "^2.1.3"
+    remark "^5.0.1"
+    structured-source "^3.0.2"
+    traverse "^0.6.6"
+
+markdownlint-cli@^0.5.0:
+  version "0.5.0"
+  resolved "https://registry.yarnpkg.com/markdownlint-cli/-/markdownlint-cli-0.5.0.tgz#5c9562667efbf3298cfedb66d50c0a891b62cb39"
+  dependencies:
+    commander "~2.9.0"
+    deep-extend "~0.4.1"
+    glob "~7.0.3"
+    lodash.flatten "~4.3.0"
+    lodash.values "~4.2.0"
+    markdownlint "~0.6.1"
+    rc "~1.1.6"
+
+markdownlint@~0.6.1:
+  version "0.6.4"
+  resolved "https://registry.yarnpkg.com/markdownlint/-/markdownlint-0.6.4.tgz#7fa77e0d8c1b1c3ed7978761ce664bd23e7328ef"
+  dependencies:
+    markdown-it "8.3.2"
+
 marked@^0.3.6:
   version "0.3.6"
   resolved "https://registry.yarnpkg.com/marked/-/marked-0.3.6.tgz#b2c6c618fccece4ef86c4fc6cb8a7cbf5aeda8d7"
@@ -4414,6 +4787,10 @@ md5.js@^1.3.4:
     hash-base "^3.0.0"
     inherits "^2.0.1"
 
+mdurl@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/mdurl/-/mdurl-1.0.1.tgz#fe85b2ec75a59037f2adfec100fd6c601761152e"
+
 media-typer@0.3.0:
   version "0.3.0"
   resolved "https://registry.yarnpkg.com/media-typer/-/media-typer-0.3.0.tgz#8710d7af0aa626f8fffa1ce00168545263255748"
@@ -4450,6 +4827,12 @@ merge-descriptors@1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/merge-descriptors/-/merge-descriptors-1.0.1.tgz#b00aaa556dd8b44568150ec9d1b953f3f90cbb61"
 
+merge-stream@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/merge-stream/-/merge-stream-1.0.1.tgz#4041202d508a342ba00174008df0c251b8c135e1"
+  dependencies:
+    readable-stream "^2.0.1"
+
 merge@^1.1.3:
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/merge/-/merge-1.2.0.tgz#7531e39d4949c281a66b8c5a6e0265e8b05894da"
@@ -4529,7 +4912,7 @@ minimist@0.0.8:
   version "0.0.8"
   resolved "https://registry.yarnpkg.com/minimist/-/minimist-0.0.8.tgz#857fcabfc3397d2625b8228262e86aa7a011b05d"
 
-minimist@1.2.0, minimist@^1.1.1, minimist@^1.1.3, minimist@^1.2.0:
+minimist@1.2.0, minimist@^1.1.1, minimist@^1.1.3, minimist@^1.2.0, minimist@~1.2.0:
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/minimist/-/minimist-1.2.0.tgz#a35008b20f41383eec1fb914f4cd5df79a264284"
 
@@ -4575,6 +4958,10 @@ mute-stream@0.0.5:
   version "0.0.5"
   resolved "https://registry.yarnpkg.com/mute-stream/-/mute-stream-0.0.5.tgz#8fbfabb0a98a253d3184331f9e8deb7372fac6c0"
 
+mute-stream@0.0.7:
+  version "0.0.7"
+  resolved "https://registry.yarnpkg.com/mute-stream/-/mute-stream-0.0.7.tgz#3075ce93bc21b8fab43e1bc4da7e8115ed1e7bab"
+
 mv@2.1.1:
   version "2.1.1"
   resolved "https://registry.yarnpkg.com/mv/-/mv-2.1.1.tgz#ae6ce0d6f6d5e0a4f7d893798d03c1ea9559b6a2"
@@ -4591,6 +4978,10 @@ mz@2.7.0:
     object-assign "^4.0.1"
     thenify-all "^1.0.0"
 
+nan@^2.0.5:
+  version "2.8.0"
+  resolved "https://registry.yarnpkg.com/nan/-/nan-2.8.0.tgz#ed715f3fe9de02b57a5e6252d90a96675e1f085a"
+
 nan@^2.3.0:
   version "2.7.0"
   resolved "https://registry.yarnpkg.com/nan/-/nan-2.7.0.tgz#d95bf721ec877e08db276ed3fc6eb78f9083ad46"
@@ -4722,7 +5113,7 @@ node-libs-browser@^2.0.0:
     util "^0.10.3"
     vm-browserify "0.0.4"
 
-node-notifier@^5.0.2:
+node-notifier@^5.1.2:
   version "5.1.2"
   resolved "https://registry.yarnpkg.com/node-notifier/-/node-notifier-5.1.2.tgz#2fa9e12605fa10009d44549d6fcd8a63dde0e4ff"
   dependencies:
@@ -4731,7 +5122,7 @@ node-notifier@^5.0.2:
     shellwords "^0.1.0"
     which "^1.2.12"
 
-node-pre-gyp@^0.6.36:
+node-pre-gyp@^0.6.36, node-pre-gyp@^0.6.39:
   version "0.6.39"
   resolved "https://registry.yarnpkg.com/node-pre-gyp/-/node-pre-gyp-0.6.39.tgz#c00e96860b23c0e1420ac7befc5044e1d78d8649"
   dependencies:
@@ -4879,7 +5270,7 @@ number-is-nan@^1.0.0:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/number-is-nan/-/number-is-nan-1.0.1.tgz#097b602b53422a522c1afb8790318336941a011d"
 
-"nwmatcher@>= 1.3.9 < 2.0.0":
+nwmatcher@^1.4.3:
   version "1.4.3"
   resolved "https://registry.yarnpkg.com/nwmatcher/-/nwmatcher-1.4.3.tgz#64348e3b3d80f035b40ac11563d278f8b72db89c"
 
@@ -4920,6 +5311,13 @@ object.entries@^1.0.4:
     function-bind "^1.1.0"
     has "^1.0.1"
 
+object.getownpropertydescriptors@^2.0.3:
+  version "2.0.3"
+  resolved "https://registry.yarnpkg.com/object.getownpropertydescriptors/-/object.getownpropertydescriptors-2.0.3.tgz#8758c846f5b407adab0f236e0986f14b051caa16"
+  dependencies:
+    define-properties "^1.1.2"
+    es-abstract "^1.5.1"
+
 object.omit@^2.0.0:
   version "2.0.1"
   resolved "https://registry.yarnpkg.com/object.omit/-/object.omit-2.0.1.tgz#1a9c744829f39dbb858c76ca3579ae2a54ebd1fa"
@@ -4958,6 +5356,12 @@ onetime@^1.0.0:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/onetime/-/onetime-1.1.0.tgz#a1f7838f8314c516f05ecefcbc4ccfe04b4ed789"
 
+onetime@^2.0.0:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/onetime/-/onetime-2.0.1.tgz#067428230fd67443b2794b22bba528b6867962d4"
+  dependencies:
+    mimic-fn "^1.0.0"
+
 opener@^1.4.3:
   version "1.4.3"
   resolved "https://registry.yarnpkg.com/opener/-/opener-1.4.3.tgz#5c6da2c5d7e5831e8ffa3964950f8d6674ac90b8"
@@ -5011,7 +5415,7 @@ os-locale@^2.0.0:
     lcid "^1.0.0"
     mem "^1.1.0"
 
-os-tmpdir@^1.0.0, os-tmpdir@^1.0.1:
+os-tmpdir@^1.0.0, os-tmpdir@^1.0.1, os-tmpdir@~1.0.2:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/os-tmpdir/-/os-tmpdir-1.0.2.tgz#bbe67406c79aa85c5cfec766fe5734555dfa1274"
 
@@ -5022,10 +5426,6 @@ osenv@^0.1.0, osenv@^0.1.4:
     os-homedir "^1.0.0"
     os-tmpdir "^1.0.0"
 
-p-cancelable@^0.3.0:
-  version "0.3.0"
-  resolved "https://registry.yarnpkg.com/p-cancelable/-/p-cancelable-0.3.0.tgz#b9e123800bcebb7ac13a479be195b507b98d30fa"
-
 p-finally@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/p-finally/-/p-finally-1.0.0.tgz#3fbcfb15b899a44123b34b6dcc18b724336a2cae"
@@ -5083,6 +5483,17 @@ parse-asn1@^5.0.0:
     evp_bytestokey "^1.0.0"
     pbkdf2 "^3.0.3"
 
+parse-entities@^1.0.2:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/parse-entities/-/parse-entities-1.1.1.tgz#8112d88471319f27abae4d64964b122fe4e1b890"
+  dependencies:
+    character-entities "^1.0.0"
+    character-entities-legacy "^1.0.0"
+    character-reference-invalid "^1.0.0"
+    is-alphanumerical "^1.0.0"
+    is-decimal "^1.0.0"
+    is-hexadecimal "^1.0.0"
+
 parse-github-repo-url@^1.3.0, parse-github-repo-url@^1.4.1:
   version "1.4.1"
   resolved "https://registry.yarnpkg.com/parse-github-repo-url/-/parse-github-repo-url-1.4.1.tgz#9e7d8bb252a6cb6ba42595060b7bf6df3dbc1f50"
@@ -5108,11 +5519,7 @@ parse-json@^3.0.0:
   dependencies:
     error-ex "^1.3.1"
 
-parse5@^1.5.1:
-  version "1.5.1"
-  resolved "https://registry.yarnpkg.com/parse5/-/parse5-1.5.1.tgz#9b7f3b0de32be78dc2401b17573ccaf0f6f59d94"
-
-parse5@^3.0.1:
+parse5@^3.0.1, parse5@^3.0.2:
   version "3.0.3"
   resolved "https://registry.yarnpkg.com/parse5/-/parse5-3.0.3.tgz#042f792ffdd36851551cf4e9e066b3874ab45b5c"
   dependencies:
@@ -5261,6 +5668,41 @@ pluralize@^1.2.1:
   version "1.2.1"
   resolved "https://registry.yarnpkg.com/pluralize/-/pluralize-1.2.1.tgz#d1a21483fd22bb41e58a12fa3421823140897c45"
 
+pn@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/pn/-/pn-1.0.0.tgz#1cf5a30b0d806cd18f88fc41a6b5d4ad615b3ba9"
+
+preact-compat@^3.17.0:
+  version "3.17.0"
+  resolved "https://registry.yarnpkg.com/preact-compat/-/preact-compat-3.17.0.tgz#528cfdfc301190c1a0f47567336be1f4be0266b3"
+  dependencies:
+    immutability-helper "^2.1.2"
+    preact-render-to-string "^3.6.0"
+    preact-transition-group "^1.1.0"
+    prop-types "^15.5.8"
+    standalone-react-addons-pure-render-mixin "^0.1.1"
+
+preact-emotion@^8.0.10:
+  version "8.0.10"
+  resolved "https://registry.yarnpkg.com/preact-emotion/-/preact-emotion-8.0.10.tgz#e375602ac0f4aa5eff921e96f55a174e405d7792"
+  dependencies:
+    babel-plugin-emotion "^8.0.10"
+    emotion-utils "^8.0.10"
+
+preact-render-to-string@^3.6.0:
+  version "3.7.0"
+  resolved "https://registry.yarnpkg.com/preact-render-to-string/-/preact-render-to-string-3.7.0.tgz#7db4177454bc01395e0d01d6ac07bc5e838e31ee"
+  dependencies:
+    pretty-format "^3.5.1"
+
+preact-transition-group@^1.1.0:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/preact-transition-group/-/preact-transition-group-1.1.1.tgz#f0a49327ea515ece34ea2be864c4a7d29e5d6e10"
+
+preact@^8.2.6:
+  version "8.2.6"
+  resolved "https://registry.yarnpkg.com/preact/-/preact-8.2.6.tgz#0028b426ef98fcca741a3c617ff5b813b9a947c7"
+
 prelude-ls@~1.1.2:
   version "1.1.2"
   resolved "https://registry.yarnpkg.com/prelude-ls/-/prelude-ls-1.1.2.tgz#21932a549f5e52ffd9a827f570e04be62a97da54"
@@ -5274,8 +5716,8 @@ preserve@^0.2.0:
   resolved "https://registry.yarnpkg.com/preserve/-/preserve-0.2.0.tgz#815ed1f6ebc65926f865b310c0713bcb3315ce4b"
 
 prettier@^1.7.0:
-  version "1.7.4"
-  resolved "https://registry.yarnpkg.com/prettier/-/prettier-1.7.4.tgz#5e8624ae9363c80f95ec644584ecdf55d74f93fa"
+  version "1.9.1"
+  resolved "https://registry.yarnpkg.com/prettier/-/prettier-1.9.1.tgz#41638a0d47c1efbd1b7d5a742aaa5548eab86d70"
 
 pretty-format@^21.2.1:
   version "21.2.1"
@@ -5284,6 +5726,17 @@ pretty-format@^21.2.1:
     ansi-regex "^3.0.0"
     ansi-styles "^3.2.0"
 
+pretty-format@^22.0.1:
+  version "22.0.1"
+  resolved "https://registry.yarnpkg.com/pretty-format/-/pretty-format-22.0.1.tgz#65074c3946f544f6cd8445581293f532e0b3761c"
+  dependencies:
+    ansi-regex "^3.0.0"
+    ansi-styles "^3.2.0"
+
+pretty-format@^3.5.1:
+  version "3.8.0"
+  resolved "https://registry.yarnpkg.com/pretty-format/-/pretty-format-3.8.0.tgz#bfbed56d5e9a776645f4b1ff7aa1a3ac4fa3c385"
+
 private@^0.1.6, private@^0.1.7:
   version "0.1.8"
   resolved "https://registry.yarnpkg.com/private/-/private-0.1.8.tgz#2381edb3689f7a53d653190060fcf822d2f368ff"
@@ -5366,6 +5819,10 @@ punycode@^1.2.4, punycode@^1.4.1:
   version "1.4.1"
   resolved "https://registry.yarnpkg.com/punycode/-/punycode-1.4.1.tgz#c0d5a63b2718800ad8e1eb0fa5269c84dd41845e"
 
+punycode@^2.1.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/punycode/-/punycode-2.1.0.tgz#5f863edc89b96db09074bad7947bf09056ca4e7d"
+
 q@^1.4.1:
   version "1.5.1"
   resolved "https://registry.yarnpkg.com/q/-/q-1.5.1.tgz#7e32f75b41381291d04611f1bf14109ac00651d7"
@@ -5394,7 +5851,7 @@ querystring@0.2.0, querystring@^0.2.0:
   version "0.2.0"
   resolved "https://registry.yarnpkg.com/querystring/-/querystring-0.2.0.tgz#b209849203bb25df820da756e747005878521620"
 
-raf@^3.3.0, raf@^3.3.2, raf@^3.4.0:
+raf@^3.3.0, raf@^3.4.0:
   version "3.4.0"
   resolved "https://registry.yarnpkg.com/raf/-/raf-3.4.0.tgz#a28876881b4bc2ca9117d4138163ddb80f781575"
   dependencies:
@@ -5453,19 +5910,47 @@ rc@^1.0.1, rc@^1.1.6, rc@^1.1.7:
     minimist "^1.2.0"
     strip-json-comments "~2.0.1"
 
+rc@~1.1.6:
+  version "1.1.7"
+  resolved "https://registry.yarnpkg.com/rc/-/rc-1.1.7.tgz#c5ea564bb07aff9fd3a5b32e906c1d3a65940fea"
+  dependencies:
+    deep-extend "~0.4.0"
+    ini "~1.3.0"
+    minimist "^1.2.0"
+    strip-json-comments "~2.0.1"
+
+react-content-loader@^1.7.1:
+  version "1.7.1"
+  resolved "https://registry.yarnpkg.com/react-content-loader/-/react-content-loader-1.7.1.tgz#e6e18adbf632829fd56ba6fe558d16d2a5a00af9"
+  dependencies:
+    babel-runtime "^6.6.1"
+
 react-deep-force-update@^2.1.1:
   version "2.1.1"
   resolved "https://registry.yarnpkg.com/react-deep-force-update/-/react-deep-force-update-2.1.1.tgz#8ea4263cd6455a050b37445b3f08fd839d86e909"
 
 react-dom@^16.0.0:
-  version "16.0.0"
-  resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-16.0.0.tgz#9cc3079c3dcd70d4c6e01b84aab2a7e34c303f58"
+  version "16.1.1"
+  resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-16.1.1.tgz#b2e331b6d752faf1a2d31399969399a41d8d45f8"
   dependencies:
     fbjs "^0.8.16"
     loose-envify "^1.1.0"
     object-assign "^4.1.1"
     prop-types "^15.6.0"
 
+react-emotion@^8.0.10:
+  version "8.0.10"
+  resolved "https://registry.yarnpkg.com/react-emotion/-/react-emotion-8.0.10.tgz#452371f463cd5184f318d27860275564867b6693"
+  dependencies:
+    babel-plugin-emotion "^8.0.10"
+    emotion-utils "^8.0.10"
+
+react-event-timeline@^1.4.0:
+  version "1.4.0"
+  resolved "https://registry.yarnpkg.com/react-event-timeline/-/react-event-timeline-1.4.0.tgz#3a2e2e779f45fe1190148b9b6d1c2c90167cdbab"
+  dependencies:
+    prop-types "^15.6.0"
+
 react-headroom@^2.1.6:
   version "2.2.2"
   resolved "https://registry.yarnpkg.com/react-headroom/-/react-headroom-2.2.2.tgz#5ddea3bc87cd54be38f6f98c3fde4527e2a5fb0f"
@@ -5501,15 +5986,16 @@ react-proxy@^3.0.0-alpha.0:
     lodash "^4.6.1"
 
 react-test-renderer@^16.0.0, react-test-renderer@^16.0.0-0:
-  version "16.0.0"
-  resolved "https://registry.yarnpkg.com/react-test-renderer/-/react-test-renderer-16.0.0.tgz#9fe7b8308f2f71f29fc356d4102086f131c9cb15"
+  version "16.2.0"
+  resolved "https://registry.yarnpkg.com/react-test-renderer/-/react-test-renderer-16.2.0.tgz#bddf259a6b8fcd8555f012afc8eacc238872a211"
   dependencies:
     fbjs "^0.8.16"
     object-assign "^4.1.1"
+    prop-types "^15.6.0"
 
 react@^16.0.0:
-  version "16.0.0"
-  resolved "https://registry.yarnpkg.com/react/-/react-16.0.0.tgz#ce7df8f1941b036f02b2cca9dbd0cb1f0e855e2d"
+  version "16.1.1"
+  resolved "https://registry.yarnpkg.com/react/-/react-16.1.1.tgz#d5c4ef795507e3012282dd51261ff9c0e824fe1f"
   dependencies:
     fbjs "^0.8.16"
     loose-envify "^1.1.0"
@@ -5586,6 +6072,12 @@ readline2@^1.0.1:
     is-fullwidth-code-point "^1.0.0"
     mute-stream "0.0.5"
 
+realpath-native@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/realpath-native/-/realpath-native-1.0.0.tgz#7885721a83b43bd5327609f0ddecb2482305fdf0"
+  dependencies:
+    util.promisify "^1.0.0"
+
 rechoir@^0.6.2:
   version "0.6.2"
   resolved "https://registry.yarnpkg.com/rechoir/-/rechoir-0.6.2.tgz#85204b54dba82d5742e28c96756ef43af50e3384"
@@ -5676,6 +6168,41 @@ regjsparser@^0.1.4:
   dependencies:
     jsesc "~0.5.0"
 
+remark-parse@^1.1.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/remark-parse/-/remark-parse-1.1.0.tgz#c3ca10f9a8da04615c28f09aa4e304510526ec21"
+  dependencies:
+    collapse-white-space "^1.0.0"
+    extend "^3.0.0"
+    parse-entities "^1.0.2"
+    repeat-string "^1.5.4"
+    trim "0.0.1"
+    trim-trailing-lines "^1.0.0"
+    unherit "^1.0.4"
+    unist-util-remove-position "^1.0.0"
+    vfile-location "^2.0.0"
+
+remark-stringify@^1.1.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/remark-stringify/-/remark-stringify-1.1.0.tgz#a7105e25b9ee2bf9a49b75d2c423f11b06ae2092"
+  dependencies:
+    ccount "^1.0.0"
+    extend "^3.0.0"
+    longest-streak "^1.0.0"
+    markdown-table "^0.4.0"
+    parse-entities "^1.0.2"
+    repeat-string "^1.5.4"
+    stringify-entities "^1.0.1"
+    unherit "^1.0.4"
+
+remark@^5.0.1:
+  version "5.1.0"
+  resolved "https://registry.yarnpkg.com/remark/-/remark-5.1.0.tgz#cb463bd3dbcb4b99794935eee1cf71d7a8e3068c"
+  dependencies:
+    remark-parse "^1.1.0"
+    remark-stringify "^1.1.0"
+    unified "^4.1.1"
+
 remove-trailing-separator@^1.0.1:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/remove-trailing-separator/-/remove-trailing-separator-1.1.0.tgz#c24bce2a283adad5bc3f58e0d48249b92379d8ef"
@@ -5684,7 +6211,7 @@ repeat-element@^1.1.2:
   version "1.1.2"
   resolved "https://registry.yarnpkg.com/repeat-element/-/repeat-element-1.1.2.tgz#ef089a178d1483baae4d93eb98b4f9e4e11d990a"
 
-repeat-string@^1.5.2:
+repeat-string@^1.5.2, repeat-string@^1.5.4:
   version "1.6.1"
   resolved "https://registry.yarnpkg.com/repeat-string/-/repeat-string-1.6.1.tgz#8dcae470e1c88abc2d600fff4a776286da75e637"
 
@@ -5694,6 +6221,20 @@ repeating@^2.0.0:
   dependencies:
     is-finite "^1.0.0"
 
+request-promise-core@1.1.1:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/request-promise-core/-/request-promise-core-1.1.1.tgz#3eee00b2c5aa83239cfb04c5700da36f81cd08b6"
+  dependencies:
+    lodash "^4.13.1"
+
+request-promise-native@^1.0.3:
+  version "1.0.5"
+  resolved "https://registry.yarnpkg.com/request-promise-native/-/request-promise-native-1.0.5.tgz#5281770f68e0c9719e5163fd3fab482215f4fda5"
+  dependencies:
+    request-promise-core "1.1.1"
+    stealthy-require "^1.1.0"
+    tough-cookie ">=2.3.3"
+
 request@2.81.0:
   version "2.81.0"
   resolved "https://registry.yarnpkg.com/request/-/request-2.81.0.tgz#c6928946a0e06c5f8d6f8a9333469ffda46298a0"
@@ -5721,7 +6262,7 @@ request@2.81.0:
     tunnel-agent "^0.6.0"
     uuid "^3.0.0"
 
-request@^2.74.0, request@^2.79.0:
+request@^2.72.0, request@^2.74.0, request@^2.83.0:
   version "2.83.0"
   resolved "https://registry.yarnpkg.com/request/-/request-2.83.0.tgz#ca0b65da02ed62935887808e6f510381034e3356"
   dependencies:
@@ -5811,6 +6352,10 @@ require-main-filename@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/require-main-filename/-/require-main-filename-1.0.1.tgz#97f717b69d48784f5f526a6c5aa8ffdda055a4d1"
 
+require-package-name@^2.0.1:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/require-package-name/-/require-package-name-2.0.1.tgz#c11e97276b65b8e2923f75dabf5fb2ef0c3841b9"
+
 require-relative@^0.8.7:
   version "0.8.7"
   resolved "https://registry.yarnpkg.com/require-relative/-/require-relative-0.8.7.tgz#7999539fc9e047a37928fa196f8e1563dabd36de"
@@ -5857,6 +6402,13 @@ restore-cursor@^1.0.1:
     exit-hook "^1.0.0"
     onetime "^1.0.0"
 
+restore-cursor@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/restore-cursor/-/restore-cursor-2.0.0.tgz#9f7ee287f82fd326d4fd162923d62129eee0dfaf"
+  dependencies:
+    onetime "^2.0.0"
+    signal-exit "^3.0.2"
+
 ret@~0.1.10:
   version "0.1.15"
   resolved "https://registry.yarnpkg.com/ret/-/ret-0.1.15.tgz#b8a4825d5bdb1fc3f6f53c2bc33f81388681c7bc"
@@ -5871,7 +6423,7 @@ right-align@^0.1.1:
   dependencies:
     align-text "^0.1.1"
 
-rimraf@2, rimraf@^2.2.8, rimraf@^2.5.1, rimraf@^2.6.1:
+rimraf@2, rimraf@^2.2.8, rimraf@^2.5.1, rimraf@^2.5.4, rimraf@^2.6.1:
   version "2.6.2"
   resolved "https://registry.yarnpkg.com/rimraf/-/rimraf-2.6.2.tgz#2ed8150d24a16ea8651e6d6ef0f47c4158ce7a36"
   dependencies:
@@ -5903,24 +6455,36 @@ run-async@^0.1.0:
   dependencies:
     once "^1.3.0"
 
+run-async@^2.2.0:
+  version "2.3.0"
+  resolved "https://registry.yarnpkg.com/run-async/-/run-async-2.3.0.tgz#0371ab4ae0bdd720d4166d7dfda64ff7a445a6c0"
+  dependencies:
+    is-promise "^2.1.0"
+
+rx-lite-aggregates@^4.0.8:
+  version "4.0.8"
+  resolved "https://registry.yarnpkg.com/rx-lite-aggregates/-/rx-lite-aggregates-4.0.8.tgz#753b87a89a11c95467c4ac1626c4efc4e05c67be"
+  dependencies:
+    rx-lite "*"
+
+rx-lite@*, rx-lite@^4.0.8:
+  version "4.0.8"
+  resolved "https://registry.yarnpkg.com/rx-lite/-/rx-lite-4.0.8.tgz#0b1e11af8bc44836f04a6407e92da42467b79444"
+
 rx-lite@^3.1.2:
   version "3.1.2"
   resolved "https://registry.yarnpkg.com/rx-lite/-/rx-lite-3.1.2.tgz#19ce502ca572665f3b647b10939f97fd1615f102"
 
 rxjs@^5.4.2:
-  version "5.5.2"
-  resolved "https://registry.yarnpkg.com/rxjs/-/rxjs-5.5.2.tgz#28d403f0071121967f18ad665563255d54236ac3"
+  version "5.5.5"
+  resolved "https://registry.yarnpkg.com/rxjs/-/rxjs-5.5.5.tgz#e164f11d38eaf29f56f08c3447f74ff02dd84e97"
   dependencies:
-    symbol-observable "^1.0.1"
+    symbol-observable "1.0.1"
 
 safe-buffer@5.1.1, safe-buffer@^5.0.1, safe-buffer@^5.1.0, safe-buffer@^5.1.1, safe-buffer@~5.1.0, safe-buffer@~5.1.1:
   version "5.1.1"
   resolved "https://registry.yarnpkg.com/safe-buffer/-/safe-buffer-5.1.1.tgz#893312af69b2123def71f57889001671eeb2c853"
 
-safe-buffer@~5.0.1:
-  version "5.0.1"
-  resolved "https://registry.yarnpkg.com/safe-buffer/-/safe-buffer-5.0.1.tgz#d263ca54696cd8a306b5ca6551e92de57918fbe7"
-
 sane@^2.0.0:
   version "2.2.0"
   resolved "https://registry.yarnpkg.com/sane/-/sane-2.2.0.tgz#d6d2e2fcab00e3d283c93b912b7c3a20846f1d56"
@@ -5963,15 +6527,6 @@ semantic-release@^8.0.3:
     require-relative "^0.8.7"
     semver "^5.4.1"
 
-semantic-ui-react@^0.76.0:
-  version "0.76.0"
-  resolved "https://registry.yarnpkg.com/semantic-ui-react/-/semantic-ui-react-0.76.0.tgz#39d8135416d787d904e0361399006fb8e0b24c8a"
-  dependencies:
-    babel-runtime "^6.25.0"
-    classnames "^2.2.5"
-    lodash "^4.17.4"
-    prop-types "^15.5.10"
-
 semver-diff@^2.0.0:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/semver-diff/-/semver-diff-2.1.0.tgz#4bbb8437c8d37e4b0cf1a68fd726ec6d645d6d36"
@@ -6118,6 +6673,12 @@ source-map-support@0.4.18, source-map-support@^0.4.15:
   dependencies:
     source-map "^0.5.6"
 
+source-map-support@^0.5.0:
+  version "0.5.0"
+  resolved "https://registry.yarnpkg.com/source-map-support/-/source-map-support-0.5.0.tgz#2018a7ad2bdf8faf2691e5fddab26bed5a2bacab"
+  dependencies:
+    source-map "^0.6.0"
+
 source-map@0.5.6:
   version "0.5.6"
   resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.5.6.tgz#75ce38f52bf0733c5a7f0c118d81334a2bb5f412"
@@ -6128,11 +6689,11 @@ source-map@^0.4.4:
   dependencies:
     amdefine ">=0.0.4"
 
-source-map@^0.5.3, source-map@^0.5.6, source-map@~0.5.1, source-map@~0.5.3, source-map@~0.5.6:
+source-map@^0.5.3, source-map@^0.5.6, source-map@^0.5.7, source-map@~0.5.1, source-map@~0.5.3, source-map@~0.5.6:
   version "0.5.7"
   resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.5.7.tgz#8a039d2d1021d22d1ea14c80d8ea468ba2ef3fcc"
 
-source-map@^0.6.1:
+source-map@^0.6.0, source-map@^0.6.1:
   version "0.6.1"
   resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.6.1.tgz#74722af32e9614e9c287a8d0bbde48b5e2f1a263"
 
@@ -6192,6 +6753,10 @@ ssri@^4.1.2:
   dependencies:
     safe-buffer "^5.1.0"
 
+stack-utils@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/stack-utils/-/stack-utils-1.0.1.tgz#d4f33ab54e8e38778b0ca5cfd3b3afb12db68620"
+
 stackframe@^0.3.1:
   version "0.3.1"
   resolved "https://registry.yarnpkg.com/stackframe/-/stackframe-0.3.1.tgz#33aa84f1177a5548c8935533cbfeb3420975f5a4"
@@ -6204,6 +6769,10 @@ staged-git-files@0.0.4:
   version "0.0.4"
   resolved "https://registry.yarnpkg.com/staged-git-files/-/staged-git-files-0.0.4.tgz#d797e1b551ca7a639dec0237dc6eb4bb9be17d35"
 
+standalone-react-addons-pure-render-mixin@^0.1.1:
+  version "0.1.1"
+  resolved "https://registry.yarnpkg.com/standalone-react-addons-pure-render-mixin/-/standalone-react-addons-pure-render-mixin-0.1.1.tgz#3c7409f4c79c40de9ac72c616cf679a994f37551"
+
 "statuses@>= 1.2.1 < 2", "statuses@>= 1.3.1 < 2":
   version "1.4.0"
   resolved "https://registry.yarnpkg.com/statuses/-/statuses-1.4.0.tgz#bb73d446da2796106efcc1b601a253d6c46bd087"
@@ -6212,6 +6781,10 @@ statuses@~1.3.1:
   version "1.3.1"
   resolved "https://registry.yarnpkg.com/statuses/-/statuses-1.3.1.tgz#faf51b9eb74aaef3b3acf4ad5f61abf24cb7b93e"
 
+stealthy-require@^1.1.0:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/stealthy-require/-/stealthy-require-1.1.1.tgz#35b09875b4ff49f26a777e509b3090a3226bf24b"
+
 stream-browserify@^2.0.1:
   version "2.0.1"
   resolved "https://registry.yarnpkg.com/stream-browserify/-/stream-browserify-2.0.1.tgz#66266ee5f9bdb9940a4e4514cafb43bb71e5c9db"
@@ -6260,7 +6833,7 @@ string-width@^1.0.1, string-width@^1.0.2:
     is-fullwidth-code-point "^1.0.0"
     strip-ansi "^3.0.0"
 
-string-width@^2.0.0:
+string-width@^2.0.0, string-width@^2.1.0, string-width@^2.1.1:
   version "2.1.1"
   resolved "https://registry.yarnpkg.com/string-width/-/string-width-2.1.1.tgz#ab93f27a8dc13d28cac815c462143a6d9012ae9e"
   dependencies:
@@ -6277,6 +6850,15 @@ string_decoder@~1.0.3:
   dependencies:
     safe-buffer "~5.1.0"
 
+stringify-entities@^1.0.1:
+  version "1.3.1"
+  resolved "https://registry.yarnpkg.com/stringify-entities/-/stringify-entities-1.3.1.tgz#b150ec2d72ac4c1b5f324b51fb6b28c9cdff058c"
+  dependencies:
+    character-entities-html4 "^1.0.0"
+    character-entities-legacy "^1.0.0"
+    is-alphanumerical "^1.0.0"
+    is-hexadecimal "^1.0.0"
+
 stringify-object@^3.2.0:
   version "3.2.1"
   resolved "https://registry.yarnpkg.com/stringify-object/-/stringify-object-3.2.1.tgz#2720c2eff940854c819f6ee252aaeb581f30624d"
@@ -6329,6 +6911,12 @@ strip-json-comments@~2.0.1:
   version "2.0.1"
   resolved "https://registry.yarnpkg.com/strip-json-comments/-/strip-json-comments-2.0.1.tgz#3c531942e908c2697c0ec344858c286c7ca0a60a"
 
+structured-source@^3.0.2:
+  version "3.0.2"
+  resolved "https://registry.yarnpkg.com/structured-source/-/structured-source-3.0.2.tgz#dd802425e0f53dc4a6e7aca3752901a1ccda7af5"
+  dependencies:
+    boundary "^1.0.1"
+
 styled-jsx@2.1.1:
   version "2.1.1"
   resolved "https://registry.yarnpkg.com/styled-jsx/-/styled-jsx-2.1.1.tgz#e7481c7554df50d605cdc84a4e53c58fec3449b5"
@@ -6341,14 +6929,28 @@ styled-jsx@2.1.1:
     stylis "3.3.2"
     stylis-rule-sheet "0.0.6"
 
+styled-system@^1.0.2, styled-system@^1.0.8:
+  version "1.0.8"
+  resolved "https://registry.yarnpkg.com/styled-system/-/styled-system-1.0.8.tgz#a5a08ab26a8cc27e7a22e743d623211b82482b5e"
+  dependencies:
+    prop-types "^15.6.0"
+
 stylis-rule-sheet@0.0.6:
   version "0.0.6"
   resolved "https://registry.yarnpkg.com/stylis-rule-sheet/-/stylis-rule-sheet-0.0.6.tgz#059f89125a8e8db546e8adb0e07c4b4bcb81911b"
 
+stylis-rule-sheet@^0.0.5:
+  version "0.0.5"
+  resolved "https://registry.yarnpkg.com/stylis-rule-sheet/-/stylis-rule-sheet-0.0.5.tgz#ebae935cc1f6fb31b9b62dba47f2ea8b833dad9f"
+
 stylis@3.3.2:
   version "3.3.2"
   resolved "https://registry.yarnpkg.com/stylis/-/stylis-3.3.2.tgz#95ef285836e98243f8b8f64a9a72706ea6c893ea"
 
+stylis@^3.3.2:
+  version "3.4.2"
+  resolved "https://registry.yarnpkg.com/stylis/-/stylis-3.4.2.tgz#336c5e33a673c7111c10fa18f8b9e41e1772bd98"
+
 supports-color@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/supports-color/-/supports-color-2.0.0.tgz#535d045ce6b6363fa40117084629995e9df324c7"
@@ -6365,14 +6967,14 @@ supports-color@^4.0.0, supports-color@^4.2.1:
   dependencies:
     has-flag "^2.0.0"
 
+symbol-observable@1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/symbol-observable/-/symbol-observable-1.0.1.tgz#8340fc4702c3122df5d22288f88283f513d3fdd4"
+
 symbol-observable@^0.2.2:
   version "0.2.4"
   resolved "https://registry.yarnpkg.com/symbol-observable/-/symbol-observable-0.2.4.tgz#95a83db26186d6af7e7a18dbd9760a2f86d08f40"
 
-symbol-observable@^1.0.1:
-  version "1.0.4"
-  resolved "https://registry.yarnpkg.com/symbol-observable/-/symbol-observable-1.0.4.tgz#29bf615d4aa7121bdd898b22d4b3f9bc4e2aa03d"
-
 symbol-tree@^3.2.1:
   version "3.2.2"
   resolved "https://registry.yarnpkg.com/symbol-tree/-/symbol-tree-3.2.2.tgz#ae27db38f660a7ae2e1c3b7d1bc290819b8519e6"
@@ -6388,6 +6990,10 @@ table@^3.7.8:
     slice-ansi "0.0.4"
     string-width "^2.0.0"
 
+tag-hoc@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/tag-hoc/-/tag-hoc-1.0.0.tgz#36ddc5f8831c40926ea520743cbddcc34f3c3ed9"
+
 tapable@^0.2.7:
   version "0.2.8"
   resolved "https://registry.yarnpkg.com/tapable/-/tapable-0.2.8.tgz#99372a5c999bf2df160afc0d74bed4f47948cd22"
@@ -6482,6 +7088,12 @@ timers-browserify@^2.0.2:
   dependencies:
     setimmediate "^1.0.4"
 
+tmp@^0.0.33:
+  version "0.0.33"
+  resolved "https://registry.yarnpkg.com/tmp/-/tmp-0.0.33.tgz#6d34335889768d21b2bcda0aa277ced3b1bfadf9"
+  dependencies:
+    os-tmpdir "~1.0.2"
+
 tmpl@1.0.x:
   version "1.0.4"
   resolved "https://registry.yarnpkg.com/tmpl/-/tmpl-1.0.4.tgz#23640dd7b42d00433911140820e5cf440e521dd1"
@@ -6504,15 +7116,27 @@ touch@3.1.0:
   dependencies:
     nopt "~1.0.10"
 
-tough-cookie@^2.3.2, tough-cookie@~2.3.0, tough-cookie@~2.3.3:
+touch@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/touch/-/touch-1.0.0.tgz#449cbe2dbae5a8c8038e30d71fa0ff464947c4de"
+  dependencies:
+    nopt "~1.0.10"
+
+tough-cookie@>=2.3.3, tough-cookie@^2.3.3, tough-cookie@~2.3.0, tough-cookie@~2.3.3:
   version "2.3.3"
   resolved "https://registry.yarnpkg.com/tough-cookie/-/tough-cookie-2.3.3.tgz#0b618a5565b6dea90bf3425d04d55edc475a7561"
   dependencies:
     punycode "^1.4.1"
 
-tr46@~0.0.3:
-  version "0.0.3"
-  resolved "https://registry.yarnpkg.com/tr46/-/tr46-0.0.3.tgz#8184fd347dac9cdc185992f3a6622e14b9d9ab6a"
+tr46@^1.0.0:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/tr46/-/tr46-1.0.1.tgz#a8b13fd6bfd2489519674ccde55ba3693b706d09"
+  dependencies:
+    punycode "^2.1.0"
+
+traverse@^0.6.6:
+  version "0.6.6"
+  resolved "https://registry.yarnpkg.com/traverse/-/traverse-0.6.6.tgz#cbdf560fd7b9af632502fed40f918c157ea97137"
 
 travis-ci@^2.1.1:
   version "2.1.1"
@@ -6544,6 +7168,18 @@ trim-right@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/trim-right/-/trim-right-1.0.1.tgz#cb2e1203067e0c8de1f614094b9fe45704ea6003"
 
+trim-trailing-lines@^1.0.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/trim-trailing-lines/-/trim-trailing-lines-1.1.0.tgz#7aefbb7808df9d669f6da2e438cac8c46ada7684"
+
+trim@0.0.1:
+  version "0.0.1"
+  resolved "https://registry.yarnpkg.com/trim/-/trim-0.0.1.tgz#5858547f6b290757ee95cccc666fb50084c460dd"
+
+trough@^1.0.0:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/trough/-/trough-1.0.1.tgz#a9fd8b0394b0ae8fff82e0633a0a36ccad5b5f86"
+
 tryit@^1.0.1:
   version "1.0.3"
   resolved "https://registry.yarnpkg.com/tryit/-/tryit-1.0.3.tgz#393be730a9446fd1ead6da59a014308f36c289cb"
@@ -6583,10 +7219,30 @@ typedarray@^0.0.6:
   version "0.0.6"
   resolved "https://registry.yarnpkg.com/typedarray/-/typedarray-0.0.6.tgz#867ac74e3864187b1d3d47d996a78ec5c8830777"
 
+typescript-styled-plugin@^0.2.0:
+  version "0.2.2"
+  resolved "https://registry.yarnpkg.com/typescript-styled-plugin/-/typescript-styled-plugin-0.2.2.tgz#155b17df98d88b595a1e03cc859a545df840c634"
+  dependencies:
+    typescript-template-language-service-decorator "^1.0.3"
+    vscode-css-languageservice "^2.1.10"
+    vscode-languageserver-types "^3.4.0"
+
+typescript-template-language-service-decorator@^1.0.3:
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/typescript-template-language-service-decorator/-/typescript-template-language-service-decorator-1.0.3.tgz#d3f28393d3dc0b21d4e969feefd8a73af7ca2375"
+
+typescript@^2.6.1:
+  version "2.6.2"
+  resolved "https://registry.yarnpkg.com/typescript/-/typescript-2.6.2.tgz#3c5b6fd7f6de0914269027f03c0946758f7673a4"
+
 ua-parser-js@^0.7.9:
   version "0.7.17"
   resolved "https://registry.yarnpkg.com/ua-parser-js/-/ua-parser-js-0.7.17.tgz#e9ec5f9498b9ec910e7ae3ac626a805c4d09ecac"
 
+uc.micro@^1.0.1, uc.micro@^1.0.3:
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/uc.micro/-/uc.micro-1.0.3.tgz#7ed50d5e0f9a9fb0a573379259f2a77458d50192"
+
 uglify-js@^2.6, uglify-js@^2.8.29:
   version "2.8.29"
   resolved "https://registry.yarnpkg.com/uglify-js/-/uglify-js-2.8.29.tgz#29c5733148057bb4e1f75df35b7a9cb72e6a59dd"
@@ -6617,8 +7273,8 @@ uid-number@^0.0.6:
   resolved "https://registry.yarnpkg.com/uid-number/-/uid-number-0.0.6.tgz#0ea10e8035e8eb5b8e4449f06da1c730663baa81"
 
 ultron@~1.1.0:
-  version "1.1.0"
-  resolved "https://registry.yarnpkg.com/ultron/-/ultron-1.1.0.tgz#b07a2e6a541a815fc6a34ccd4533baec307ca864"
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/ultron/-/ultron-1.1.1.tgz#9fe1536a10a664a65266a1e3ccf85fd36302bc9c"
 
 underscore.string@~2.2.0rc:
   version "2.2.1"
@@ -6628,16 +7284,54 @@ underscore@~1.4.4:
   version "1.4.4"
   resolved "https://registry.yarnpkg.com/underscore/-/underscore-1.4.4.tgz#61a6a32010622afa07963bf325203cf12239d604"
 
+underscore@~1.8.3:
+  version "1.8.3"
+  resolved "https://registry.yarnpkg.com/underscore/-/underscore-1.8.3.tgz#4f3fb53b106e6097fcf9cb4109f2a5e9bdfa5022"
+
 unfetch@3.0.0, unfetch@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/unfetch/-/unfetch-3.0.0.tgz#8d1e0513a4ecd0e5ff2d41a6ba77771aae8b6482"
 
+unherit@^1.0.4:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/unherit/-/unherit-1.1.0.tgz#6b9aaedfbf73df1756ad9e316dd981885840cd7d"
+  dependencies:
+    inherits "^2.0.1"
+    xtend "^4.0.1"
+
+unified@^4.1.1:
+  version "4.2.1"
+  resolved "https://registry.yarnpkg.com/unified/-/unified-4.2.1.tgz#76ff43aa8da430f6e7e4a55c84ebac2ad2cfcd2e"
+  dependencies:
+    bail "^1.0.0"
+    extend "^3.0.0"
+    has "^1.0.1"
+    once "^1.3.3"
+    trough "^1.0.0"
+    vfile "^1.0.0"
+
 unique-string@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/unique-string/-/unique-string-1.0.0.tgz#9e1057cca851abb93398f8b33ae187b99caec11a"
   dependencies:
     crypto-random-string "^1.0.0"
 
+unist-util-is@^2.1.1:
+  version "2.1.1"
+  resolved "https://registry.yarnpkg.com/unist-util-is/-/unist-util-is-2.1.1.tgz#0c312629e3f960c66e931e812d3d80e77010947b"
+
+unist-util-remove-position@^1.0.0:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/unist-util-remove-position/-/unist-util-remove-position-1.1.1.tgz#5a85c1555fc1ba0c101b86707d15e50fa4c871bb"
+  dependencies:
+    unist-util-visit "^1.1.0"
+
+unist-util-visit@^1.1.0:
+  version "1.3.0"
+  resolved "https://registry.yarnpkg.com/unist-util-visit/-/unist-util-visit-1.3.0.tgz#41ca7c82981fd1ce6c762aac397fc24e35711444"
+  dependencies:
+    unist-util-is "^2.1.1"
+
 universalify@^0.1.0:
   version "0.1.1"
   resolved "https://registry.yarnpkg.com/universalify/-/universalify-0.1.1.tgz#fa71badd4437af4c148841e3b3b165f9e9e590b7"
@@ -6664,6 +7358,10 @@ update-notifier@^2.1.0:
     semver-diff "^2.0.0"
     xdg-basedir "^3.0.0"
 
+update-section@^0.3.0:
+  version "0.3.3"
+  resolved "https://registry.yarnpkg.com/update-section/-/update-section-0.3.3.tgz#458f17820d37820dc60e20b86d94391b00123158"
+
 url-parse-lax@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/url-parse-lax/-/url-parse-lax-1.0.0.tgz#7af8f303645e9bd79a272e7a14ac68bc0609da73"
@@ -6687,6 +7385,13 @@ util-deprecate@~1.0.1:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/util-deprecate/-/util-deprecate-1.0.2.tgz#450d4dc9fa70de732762fbd2d4a28981419a0ccf"
 
+util.promisify@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/util.promisify/-/util.promisify-1.0.0.tgz#440f7165a459c9a16dc145eb8e72f35687097030"
+  dependencies:
+    define-properties "^1.1.2"
+    object.getownpropertydescriptors "^2.0.3"
+
 util@0.10.3, util@^0.10.3:
   version "0.10.3"
   resolved "https://registry.yarnpkg.com/util/-/util-0.10.3.tgz#7afb1afe50805246489e3db7fe0ed379336ac0f9"
@@ -6726,12 +7431,35 @@ verror@1.10.0:
     core-util-is "1.0.2"
     extsprintf "^1.2.0"
 
+vfile-location@^2.0.0:
+  version "2.0.2"
+  resolved "https://registry.yarnpkg.com/vfile-location/-/vfile-location-2.0.2.tgz#d3675c59c877498e492b4756ff65e4af1a752255"
+
+vfile@^1.0.0:
+  version "1.4.0"
+  resolved "https://registry.yarnpkg.com/vfile/-/vfile-1.4.0.tgz#c0fd6fa484f8debdb771f68c31ed75d88da97fe7"
+
 vm-browserify@0.0.4:
   version "0.0.4"
   resolved "https://registry.yarnpkg.com/vm-browserify/-/vm-browserify-0.0.4.tgz#5d7ea45bbef9e4a6ff65f95438e0a87c357d5a73"
   dependencies:
     indexof "0.0.1"
 
+vscode-css-languageservice@^2.1.10:
+  version "2.1.11"
+  resolved "https://registry.yarnpkg.com/vscode-css-languageservice/-/vscode-css-languageservice-2.1.11.tgz#051ad9681d50ceee5f83a20142c8c659a8011ede"
+  dependencies:
+    vscode-languageserver-types "^3.4.0"
+    vscode-nls "^2.0.1"
+
+vscode-languageserver-types@^3.4.0:
+  version "3.5.0"
+  resolved "https://registry.yarnpkg.com/vscode-languageserver-types/-/vscode-languageserver-types-3.5.0.tgz#e48d79962f0b8e02de955e3f524908e2b19c0374"
+
+vscode-nls@^2.0.1:
+  version "2.0.2"
+  resolved "https://registry.yarnpkg.com/vscode-nls/-/vscode-nls-2.0.2.tgz#808522380844b8ad153499af5c3b03921aea02da"
+
 walk@2.3.9, walk@^2.3.9:
   version "2.3.9"
   resolved "https://registry.yarnpkg.com/walk/-/walk-2.3.9.tgz#31b4db6678f2ae01c39ea9fb8725a9031e558a7b"
@@ -6759,17 +7487,20 @@ watchpack@^1.4.0:
     chokidar "^1.7.0"
     graceful-fs "^4.1.2"
 
-webidl-conversions@^3.0.0:
-  version "3.0.1"
-  resolved "https://registry.yarnpkg.com/webidl-conversions/-/webidl-conversions-3.0.1.tgz#24534275e2a7bc6be7bc86611cc16ae0a5654871"
+weak@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/weak/-/weak-1.0.1.tgz#ab99aab30706959aa0200cb8cf545bb9cb33b99e"
+  dependencies:
+    bindings "^1.2.1"
+    nan "^2.0.5"
 
-webidl-conversions@^4.0.0:
+webidl-conversions@^4.0.1, webidl-conversions@^4.0.2:
   version "4.0.2"
   resolved "https://registry.yarnpkg.com/webidl-conversions/-/webidl-conversions-4.0.2.tgz#a855980b1f0b6b359ba1d5d9fb39ae941faa63ad"
 
 webpack-bundle-analyzer@^2.8.3:
-  version "2.9.0"
-  resolved "https://registry.yarnpkg.com/webpack-bundle-analyzer/-/webpack-bundle-analyzer-2.9.0.tgz#b58bc34cc30b27ffdbaf3d00bf27aba6fa29c6e3"
+  version "2.9.1"
+  resolved "https://registry.yarnpkg.com/webpack-bundle-analyzer/-/webpack-bundle-analyzer-2.9.1.tgz#c2c8e03e8e5768ed288b39ae9e27a8b8d7b9d476"
   dependencies:
     acorn "^5.1.1"
     chalk "^1.1.3"
@@ -6781,7 +7512,7 @@ webpack-bundle-analyzer@^2.8.3:
     lodash "^4.17.4"
     mkdirp "^0.5.1"
     opener "^1.4.3"
-    ws "^2.3.1"
+    ws "^3.3.1"
 
 webpack-dev-middleware@1.12.0:
   version "1.12.0"
@@ -6846,12 +7577,13 @@ whatwg-fetch@>=0.10.0:
   version "2.0.3"
   resolved "https://registry.yarnpkg.com/whatwg-fetch/-/whatwg-fetch-2.0.3.tgz#9c84ec2dcf68187ff00bc64e1274b442176e1c84"
 
-whatwg-url@^4.3.0:
-  version "4.8.0"
-  resolved "https://registry.yarnpkg.com/whatwg-url/-/whatwg-url-4.8.0.tgz#d2981aa9148c1e00a41c5a6131166ab4683bbcc0"
+whatwg-url@^6.3.0:
+  version "6.4.0"
+  resolved "https://registry.yarnpkg.com/whatwg-url/-/whatwg-url-6.4.0.tgz#08fdf2b9e872783a7a1f6216260a1d66cc722e08"
   dependencies:
-    tr46 "~0.0.3"
-    webidl-conversions "^3.0.0"
+    lodash.sortby "^4.7.0"
+    tr46 "^1.0.0"
+    webidl-conversions "^4.0.1"
 
 which-module@^2.0.0:
   version "2.0.0"
@@ -6869,11 +7601,11 @@ wide-align@^1.1.0:
   dependencies:
     string-width "^1.0.2"
 
-widest-line@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/widest-line/-/widest-line-1.0.0.tgz#0c09c85c2a94683d0d7eaf8ee097d564bf0e105c"
+widest-line@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/widest-line/-/widest-line-2.0.0.tgz#0142a4e8a243f8882c0233aa0e0281aa76152273"
   dependencies:
-    string-width "^1.0.1"
+    string-width "^2.1.1"
 
 window-size@0.1.0:
   version "0.1.0"
@@ -6891,13 +7623,6 @@ wordwrap@~1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/wordwrap/-/wordwrap-1.0.0.tgz#27584810891456a4171c8d0226441ade90cbcaeb"
 
-worker-farm@^1.3.1:
-  version "1.5.1"
-  resolved "https://registry.yarnpkg.com/worker-farm/-/worker-farm-1.5.1.tgz#8e9f4a7da4f3c595aa600903051b969390423fa1"
-  dependencies:
-    errno "^0.1.4"
-    xtend "^4.0.1"
-
 wrap-ansi@^2.0.0:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/wrap-ansi/-/wrap-ansi-2.1.0.tgz#d8fc3d284dd05794fe84973caecdd1cf824fdd85"
@@ -6952,11 +7677,12 @@ write@^0.2.1:
   dependencies:
     mkdirp "^0.5.1"
 
-ws@^2.3.1:
-  version "2.3.1"
-  resolved "https://registry.yarnpkg.com/ws/-/ws-2.3.1.tgz#6b94b3e447cb6a363f785eaf94af6359e8e81c80"
+ws@^3.3.1:
+  version "3.3.2"
+  resolved "https://registry.yarnpkg.com/ws/-/ws-3.3.2.tgz#96c1d08b3fefda1d5c1e33700d3bfaa9be2d5608"
   dependencies:
-    safe-buffer "~5.0.1"
+    async-limiter "~1.0.0"
+    safe-buffer "~5.1.0"
     ultron "~1.1.0"
 
 xdg-basedir@^3.0.0:
@@ -7031,27 +7757,32 @@ yargs-parser@^7.0.0:
   dependencies:
     camelcase "^4.1.0"
 
-yargs@^8.0.2:
-  version "8.0.2"
-  resolved "https://registry.yarnpkg.com/yargs/-/yargs-8.0.2.tgz#6299a9055b1cefc969ff7e79c1d918dceb22c360"
+yargs-parser@^8.0.0:
+  version "8.0.0"
+  resolved "https://registry.yarnpkg.com/yargs-parser/-/yargs-parser-8.0.0.tgz#21d476330e5a82279a4b881345bf066102e219c6"
   dependencies:
     camelcase "^4.1.0"
+
+yargs@^10.0.3:
+  version "10.0.3"
+  resolved "https://registry.yarnpkg.com/yargs/-/yargs-10.0.3.tgz#6542debd9080ad517ec5048fb454efe9e4d4aaae"
+  dependencies:
     cliui "^3.2.0"
     decamelize "^1.1.1"
+    find-up "^2.1.0"
     get-caller-file "^1.0.1"
     os-locale "^2.0.0"
-    read-pkg-up "^2.0.0"
     require-directory "^2.1.1"
     require-main-filename "^1.0.1"
     set-blocking "^2.0.0"
     string-width "^2.0.0"
     which-module "^2.0.0"
     y18n "^3.2.1"
-    yargs-parser "^7.0.0"
+    yargs-parser "^8.0.0"
 
-yargs@^9.0.0:
-  version "9.0.1"
-  resolved "https://registry.yarnpkg.com/yargs/-/yargs-9.0.1.tgz#52acc23feecac34042078ee78c0c007f5085db4c"
+yargs@^8.0.2:
+  version "8.0.2"
+  resolved "https://registry.yarnpkg.com/yargs/-/yargs-8.0.2.tgz#6299a9055b1cefc969ff7e79c1d918dceb22c360"
   dependencies:
     camelcase "^4.1.0"
     cliui "^3.2.0"
