Additional css changes

website/package.json

@@ -6,6 +6,6 @@
     "examples": "docusaurus-examples"
   },
   "devDependencies": {
-    "docusaurus": "file:../../docusaurus"
+    "docusaurus": "^1.0.0-alpha.35"
   }
 }

website/pages/en/help.js

@@ -40,7 +40,7 @@ class Help extends React.Component {
         <Container className="mainContainer documentContainer postContainer">
           <div className="post">
             <header className="postHeader">
-              <h2>Need help?</h2>
+              <h1>Need help?</h1>
             </header>
             <p>
               At Facebook, there are dozens of engineers who work on React

website/pages/en/index.js

@@ -13,7 +13,7 @@ const CompLibrary = require("../../core/CompLibrary.js");
 const Marked = CompLibrary.Marked; /* Used to read markdown */
 const Container = CompLibrary.Container;
 const GridBlock = CompLibrary.GridBlock;
-const Prism = CompLibrary.Prism;
+const Prism = require("../../core/Prism.js"); // replace with CompLibrary.Prism when docusaurus is updated in npm
 
 const siteConfig = require(process.cwd() + "/siteConfig.js");
 
@@ -24,19 +24,13 @@ const pinnedApps = siteConfig.users.filter(app => {
 class Button extends React.Component {
   render() {
     return (
-      <div className="pluginWrapper buttonWrapper">
-        <a className="button" href={this.props.href} target={this.props.target}>
-          {this.props.children}
-        </a>
-      </div>
+      <a className="big-button" href={this.props.href} target={this.props.target}>
+        {this.props.children}
+      </a>
     );
   }
 }
 
-Button.defaultProps = {
-  target: "_self"
-};
-
 class Hero extends React.Component {
   render() {
     return (
@@ -64,12 +58,18 @@ class HomeSplash extends React.Component {
           subtitle="Build native mobile apps using JavaScript and React"
         >
           <div className="buttons-unit">
-            <a href="docs/getting-started.html" className="button">
+            <Button
+              href={siteConfig.baseUrl + "docs/getting-started.html"}
+              target="_self"
+            >
               Get Started
-            </a>
-            <a href="docs/tutorial.html" className="button">
+            </Button>
+            <Button
+              href={siteConfig.baseUrl + this.props.language + "/docs/tutorial.html"}
+              target="_self"
+            >
               Learn the Basics
-            </a>
+            </Button>
           </div>
         </Hero>
       </div>
@@ -122,32 +122,15 @@ class Index extends React.Component {
       <div>
         <HomeSplash language={language} />
         <div className="mainContainer">
-          <div
-            className="productShowcaseSection paddingBottom"
-            style={{ textAlign: "center" }}
-          >
-            <Container>
-              <GridBlock
-                align="center"
-                contents={[{
-                    title: 'Learn once, write anywhere',
-                    content: 'React Native lets you build mobile apps using only JavaScript. It uses the same design as React, letting you compose a rich mobile UI from declarative components.'
-                  }, {
-                    title: 'Build real mobile apps',
-                    content: 'With React Native, you don\'t build a "mobile web app", an "HTML5 app", or a "hybrid app". React Native uses the same fundamental UI building blocks as regular iOS and Android apps.'
-                  }, {
-                    title: 'Don\'t waste time recompiling',
-                    content: 'Instead of recompiling, you can reload your app instantly. With [Hot Reloading](http://facebook.github.io/react-native/blog/2016/03/24/introducing-hot-reloading.html), you can even run new code while retaining your application state. Give it a try - it\'s a magical experience.'
-                  }]
-                }
-                layout="fourColumn"
-              />
-            </Container>
-
-          </div>
           <Container>
-            <div className="blockElement imageAlignSide twoByGridBlock">
-                <Prism>
+            <div className="blockElement">
+              <div className="blockContent">
+                <h2>Build native mobile apps using JavaScript and React</h2>
+                <Marked>
+                  React Native lets you build mobile apps using only JavaScript. It uses the same design as React, letting you compose a rich mobile UI from declarative components.
+                </Marked>
+              </div>
+              <Prism>
                 {`import React, { Component } from 'react';
 import { Text, View } from 'react-native';
 
@@ -167,23 +150,19 @@ class WhyReactNativeIsSoGreat extends Component {
   }
 }`}
               </Prism>
-
             </div>
           </Container>
-
-          <Container padding={['bottom', 'top']}>
-            <div className="blockElement imageAlignSide twoByGridBlock">
+          <Container>
+            <div className="blockElement">
               <div className="blockContent">
                 <h2>
                   A React Native app is a real mobile app
                 </h2>
-                <div>
-                  <Marked>
-                    With React Native, you don't build a "mobile web app", an "HTML5 app", or a "hybrid app". You build a real mobile app that's indistinguishable from an app built using Objective-C or Java. React Native uses the same fundamental UI building blocks as regular iOS and Android apps. You just put those building blocks together using JavaScript and React.
-                  </Marked>
-                </div>
+                <Marked>
+                  With React Native, you don't build a "mobile web app", an "HTML5 app", or a "hybrid app". You build a real mobile app that's indistinguishable from an app built using Objective-C or Java. React Native uses the same fundamental UI building blocks as regular iOS and Android apps. You just put those building blocks together using JavaScript and React.
+                </Marked>
               </div>
-                <Prism>
+              <Prism>
                 {`import React, { Component } from 'react';
 import { Image, ScrollView, Text } from 'react-native';
 
@@ -210,11 +189,10 @@ class AwkwardScrollingImageWithText extends Component {
   }
 }`}
               </Prism>
-
             </div>
           </Container>
-          <Container padding={['bottom', 'top']} background="light">
-            <div className="blockElement imageAlignSide twoByGridBlock">
+          <Container>
+            <div className="blockElement">
               <div className="blockContent">
                 <h2>
                 Don't waste time recompiling
@@ -225,12 +203,11 @@ class AwkwardScrollingImageWithText extends Component {
                   </Marked>
                 </div>
               </div>
-  <img src="https://media.giphy.com/media/13WZniThXy0hSE/giphy.gif" />
-
+              <img src="https://media.giphy.com/media/13WZniThXy0hSE/giphy.gif" />
             </div>
           </Container>
-          <Container padding={['bottom', 'top']}>
-            <div className="blockElement imageAlignSide twoByGridBlock">
+          <Container>
+            <div className="blockElement">
               <div className="blockContent">
                 <h2>
                   Use native code when you need to
@@ -241,7 +218,7 @@ class AwkwardScrollingImageWithText extends Component {
                   </Marked>
                 </div>
               </div>
-                <Prism>
+              <Prism>
                 {`import React, { Component } from 'react';
 import { Text, View } from 'react-native';
 import { TheGreatestComponentInTheWorld } from './your-native-code';
@@ -263,6 +240,16 @@ class SomethingFast extends Component {
 
             </div>
           </Container>
+          <Container>
+            <div style={{ textAlign: "center" }}>
+              <Button
+                href={siteConfig.baseUrl + "docs/getting-started.html"}
+                target="_self"
+              >
+                Get Started with React Native
+              </Button>
+            </div>
+          </Container>
           <div className="home-showcase-section paddingBottom">
             <h2>
               Who's using React Native?
@@ -272,15 +259,12 @@ class SomethingFast extends Component {
               <AppList apps={pinnedApps} />
             </div>
             <div className="more-users">
-              <a
-                className="button"
-                href={
-                  siteConfig.baseUrl + this.props.language + "/" + "users.html"
-                }
+              <Button
+                href={siteConfig.baseUrl + "users.html"}
                 target="_self"
               >
                 More React Native Apps
-              </a>
+              </Button>
             </div>
           </div>
         </div>

website/pages/en/users.js

@@ -111,7 +111,7 @@ class Users extends React.Component {
   render() {
     return (
       <div className="mainContainer">
-        <Container padding={["bottom", "top"]}>
+        <Container padding={["bottom"]}>
           <div className="showcaseSection">
             <div className="prose">
               <h1>Who's using React Native?</h1>

website/sidebars.json

@@ -16,7 +16,6 @@
         "more-resources"
       ],
     "Guides": [
-      "components",
       "platform-specific-code",
       "navigation",
       "images",
@@ -59,6 +58,47 @@
     ]
   },
   "API": {
+    "API Reference": [
+      "components"
+    ],
+    "Components": [
+      "activityindicator",
+      "button",
+      "datepickerios",
+      "drawerlayoutandroid",
+      "flatlist",
+      "image",
+      "keyboardavoidingview",
+      "listview",
+      "maskedviewios",
+      "modal",
+      "navigatorios",
+      "picker",
+      "pickerios",
+      "progressbarandroid",
+      "progressviewios",
+      "refreshcontrol",
+      "scrollview",
+      "sectionlist",
+      "segmentedcontrolios",
+      "slider",
+      "snapshotviewios",
+      "statusbar",
+      "switch",
+      "tabbarios",
+      "tabbarios-item",
+      "text",
+      "textinput",
+      "toolbarandroid",
+      "touchablehighlight",
+      "touchablenativefeedback",
+      "touchableopacity",
+      "touchablewithoutfeedback",
+      "view",
+      "viewpagerandroid",
+      "virtualizedlist",
+      "webview"
+    ],
     "APIs": [
       "accessibilityinfo",
       "actionsheetios",
@@ -105,44 +145,6 @@
       "vibrationios",
       "viewproptypes",
       "viewstyleproptypes"
-    ],
-    "Components": [
-      "activityindicator",
-      "button",
-      "datepickerios",
-      "drawerlayoutandroid",
-      "flatlist",
-      "image",
-      "keyboardavoidingview",
-      "listview",
-      "maskedviewios",
-      "modal",
-      "navigatorios",
-      "picker",
-      "pickerios",
-      "progressbarandroid",
-      "progressviewios",
-      "refreshcontrol",
-      "scrollview",
-      "sectionlist",
-      "segmentedcontrolios",
-      "slider",
-      "snapshotviewios",
-      "statusbar",
-      "switch",
-      "tabbarios",
-      "tabbarios-item",
-      "text",
-      "textinput",
-      "toolbarandroid",
-      "touchablehighlight",
-      "touchablenativefeedback",
-      "touchableopacity",
-      "touchablewithoutfeedback",
-      "view",
-      "viewpagerandroid",
-      "virtualizedlist",
-      "webview"
     ]
   }
 }

website/siteConfig.js

@@ -22,8 +22,8 @@ const siteConfig = {
   /* header links for links on this site, 'LANGUAGE' will be replaced by whatever
      language the page is for, ex: 'en' */
   headerLinks: [
-    { doc: "accessibility", label: "Docs" },
-    { doc: "accessibilityinfo", label: "APIs" },
+    { doc: "getting-started", label: "Docs" },
+    { doc: "components", label: "APIs" },
     { page: "help", label: "Community" },
     { blog: true, label: "Blog" },
     { search: true },
@@ -44,7 +44,7 @@ const siteConfig = {
     prismColor:
       "rgba(5, 165, 209, 0.05)" /* primaryColor in rgba form, with 0.03 alpha */
   },
-  tagline: "My Tagline",
+  tagline: "A framework for building native apps using React",
   recruitingLink:
     "https://crowdin.com/project/react-native" /* translation site "help translate" link */,
   /* remove this section to disable search bar */

website/static/css/footer.css

@@ -6,4 +6,9 @@ footer .sitemap h6 > a {
 
 footer.nav-footer {
     background-color: #012129;
-}
+}
+
+footer.nav-footer .nav-home img {
+  height: auto;
+  width: 34px;
+}

website/static/css/hero.css

@@ -67,7 +67,7 @@
 }
 
 .buttons-unit a {
-  color: #fa6900;
+  color:white;
 }
 
 .buttons-unit .button {
@@ -85,10 +85,6 @@
   background: #0485a9;
 }
 
-.buttons-unit.downloads {
-  margin: 30px 0;
-}
-
 @media screen and (max-width: 373px) {
   .hero .buttons-unit .button {
     margin-bottom: 4px;

website/static/css/react-native.css

@@ -17,6 +17,7 @@ body {
 .mainContainer h5,
 .mainContainer h6 {
   color: $tintColor !important;
+  font-weight: 400;
 }
 
 a {
@@ -119,3 +120,63 @@ code {
       margin: 0;
     }
   }
+
+.container {
+  max-width: 800px;
+  margin: 40px auto;
+}
+
+.container .wrapper h2 {
+  font-size: 31px;
+}
+
+.container .wrapper .prism {
+  margin: 14px 0;
+}
+
+p {
+  font-size: 18px;
+  line-height: 1.4;
+}
+
+.big-button {
+  text-align: center;
+  background: $secondaryColor;
+  color: #fafafa;
+  border-radius: 4px;
+  padding: 12px 16px;
+  font-size: 18px;
+  font-weight: 300;
+  margin: 0 12px;
+  display: inline-block;
+  color: #fafafa;
+  text-decoration: none;
+  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
+  box-shadow: 1px 3px 3px rgba(0, 0, 0, 0.3);
+  transition: background 0.3s, color 0.3s;
+}
+
+.big-button:hover {
+  background: $tintColor;
+  color: #fff;
+}
+
+.big-button a {
+  color:white;
+}
+
+.big-button:active {
+  background: #0485a9;
+}
+
+@media screen and (min-width: 600px) {
+  .big-button {
+    font-size: 24px;
+  }
+}
+
+@media screen and (max-width: 373px) {
+  .big-button {
+    margin-bottom: 4px;
+  }
+}

website/static/css/showcase.css

@@ -1,7 +1,15 @@
 .showcaseSection .inner-content {
   width: 800px;
 }
-  
+
+.showcaseSection .prose h1 {
+  padding: 0 0;
+}
+
+.showcaseSection .prose {
+  max-width: 800px;
+}
+
 @media only screen and (max-device-width: 840px) {
   .showcaseSection .inner-content {
     width: 100%; 
@@ -15,7 +23,7 @@
 }
 
 .home-showcase-section p {
-  max-width: 540px;
+  max-width: 560px;
   margin: 0 auto;
 }
 
@@ -24,6 +32,13 @@
   color: rgba(0, 0, 0, 0.4);
 }
 
+
+.home-showcase-section h2 {
+  font-size: 31px;
+  line-height: 40px;
+  margin: 10px 0;
+}
+
 .home-showcase-section .showcase img {
   width: 100px;
   height: 100px;
@@ -55,11 +70,13 @@
   line-height: 20px;
   padding-left: 5px;
   padding-right: 5px;
+  padding-bottom: 0 !important;
   font-size: 16px;
 }
 
 .showcase p {
   margin-top: 5px;
+  padding-top: 0 !important;
 }
 
 .showcase h3,
@@ -73,6 +90,10 @@
   border-radius: 20px;
 }
 
+.showcaseSection .logos img {
+  padding: 0;
+}
+
 .pinned img {
   width: 150px;
   border-radius: 20px;