Add "Examples" section.

docs/Examples/MQTTX/Get data.md

@@ -0,0 +1,34 @@
+---
+sidebar_position: 3
+sidebar_label: Getting data
+---
+
+# Get data
+
+After installing the corresponding version you have to login into the app.biotz.io, if you don't have an account, you have to create one first.
+
+<div class="tutorial-image-container">
+![OS](../img/log-in.png)
+</div>
+The information to create an account is <a href="/docs/Tutorials/Creating a biotz account" target="_self">here</a>.
+
+When you login to app.biotz.io this tab will open with this toolbar:
+
+<div class="tutorial-image-container">
+![Toolbar](../img/toolbar.png)
+</div>
+
+Go to setup and then go to the data ingestion flow in the search engine. Search for your device.
+
+<div class="tutorial-image-container">
+![Searcher](../img/searcher.png)
+</div>
+
+
+After doing all this process, you will get an excel that you will have to use later, so save it!
+
+<div class="tutorial-image-container">
+![excell](../img/excell-data.png)
+</div>
+
+

docs/Examples/MQTTX/Intro.md

@@ -0,0 +1,13 @@
+---
+sidebar_position: 1
+sidebar_label: Intro
+---
+
+# Intro
+
+MQTTX is a tool designed to assist in the development, testing and debugging of applications using the Message Queuing Telemetry Transport (MQTT) protocol. 
+
+MQTTX provides a graphical user interface that allows developers to connect, subscribe and publish messages to MQTT brokers, as well as monitor incoming and outgoing messages. 
+
+In this tutorial, you will learn how to establish a connection to Biotz using MQTTX. For that we will first have to <a href="/docs/Examples/MQttx/MQttx instalation" target="_self">install MQTTX.</a>
+

docs/Examples/MQTTX/MQttx instalation.md

