Refactor

src/scenes/Home/Home.js

@@ -0,0 +1,63 @@
+import React from 'react';
+import { connect } from 'react-redux';
+import { bindActionCreators } from 'redux';
+import { replace } from 'react-router-redux';
+
+import auth from '../../utils/auth';
+
+import SlackAuthLink from '../../components/SlackAuthLink';
+
+import styles from './Home.scss';
+
+class Home extends React.Component {
+  static propTypes = {
+    replace: React.PropTypes.func.isRequired,
+  }
+
+  componentDidMount = () => {
+    if (auth.loggedIn()) {
+      this.props.replace('/dashboard');
+    }
+  }
+
+  render() {
+    return (
+      <div className={ styles.container }>
+        <div className={ styles.content }>
+          <div className={ styles.intro }>
+            <p>
+              Hi there,
+            </p>
+            <p>
+              We're building the best place for engineers, designers and teams to
+              share ideas, tell stories and build knowledge.
+            </p>
+            <p>
+              <strong>**Atlas**</strong> can start as a wiki, but it's really
+              up to you what you want to make of it:
+            </p>
+            <p>
+              - Write documentation in <i>_markdown_</i><br/>
+              - Build a blog around the API<br/>
+              - Hack the frontend for your needs (coming!)<br/>
+            </p>
+            <p>
+              We're just getting started.
+            </p>
+          </div>
+          <div className={ styles.action }>
+            <SlackAuthLink />
+          </div>
+        </div>
+      </div>
+    );
+  }
+}
+
+const mapDispatchToProps = (dispatch) => {
+  return bindActionCreators({ replace }, dispatch)
+}
+
+export default connect(
+  null, mapDispatchToProps
+)(Home);

src/scenes/Home/Home.scss

@@ -0,0 +1,17 @@
+.container {
+  display: flex;
+  flex: 1;
+  justify-content: space-around;
+}
+
+.content {
+  margin: 40px;
+  max-width: 640px;
+}
+
+.intro {
+  font-family: "Atlas Typewriter", Monaco, monospace;
+  font-size: 1.4em;
+  line-height: 1.6em;
+  margin-bottom: 40px;
+}

src/scenes/Home/animation.js

@@ -0,0 +1,26 @@
+import React from 'react';
+import { Frame } from 'react-keyframes';
+
+let frames = [];
+const p = (node) => frames.push(node);
+const E = (props) => {
+  return (<Frame duration={props.duration || 300} component='div'>{ props.children }</Frame>);
+};
+
+const line1 = (<p>Hi there,</p>);
+const line2 = (<p>We're excited to share what we’re building.</p>);
+const line3 = (<p>We <strong>**love**</strong> Markdown,</p>);
+const line4 = (<p>but we also get that it's not for everyone.</p>);
+const line5 = (<p>Together with you,</p>);
+const line6 = (<p>we want to build the best place to</p>);
+const line7 = (<p>share ideas,</p>);
+const line8 = (<p>tell stories,</p>);
+const line9 = (<p>and build knowledge.</p>);
+const line10 = (<p>We're just getting started.</p>);
+const line11 = (<p>Welcome to Beautiful Atlas.</p>);
+
+p(<E>{line1}{line2}{line3}{line4}{line5}{line6}{line7}{line8}{line9}{line10}{line11}</E>);
+
+// Hmms leaving this here for now, would be nice to something
+
+export default frames;

src/scenes/Home/index.js

@@ -0,0 +1,2 @@
+import Home from './Home';
+export default Home;