From e370676b499a2f2c63ed53114c82635c85d25e9e Mon Sep 17 00:00:00 2001 From: Tom Moor Date: Thu, 26 Oct 2017 23:02:45 -0700 Subject: [PATCH] Homepage skeleton --- server/pages/Home.js | 60 +++++++++++++++++--------- server/pages/components/Hero.js | 4 ++ server/pages/components/Navigation.js | 32 +++++++++++--- server/pages/components/SlackSignin.js | 19 ++++++++ 4 files changed, 89 insertions(+), 26 deletions(-) create mode 100644 server/pages/components/SlackSignin.js diff --git a/server/pages/Home.js b/server/pages/Home.js index 149e4139..f29548c2 100644 --- a/server/pages/Home.js +++ b/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)` - padding: 3em; -`; - -export default function Home() { +function Home() { return (

Your team’s knowledge base

-

+ Documentation, meeting notes, playbooks, onboarding, work logs, brainstorming, decisions, & more… + +

+

- Sign In - +

Blazing Fast

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.

- + - +

Markdown Support

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.

- + - +

Beautiful Editor

- 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.

- + - +

Powerful Search

Built-in search makes that one document easy to find in a large knowledgebase.

- - + +

API & Integrations

Atlas is built on it’s own API, treat Atlas as a CMS or automatically create documents from outside events.

- - + +

Open Source

Want to contribute or host Atlas yourself? All of the code is available on GitHub.

- + ); } + +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; diff --git a/server/pages/components/Hero.js b/server/pages/components/Hero.js index 2da5efdb..381bfef8 100644 --- a/server/pages/components/Hero.js +++ b/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; diff --git a/server/pages/components/Navigation.js b/server/pages/components/Navigation.js index fc2ce553..6626c383 100644 --- a/server/pages/components/Navigation.js +++ b/server/pages/components/Navigation.js @@ -5,16 +5,36 @@ import { color } from '../../../shared/styles/constants'; function Navigation() { return ( - ); } +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; diff --git a/server/pages/components/SlackSignin.js b/server/pages/components/SlackSignin.js new file mode 100644 index 00000000..be26fae5 --- /dev/null +++ b/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 ; +}; + +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;