import React from 'react'
import Link from 'next/link'
import { initStore } from '../redux/store'
import { startClock, randomQuote } from '../redux/actions'
import withRedux from 'next-redux-wrapper'
import ContactForm from '../components/ContactForm'
import SyncValidationForm from '../components/SyncValidationForm'
import RenderStatus from '../components/RenderStatus'

class IndexPage extends React.Component {
  static async getInitialProps ({store, isServer, dispatch}) {
    store.dispatch(startClock())
    return { isServer, dispatch }
  }

  constructor (props) {
    super(props)
    this.submit = this.submit.bind(this)
  }

  submit (values) {
    // Do something with the form values
    console.log(values)
  }

  render () {
    return <div>
      <section className='align--center section__hero'>
        <div className='section__cover'>
          <div>
            <h1 className='section__hero-headline'>
              Next<small className='section__hero-headline--js'>.js</small> Boilerplate
            </h1>
            <h2 className='section__hero-subheadline'>
              Universal React Redux Webapps
            </h2>
            <RenderStatus isServer={this.props.isServer} />
          </div>
        </div>
      </section>
      <div>
        <br />
        <button onClick={() => { this.props.dispatch(randomQuote()) }}>random quote</button>
      </div>
      <hr />
      <br />
      <Link prefetch href='/about'><a className='large'>About</a></Link>
      <br />
      <ContactForm onSubmit={this.submit} />
      <hr />
      <SyncValidationForm onSubmit={this.submit} />
      <style jsx>{`
        body {
          margin: 0
        }
        .section__hero {
          background: url(https://s3.eu-west-2.amazonaws.com/img-repo/image3-opt.jpg) no-repeat center center fixed; 
          -webkit-background-size: cover;
          -moz-background-size: cover;
          -o-background-size: cover;
          background-size: cover;
          min-height: 100vh;
        }
        .section__cover {
          min-height: inherit;
          background-color: rgba(146, 146, 146, 0.84);
          color: white;
        }
        .section__hero-headline {
          font-size: 4.5em;
          padding-top: 25vh;
          margin: 0;
        }
        .section__hero-subheadline {
          color: rgba(255, 255, 255, 0.95);
          font-weight: 400;
        }
        .section__hero-headline--js {
          font-size: 2.0rem;
          font-weight: 400;
        }
        @media (max-width: 720px) {
          .section__hero-headline {
            font-size: 2em;
            padding-top: 8vh;
          }
          .section__hero-headline--js {
            font-size: 1rem;
          }
        }
        `}</style>
    </div>
  }
}

export default withRedux(initStore)(IndexPage)

@@ -364,16 +364,70 @@
 rStatus'
+%0Aimport HomeFeatures from '../components/HomeFeatures'
 %0A%0Aclass 
@@ -1090,17 +1090,17 @@
       %3Ch
-2
+4
  classNa
@@ -1170,19 +1170,28 @@
 edux Web
-app
+ Application
 s%0A      
@@ -1199,17 +1199,17 @@
      %3C/h
-2
+4
 %3E%0A      
@@ -1275,24 +1275,51 @@
      %3C/div%3E%0A
+          %3CHomeFeatures /%3E%0A
         %3C/di
@@ -1349,1479 +1349,29 @@
    %3C
-div%3E%0A        %3Cbr /%3E%0A        %3Cbutton onClick=%7B() =%3E %7B this.props.dispatch(randomQuote()) %7D%7D%3Erandom quote%3C/button%3E%0A      %3C/div%3E%0A      %3Chr /%3E%0A      %3Cbr /%3E%0A      %3CLink prefetch href='/about'%3E%3Ca className='large'%3EAbout%3C/a%3E%3C/Link%3E%0A      %3Cbr /%3E%0A      %3CContactForm onSubmit=%7Bthis.submit%7D /%3E%0A      %3Chr /%3E%0A      %3CSyncValidationForm onSubmit=%7Bthis.submit%7D /%3E%0A      %3Cstyle jsx%3E%7B%60%0A        body %7B%0A          margin: 0%0A        %7D%0A        .section__hero %7B%0A          background: url(https://s3.eu-west-2.amazonaws.com/img-repo/image3-opt.jpg) no-repeat center center fixed; %0A          -webkit-background-size: cover;%0A          -moz-background-size: cover;%0A          -o-background-size: cover;%0A          background-size: cover;%0A          min-height: 100vh;%0A        %7D%0A        .section__cover %7B%0A          min-height: inherit;%0A          background-color: rgba(146, 146, 146, 0.84);%0A          color: white;%0A        %7D%0A        .section__hero-headline %7B%0A          font-size: 4.5em;%0A          padding-top: 25vh;%0A          margin: 0;%0A        %7D%0A        .section__hero-subheadline %7B%0A          color: rgba(255, 255, 255, 0.95);%0A          font-weight: 400;%0A        %7D%0A        .section__hero-headline--js %7B%0A          font-size: 2.0rem;%0A          font-weight: 400;%0A        %7D%0A        @media (max-width: 720px) %7B%0A          .section__hero-headline %7B%0A            font-size: 2em;%0A            padding-top: 8vh;%0A          %7D%0A          .section__hero-headline--js %7B%0A            font-size: 1rem;%0A          %7D%0A        %7D
+style jsx%3E%7B%60%0A        
 %0A   

Remove second page content