Improved homepage 🙏
This commit is contained in:
Tom Moor
parent
95c4574549
commit
19a328ebeb
Binary file not shown.
|
Before Width: | Height: | Size: 52 KiB After Width: | Height: | Size: 253 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 124 KiB After Width: | Height: | Size: 400 KiB |
|
|
@ -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) {
|
|||
</Notice>
|
||||
)}
|
||||
</Hero>
|
||||
<Features reverse={{ mobile: true, tablet: false, desktop: false }}>
|
||||
<Grid.Unit size={{ desktop: 1 / 3, tablet: 1 / 2 }}>
|
||||
<Feature>
|
||||
<h2>Blazing Fast Wiki</h2>
|
||||
<Mask>
|
||||
<Features>
|
||||
<Centered>
|
||||
<Grid reverse={{ mobile: true, tablet: false, desktop: false }}>
|
||||
<Grid.Unit size={{ tablet: 1 / 3 }}>
|
||||
<Feature>
|
||||
<h2>Improve Communication</h2>
|
||||
<p>
|
||||
Easily structure your teams information in one central,
|
||||
structured location. No more hunting through folders or
|
||||
scanning pages of search results and chat conversations.
|
||||
</p>
|
||||
</Feature>
|
||||
<Feature>
|
||||
<h2>Safe & Secure</h2>
|
||||
<p>
|
||||
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!
|
||||
</p>
|
||||
</Feature>
|
||||
</Grid.Unit>
|
||||
<Feature size={{ tablet: 2 / 3 }}>
|
||||
<Screenshot
|
||||
srcset="screenshot.png, screenshot@2x.png 2x"
|
||||
src="/screenshot@2x.png"
|
||||
alt="Outline Screenshot"
|
||||
/>
|
||||
</Feature>
|
||||
</Grid>
|
||||
</Centered>
|
||||
</Features>
|
||||
</Mask>
|
||||
<Centered>
|
||||
<Grid>
|
||||
<Feature size={{ desktop: 1 / 3 }}>
|
||||
<h2>Blazing Fast</h2>
|
||||
<p>
|
||||
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.
|
||||
</p>
|
||||
</Feature>
|
||||
<Feature>
|
||||
<h2># Markdown Support</h2>
|
||||
<Feature size={{ desktop: 1 / 3 }} />
|
||||
<Feature size={{ desktop: 1 / 3 }}>
|
||||
<h2>Markdown Support</h2>
|
||||
<p>
|
||||
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{' '}
|
||||
<strong>**markdown syntax**</strong> if you like.
|
||||
editor so you can easily format using **markdown syntax** if you
|
||||
like.
|
||||
</p>
|
||||
</Feature>
|
||||
</Grid.Unit>
|
||||
<Feature size={{ desktop: 2 / 3, tablet: 1 / 2 }}>
|
||||
<Screenshot
|
||||
srcset="screenshot.png, screenshot@2x.png 2x"
|
||||
src="/screenshot@2x.png"
|
||||
alt="Outline Screenshot"
|
||||
/>
|
||||
</Feature>
|
||||
</Features>
|
||||
<Highlights id="features">
|
||||
<Feature size={{ desktop: 1 / 3 }}>
|
||||
<h2>Slack Integration</h2>
|
||||
<p>
|
||||
Get Slack notifications about newly updated documents. You can
|
||||
also search Outline directly within Slack using{' '}
|
||||
<code>/outline <keyword></code> command.
|
||||
</p>
|
||||
<p>
|
||||
<a href={slackAppStoreUrl()}>Slack App</a>
|
||||
</p>
|
||||
</Feature>
|
||||
<Feature size={{ desktop: 1 / 3 }}>
|
||||
<h2>Open Source</h2>
|
||||
<p>
|
||||
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.
|
||||
</p>
|
||||
<p>
|
||||
<a href={githubUrl()}>GitHub</a>
|
||||
</p>
|
||||
</Feature>
|
||||
<Feature size={{ desktop: 1 / 3 }}>
|
||||
<h2>Integrations & API</h2>
|
||||
<p>
|
||||
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.
|
||||
</p>
|
||||
<p>
|
||||
<a href={developers()}>Documentation</a>
|
||||
</p>
|
||||
</Feature>
|
||||
</Highlights>
|
||||
<Feature size={{ desktop: 1 / 3 }}>
|
||||
<h2>
|
||||
<SlackLogo fill="#000" size={30} /> Slack & API
|
||||
</h2>
|
||||
<p>
|
||||
Get Slack notifications about changes and search Outline
|
||||
directly within Slack using the{' '}
|
||||
<code>/outline <keyword></code> command. Access your
|
||||
information programatically through the modern API.
|
||||
</p>
|
||||
<p>
|
||||
<a href={slackAppStoreUrl()}>Slack App</a>
|
||||
</p>
|
||||
</Feature>
|
||||
<Feature size={{ desktop: 1 / 3 }} />
|
||||
<Feature size={{ desktop: 1 / 3 }}>
|
||||
<h2>
|
||||
<GithubLogo fill="#000" size={30} /> Open Source
|
||||
</h2>
|
||||
<p>
|
||||
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.
|
||||
</p>
|
||||
<p>
|
||||
<a href={githubUrl()}>GitHub</a>
|
||||
</p>
|
||||
</Feature>
|
||||
</Grid>
|
||||
</Centered>
|
||||
<Footer>
|
||||
<h2>Create an account</h2>
|
||||
<p>
|
||||
On the same page as us? Create a free account to give Outline a try.
|
||||
</p>
|
||||
<FooterCTA>
|
||||
<SigninButtons {...props} />
|
||||
</FooterCTA>
|
||||
<Centered>
|
||||
<Grid>
|
||||
<Grid.Unit size={{ desktop: 1 / 3 }}>
|
||||
<h2>Create an account</h2>
|
||||
<p>
|
||||
On the same page as us? Create a free account to give Outline
|
||||
a try with your team.
|
||||
</p>
|
||||
</Grid.Unit>
|
||||
<Grid.Unit size={{ desktop: 2 / 3 }}>
|
||||
<Flex justify="center" align="center">
|
||||
<SigninButtons {...props} />
|
||||
</Flex>
|
||||
</Grid.Unit>
|
||||
</Grid>
|
||||
</Centered>
|
||||
</Footer>
|
||||
</Grid>
|
||||
</span>
|
||||
|
|
@ -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;
|
||||
`;
|
||||
|
||||
|
|
|
|||
|
|
@ -0,0 +1,9 @@
|
|||
// @flow
|
||||
import styled from 'styled-components';
|
||||
|
||||
const Centered = styled.div`
|
||||
margin: 0 auto;
|
||||
max-width: 1000px;
|
||||
`;
|
||||
|
||||
export default Centered;
|
||||
|
|
@ -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;
|
||||
}
|
||||
`;
|
||||
|
||||
|
|
|
|||
|
|
@ -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}}'}
|
||||
</head>
|
||||
<body>
|
||||
<Body>
|
||||
<TopNavigation />
|
||||
{children}
|
||||
<BottomNavigation />
|
||||
</body>
|
||||
</Body>
|
||||
</html>
|
||||
);
|
||||
}
|
||||
|
||||
const Body = styled.body`
|
||||
padding: 0 30px;
|
||||
`;
|
||||
|
||||
export default Layout;
|
||||
|
|
|
|||
|
|
@ -2,6 +2,7 @@
|
|||
import * as React from 'react';
|
||||
import styled from 'styled-components';
|
||||
import breakpoint from 'styled-components-breakpoint';
|
||||
import Centered from './Centered';
|
||||
import {
|
||||
developers,
|
||||
changelog,
|
||||
|
|
@ -102,9 +103,9 @@ const MenuItemDesktop = styled(MenuItem)`
|
|||
`};
|
||||
`;
|
||||
|
||||
const Nav = styled.nav`
|
||||
const Nav = styled(Centered)`
|
||||
display: flex;
|
||||
padding: 20px 30px;
|
||||
padding: 20px 0;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
`;
|
||||
|
|
@ -114,7 +115,7 @@ const BottomNav = styled.nav`
|
|||
justify-content: center;
|
||||
align-items: center;
|
||||
flex-direction: column;
|
||||
margin-bottom: 40px;
|
||||
margin: 4em 0;
|
||||
|
||||
> div {
|
||||
display: flex;
|
||||
|
|
@ -124,6 +125,7 @@ const BottomNav = styled.nav`
|
|||
|
||||
${breakpoint('tablet')`
|
||||
flex-direction: row;
|
||||
margin: 0 0 4em;
|
||||
|
||||
> div {
|
||||
margin: 0 0 0 40px;
|
||||
|
|
|
|||
|
|
@ -21,7 +21,7 @@ const SigninButtons = ({
|
|||
return (
|
||||
<Wrapper>
|
||||
{slackSigninEnabled && (
|
||||
<Flex column>
|
||||
<Column column>
|
||||
<Button href={signin('slack')}>
|
||||
<SlackLogo />
|
||||
<Spacer>Sign In with Slack</Spacer>
|
||||
|
|
@ -29,11 +29,10 @@ const SigninButtons = ({
|
|||
<LastLogin>
|
||||
{lastSignedIn === 'slack' && 'You signed in with Slack previously'}
|
||||
</LastLogin>
|
||||
</Flex>
|
||||
</Column>
|
||||
)}
|
||||
|
||||
{googleSigninEnabled && (
|
||||
<Flex column>
|
||||
<Column column>
|
||||
<Button href={signin('google')}>
|
||||
<GoogleLogo />
|
||||
<Spacer>Sign In with Google</Spacer>
|
||||
|
|
@ -42,19 +41,28 @@ const SigninButtons = ({
|
|||
{lastSignedIn === 'google' &&
|
||||
'You signed in with Google previously'}
|
||||
</LastLogin>
|
||||
</Flex>
|
||||
</Column>
|
||||
)}
|
||||
</Wrapper>
|
||||
);
|
||||
};
|
||||
|
||||
const Column = styled(Flex)`
|
||||
text-align: center;
|
||||
|
||||
&:first-child {
|
||||
margin-right: 8px;
|
||||
}
|
||||
`;
|
||||
|
||||
const Wrapper = styled(Flex)`
|
||||
display: block;
|
||||
justify-content: center;
|
||||
|
||||
${breakpoint('tablet')`
|
||||
display: flex;
|
||||
`};
|
||||
justify-content: flex-start;
|
||||
`};
|
||||
`;
|
||||
|
||||
const Spacer = styled.span`
|
||||
|
|
@ -73,8 +81,9 @@ const Button = styled.a`
|
|||
`;
|
||||
|
||||
const LastLogin = styled.p`
|
||||
font-size: 12px;
|
||||
color: ${props => props.theme.slate};
|
||||
font-size: 13px;
|
||||
font-weight: 500;
|
||||
color: rgba(20, 23, 26, 0.5);
|
||||
padding-top: 4px;
|
||||
`;
|
||||
|
||||
|
|
|
|||
|
|
@ -7,7 +7,11 @@ import webpackConfig from '../../webpack.config';
|
|||
const PUBLIC_PATH = webpackConfig.output.publicPath;
|
||||
|
||||
const prefetchTags = [
|
||||
<link rel="dns-prefetch" href={process.env.AWS_S3_UPLOAD_BUCKET_URL} />,
|
||||
<link
|
||||
rel="dns-prefetch"
|
||||
href={process.env.AWS_S3_UPLOAD_BUCKET_URL}
|
||||
key="dns"
|
||||
/>,
|
||||
];
|
||||
|
||||
try {
|
||||
|
|
|
|||
|
|
@ -0,0 +1,30 @@
|
|||
// @flow
|
||||
import * as React from 'react';
|
||||
|
||||
type Props = {
|
||||
size?: number,
|
||||
fill?: string,
|
||||
className?: string,
|
||||
};
|
||||
|
||||
function GithubLogo({ size = 34, fill = '#FFF', className }: Props) {
|
||||
return (
|
||||
<svg
|
||||
fill={fill}
|
||||
width={size}
|
||||
height={size}
|
||||
viewBox="0 0 36 36"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
className={className}
|
||||
>
|
||||
<path
|
||||
fillRule="evenodd"
|
||||
clipRule="evenodd"
|
||||
fill="#191717"
|
||||
d="M18,1.4C9,1.4,1.7,8.7,1.7,17.7c0,7.2,4.7,13.3,11.1,15.5 c0.8,0.1,1.1-0.4,1.1-0.8c0-0.4,0-1.4,0-2.8c-4.5,1-5.5-2.2-5.5-2.2c-0.7-1.9-1.8-2.4-1.8-2.4c-1.5-1,0.1-1,0.1-1 c1.6,0.1,2.5,1.7,2.5,1.7c1.5,2.5,3.8,1.8,4.7,1.4c0.1-1.1,0.6-1.8,1-2.2c-3.6-0.4-7.4-1.8-7.4-8.1c0-1.8,0.6-3.2,1.7-4.4 c-0.2-0.4-0.7-2.1,0.2-4.3c0,0,1.4-0.4,4.5,1.7c1.3-0.4,2.7-0.5,4.1-0.5c1.4,0,2.8,0.2,4.1,0.5c3.1-2.1,4.5-1.7,4.5-1.7 c0.9,2.2,0.3,3.9,0.2,4.3c1,1.1,1.7,2.6,1.7,4.4c0,6.3-3.8,7.6-7.4,8c0.6,0.5,1.1,1.5,1.1,3c0,2.2,0,3.9,0,4.5 c0,0.4,0.3,0.9,1.1,0.8c6.5-2.2,11.1-8.3,11.1-15.5C34.3,8.7,27,1.4,18,1.4z"
|
||||
/>
|
||||
</svg>
|
||||
);
|
||||
}
|
||||
|
||||
export default GithubLogo;
|
||||
Reference in New Issue