From 109c8df0579ea0e42151a1b02386d75ea6c40479 Mon Sep 17 00:00:00 2001
From: Ryan Cordell <ryan.cordell@consensys.net>
Date: Thu, 30 May 2019 09:59:42 +0100
Subject: [PATCH 1/5] Removed nav, edited titles

---
 components/navMenu.js | 28 +---------------------------
 pages/index.js        |  7 ++++---
 2 files changed, 5 insertions(+), 30 deletions(-)

diff --git a/components/navMenu.js b/components/navMenu.js
index 895337f..16dd273 100644
--- a/components/navMenu.js
+++ b/components/navMenu.js
@@ -97,33 +97,7 @@ class Menu extends Component {
         <StyledToggle onClick={this._handleToggle}>
           <ReactSVG src="static/svg/baseline-menu-24px.svg" />
         </StyledToggle>
-        <StyledList hidden={!this.state.isOpen}>
-          <ul>
-            <li>
-              <Text fontSize={1} fontWeight={1} color={"mid-grey"}>
-                v0.8.0
-              </Text>
-            </li>
-            <li>
-              <Link
-                href="//github.com/ConsenSys/rimble-ui"
-                target="_blank"
-                rel="noopener"
-              >
-                Github
-              </Link>
-            </li>
-            <li>
-              <Link
-                href="//consensys.github.io/rimble-ui/"
-                target="_blank"
-                rel="noopener"
-              >
-                Documentation
-              </Link>
-            </li>
-          </ul>
-        </StyledList>
+        
       </StyledWrap>
     );
   }
