docs: ✨ added video

packages/docs/src/assets/styles/global.css

@@ -25,15 +25,15 @@
     }
 
     .slot h1 {
-        @apply my-2 font-semibold text-2xl;
+        @apply my-2 font-semibold text-3xl;
     }
 
     .slot h2 {
-        @apply my-2 font-semibold text-lg;
+        @apply my-2 font-semibold text-xl;
     }
 
     .slot h3 {
-        @apply my-2 font-semibold text-base;
+        @apply my-2 font-semibold text-lg;
     }
 
     .slot code {

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

@@ -1,6 +1,6 @@
 import Collaborators from '../../components/widgets/Collaborators'
 
-# Primeros Pasos
+# Vista rápida
 
 Los chatbots son una herramienta poderosa para que las empresas y
 organizaciones comuniquen de forma personalizada y automatizada con sus clientes.
@@ -8,7 +8,7 @@ organizaciones comuniquen de forma personalizada y automatizada con sus clientes
 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
+## Ejecutar
 
 Es muy sencillo solo deberas ejecutar el siguiente comando 🚀
 
@@ -16,12 +16,21 @@ Es muy sencillo solo deberas ejecutar el siguiente comando 🚀
 npm create bot-whatsapp@latest
 ```
 
-<div class="my-4 w-full">
-    <img
-        class="w-full"
-        src="https://camo.githubusercontent.com/97cd563fb448c72cc50dd60d71e85d269e5b1c738473d56fee6e023e1e0723bb/68747470733a2f2f692e67697068792e636f6d2f6d656469612f6e744d74365476616c70737454497837416b2f67697068792e77656270"
-        alt=""
-    />
+<div class="my-4 w-full ">
+    <video
+        class="rounded drop-shadow-xl rounded  "
+        width="100%"
+        height="100%"
+        autoplay
+        loop
+        muted
+        playsinline
+    >
+        <source
+            src="https://leifer-landing-page.s3.us-east-2.amazonaws.com/console.webm"
+            type="video/webm"
+        />
+    </video>
 </div>
 
-<Collaborators />
+Recuerda que debes de cumplir con los [requisitos minimos](/docs/install) del sistema

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

@@ -1,5 +1,6 @@
 import { component$, Slot, useStore } from '@builder.io/qwik'
 import type { DocumentHead } from '@builder.io/qwik-city'
+import Collaborators from '~/components/widgets/Collaborators'
 import Footer from '~/components/widgets/Footer'
 import Header from '~/components/widgets/Header'
 import NavBar from '~/components/widgets/NavBar'
@@ -13,11 +14,12 @@ export default component$(() => {
                 list: [
                     { name: 'Vista rápida', link: '/docs' },
                     { name: 'Instalación', link: '/docs/install' },
+                    { name: 'Configuración', link: '/docs/install' },
                     { name: 'Ejemplos', link: '/docs/install' },
                 ],
             },
             {
-                title: 'Configuración',
+                title: 'Conceptos',
                 list: [
                     { name: 'Flows', link: '/docs' },
                     { name: 'Proveedores', link: '/docs/install' },
@@ -26,6 +28,13 @@ export default component$(() => {
             },
             {
                 title: 'Avanzado',
+                list: [
+                    { name: 'Migración', link: '/docs/migration' },
+                    { name: 'Extender', link: '/docs/migration' },
+                ],
+            },
+            {
+                title: 'Comunidad',
                 list: [{ name: 'Migración', link: '/docs/migration' }],
             },
         ],
@@ -36,11 +45,13 @@ export default component$(() => {
             <Header />
             <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  '}>
+                    <div class={'col-span-1'}>
                         <NavBar options={store.options} />
                     </div>
-                    <div class={'col-span-3 slot pb-5'}>
+                    <div class={'px-3  col-span-3 slot pb-5'}>
                         <Slot />
+
+                        <Collaborators />
                     </div>
                     <div class={'px-3 col-span-1  '}>
                         <NavBar options={store.options} />