put in landing page

src/App.component.js

@@ -4,15 +4,24 @@ import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
 
 import './App.css';
 
-import { Quiz, Completed } from 'src/components';
+import {
+    Quiz,
+    Completed,
+    Landing,
+    NameCapture,
+    EmailCapture,
+} from 'src/components';
 
 class App extends Component {
     render() {
         return (
             <Router basename={'/quiz'}>
                 <div className={'App'}>
                     <Switch>
-                        <Route exact path={'/'} component={Quiz} />
+                        <Route exact path={'/'} component={Landing} />
+                        <Route path={'/name'} component={NameCapture} />
+                        <Route path={'/questions'} component={Quiz} />
+                        <Route path={'/email'} component={EmailCapture} />
                         <Route path={'/completed'} component={Completed} />
                     </Switch>
                 </div>

src/components/Checkbox/Checkbox.component.js

@@ -7,7 +7,7 @@ import PropTypes from 'prop-types';
 
 import './Checkbox.css';
 
-const greenCheckmark = require('./check.svg');
+const greenCheckmark = require('../../images/check.svg');
 
 type CheckboxProps = {
     onChange: Function,

src/components/Completed/CompletedResultsList/CompletedResultsList.component.js

@@ -12,9 +12,9 @@ import { Question, Answer, CodeFigure } from 'src/components';
 
 import './CompletedResultsList.css';
 
-const greenCheckmark = require('./green-checkmark.svg');
+const greenCheckmark = require('../../../images/green-checkmark.svg');
 
-const redX = require('./red-x.svg');
+const redX = require('../../../images/red-x.svg');
 
 export default class CompletedResultsList extends PureComponent {
     static propTypes = {

src/components/EmailCapture/EmailCapture/EmailCapture.component.js

@@ -6,12 +6,26 @@ import {
     SubscribeToMailingListCheckbox,
 } from 'src/components';
 
+import PropTypes from 'prop-types';
+
 import './EmailCapture.css';
 
 export default class EmailCapture extends PureComponent {
+    static propTypes = {
+        onSubmit: PropTypes.func.isRequired,
+    };
+
+    handleOnSubmit = (e) => {
+        const { onSubmit } = this.props;
+
+        e.preventDefault();
+
+        onSubmit();
+    };
+
     render() {
         return (
-            <div className={'EmailCapture'}>
+            <form onSubmit={this.handleOnSubmit} className={'EmailCapture'}>
                 <div className={'EmailCapture__wrapper'}>
                     <h2 className={'EmailCapture__title'}>
                         {`Ready to find out if you have what it takes to develop
@@ -31,7 +45,7 @@ export default class EmailCapture extends PureComponent {
                         </div>
                     </div>
                 </div>
-            </div>
+            </form>
         );
     }
 }

src/components/EmailCapture/EmailCapture/EmailCapture.container.js

@@ -0,0 +1,9 @@
+import { connect } from 'react-redux';
+
+import EmailCapture from './EmailCapture.component';
+
+import { submitQuizAction as onSubmit } from 'src/store/quiz/quiz.actions';
+
+export default connect(null, {
+    onSubmit,
+})(EmailCapture);

src/components/EmailCapture/EmailCapture/index.js

@@ -1 +1 @@
-export { default as EmailCapture } from './EmailCapture.component';
+export { default as EmailCapture } from './EmailCapture.container';

src/components/Landing/Landing/Landing.component.js

@@ -0,0 +1,46 @@
+import * as React from 'react';
+
+import { LandingGetStartedButton } from 'src/components';
+
+import './Landing.css';
+
+export default class Landing extends React.PureComponent {
+    render() {
+        return (
+            <div className={'Landing'}>
+                <div className={'Landing__main-content'}>
+                    <h1 className={'Landing__title'}>
+                        Do You Have What It Takes To Develop Mobile Apps?
+                    </h1>
+                    <p>
+                        Note: This assessment is for developers who already have
+                        a basic understanding of HTML, CSS and Javascript. To
+                        get the most accurate results, use your current
+                        knowledge and skills to answer each question to the best
+                        of your ability, and avoid looking things up online.
+                    </p>
+                    <p>
+                        Don't worry about getting every answer correct. The
+                        questions range in subject matter and difficulty to
+                        accurately assess your readiness to successfully learn
+                        mobile app development and determine the right next
+                        steps for you should take to get started.
+                    </p>
+                    <div className={'Landing__start-button'}>
+                        <LandingGetStartedButton />
+                    </div>
+                </div>
+                <div className={'Landing__image'}>
+                    <img
+                        className={'Landing__devices'}
+                        aria-hidden={'true'}
+                        src={
+                            'https://www.danwiltcoaching.com/wp-content/themes/danwiltcoaching/img/app.svg'
+                        }
+                        alt={'iPhone and iPad'}
+                    />
+                </div>
+            </div>
+        );
+    }
+}

src/components/Landing/Landing/Landing.css

@@ -0,0 +1,48 @@
+.Landing {
+    display: flex;
+}
+
+.Landing__main-content {
+    margin-right: 100px;
+}
+
+@media (max-width: 767px) {
+    .Landing__main-content {
+        margin-right: 0;
+    }
+}
+
+.Landing__start-button {
+    margin-top: 24px;
+}
+
+.Landing__title {
+    margin-top: 120px;
+    font-size: 3.2rem;
+    line-height: 4.2rem;
+    font-weight: 800;
+    margin-bottom: 20px;
+}
+
+.Landing__image {
+    flex-shrink: 0;
+    width: 40.4980237%;
+    position: relative;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    margin-right: 24px;
+}
+
+@media (max-width: 767px) {
+    .Landing__image {
+        display: none;
+    }
+}
+
+
+.Landing__devices {
+    display: block;
+    width: 100%;
+    height: auto;
+}

src/components/Landing/Landing/index.js

@@ -0,0 +1 @@
+export { default as Landing } from './Landing.component';

src/components/Landing/LandingGetStartedButton/LandingGetStartedButton.component.js

@@ -0,0 +1,15 @@
+import * as React from 'react';
+
+import PropTypes from 'prop-types';
+
+import { ActionButton } from 'src/components';
+
+export default class LandingGetStartedButton extends React.PureComponent {
+    static propTypes = {
+        onClick: PropTypes.func.isRequired,
+    };
+
+    render() {
+        return <ActionButton {...this.props}>Get Started</ActionButton>;
+    }
+}

src/components/Landing/LandingGetStartedButton/LandingGetStartedButton.container.js

@@ -0,0 +1,13 @@
+import { connect } from 'react-redux';
+
+import { withRouter } from 'react-router-dom';
+
+import { startQuizAction } from 'src/store/quiz/quiz.actions';
+
+import LandingGetStartedButton from './LandingGetStartedButton.component';
+
+export default withRouter(
+    connect(null, (dispatch, { history }) => ({
+        onClick: () => dispatch(startQuizAction(history)),
+    }))(LandingGetStartedButton)
+);

src/components/Landing/LandingGetStartedButton/index.js

@@ -0,0 +1,3 @@
+export {
+    default as LandingGetStartedButton,
+} from './LandingGetStartedButton.container';

src/components/Landing/index.js

@@ -0,0 +1,2 @@
+export * from './Landing';
+export * from './LandingGetStartedButton';

src/components/NameCapture/NameCapture/NameCapture.component.js

@@ -3,6 +3,7 @@ import React, { PureComponent } from 'react';
 import {
     NameCaptureNameInput,
     NameCaptureContinueButton,
+    QuizTitle,
 } from 'src/components';
 
 import './NameCapture.css';
@@ -11,14 +12,17 @@ export default class NameCapture extends PureComponent {
     render() {
         return (
             <div className={'NameCapture'}>
-                <div className={'NameCapture__wrapper'}>
-                    <p className={'NameCapture__title'}>
-                        {'What\'s your first name?'}
-                    </p>
-                    <div className={'NameCapture__form-wrapper'}>
-                        <NameCaptureNameInput />
-                        <div className={'NameCapture__continue-button'}>
-                            <NameCaptureContinueButton />
+                <QuizTitle />
+                <div className={'NameCapture__container'}>
+                    <div className={'NameCapture__wrapper'}>
+                        <p className={'NameCapture__title'}>
+                            {'What\'s your first name?'}
+                        </p>
+                        <div className={'NameCapture__form-wrapper'}>
+                            <NameCaptureNameInput />
+                            <div className={'NameCapture__continue-button'}>
+                                <NameCaptureContinueButton />
+                            </div>
                         </div>
                     </div>
                 </div>

src/components/NameCapture/NameCapture/NameCapture.css

@@ -1,4 +1,8 @@
 .NameCapture {
+    flex: 1
+}
+
+.NameCapture__container {
     flex: 1;
     display: flex;
     flex-direction: column;

src/components/Quiz/Quiz.component.js

@@ -1,77 +1,29 @@
 import React, { PureComponent } from 'react';
 
-import PropTypes from 'prop-types';
-
-import {
-    QuizQuestion,
-    QuizProgressIndicator,
-    NameCapture,
-    EmailCapture,
-} from 'src/components';
+import { QuizQuestion, QuizProgressIndicator, QuizTitle } from 'src/components';
 
 import { questions } from 'src/questions';
 
 import './Quiz.css';
 
 export default class Quiz extends PureComponent {
-    static propTypes = {
-        state: PropTypes.string.isRequired,
-        onSubmit: PropTypes.func.isRequired,
-        quizComplete: PropTypes.bool.isRequired,
-    };
-
-    handleOnSubmit = (e) => {
-        const { onSubmit, quizComplete, history } = this.props;
-
-        e.preventDefault();
-
-        if (!quizComplete) {
-            return false;
-        } else {
-            onSubmit(history);
-        }
-    };
-
     render() {
-        const { state } = this.props;
-
-        let content = <div />;
-
-        switch (state) {
-            case 'nameCapture':
-                content = <NameCapture />;
-                break;
-
-            case 'emailCapture':
-                content = <EmailCapture />;
-                break;
-
-            case 'question':
-                content = (
-                    <div>
-                        <div className={'Quiz__progress-indicator'}>
-                            <QuizProgressIndicator />
-                        </div>
-                        {questions.map((question, i) => (
-                            <QuizQuestion
-                                questionNumber={i + 1}
-                                key={question.id}
-                                question={question}
-                            />
-                        ))}
-                    </div>
-                );
-                break;
-
-            default:
-                content = <div />;
-        }
-
         return (
-            <form onSubmit={this.handleOnSubmit} className={'Quiz'}>
-                <h1 className={'Quiz__title'}>Javascript Quiz</h1>
-                <div className={'Quiz__content-container'}>{content}</div>
-            </form>
+            <div className={'Quiz'}>
+                <QuizTitle />
+                <div className={'Quiz__content-container'}>
+                    <div className={'Quiz__progress-indicator'}>
+                        <QuizProgressIndicator />
+                    </div>
+                    {questions.map((question, i) => (
+                        <QuizQuestion
+                            questionNumber={i + 1}
+                            key={question.id}
+                            question={question}
+                        />
+                    ))}
+                </div>
+            </div>
         );
     }
 }