docs: 📝 update docs

packages/docs/src/routes/docs/index.mdx

@@ -1,11 +1,19 @@
-# Titulo
+# Primeros Pasos
 
-Below is an example of markdown in JSX.
+Los chatbots son una herramienta poderosa para que las empresas y
+organizaciones comuniquen de forma personalizada y automatizada con sus clientes.
 
-```js
-const a = hola
+Está documentación te ayudará a instalar tu bot de whatsapp en simples pasos con el proposito de
+que tengas un chatbot funcional en solo minutos.
+
+---
+
+### Ejecutar
+
+Es muy sencillo solo deberas ejecutar el siguiente comando 🚀
+
+```shell
+npm create bot-whatsapp@latest
 ```
 
-<div style={{ padding: '1rem', backgroundColor: 'violet' }}>
-    Try and change the background color to `tomato`.
-</div>
+![](https://camo.githubusercontent.com/97cd563fb448c72cc50dd60d71e85d269e5b1c738473d56fee6e023e1e0723bb/68747470733a2f2f692e67697068792e636f6d2f6d656469612f6e744d74365476616c70737454497837416b2f67697068792e77656270)

packages/docs/src/routes/docs/install/index.mdx

@@ -0,0 +1,10 @@
+---
+title: Overview
+contributors:
+    - adamdbradley
+    - steve8708
+    - manucorporat
+    - gabrielgrant
+---
+
+# Instalación

packages/docs/src/routes/docs/layout!.tsx

@@ -3,10 +3,17 @@ import type { DocumentHead } from '@builder.io/qwik-city'
 import Footer from '~/components/widgets/Footer'
 import Header from '~/components/widgets/Header'
 import NavBar from '~/components/widgets/NavBar'
+import ExtraBar from '~/components/widgets/ExtraBar'
 
 export default component$(() => {
     const store = useStore({
         options: [
+            { name: 'Primeros pasos', link: '/docs' },
+            { name: 'Instalación', link: '/docs/install' },
+            { name: 'Configuración', link: '/docs/settings' },
+            { name: 'Migración', link: '/docs/migration' },
+        ],
+        extraOptions: [
             { name: 'Primeros pasos', link: '/docs', class: 'font-semibold' },
             { name: 'Instalación', link: '/docs' },
             { name: 'Configuración', link: '/docs' },
@@ -17,14 +24,17 @@ export default component$(() => {
     return (
         <>
             <Header />
-            <main class="container mx-auto px-12">
-                <div class={'grid grid-cols-4 gap-4'}>
-                    <div class={' col-span-1'}>
+            <main class="container mx-auto px-12 ">
+                <div class={'grid grid-cols-5 gap-1 min-h-min'}>
+                    <div class={'px-3 col-span-1  '}>
                         <NavBar options={store.options} />
                     </div>
-                    <div class={'col-span-3'}>
+                    <div class={'col-span-3 slot pb-5'}>
                         <Slot />
                     </div>
+                    <div class={'px-3 col-span-1  '}>
+                        <ExtraBar options={store.extraOptions} />
+                    </div>
                 </div>
             </main>
 

packages/docs/src/routes/docs/migration/index.mdx

@@ -0,0 +1,10 @@
+---
+title: Overview
+contributors:
+    - adamdbradley
+    - steve8708
+    - manucorporat
+    - gabrielgrant
+---
+
+# Migracion

packages/docs/src/routes/docs/settings/index.mdx

@@ -0,0 +1,10 @@
+---
+title: Overview
+contributors:
+    - adamdbradley
+    - steve8708
+    - manucorporat
+    - gabrielgrant
+---
+
+# Ajustes