Add some changes for the home page

docs/app/components/layout/home/index.jsx

@@ -1,35 +1,49 @@
 import React from 'react';
-import { Card } from 'react-toolbox';
-
+import { Card, Button } from 'react-toolbox';
 import Logo from '../../logo';
 import Navigation from '../../navigation';
-import Markdown from '../../markdown';
-
 import style from './style';
 import authors from './modules/authors';
-import readme from './modules/readme.md';
 
-const Home = () => {
-  return (
-    <article>
-      <header className={style.header}>
-        <Logo className={style.logo} />
-        <h2 className={style.title}>React Toolbox</h2>
-        <h4 className={style.subtitle}>Bootstrap your application with beautiful Material Design Components</h4>
-        <Navigation className={style.navigation} />
-      </header>
-      <section className={style.content}>
-        <Markdown className={style.documentation} markdown={readme}/>
+const Home = () => (
+  <article>
+    <header className={style.header}>
+      <Logo className={style.logo} />
+      <h2 className={style.title}>React Toolbox</h2>
+      <h4 className={style.subtitle}>Bootstrap your application with beautiful Material Design Components</h4>
+      <Navigation className={style.navigation} />
+    </header>
 
-        <ul className={style.authors}>
-          { authors.map((author, index) => { return <Card key={index} {...author} />; }) }
-        </ul>
-      </section>
-      <footer className={style.footer}>
-        <small>React Toolbox ©</small>
-      </footer>
-    </article>
-  );
-};
+    <section className={style.content}>
+      <p>
+        React Toolbox is a set of React components that implements Google Material Design specification.
+        It's built on top of some the trendiest proposals like CSS Modules (written in SASS), Webpack and ES6.
+        The library integrates harmfuly with your Webpack workflow and it's easily customizable and very flexible.
+      </p>
+
+      <p>
+        Check our awesome documentation (which is built using React Toolbox) and try all the components with
+        live examples. We've created a playground so you don't need to install anything to fall in love with
+        our components, so fun!
+      </p>
+
+      <a href='/#/components'>
+        <Button label='Try it now!' kind='raised' accent />
+      </a>
+    </section>
+
+    <section className={`${style.content} ${style['second-content']}`}>
+      <h3 className={style['authors-title']}>About the authors</h3>
+      <ul className={style.authors}>
+        { authors.map((author, index) => { return <Card key={index} {...author} />; }) }
+      </ul>
+    </section>
+
+    <footer className={style.footer}>
+      <p>React Toolbox © 2015</p>
+      <p>Crafted with Love between Spain and Thailand</p>
+    </footer>
+  </article>
+);
 
 export default Home;

docs/app/components/layout/home/modules/authors.js

@@ -1,19 +1,21 @@
 export default [
   {
     title: 'Javi Velasco',
+    subtitle: '@javivelasco',
     actions: [
-      { label: 'Github', icon: 'code'},
-      { label: 'Twitter', icon: 'chat' }
+      { label: 'Github' },
+      { label: 'Twitter' }
     ],
     image: 'https://pbs.twimg.com/profile_images/459485216499720192/ufS4YGOY_400x400.png',
-    text: 'Software gardener • Film, music & comic lover • Any biographer in the room?',
+    text: 'Software gardener • Film, music & comic lover • Frontend Engineer at SocialBro  • Any biographer in the room?',
     color: '#3f51b5'
   },
   {
     title: 'Javi Jimenez',
+    subtitle: '@soyjavi',
     actions: [
-      { label: 'Github', icon: 'code'},
-      { label: 'Twitter', icon: 'chat' }
+      { label: 'Github' },
+      { label: 'Twitter' }
     ],
     image: 'http://soyjavi.com/assets/images/soyjavi.jpg',
     text: 'Creative Doer · A complicated #human who builds stuff · #author · #opensource #code lover · #traveller · with a dark past being CEO & CTO',

docs/app/components/layout/home/style.scss

@@ -11,7 +11,6 @@ $content-width: 740px;
   background: linear-gradient(45deg, $hero-gradient-dark 0%, $hero-gradient-light 100%);
   background-position: top right;
   background-size: 120%;
-
   .logo {
     width: $hero-logo-size;
     height: $hero-logo-size;
@@ -19,12 +18,10 @@ $content-width: 740px;
     opacity: $hero-logo-opacity;
     fill: $hero-text-color;
   }
-
   .title {
     @include typo-display-3;
     margin-top: $hero-item-spacing;
   }
-
   .subtitle {
     @include typo-headline;
     margin-top: 10px;
@@ -32,7 +29,6 @@ $content-width: 740px;
     line-height: 1.2;
     opacity: $hero-text-secondary-opacity;
   }
-
   .navigation > ul {
     margin-top: $hero-item-spacing;
     list-style: none;
@@ -64,27 +60,49 @@ $content-width: 740px;
 }
 
 .content {
-  padding: $content-offset 0;
   display: flex;
   flex-direction: column;
   align-items: center;
+  padding: $content-offset 0;
   background-color: $color-content;
-  > * {
-    min-width: $content-width;
-    max-width: $content-width;
-    margin: 0 ($content-offset / 4);
-  }
-  .authors {
+
+  flex-wrap: wrap;
+  > .authors {
     display: flex;
+    align-items: flex-start;
     justify-content: center;
     > * {
+      flex: 1 auto;
       margin: 0 $unit;
     }
   }
+  > p {
+    max-width: $content-width;
+    margin-bottom: $content-offset;
+    font-size: 1.8 * $unit;
+    line-height: 1.5;
+    text-align: justify;
+    opacity: .6;
+  }
+  > h2 {
+    margin-bottom: $content-offset;
+    font-size: 2 * $unit;
+    color: $hero-gradient-dark;
+  }
+}
+
+.authors-title {
+  margin-bottom: $content-offset / 2;
+  font-size: 2.4 * $unit;
+}
+
+.second-content {
+  background: darken($color-content, 5%);
 }
 
 .footer {
-  background-color: darken($color-content, 2.5%);
+  padding: 2 * $unit 0;
+  color: $color-content;
   text-align: center;
-  padding: $unit 0;
+  background-color: $color-text;
 }