Adding landing page

7 files changed, 86 insertions, 3 deletions

diff --git a/app/assets/images/background-photo.jpeg b/app/assets/images/background-photo.jpeg
new file mode 100644
index 000000000..8dad97289
--- /dev/null
+++ b/app/assets/images/background-photo.jpeg
Binary files differdiff --git a/app/assets/images/background-photo.jpg b/app/assets/images/background-photo.jpg
deleted file mode 100644
index 3f2eeb121..000000000
--- a/app/assets/images/background-photo.jpg
+++ /dev/null
Binary files differdiff --git a/app/assets/javascripts/about.coffee b/app/assets/javascripts/about.coffee
new file mode 100644
index 000000000..24f83d18b
--- /dev/null
+++ b/app/assets/javascripts/about.coffee
@@ -0,0 +1,3 @@
+# Place all the behaviors and hooks related to the matching controller here.
+# All this logic will automatically be available in application.js.
+# You can use CoffeeScript in this file: http://coffeescript.org/
diff --git a/app/assets/javascripts/components/components/button.jsx b/app/assets/javascripts/components/components/button.jsx
index 6f7ace323..fe36d40c5 100644
--- a/app/assets/javascripts/components/components/button.jsx
+++ b/app/assets/javascripts/components/components/button.jsx
@@ -19,8 +19,29 @@ const Button = React.createClass({
   },
 
   render () {
+    const style = {
+      fontFamily: 'Roboto',
+      display: this.props.block ? 'block' : 'inline-block',
+      width: this.props.block ? '100%' : 'auto',
+      position: 'relative',
+      boxSizing: 'border-box',
+      textAlign: 'center',
+      border: '10px none',
+      color: '#fff',
+      fontSize: '14px',
+      fontWeight: '500',
+      letterSpacing: '0',
+      textTransform: 'uppercase',
+      padding: '0 16px',
+      height: '36px',
+      cursor: 'pointer',
+      lineHeight: '36px',
+      borderRadius: '4px',
+      textDecoration: 'none'
+    };
+    
     return (
-      <button className={`button ${this.props.secondary ? 'button-secondary' : ''}`} disabled={this.props.disabled} onClick={this.handleClick} style={{ fontFamily: 'Roboto', display: this.props.block ? 'block' : 'inline-block', width: this.props.block ? '100%' : 'auto', position: 'relative', boxSizing: 'border-box', textAlign: 'center', border: '10px none', color: '#fff', fontSize: '14px', fontWeight: '500', letterSpacing: '0', textTransform: 'uppercase', padding: '0 16px', height: '36px', cursor: 'pointer', lineHeight: '36px', borderRadius: '4px', textDecoration: 'none' }}>
+      <button className={`button ${this.props.secondary ? 'button-secondary' : ''}`} disabled={this.props.disabled} onClick={this.handleClick} style={style}>
         {this.props.text || this.props.children}
       </button>
     );
diff --git a/app/assets/stylesheets/about.scss b/app/assets/stylesheets/about.scss
new file mode 100644
index 000000000..df52ec184
--- /dev/null
+++ b/app/assets/stylesheets/about.scss
@@ -0,0 +1,41 @@
+@import url(https://fonts.googleapis.com/css?family=Montserrat);
+@import url(https://fonts.googleapis.com/css?family=Judson);
+
+.about-body {
+  .wrapper {
+    width: 600px;
+    margin: 0 auto;
+    color: #9baec8;
+    padding-top: 200px;
+  }
+
+  h1 {
+    font: 46px/52px 'Roboto', sans-serif;
+    font-weight: 600;
+    margin-bottom: 20px;
+    color: #2b90d9;
+    padding: 20px 0;
+
+    img {
+      margin-bottom: -5px;
+      margin-right: 5px;
+      width: 46px;
+      height: 46px;
+    }
+  }
+
+  p {
+    font: 20px/28px 'Judson', sans-serif;
+    font-weight: 300;
+    margin-bottom: 26px;
+  }
+
+  em {
+    display: inline-block;
+    padding: 7px 7px 5px 7px;
+    background: #9baec8;
+    color: #282c37;
+    font: 16px/16px 'Montserrat', sans-serif;
+    font-weight: 300;
+  }
+}
diff --git a/app/assets/stylesheets/application.scss b/app/assets/stylesheets/application.scss
index 84f15eaca..1bae0b44e 100644
--- a/app/assets/stylesheets/application.scss
+++ b/app/assets/stylesheets/application.scss
@@ -59,7 +59,7 @@ table {
 
 body {
   font-family: 'Roboto', sans-serif;
-  background: #282c37 image-url('background-photo.jpg');
+  background: #282c37 image-url('background-photo.jpeg');
   background-size: cover;
   background-attachment: fixed;
   font-size: 13px;
@@ -334,4 +334,5 @@ body {
 
 @import 'accounts';
 @import 'stream_entries';
-@import 'components'
+@import 'components';
+@import 'about';
diff --git a/app/assets/stylesheets/components.scss b/app/assets/stylesheets/components.scss
index cf3dc8397..134d34ccb 100644
--- a/app/assets/stylesheets/components.scss
+++ b/app/assets/stylesheets/components.scss
@@ -1,5 +1,22 @@
 .button {
   background-color: #2b90d9;
+  font-family: 'Roboto';
+  display: inline-block;
+  position: relative;
+  box-sizing: border-box;
+  text-align: center;
+  border: 10px none;
+  color: #fff;
+  font-size: 14px;
+  font-weight: 500;
+  letter-spacing: 0;
+  text-transform: uppercase;
+  padding: 0 16px;
+  height: 36px;
+  cursor: pointer;
+  line-height: 36px;
+  border-radius: 4px;
+  text-decoration: none;
 
   &:hover {
     background-color: #489fde;