Merge branch 'site' of github.com:wbkd/react-flow into site

website/src/pages/index.js

@@ -163,24 +163,34 @@ const Home = () => {
           <Paragraph my={3} color={baseColors.textLight}>
             A flow consists of nodes and edges (or just nodes). Together we call
             them elements. You can pass a set of elements as a prop to the
-            ReactFlow component. Hereby all elements need unique ids. A node
-            needs a position and a label and an edge needs a source (node id)
-            and a target (node id). This is the most basic for a flow. A simple
-            flow could look like this:
+            ReactFlow component. A simple flow could look like this:
           </Paragraph>
           <CodeBlock
             code={`import React from 'react';
 import ReactFlow from 'react-flow-renderer';
 
 const elements = [
-  { id: '1', data: { label: 'Node 1' }, position: { x: 250, y: 5 } },
+  { id: '1', type: 'input', data: { label: 'Node 1' }, position: { x: 250, y: 5 } },
   // you can also pass a React Node as a label
   { id: '2', data: { label: <div>Node 2</div> }, position: { x: 100, y: 100 } },
   { id: 'e1-2', source: '1', target: '2', animated: true },
 ];
 
-const BasicFlow = () => <ReactFlow elements={elements} />;`}
+export default () => <ReactFlow elements={elements} />;`}
           />
+          <Paragraph mt={3} color={baseColors.textLight}>
+            You can find a detailed{' '}
+            <Link to="/docs/getting-started/">entry point</Link> in the docs or
+            read our{' '}
+            <a
+              href="https://webkid.io/blog/react-flow-node-based-graph-library/"
+              target="_blank"
+              rel="noopener noreferrer"
+            >
+              blog post
+            </a>{' '}
+            to get started.
+          </Paragraph>
         </CenterContent>
       </ContentSection>