fixing links, adding nice buttons

Summary: as per title

Reviewed By: jknoxville

Differential Revision: D15167533

fbshipit-source-id: 67d059c478bf0608b598ba7cd6be19157ff41900

docs/features/index.md

@@ -3,9 +3,6 @@ id: index
 title: Features
 ---
 
-
-
-
 Flipper itself only provides the architectural platform. What makes it useful are the plugins built on top of it: [Logs](logs-plugin.md), [Layout Inspector](layout-plugin.md) and [Network Inspector](network-plugin.md) are all plugins. Plugins can be built very specific to your business logic and the use-cases you have in your app. We are shipping Flipper with a couple of built-in all-purpose plugins, but we encourage you to build your own. Each plugin plugin needs to be enabled individually.
 
 ![Layout plugin](/docs/assets/plugins.png)
@@ -14,6 +11,4 @@ Flipper itself only provides the architectural platform. What makes it useful ar
 
 The Flipper desktop app and the mobile native SDK establish a connection which is used to send data to and from the device. Flipper does not make any restrictions on what kind of data is being sent. This enables a lot of different use-cases where you want to better understand what is going inside your app. For example you can visualize the state of local caches, events happening or trigger actions on your app from the desktop.
 
-A plugin always consists of the native implementation sending and receiving data and the desktop plugin visualizing data. Learn more on how to [create a plugin](/docs/create-plugin.md). The native implementations are written in Java, Objective-C, or C++, the desktop UI is written in React.
-
-If there is no plugin that does exactly what you want, you can build your own plugin, tailored to your needs. [Learn more]() about how to build plugins.
+If there is no plugin that does exactly what you want, you can build your own plugin, tailored to your needs. A plugin always consists of the native implementation sending and receiving data and the desktop plugin visualizing data. Learn more on how to [extend Flipper](extending/index.md) and build your own plugin. The native implementations are written in Java, Objective-C, or C++, the desktop UI is written in React.

website/pages/en/index.js

@@ -22,11 +22,11 @@ class Index extends React.Component {
             </h2>
             <div className="row">
               <a
-                className="btn primary"
+                className="landing-btn primary"
                 href="https://www.facebook.com/fbflipper/public/mac">
                 Download
               </a>
-              <a className="btn" href="/docs/getting-started.html">
+              <a className="landing-btn" href="/docs/features/index.html">
                 Learn more
               </a>
             </div>
@@ -58,7 +58,7 @@ class Index extends React.Component {
               useful tools including a log viewer, interactive layout inspector,
               and network inspector.
             </p>
-            <a className="learnmore" href="/docs/getting-started.html">
+            <a className="learnmore" href="/docs/features/index.html">
               Learn more
             </a>
           </div>
@@ -74,7 +74,7 @@ class Index extends React.Component {
               data back and forth, calling functions, and listening for events
               on the mobile app.
             </p>
-            <a className="learnmore" href="/docs/getting-started.html">
+            <a className="learnmore" href="/docs/extending/index.html">
               Learn more
             </a>
           </div>
@@ -102,11 +102,25 @@ class Index extends React.Component {
               improve Flipper. We are excited to see what you will build on this
               platform.
             </p>
-            <a className="learnmore" href="/docs/js-setup.html">
+            <a
+              className="learnmore"
+              href="https://github.com/facebook/flipper"
+              target="_blank">
               Learn more
             </a>
           </div>
         </div>
+        <div className="wrapper landing-cta">
+          <a href="/docs/getting-started.html" className="landing-btn primary">
+            Integrate Flipper In Your App
+          </a>
+          <a
+            href="https://www.facebook.com/fbflipper/public/mac"
+            target="_blank"
+            className="landing-btn">
+            Download Flipper
+          </a>
+        </div>
       </div>
     );
   }

website/static/css/custom.css

@@ -46,17 +46,29 @@ h6 {
   letter-spacing: 1px;
 }
 
-.splash .btn {
-  color: white;
+.landing-btn {
   display: inline-block;
   padding: 7px 20px;
   border-radius: 6px;
   margin: 0 10px;
-  border: 1px solid white;
+  border: 1px solid #777;
 }
 
-.splash .btn.primary {
+.landing-btn:hover {
+}
+
+.landing-btn.primary {
   background-color: #008cf2;
+  color: white;
+  border-color: #008cf2;
+}
+
+.splash .landing-btn {
+  color: white;
+  border-color: white;
+}
+
+.splash .landing-btn.primary {
   border-color: #008cf2;
 }
 
@@ -216,11 +228,6 @@ nav.toc .toggleNav .navGroup.navGroupActive h3 {
   margin: 0;
 }
 
-.button {
-  border-radius: 6px;
-  text-transform: none;
-}
-
 .sitemap {
   width: 100%;
 }
@@ -236,7 +243,6 @@ a.learnmore:hover {
 }
 
 .toc .toggleNav ul li.navListItemActive a {
-  color: $actionColor;
   opacity: 1;
 }
 
@@ -440,3 +446,24 @@ footer iframe {
   content: '';
   position: absolute;
 }
+
+.landing-cta {
+  padding-top: 30px;
+  padding-bottom: 80px;
+  text-align: center;
+}
+.button {
+  text-transform: none;
+  border: none;
+  font-size: 0.8em;
+  border-radius: 999em;
+  background-color: rgba(0, 0, 0, 0.05);
+  padding: 0.5em 1em;
+  font-weight: 500;
+  margin-top: 8px;
+}
+
+.button:hover {
+  background-color: rgba(0, 0, 0, 0.1);
+  color: inherit;
+}