text: // @flow
  import * as React from 'react';
  import { Helmet } from 'react-helmet';
  import styled from 'styled-components';
  import Grid from 'styled-components-grid';
  import AuthNotices from './components/AuthNotices';
  import Hero from './components/Hero';
  import HeroText from './components/HeroText';
  import SigninButtons from './components/SigninButtons';
  import Branding from '../../shared/components/Branding';
  import { githubUrl } from '../../shared/utils/routeHelpers';
  
  type Props = {
    notice?: 'google-hd' | 'auth-error' | 'hd-not-allowed',
    lastSignedIn: string,
    googleSigninEnabled: boolean,
    slackSigninEnabled: boolean,
  };
  
  function Home(props: Props) {
    return (
      <span>
        <Helmet>
          <title>Outline - Team wiki & knowledge base</title>
        </Helmet>
        <Grid>
          <Hero id="signin">
            <AuthNotices notice={props.notice} />
            {process.env.TEAM_LOGO && <Logo src={process.env.TEAM_LOGO} />}
            <h1>Our team’s knowledge base</h1>
            <HeroText>
              Team wiki, documentation, meeting notes, playbooks, onboarding, work
              logs, brainstorming, & more…
            </HeroText>
            <p>
              <SigninButtons {...props} />
            </p>
          </Hero>
        </Grid>
        <Branding href={githubUrl()} />
      </span>
    );
  }
  
  const Logo = styled.img`
    height: 60px;
    border-radius: 4px;
  `;
  
  export default Home;
  