introduce the quickstart mode user guide (#116)

* Instroduce the Quick start mode user guide, make it consist with the full and nats option user guide.

* Add Quickstart introduction, user guide and example asset introduction.

* Addressed the comments.
diff --git a/docs/05_deploy-docker.md b/docs/05_deploy-docker.md
index abcbcf7..d7df262 100644
--- a/docs/05_deploy-docker.md
+++ b/docs/05_deploy-docker.md
@@ -31,6 +31,10 @@
 We provide several options to get you going:
 
 - **default**: Default docker-compose file, called `docker-compose.yml`.
+- **nats**: The standard installation which uses Nats as message broker,called `docker-compose.nats.yml`.
+- **full**: Contains experimental Flink wrappers, called `docker-compose.full.yml`.
+- **quickstart**: Contains predefined example assets, called `docker-compose.quickstart.yml`. The Quickstart mode is a user-friendly feature which comes with predefined example assets like pipelines, dashboards, and data views. These ready-to-use components allow first-time users to get a feel of StreamPipes in IIoT with ease, serving as a practical demonstration of how StreamPipes can be utilized for efficient monitoring and analysis. We highly recommend first-time users to begin with the Quickstart mode to understand the simplicity and convenience that StreamPipes brings to the IIoT platform. Please follow the [User Guide for Quickstart Mode](user-guide-for-quickstart.md) if you want to explore it.
+
 
 :::info
 
@@ -44,7 +48,7 @@
 
 ```bash
 docker-compose up -d
-# go to after all services are started http://localhost
+# go to `http://localhost` after all services are started
 ```
 After all containers are successfully started just got to your browser and visit http://localhost to finish the installation. Once finished, switch to the pipeline editor and start the interactive tour or check the [online tour](https://streampipes.apache.org/docs/docs/user-guide-tour/) to learn how to create your first pipeline!
 
@@ -58,13 +62,34 @@
 Starting the **nats** option is almost the same, just specify the `docker-compose.nats.yml` file:
 ```bash
 docker-compose -f docker-compose.nats.yml up -d
-# go to after all services are started http://localhost
+# go to `http://localhost` after all services are started
+```
+**Stopping** the **nats** option:
+```bash
+docker-compose -f docker-compose.nats.yml down
+```
+
+
+Starting the **full** option is almost the same, just specify the `docker-compose.full.yml` file:
+```bash
+docker-compose -f docker-compose.full.yml up -d
+#go to `http://localhost` after all services are started
 ```
 Stopping the **full** option:
 ```bash
 docker-compose -f docker-compose.nats.yml down
 #docker-compose -f docker-compose.nats.yml down -v
 ```
+Starting the **quickstart** option:
+```bash
+docker-compose -f docker-compose.quickstart.yml build script-runner
+docker-compose -f docker-compose.quickstart.yml up -d
+#go to `http://localhost` after all services are started
+```
+Stopping the **quickstart** option:
+```bash
+docker-compose -f docker-compose.quickstart.yml down
+```
 
 ## Update services
 To actively pull the latest available Docker images use:
diff --git a/docs/user-guide-for-quickstart.md b/docs/user-guide-for-quickstart.md
new file mode 100644
index 0000000..b911372
--- /dev/null
+++ b/docs/user-guide-for-quickstart.md
@@ -0,0 +1,134 @@
+---
+id: user-guide-for-quickstart
+title: Quickstart Tour
+sidebar_label: Tour
+---
+
+Apache StreamPipes is a self-service Industrial IoT toolbox to enable non-technical users to connect, analyze and explore IoT data streams.
+
+Quickstart Mode, ideal for first-time users, allows users to interact with pre-set pipelines, dashboards, and data views to experience StreamPipes' functionalities for IIoT. 
+This page provides an overview of StreamPipes' features in Quickstart Mode, guiding users on how to utilize them effectively.
+
+:::info
+Do you have StreamPipes already running in the quickstart mode? If not, simply run the command `docker-compose -f docker-compose.quickstart.yml build script-runner` and `docker-compose -f docker-compose.quickstart.yml up -d` from the directory `installer/compose`.
+:::
+
+First of all, a user needs to log in to the system. The default login credentials are `admin@streampipes.apache.org` as username and `admin` as password. 
+The credentials for the user are specified during the installation process.
+
+
+## Home
+After logging in, the user is redirected on to the home page.
+The home page gives an overview over the different features available in the StreamPipes UI.
+
+On the left, the navigation menu can be seen.
+You can either use the icons on the left side or click on the menu icon on the
+top left to open the details view of the navigation menu.
+
+<div class="my-carousel docs-carousel">
+    <img src="/img/quickstart/user-guide/01_home.png" alt="Home"/>
+</div>
+
+## Connect
+The _Connect_ view provides an overview of all existing adapters to let StreamPipes connect data sources.
+
+With StreamPipes Connect it is possible to connect new data sources in StreamPipes with just a few clicks.
+It is also possible to connect specific data sources or connect generic sources like message brokers or databases.
+If the event schema of the data source is unknown, the system tries to infer the schema by extracting some sample data and analysing it.
+
+In the Quickstart Mode, we use the Machine Data Simulator and Data Stream to simulate the factory machine condition data and environmental data, just click the  `START ALL ADAPTERS` button. This starts all existing adapters to offer data sources for pipelines.
+
+
+<div class="my-carousel docs-carousel">
+    <img src="/img/quickstart/user-guide/03_adapters.png" alt="Adapters"/>
+</div>
+
+## Pipelines
+The _Pipelines_ view provides an overview of all existing pipelines.
+
+A pipeline in Apache StreamPipes describes the transformation process from a data stream to a data sink. Typically, a pipeline consists of at least one data stream (or data set), zero or more data processors and at least one data sink.
+Existing pipelines can be managed using this pipeline view. For instance, users can start and stop pipelines or delete them when they are not longer needed.
+
+In the pipeline page, we could see there are 5 pipelines, click the `START ALL ADAPTERS` button. This starts all existing adapters to offer data sources for pipelines.
+
+<div class="my-carousel docs-carousel">
+    <img src="/img/quickstart/user-guide/02_pipelines.png" alt="Pipeline Overview"/>
+</div>
+
+
+In smart factory , monitoring and analysing machine parameters are essential steps to ensure machine safety, and minimizing downtime. In the industrial machine cooling system or hydraulic machines, water level could be an important part of monitoring parameters to ensure machine's performance and safety.
+Using the `Water level trend analysis` pipeline as an example, by clicking the `Show pipeline` button, we could see the details of the pipeline as the following figure.
+
+<div class="my-carousel docs-carousel"> 
+<img src="/img/quickstart/user-guide/07_water_level_trend_pipeline.png" alt="Pipeline Detail"/>
+</div>
+
+The pipeline contains 3 major parts:
+- **Data source**: 
+  - Machine Data Simulator (Water Level).
+- **Data Processors**: 
+  - Trend Detector: to analyse the water level increase speed within specified time, when Trend Detector find the speed is reaching the limit, it will trigger the notification. 
+  - Welford Change Detection: to calculate the variance of the mean and change of the water level over a specified time 
+  - Boolean Counter: to count each `overflow` status change from `false` to `true`. 
+  - Numerical Filter: when `overflow` status change from `false` to `true` reaches 5 times, it will trigger Notification.
+- **Data Sinks**: 
+  - Notification: to push a notification when the measured parameter condition reaches the set condition of the trigger, which are sent to Notification interface. 
+  - Data Lake: to store the events in the internal data lake, offering data for dashboard and data explorer.
+
+
+## Dashboard
+The _Dashboard_ can be used for multiple use cases.
+
+It is a good way to live monitor a running system in a dashboard, it also could be used during the pipeline development to get a fast feedback from newly created pipelines.
+Currently 10 different types of visualizations are available, including line charts, various map visualizations and data tables. The Dashboard feature allows you to select and view real-time data from specific pipelines that interest you.
+
+In the Quickstart mode, we offer three distinct dashboards, each designed for a specific application scenario. These dashboards include factory temperature monitoring, sensor running condition monitoring, and real-time machine data monitoring.
+
+
+<div class="my-carousel docs-carousel">
+    <img src="/img/quickstart/user-guide/04_dashboard.png" alt="Live dashboard"/>
+</div>
+
+As shown in the following figure, taking the `Smart Machine Monitor` as an example, the dashboard can showcase real-time data for monitoring machine parameters such as pressure and water level.
+
+<div class="my-carousel docs-carousel">
+    <img src="/img/quickstart/user-guide/08_smart_machine_monitor_dashboard.png" alt="Smart Machine Monitor"/>
+</div>
+
+## Data Explorer
+The _Data Explorer_ can be used for visualizing and exploring data streams that have been persisted using the Data Lake sink.
+
+Once your data has been stored in the data lake, you can navigate to the data explorer tab to craft a new data view with the widgets of your preference.
+In StreamPipes, a data view is a compilation of related widgets, which can be data visualizations or plots, all assigned to a specific date and time range. By default, this range encompasses the last 15 minutes of the current date and time. However, you also have the flexibility to choose from predefined ranges, such as a day or a month, or to customize the exact date and time range that you wish to investigate.
+
+In the Quickstart Mode, we try to demonstrate the StreamPipes' practicability and convenience in data analysis, by providing example data views for specific application scenarios, including machine running condition monitor, problem analysis, factory environment monitor. 
+
+<div class="my-carousel docs-carousel">
+    <img src="/img/quickstart/user-guide/05_data_explorer.png" alt="Data Explorer"/>
+</div>
+
+As shown in the following figure, taking the `Machine Running Condition Monitoring of Water Level and Pressure` data view as an example, the data explorer can show real-time machine data as different types of widgets, depending on what the user needs, to help analyse the data better.
+In the machine running condition scenarios, we pay attention to the distribution of water level and pressure, as well as the pressure change condition.
+
+<div class="my-carousel docs-carousel">
+    <img src="/img/quickstart/user-guide/09_machine_running_data_view.png" alt="Data Explorer Detail"/>
+</div>
+
+
+
+## Notifications
+The _Notifications_ can be used for notifying someone when a urgent situation occurs.
+
+A notification can be created by using the notification sink in the pipeline editor.
+The message can be nicely configured in the message editor.
+It is also possible to embed values of the event that triggered the notification.
+All available properties are presented in the notification configurator.
+
+In Quickstart mode, StreamPipes have pre-defined several notification trigger in the example pipelines, when you click the `Notification` button in the upper right corner, you could see the notification dialog.
+<div class="my-carousel docs-carousel">
+    <img src="/img/quickstart/user-guide/06_notifications.png" alt="Notifications"/>
+</div>
+
+
+Congratulations! You've just finished Quickstart user guide of StreamPipes.
+
diff --git a/website-v2/src/components/download/DownloadFolder.tsx b/website-v2/src/components/download/DownloadFolder.tsx
index 990e99e..6ca38f3 100644
--- a/website-v2/src/components/download/DownloadFolder.tsx
+++ b/website-v2/src/components/download/DownloadFolder.tsx
@@ -11,7 +11,8 @@
             </span>
         </div>
         <div className="col-md-11 col-9">
-          In a command prompt, open the folder <code>installer/compose/</code> and run <code>docker-compose up -d</code>
+          In a command prompt, open the folder <code>installer/compose/</code> and run <code>docker-compose up -d</code> , or you could try the Quickstart mode with predefined example asset. Please follow the <a
+            target="asf" href="https://streampipes.apache.org/docs/next/deploy-docker/">Docker Deployment</a> to explore this new mode.
         </div>
       </div>
     </li>
diff --git a/website-v2/static/img/quickstart/user-guide/01_home.png b/website-v2/static/img/quickstart/user-guide/01_home.png
new file mode 100644
index 0000000..838e25f
--- /dev/null
+++ b/website-v2/static/img/quickstart/user-guide/01_home.png
Binary files differ
diff --git a/website-v2/static/img/quickstart/user-guide/02_pipelines.png b/website-v2/static/img/quickstart/user-guide/02_pipelines.png
new file mode 100644
index 0000000..4ba8df2
--- /dev/null
+++ b/website-v2/static/img/quickstart/user-guide/02_pipelines.png
Binary files differ
diff --git a/website-v2/static/img/quickstart/user-guide/03_adapters.png b/website-v2/static/img/quickstart/user-guide/03_adapters.png
new file mode 100644
index 0000000..b8d5818
--- /dev/null
+++ b/website-v2/static/img/quickstart/user-guide/03_adapters.png
Binary files differ
diff --git a/website-v2/static/img/quickstart/user-guide/04_dashboard.png b/website-v2/static/img/quickstart/user-guide/04_dashboard.png
new file mode 100644
index 0000000..839a822
--- /dev/null
+++ b/website-v2/static/img/quickstart/user-guide/04_dashboard.png
Binary files differ
diff --git a/website-v2/static/img/quickstart/user-guide/05_data_explorer.png b/website-v2/static/img/quickstart/user-guide/05_data_explorer.png
new file mode 100644
index 0000000..d0db1a8
--- /dev/null
+++ b/website-v2/static/img/quickstart/user-guide/05_data_explorer.png
Binary files differ
diff --git a/website-v2/static/img/quickstart/user-guide/06_notifications.png b/website-v2/static/img/quickstart/user-guide/06_notifications.png
new file mode 100644
index 0000000..0b32570
--- /dev/null
+++ b/website-v2/static/img/quickstart/user-guide/06_notifications.png
Binary files differ
diff --git a/website-v2/static/img/quickstart/user-guide/07_water_level_trend_pipeline.png b/website-v2/static/img/quickstart/user-guide/07_water_level_trend_pipeline.png
new file mode 100644
index 0000000..1c282c0
--- /dev/null
+++ b/website-v2/static/img/quickstart/user-guide/07_water_level_trend_pipeline.png
Binary files differ
diff --git a/website-v2/static/img/quickstart/user-guide/08_smart_machine_monitor_dashboard.png b/website-v2/static/img/quickstart/user-guide/08_smart_machine_monitor_dashboard.png
new file mode 100644
index 0000000..60ed6f5
--- /dev/null
+++ b/website-v2/static/img/quickstart/user-guide/08_smart_machine_monitor_dashboard.png
Binary files differ
diff --git a/website-v2/static/img/quickstart/user-guide/09_machine_running_data_view.png b/website-v2/static/img/quickstart/user-guide/09_machine_running_data_view.png
new file mode 100644
index 0000000..aed944d
--- /dev/null
+++ b/website-v2/static/img/quickstart/user-guide/09_machine_running_data_view.png
Binary files differ