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
bigcommerce · Aug 9, 2019 · 71502c7 · 71502c7
1 parent 76c1af6
commit 71502c7
Showing 1 changed file with 34 additions and 3 deletions.
diff --git 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>
 );