add why no roles and landing pages

UI/src/pages/Landing.js

@@ -0,0 +1,61 @@
+import React, { Component, Fragment } from 'react'
+import { Link } from 'react-router-dom'
+import Scrollbars from 'react-custom-scrollbars'
+import Typist from 'react-typist'
+import moment from 'moment'
+import './landing.sass'
+import discordLogo from './images/discord-logo.svg'
+import RoleDemo from '../components/role/demo'
+
+const Landing = ({ root = false }) => <div className="landing uk-width-1-1 uk-text-center">
+  <div className="uk-container">
+    <section>
+      <h1>Self-assignable Discord roles for humans.</h1>
+      <h4>Ditch bot commands once and for all.</h4>
+    </section>
+    <section>
+      <Link to="/oauth/flow" className="uk-button rp-button discord"><img src={discordLogo} className="rp-button-logo"/> Sign in with Discord</Link>
+    </section>
+    <section uk-grid="">
+      {/* Typist */}
+      <div className="uk-width-1-2">
+        <div className="landing__discord">
+          <div className="discord__chat">
+            <span className="timestamp">{moment().format('LT')}</span>
+            <span className="username">Kata カタ</span>
+            <span className="text">Hey, I want some roles!</span>
+          </div>
+          <div className="discord__textarea">
+            <Typist cursor={{ blink: true }}>
+              <span>.iam a cute role ♡</span>
+              <Typist.Backspace count={30} delay={1500} />
+              <span>.iam a vanity role ♡</span>
+              <Typist.Backspace count={30} delay={1500} />
+              <span>.iam a brave role ♡</span>
+              <Typist.Backspace count={30} delay={1500} />
+              <span>.iam a proud role ♡</span>
+              <Typist.Backspace count={30} delay={1500} />
+              <span>.iam a wonderful role ♡</span>
+              <Typist.Backspace count={30} delay={1500} />
+              <span>i have too many roles.</span>
+            </Typist>
+          </div>
+        </div>
+        <p className="subtext">Why are we stuck in the stupid ages?</p>
+      </div>
+      {/* role side */}
+      <div className="uk-width-1-2">
+        <div className="landing__roleypoly">
+          <RoleDemo name="a cute role ♡" color="#3EC1BF" />
+          <RoleDemo name="a vanity role ♡" color="#F7335B" />
+          <RoleDemo name="a brave role ♡" color="#A8D0B8" />
+          <RoleDemo name="a proud role ♡" color="#5C8B88" />
+          <RoleDemo name="a wonderful role ♡" color="#D6B3C7" />
+        </div>
+        <p className="subtext">It's 2018. We can do better.</p>
+      </div>
+    </section>
+  </div>
+</div>
+
+export default Landing

UI/src/pages/WhyNoRoles.js

@@ -0,0 +1,19 @@
+import React, { Fragment } from 'react'
+
+import goodImg from './images/whynoroles-good.png'
+import badImg from './images/whynoroles-bad.png'
+
+const WhyNoRoles = (props) => {
+  return <Fragment>
+    <h2>Why don't I see any roles in my editor?</h2>
+    <p>Roleypoly needs to be a higher role position than other roles in order to assign them to anyone.</p>
+    <h3 className="pages__bad">Bad <i uk-icon="icon: ban"></i></h3>
+    <img src={badImg} alt="Bad example"/>
+    <p>In this example, Roleypoly is at the bottom of the list. It can't assign anyone any roles above it.</p>
+    <h3 className="pages__good">Good <i uk-icon="icon: check"></i></h3>
+    <img src={goodImg} alt="Good example"/>
+    <p>In this example, Roleypoly is above other roles, and will be able to assign them.</p>
+  </Fragment>
+}
+
+export default WhyNoRoles

UI/src/pages/images/discord-logo.svg

