diff --git a/public/screenshot.png b/public/screenshot.png new file mode 100644 index 000000000..11fb8c365 Binary files /dev/null and b/public/screenshot.png differ diff --git a/public/screenshot@2x.png b/public/screenshot@2x.png new file mode 100644 index 000000000..fe214876e Binary files /dev/null and b/public/screenshot@2x.png differ diff --git a/server/pages/Home.js b/server/pages/Home.js index 6500ba268..93d9bc0e0 100644 --- a/server/pages/Home.js +++ b/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() {

Your team’s knowledge base

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

+ + + +

Blazing Fast

+

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

+ + +

# Markdown Support

+

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

+ + + + + + + + +

Open Source

+

+ Outline is open source, so the community can help improve it too. + You get new features, interface improvements, and bug fixes for + free. +

+

+ GitHub +

+ + +

Integrations & API

+

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

+

+ Documentation +

+ + +

Powerful Search

+

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

+ + + ); } +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; diff --git a/server/pages/components/Hero.js b/server/pages/components/Hero.js index f597c92a2..142d8d525 100644 --- a/server/pages/components/Hero.js +++ b/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 { diff --git a/server/pages/components/Navigation.js b/server/pages/components/Navigation.js index 922f66a78..a2b84ee39 100644 --- a/server/pages/components/Navigation.js +++ b/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() { ); @@ -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` diff --git a/server/pages/components/SignupButton.js b/server/pages/components/SignupButton.js index be26fae58..f3d31b55c 100644 --- a/server/pages/components/SignupButton.js +++ b/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 ; + return ( + + ); }; +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; diff --git a/server/utils/routeHelpers.js b/server/utils/routeHelpers.js new file mode 100644 index 000000000..035754fcc --- /dev/null +++ b/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'; +} diff --git a/shared/components/SlackLogo.js b/shared/components/SlackLogo.js new file mode 100644 index 000000000..a4512f2e1 --- /dev/null +++ b/shared/components/SlackLogo.js @@ -0,0 +1,27 @@ +// @flow +import React from 'react'; + +function SlackLogo() { + return ( + + + + + + + ); +} + +export default SlackLogo; diff --git a/shared/styles/constants.js b/shared/styles/constants.js index 3cfa3a0ca..3a1496567 100644 --- a/shared/styles/constants.js +++ b/shared/styles/constants.js @@ -66,4 +66,5 @@ export const color = { white: '#FFFFFF', black: '#000000', blue: '#16B3FF', + yellow: '#FFD95C', };