The step-by-step Netdata tutorial (#7489)

* Initial add

* Parts to steps

* Lots of fixes to tutorial steps, integration with docs

* Fixing broken links

* checklinks fix

* Add to sidebar

* Initial add

* Parts to steps

* Lots of fixes to tutorial steps, integration with docs

* Fixing broken links

* checklinks fix

* Add to sidebar

* Fixed link

* Added tutorial to homepage with styling

* Cleanup

* Few more fixes and improvements

* Final tweaks to last few steps

* Let nav items wrap

* Fixes for Austin and Andy

* Linter error

* Add text for Austin

* Text about charts not showing up

1 files changed, 47 insertions, 13 deletions

diff --git a/DOCUMENTATION.md b/DOCUMENTATION.md
index b3f42dd7d8..dd5cf76254 100644
--- a/DOCUMENTATION.md
+++ b/DOCUMENTATION.md
@@ -1,26 +1,60 @@
 # Netdata Documentation
 
-**Netdata is real-time health monitoring and performance troubleshooting for systems and applications.** It helps you instantly diagnose slowdowns and anomalies in your infrastructure with thousands of metrics, interactive visualizations, and insightful health alarms.
+**Netdata is real-time health monitoring and performance troubleshooting for systems and applications.** It helps you
+instantly diagnose slowdowns and anomalies in your infrastructure with thousands of metrics, interactive visualizations,
+and insightful health alarms.
 
 ## Navigating the Netdata documentation
 
-Welcome! You've arrived at the documentation for Netdata. Use the links below to find answers to the most common questions about Netdata, such as how to install it, getting started guides, basic configuration, and adding more charts. Or, explore all of Netdata's documentation using the table of contents to your left.
+Welcome! You've arrived at the documentation for Netdata. Use the links below to find answers to the most common
+questions about Netdata, such as how to install it, getting started guides, basic configuration, and adding more charts.
+Or, explore all of Netdata's documentation using the table of contents to your left.
 
 <div class="homepage-nav">
 
-  <div class="nav-install">
-    <a class="nav-button" href="packaging/installer/#one-line-installation">One-line installation</a>
-    <p>Use our completely automated one-line installation process to get Netdata on all Linux distributions. Or, find detailed instructions for binary packages, Kubernetes, macOS, and more.</p>
-
+  <div class="nav-page">
+    <a href="packaging/installer/">
+      <div class="button-header">
+        <h3>Installation guide</h3>
+        <svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 448 512" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><path d="M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34zm192-34l-136-136c-9.4-9.4-24.6-9.4-33.9 0l-22.6 22.6c-9.4 9.4-9.4 24.6 0 33.9l96.4 96.4-96.4 96.4c-9.4 9.4-9.4 24.6 0 33.9l22.6 22.6c9.4 9.4 24.6 9.4 33.9 0l136-136c9.4-9.2 9.4-24.4 0-33.8z"></path></svg>
+      </div>
+      <div class="button-text">
+        <p>Use our automated one-line installation script to install Netdata on Linux systems or find detailed instructions for binary packages, Kubernetes, Docker, macOS, and more.</p>
+      </div>
+    </a>
   </div>
-  <div class="nav-getting-started">
-    <a class="nav-button" href="docs/getting-started/">Getting started guide</a>
-    <p>The perfect place for Netdata beginners to start. Learn how to access Netdata's dashboard, start and stop the service, basic configuration, and more.</p>
-
+  <div class="nav-page">
+    <a href="docs/step-by-step/step-00/">
+      <div class="button-header">
+        <h3>Step-by-step tutorial</h3>
+        <svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 448 512" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><path d="M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34zm192-34l-136-136c-9.4-9.4-24.6-9.4-33.9 0l-22.6 22.6c-9.4 9.4-9.4 24.6 0 33.9l96.4 96.4-96.4 96.4c-9.4 9.4-9.4 24.6 0 33.9l22.6 22.6c9.4 9.4 24.6 9.4 33.9 0l136-136c9.4-9.2 9.4-24.4 0-33.8z"></path></svg>
+      </div>
+      <div class="button-text">
+        <p>Take a guided tour through each of Netdata's core features—perfect for beginners. Follow detailed instructions to monitor your systems and apps, and start your journey into performance troubleshooting.</p>
+      </div>
+    </a>
+  </div>
+  <div class="nav-page">
+    <a href="docs/getting-started/">
+      <div class="button-header">
+        <h3>Getting started guide</h3>
+        <svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 448 512" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><path d="M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34zm192-34l-136-136c-9.4-9.4-24.6-9.4-33.9 0l-22.6 22.6c-9.4 9.4-9.4 24.6 0 33.9l96.4 96.4-96.4 96.4c-9.4 9.4-9.4 24.6 0 33.9l22.6 22.6c9.4 9.4 24.6 9.4 33.9 0l136-136c9.4-9.2 9.4-24.4 0-33.8z"></path></svg>
+      </div>
+      <div class="button-text">
+        <p>Have some monitoring and system administration experience? Dive right into configuring Netdata, accessing the dashboard, working with the daemon, and changing how Netdata stores metrics.</p>
+      </div>
+    </a>
   </div>
-  <div class="nav-configuration">
-    <a class="nav-button" href="docs/configuration-guide/">Configuration guide</a>
-    <p>Take your configuration options from the <em>getting started guide</em> to the next level. Increase metrics retention, modify how charts are displayed, disable collectors, and modify alarms.</p>
+  <div class="nav-page">
+    <a href="docs/configuration-guide/">
+      <div class="button-header">
+        <h3>Configuration guide</h3>
+        <svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 448 512" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><path d="M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34zm192-34l-136-136c-9.4-9.4-24.6-9.4-33.9 0l-22.6 22.6c-9.4 9.4-9.4 24.6 0 33.9l96.4 96.4-96.4 96.4c-9.4 9.4-9.4 24.6 0 33.9l22.6 22.6c9.4 9.4 24.6 9.4 33.9 0l136-136c9.4-9.2 9.4-24.4 0-33.8z"></path></svg>
+      </div>
+      <div class="button-text">
+        <p>Take your configuration options from the <em>getting started guide</em> to the next level. Increase metrics retention, modify how charts are displayed, disable collectors, and modify alarms.</p>
+      </div>
+    </a>
   </div>
 
 </div>