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

imports/ui/pages/Index/Index.js

@@ -1,17 +1,20 @@
 import React from 'react';
-import { Jumbotron } from 'react-bootstrap';
+import { Button } from 'react-bootstrap';
 
 import './Index.scss';
 
 const Index = () => (
   <div className="Index">
-    <Jumbotron>
-      <img
-        src="https://s3-us-west-2.amazonaws.com/cleverbeagle-assets/graphics/email-icon.png"
-        alt="Clever Beagle"
-      />
-      <p>Need help building your app? Check out our mentorship service.</p>
-    </Jumbotron>
+    <img
+      src="https://s3-us-west-2.amazonaws.com/cleverbeagle-assets/graphics/email-icon.png"
+      alt="Clever Beagle"
+    />
+    <h1>Pup</h1>
+    <p>A boilerplate for products.</p>
+    <div>
+      <Button href="https://pup.cleverbeagle.com">Read the Docs</Button>
+      <Button href="https://github.com/cleverbeagle/pup"><i className="fa fa-star" /> Star on GitHub</Button>
+    </div>
   </div>
 );
 

imports/ui/pages/Index/Index.scss

@@ -0,0 +1,58 @@
+@import '../../stylesheets/mixins';
+@import '../../stylesheets/colors';
+
+.Index {
+  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%);
+  }
+
+  > div {
+    display: inline-block;
+    margin: 10px 0 0;
+
+    .btn:first-child {
+      margin-right: 10px;
+    }
+
+    .btn {
+      border: none;
+    }
+
+    .btn:last-child {
+      background: darken($cb-blue, 20%);
+      color: lighten($cb-blue, 30%);
+
+      &:hover {
+        color: #fff;
+      }
+    }
+  }
+}
+
+@include breakpoint(tablet) {
+  .Index {
+    padding: 30px;
+  }
+}
+
+@include breakpoint(desktop) {
+  .Index {
+    padding: 40px;
+  }
+}