First steps in landing: show authors like <Card>s

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

@@ -1,16 +1,31 @@
 import React from 'react';
+import { Card } from 'react-toolbox';
 import style from './style';
 import Logo from '../../logo';
 import Navigation from '../../navigation';
 
+import authors from './modules/authors';
+
 const Home = () => {
   return (
-    <header className={style.hero}>
-      <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>
+    <article>
+      <header className={style.hero}>
+        <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}>
+        <h2>Authors</h2>
+
+        <ul className={style.authors}>
+          { authors.map((author, index) => { return <Card key={index} {...author} />; }) }
+        </ul>
+      </section>
+      <footer>
+        Copyright
+      </footer>
+    </article>
   );
 };
 

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

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

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

@@ -1,6 +1,8 @@
 @import "../../globals";
 @import "./config";
 
+$content-offset: 4.8 * $unit;
+
 .hero {
   padding: 0 calc((100% - #{$hero-max-width}) / 2);
   color: $hero-text-color;
@@ -59,3 +61,23 @@
     }
   }
 }
+
+.content {
+  padding: $content-offset 0;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  > * {
+    min-width: 700px;
+    max-width: 700px;
+    margin: ($content-offset / 4) auto;
+  }
+}
+
+.authors {
+  display: flex;
+  justify-content: center;
+  > * {
+    margin: 0 $unit;
+  }
+}