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 { color } from '../../shared/styles/constants';
+import { pulsate } from '../../shared/styles/animations';
 
 function Home() {
   return (
@@ -12,17 +14,119 @@ 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>
+          <ScrollCTA>Scroll for more…</ScrollCTA>
         </Hero>
+        <Features>
+          <Grid.Unit size={{ desktop: 1 / 3 }}>
+            <Feature>
+              <h2>Blazing Fast</h2>
+              <p>
+                Atlas is fast, really fast. We’ve trimmed 100ms and 50ms there
+                to make sure that documents load instantly, search is speedy and
+                navigating the UI is fluid.
+              </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
+                **markdown syntax** if you like.
+              </p>
+            </Feature>
+          </Grid.Unit>
+          <Feature size={{ desktop: 2 / 3 }}>
+            <Screenshot src="/screenshot.png" />
+          </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>
+          </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>
+          </Feature>
+          <Feature size={{ desktop: 1 / 3 }}>
+            <h2>Powerful Search</h2>
+            <p>
+              Search is the best way to find what you’re looking for once your
+              knowledgebase starts to grow in size.
+            </p>
+          </Feature>
+        </Highlights>
+        <Footer>
+          <h2>Create an account</h2>
+          <p>
+            On the same page as us? Create a free account to give Outline a try.
+          </p>
+          <p>
+            <SignupButton />
+          </p>
+        </Footer>
       </Grid>
     </span>
   );
 }
 
+const ScrollCTA = styled.div`
+  animation: ${pulsate} 1.3s infinite;
+
+  position: absolute;
+  bottom: 20px;
+  color: ${color.slate};
+  text-align: center;
+  width: 100%;
+  left: 0;
+`;
+
+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: #ffd95c;
+  margin: 0 1em;
+  padding: 0 1em;
+`;
+
+const Features = styled(Grid)`
+  padding: 0 2em;
+  overflow: hidden;
+`;
+
+const Feature = styled(Grid.Unit)`
+  padding: 6em 3em;
+
+  h2 {
+    margin-top: 0;
+  }
+`;
+
+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: 90vh;
+  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, githubOrganization } from '../../utils/routeHelpers';
 import { color } from '../../../shared/styles/constants';
 
 function Navigation() {
@@ -8,7 +9,15 @@ 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={githubOrganization()}>Open Source</a>
+        </MenuItem>
+        <MenuItem>
+          <a href={signin()}>Sign In</a>
+        </MenuItem>
       </Menu>
     </Nav>
   );
@@ -31,6 +40,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,9 @@
+// @flow
+
+export function githubOrganization(): string {
+  return 'https://www.github.com/outline';
+}
+
+export function signin(): string {
+  return '/auth/slack';
+}