text: // @flow
  
  import * as React from 'react';
  import { Divider } from 'antd';
  
  import ContentCard from 'components/ContentCard';
  import styles from './index.css';
  
  class Home extends React.Component<{}> {
    render() {
      return (
        <ContentCard title={null}>
          <h1 className={styles.h1}>Log Analyzer</h1>
          <div className={styles.github}>
            <iframe src="https://ghbtns.com/github-btn.html?user=ColdOrange&repo=loganalyzer&type=star&count=false&size=large" frameBorder="0" scrolling="0" />
          </div>
          <p className={styles.p}>A web-request-log analyzer, used for analyzing log files generated by web servers.</p>
          <Divider className={styles.divider} />
  
          <h2 className={styles.h2}>What can Log Analyzer do for you</h2>
          <p className={styles.p}>
            It will generate a report for each given log file, which offers you the detailed information
            about page views, user views, bandwidth, response time, and information about user agent
            like browsers and operating systems and more.
          </p>
          <div className={styles.video}>
            <video controls width="960" height="600" preload="auto" poster="/static/images/poster.png">
              <source src="/static/videos/demo.mov" />
            </video>
          </div>
          <Divider className={styles.divider} />
  
          <h2 className={styles.h2}>How to use Log Analyzer</h2>
          <div className={styles.code}>
            <div>1. Config database</div>
            <div>2. Config log format and generate report</div>
            <br />
            <div>p.s. A sample log file is provided, just config the database and you can preview the sample report.</div>
          </div>
        </ContentCard>
      );
    }
  }
  
  export default Home;
  