Improved homepage 🙏
This commit is contained in:
Tom Moor
@@ -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;
|
||||
`;
|
||||
|
||||
|
||||
Reference in New Issue
Block a user