diff --git a/public/screenshot.png b/public/screenshot.png
index 11fb8c36..6a0ef50d 100644
Binary files a/public/screenshot.png and b/public/screenshot.png differ
diff --git a/public/screenshot@2x.png b/public/screenshot@2x.png
index fe214876..da2cb815 100644
Binary files a/public/screenshot@2x.png and b/public/screenshot@2x.png differ
diff --git a/server/pages/Home.js b/server/pages/Home.js
index d833cf3d..7b080b80 100644
--- a/server/pages/Home.js
+++ b/server/pages/Home.js
@@ -6,12 +6,12 @@ import Grid from 'styled-components-grid';
import breakpoint from 'styled-components-breakpoint';
import Notice from '../../shared/components/Notice';
import Hero from './components/Hero';
+import Centered from './components/Centered';
import SigninButtons from './components/SigninButtons';
-import {
- developers,
- githubUrl,
- slackAppStoreUrl,
-} from '../../shared/utils/routeHelpers';
+import SlackLogo from '../../shared/components/SlackLogo';
+import GithubLogo from '../../shared/components/GithubLogo';
+import Flex from '../../shared/components/Flex';
+import { githubUrl, slackAppStoreUrl } from '../../shared/utils/routeHelpers';
type Props = {
notice?: 'google-hd' | 'auth-error' | 'hd-not-allowed',
@@ -55,77 +55,107 @@ function Home(props: Props) {
)}
-
-
-
- Blazing Fast Wiki
+
+
+
+
+
+
+ Improve Communication
+
+ Easily structure your teams information in one central,
+ structured location. No more hunting through folders or
+ scanning pages of search results and chat conversations.
+
+
+
+ Safe & Secure
+
+ Outline provides a secure place for your teams
+ documentation on our hosted platform, stored in portable
+ Markdown format. Or, you can run your own copy – it's open
+ source!
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Blazing Fast
Outline is fast, really fast. We’ve worked hard to ensure
- millisecond response times, documents load instantly, search is
+ millisecond response times – documents load instantly, search is
speedy and navigating the UI is delightful.
-
- # Markdown Support
+
+
+ Markdown Support
Documents are stored in plain Markdown making editing, import
and export painless. Shortcuts are also built right into the
- editor so you can easily format using{' '}
- **markdown syntax** if you like.
+ editor so you can easily format using **markdown syntax** if you
+ like.
-
-
-
-
-
-
-
- Slack Integration
-
- Get Slack notifications about newly updated documents. You can
- also search Outline directly within Slack using{' '}
- /outline <keyword> command.
-
-
- Slack App
-
-
-
- Open Source
-
- Outline is open source, so the community can help improve it too.
- You get new features, interface improvements, bug fixes, and a
- transparent roadmap for free.
-
-
- GitHub
-
-
-
- Integrations & API
-
- All of Outline’s functionality is available through the API.
- Migrating Markdown documents or setting up automations is a breeze
- with a few lines of code.
-
-
- Documentation
-
-
-
+
+
+ Slack & API
+
+
+ Get Slack notifications about changes and search Outline
+ directly within Slack using the{' '}
+ /outline <keyword> command. Access your
+ information programatically through the modern API.
+
+
+ Slack App
+
+
+
+
+
+ Open Source
+
+
+ Outline is open source, so the community can help improve it
+ too. You get new features, interface improvements, bug fixes,
+ and a transparent roadmap for free.
+
+
+ GitHub
+
+
+
+
@@ -139,25 +169,36 @@ const Screenshot = styled.img`
border-radius: 5px;
${breakpoint('desktop')`
- width: 150%;
+ margin-top: -120px;
+ margin-left: 120px;
+ width: 135%;
`};
`;
-const Highlights = styled(Grid)`
- background: ${props => props.theme.primary};
- margin: 0 1em;
- padding: 0 1em;
+const Mask = styled.div`
+ width: 100%;
+ overflow: hidden;
+ padding: 8em 0;
`;
-const Features = styled(Grid)`
+const Features = styled.div`
+ background: hsl(180, 58%, 85%);
padding: 0 2em;
- overflow: hidden;
+ width: 100%;
`;
const Feature = styled(Grid.Unit)`
- padding: 3em 0;
+ padding: 2em 0;
+
+ p {
+ font-weight: 500;
+ opacity: 0.8;
+ }
h2 {
+ display: flex;
+ font-size: 1.8em;
+ align-items: center;
margin-top: 0;
}
@@ -170,29 +211,33 @@ const Feature = styled(Grid.Unit)`
}
${breakpoint('tablet')`
- padding: 4em 3em;
+ padding: 4em 0;
`};
`;
const Footer = styled.div`
- text-align: center;
+ background: hsl(127, 58%, 85%);
+ text-align: left;
width: 100%;
padding: 4em 2em;
+ h2 {
+ font-size: 1.8em;
+ margin-top: 0;
+ }
+
${breakpoint('tablet')`
+ margin: 2em 0;
padding: 6em 4em;
`};
`;
-const FooterCTA = styled.p`
- padding-top: 1em;
-`;
-
const HeroText = styled.p`
- font-size: 18px;
+ font-size: 22px;
+ color: #666;
+ font-weight: 500;
+ text-align: left;
max-width: 600px;
- margin-left: auto;
- margin-right: auto;
margin-bottom: 2em;
`;
diff --git a/server/pages/components/Centered.js b/server/pages/components/Centered.js
new file mode 100644
index 00000000..62cdd3c7
--- /dev/null
+++ b/server/pages/components/Centered.js
@@ -0,0 +1,9 @@
+// @flow
+import styled from 'styled-components';
+
+const Centered = styled.div`
+ margin: 0 auto;
+ max-width: 1000px;
+`;
+
+export default Centered;
diff --git a/server/pages/components/Hero.js b/server/pages/components/Hero.js
index 65552d7f..c1cc4116 100644
--- a/server/pages/components/Hero.js
+++ b/server/pages/components/Hero.js
@@ -1,16 +1,15 @@
// @flow
import styled from 'styled-components';
+import Centered from './Centered';
-const Hero = styled.div`
+const Hero = styled(Centered)`
width: 100%;
- height: 70vh;
- min-height: 400px;
- max-height: 600px;
- padding: 6em 2em 0;
- text-align: center;
+ min-height: 500px;
+ padding: 4em 0 0;
h1 {
- font-size: 2.5em;
+ font-size: 3.5em;
+ line-height: 1em;
}
`;
diff --git a/server/pages/components/Layout.js b/server/pages/components/Layout.js
index 0b738be2..e5368fe0 100644
--- a/server/pages/components/Layout.js
+++ b/server/pages/components/Layout.js
@@ -1,6 +1,7 @@
// @flow
import * as React from 'react';
import { Helmet } from 'react-helmet';
+import styled from 'styled-components';
import { TopNavigation, BottomNavigation } from './Navigation';
import Analytics from '../../../shared/components/Analytics';
import globalStyles from '../../../shared/styles/globals';
@@ -15,7 +16,7 @@ type Props = {
children?: React.Node,
};
-export default function Layout({ children }: Props) {
+function Layout({ children }: Props) {
globalStyles();
return (
@@ -63,11 +64,17 @@ export default function Layout({ children }: Props) {
{'{{HEAD}}'}
{'{{CSS}}'}
-
+
{children}
-
+