@@ -0,0 +1,23 @@
+---
+sidebar_position: 2
+sidebar_label: MQTTX instalation
+---
+
+To install MQTTX, first, go to the official MQTTX [website](https://mqttx.app/) On the official page, you need to click in dowload and you will be sent to a page. Here indicate your operating system.
+
+<div class="tutorial-image-container">
+![OS](../img/operating-system.png)
+</div>
+
+There choose your operating system and download the corresponding version for your operating system.
+
+<div class="tutorial-image-container">
+![Version](../img/version.png)
+</div>
+
+Once the download is complete, follow the installation instructions for your operating system. In most cases, this will involve simply opening the downloaded file and following the steps in the installation wizard but here is an example of how to install it using commands after dowloading.
+
+<div class="tutorial-image-container">
+![Comands](../img/commands.png)
+</div>
+

docs/Examples/MQTTX/Message.md

@@ -0,0 +1,91 @@
+---
+sidebar_position: 4
+sidebar_label: Sending message
+---
+
+# Sending the message
+
+After doing all the above mentioned process, you would have to go to the MQTTX application that you installed previously and click on the "+" icon.
+
+<div class="tutorial-image-container">
+![icon](../img/plus-icon.png)
+</div>
+Enter the connection details such as the connection name, the MQTT server address, the port, the username and password. You will have this information in the excel you got from app.biotz.io. And the rest of the configuration is on these two pictures:
+
+<div class="tutorial-image-container">
+![configuration](../img/configuration1.png)
+</div>
+<div class="tutorial-image-container">
+![configuration](../img/configuration2.png)
+</div> 
+Once you have configured everything correctly, click "Save" or "Connect" to save the configuration and establish the connection.
+Once you are connected, you can post messages to a specific topic or subscribe to a topic to receive messages.
+
+To post messages, click on the "Post" icon and fill in the message and topic details.
+To subscribe to a topic, click on the "Subscribe" icon and enter the name of the topic you wish to subscribe to.
+
+
+This time you are going to do a test to publish a message and establish a connection with Biotz.
+
+You are going to create two different messages, one will be incorrect and one will be correct, and you willll see the difference between both.
+
+## Message with wrong JSON payload
+```
+  biotz/1/0/d12af5ca-6120-494e-90e4-63a4036f45f9/dcbed620-4992-4695-8207-25e889b9e0c3/subscribe/action/data
+```
+
+And between the braces, the following JSON payload
+```
+ "msg": "hello"
+```
+
+When doing that, this is what you will send:
+
+<div class="tutorial-image-container">
+![Message](../img/1-message.png)
+</div>
+
+
+You will return to app.biotz.io, this time you will enter in developer tools, and inside developer tools in communications debugger. You will see this box with two pieces of information to fill in:
+
+<div class="tutorial-image-container">
+![box](../img/two-pieces.png)
+</div>
+
+In select device, write the name with which we have sent the message and in the select message type the type of message that you have configured, in this case, temp-lumin.
+
+If you have sent the first message you will see this:
+
+<div class="tutorial-image-container">
+![box](../img/incorrect-message.png)
+</div>
+
+As you can see, the following error will appear, this indicates that the message is not sent correctly.ç
+
+Now you will return to MQTTX app and you will send it in this other way.
+
+## Message with correct JSON payload
+
+You are going to publish the message in another way so that it works, and this time there will be no errors, so the message will be sent correctly.
+
+You will need to replace what was inside the braces with this JSON payload:
+
+```
+"temperature": 25.7,
+"luminosity": 67,
+"timestamp": "1710519995000"
+```
+
+When doing that, this is what you will send:
+
+<div class="tutorial-image-container">
+![Message](../img/2-message.png)
+</div>
+
+Then return to app.biotz.io and by doing the same process you did when sending the wrong message, this is what you'll encounter this time.
+
+<div class="tutorial-image-container">
+![Message](../img/correct-message.png)
+</div>
+
+As you can see in the image, this time there are no errors and you have been able to establish a connection with Biotz using the MQTTX app.

docs/Examples/MQTTX/_category_.json

@@ -0,0 +1,7 @@
+{
+  "label": "MQttx",
+  "position": 1,
+  "link": {
+    "type": "generated-index"
+  }
+}

docs/Examples/_category_.json

@@ -0,0 +1,7 @@
+{
+  "label": "Examples",
+  "position": 4,
+  "link": {
+    "type": "generated-index"
+  }
+}

docusaurus.config.ts

@@ -74,6 +74,12 @@ const config: Config = {
           position: 'left',
           label: 'Reference guides',
         },
+        {
+          to: 'docs/category/Examples',
+          position: 'left',
+          label: 'Examples',
+        },
+
         {href: 'https://www.biotz.io/company/blog', label: 'Blog', position: 'left'},
         {
 

src/css/custom.css

@@ -5,52 +5,9 @@
  */
 
 /* You can override the default Infima variables here. */
-/* :root {
-  --ifm-color-primary: #00e1fd;
-  --ifm-color-primary-dark: #00cae4;
-  --ifm-color-primary-darker: #00bfd7;
-  --ifm-color-primary-darkest: #009db1;
-  --ifm-color-primary-light: #17e5ff;
-  --ifm-color-primary-lighter: #24e7ff;
-  --ifm-color-primary-lightest: #4aebff;
-  --ifm-code-font-size: 95%;
-  --docusaurus-highlighted-code-line-bg: rgba(0, 225, 253, 0.1);
-}
-:root {
-  --ifm-color-primary: #ffbe0c;
-  --ifm-color-primary-dark: #f0b000;
-  --ifm-color-primary-darker: #e3a600;
-  --ifm-color-primary-darkest: #bb8900;
-  --ifm-color-primary-light: #ffc527;
-  --ifm-color-primary-lighter: #ffc934;
-  --ifm-color-primary-lightest: #ffd35c;
-  --ifm-code-font-size: 95%;
-  --docusaurus-highlighted-code-line-bg: rgba(255, 190, 12, 0.1);
-}
+
 :root {
   --ifm-color-primary: #5133ff;
-  --ifm-color-primary-dark: #3714ff;
-  --ifm-color-primary-darker: #2a05ff;
-  --ifm-color-primary-darkest: #2000d6;
-  --ifm-color-primary-light: #6b52ff;
-  --ifm-color-primary-lighter: #7861ff;
-  --ifm-color-primary-lightest: #9f8fff;
-  --ifm-code-font-size: 95%;
-  --docusaurus-highlighted-code-line-bg: rgba(81, 51, 255, 0.1);
-}
-:root {
-  --ifm-color-primary: #140f38;
-  --ifm-color-primary-dark: #120e32;
-  --ifm-color-primary-darker: #110d30;
-  --ifm-color-primary-darkest: #0e0b27;
-  --ifm-color-primary-light: #16113e;
-  --ifm-color-primary-lighter: #171140;
-  --ifm-color-primary-lightest: #1a1449;
-  --ifm-code-font-size: 95%;
-  --docusaurus-highlighted-code-line-bg: rgba(20, 15, 56, 0.1);
-} */
-:root {
-  --ifm-color-primary: #140f38;
   --ifm-color-primary-dark: #120e32;
   --ifm-color-primary-darker: #110d30;
   --ifm-color-primary-darkest: #0e0b27;
@@ -61,25 +18,34 @@
   --ifm-code-font-size: 95%;
   --docusaurus-highlighted-code-line-bg: rgba(20, 15, 56, 0.1);
 }
-/* For readability concerns, you should choose a lighter palette in dark mode. */
+
+/* Estilos para el título */
+
+
+
+/* Estilos para el modo oscuro */
 [data-theme='dark'] {
   --ifm-color-primary: #5133ff;
   --ifm-color-primary-dark: #21af90;
   --ifm-color-primary-darker: #1fa588;
   --ifm-color-primary-darkest: #1a8870;
   --ifm-color-primary-light: #29d5b0;
   --ifm-color-primary-lighter: #32d8b4;
-  --ifm-color-primary-lightest: #4fddbf;
+  --ifm-color-primary-lightest: #4fddbf;  
+  --ifm-font-color-base: #ffffff;
+
   --docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.3);
+
+  /* Estilos específicos para el título y el tagline en modo oscuro */
+}
+
+.footer {
+  background-color: #5133FF; /* Cambia #ff0000 por el color que desees */
+  color: #ffffff; /* Cambia #ffffff por el color del texto que desees */
 }
 
 .tutorial-image-container {
   display: flex;
   justify-content: center;
   width: 100%;
-}
-
-.footer {
-  background-color: #5133FF; /* Cambia #ff0000 por el color que desees */
-  color: #ffffff; /* Cambia #ffffff por el color del texto que desees */
 }