@@ -0,0 +1,21 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 245 240" style="enable-background:new 0 0 245 240;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:#efefef;}
+</style>
+<g>
+	<path class="st0" d="M104.4,103.9c-5.7,0-10.2,5-10.2,11.1c0,6.1,4.6,11.1,10.2,11.1c5.7,0,10.2-5,10.2-11.1
+		C114.7,108.9,110.1,103.9,104.4,103.9z"/>
+	<path class="st0" d="M140.9,103.9c-5.7,0-10.2,5-10.2,11.1c0,6.1,4.6,11.1,10.2,11.1c5.7,0,10.2-5,10.2-11.1
+		C151.1,108.9,146.6,103.9,140.9,103.9z"/>
+	<path class="st0" d="M189.5,20H55.5C44.2,20,35,29.2,35,40.6v135.2c0,11.4,9.2,20.6,20.5,20.6h113.4l-5.3-18.5l12.8,11.9l12.1,11.2
+		L210,220v-44.2v-10V40.6C210,29.2,200.8,20,189.5,20z M150.9,150.6c0,0-3.6-4.3-6.6-8.1c13.1-3.7,18.1-11.9,18.1-11.9
+		c-4.1,2.7-8,4.6-11.5,5.9c-5,2.1-9.8,3.5-14.5,4.3c-9.6,1.8-18.4,1.3-25.9-0.1c-5.7-1.1-10.6-2.7-14.7-4.3c-2.3-0.9-4.8-2-7.3-3.4
+		c-0.3-0.2-0.6-0.3-0.9-0.5c-0.2-0.1-0.3-0.2-0.4-0.3c-1.8-1-2.8-1.7-2.8-1.7s4.8,8,17.5,11.8c-3,3.8-6.7,8.3-6.7,8.3
+		c-22.1-0.7-30.5-15.2-30.5-15.2c0-32.2,14.4-58.3,14.4-58.3c14.4-10.8,28.1-10.5,28.1-10.5l1,1.2c-18,5.2-26.3,13.1-26.3,13.1
+		s2.2-1.2,5.9-2.9c10.7-4.7,19.2-6,22.7-6.3c0.6-0.1,1.1-0.2,1.7-0.2c6.1-0.8,13-1,20.2-0.2c9.5,1.1,19.7,3.9,30.1,9.6
+		c0,0-7.9-7.5-24.9-12.7l1.4-1.6c0,0,13.7-0.3,28.1,10.5c0,0,14.4,26.1,14.4,58.3C181.5,135.4,173,149.9,150.9,150.6z"/>
+</g>
+</svg>

UI/src/pages/index.js

@@ -0,0 +1,25 @@
+import React from 'react'
+import { Route, Switch } from 'react-router-dom'
+import Scrollbars from 'react-custom-scrollbars'
+import './pages.sass'
+
+import WhyNoRoles from './WhyNoRoles'
+import LandingPage from './Landing'
+export const Landing = LandingPage // re-export
+
+const isDev = process.env.NODE_ENV === 'development'
+
+const Pages = (props) => {
+  return <div className="pages">
+    <Scrollbars autoHeight autoHeightMax='calc(100vh - 80px)'>
+      <div className="pages-inner">
+        <Switch>
+          <Route path="/help/why-no-roles" component={WhyNoRoles} />
+          {/* { isDev ? <Route path="/p/landing" component={Landing} /> : null } */}
+        </Switch>
+      </div>
+    </Scrollbars>
+  </div>
+}
+
+export default Pages

UI/src/pages/landing.sass

@@ -0,0 +1,72 @@
+.landing
+  
+  .Typist .Cursor 
+    display: inline-block
+    color: transparent
+    border-left: 1px solid var(--c-white)
+
+    &--blinking 
+      opacity: 1
+      animation: blink 2s ease-in-out infinite
+
+      @keyframes blink 
+        0%
+          opacity: 1
+        50%
+          opacity: 0
+        100%
+          opacity: 1
+  
+  &__roleypoly
+    
+  
+  &__discord
+    --not-quite-black: #23272A
+    --dark-but-not-black: #2C2F33
+    --greyple: #99AAB5
+    --blurple: var(--c-discord)
+
+    background-color: var(--dark-but-not-black)
+    border: 1px solid var(--not-quite-black)
+    box-shadow: 0 0 1px rgba(0,0,0,0.3)
+    padding: 10px
+    text-align: left
+    color: var(--c-white)
+
+    .discord
+      &__chat
+        padding: 10px 0
+
+        span
+          display: inline-block
+          margin-left: 5px
+
+        .timestamp
+          font-size: 0.7em
+          color: hsla(0,0%,100%,.2)
+
+        .username
+          font-weight: bold
+
+      &__textarea
+        background-color: hsla(218,5%,47%,.3)
+        border-radius: 5px
+        padding: 10px
+
+
+  section
+    margin-top: 50px
+
+  h1
+    color: var(--c-7)
+
+  h4
+    color: var(--c-9)
+
+  h1,h2,h3,h4,h5,h6
+    margin: 0.3em
+  
+  .subtext
+    color: hsla(0,0%,100%,0.8)
+    font-size: 0.9em
+    line-height: 1.6

UI/src/pages/pages.sass

@@ -0,0 +1,16 @@
+.pages
+  background-color: var(--c-3)
+  
+  &-inner
+    padding: 45px 35px
+
+  &__bad
+    color: var(--c-red)
+  
+  &__good
+    color: var(--c-green)
+
+  img
+    max-width: 75%
+    box-shadow: 0 0 1px var(--c-dark)
+    border: 1px solid var(--c-1)