Updated FAQ

Improved homepage mobile styling
Minor fixes elsewhere
closes #690

server/pages/About.js

@@ -57,8 +57,8 @@ export default function About() {
         <p>
           <i>
             Outline is currently in public beta. The hosted service will stay
-            free during this period. After that we will offer Outline free for
-            teams up to 5 people and have reasonable plans for larger teams.
+            free during this period. After that we will offer Outline free to
+            get started and have reasonable plans for larger teams.
           </i>
         </p>
         <Authors>
@@ -143,10 +143,10 @@ export default function About() {
           by supporting us financially.
         </p>
         <p>
-          <h3>Can I use Google/GitHub/etc to signup for Outline?</h3>
-          We started with Slack as many teams are already using it and benefit
-          from the integrations. We’ll be adding more login methods soon. Please
-          let us know which one you would like to see next{' '}
+          <h3>Can I use X to signup for Outline?</h3>
+          We started with Slack and Google as many teams are already using these
+          services for team identity. We’ll consider adding more login methods
+          soon. Please let us know which one you would like to see next{' '}
           <a
             href="https://spectrum.chat/outline/feature-requests?thread=a851c20d-251a-4c7b-8977-e1438894db51"
             target="_blank"
@@ -157,10 +157,11 @@ export default function About() {
         </p>
         <p>
           <h3>How can I export my data if you go away?</h3>
-          We’re committed on making your data portable. We’ll soon add better
-          import and export options so you which will let you take your data and
-          view it in HTML form or upload to self-hosted Outline. Until then, you
-          can do this through our <a href="/developers">API</a>.
+          Outline includes the ability to export individual documents,
+          collections or your entire knowledge base to markdown with a single
+          click so you’re never locked in. We also have an extensive{' '}
+          <a href="/developers">API</a> that can be used for accessing documents
+          programatically.
         </p>
         <p>
           <h3>How can I get in touch with you?</h3>

server/pages/Home.js

@@ -7,7 +7,11 @@ import breakpoint from 'styled-components-breakpoint';
 import Notice from '../../shared/components/Notice';
 import Hero from './components/Hero';
 import SigninButtons from './components/SigninButtons';
-import { developers, githubUrl } from '../../shared/utils/routeHelpers';
+import {
+  developers,
+  githubUrl,
+  slackAppStoreUrl,
+} from '../../shared/utils/routeHelpers';
 
 type Props = {
   notice?: 'google-hd' | 'auth-error' | 'hd-not-allowed',
@@ -20,7 +24,7 @@ function Home(props: Props) {
   return (
     <span>
       <Helmet>
-        <title>Outline - Team wiki & documentation</title>
+        <title>Outline - Team wiki & knowledge base</title>
       </Helmet>
       <Grid>
         <Hero>
@@ -64,10 +68,10 @@ function Home(props: Props) {
             <Feature>
               <h2># Markdown Support</h2>
               <p>
-                Outline stores, imports and exports all documents in plain
-                Markdown. Shortcuts are also built right into the editor so you
-                can easily format using <strong>**markdown syntax**</strong> if
-                you like.
+                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.
               </p>
             </Feature>
           </Grid.Unit>
@@ -81,20 +85,22 @@ function Home(props: Props) {
         </Features>
         <Highlights id="features">
           <Feature size={{ desktop: 1 / 3 }}>
-            <h2>Slack integration</h2>
+            <h2>Slack Integration</h2>
             <p>
-              Keep your team up to date and informed with Slack notifications
-              about newly published documents. You can also search Outline
-              directly within Slack using <code>/outline &lt;keyword&gt;</code>{' '}
-              command.
+              Get Slack notifications about newly updated documents. You can
+              also search Outline directly within Slack using{' '}
+              <code>/outline &lt;keyword&gt;</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, and bug fixes for
-              free.
+              You get new features, interface improvements, bug fixes, and a
+              transparent roadmap for free.
             </p>
             <p>
               <a href={githubUrl()}>GitHub</a>
@@ -138,7 +144,7 @@ const Screenshot = styled.img`
 `;
 
 const Highlights = styled(Grid)`
-  background: ${props => props.theme.yellow};
+  background: ${props => props.theme.primary};
   margin: 0 1em;
   padding: 0 1em;
 `;
@@ -149,7 +155,7 @@ const Features = styled(Grid)`
 `;
 
 const Feature = styled(Grid.Unit)`
-  padding: 4em 3em;
+  padding: 3em 0;
 
   h2 {
     margin-top: 0;
@@ -162,12 +168,20 @@ const Feature = styled(Grid.Unit)`
     font-weight: 500;
     font-size: 14px;
   }
+
+  ${breakpoint('tablet')`
+    padding: 4em 3em;
+  `};
 `;
 
 const Footer = styled.div`
   text-align: center;
   width: 100%;
-  padding: 6em 4em;
+  padding: 4em 2em;
+
+  ${breakpoint('tablet')`
+    padding: 6em 4em;
+  `};
 `;
 
 const FooterCTA = styled.p`

server/pages/components/SigninButtons.js

@@ -5,6 +5,7 @@ import { signin } from '../../../shared/utils/routeHelpers';
 import Flex from '../../../shared/components/Flex';
 import GoogleLogo from '../../../shared/components/GoogleLogo';
 import SlackLogo from '../../../shared/components/SlackLogo';
+import breakpoint from 'styled-components-breakpoint';
 
 type Props = {
   lastSignedIn: string,
@@ -18,7 +19,7 @@ const SigninButtons = ({
   googleSigninEnabled,
 }: Props) => {
   return (
-    <Flex justify="center">
+    <Wrapper>
       {slackSigninEnabled && (
         <Flex column>
           <Button href={signin('slack')}>
@@ -43,10 +44,19 @@ const SigninButtons = ({
           </LastLogin>
         </Flex>
       )}
-    </Flex>
+    </Wrapper>
   );
 };
 
+const Wrapper = styled(Flex)`
+  display: block;
+  justify-content: center;
+
+  ${breakpoint('tablet')`
+    display: flex;
+  `};
+`;
+
 const Spacer = styled.span`
   padding-left: 10px;
 `;

server/utils/prefetchTags.js

@@ -20,11 +20,21 @@ try {
     if (typeof filename !== 'string') return;
     if (filename.endsWith('.js')) {
       prefetchTags.push(
-        <link rel="prefetch" href={`${PUBLIC_PATH}${filename}`} as="script" />
+        <link
+          rel="prefetch"
+          href={`${PUBLIC_PATH}${filename}`}
+          key={filename}
+          as="script"
+        />
       );
     } else if (filename.endsWith('.css')) {
       prefetchTags.push(
-        <link rel="prefetch" href={`${PUBLIC_PATH}${filename}`} as="style" />
+        <link
+          rel="prefetch"
+          href={`${PUBLIC_PATH}${filename}`}
+          key={filename}
+          as="style"
+        />
       );
     }
   });

shared/utils/routeHelpers.js

@@ -33,6 +33,10 @@ export function githubIssuesUrl(): string {
   return 'https://www.github.com/outline/outline/issues';
 }
 
+export function slackAppStoreUrl(): string {
+  return 'https://goabstract.slack.com/apps/A0W3UMKBQ-outline';
+}
+
 export function blogUrl(): string {
   return 'https://medium.com/getoutline';
 }