Improve intro

Author: a602484

src/Home.js

@@ -1,25 +1,37 @@
-import React, {Fragment} from 'react';
+import React, {Fragment} from 'react'
+import styled from 'styled-components'
 
+const Paragraph = styled.p`
+  width: 340px;
+  padding-left: 12px;
+  padding-right: 12px;
+  padding-top: 8px;
+`
+const H2 = styled.h2`
+  margin-left: 12px;
+`
+const Code = styled.code`
+  font-size: 14px;
+`
 const Home = () => {
   return (
     <Fragment>
-      <h1>Home</h1>
-      <p>
-        <b>react-wizard</b> is a step-by-step _wizard_ workflow written in JavaScript with
-        <a href="https://reactjs.org/">React</a>. It demonstrates an implementation of the
-        <a href="https://reactjs.org/docs/hooks-reference.html#usecontext">useContext</a> hook to
-        share a user's input form data (application "state") across components.
-      </p>
-      <p>
-        The step-by-step workflow is applied to a hypothetical task scheduling feature.
-      </p>
-      <p>
-        All form input in this application, whether text input, checkbox, or select, is auto-generated from the
-        initial state of the context in _WizardContext.js_.
-      </p>
-      <p>
-        Click <a href='/wizard'>Wizard</a> to try demo.
-      </p>
+      <H2>Home</H2>
+      <Paragraph>
+        <b>react-wizard</b> is a step-by-step <i>wizard</i> written in JavaScript with
+        using <a href="https://reactjs.org/">React</a>. It demonstrates the <a href="https://reactjs.org/docs/hooks-reference.html#usecontext">useContext</a> hook
+        to share form data across components.
+      </Paragraph>
+      <Paragraph>
+        A step-by-step workflow is applied to a hypothetical task scheduling feature.
+      </Paragraph>
+      <Paragraph>
+        All form input, whether text input, checkbox, or select, is auto-generated from the
+        initial state of the context in <Code>WizardContext.js</Code>.
+      </Paragraph>
+      <Paragraph>
+        Click <a href='/wizard'>react-wizard</a> to try the demo.
+      </Paragraph>
     </Fragment>
   );
 }

src/NotFound.js

@@ -8,7 +8,7 @@ const NotFound = () => {
         Route is not supported.
       </p>
       <p>
-        Click <a href='/wizard'>Wizard</a> to try demo.
+        Click <a href='/wizard'>react-wizard</a> to try demo.
       </p>
     </Fragment>
   );

src/Routes.js

@@ -4,7 +4,7 @@ import RouteWithLayout from './RouteWithLayout';
 import Layout from './components/Layout'
 import Home from './Home'
 import NotFound from './NotFound'
-import WizardForm from './components/WizardForm'
+import Wizard from './components/Wizard'
 
 const Routes = () => {
   return (
@@ -16,7 +16,7 @@ const Routes = () => {
         path="/"
       />
       <RouteWithLayout
-        component={WizardForm}
+        component={Wizard}
         layout={Layout}
         exact
         path='/wizard'