From 80ddf83547e445120c58f392322f5f2afbcd7a8e Mon Sep 17 00:00:00 2001
From: Tallys Martins <tallysmartins@gmail.com>
Date: Tue, 31 Jul 2018 11:00:15 -0300
Subject: [PATCH] Adds IndexPage

Signed-off-by: Tallys Martins <tallysmartins@gmail.com>
---
 src/containers/pages/IndexPage/index.js  | 86 ++++++++++++++++++++++--
 src/containers/pages/IndexPage/styles.js | 17 +++++
 src/routes/index.js                      |  4 +-
 3 files changed, 102 insertions(+), 5 deletions(-)
 create mode 100644 src/containers/pages/IndexPage/styles.js

diff --git a/src/containers/pages/IndexPage/index.js b/src/containers/pages/IndexPage/index.js
index c78be82..946b06a 100644
--- a/src/containers/pages/IndexPage/index.js
+++ b/src/containers/pages/IndexPage/index.js
@@ -1,11 +1,89 @@
 import React from 'react';
-import { compose, pure } from 'recompose'
+import { withRouter } from 'react-router'
+import { compose, pure, withHandlers } from 'recompose'
+
+import { withStyles } from 'material-ui/styles';
+import Grid from 'material-ui/Grid'
+import Typography from 'material-ui/Typography'
+import Button from 'material-ui/Button'
+
 import Page from 'components/Page'
+import ElixirBenchLogo from 'components/ElixirBenchLogo'
+
+import styles from './styles'
+
+const IndexPage = ({ classes, onClickGoToRepositories }) => (
+  <Page>
+    <Grid align="center">
+      <Typography variant="display3" align="center" style={{fontFamily: 'serif'}}>
+        ELIXIR
+        <ElixirBenchLogo color="primary" style={{ fontSize: "76px" }}/>
+        BENCH
+      </Typography>
+      <Typography variant="headline" align="center" style={{borderBottom: '2px solid gray'}}>
+        Long Running Benchmarks for Elixir Projects
+      </Typography>
+    </Grid>
+
+    <Grid container className={ classes.gridContainer } align="center">
+      <Grid item xs={ 12 } sm={ 12 } md={ 4 }>
+        <Grid >
+          <Typography variant='display1' className={ classes.gridTitle }>
+            What is ElixirBench?
+          </Typography>
+
+          <Typography align='justify' className={ classes.gridDescription }>
+            ElixirBench is a platform for running benchmarks for projects hosted
+            on Github. Our platform empower developers to easily monitor and detect
+            performance regressions. Like a CI, you can have your scripts running
+            automatically on every change. We provide graphics for temporal
+            tracking of the the performance of each new commits and pull requests
+            to your project.
+          </Typography>
+        </Grid>
+      </Grid>
+      <Grid item xs={ 12 } sm={ 12 } md={ 4 }>
+        <Typography variant='display1' className={ classes.gridTitle }>
+          Setup your benchmarks
+        </Typography>
+
+        <Typography align='justify' className={ classes.gridDescription }>
+          Easily setup a benchee/config.yml and the benchmark scripts to start collecting
+          performance metrics for your project. We currently support benchmarks
+          written with Benchee, a powerful library specially designed to test
+          and measure performance of Elixir code. See the examples of the
+          Ecto library.
+        </Typography>
+      </Grid>
+      <Grid item xs={ 12 } sm={ 12 } md={ 4 }>
+        <Typography variant='display1' className={ classes.gridTitle }>
+          Reliable Hardware
+        </Typography>
+
+        <Typography align='justify' className={ classes.gridDescription }>
+          Confident hardware infrastructure that runs one benchmark job at a time,
+          all within docker containers and the benefits of isolated and clean
+          environments for the execution of benchmark jobs. Also, our application
+          is being designed to support independent runners, so projects will soon
+          be able to fully control their benchmark environments and hardware
+          infrasctructure.
+        </Typography>
+      </Grid>
+    </Grid>
 
-const IndexPage = () => (
-  <Page title="Home page"></Page>
+    <Grid align="center">
+      <Button className={ classes.button } color="primary" size='large' variant='raised' onClick={ onClickGoToRepositories }>View tracked repositories</Button>
+    </Grid>
+  </Page>
 )
 
 export default compose(
-  pure
+  pure,
+  withRouter,
+  withStyles(styles),
+  withHandlers({
+    onClickGoToRepositories: ({ router }) => () => (
+      router.push('repos')
+    )
+  })
 )(IndexPage);
diff --git a/src/containers/pages/IndexPage/styles.js b/src/containers/pages/IndexPage/styles.js
new file mode 100644
index 0000000..a0dd404
--- /dev/null
+++ b/src/containers/pages/IndexPage/styles.js
@@ -0,0 +1,17 @@
+export default () => ({
+  root: {},
+  gridDescription: {
+    lineHeight: 2,
+    fontSize: 20,
+    padding: 20,
+  },
+  gridTitle: {
+    fontFamily: 'monospace',
+  },
+  gridContainer: {
+    marginTop: '40px',
+  },
+  button: {
+    marginTop: '30px',
+  }
+})
diff --git a/src/routes/index.js b/src/routes/index.js
index 20cffed..968028e 100644
--- a/src/routes/index.js
+++ b/src/routes/index.js
@@ -3,6 +3,7 @@ import { IndexRoute, Router, Route, IndexRedirect } from 'react-router'
 import { syncHistoryWithStore } from 'react-router-redux'
 
 import AppLayout from 'containers/layouts/AppLayout'
+import IndexPage from 'containers/pages/IndexPage'
 import NotFoundPage from 'containers/pages/NotFoundPage'
 import ReposListPage from 'containers/pages/ReposListPage'
 import RepoDetailsPage from 'containers/pages/RepoDetailsPage'
@@ -12,7 +13,8 @@ import JobDetailsPage from 'containers/pages/JobDetailsPage'
 export default ({ store, history }) => (
   <Router history={ syncHistoryWithStore(history, store) }>
     <Route path="/" component={ AppLayout }>
-      <IndexRedirect to="repos" />
+      <IndexRedirect to="index" />
+      <Route path="index" component={ IndexPage } />
       <Route path="repos">
         <IndexRoute component={ ReposListPage } />
         <Route path=":owner/:repo">