diff --git a/public/screenshot.png b/public/screenshot.png new file mode 100644 index 00000000..e88f7993 Binary files /dev/null and b/public/screenshot.png differ diff --git a/server/pages/Home.js b/server/pages/Home.js index 6500ba26..345bfbec 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 { color } from '../../shared/styles/constants'; +import { pulsate } from '../../shared/styles/animations'; function Home() { return ( @@ -12,17 +14,119 @@ 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…

+ Scroll for more… + + + +

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 + navigating the UI is fluid. +

+ + +

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

+ + +

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

+ + +

Powerful Search

+

+ Search is the best way to find what you’re looking for once your + knowledgebase starts to grow in size. +

+ + + ); } +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; diff --git a/server/pages/components/Hero.js b/server/pages/components/Hero.js index f597c92a..31a143bc 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: 90vh; + padding: 6em 2em 0; text-align: center; h1 { diff --git a/server/pages/components/Navigation.js b/server/pages/components/Navigation.js index 922f66a7..1d64a136 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, githubOrganization } from '../../utils/routeHelpers'; import { color } from '../../../shared/styles/constants'; function Navigation() { @@ -8,7 +9,15 @@ function Navigation() { ); @@ -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` diff --git a/server/pages/components/SignupButton.js b/server/pages/components/SignupButton.js index be26fae5..f3d31b55 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 00000000..5304f7ab --- /dev/null +++ b/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'; +} diff --git a/shared/components/SlackLogo.js b/shared/components/SlackLogo.js new file mode 100644 index 00000000..a4512f2e --- /dev/null +++ b/shared/components/SlackLogo.js @@ -0,0 +1,27 @@ +// @flow +import React from 'react'; + +function SlackLogo() { + return ( + + + + + + + ); +} + +export default SlackLogo;