added getting started

Author: prasanna1211

docs/client/components/ComponentsPage/index.js

@@ -7,7 +7,7 @@ import styles from './styles.scss';
 const ComponentsPage = () => (
   <div className={styles.usage}>
     <div dangerouslySetInnerHTML={{ __html: CardReadme }} />
-    <div style={{ height: '100px' }} />
+    <div style={{ height: '300px' }} />
   </div>
 );
 

docs/client/components/ComponentsPage/styles.scss

@@ -1,4 +1,19 @@
 :local(.usage) {
   overflow: scroll;
+  height: 800px;
   padding: 5%;
+
+  table, td, th {
+    border: 1px solid #d2d2d2;
+    border-collapse: collapse;
+  }
+  td {
+    padding: 5px;
+    font-size: 12px;
+    height: 40px;
+  }
+  .hljs {
+    padding: 15px 0px;
+    background: #f1f1f1;
+  }
 }

docs/client/components/GettingStartedPage/index.js

@@ -1,8 +1,26 @@
 import React from 'react';
 
+import SampleCode from './sampleCode.md';
+import styles from './styles.scss';
+
 const GettingStartedPage = () => (
-  <div>
-    GettingStarted Page
+  <div className={styles.code}>
+    <div className="header">
+      GettingStarted Page
+    </div>
+    <div className="sub-header">
+      Installation
+    </div>
+    <div className="js-code">
+      npm install react-lite
+    </div>
+    <div className="sub-header">
+      Usage
+    </div>
+    <div className="js-code">
+      <div dangerouslySetInnerHTML={{ __html: SampleCode }} />
+    </div>
+    <div className="empty-div" />
   </div>
 );