feat(guides): add guides for Welcome Tour and Quick Starts (#156) (#157)

* feat(guides): add guide for first-run tour

* feat(guides): add guide for quickstarts

* formatting

Signed-off-by: Andrew Azores <aazores@redhat.com>

guides/_subsections/getting-help.md

@@ -0,0 +1,60 @@
+## [Getting Help](#getting-help)
+
+The **Cryostat** web application contains online help resources that you can use to learn more about
+how to use **Cryostat** directly within its interface.
+
+### [Welcome Tour](#welcome-tour)
+
+The *Welcome Tour* is a first-run introduction to **Cryostat** that you will see the first time you log in.
+If you clear your browser's local storage, use a private browsing window, or use a different browser, you will see the *Tour* again.
+
+{% include howto_step.html
+  summary="Welcome Tour"
+  image-name="2.4.0/welcome-tour.png"
+  caption="Click through the <i>Welcome Tour</i> to learn how to use **Cryostat**."
+  text="The <i>Welcome Tour</i> provides an introduction to **Cryostat**'s layout and indicates where further tutorials and help can be found."
+%}
+
+If you have completed the tour previously, feel free to click <i>Skip Tour</i> and dive right in to **Cryostat**.
+If you have not completed the tour previously and are unsure what **Cryostat** can do or how to use it, click <i>Get Started</i>
+to begin the guided walkthrough of the **Cryostat Web** application.
+
+{% include howto_step.html
+  summary="Tour Begins"
+  image-name="2.4.0/guided-tour.png"
+  caption="Click <i>Next</i> through the <i>Welcome Tour</i> to learn how to use **Cryostat**."
+  text="Continue through the tour to learn how the UI is organized and where you can find additional help."
+%}
+
+#### [Return to the Tour](#return-to-the-tour)
+
+You can return to the tour and revisit its contents at any time.
+
+Whenever you feel the need to return to the tour and revisit its contents, simply click the `?` <i>Help</i> icon in the
+application masthead, then click <i>Guided tour</i> in the dropdown menu that appears.
+
+{% include howto_step.html
+  summary="Open Help Menu"
+  image-name="2.4.0/masthead-help.png"
+  caption="The <b>?</b> <i>Help</i> menu on the application masthead contains additional resources."
+  text="Click <i>Guided tour</i> to relaunch the same tour."
+%}
+
+### [Quick Starts](#quickstarts)
+
+**Cryostat** also includes some *Quick Start* online tutorials to guide you through some common tasks. These are more in-depth
+and will directly guide you through the UI as you complete them by operating on your own real applications.
+
+{% include howto_step.html
+  summary="Open Help Menu"
+  image-name="2.4.0/masthead-help.png"
+  caption="The <b>?</b> <i>Help</i> menu on the application masthead contains additional resources."
+  text="Click <i>Quick Starts</i> to view the tutorial catalog."
+%}
+
+{% include howto_step.html
+  summary="View the Quick Start Catalog"
+  image-name="2.4.0/quick-start-catalog.png"
+  caption="The <i>Quick Start</i> catalog contains a series of tutorials you can follow to learn how to accomplish specific tasks."
+  text="Select and complete the tutorials which interest you. You can revisit this catalog at any time and re-do tutorials as many times as you like."
+%}

guides/index.md

@@ -9,6 +9,8 @@ common actions and workflows of interest and why they are useful.
 * auto-gen TOC:
 {:toc}
 
+{% include_relative _subsections/getting-help.md %}
+
 {% include_relative _subsections/navigate-the-dashboard.md %}
 
 {% include_relative _subsections/use-topology-view.md %}