From a08f89fa14e96d393557715ad0636bdf2e5ec470 Mon Sep 17 00:00:00 2001
From: moklick <info@moritzklack.com>
Date: Wed, 14 Oct 2020 18:09:39 +0200
Subject: [PATCH] style(website): getting started section

---
 website/src/components/TeaserFlow/C.js |  2 +
 website/src/pages/index.js             | 79 ++++++++++++++------------
 2 files changed, 45 insertions(+), 36 deletions(-)

diff --git a/website/src/components/TeaserFlow/C.js b/website/src/components/TeaserFlow/C.js
index 8de970b9..21cc77aa 100644
--- a/website/src/components/TeaserFlow/C.js
+++ b/website/src/components/TeaserFlow/C.js
@@ -4,6 +4,7 @@ import ReactFlow, {
   Background,
   Controls,
   addEdge,
+  MiniMap,
 } from 'react-flow-renderer';
 
 import TeaserFlow from 'components/TeaserFlow';
@@ -187,6 +188,7 @@ export default () => {
         >
           <Background variant="lines" gap={20} />
           <Controls showInteractive={false} />
+          <MiniMap />
         </ReactFlow>
       </ReactFlowProvider>
     </TeaserFlow>
diff --git a/website/src/pages/index.js b/website/src/pages/index.js
index ebd7f329..1d0e48f7 100644
--- a/website/src/pages/index.js
+++ b/website/src/pages/index.js
@@ -118,6 +118,11 @@ const CenterHeadline = styled(CenterContent)`
   }
 `;
 
+const GettingStartedWrapper = styled(Box)`
+  max-width: 800px;
+  margin: 0 auto;
+`;
+
 const Home = () => {
   return (
     <Page metaTags={metaTags}>
@@ -165,28 +170,29 @@ const Home = () => {
             text="React Flow enables you to build node-based applications. From simple static diagrams to complex interactive editors."
             color={baseColors.textLight}
           />
-          <Paragraph mb={3} color={baseColors.textLight}>
-            React Flow is published on{' '}
-            <a
-              href="https://www.npmjs.com/package/react-flow-renderer"
-              target="_blank"
-              rel="noopener noreferrer"
-            >
-              npm
-            </a>
-            . You can install it via:
-          </Paragraph>
-          <CodeBlock
-            code={`npm install --save react-flow-renderer`}
-            language="bash"
-          />
-          <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. A simple flow could look like this:
-          </Paragraph>
-          <CodeBlock
-            code={`import React from 'react';
+          <GettingStartedWrapper>
+            <Paragraph mb={3} color={baseColors.textLight}>
+              React Flow is published on{' '}
+              <a
+                href="https://www.npmjs.com/package/react-flow-renderer"
+                target="_blank"
+                rel="noopener noreferrer"
+              >
+                npm
+              </a>
+              . You can install it via:
+            </Paragraph>
+            <CodeBlock
+              code={`npm install --save react-flow-renderer`}
+              language="bash"
+            />
+            <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. A simple flow could look like this:
+            </Paragraph>
+            <CodeBlock
+              code={`import React from 'react';
 import ReactFlow from 'react-flow-renderer';
 
 const elements = [
@@ -197,20 +203,21 @@ const 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>
+            />
+            <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>
+          </GettingStartedWrapper>
         </CenterContent>
       </ContentSection>