From 7f84c3d7b2ceb7f1c740e3d6e276976bd63f705b Mon Sep 17 00:00:00 2001
From: Ben Alpert <balpert@fb.com>
Date: Wed, 25 Mar 2015 19:17:49 -0700
Subject: [PATCH] [website] Tweak homepage layout

---
 website/src/react-native/_index.js            | 20 +++++++++++++------
 website/src/react-native/css/react-native.css |  4 ++--
 2 files changed, 16 insertions(+), 8 deletions(-)

diff --git a/website/src/react-native/_index.js b/website/src/react-native/_index.js
index 95f216e85..6bad5e8f9 100644
--- a/website/src/react-native/_index.js
+++ b/website/src/react-native/_index.js
@@ -25,11 +25,12 @@ var index = React.createClass({
         </div>
 
         <section className="content wrap">
-          <section className="home-bottom-section">
-            <div className="buttons-unit">
-              <a href="docs/getting-started.html#content" className="button">Learn more about React Native</a>
-            </div>
-          </section>
+
+          <div className="buttons-unit">
+            <a href="docs/getting-started.html#content" className="button">Get started with React Native</a>
+          </div>
+
+          <div style={{margin: '60px auto', width: 800}}>
 
           <h2>Native iOS Components</h2>
           <p>
@@ -55,7 +56,7 @@ module.exports = React.createClass({
           <p>
             All operations between the JavaScript application code and the native platform are performed asynchronously, and the native modules can also make use of additional threads as well.  This means we can decode images off of the main thread, save to disk in the background, measure text and compute layouts without blocking the UI, and more.  As a result, React Native apps are naturally fluid and responsive.  The communication is also fully serializable, which allows us to leverage Chrome Developer Tools to debug JS while running the app in the full app environment, in the sim or on a real device.
           </p>
-          <img src="/react-native/img/chrome_breakpoint.png" width="800"/>
+          <img src="/react-native/img/chrome_breakpoint.png" width="800" height="606" />
           <h2>Touch Handling</h2>
 
           <p>
@@ -141,6 +142,13 @@ module.exports = React.createClass({
   },
 });`}
           </Prism>
+
+          </div>
+          <section className="home-bottom-section">
+            <div className="buttons-unit">
+              <a href="docs/getting-started.html#content" className="button">Get started with React Native</a>
+            </div>
+          </section>
         </section>
       </Site>
     );
diff --git a/website/src/react-native/css/react-native.css b/website/src/react-native/css/react-native.css
index 4cc7d6130..ad080ff61 100644
--- a/website/src/react-native/css/react-native.css
+++ b/website/src/react-native/css/react-native.css
@@ -324,7 +324,7 @@ h1:hover .hash-link, h2:hover .hash-link, h3:hover .hash-link, h4:hover .hash-li
 }
 
 .buttons-unit {
-  margin-top: 60px;
+  margin-top: 40px;
   text-align: center;
 }
 
@@ -576,7 +576,7 @@ section.black content {
   font-size: 24px;
 }
 
-.documentationContent h2 {
+h2 {
   margin-top: 30px;
 }