diff --git a/public/fonts/LatoLatin-Semibold.woff b/public/fonts/LatoLatin-Semibold.woff new file mode 100644 index 00000000..5e228979 Binary files /dev/null and b/public/fonts/LatoLatin-Semibold.woff differ diff --git a/public/images/airtable.png b/public/images/airtable.png new file mode 100755 index 00000000..a1152f9a Binary files /dev/null and b/public/images/airtable.png differ diff --git a/public/images/codepen.png b/public/images/codepen.png new file mode 100755 index 00000000..bbd6ca26 Binary files /dev/null and b/public/images/codepen.png differ diff --git a/public/images/figma.png b/public/images/figma.png new file mode 100755 index 00000000..90ef5c2c Binary files /dev/null and b/public/images/figma.png differ diff --git a/public/images/framer.png b/public/images/framer.png new file mode 100755 index 00000000..6b41c999 Binary files /dev/null and b/public/images/framer.png differ diff --git a/public/images/github-gist.png b/public/images/github-gist.png new file mode 100755 index 00000000..15ee6139 Binary files /dev/null and b/public/images/github-gist.png differ diff --git a/public/images/invision.png b/public/images/invision.png new file mode 100755 index 00000000..0beb5060 Binary files /dev/null and b/public/images/invision.png differ diff --git a/public/images/loom.png b/public/images/loom.png new file mode 100755 index 00000000..59837868 Binary files /dev/null and b/public/images/loom.png differ diff --git a/public/images/lucidchart.png b/public/images/lucidchart.png new file mode 100755 index 00000000..884f0bc7 Binary files /dev/null and b/public/images/lucidchart.png differ diff --git a/public/images/marvel.png b/public/images/marvel.png new file mode 100755 index 00000000..f518332a Binary files /dev/null and b/public/images/marvel.png differ diff --git a/public/images/mode-analytics.png b/public/images/mode-analytics.png new file mode 100755 index 00000000..8c0c49a4 Binary files /dev/null and b/public/images/mode-analytics.png differ diff --git a/public/images/numeracy.png b/public/images/numeracy.png new file mode 100755 index 00000000..03a225b9 Binary files /dev/null and b/public/images/numeracy.png differ diff --git a/public/images/realtime-board.png b/public/images/realtime-board.png new file mode 100755 index 00000000..9a74a958 Binary files /dev/null and b/public/images/realtime-board.png differ diff --git a/public/images/slack.png b/public/images/slack.png new file mode 100755 index 00000000..a4d5599d Binary files /dev/null and b/public/images/slack.png differ diff --git a/public/images/trello.png b/public/images/trello.png new file mode 100755 index 00000000..f34a95e3 Binary files /dev/null and b/public/images/trello.png differ diff --git a/public/images/typeform.png b/public/images/typeform.png new file mode 100755 index 00000000..d977086e Binary files /dev/null and b/public/images/typeform.png differ diff --git a/public/images/vimeo.png b/public/images/vimeo.png new file mode 100755 index 00000000..64a25a66 Binary files /dev/null and b/public/images/vimeo.png differ diff --git a/public/images/youtube.png b/public/images/youtube.png new file mode 100755 index 00000000..36885eb6 Binary files /dev/null and b/public/images/youtube.png differ diff --git a/server/config/integrations.json b/server/config/integrations.json new file mode 100644 index 00000000..23e5fbf0 --- /dev/null +++ b/server/config/integrations.json @@ -0,0 +1,138 @@ +[ + { + "slug": "figma", + "name": "Figma", + "url": "https://figma.com", + "category": "Design", + "description": "Figma is a collaborative interface design tool", + "content": "Embed interactive Figma designs into your Outline docs. Paste a link to a Figma public share link to instantly convert into a rich preview." + }, + { + "slug": "framer", + "name": "Framer", + "url": "https://framer.com", + "category": "Design", + "description": "Framer is an interactive design and prototyping tool", + "content": "Embed interactive Framer prototypes into your Outline docs. Paste a link to a Framer cloud link to instantly convert into an interactive embed." + }, + { + "slug": "invision", + "name": "InVision", + "url": "https://invision.com", + "category": "Design", + "description": "InVision is an online design and prototyping tool", + "content": "Embed interactive InVision prototypes into your Outline docs. Paste an InVision share link to instantly convert into an interactive prototype." + }, + { + "slug": "marvel", + "name": "Marvel", + "url": "https://marvelapp.com", + "category": "Design", + "description": "The all-in-one platform powering design", + "content": "Marvel prototypes inside your Outline docs. Paste a Marvel link to instantly convert into an interactive prototype." + }, + { + "slug": "airtable", + "name": "Airtable", + "url": "https://airtable.com", + "category": "Collaboration", + "description": "Part spreadsheet, part database, and entirely flexible", + "content": "Embed interactive tables into your Outline docs. Paste a link to an Airtable public share link to instantly convert into a rich preview." + }, + { + "slug": "lucidchart", + "name": "Lucidchart", + "url": "https://lucidchart.com", + "category": "Collaboration", + "description": "Create flowcharts and technical diagrams with ease", + "content": "Embed an interactive chart inside your Outline doc. Paste a link to any shared Lucidchart to instantly convert into a rich preview." + }, + { + "slug": "realtime-board", + "name": "Realtime Board", + "url": "https://realtimeboard.com", + "category": "Collaboration", + "description": "Simple whiteboarding for cross-functional team collaboration", + "content": "Embed an interactive whiteboard inside your Outline doc. Paste a link to any shared Realtime Board to instantly convert to a board." + }, + { + "slug": "slack", + "name": "Slack", + "url": "https://slack.com", + "category": "Collaboration", + "description": "Chat, collaboration, and file sharing for teams", + "content": "" + }, + { + "slug": "trello", + "name": "Trello", + "url": "https://trello.com", + "category": "Collaboration", + "description": "Boards, lists, and cards to organize your projects", + "content": "" + }, + { + "slug": "typeform", + "name": "Typeform", + "url": "https://typeform.com", + "category": "Collaboration", + "description": "Data collection tool and surveys, for professionals", + "content": "" + }, + { + "slug": "codepen", + "name": "Codepen", + "url": "https://codepen.io", + "category": "Developers", + "description": "A social development environment and editor", + "content": "" + }, + { + "slug": "github-gist", + "name": "GitHub Gist", + "url": "https://gist.github.com", + "category": "Developers", + "description": "Sharable code snippets, hosted by GitHub", + "content": "" + }, + { + "slug": "numeracy", + "name": "Numeracy", + "url": "https://numeracy.io", + "category": "Developers", + "description": "A SQL pad for writing, iterating, and exploring data", + "content": "" + }, + { + "slug": "mode-analytics", + "name": "Mode Analytics", + "url": "https://modeanalytics.com", + "category": "Developers", + "description": "Connect and analyze data from anywhere", + "content": "" + }, + { + "slug": "loom", + "name": "Loom", + "url": "https://useloom.com", + "category": "Media", + "description": "Get your message across with instantly shareable videos", + "content": "" + }, + { + "slug": "youtube", + "name": "YouTube", + "url": "https://youtube.com", + "category": "Media", + "description": "A popular little website for sharing videos", + "content": "" + }, + { + "slug": "vimeo", + "name": "Vimeo", + "url": "https://vimeo.com", + "category": "Media", + "description": "A customizable and embeddable video player", + "content": "" + } +] \ No newline at end of file diff --git a/server/pages/About.js b/server/pages/About.js index 72cc646f..a0ea3850 100644 --- a/server/pages/About.js +++ b/server/pages/About.js @@ -38,7 +38,7 @@ export default function About() { About Us -
+

About Us

The team behind Outline

diff --git a/server/pages/Api.js b/server/pages/Api.js index 772546a7..f62da61f 100644 --- a/server/pages/Api.js +++ b/server/pages/Api.js @@ -60,7 +60,7 @@ export default function Pricing() { API Documentation - Outline -
+

Documentation

The API is the heart and soul of Outline.

diff --git a/server/pages/Changelog.js b/server/pages/Changelog.js index 688b3e38..3bc6f645 100644 --- a/server/pages/Changelog.js +++ b/server/pages/Changelog.js @@ -21,7 +21,7 @@ function Changelog({ releases }: { releases: Release[] }) { Changelog -
+

Changelog

We’re building in public. Here’s what we’ve been changing recently. diff --git a/server/pages/Home.js b/server/pages/Home.js index a7f49386..597a8e3d 100644 --- a/server/pages/Home.js +++ b/server/pages/Home.js @@ -166,7 +166,7 @@ const Mask = styled.div` `; const Features = styled.div` - background: hsl(180, 58%, 85%); + background: #00adff; padding: 0 2em; width: 100%; `; @@ -200,7 +200,7 @@ const Feature = styled(Grid.Unit)` `; const Footer = styled.div` - background: hsl(127, 58%, 85%); + background: #aa34f0; text-align: left; width: 100%; padding: 4em 2em; @@ -210,6 +210,10 @@ const Footer = styled.div` margin-top: 0; } + p { + margin-bottom: 0; + } + ${breakpoint('tablet')` margin: 2em 0; padding: 6em 4em; diff --git a/server/pages/Integration.js b/server/pages/Integration.js new file mode 100644 index 00000000..97e6c99a --- /dev/null +++ b/server/pages/Integration.js @@ -0,0 +1,29 @@ +// @flow +import * as React from 'react'; +import { find } from 'lodash'; +import Grid from 'styled-components-grid'; +import { Helmet } from 'react-helmet'; +import Header from './components/Header'; +import Content from './components/Content'; +import IntegrationMenu from './components/IntegrationMenu'; +import integrations from '../config/integrations'; + +export default function Integration({ slug }: { slug: string }) { + const integation = find(integrations, i => i.slug === slug); + + return ( + + + {integation.name} Integration + +

+

{integation.name} Integration

+

{integation.description}

+
+ + +
+ + + ); +} diff --git a/server/pages/Integrations.js b/server/pages/Integrations.js new file mode 100644 index 00000000..7b972379 --- /dev/null +++ b/server/pages/Integrations.js @@ -0,0 +1,77 @@ +// @flow +import * as React from 'react'; +import { map, groupBy } from 'lodash'; +import styled from 'styled-components'; +import Grid from 'styled-components-grid'; +import { Helmet } from 'react-helmet'; +import Header from './components/Header'; +import Content from './components/Content'; +import integrations from '../config/integrations'; + +const categories = groupBy(integrations, i => i.category); + +function Integrations() { + return ( + + + Integrations + +
+

Integrations

+

+ Outline is designed to integrate with your existing workflow and + tools. +

+
+ + {map(categories, (integrations, category) => ( +
+

{category}

+ + {integrations.map(i => ( + + + +

{i.name}

+

{i.description}

+ + + ))} + +
+ ))} + + + ); +} + +const Logo = styled.img` + height: 60px; + border-radius: 4px; +`; + +const Category = styled(Grid)` + margin: 0 -1em; +`; + +const Integration = styled.a` + display: block; + padding: 2em 2em 1em; + margin: 1em; + border-radius: 4px; + border: 2px solid ${props => props.theme.slateLight}; + color: ${props => props.theme.text}; + font-size: 16px; + transition: background 200ms ease-in-out; + + h3, + p { + margin: 0.5em 0; + } + + &:hover { + background: ${props => props.theme.slateLight}; + } +`; + +export default Integrations; diff --git a/server/pages/components/Header.js b/server/pages/components/Header.js index 64a22b45..49747413 100644 --- a/server/pages/components/Header.js +++ b/server/pages/components/Header.js @@ -1,15 +1,17 @@ // @flow import * as React from 'react'; +import breakpoint from 'styled-components-breakpoint'; import styled from 'styled-components'; import Centered from './Centered'; type Props = { children: React.Node, + background?: string, }; -const Header = ({ children }: Props) => { +const Header = ({ children, background }: Props) => { return ( - + {children} ); @@ -17,9 +19,13 @@ const Header = ({ children }: Props) => { const Wrapper = styled.div` width: 100%; - padding: 2em; - background: ${props => props.theme.contentHeaderBackground}; + padding: 8em 0 3em; + + margin-top: -70px; margin-bottom: 2em; + text-align: center; + background: ${props => props.background || 'transparent'}; + z-index: -1; p { font-size: 22px; @@ -29,9 +35,17 @@ const Wrapper = styled.div` } h1 { - font-size: 3.5em; + font-size: 2em; margin: 0 0 0.1em; } + + ${breakpoint('tablet')` + padding: 8em 3em 3em 3em; + + h1 { + font-size: 4em; + } + `}; `; export default Header; diff --git a/server/pages/components/IntegrationMenu.js b/server/pages/components/IntegrationMenu.js new file mode 100644 index 00000000..ac018898 --- /dev/null +++ b/server/pages/components/IntegrationMenu.js @@ -0,0 +1,24 @@ +// @flow +import { map, groupBy } from 'lodash'; +import * as React from 'react'; + +export default function IntegrationMenu({ integrations }) { + const categories = groupBy(integrations, i => i.category); + + return ( + + ); +} diff --git a/server/pages/components/Navigation.js b/server/pages/components/Navigation.js index 84308237..20bd4713 100644 --- a/server/pages/components/Navigation.js +++ b/server/pages/components/Navigation.js @@ -11,6 +11,7 @@ import { changelog, features, about, + integrations, privacy, githubUrl, twitterUrl, @@ -42,14 +43,11 @@ function TopNavigation({ sessions, loggedIn }: Props) { Features - About + Integrations Changelog - - Twitter - API @@ -109,6 +107,9 @@ function BottomNavigation() { +
+ About +
); } @@ -118,11 +119,11 @@ const MenuLinkStyle = props => ` font-weight: 500; a { - color: ${props.theme.slate}; + color: rgba(0, 0, 0, 0.6); } a:hover { - color: ${props.theme.slateDark}; + color: rgba(0, 0, 0, 0.4); text-decoration: underline; } `; @@ -142,17 +143,17 @@ const MenuItem = styled.li` props.highlighted && ` position: relative; - border: 2px solid ${props.theme.slate}; + border: 2px solid rgba(0, 0, 0, 0.6); border-radius: 4px; padding: 6px 8px; margin-top: -6px; margin-bottom: -6px; &:hover { - border: 2px solid ${props.theme.slateDark}; + border: 2px solid rgba(0, 0, 0, 0.4); > a { - color: ${props.theme.slateDark}; + color: rgba(0, 0, 0, 0.4); } } diff --git a/server/routes.js b/server/routes.js index b0378c4d..50ef5cb6 100644 --- a/server/routes.js +++ b/server/routes.js @@ -18,6 +18,8 @@ import About from './pages/About'; import Changelog from './pages/Changelog'; import Privacy from './pages/Privacy'; import Pricing from './pages/Pricing'; +import Integrations from './pages/Integrations'; +import Integration from './pages/Integration'; import Api from './pages/Api'; import SubdomainSignin from './pages/SubdomainSignin'; @@ -56,6 +58,10 @@ router.get('/about', ctx => renderpage(ctx, )); router.get('/pricing', ctx => renderpage(ctx, )); router.get('/developers', ctx => renderpage(ctx, )); router.get('/privacy', ctx => renderpage(ctx, )); +router.get('/integrations/:slug', ctx => + renderpage(ctx, ) +); +router.get('/integrations', ctx => renderpage(ctx, )); router.get('/changelog', async ctx => { const data = await fetch( 'https://api.github.com/repos/outline/outline/releases' diff --git a/shared/styles/base.js b/shared/styles/base.js index a69e38e0..c6d722ee 100644 --- a/shared/styles/base.js +++ b/shared/styles/base.js @@ -2,6 +2,11 @@ import theme from './theme'; export default ` + @font-face { + font-family: 'Lato'; + src: url('/fonts/LatoLatin-Semibold.woff') format('woff'); + } + * { box-sizing: border-box; } @@ -46,6 +51,7 @@ export default ` h4, h5, h6 { + font-family: 'Lato', -apple-system, BlinkMacSystemFont; font-weight: 500; line-height: 1.25; margin-top: 1em; diff --git a/shared/utils/routeHelpers.js b/shared/utils/routeHelpers.js index a1d761df..623ff511 100644 --- a/shared/utils/routeHelpers.js +++ b/shared/utils/routeHelpers.js @@ -73,6 +73,10 @@ export function about(): string { return `${process.env.URL}/about`; } +export function integrations(): string { + return `${process.env.URL}/integrations`; +} + export function privacy(): string { return `${process.env.URL}/privacy`; }