From 1e47f031a14344304d843df188a2b33c6b311423 Mon Sep 17 00:00:00 2001
From: "@soyjavi" <javi.jimenez.villar@gmail.com>
Date: Sun, 1 Nov 2015 22:57:49 +0700
Subject: [PATCH] Include example of readme for landing

---
 docs/app/components/layout/home/index.jsx      |  7 +++++--
 .../components/layout/home/modules/readme.md   | 18 ++++++++++++++++++
 docs/app/components/layout/home/style.scss     |  8 +++++---
 3 files changed, 28 insertions(+), 5 deletions(-)
 create mode 100644 docs/app/components/layout/home/modules/readme.md

diff --git a/docs/app/components/layout/home/index.jsx b/docs/app/components/layout/home/index.jsx
index bb177f598..92ceeecd9 100644
--- a/docs/app/components/layout/home/index.jsx
+++ b/docs/app/components/layout/home/index.jsx
@@ -1,10 +1,13 @@
 import React from 'react';
 import { Card } from 'react-toolbox';
-import style from './style';
+
 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 (
@@ -16,7 +19,7 @@ const Home = () => {
         <Navigation className={style.navigation} />
       </header>
       <section className={style.content}>
-        <h2>Authors</h2>
+        <Markdown className={style.documentation} markdown={readme}/>
 
         <ul className={style.authors}>
           { authors.map((author, index) => { return <Card key={index} {...author} />; }) }
diff --git a/docs/app/components/layout/home/modules/readme.md b/docs/app/components/layout/home/modules/readme.md
new file mode 100644
index 000000000..0e6303bde
--- /dev/null
+++ b/docs/app/components/layout/home/modules/readme.md
@@ -0,0 +1,18 @@
+# React Toolbox Components
+
+React Toolbox is a library of React Components based on Google's Material Design Guidelines. The main purpose of the documentation is to explore each of the components and to learn how to use them. To make the best possible experience and to experiment with the components properties and methods, we've created a playground to try components live.
+
+On the top right side of the screen you will see a rounded button with a code icon. It opens a the playground with a small in-browser editor and an area to render what you type in real time. Inside the documentation of each component you will see one or multiple example code boxes. Each of them can include a button to open the given code in the playground.
+
+Enjoy and remember that [feedback](https://github.com/react-toolbox/react-toolbox/issues) is really appreciated.
+
+# Lorem ipsum...
+
+Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
+tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
+quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
+consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
+cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
+proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+
+# Authors
diff --git a/docs/app/components/layout/home/style.scss b/docs/app/components/layout/home/style.scss
index c3c6eb183..57fc4ee5b 100644
--- a/docs/app/components/layout/home/style.scss
+++ b/docs/app/components/layout/home/style.scss
@@ -2,6 +2,7 @@
 @import "./config";
 
 $content-offset: 4.8 * $unit;
+$content-width: 740px;
 
 .hero {
   padding: 0 calc((100% - #{$hero-max-width}) / 2);
@@ -67,10 +68,11 @@ $content-offset: 4.8 * $unit;
   display: flex;
   flex-direction: column;
   align-items: center;
+  background-color: $color-content;
   > * {
-    min-width: 700px;
-    max-width: 700px;
-    margin: ($content-offset / 4) auto;
+    min-width: $content-width;
+    max-width: $content-width;
+    margin: 0 ($content-offset / 4);
   }
 }