From 286d23091a00de6b4fdafa4eccff57c9d3f5ebfd Mon Sep 17 00:00:00 2001
From: Ryan Cordell <ryan.cordell@consensys.net>
Date: Mon, 8 Apr 2019 17:11:06 +0100
Subject: [PATCH 1/6] npm -> yarn

---
 README.md | 10 +++++++---
 1 file changed, 7 insertions(+), 3 deletions(-)

diff --git a/README.md b/README.md
index ddc4bc9..b60c28f 100644
--- a/README.md
+++ b/README.md
@@ -59,11 +59,15 @@ Out of the box, we get:
 
 Read more about [Next's Routing](https://github.com/zeit/next.js#routing)
 
+## Install npm packages
+
+`yarn install`
+
 ## Available Scripts
 
 In the project directory, you can run:
 
-### `npm run dev`
+### `yarn dev`
 
 Runs the app in the development mode.<br>
 Open [http://localhost:3000](http://localhost:3000) to view it in the browser.
@@ -71,12 +75,12 @@ Open [http://localhost:3000](http://localhost:3000) to view it in the browser.
 The page will reload if you make edits.<br>
 You will also see any errors in the console.
 
-### `npm run build`
+### `yarn build`
 
 Builds the app for production to the `.next` folder.<br>
 It correctly bundles React in production mode and optimizes the build for the best performance.
 
-### `npm run start`
+### `yarn start`
 
 Starts the application in production mode.
 The application should be compiled with \`next build\` first.

From 84b6e8cd3e78cf99d8a4dc8d6785964b390b34e3 Mon Sep 17 00:00:00 2001
From: Ryan Cordell <ryan.cordell@consensys.net>
Date: Fri, 24 May 2019 11:52:45 +0100
Subject: [PATCH 2/6] New rimble site

---
 components/footer.js              |   2 +-
 components/header.js              |  10 +--
 components/nav.js                 |   2 +-
 components/navMenu.js             |   8 +--
 pages/_document.js                |   2 +-
 pages/index.js                    | 101 +++++++++++++++++-------------
 static/svg/baseline-menu-24px.svg |   2 +-
 static/svg/fig-4.svg              |  25 ++++++++
 static/svg/fig-bg.svg             |   4 +-
 9 files changed, 93 insertions(+), 63 deletions(-)
 create mode 100644 static/svg/fig-4.svg

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..29383eb 100644
--- a/components/header.js
+++ b/components/header.js
@@ -3,14 +3,14 @@ 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>
-
-    <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>
+    <Heading.h1 fontSize={[5, 7]} pr={[3, 6]}>Hi, we're Rimble 👋</Heading.h1>
+    <Heading.h2 fontSize={[2, 3]} my={3}>
+      We've got open-source guides, tools and React components to help you <Link href="#build">build</Link> dApps with great user experience. We solve UX problems common to all Ethereum products so you can focus on what's unique about your dApp. Everything we <Link href="#learn">learn</Link> goes in our guides.
+    </Heading.h2>
   </header>
 );
 
diff --git a/components/nav.js b/components/nav.js
index 2e859cd..d088c8a 100644
--- a/components/nav.js
+++ b/components/nav.js
@@ -51,7 +51,7 @@ const Nav = () => (
     <Container>
       <NavList display='flex' flex='row nowrap'>
         <li>
-          <Heading.h1 fontSize={[1, 2]} fontWeight={1} color={'mid-grey'}>Rimble Design System</Heading.h1>
+          <Heading.h1 fontSize={[1, 2]} fontWeight={1} color={'mid-grey'}>Rimble 🚀</Heading.h1>
         </li>
         <NavMenu></NavMenu>
       </NavList>
diff --git a/components/navMenu.js b/components/navMenu.js
index 19740f1..ed21d76 100644
--- a/components/navMenu.js
+++ b/components/navMenu.js
@@ -100,13 +100,7 @@ class Menu extends Component {
         <StyledList hidden={!this.state.isOpen} >
           <ul>
             <li>
-              <Text fontSize={1} fontWeight={1} color={'mid-grey'}>v0.6.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>
+              <Link href='https://consensys.github.io/rimble-app-demo/' target='_blank' rel='noopener'>Try demo</Link>
             </li>
           </ul>
         </StyledList>
diff --git a/pages/_document.js b/pages/_document.js
index 4a7d39e..69f8887 100644
--- a/pages/_document.js
+++ b/pages/_document.js
@@ -13,7 +13,7 @@ export default class MyDocument extends Document {
     return (
       <html lang='en'>
         <Head>
-          <title>Rimble Design System</title>
+          <title>Rimble component library</title>
           {this.props.styleTags}
         </Head>
         <body>
diff --git a/pages/index.js b/pages/index.js
index 15e6c7a..6ea9e4b 100644
--- a/pages/index.js
+++ b/pages/index.js
@@ -7,6 +7,7 @@ import ThemeProvider from '../components/ThemeProvider'
 import Typography from '../components/typography'
 import Container from '../components/Container'
 import CodeBlock from '../components/CodeBlock'
+import Button from '../components/Button'
 import Heading from '../components/Heading'
 import Text from '../components/Text'
 import Hr from '../components/Hr'
@@ -47,89 +48,99 @@ const Masthead = styled(Flex)`
   ${backgroundImage}
 `
 
-const exampleCode = `
-import React, { Component } from 'react'
 
-import { Button } from 'rimble-ui'
-
-class Example extends Component {
-  render () {
-    return (
-      <Button size={'medium'}>
-        Click me!
-      </Button>
-    )
-  }
-}
-`
 
 const Home = () => (
   <ThemeProvider>
     <React.Fragment>
       <Typography />
-      <Head title="Rimble Design System" />
+      <Head title="Rimble – Open-source components and guides for building amazing dApps" />
       <Nav/>
       <main role="main">
-        <Masthead backgroundImage={['none', 'none', 'url("/static/svg/fig-bg.svg")']} >
+        <Masthead>
           <Container>
             <Header/>
           </Container>
         </Masthead>
-        <section>
+        
+
+
+
+        <section id="build">
           <Container>
             <Box my={5}>
-              <Heading.h1 fontSize={[3, 4]}>Why Rimble?</Heading.h1>
+              <Heading.h3 mt={3} fontSize={[1, 2]} >👷‍♀️ Build</Heading.h3>
               <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>
-
+              <Text.p>dApp component libraries</Text.p>
               <Flex mt={4} width={1} flexDirection={['column', 'row']}>
-                <Box flex={'1 1 auto'} width={[1, 1/3]} mr={5}>
+                <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}>Flexible</Heading.h2>
-                  <Text.p>Your tech stack and workflow are yours to decide. We impose as few constraints as possible. </Text.p>
+                  <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/3]} mr={5}>
+                <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}>Research-driven</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>
-                  <Text.p>Blockchain is confusing. We are a dedicated team, invested in being understandable and approachable.</Text.p>
+                  <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>
-            <Box my={5}>
-              {/* body section */}
-              <Heading.h1 id='getting-started' fontSize={[3, 4]}>Getting Started</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} />
+          <Heading.h3 fontSize={[1, 2]} id="learn">🤓 Learn</Heading.h3>
+
+          <Text.p>Research-led guides for creating user-friendly blockchain experiences</Text.p>
+          <Hr/>
+          <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-3.svg' />
+              </Flex>
+              <Heading.h2 fontSize={[2, 3]} fontWeight={1}>UX</Heading.h2>
+              <Text.p>In-depth pieces on designing patterns that help your users navigate Ethereum.</Text.p>
+              <Link disabled mt={3} ml={5} href='#' target='_blank' rel='noopener'>Guide coming soon!</Link>
+            </Box>
+            <Box flex={'1 1 auto'} width={[1, 1/3]} mr={5}>
+              <Flex my={3}>
+                <ReactSVG src='static/svg/fig-4.svg' />
+              </Flex>
+              <Heading.h2 fontSize={[2, 3]} fontWeight={1}>Content</Heading.h2>
+              <Text.p>Tips on designing dApps that talk sense – how to design the words in your dApp. </Text.p>
+              <Link disabled mt={3} ml={5} href='#' target='_blank' rel='noopener'>Guide coming soon!</Link>
             </Box>
+            <Box flex={'1 1 auto'} width={[1, 1/3]} mr={5}>
+              <Flex my={3}>
+                <ReactSVG src='static/svg/fig-3.svg' />
+              </Flex>
+              <Heading.h2 fontSize={[2, 3]} fontWeight={1}>Design</Heading.h2>
+              <Text.p>Guidelines for styling Rimble components to fit your product's brand.</Text.p>
+              <Link disabled mt={3} ml={5} href='#' target='_blank' rel='noopener'>Guide coming soon!</Link>
+            </Box>
+          </Flex>
+
           </Container>
         </section>
+
+
+
         <section>
           <Container>
             <Box my={5}>
-              <Heading.h1 fontSize={[3, 4]}>Made by ConsenSys Design</Heading.h1>
+              <Heading.h1 fontSize={[3, 4]}>Contribute to Rimble</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.
+                 Want to help us define the roadmap? Submit feedback or feature requests on our GitHub pages.
               </Text.p>
             </Box>
           </Container>
diff --git a/static/svg/baseline-menu-24px.svg b/static/svg/baseline-menu-24px.svg
index fd6e253..14f99cd 100644
--- a/static/svg/baseline-menu-24px.svg
+++ b/static/svg/baseline-menu-24px.svg
@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M0 0h24v24H0z" fill="none"/><path d="M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z"/></svg>
\ No newline at end of file
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M0 0h24v24H0z" fill="none"/><path d="M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z"/></svg>
diff --git a/static/svg/fig-4.svg b/static/svg/fig-4.svg
new file mode 100644
index 0000000..a2cf804
--- /dev/null
+++ b/static/svg/fig-4.svg
@@ -0,0 +1,25 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="72px" height="72px" viewBox="0 0 72 72" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 52.2 (67145) - http://www.bohemiancoding.com/sketch -->
+    <title>Group 7</title>
+    <desc>Created with Sketch.</desc>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Style-1-Copy-5" transform="translate(-880.000000, -997.000000)" fill-rule="nonzero">
+            <g id="Group-7" transform="translate(880.000000, 997.000000)">
+                <g id="Group-4">
+                    <polygon id="Triangle-Copy-132" fill="#28C081" opacity="0.830301339" transform="translate(18.000000, 54.000000) scale(-1, 1) translate(-18.000000, -54.000000) " points="-1.26750944e-14 72 -3.90002904e-15 36 36 36"></polygon>
+                    <polygon id="Triangle-Copy-133" fill="#28C081" points="36 72 36 36 72 36"></polygon>
+                    <polygon id="Triangle-Copy-134" fill="#28C081" opacity="0.772823661" transform="translate(54.000000, 18.000000) scale(-1, -1) translate(-54.000000, -18.000000) " points="36 36 36 -1.42108547e-14 72 -5.35080135e-15"></polygon>
+                    <polygon id="Triangle-Copy-135" fill="#28C081" transform="translate(18.000000, 18.000000) scale(1, -1) translate(-18.000000, -18.000000) " points="-1.26750944e-14 36 -3.90002904e-15 -1.42108547e-14 36 -5.35080135e-15"></polygon>
+                    <polygon id="Triangle-Copy-138" fill="#28C081" opacity="0.823214286" transform="translate(18.000000, 18.000000) scale(-1, 1) translate(-18.000000, -18.000000) " points="-1.26750944e-14 36 -3.90002904e-15 -1.42108547e-14 36 -5.35080135e-15"></polygon>
+                    <polygon id="Triangle-Copy-139" fill="#28C081" points="36 14 22 0 36 0"></polygon>
+                    <polygon id="Triangle-Copy-142" fill="#FFFFFF" transform="translate(7.000000, 7.000000) scale(-1, 1) rotate(-270.000000) translate(-7.000000, -7.000000) " points="0 14 3.41252541e-15 0 14 3.44557631e-15"></polygon>
+                    <polygon id="Triangle-Copy-146" fill="#28C081" opacity="0.823214286" points="36 36 36 -1.42108547e-14 72 -5.35080135e-15"></polygon>
+                    <polygon id="Triangle-Copy-147" fill="#28C081" points="36 14 36 0 50 3.44557631e-15"></polygon>
+                    <polygon id="Triangle-Copy-149" fill="#28C081" opacity="0.726339286" points="36 47 36 36 47 36"></polygon>
+                    <polygon id="Triangle-Copy-148" fill="#FFFFFF" transform="translate(65.000000, 7.000000) rotate(-270.000000) translate(-65.000000, -7.000000) " points="58 14 58 0 72 3.44557631e-15"></polygon>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>
diff --git a/static/svg/fig-bg.svg b/static/svg/fig-bg.svg
index 0af0e01..bfb16c3 100644
--- a/static/svg/fig-bg.svg
+++ b/static/svg/fig-bg.svg
@@ -1,5 +1,5 @@
 <?xml version="1.0" encoding="UTF-8"?>
-<svg width="718px" height="640px" viewBox="0 0 718 640" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+<svg width="718px" height="40px" viewBox="0 0 718 640" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
     <!-- Generator: Sketch 51.3 (57544) - http://www.bohemiancoding.com/sketch -->
     <title>Group 9</title>
     <desc>Created with Sketch.</desc>
@@ -23,4 +23,4 @@
             </g>
         </g>
     </g>
-</svg>
\ No newline at end of file
+</svg>

From a77ed696c08666aabd2bbace7a7114a6812fae39 Mon Sep 17 00:00:00 2001
From: Ryan Cordell <ryan.cordell@consensys.net>
Date: Fri, 24 May 2019 11:54:17 +0100
Subject: [PATCH 3/6] re-instated background image

---
 pages/index.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/pages/index.js b/pages/index.js
index 6ea9e4b..c02f7d2 100644
--- a/pages/index.js
+++ b/pages/index.js
@@ -57,12 +57,12 @@ const Home = () => (
       <Head title="Rimble – Open-source components and guides for building amazing dApps" />
       <Nav/>
       <main role="main">
-        <Masthead>
+        <Masthead backgroundImage={['none', 'none', 'url("/static/svg/fig-bg.svg")']} >
           <Container>
             <Header/>
           </Container>
         </Masthead>
-        
+
 
 
 

From f4b45ee14205a23b654c2d2afe8cc278488aabe5 Mon Sep 17 00:00:00 2001
From: Ryan Cordell <ryan.cordell@consensys.net>
Date: Fri, 24 May 2019 13:04:35 +0100
Subject: [PATCH 4/6] More copy changes

---
 components/header.js  | 6 ++++--
 pages/index.js        | 4 ++--
 static/svg/fig-bg.svg | 2 +-
 3 files changed, 7 insertions(+), 5 deletions(-)

diff --git a/components/header.js b/components/header.js
index 29383eb..b2e80e8 100644
--- a/components/header.js
+++ b/components/header.js
@@ -8,8 +8,10 @@ import Link from './Link'
 const Header = ({}) => (
   <header>
     <Heading.h1 fontSize={[5, 7]} pr={[3, 6]}>Hi, we're Rimble 👋</Heading.h1>
-    <Heading.h2 fontSize={[2, 3]} my={3}>
-      We've got open-source guides, tools and React components to help you <Link href="#build">build</Link> dApps with great user experience. We solve UX problems common to all Ethereum products so you can focus on what's unique about your dApp. Everything we <Link href="#learn">learn</Link> goes in our guides.
+    <Heading.h2 fontSize={[2, 3]} my={3} pr={[3, 6]}>
+      A growing open-source library of components and guides for helping you build 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>
   </header>
 );
diff --git a/pages/index.js b/pages/index.js
index c02f7d2..df60f0d 100644
--- a/pages/index.js
+++ b/pages/index.js
@@ -57,7 +57,7 @@ const Home = () => (
       <Head title="Rimble – Open-source components and guides for building amazing dApps" />
       <Nav/>
       <main role="main">
-        <Masthead backgroundImage={['none', 'none', 'url("/static/svg/fig-bg.svg")']} >
+        <Masthead backgroundImage={['url("/static/svg/fig-1.svg")']} >
           <Container>
             <Header/>
           </Container>
@@ -71,7 +71,7 @@ const Home = () => (
             <Box my={5}>
               <Heading.h3 mt={3} fontSize={[1, 2]} >👷‍♀️ Build</Heading.h3>
               <Hr/>
-              <Text.p>dApp component libraries</Text.p>
+              <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}>
diff --git a/static/svg/fig-bg.svg b/static/svg/fig-bg.svg
index bfb16c3..a6cc927 100644
--- a/static/svg/fig-bg.svg
+++ b/static/svg/fig-bg.svg
@@ -1,5 +1,5 @@
 <?xml version="1.0" encoding="UTF-8"?>
-<svg width="718px" height="40px" viewBox="0 0 718 640" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+<svg width="718px" height="640px" viewBox="0 0 718 640" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
     <!-- Generator: Sketch 51.3 (57544) - http://www.bohemiancoding.com/sketch -->
     <title>Group 9</title>
     <desc>Created with Sketch.</desc>

From b2123586e0e8f265588ba6514e22287d4b7ad4ff Mon Sep 17 00:00:00 2001
From: Ryan Cordell <ryan.cordell@consensys.net>
Date: Fri, 24 May 2019 13:30:04 +0100
Subject: [PATCH 5/6] Playing with a rimble benefits section

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

diff --git a/components/header.js b/components/header.js
index b2e80e8..aadfae4 100644
--- a/components/header.js
+++ b/components/header.js
@@ -9,9 +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 build 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.
+      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>
   </header>
 );
diff --git a/pages/index.js b/pages/index.js
index df60f0d..f76fe74 100644
--- a/pages/index.js
+++ b/pages/index.js
@@ -133,6 +133,33 @@ const Home = () => (
         </section>
 
 
+        <section>
+          <Container>
+            <Box my={5}>
+              <Heading.h1 fontSize={[3, 4]}>Why Rimble?</Heading.h1>
+              <Hr/>
+              <Flex mt={4} width={1} flexDirection={['column', 'row']}>
+                <Box alignItems="center" justifyContent="center" flex={'1 1 auto'} width={[1, 1/2]} mr={5}>
+                    <ReactSVG src='static/svg/fig-3.svg' />
+                </Box>
+                <Box flex={'1 1 auto'} width={[1, 1/2]} mr={5}>
+                  <Heading.h2 fontSize={[2, 3]} fontWeight={1}>Solve the problems you care about, not the blockchain ones</Heading.h2>
+                  <Text.p>Don't let blockchain usability issues get in the way of your vision.</Text.p>
+                </Box>
+              </Flex>
+              <Flex mt={4} width={1} flexDirection={['column', 'row']}>
+                <Box flex={'1 1 auto'} width={[1, 1/2]} mr={5}>
+                <Heading.h2 fontSize={[2, 3]} fontWeight={1}>Got more ideas than time?</Heading.h2>
+                <Text.p>Rimble helps those with more ideas than time – our components include functionality out of the box that we've already designed, tested and iterated on. </Text.p>
+                </Box>
+                <Box flex={'1 1 auto'} width={[1, 1/2]} mr={5}>
+                    <ReactSVG src='static/svg/fig-3.svg' />
+                </Box>
+              </Flex>
+            </Box>
+          </Container>
+        </section>
+
 
         <section>
           <Container>

From 61b43e600d017335cfaf2859ed093bdc37a461a3 Mon Sep 17 00:00:00 2001
From: Ryan Cordell <ryan.cordell@consensys.net>
Date: Fri, 24 May 2019 13:33:31 +0100
Subject: [PATCH 6/6] Titles updated

---
 pages/index.js | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/pages/index.js b/pages/index.js
index f76fe74..92e667b 100644
--- a/pages/index.js
+++ b/pages/index.js
@@ -69,7 +69,7 @@ const Home = () => (
         <section id="build">
           <Container>
             <Box my={5}>
-              <Heading.h3 mt={3} fontSize={[1, 2]} >👷‍♀️ Build</Heading.h3>
+              <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']}>
@@ -98,7 +98,7 @@ const Home = () => (
 
         <section>
           <Container>
-          <Heading.h3 fontSize={[1, 2]} id="learn">🤓 Learn</Heading.h3>
+          <Heading.h3 fontSize={[3, 4]} id="learn">Learn 🤓</Heading.h3>
 
           <Text.p>Research-led guides for creating user-friendly blockchain experiences</Text.p>
           <Hr/>
@@ -136,7 +136,7 @@ const Home = () => (
         <section>
           <Container>
             <Box my={5}>
-              <Heading.h1 fontSize={[3, 4]}>Why Rimble?</Heading.h1>
+              <Heading.h1 fontSize={[3, 4]}>Why Rimble? 🤔</Heading.h1>
               <Hr/>
               <Flex mt={4} width={1} flexDirection={['column', 'row']}>
                 <Box alignItems="center" justifyContent="center" flex={'1 1 auto'} width={[1, 1/2]} mr={5}>
@@ -164,7 +164,7 @@ const Home = () => (
         <section>
           <Container>
             <Box my={5}>
-              <Heading.h1 fontSize={[3, 4]}>Contribute to Rimble</Heading.h1>
+              <Heading.h1 fontSize={[3, 4]}>Contribute to Rimble 🏅</Heading.h1>
               <Hr/>
               <Text.p>
                  Want to help us define the roadmap? Submit feedback or feature requests on our GitHub pages.