add oauth flows, profile, logout page, and index page

imports/ui/pages/Logout/Logout.js

@@ -0,0 +1,23 @@
+import React from 'react';
+
+import './Logout.scss';
+
+const Logout = () => (
+  <div className="Logout">
+    <img
+      src="https://s3-us-west-2.amazonaws.com/cleverbeagle-assets/graphics/email-icon.png"
+      alt="Clever Beagle"
+    />
+    <h1>Stay safe out there.</h1>
+    <p>{'Don\'t forget to like and follow Clever Beagle elsewhere on the web:'}</p>
+    <ul className="FollowUsElsewhere">
+      <li><a href="https://facebook.com/cleverbeagle"><i className="fa fa-facebook-official" /></a></li>
+      <li><a href="https://twitter.com/clvrbgl"><i className="fa fa-twitter" /></a></li>
+      <li><a href="https://github.com/cleverbeagle"><i className="fa fa-github" /></a></li>
+    </ul>
+  </div>
+);
+
+Logout.propTypes = {};
+
+export default Logout;

imports/ui/pages/Logout/Logout.scss

@@ -0,0 +1,57 @@
+@import '../../stylesheets/mixins';
+@import '../../stylesheets/colors';
+
+.Logout {
+  padding: 20px;
+  background: $cb-blue;
+  text-align: center;
+  border-radius: 3px;
+  color: #fff;
+
+  img {
+    width: 100px;
+    height: auto;
+  }
+
+  h1 {
+    font-size: 28px;
+  }
+
+  p {
+    font-size: 18px;
+    color: lighten($cb-blue, 25%);
+  }
+
+  ul {
+    list-style: none;
+    display: inline-block;
+    padding: 0;
+    margin: 10px 0 0;
+  }
+
+  ul li {
+    float: left;
+    font-size: 28px;
+    line-height: 28px;
+
+    a {
+      color: #fff;
+    }
+
+    &:not(:last-child) {
+      margin-right: 15px;
+    }
+  }
+}
+
+@include breakpoint(tablet) {
+  .Logout {
+    padding: 30px;
+  }
+}
+
+@include breakpoint(desktop) {
+  .Logout {
+    padding: 40px;
+  }
+}