diff --git a/pages/index.js b/pages/index.js
index 15e6c7a..faadf1c 100644
--- a/pages/index.js
+++ b/pages/index.js
@@ -89,21 +89,22 @@ const Home = () => (
                   <Flex my={3}>
                     <ReactSVG src='static/svg/fig-1.svg' />
                   </Flex>
-                  <Heading.h2 fontSize={[2, 3]} fontWeight={1}>Flexible</Heading.h2>
+                  <Heading.h2 fontSize={[2, 3]} fontWeight={1}>Rimble UI</Heading.h2>
                   <Text.p>Your tech stack and workflow are yours to decide. We impose as few constraints as possible. </Text.p>
                 </Box>
+
                 <Box flex={'1 1 auto'} width={[1, 1/3]} mr={5}>
                   <Flex my={3}>
                     <ReactSVG src='static/svg/fig-2.svg' />
                   </Flex>
-                  <Heading.h2 fontSize={[2, 3]} fontWeight={1}>Research-driven</Heading.h2>
+                  <Heading.h2 fontSize={[2, 3]} fontWeight={1}>Web3 components</Heading.h2>
                   <Text.p>We are constantly talking to dApp designers, developers, and users to understand common challenges and effective UI patterns. </Text.p>
                 </Box>
                 <Box flex={'1 1 auto'} width={[1, 1/3]} >
                   <Flex my={3}>
                     <ReactSVG src='static/svg/fig-3.svg' />
                   </Flex>
-                  <Heading.h2 fontSize={[2, 3]} fontWeight={1}>Human</Heading.h2>
+                  <Heading.h2 fontSize={[2, 3]} fontWeight={1}>dApp patterns</Heading.h2>
                   <Text.p>Blockchain is confusing. We are a dedicated team, invested in being understandable and approachable.</Text.p>
                 </Box>
               </Flex>

From 766a4c8377f0161183fabd304852b37c735d9739 Mon Sep 17 00:00:00 2001
From: Ryan Cordell <ryan.cordell@consensys.net>
Date: Thu, 30 May 2019 10:01:49 +0100
Subject: [PATCH 2/5] =?UTF-8?q?added=20copy=20from=20other=20branch=20?=
 =?UTF-8?q?=E2=80=93=20button=20not=20defined=20error?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 pages/index.js | 54 ++++++++++++++++++++++++++------------------------
 1 file changed, 28 insertions(+), 26 deletions(-)

diff --git a/pages/index.js b/pages/index.js
index faadf1c..d936dda 100644
--- a/pages/index.js
+++ b/pages/index.js
@@ -11,7 +11,7 @@ import Heading from '../components/Heading'
 import Text from '../components/Text'
 import Hr from '../components/Hr'
 import {Flex, Box} from '../components/Box'
-
+import { Button } from 'rimble-ui'
 import Head from '../components/head'
 import Nav from '../components/nav'
 import Header from '../components/header'
@@ -83,33 +83,35 @@ const Home = () => (
               <Text.p fontSize={[1, 2]}>
                 Decentralized applications (dApps) require users to learn new patterns and they present new hurdles for designers and front-end developers. Rimble is here to make life easier for everyone. As an open source project, Rimble aims to create common dApp UX patterns, validated through user research, and built for developers.
               </Text.p>
-
-              <Flex mt={4} width={1} flexDirection={['column', 'row']}>
-                <Box flex={'1 1 auto'} width={[1, 1/3]} mr={5}>
-                  <Flex my={3}>
-                    <ReactSVG src='static/svg/fig-1.svg' />
-                  </Flex>
-                  <Heading.h2 fontSize={[2, 3]} fontWeight={1}>Rimble UI</Heading.h2>
-                  <Text.p>Your tech stack and workflow are yours to decide. We impose as few constraints as possible. </Text.p>
-                </Box>
-
-                <Box flex={'1 1 auto'} width={[1, 1/3]} mr={5}>
-                  <Flex my={3}>
-                    <ReactSVG src='static/svg/fig-2.svg' />
-                  </Flex>
-                  <Heading.h2 fontSize={[2, 3]} fontWeight={1}>Web3 components</Heading.h2>
-                  <Text.p>We are constantly talking to dApp designers, developers, and users to understand common challenges and effective UI patterns. </Text.p>
-                </Box>
-                <Box flex={'1 1 auto'} width={[1, 1/3]} >
-                  <Flex my={3}>
-                    <ReactSVG src='static/svg/fig-3.svg' />
-                  </Flex>
-                  <Heading.h2 fontSize={[2, 3]} fontWeight={1}>dApp patterns</Heading.h2>
-                  <Text.p>Blockchain is confusing. We are a dedicated team, invested in being understandable and approachable.</Text.p>
-                </Box>
-              </Flex>
             </Box>
           </Container>
+              <Container>
+                <Box my={5}>
+                  <Heading.h3 mt={3} fontSize={[3, 4]} >Build 👷‍♀️</Heading.h3>
+                  <Hr/>
+                  <Text.p>Your backlog is already *this* big. And we've already designed, tested and built these. Makes sense right?</Text.p>
+                  <Flex mt={4} width={1} flexDirection={['column', 'row']}>
+                    <Box flex={'1 1 auto'} width={[1, 1/2]} mr={5}>
+                      <Flex my={3}>
+                        <ReactSVG src='static/svg/fig-1.svg' />
+                      </Flex>
+                      <Heading.h2 fontSize={[2, 3]} fontWeight={1}>Rimble UI</Heading.h2>
+                      <Text.p>Clean, customisable building blocks for putting your interface together, including UI for Ethereum concepts.</Text.p>
+                      <Button.outline mt={3} mr={5} mb={5} href='https://github.com/ConsenSys/rimble-ui' target='_blank' rel='noopener'>Get the code</Button.outline>
+                      <Link mt={3} ml={5} mb={5} href='https://consensys.github.io/rimble-ui/?path=/story/getting-started--welcome' target='_blank' rel='noopener'>Read the docs</Link>
+                    </Box>
+                    <Box flex={'1 1 auto'} width={[1, 1/2]} mr={5}>
+                      <Flex my={3}>
+                        <ReactSVG src='static/svg/fig-2.svg' />
+                      </Flex>
+                      <Heading.h2 fontSize={[2, 3]} fontWeight={1}>Rimble Web3</Heading.h2>
+                      <Text.p>Drop-in components that solve an Ethereum UX problem out of the box. Configure some inputs and you're ready.   </Text.p>
+                      <Button.outline mt={3} mr={5} href='https://github.com/ConsenSys/rimble-web3-components' target='_blank' rel='noopener'>Get the code</Button.outline>
+                      <Link disabled mt={3} ml={5} href='https://rimble-web3-components.netlify.com/?path=/story/connectionbanner--wrong-network-default' target='_blank' rel='noopener'>Docs coming soon!</Link>
+                    </Box>
+                  </Flex>
+                </Box>
+              </Container>
         </section>
         <section>
           <Container>

From 6db5ff5249e3862b5e5bee2704f9fe41e000d2b2 Mon Sep 17 00:00:00 2001
From: Ryan Cordell <ryan.cordell@consensys.net>
Date: Thu, 30 May 2019 10:04:32 +0100
Subject: [PATCH 3/5] structure added

---
 pages/index.js | 19 ++++++++++++++-----
 1 file changed, 14 insertions(+), 5 deletions(-)

diff --git a/pages/index.js b/pages/index.js
index d936dda..1698752 100644
--- a/pages/index.js
+++ b/pages/index.js
@@ -11,7 +11,7 @@ import Heading from '../components/Heading'
 import Text from '../components/Text'
 import Hr from '../components/Hr'
 import {Flex, Box} from '../components/Box'
-import { Button } from 'rimble-ui'
+import Button from '../components/Button'
 import Head from '../components/head'
 import Nav from '../components/nav'
 import Header from '../components/header'
@@ -87,11 +87,11 @@ const Home = () => (
           </Container>
               <Container>
                 <Box my={5}>
-                  <Heading.h3 mt={3} fontSize={[3, 4]} >Build 👷‍♀️</Heading.h3>
+                  <Heading.h3 mt={3} fontSize={[3, 4]} >Get building 👷‍♀️</Heading.h3>
                   <Hr/>
                   <Text.p>Your backlog is already *this* big. And we've already designed, tested and built these. Makes sense right?</Text.p>
                   <Flex mt={4} width={1} flexDirection={['column', 'row']}>
-                    <Box flex={'1 1 auto'} width={[1, 1/2]} mr={5}>
+                    <Box flex={'1 1 auto'} width={[1, 1, 1/3]} mr={5}>
                       <Flex my={3}>
                         <ReactSVG src='static/svg/fig-1.svg' />
                       </Flex>
@@ -100,7 +100,7 @@ const Home = () => (
                       <Button.outline mt={3} mr={5} mb={5} href='https://github.com/ConsenSys/rimble-ui' target='_blank' rel='noopener'>Get the code</Button.outline>
                       <Link mt={3} ml={5} mb={5} href='https://consensys.github.io/rimble-ui/?path=/story/getting-started--welcome' target='_blank' rel='noopener'>Read the docs</Link>
                     </Box>
-                    <Box flex={'1 1 auto'} width={[1, 1/2]} mr={5}>
+                    <Box flex={'1 1 auto'} width={[1, 1, 1/3]} mr={5}>
                       <Flex my={3}>
                         <ReactSVG src='static/svg/fig-2.svg' />
                       </Flex>
@@ -109,6 +109,15 @@ const Home = () => (
                       <Button.outline mt={3} mr={5} href='https://github.com/ConsenSys/rimble-web3-components' target='_blank' rel='noopener'>Get the code</Button.outline>
                       <Link disabled mt={3} ml={5} href='https://rimble-web3-components.netlify.com/?path=/story/connectionbanner--wrong-network-default' target='_blank' rel='noopener'>Docs coming soon!</Link>
                     </Box>
+                    <Box flex={'1 1 auto'} width={[1, 1, 1/3]} mr={5}>
+                      <Flex my={3}>
+                        <ReactSVG src='static/svg/fig-3.svg' />
+                      </Flex>
+                      <Heading.h2 fontSize={[2, 3]} fontWeight={1}>dApp patterns</Heading.h2>
+                      <Text.p>Drop-in components that solve an Ethereum UX problem out of the box. Configure some inputs and you're ready.   </Text.p>
+                      <Button.outline mt={3} mr={5} href='https://github.com/ConsenSys/rimble-web3-components' target='_blank' rel='noopener'>Get the code</Button.outline>
+                      <Link disabled mt={3} ml={5} href='https://rimble-web3-components.netlify.com/?path=/story/connectionbanner--wrong-network-default' target='_blank' rel='noopener'>Docs coming soon!</Link>
+                    </Box>
                   </Flex>
                 </Box>
               </Container>
@@ -117,7 +126,7 @@ const Home = () => (
           <Container>
             <Box my={5}>
               {/* body section */}
-              <Heading.h1 id='getting-started' fontSize={[3, 4]}>Getting Started</Heading.h1>
+              <Heading.h1 id='getting-started' fontSize={[3, 4]}>Contribute to Rimble</Heading.h1>
               <Hr/>
               <Heading.h2 fontSize={2} fontWeight={1}>Installation</Heading.h2>
               <CodeBlock code={'$ npm install --save rimble-ui styled-components'} />

From f6fc8d0ed3026bee57959e72c5b80df4175b353d Mon Sep 17 00:00:00 2001
From: Ryan Cordell <ryan.cordell@consensys.net>
Date: Thu, 30 May 2019 11:21:31 +0100
Subject: [PATCH 4/5] contribution guidelines added

---
 components/footer.js |  2 +-
 components/header.js |  8 ++++++--
 pages/index.js       | 28 ++++++++++++----------------
 3 files changed, 19 insertions(+), 19 deletions(-)

diff --git a/components/footer.js b/components/footer.js
index d6e9b27..31a3911 100644
--- a/components/footer.js
+++ b/components/footer.js
@@ -28,7 +28,7 @@ const Footer = ({}) => (
   <FooterStyled>
     <MyContainer flexDirection={['column', 'row']} py={4}>
       <Link fontWeight={2} fontSize={0} href='//consensys.design/' target='_blank' rel='noopener'>Made by ConsenSys Design</Link>
-      <Text fontWeight={0} fontSize={0} color='#888D95'>© 2018 ConsenSys Inc.</Text>
+      <Text fontWeight={0} fontSize={0} color='#888D95'>© 2019 ConsenSys Inc.</Text>
     </MyContainer>
   </FooterStyled>
 )
diff --git a/components/header.js b/components/header.js
index a73d392..2878a7b 100644
--- a/components/header.js
+++ b/components/header.js
@@ -3,11 +3,15 @@ import React from 'react'
 import Text from './Text'
 import Heading from './Heading'
 import Button from './Button'
+import Link from './Link'
 
 const Header = ({}) => (
   <header>
-    <Heading.h1 fontSize={[5, 7]} pr={[3, 6]}>Rimble Design System</Heading.h1>
-    <Text.p fontSize={2} mt={3} mb={5} pr={[3, 6]}>Adaptable components and design standards for decentralized applications.</Text.p>
+  <Heading.h1 fontSize={[5, 7]} pr={[3, 6]}>Hi, we're Rimble 👋</Heading.h1>
+  <Heading.h2 fontSize={[2, 3]} my={3} pr={[3, 6]}>
+    A growing open-source library of components and guides for helping you make dApps everyone can use. We put out React components to help you <Link href="#build">build</Link> and guides to help you <Link href="#learn">learn.
+    </Link>
+  </Heading.h2>
 
     <Button as="a" href="#getting-started" width={['100%', 'auto']} mr={[0, 3]} mb={[3, 0]}>Get Started</Button>
     <Button.outline as="a" href='//consensys.github.io/rimble-ui/' target='_blank' rel='noopener' width={['100%', 'auto']}>Documentation</Button.outline>
diff --git a/pages/index.js b/pages/index.js
index 1698752..9afe49f 100644
--- a/pages/index.js
+++ b/pages/index.js
@@ -87,7 +87,7 @@ const Home = () => (
           </Container>
               <Container>
                 <Box my={5}>
-                  <Heading.h3 mt={3} fontSize={[3, 4]} >Get building 👷‍♀️</Heading.h3>
+                  <Heading.h3 mt={3} fontSize={[3, 4]} >Get building</Heading.h3>
                   <Hr/>
                   <Text.p>Your backlog is already *this* big. And we've already designed, tested and built these. Makes sense right?</Text.p>
                   <Flex mt={4} width={1} flexDirection={['column', 'row']}>
@@ -128,24 +128,20 @@ const Home = () => (
               {/* body section */}
               <Heading.h1 id='getting-started' fontSize={[3, 4]}>Contribute to Rimble</Heading.h1>
               <Hr/>
-              <Heading.h2 fontSize={2} fontWeight={1}>Installation</Heading.h2>
-              <CodeBlock code={'$ npm install --save rimble-ui styled-components'} />
-              <Heading.h2 fontSize={2} fontWeight={1}>Usage</Heading.h2>
-              <CodeBlock code={exampleCode} />
-            </Box>
-          </Container>
-        </section>
-        <section>
-          <Container>
-            <Box my={5}>
-              <Heading.h1 fontSize={[3, 4]}>Made by ConsenSys Design</Heading.h1>
-              <Hr/>
-              <Text.p>
-                Rimble is created by <Link href='//consensys.design/' target='_blank' rel='noopener'>ConsenSys Design.</Link> Want to help us define the roadmap? Submit feedback or feature requests on the <Link href='//github.com/ConsenSys/rimble-ui' target='_blank' rel='noopener'>Rimble</Link> GitHub page.
-              </Text.p>
+              <Box mb={4}>
+              <Text>Submit feedback or feature requests directly in our GitHub repos.</Text>
+              </Box>
+              <Box>
+              <Text fontSize={[1,2]}>🍴 Fork the repo on GitHub</Text>
+              <Text fontSize={[1,2]}>👯‍♀️ Clone the project to your own machine</Text>
+              <Text fontSize={[1,2]}>🌱 Commit changes to your own branch</Text>
+              <Text fontSize={[1,2]}>☝️ Push your work back up to your fork</Text>
+              <Text fontSize={[1,2]}>👀 Submit a Pull request and we will review your changes</Text>
+              </Box>
             </Box>
           </Container>
         </section>
+
       </main>
       <Footer/>
     </React.Fragment>

From cb65d0aa77ea6a0155234754fc3432049e0973b2 Mon Sep 17 00:00:00 2001
From: Ryan Cordell <ryan.cordell@consensys.net>
Date: Thu, 30 May 2019 11:45:30 +0100
Subject: [PATCH 5/5] Complete content structure

---
 components/header.js |  6 +-----
 pages/index.js       | 36 +++++++++++++++++++-----------------
 2 files changed, 20 insertions(+), 22 deletions(-)

diff --git a/components/header.js b/components/header.js
index 2878a7b..014097d 100644
--- a/components/header.js
+++ b/components/header.js
@@ -9,12 +9,8 @@ const Header = ({}) => (
   <header>
   <Heading.h1 fontSize={[5, 7]} pr={[3, 6]}>Hi, we're Rimble 👋</Heading.h1>
   <Heading.h2 fontSize={[2, 3]} my={3} pr={[3, 6]}>
-    A growing open-source library of components and guides for helping you make dApps everyone can use. We put out React components to help you <Link href="#build">build</Link> and guides to help you <Link href="#learn">learn.
-    </Link>
+    A growing open-source library of React components and guides for helping you design, build and ship dApps everyone can use.
   </Heading.h2>
-
-    <Button as="a" href="#getting-started" width={['100%', 'auto']} mr={[0, 3]} mb={[3, 0]}>Get Started</Button>
-    <Button.outline as="a" href='//consensys.github.io/rimble-ui/' target='_blank' rel='noopener' width={['100%', 'auto']}>Documentation</Button.outline>
   </header>
 );
 
diff --git a/pages/index.js b/pages/index.js
index 9afe49f..1bf3a50 100644
--- a/pages/index.js
+++ b/pages/index.js
@@ -75,16 +75,7 @@ const Home = () => (
             <Header/>
           </Container>
         </Masthead>
-        <section>
-          <Container>
-            <Box my={5}>
-              <Heading.h1 fontSize={[3, 4]}>Why Rimble?</Heading.h1>
-              <Hr/>
-              <Text.p fontSize={[1, 2]}>
-                Decentralized applications (dApps) require users to learn new patterns and they present new hurdles for designers and front-end developers. Rimble is here to make life easier for everyone. As an open source project, Rimble aims to create common dApp UX patterns, validated through user research, and built for developers.
-              </Text.p>
-            </Box>
-          </Container>
+        <section id="build">
               <Container>
                 <Box my={5}>
                   <Heading.h3 mt={3} fontSize={[3, 4]} >Get building</Heading.h3>
@@ -97,8 +88,8 @@ const Home = () => (
                       </Flex>
                       <Heading.h2 fontSize={[2, 3]} fontWeight={1}>Rimble UI</Heading.h2>
                       <Text.p>Clean, customisable building blocks for putting your interface together, including UI for Ethereum concepts.</Text.p>
-                      <Button.outline mt={3} mr={5} mb={5} href='https://github.com/ConsenSys/rimble-ui' target='_blank' rel='noopener'>Get the code</Button.outline>
-                      <Link mt={3} ml={5} mb={5} href='https://consensys.github.io/rimble-ui/?path=/story/getting-started--welcome' target='_blank' rel='noopener'>Read the docs</Link>
+                      <Button href='https://github.com/ConsenSys/rimble-ui' target='_blank' rel='noopener'>Get the code</Button>
+                      <Link href='https://consensys.github.io/rimble-ui/?path=/story/getting-started--welcome' target='_blank' rel='noopener'>Read the docs</Link>
                     </Box>
                     <Box flex={'1 1 auto'} width={[1, 1, 1/3]} mr={5}>
                       <Flex my={3}>
@@ -106,22 +97,33 @@ const Home = () => (
                       </Flex>
                       <Heading.h2 fontSize={[2, 3]} fontWeight={1}>Rimble Web3</Heading.h2>
                       <Text.p>Drop-in components that solve an Ethereum UX problem out of the box. Configure some inputs and you're ready.   </Text.p>
-                      <Button.outline mt={3} mr={5} href='https://github.com/ConsenSys/rimble-web3-components' target='_blank' rel='noopener'>Get the code</Button.outline>
-                      <Link disabled mt={3} ml={5} href='https://rimble-web3-components.netlify.com/?path=/story/connectionbanner--wrong-network-default' target='_blank' rel='noopener'>Docs coming soon!</Link>
+                      <Button href='https://github.com/ConsenSys/rimble-web3-components' target='_blank' rel='noopener'>Get the code</Button>
+                      <Link disabled mt={3} ml={5} href='https://rimble-web3-components.netlify.com/?path=/story/connectionbanner--wrong-network-default' target='_blank' rel='noopener'>Read the docs</Link>
                     </Box>
                     <Box flex={'1 1 auto'} width={[1, 1, 1/3]} mr={5}>
                       <Flex my={3}>
                         <ReactSVG src='static/svg/fig-3.svg' />
                       </Flex>
                       <Heading.h2 fontSize={[2, 3]} fontWeight={1}>dApp patterns</Heading.h2>
-                      <Text.p>Drop-in components that solve an Ethereum UX problem out of the box. Configure some inputs and you're ready.   </Text.p>
-                      <Button.outline mt={3} mr={5} href='https://github.com/ConsenSys/rimble-web3-components' target='_blank' rel='noopener'>Get the code</Button.outline>
-                      <Link disabled mt={3} ml={5} href='https://rimble-web3-components.netlify.com/?path=/story/connectionbanner--wrong-network-default' target='_blank' rel='noopener'>Docs coming soon!</Link>
+                      <Text.p>In-depth pieces on designing patterns and workflows that help your users navigate Ethereum.</Text.p>
+                      <Button href='https://github.com/ConsenSys/rimble-web3-components' target='_blank' rel='noopener'>Read the guides</Button>
                     </Box>
                   </Flex>
                 </Box>
               </Container>
         </section>
+        <section>
+        <Container>
+          <Box my={5}>
+            <Heading.h1 fontSize={[3, 4]}>See Rimble in action</Heading.h1>
+            <Hr/>
+            <Text.p fontSize={[1, 2]}>
+              We test out our components and hypotheses using our demo dApp.
+            </Text.p>
+            <Button>Try the demo</Button>
+          </Box>
+        </Container>
+        </section>
         <section>
           <Container>
             <Box my={5}>