Adding About page (#258)

* updated svg for word mark logo

* adding about pages

unlock-app/.storybook/head.html

@@ -6,12 +6,15 @@
 
 @import url('https://fonts.googleapis.com/css?family=IBM+Plex+Sans:400,500,600,700');
 @import url('https://fonts.googleapis.com/css?family=IBM+Plex+Mono:200,500');
+@import url('https://fonts.googleapis.com/css?family=IBM+Plex+Serif:300,400');
 
 :root {
   --red: #ed663a;
   --offwhite: #f6f6f6;
   --lightgrey: #eeeeee;
   --grey: #a6a6a6;
+  --dimgrey: #6a6a6a;
+  --silver: #d8d8d8;
   --darkgrey: #4a4a4a;
   --slate: #333333;
   --link: #4d8be8;
@@ -33,4 +36,15 @@
   font-weight: 500;
 }
 
+
+a {
+  text-decoration: none;
+  color: var(--link);
+}
+
+a:visited {
+  color: var(--link);
+}
+
+
 </style>

unlock-app/public/template.css

@@ -1,5 +1,6 @@
 @import url('https://fonts.googleapis.com/css?family=IBM+Plex+Sans:400,500,600,700');
 @import url('https://fonts.googleapis.com/css?family=IBM+Plex+Mono:200,300,400');
+@import url('https://fonts.googleapis.com/css?family=IBM+Plex+Serif');
 
 :root {
   --red: #ed663a;

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

@@ -10,9 +10,7 @@ export default function Header({ forContent, title }) {
         <h1>{title}</h1>
       }
       {!!forContent &&
-        <Logo>
-          <Icons.UnlockWordMark />
-        </Logo>
+        <Icons.UnlockWordMark height={'28px'} />
       }
       <Button><Icons.About fill={'white'} /></Button>
       <Button><Icons.Jobs fill={'white'} /></Button>
@@ -32,14 +30,9 @@ const TopHeader = styled.header`
   grid-template-columns: 1fr repeat(3, 24px);
   grid-auto-flow: column;
   align-items: center;
+  height: 70px;
 `
 
-const Logo = styled.span`
-  font-size: 6em;
-  display: grid;
-  align-items: center;
-  `
-
 const Button = styled.a`
   background-color: var(--grey);
   border-radius: 50%;

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

@@ -0,0 +1,129 @@
+import styled from 'styled-components'
+import React, { PureComponent } from 'react'
+import Layout from '../interface/Layout'
+
+export default class About extends PureComponent {
+  render() {
+    return (
+      <Layout forContent={true}>
+        <Section>
+          <Title>About</Title>
+          <Headline>
+            We’re a small, smart and nimble team of coders and designers with a vision for a better and fairer way to monetize content.
+          </Headline>
+          <TwoColumns>
+            <Column>At Unlock, we believe the web needs a new business model. We believe the decentralization promise of the web cannot be achieved if economic incentives are not aligned between consumers and creators. For this, we&#39;re building a protocol which lets anyone restrict access to their creations and for consumers to earn points when they discover and promote the best creations.</Column>
+            <Column>The Unlock Protocol can be applied to publishing (paywalls), newsletters, software licenses or even the physical world, such as transportation systems. The web revolutionized all of these areas, Unlock will make them economically viable.</Column>
+          </TwoColumns>
+        </Section>
+
+        <Section>
+          <Title>Team</Title>
+          <ThreeColumns>
+            <Column>
+              <SubTitle>Julien Genestoux</SubTitle>
+              <p>I am an entrepreneur and a software engineer. I am a vocal web advocate who co-authored the W3C WebSub protocol. I sold my previous company, Superfeedr, an RSS feed API, to Medium. Born in France, I currently live in Brooklyn with my wife and our two young kids.</p>
+            </Column>
+            <Column>
+              <SubTitle>Ben Werdmuller</SubTitle>
+              <p>I work at the intersection of technology, media, and democracy. I co-founded Elgg and Known, worked on Medium and Latakoo, and invested in innovative media startups to support a stronger democracy at Matter.</p>
+            </Column>
+            <Column>
+              <SubTitle>Sascha Mombartz</SubTitle>
+              <p>I am an artist and designer from no particular place. My work – multidisciplinary, spanning digital to physical – deals with the interaction between people and objects and questions our relationship with progress.</p>
+            </Column>
+          </ThreeColumns>
+        </Section>
+
+        <Section>
+          <Title>News</Title>
+          <News>
+            <p>July 2018</p>
+            <p>We received $1.7M in funding from the following investors: General Catalyst and by Cherry Ventures and with participations from Consensys Ventures, Kindred Ventures, Betaworks, 122 West, La Famiglia, Coinbase Ventures and a group of stellar business angels. <a href="https://medium.com/unlock-protocol/unlocking-some-exciting-news-5ad0f3889375">More...</a> </p>
+          </News>
+        </Section>
+
+        <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 Section = styled.section`
+  margin-top: 30px;
+  &:before {
+    display: block;
+    content: "";
+    width: 87px;
+    height: 3px;
+    background-color: var(--silver);
+    margin-bottom: 16px;
+  }
+`
+
+const Title = styled.h1`
+  margin-top: 0px;
+  color: var(--dimgrey);
+  font-size: 36px;
+  font-weight: 700;
+`
+
+const Headline = styled.p`
+  font-size: 32px;
+  color: var(--darkgrey);
+  font-family: 'IBM Plex Serif', serif;
+  font-weight: 300;
+`
+
+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;
+  grid-gap: 42px;
+  font-family: 'IBM Plex Serif', serif;
+  font-weight: 300;
+  fonts-size: 22px;
+  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 SubTitle = styled.h2`
+  font-family: 'IBM Plex Sans' ,'Helvetica Neue', Arial, sans-serif;
+  font-weight: 500;
+  font-size: 24px;
+`
+
+const Column = styled.div`
+`
+const CallToAction = styled.div`
+  font-size: 32px;
+  color: var(--darkgrey);
+  font-family: 'IBM Plex Serif', serif;
+  font-weight: 300;
+`

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

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