From 71502c717d22c235653f2a13702c34e52294df2f Mon Sep 17 00:00:00 2001
From: mikrdgz <32101560+mikrdgz@users.noreply.github.com>
Date: Fri, 9 Aug 2019 15:49:55 -0500
Subject: [PATCH] feat(docs): update Getting Started copy (#144)

* Add more copy to Getting Started and added another link to resources

* fix(docs): run linter fix on missing files
---
 .../GettingStarted/GettingStartedPage.tsx     | 37 +++++++++++++++++--
 1 file changed, 34 insertions(+), 3 deletions(-)

diff --git a/packages/docs/pages/GettingStarted/GettingStartedPage.tsx b/packages/docs/pages/GettingStarted/GettingStartedPage.tsx
index bc4c8dd91..d97996f0e 100644
--- a/packages/docs/pages/GettingStarted/GettingStartedPage.tsx
+++ b/packages/docs/pages/GettingStarted/GettingStartedPage.tsx
@@ -14,8 +14,10 @@ export default () => (
     </Flex.Item>
 
     <Text>
-      Our design language system and React component library was built to enable designers and developers to build
-      experiences that seamlessly integrate with the BigCommerce product ecosystem.
+      BigCommerce’s library of React components lets developers build stylish apps that have a native BigCommerce feel
+      at their core. Our components implement BigDesign principles to allow you to create an empathetic and frictionless
+      user experience. The documentation will demonstrate the visual style and behavior of each component. Each
+      component has props that you can pass to the components for further configuration.
     </Text>
 
     <H2>Getting Started</H2>
@@ -53,12 +55,33 @@ export default () => (
       `}
     </CodeSnippet>
 
+    <H2>Using this Documentation</H2>
+
+    <Text marginBottom="none">
+      This documentation uses the React components in the BigDesign library so you can edit them and preview them in
+      real time.
+    </Text>
+
+    <List>
+      <List.Item>
+        Select an element or utility in the left menu to view their props, types and descriptions below, including
+        examples.
+      </List.Item>
+      <List.Item>
+        Type directly in the code editor to make changes. Click the time icon to restore the component to default.
+      </List.Item>
+      <List.Item>
+        Click the clipboard icon to copy the code snippet to your clipboard. Click the dual color icon to change the
+        background color of the code editor.
+      </List.Item>
+    </List>
+
     <H2 marginBottom="none">Helpful Resources</H2>
 
     <List>
       <List.Item>
         <Link href="https://bigcommerce.design/components" target="_blank">
-          Design Guidelines
+          BigDesign Guidelines
         </Link>
       </List.Item>
       <List.Item>
@@ -84,6 +107,14 @@ export default () => (
           Dev Center
         </Link>
       </List.Item>
+      <List.Item>
+        <Link
+          href="https://developer.bigcommerce.com/api-docs/getting-started/building-apps-bigcommerce/building-apps"
+          target="_blank"
+        >
+          Building an App
+        </Link>
+      </List.Item>
     </List>
   </Flex>
 );