add home page

docs/src/Layout/index.js

@@ -35,7 +35,8 @@ const showComponents = {
 
 
 const Layout = props => {
-  const { location: { pathname }, children } = props;
+  const { location , children } = props;
+  const { pathname } = location || {};
   const isComponenet =
     pathname &&
     (pathname.includes ('components') || pathname.includes ('layout'));

docs/src/components/Home/index.js

@@ -0,0 +1,49 @@
+import React from 'react';
+import { Link } from 'gatsby';
+import { Row, Col, Button } from 'react-bootstrap';
+import homeImg from '../../images/home-right.jpg';
+import './style.scss';
+
+const Home = () => (
+  <div className="Home">
+    <Row className="Home__hero">
+      <Col xs={12} md={6} className="Home__left">
+        <h1>WIZARD UI</h1>
+        <h2>基于 React 和 Typescript 的组件模块化解决方案，让设计和开发专注更好的用户体验。</h2>
+        <div className="Home__btn">
+          <Link to="/get-started/introduction">
+            <Button bsStyle="primary">
+              开始使用
+            </Button>
+          </Link>
+          <a target="_blank" rel="noopener noreferrer" href="https://github.com/xsky-fe/wizard-ui">
+            <Button>
+              Github
+            </Button>
+          </a>
+        </div>
+      </Col>
+      <Col xs={12} md={6}>
+        <img src={homeImg} alt="wizard-ui" height={300} />
+      </Col>
+    </Row>
+    <Row className="Home__feature">
+      <Col xs={12} md={4}>
+        <h2>基于 React、Typescript 构建</h2>
+        <p>提供一套简单易用的 React 组件库，提升开发体验。Typescript 保证代码稳定性。</p>
+      </Col>
+      <Col xs={12} md={4}>
+        <h2>可用性</h2>
+        <p>尝试在多层面、多纬度封装基础组件。满足多个应用场景。</p>
+        <p>提供常用的复杂业务组件。</p>
+      </Col>
+      <Col xs={12} md={4}>
+        <h2>React Bootstrap 定制</h2>
+        <p>UI 层面定制了颜色、布局结构</p>
+        <p>在 React Bootstrap 的基础上，做了很多扩展，提升了可用性并补充了复杂交互组件。</p>
+      </Col>
+    </Row>
+  </div>
+)
+
+export default Home;

docs/src/components/Home/style.scss

@@ -0,0 +1,18 @@
+.Home {
+  &__hero {
+    padding: 80px 60px;
+  }
+  &__left {
+    padding-top: 60px;
+  }
+  &__btn {
+    a:first-child {
+      margin-right: 20px;
+    }
+  }
+  &__feature {
+    padding: 40px 60px;
+    background-color: #846ee0;
+    color: #fff;
+  }
+}

docs/src/components/SideNav/style.scss

@@ -10,6 +10,9 @@
       border: 0;
       margin: 0;
     }
+    .panel-heading {
+      border: 0;
+    }
     .panel-body {
       padding: 0;
     }

docs/src/pages/index.js

@@ -1,11 +1,12 @@
 import React from "react"
 import Layout from "../Layout"
-import SEO from "../components/seo"
+import SEO from "../components/seo";
+import Home from '../components/Home';
 
 const IndexPage = props => (
   <Layout {...props}>
     <SEO title="Home" />
-    <h2>Wizard UI</h2>
+    <Home/>
   </Layout>
 )
 

docs/src/pages/layout/grid.mdx

@@ -1,8 +1,8 @@
 ---
 link: layout/grid
-title: Grid
+title: Grid 栅格
 author: kailang
 date: 2019-05-21
 ---
 
-## Grid
+## Grid 

src/style/variables.scss

@@ -1,18 +1,119 @@
-$white: #fff;
+/* red */
+$red-lighter-4: #fcdddd;
+$red-lighter-3: #fde9e9;
+$red-lighter-2: #fdd2d2;
+$red-lighter-1: #fa6a68;
+$red-normal: #f24542;
+$red-darker-1: #f02e2a;
+$red-darker-2: #d11d00;
+$red-darker-3: #f46966;
+$red-gray-1: #edd3d7;
+$red-gray-2: #dcafb0;
+$red-gray-3: #b74b4b;
+$red-2-darker-2: #b90a38;
+
+/* purple */
+$purple-lighter-3: #f3f2f7;
+$purple-lighter-2: #dad6f7;
+$purple-lighter-1: #846ee0;
+$purple-normal: #6b58c4;
+$purple-darker-1: #614dc0;
+$purple-darker-2: #513dae;
+$purple-darker-3: #6B54C7;
+$purple-darker-4: #A795F1;
+
+/* blue */
+$blue-royal-normal: #5a6691;
+$blue-royal-darker-1: #545f88;
+$blue-royal-darker-2: #4c567b;
+$blue-royal-gray-1: #d9dbe9;
+$blue-royal-gray-2: #b4b9d7;
+$blue-royal-gray-3: #7988c2;
+$blue-lighter-3: #e0f3fb;
+$blue-lighter-2: #bee8f1;
+$blue-normal: #448aff;
+$blue-darker-1: #2979ff;
+$blue-darker-2: #2962ff;
+$blue-darker-3: #4F5FEF;
+$blue-darker-4: #3277EB;
+$blue-gray-2: #a7c9dc;
+$blue-gray-3: #3e88ab;
+$blue-green-normal: #00bfa5;
+
+/* green */
+$green-lighter-3: #eaf8ef;
+$green-lighter-2: #c2e9cf;
+$green-lighter-1: #41d074;
+$green-normal: #30b65f;
+$green-darker-1:#28ac57;
+$green-darker-2: #07a740;
+$green-darker-3: #0D8C07;
+$green-gray-2: #b1d0a8;
+$green-gray-3: #346c32;
+
+/* goldenrod */
+$goldenrod-lighter-3: #fdf7e1;
+$goldenrod-lighter-2: #f7ecaf;
+$goldenrod-lighter-1: #ffd740;
+$goldenrod-normal: #ffb71c;
+$goldenrod-darker-1: #ffae00;
+$goldenrod-darker-2: #f2a501;
+$goldenrod-darker-3: #FFB800;
+$goldenrod-gray-1: #faedd6;
+$goldenrod-gray-2: #dccdaf;
+$goldenrod-gray-3: #bf9858;
 
-/*******************************
-  * Use Case
-  *******************************/
+/* gray */
+$gray-lighter-1: #f9f9f9;
+$gray-lighter-2: #edeef2;
+$gray-lighter-3: #e5e7eb;
+$gray-lighter-4: #dbddec;
+$gray-lighter-5: #f5f5f5;
+$gray-lighter-6: #e4ebf1;
+$gray-lighter-7: #ededed;
+$gray-medium-1: #d7d8e0;
+$gray-medium-2: #dddde1;
+$gray-medium-3: #cbcbd2;
+$gray-medium-4: #d5d9dc;
+$gray-medium-5: #9ea4bd;
+$gray-medium-6: #a2a3a9;
+$gray-medium-7: #e5e5e5;
+$gray-medium-8: #f5f5f5;
+$gray-medium-9: #777777;
+$gray-medium-10: #bfbfbf;
+$gray-medium-11: #999999;
+$gray-medium-12: #cccccc;
+$gray-medium-13: #666666;
+$gray-darker-1: #737995;
+$gray-darker-2: #5a5f6f;
+$gray-darker-3: #3f3f44;
+$gray-darker-4: #383e5d;
+$gray-darker-5: #2d3454;
+$gray-darker-6: #1a203e;
+$gray-darker-7: #242a49;
+$gray-darker-8: #333333;
+$gray-darker-9: #273849;
+
+/* yellow */
+$yellow-normal: #f0ad4e;
+$yellow-red-1: #ffe379;
+$yellow-red-2: #ffc876;
+$yellow-red-3: #fead73;
+$yellow-red-4: #fd926b;
+$yellow-red-5: #fb655e;
+
+
+$white: #fff;
 
 /* Color Use Case */
-$brand-primary: #6b58c4;
-$brand-success: #00bfa5;
-$brand-danger: #f24542;
-$brand-warning:#ffb71c;
-$brand-info: #448aff;
+$brand-primary: $purple-normal;
+$brand-success: $green-normal;
+$brand-danger: $red-normal;
+$brand-warning: $goldenrod-normal;
+$brand-info: $blue-normal;
 $brand-error: #f07574;
 $brand-critical: #d9534f;
-$brand-muted: #a2a3a9;
+$brand-muted: $gray-medium-6;
 
 
 /* Badge */