{"size": 3379, "ext": "js", "max_stars_repo_path": "app/containers/HomePage/index.js", "max_stars_repo_name": "shanm19/react-theming", "max_stars_repo_stars_event_min_datetime": "2019-11-06T18:49:47.000Z", "max_stars_repo_stars_event_max_datetime": "2019-11-06T18:49:47.000Z", "max_issues_repo_path": "app/containers/HomePage/index.js", "max_issues_repo_name": "shanm19/react-theming", "max_issues_repo_issues_event_min_datetime": "2020-04-06T11:29:37.000Z", "max_issues_repo_issues_event_max_datetime": "2021-09-02T22:37:43.000Z", "max_forks_repo_path": "app/containers/HomePage/index.js", "max_forks_repo_name": "shanm19/react-theming", "max_forks_repo_forks_event_min_datetime": null, "max_forks_repo_forks_event_max_datetime": null}
{"max_stars_count": 1, "max_issues_count": 3, "max_forks_count": null, "avg_line_length": 34.8350515464, "max_line_length": 91, "alphanum_fraction": 0.4977804084}
/*
 * HomePage
 *
 * This is the first thing users see of our App, at the '/' route
 *
 */

import React from 'react';
// import { FormattedMessage } from 'react-intl';
import L from 'components/L';
import Button from 'components/Button';
import Type from 'components/Type';
import Paper from 'components/Paper';
import messages from './messages';

export default function HomePage() {
  return (
    <L>
      <L bgColor="primary">
        <L container display="grid" gap={3} pY={8}>
          <Type variant="h1" messages={messages.head} />
          <Type variant="body" messages={messages.subhead} />
          <Button color="secondary">
            <Type messages={messages.button} />
          </Button>
          <L display="grid" flow={{ xx: "row", md: "column" }} gap={2}>
            <Paper p={2} depth={2} depthHover={6} round>
              <L display="grid" gap={2}>
                <Type messages={messages.paper} />
                <Button outlined color="primary">
                  <Type messages={messages.button} />
                </Button>
              </L>
            </Paper>
            <Paper p={2} depth={2} depthHover={6} round>
              <L display="grid" gap={2}>
                <Type messages={messages.paper} />
                <Button outlined color="primary">
                  <Type messages={messages.button} />
                </Button>
              </L>
            </Paper>
            <Paper p={2} depth={2} depthHover={6} round>
              <L display="grid" gap={2}>
                <Type messages={messages.paper} />
                <Button outlined color="primary">
                  <Type messages={messages.button} />
                </Button>
              </L>
            </Paper>
          </L>
        </L>
      </L>
      <L display="grid" flow={{ xx: "row", md: "column" }}>
        <L display="grid" gap={2} pY={10} pX={10} jc={{ md: 'flex-end' }}>
          <Type variant="h1" messages={messages.head} />
          <Type variant="body" messages={messages.subhead} />
          <Button color="primary">
            <Type messages={messages.button} />
          </Button>
        </L>
        <L display="grid" gap={2} bgGradient="a" pY={10} pX={10} jc={{ md: 'flex-start' }}>
          <Type variant="h1" messages={messages.head} />
          <Type variant="body" messages={messages.subhead} />
          <Button color="primary">
            <Type messages={messages.button} />
          </Button>
        </L>
      </L>
      <L bgColor="secondary">
        <L container display="grid" gap={3} pY={8}>
          <Type variant="h1" messages={messages.head} />
          <Type variant="body" messages={messages.subhead} />
          <Button color="primary">
            <Type messages={messages.button} />
          </Button>
          <Paper p={2} depth={2} depthHover={6} round>
            <Type messages={messages.paper} />
          </Paper>
        </L>
      </L>
      <L>
        <L container display="grid" gap={3} pY={8}>
          <Type variant="h1" messages={messages.head} />
          <Type variant="body" messages={messages.subhead} />
          <Button color="primary">
            <Type messages={messages.button} />
          </Button>
          <Paper p={2} depth={2} depthHover={6} round>
            <Type messages={messages.paper} />
          </Paper>
        </L>
      </L>
    </L>
  );
}
