Created PoC Tutorial for signup

package.json

@@ -55,7 +55,7 @@
         "react-google-maps-loader": "^4.2.6",
         "react-google-places-suggest": "^3.8.0",
         "react-icons": "^3.8.0",
-        "react-joyride": "^2.3.2",
+        "react-joyride": "^2.4.0",
         "react-js-pagination": "^3.0.3",
         "react-lazy-load": "^3.0.13",
         "react-linkify": "^1.0.0-alpha",

src/components/dashboard/DashTutorial.tsx

@@ -5,12 +5,12 @@ export class DashTutorial extends React.Component {
     state = {
         steps: [
             {
-                target: "body",
+                target: ".form-control",
                 content: "Welcome to the Mapscout Admin Dashboard! Create and customize your own resource map through our dashboard."
             }, 
             {
-                target: ".add-button-wrapper",
-                content: "You can start listing locations here.",
+                target: ".btn-toolbar",
+                content: "You can't start listing locations here.",
             },
             {
                 target: ".export-button-wrapper",

src/components/home/HomeTutorial.tsx

@@ -0,0 +1,33 @@
+import React, {useState} from 'react'
+import ReactJoyride, {Step} from 'react-joyride'
+
+export class HomeTutorial extends React.Component {
+    state = {
+        steps: [
+            {
+                target: "body",
+                content: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
+            }, 
+            {
+                target: ".btn-primary",
+                content: "Click here to take the next step.",
+            },
+            {
+                target: ".input-group",
+                content: "Input your email to complete the sign-up process!",
+            },
+        ]
+    }
+
+    render () {
+        const { steps } = this.state;
+
+        return (
+          <div className="joyride">
+            <ReactJoyride
+              steps={steps}
+            />
+          </div>
+        );
+      }
+    }

src/components/home/index.tsx

@@ -7,6 +7,7 @@ import Button from 'react-bootstrap/Button';
 import Form from 'react-bootstrap/Form';
 import InputGroup from 'react-bootstrap/InputGroup';
 import YouTube, { Options } from 'react-youtube';
+import { HomeTutorial } from './HomeTutorial';
 
 import { authRoute, providerRoute } from '../../routes/pathnames';
 
@@ -54,6 +55,7 @@ function Home({ firebaseAuth, firestore }) {
 
   return (
     <div id="homepage-root">
+      <HomeTutorial />
       <span id="homepage-background">
         <img src={background} alt="background" />
       </span>

src/index.tsx

@@ -9,6 +9,7 @@ import { store, history } from './store';
 import routes from './routes';
 import { SENTRY_API_KEY } from './config/keys';
 import './assets/styles/style';
+import Joyride from 'react-joyride';
 
 Sentry.init({
   dsn: SENTRY_API_KEY,
@@ -26,6 +27,8 @@ const getRoutes = async () => {
       return arr;
     });
 
+
+
   // render the main component
   ReactDOM.render(
     <Provider store={store}>
@@ -38,3 +41,4 @@ const getRoutes = async () => {
 };
 
 getRoutes();
+