adding the Index page (#266)

unlock-app/package.json

@@ -61,7 +61,7 @@
     "test": "react-scripts test --env=jsdom",
     "eject": "react-scripts eject",
     "lint": "./node_modules/eslint/bin/eslint.js .",
-    "storybook": "start-storybook -p 9001 -c .storybook",
+    "storybook": "start-storybook -p 9001 -c .storybook -s public",
     "svg-2-components": "./node_modules/@svgr/cli/bin/svgr --no-dimensions -d src/components/interface/icons/ public/images/icons/"
   }
 }

unlock-app/src/components/interface/Layout.js

@@ -46,6 +46,7 @@ const Right = styled.div`
 `
 
 const Content = styled.div`
+  color: var(--darkgrey);
   display: grid;
-  row-gap: 20px;
+  row-gap: 24px;
 `

unlock-app/src/components/pages/About.js

@@ -1,7 +1,7 @@
 import styled from 'styled-components'
 import React, { PureComponent } from 'react'
 import Layout from '../interface/Layout'
-import { Section, Title, Headline, SubTitle, CallToAction } from './Components'
+import { Section, Title, Headline, SubTitle, CallToAction, ThreeColumns, Column, TwoColumns } from './Components'
 
 export default class About extends PureComponent {
   render() {
@@ -53,17 +53,6 @@ export default class About extends PureComponent {
   }
 }
 
-const TwoColumns = styled.div`
-  display: grid;
-  grid-template-columns: repeat(2, 1fr);
-  grid-gap: 42px;
-  font-family: 'IBM Plex Serif', serif;
-  font-weight: 300;
-  fonts-size: 22px;
-  line-height: 1.5;
-  color: var(--darkgrey);
-`
-
 const News = styled.div`
   display: grid;
   grid-template-columns: 1fr 3fr;
@@ -74,19 +63,3 @@ const News = styled.div`
   line-height: 1.5;
   color: var(--darkgrey);
 `
-
-const ThreeColumns = styled.div`
-  display: grid;
-  grid-template-columns: repeat(3, 1fr);
-  grid-gap: 24px;
-  font-family: 'IBM Plex Serif', serif;
-  font-weight: 300;
-  fonts-size: 22px;
-  line-height: 1.5;
-  color: var(--darkgrey);
-  align-items: start;
-  justify-content: center;
-`
-
-const Column = styled.div`
-`

unlock-app/src/components/pages/Components.js

@@ -4,7 +4,6 @@ export const Section = styled.section.attrs({
   id: props => props.anchor,
 })`
   margin-top: 30px;
-  color: var(--darkgrey);
 
   &:before {
     display: block;
@@ -27,6 +26,7 @@ export const Headline = styled.p`
   font-size: 32px;
   font-family: 'IBM Plex Serif', serif;
   font-weight: 300;
+  margin-top: 0px
 `
 
 export const CallToAction = styled.div`
@@ -62,3 +62,33 @@ export const ListItem = styled.li`
   font-size: 16px;
   font-weight: 300;
 `
+
+export const TwoColumns = styled.div`
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  grid-gap: 42px;
+  font-family: 'IBM Plex Serif', serif;
+  font-weight: 300;
+  fonts-size: 22px;
+  line-height: 1.5;
+  color: var(--darkgrey);
+`
+
+export const ThreeColumns = styled.div`
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  grid-gap: 24px;
+  font-family: 'IBM Plex Serif', serif;
+  font-weight: 300;
+  fonts-size: 22px;
+  line-height: 1.5;
+  color: var(--darkgrey);
+  align-items: start;
+  justify-content: center;
+  text-align center;
+`
+
+export const Column = styled.div`
+  display: grid;
+  justify-items: center;
+`

unlock-app/src/components/pages/Index.js

@@ -0,0 +1,102 @@
+import styled from 'styled-components'
+import React, { PureComponent } from 'react'
+import Layout from '../interface/Layout'
+import { Section, Headline, SubTitle, CallToAction, ThreeColumns, Column } from './Components'
+
+export default class Index extends PureComponent {
+  render() {
+    return (
+      <Layout forContent={true}>
+        <Hero>The Web&#39;s new business model</Hero>
+        <Headline>
+          Unlock is a protocol which enables creators to monetize their content with a few lines of code in a fully decentralized way.
+        </Headline>
+
+        <Action>
+          <DashboardButton>Go to Your Dashboard</DashboardButton>
+          <ButtonLabel>Requires a browser with an Ethereum wallet</ButtonLabel>
+        </Action>
+
+        <ThreeColumns>
+          <Column>
+            <SubTitle>No More Middlemen</SubTitle>
+            <ImageWithHover base='simple' />
+            <Paragraph>
+              There are no middlemen, no fees and no gatekeeper who could shut you down or control your distribution.
+            </Paragraph>
+          </Column>
+          <Column>
+            <SubTitle>Simple Integration</SubTitle>
+            <ImageWithHover base='code' />
+            <Paragraph>
+              Unlock provides a simple snippet of code to integrate easily on your website, as well as several other integration tools...
+            </Paragraph>
+          </Column>
+          <Column>
+            <SubTitle>And Much More</SubTitle>
+            <ImageWithHover base='more' />
+            <Paragraph>
+              For example, Unlock comes with a points system to reward your most loyal fans when they share your content their friends!
+            </Paragraph>
+          </Column>
+        </ThreeColumns>
+
+        <Section>
+          <CallToAction>Check out our open source code on <a href="https://github.com/unlock-protocol/unlock">GitHub</a>, come work <a href="/jobs">with us</a> or simply <a href="mailto:hello@unlock-protocol.com">get in touch</a>.</CallToAction>
+        </Section>
+
+      </Layout>
+    )
+  }
+}
+
+const ImageWithHover = styled.div`
+  border-style: none;
+  background: url(${props => (`/images/pages/png/${props.base}.png`)}) no-repeat center/contain;
+  width: 300px;
+  height: 200px;
+  &:hover {
+    background: url(${props => (`/images/pages/png/${props.base}-hover.png`)}) no-repeat center/contain;
+  }
+`
+
+const Hero = styled.h1`
+  font-size: 36px;
+  margin-top: 30px;
+  margin-bottom: 0px;
+  color: var(--darkgrey);
+`
+
+const Action = styled.div`
+  display: grid;
+  justify-items: center;
+  grid-template-columns: 25% 1fr 25%;
+  grid-gap: 16px;
+  margin-bottom: 50px;
+`
+
+const DashboardButton = styled.button`
+  background-color: var(--green);
+  border: none;
+  font-size: 16px;
+  padding: 20px;
+  color: var(--darkgrey);
+  font-family: "IBM Plex Sans", sans-serif;
+  border-radius: 4px;
+  grid-column: 2;
+  justify-self: stretch;
+
+`
+
+const ButtonLabel = styled.small`
+  grid-column: 2;
+  font-size: 12px;
+  font-weight: 200;
+  font-family: 'IBM Plex Mono', 'Courier New', Serif;
+`
+
+const Paragraph =styled.p`
+  font-family: 'IBM Plex Serif', serif;
+  font-weight: 300;
+  font-size: 20px;
+`

unlock-app/src/stories/pages.stories.js

@@ -1,9 +1,15 @@
 import React from 'react'
 import { storiesOf } from '@storybook/react'
+import Index from '../components/pages/Index'
 import About from '../components/pages/About'
 import Jobs from '../components/pages/Jobs'
 
 storiesOf('Content pages')
+  .add('the Index page', () => {
+    return (
+      <Index />
+    )
+  })
   .add('the About page', () => {
     return (
       <About />