From 4ea222f54f3ee993cbca47debea9f727a17c527e Mon Sep 17 00:00:00 2001
From: Kristofer Selbekk <kristofer.selbekk@sparebank1.no>
Date: Thu, 11 Oct 2018 07:50:33 +0200
Subject: [PATCH] Add section about how to get started

---
 docusaurus/website/pages/en/index.js | 37 ++++++++++++++++++++++++----
 1 file changed, 32 insertions(+), 5 deletions(-)

diff --git a/docusaurus/website/pages/en/index.js b/docusaurus/website/pages/en/index.js
index 939484ca..323266ed 100755
--- a/docusaurus/website/pages/en/index.js
+++ b/docusaurus/website/pages/en/index.js
@@ -79,7 +79,9 @@ class HomeSplash extends React.Component {
             <Button href={docUrl('getting-started', language)}>
               Get started
             </Button>
-            <Button href={docUrl('documentation-intro', language)}>Documentation</Button>
+            <Button href={docUrl('documentation-intro', language)}>
+              Documentation
+            </Button>
           </PromoSection>
         </div>
       </SplashContainer>
@@ -93,12 +95,16 @@ const Block = props => (
     id={props.id}
     background={props.background}
   >
-    <GridBlock align="center" contents={props.children} layout={props.layout} />
+    <GridBlock
+      align={props.align}
+      contents={props.children}
+      layout={props.layout}
+    />
   </Container>
 );
 
-const Features = () => (
-  <Block layout="threeColumn" align="left">
+const Features = props => (
+  <Block layout="threeColumn" {...props}>
     {[
       {
         content:
@@ -119,6 +125,26 @@ const Features = () => (
   </Block>
 );
 
+const GetStarted = props => (
+  <Block layout="twoColumn" background="light" {...props}>
+    {[
+      {
+        title: 'Get started coding in a matter of seconds!',
+        content: `With Create React App, you get to focus on **writing React, not boilerplate**.
+          All you need to do is run a command, install some dependencies, and decide what's for dinner.
+
+          npx create-react-app my-app
+          `,
+      },
+      {
+        image:
+          'https://camo.githubusercontent.com/29765c4a32f03bd01d44edef1cd674225e3c906b/68747470733a2f2f63646e2e7261776769742e636f6d2f66616365626f6f6b2f6372656174652d72656163742d6170702f323762343261632f73637265656e636173742e737667',
+        imageAlign: 'right',
+      },
+    ]}
+  </Block>
+);
+
 class Index extends React.Component {
   render() {
     const language = this.props.language || '';
@@ -127,7 +153,8 @@ class Index extends React.Component {
       <div>
         <HomeSplash language={language} />
         <div className="mainContainer">
-          <Features />
+          <Features align="center" />
+          <GetStarted align="left" />
         </div>
       </div>
     );