Merge pull request #413 from jorilallo/home

Improved Homepage

server/pages/Home.js

@@ -4,6 +4,8 @@ import styled from 'styled-components';
 import Grid from 'styled-components-grid';
 import Hero from './components/Hero';
 import SignupButton from './components/SignupButton';
+import { developers, githubUrl } from '../utils/routeHelpers';
+import { color } from '../../shared/styles/constants';
 
 function Home() {
   return (
@@ -12,17 +14,126 @@ function Home() {
         <Hero>
           <h1>Your team’s knowledge base</h1>
           <HeroText>
-            Documentation, meeting notes, playbooks, onboarding, work logs, brainstorming, decisions, & more…
+            Documentation, meeting notes, playbooks, onboarding, work logs,
+            brainstorming, decisions, & more…
           </HeroText>
           <p>
             <SignupButton />
           </p>
         </Hero>
+        <Features>
+          <Grid.Unit size={{ desktop: 1 / 3, tablet: 1 / 2 }}>
+            <Feature>
+              <h2>Blazing Fast</h2>
+              <p>
+                Outline is fast, really fast. We’ve worked hard to ensure
+                millisecond response times, documents load instantly, search is
+                speedy and navigating the UI is delightful.
+              </p>
+            </Feature>
+            <Feature>
+              <h2># Markdown Support</h2>
+              <p>
+                Outline stores all documents in plain Markdown. Shortcuts are
+                also built right into the editor so you can easily format using{' '}
+                <strong>**markdown syntax**</strong> if you like.
+              </p>
+            </Feature>
+          </Grid.Unit>
+          <Feature size={{ desktop: 2 / 3, tablet: 1 / 2 }}>
+            <Screenshot
+              srcset="screenshot.png, screenshot@2x.png 2x"
+              src="/screenshot@2x.png"
+              alt="Outline Screenshot"
+            />
+          </Feature>
+        </Features>
+        <Highlights id="features">
+          <Feature size={{ desktop: 1 / 3 }}>
+            <h2>Open Source</h2>
+            <p>
+              Outline is open source, so the community can help improve it too.
+              You get new features, interface improvements, and bug fixes for
+              free.
+            </p>
+            <p>
+              <a href={githubUrl()}>GitHub</a>
+            </p>
+          </Feature>
+          <Feature size={{ desktop: 1 / 3 }}>
+            <h2>Integrations &amp; API</h2>
+            <p>
+              All of Outline’s functionality is available through the API. The
+              editor itself is built on React and we’re working on making it
+              pluggable and extensible.
+            </p>
+            <p>
+              <a href={developers()}>Documentation</a>
+            </p>
+          </Feature>
+          <Feature size={{ desktop: 1 / 3 }}>
+            <h2>Powerful Search</h2>
+            <p>
+              Outline includes a super fast search that’s the best way to find
+              what you’re looking for once your knowledge base starts to grow in
+              size.
+            </p>
+          </Feature>
+        </Highlights>
+        <Footer>
+          <h2>Create an account</h2>
+          <p>
+            On the same page as us? Create a beta account to give Outline a try.
+          </p>
+          <p>
+            <SignupButton />
+          </p>
+        </Footer>
       </Grid>
     </span>
   );
 }
 
+const Screenshot = styled.img`
+  width: 150%;
+  box-shadow: 0 0 80px 0 rgba(124, 124, 124, 0.5),
+    0 0 10px 0 rgba(237, 237, 237, 0.5);
+  border-radius: 5px;
+`;
+
+const Highlights = styled(Grid)`
+  background: ${color.yellow};
+  margin: 0 1em;
+  padding: 0 1em;
+`;
+
+const Features = styled(Grid)`
+  padding: 0 2em;
+  overflow: hidden;
+`;
+
+const Feature = styled(Grid.Unit)`
+  padding: 4em 3em;
+
+  h2 {
+    margin-top: 0;
+  }
+
+  a {
+    color: ${color.black};
+    text-decoration: underline;
+    text-transform: uppercase;
+    font-weight: 500;
+    font-size: 14px;
+  }
+`;
+
+const Footer = styled.div`
+  text-align: center;
+  width: 100%;
+  padding: 6em;
+`;
+
 const HeroText = styled.p`
   font-size: 18px;
   max-width: 600px;

server/pages/components/Hero.js

@@ -3,7 +3,8 @@ import styled from 'styled-components';
 
 const Hero = styled.div`
   width: 100%;
-  padding: 6em 2em 8em;
+  height: 70vh;
+  padding: 6em 2em 0;
   text-align: center;
 
   h1 {

server/pages/components/Navigation.js

@@ -1,6 +1,7 @@
 // @flow
 import React from 'react';
 import styled from 'styled-components';
+import { signin, developers, blogUrl } from '../../utils/routeHelpers';
 import { color } from '../../../shared/styles/constants';
 
 function Navigation() {
@@ -8,7 +9,18 @@ function Navigation() {
     <Nav>
       <Brand href="/">Outline</Brand>
       <Menu>
-        <MenuItem><a href="/auth/slack">Sign In</a></MenuItem>
+        <MenuItem>
+          <a href="/#features">Features</a>
+        </MenuItem>
+        <MenuItem>
+          <a href={blogUrl()}>Blog</a>
+        </MenuItem>
+        <MenuItem>
+          <a href={developers()}>API</a>
+        </MenuItem>
+        <MenuItem>
+          <a href={signin()}>Sign In</a>
+        </MenuItem>
       </Menu>
     </Nav>
   );
@@ -31,6 +43,15 @@ const MenuItem = styled.li`
   margin: 0 0 0 40px;
   font-size: 15px;
   font-weight: 500;
+
+  a {
+    color: ${color.slate};
+  }
+
+  a:hover {
+    color: ${color.slateDark};
+    text-decoration: underline;
+  }
 `;
 
 const Brand = styled.a`

server/pages/components/SignupButton.js

@@ -1,19 +1,31 @@
 // @flow
 import React from 'react';
 import styled from 'styled-components';
+import { signin } from '../../utils/routeHelpers';
+import SlackLogo from '../../../shared/components/SlackLogo';
 import { color } from '../../../shared/styles/constants';
 
 const SlackSignin = () => {
-  return <Button href="/auth/slack">Sign In with Slack</Button>;
+  return (
+    <Button href={signin()}>
+      <SlackLogo />
+      <Spacer>Sign In with Slack</Spacer>
+    </Button>
+  );
 };
 
+const Spacer = styled.span`
+  padding-left: 10px;
+`;
+
 const Button = styled.a`
-  display: inline-block;
+  display: inline-flex;
+  align-items: center;
   padding: 10px 20px;
   color: ${color.white};
   background: ${color.black};
   border-radius: 4px;
-  font-weight: 500;
+  font-weight: 600;
 `;
 
 export default SlackSignin;

server/utils/routeHelpers.js

@@ -0,0 +1,17 @@
+// @flow
+
+export function githubUrl(): string {
+  return 'https://www.github.com/outline';
+}
+
+export function blogUrl(): string {
+  return 'https://medium.com/getoutline';
+}
+
+export function developers(): string {
+  return '/developers';
+}
+
+export function signin(): string {
+  return '/auth/slack';
+}

shared/components/SlackLogo.js

@@ -0,0 +1,27 @@
+// @flow
+import React from 'react';
+
+function SlackLogo() {
+  return (
+    <svg
+      fill="#fff"
+      width="34"
+      height="34"
+      viewBox="0 0 34 34"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <g>
+        <rect
+          transform="translate(17.080477, 16.944866) rotate(-18.518296) translate(-17.080477, -16.944866) "
+          x="14.7059301"
+          y="14.6512691"
+          width="4.74909474"
+          height="4.58719378"
+        />
+        <path d="M32.5428571,12.2777778 C29.0619048,0.674603175 24.0428571,-2.02380952 12.4396825,1.45714286 C0.836507937,4.93809524 -1.86190476,9.95714286 1.61904762,21.5603175 C5.1,33.1634921 10.1190476,35.8619048 21.7222222,32.3809524 C33.3253968,28.9 36.0238095,23.8809524 32.5428571,12.2777778 Z M26.6873016,19.8063492 L24.5015873,20.5349206 L25.2571429,22.8015873 C25.5539683,23.7190476 25.068254,24.7174603 24.1507937,25.0142857 C23.9619048,25.068254 23.7460317,25.1222222 23.5571429,25.0952381 C22.8555556,25.068254 22.1809524,24.6095238 21.9380952,23.9079365 L21.1825397,21.6412698 L16.6761905,23.152381 L17.431746,25.4190476 C17.7285714,26.3365079 17.2428571,27.3349206 16.3253968,27.631746 C16.1365079,27.6857143 15.9206349,27.7396825 15.731746,27.7126984 C15.0301587,27.6857143 14.3555556,27.2269841 14.1126984,26.5253968 L13.3571429,24.2587302 L11.1714286,24.9873016 C10.9825397,25.0412698 10.7666667,25.0952381 10.5777778,25.068254 C9.87619048,25.0412698 9.2015873,24.5825397 8.95873016,23.8809524 C8.66190476,22.9634921 9.14761905,21.9650794 10.0650794,21.668254 L12.2507937,20.9396825 L10.7936508,16.5952381 L8.60793651,17.3238095 C8.41904762,17.3777778 8.2031746,17.431746 8.01428571,17.4047619 C7.31269841,17.3777778 6.63809524,16.9190476 6.3952381,16.2174603 C6.0984127,15.3 6.58412698,14.3015873 7.5015873,14.0047619 L9.68730159,13.2761905 L8.93174603,11.0095238 C8.63492063,10.0920635 9.12063492,9.09365079 10.0380952,8.7968254 C10.9555556,8.5 11.9539683,8.98571429 12.2507937,9.9031746 L13.0063492,12.1698413 L17.5126984,10.6587302 L16.7571429,8.39206349 C16.4603175,7.47460317 16.9460317,6.47619048 17.8634921,6.17936508 C18.7809524,5.88253968 19.7793651,6.36825397 20.0761905,7.28571429 L20.831746,9.55238095 L23.0174603,8.82380952 C23.9349206,8.52698413 24.9333333,9.01269841 25.2301587,9.93015873 C25.5269841,10.847619 25.0412698,11.8460317 24.1238095,12.1428571 L21.9380952,12.8714286 L23.3952381,17.215873 L25.5809524,16.4873016 C26.4984127,16.1904762 27.4968254,16.6761905 27.7936508,17.5936508 C28.0904762,18.5111111 27.6047619,19.5095238 26.6873016,19.8063492 Z" />
+      </g>
+    </svg>
+  );
+}
+
+export default SlackLogo;

shared/styles/constants.js

@@ -66,4 +66,5 @@ export const color = {
   white: '#FFFFFF',
   black: '#000000',
   blue: '#16B3FF',
+  yellow: '#FFD95C',
 };