Homepage skeleton

server/pages/Home.js

@@ -3,65 +3,85 @@ import React from 'react';
 import styled from 'styled-components';
 import Grid from 'styled-components-grid';
 import Hero from './components/Hero';
+import SlackSignin from './components/SlackSignin';
+import { color } from '../../shared/styles/constants';
 
 const Unit = Grid.Unit;
 
-const Feature = styled(Unit)`
+function Home() {
-  padding: 3em;
-`;
-
-export default function Home() {
   return (
     <Grid>
       <Hero>
         <h1>Your team’s knowledge base</h1>
-        <p>
+        <HeroText>
           Documentation, meeting notes, playbooks, onboarding, work logs, brainstorming, decisions, & more…
+        </HeroText>
+        <p>
+          <SlackSignin />
         </p>
-        <a href="/auth/slack">Sign In</a>
       </Hero>
       <Unit size={{ desktop: 1 / 2 }} />
-      <Unit size={{ desktop: 1 / 2 }}>
+      <Feature size={{ desktop: 1 / 2 }}>
         <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 there are keyboard shortcuts for everything.
         </p>
-      </Unit>
+      </Feature>
 
-      <Unit size={{ desktop: 1 / 2 }}>
+      <Feature size={{ desktop: 1 / 2 }}>
         <h2>Markdown Support</h2>
         <p>
           Documents are stored in Markdown and you can export them at any time. Markdown shortcuts are also built right into the editor so you can easily format using markdown syntax or our GUI.
         </p>
-      </Unit>
+      </Feature>
       <Unit size={{ desktop: 1 / 2 }} />
 
       <Unit size={{ desktop: 1 / 2 }} />
-      <Unit size={{ desktop: 1 / 2 }}>
+      <Feature size={{ desktop: 1 / 2 }}>
         <h2>Beautiful Editor</h2>
         <p>
-          Documents are stored in Markdown and you can export them at any time. Markdown shortcuts are also built right into the editor so you can easily format using markdown syntax or our GUI.
+          We built a custom editor that’s a joy to use. Whether you’re typing up quick meeting notes or documenting a full API the interface gets out of your way and lets you focus on the content.
         </p>
-      </Unit>
+      </Feature>
 
-      <Feature size={{ desktop: 1 / 3 }}>
+      <MiniFeature size={{ desktop: 1 / 3 }}>
         <h2>Powerful Search</h2>
         <p>
           Built-in search makes that one document easy to find in a large knowledgebase.
         </p>
-      </Feature>
+      </MiniFeature>
-      <Feature size={{ desktop: 1 / 3 }}>
+      <MiniFeature size={{ desktop: 1 / 3 }}>
         <h2>API & Integrations</h2>
         <p>
           Atlas is built on it’s own API, treat Atlas as a CMS or automatically create documents from outside events.
         </p>
-      </Feature>
+      </MiniFeature>
-      <Feature size={{ desktop: 1 / 3 }}>
+      <MiniFeature size={{ desktop: 1 / 3 }}>
         <h2>Open Source</h2>
         <p>
           Want to contribute or host Atlas yourself? All of the code is available on GitHub.
         </p>
-      </Feature>
+      </MiniFeature>
     </Grid>
   );
 }
+
+const Feature = styled(Unit)`
+  padding: 3em;
+  padding: 80px;
+  background: ${color.smoke}
+`;
+
+const MiniFeature = styled(Unit)`
+  padding: 80px 40px;
+`;
+
+const HeroText = styled.p`
+  font-size: 18px;
+  max-width: 600px;
+  margin-left: auto;
+  margin-right: auto;
+  margin-bottom: 2em;
+`;
+
+export default Home;

server/pages/components/Hero.js

@@ -5,6 +5,10 @@ const Hero = styled.div`
   width: 100%;
   padding: 4em 3em;
   text-align: center;
+
+  h1 {
+    font-size: 2.5em;
+  }
 `;
 
 export default Hero;

server/pages/components/Navigation.js

@@ -5,16 +5,36 @@ import { color } from '../../../shared/styles/constants';
 
 function Navigation() {
   return (
-    <nav>
+    <Nav>
       <Brand href="/">Atlas</Brand>
-      <ul>
+      <Menu>
-        <li><a href="/about">About</a></li>
+        <MenuItem><a href="/about">About</a></MenuItem>
-        <li><a href="/pricing">Pricing</a></li>
+        <MenuItem><a href="/pricing">Pricing</a></MenuItem>
-      </ul>
+        <MenuItem><a href="/auth/slack">Sign In</a></MenuItem>
-    </nav>
+      </Menu>
+    </Nav>
   );
 }
 
+const Nav = styled.nav`
+  display: flex;
+  padding: 20px;
+  justify-content: space-between;
+`;
+
+const Menu = styled.ul`
+  margin: 0;
+  padding: 0;
+  list-style: none;
+`;
+
+const MenuItem = styled.li`
+  display: inline-block;
+  margin: 0 0 0 40px;
+  font-size: 15px;
+  font-weight: 500;
+`;
+
 const Brand = styled.a`
   font-weight: 600;
   font-size: 20px;

server/pages/components/SlackSignin.js

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