updated the filenames

src/components/App/App.component.js

@@ -3,7 +3,7 @@ import "./App.css";
 
 import PropTypes from "prop-types";
 
-import { Quiz, Results } from "components";
+import { Quiz, Completed } from "components";
 
 class App extends Component {
     static propTypes = {
@@ -17,7 +17,7 @@ class App extends Component {
 
         switch (state) {
             case `completed`:
-                content = <Results />;
+                content = <Completed />;
                 break;
 
             case `quiz`:

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

@@ -0,0 +1,21 @@
+import React, { PureComponent } from "react";
+
+
+import {
+    CompletedHeader,
+    Results,
+} from "components";
+
+import "./Completed.css";
+
+export default class Completed extends PureComponent {
+    render() {
+
+        return (
+            <div className={`Completed`}>
+                <CompletedHeader/>
+                <Results/>
+            </div>
+        );
+    }
+}

src/components/Results/Results/Results.container.js → src/components/Completed/Completed/Completed.container.js

@@ -2,8 +2,8 @@ import { connect } from "react-redux";
 
 import { quizNameSelector } from "selectors";
 
-import Results from "./Results.component";
+import CompletedResults from "./Completed.component";
 
 export default connect((st) => ({
     name: quizNameSelector(st),
-}))(Results);
+}))(CompletedResults);

src/components/Completed/Completed/Completed.css

@@ -0,0 +1,5 @@
+.Completed {
+    padding: 80px 20px 0;
+}
+
+

src/components/Completed/Completed/index.js

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

src/components/Completed/CompletedHeader/CompletedHeader.component.js

@@ -0,0 +1,55 @@
+import React, { PureComponent } from 'react';
+
+import PropTypes from 'prop-types';
+
+import {
+
+} from 'components';
+
+import './CompletedHeader.css';
+
+export default class CompletedHeader extends PureComponent {
+    static propTypes = {
+        name: PropTypes.string.isRequired,
+    };
+
+    render() {
+        const {name} = this.props;
+
+        return (
+            <header className={`CompletedHeader`}>
+                <div className={`CompletedHeader__header-content`}>
+                    <h1 className={`CompletedHeader__title`}>{`Congratulations ${name}, you're finished!`}</h1>
+                    <h2 className={`CompletedHeader__coding-strength`}>
+                        {`Your Coding Strength is: `}
+                        <strong>{`Javascript Proficiency`}</strong>
+                    </h2>
+                    <p>
+                        Based on your responses, you have solid
+                        understanding of the foundational JavaScript
+                        essentials you need to learn mobile app development.
+                        Consider getting started with a training program
+                        that offers opportunities for practical, real world
+                        experience building apps.
+                    </p>
+
+                    <p>
+                        You can review your results below, and we also sent
+                        a recap email with your responses to your inbox. If
+                        you want me to review your assessment results and
+                        provide completely personalized recommendations to
+                        make sure you get started right, click below to book
+                        a <strong>{`free 15-minute coaching session`}</strong>{` `}
+                        with me!
+                    </p>
+                    <a
+                        href={`#`}
+                        className={`CompletedHeader__schedule-call-button btn`}
+                    >
+                        Schedule a free coaching call
+                    </a>
+                </div>
+            </header>
+        );
+    }
+}

src/components/Completed/CompletedHeader/CompletedHeader.container.js

@@ -0,0 +1,12 @@
+import { connect } from 'react-redux';
+
+import {
+    quizNameSelector,
+} from 'selectors';
+
+
+import CompletedHeader from './CompletedHeader.component';
+
+export default connect((st) => ({
+    name: quizNameSelector(st),
+}), {})(CompletedHeader);

src/components/Results/Results/Results.css → src/components/Completed/CompletedHeader/CompletedHeader.css

@@ -1,30 +1,27 @@
-.Results {
-    padding: 80px 20px 0;
-}
-
-.Results__header {
+.CompletedHeader {
     padding-bottom: 45px;
     margin-bottom: 45px;
     border-bottom: 1px solid #E8E8E8
 }
 
-.Results__header-content {
+.CompletedHeader__header-content {
     max-width: 800px;
 }
 
-.Results__title {
+.CompletedHeader__title {
     color: var(--very-dark-blue);
     font-size: 2rem;
+    line-height: 1.3;
     margin-bottom: 40px;
     font-weight: 900;
 }
 
-.Results__coding-strength {
+.CompletedHeader__coding-strength {
     font-size: 1.5rem;
+    line-height: 1.3;
     margin-bottom: 20px;
 }
 
-.Results__schedule-call-button {
+.CompletedHeader__schedule-call-button {
     margin-top: 25px
 }
-

src/components/Completed/CompletedHeader/index.js

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

src/components/Results/ResultsList/ResultsList.component.js → src/components/Completed/CompletedResultsList/CompletedResultsList.component.js

@@ -6,9 +6,9 @@ import {
     questions,
 } from 'questions';
 
-import './ResultsList.css';
+import './CompletedResultsList.css';
 
-export default class ResultsList extends PureComponent {
+export default class CompletedResultsList extends PureComponent {
     static propTypes = {
         answers: PropTypes.arrayOf(PropTypes.shape({
             id: PropTypes.string.isRequired,
@@ -20,13 +20,13 @@ export default class ResultsList extends PureComponent {
         const { answers } = this.props;
 
         return (
-            <ol className={`ResultsList`}>
+            <ol className={`CompletedResultsList`}>
                 {answers.map((answer, i) => {
                     const { question } = questions.find(q => q.id === answer.id);
 
                     return (
                         <li key={answer.id}>
-                            <p className={`ResultsList__question-title`}>{`${i + 1}. ${question}`}</p>
+                            <p className={`CompletedResultsList__question-title`}>{`${i + 1}. ${question}`}</p>
                         </li>
                     );
                 })}

src/components/Results/ResultsList/ResultsList.container.js → src/components/Completed/CompletedResultsList/CompletedResultsList.container.js

@@ -3,8 +3,8 @@ import { connect } from 'react-redux';
 import {quizAnswersSelector} from 'selectors';
 
 
-import ResultsList from './ResultsList.component';
+import CompletedResultsList from './CompletedResultsList.component';
 
 export default connect((st) => ({
     answers: quizAnswersSelector(st)
-}), {})(ResultsList);
+}), {})(CompletedResultsList);

src/components/Completed/CompletedResultsList/CompletedResultsList.css

@@ -0,0 +1,12 @@
+.CompletedResultsList {
+    list-style-type: none;
+    margin: 0;
+}
+
+.CompletedResultsList > li {
+    margin: 0
+}
+
+.CompletedResultsList__question-title {
+    margin-bottom: 20px
+}

src/components/Completed/CompletedResultsList/index.js

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

src/components/Completed/Results/Results.component.js

@@ -0,0 +1,22 @@
+import React, { PureComponent } from 'react';
+
+import PropTypes from 'prop-types';
+
+import {
+    CompletedResultsList
+} from 'components';
+
+import './Results.css';
+
+export default class Results extends PureComponent {
+
+    render() {
+
+        return (
+            <div>
+                <h2 className={`Results__title`}>{`Quiz Results`}</h2>
+                <CompletedResultsList/>
+            </div>
+        );
+    }
+}

src/components/Completed/Results/Results.css

@@ -0,0 +1,6 @@
+.Results__title {
+    font-size: 2rem;
+    color: var(--dark-gray);
+    margin-bottom: 40px;
+    font-weight: 900
+}

src/components/Completed/Results/index.js

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

src/components/Completed/index.js

@@ -0,0 +1,4 @@
+export * from './Completed';
+export * from './CompletedHeader';
+export * from './CompletedResultsList';
+export * from './Results';

src/components/index.js

@@ -1,11 +1,11 @@
 export * from './ActionButton';
 export * from './ActivityIndicator';
 export * from './App';
+export * from './Completed';
 export * from './EmailCapture';
 export * from './NameCapture';
 export * from './QuestionAnswer';
 export * from './Quiz';
 export * from './QuizProgressIndicator';
 export * from './QuizQuestion';
-export * from './Results';
 export * from './TextInput';