Merge pull request #274 from codigoencasa/fix/docs-nex

Fix/docs nex

packages/docs/package.json

@@ -9,7 +9,7 @@
     "build.server": "vite build -c adaptors/cloudflare-pages/vite.config.ts",
     "build.types": "tsc --incremental --noEmit",
     "deploy": "wrangler pages dev ./dist",
-    "dev": "vite --mode ssr",
+    "dev": "vite --host --mode ssr",
     "dev.debug": "node --inspect-brk ./node_modules/vite/bin/vite.js --mode ssr --force",
     "fmt": "prettier --write .",
     "fmt.check": "prettier --check .",
@@ -24,6 +24,10 @@
     "@builder.io/qwik-city": "0.0.128",
     "@fontsource/inter": "^4.5.14",
     "@iconify-json/tabler": "^1.1.49",
+    "@tailwindcss/aspect-ratio": "^0.4.0",
+    "@tailwindcss/forms": "^0.5.3",
+    "@tailwindcss/line-clamp": "^0.3.1",
+    "@tailwindcss/typography": "^0.5.0",
     "@types/eslint": "8.4.10",
     "@types/node": "latest",
     "@typescript-eslint/eslint-plugin": "5.45.0",

packages/docs/src/assets/fonts/generated/IBMPlexMono-Regular.module.css

@@ -0,0 +1,13 @@
+.font {
+    font-family: IBMPlexMono-Regular;
+}
+
+/* This file was automatically generated by GlyphHanger 4.0.1 */
+
+@font-face {
+    font-family: IBMPlexMono-Regular;
+    src: url(IBMPlexMono-Regular-subset.woff2) format('woff2'),
+        url(IBMPlexMono-Regular-subset.zopfli.woff) format('woff');
+    unicode-range: U+20, U+2C, U+2E, U+41-43, U+46, U+49, U+4B-4F, U+53-55, U+58,
+        U+61-65, U+67-69, U+6C-76;
+}

packages/docs/src/assets/fonts/generated/IBMPlexMono-SemiBold.module.css

@@ -0,0 +1,13 @@
+.font {
+    font-family: IBMPlexMono-SemiBold;
+}
+
+/* This file was automatically generated by GlyphHanger 4.0.1 */
+
+@font-face {
+    font-family: IBMPlexMono-SemiBold;
+    src: url(IBMPlexMono-SemiBold-subset.woff2) format('woff2'),
+        url(IBMPlexMono-SemiBold-subset.zopfli.woff) format('woff');
+    unicode-range: U+20, U+24, U+2E, U+30, U+38, U+39, U+41, U+42, U+44, U+47,
+        U+4E, U+4F, U+52-55, U+57, U+59, U+65, U+68, U+6F, U+72, U+74;
+}

packages/docs/src/assets/fonts/generated/Pally-Variable.module.css

@@ -0,0 +1,14 @@
+.font {
+    font-family: Pally-Variable;
+}
+
+/* This file was automatically generated by GlyphHanger 4.0.1 */
+
+@font-face {
+    font-family: Pally-Variable;
+    src: url(Pally-Variable-subset.woff2) format('woff2'),
+        url(Pally-Variable-subset.zopfli.woff) format('woff');
+    unicode-range: U+20, U+24, U+2C, U+2E, U+30, U+33, U+39, U+41-43, U+46,
+        U+49-4D, U+53, U+55, U+58, U+61-65, U+67-69, U+6B-77, U+79;
+    font-weight: 400 700;
+}

packages/docs/src/assets/fonts/generated/SourceSerifPro-Regular.module.css

@@ -0,0 +1,13 @@
+.font {
+    font-family: SourceSerifPro-Regular;
+}
+
+/* This file was automatically generated by GlyphHanger 4.0.1 */
+
+@font-face {
+    font-family: SourceSerifPro-Regular;
+    src: url(SourceSerifPro-Regular-subset.woff2) format('woff2'),
+        url(SourceSerifPro-Regular-subset.zopfli.woff) format('woff');
+    unicode-range: U+20, U+2C, U+2E, U+41-44, U+49, U+4A, U+4C, U+53, U+55,
+        U+61-65, U+67-69, U+6B-76, U+79;
+}

packages/docs/src/assets/fonts/generated/Synonym-Variable.module.css

@@ -0,0 +1,14 @@
+.font {
+    font-family: Synonym-Variable;
+}
+
+/* This file was automatically generated by GlyphHanger 4.0.1 */
+
+@font-face {
+    font-family: Synonym-Variable;
+    src: url(Synonym-Variable-subset.woff2) format('woff2'),
+        url(Synonym-Variable-subset.zopfli.woff) format('woff');
+    unicode-range: U+20, U+24, U+2C, U+2E, U+30, U+33, U+35, U+41-44, U+46, U+47,
+        U+49, U+4B-4F, U+53-55, U+57-59, U+61, U+63-65, U+67-69, U+6C-76;
+    font-weight: 400 700;
+}

packages/docs/src/assets/fonts/generated/TenorSans-Regular.module.css

@@ -0,0 +1,13 @@
+.font {
+    font-family: TenorSans-Regular;
+}
+
+/* This file was automatically generated by GlyphHanger 4.0.1 */
+
+@font-face {
+    font-family: TenorSans-Regular;
+    src: url(TenorSans-Regular-subset.woff2) format('woff2'),
+        url(TenorSans-Regular-subset.zopfli.woff) format('woff');
+    unicode-range: U+20, U+24, U+2E, U+30, U+36, U+46, U+49, U+4A, U+53, U+54,
+        U+61, U+63, U+65, U+69, U+6B, U+6E, U+6F, U+72-75, U+79;
+}

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

@@ -0,0 +1,44 @@
+@font-face {
+    font-family: 'Inter var';
+    font-weight: 100 900;
+    font-display: block;
+    font-style: normal;
+    font-named-instance: 'Regular';
+    src: url('../fonts/Inter-roman-latin.var.woff2') format('woff2');
+}
+
+@font-face {
+    font-family: 'Inter var';
+    font-weight: 100 900;
+    font-display: block;
+    font-style: italic;
+    font-named-instance: 'Italic';
+    src: url('../fonts/Inter-italic-latin.var.woff2') format('woff2');
+}
+
+@font-face {
+    font-family: 'Fira Code VF';
+    font-weight: 300 700;
+    font-style: normal;
+    src: url('../fonts/FiraCode-VF.woff2') format('woff2-variations'),
+        url('../fonts/FiraCode-VF.woff') format('woff-variations');
+}
+
+.font-mono {
+    font-variant-ligatures: none;
+}
+
+@font-face {
+    font-family: 'Source Sans Pro';
+    font-style: normal;
+    font-weight: 400;
+    font-display: swap;
+    src: url('../fonts/SourceSansPro-Regular.otf') format('opentype');
+}
+
+@font-face {
+    font-family: 'Ubuntu Mono';
+    font-weight: 700;
+    font-style: normal;
+    src: url('../fonts/Ubuntu-Mono-bold.woff2') format('woff2');
+}

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

@@ -9,6 +9,7 @@
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
+@import url('./fonts.css');
 
 @layer components {
     .btn {
@@ -24,19 +25,19 @@
     }
 
     .slot h1 {
-        @apply mb-2 font-semibold text-2xl;
+        @apply my-2 font-semibold text-2xl;
     }
 
     .slot h2 {
-        @apply mb-2 font-semibold text-lg;
+        @apply my-2 font-semibold text-lg;
     }
 
     .slot h3 {
-        @apply mb-2 font-semibold text-base;
+        @apply my-2 font-semibold text-base;
     }
 
     .slot code {
-        @apply bg-slate-100 dark:bg-slate-800 p-1 px-2 rounded w-full;
+        @apply bg-slate-100 dark:bg-slate-800 p-1 px-2 rounded w-full text-sm;
     }
 
     .slot pre {
@@ -51,6 +52,10 @@
         @apply my-5;
     }
 
+    .slot img {
+        @apply rounded drop-shadow-2xl;
+    }
+
     [data-aw-toggle-menu] path {
         @apply transition;
     }

packages/docs/src/components/atoms/Logo.tsx

@@ -1,7 +1,7 @@
 import { component$ } from '@builder.io/qwik'
 
 // @ts-ignore
-import logoSrc from '~/assets/images/logo.png?width=64&height=64&png'
+import logoSrc from '~/assets/images/chatbot-whatsapp.png?width=64&height=64&png'
 
 export default component$(() => (
     <span class="self-center ml-2 text-2xl md:text-xl font-bold text-gray-900 whitespace-nowrap dark:text-white flex items-center">
@@ -13,6 +13,6 @@ export default component$(() => (
             alt="Qwind Logo"
             loading="lazy"
         />
-        Qwind
+        Chatbot
     </span>
 ))

packages/docs/src/components/icons/IconDiscord.tsx

@@ -0,0 +1,14 @@
+export const IconDiscord = () => (
+    <svg
+        xmlns="http://www.w3.org/2000/svg"
+        width="24"
+        height="24"
+        viewBox="0 0 512 512"
+        role="img"
+        fill="currentColor"
+        aria-label="Discord Logo"
+    >
+        <path d="M464 66.52A50 50 0 00414.12 17L97.64 16A49.65 49.65 0 0048 65.52V392c0 27.3 22.28 48 49.64 48H368l-13-44 109 100zM324.65 329.81s-8.72-10.39-16-19.32C340.39 301.55 352.5 282 352.5 282a139 139 0 01-27.85 14.25 173.31 173.31 0 01-35.11 10.39 170.05 170.05 0 01-62.72-.24 184.45 184.45 0 01-35.59-10.4 141.46 141.46 0 01-17.68-8.21c-.73-.48-1.45-.72-2.18-1.21-.49-.24-.73-.48-1-.48-4.36-2.42-6.78-4.11-6.78-4.11s11.62 19.09 42.38 28.26c-7.27 9.18-16.23 19.81-16.23 19.81-53.51-1.69-73.85-36.47-73.85-36.47 0-77.06 34.87-139.62 34.87-139.62 34.87-25.85 67.8-25.12 67.8-25.12l2.42 2.9c-43.59 12.32-63.44 31.4-63.44 31.4s5.32-2.9 14.28-6.77c25.91-11.35 46.5-14.25 55-15.21a24 24 0 014.12-.49 205.62 205.62 0 0148.91-.48 201.62 201.62 0 0172.89 22.95s-19.13-18.15-60.3-30.45l3.39-3.86s33.17-.73 67.81 25.16c0 0 34.87 62.56 34.87 139.62 0-.28-20.35 34.5-73.86 36.19z"></path>
+        <path d="M212.05 218c-13.8 0-24.7 11.84-24.7 26.57s11.14 26.57 24.7 26.57c13.8 0 24.7-11.83 24.7-26.57.25-14.76-10.9-26.57-24.7-26.57zM300.43 218c-13.8 0-24.7 11.84-24.7 26.57s11.14 26.57 24.7 26.57c13.81 0 24.7-11.83 24.7-26.57S314 218 300.43 218z"></path>
+    </svg>
+)

packages/docs/src/components/widgets/Collaborators.tsx

@@ -0,0 +1,46 @@
+import { component$ } from '@builder.io/qwik'
+
+export default component$(() => {
+    return (
+        <div class={'pt-4'}>
+            <div class="flex items-center space-x-2 text-base">
+                <h4 class="font-semibold text-slate-900">Contributors</h4>
+                <span class="rounded-full bg-slate-100 px-2 py-1 text-xs font-semibold text-slate-700">
+                    204
+                </span>
+            </div>
+            <div class="mt-3 flex -space-x-2 overflow-hidden">
+                <img
+                    class="inline-block h-12 w-12 rounded-full ring-2 ring-white"
+                    src="https://images.unsplash.com/photo-1491528323818-fdd1faba62cc?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80"
+                    alt=""
+                />
+                <img
+                    class="inline-block h-12 w-12 rounded-full ring-2 ring-white"
+                    src="https://images.unsplash.com/photo-1550525811-e5869dd03032?ixlib=rb-1.2.1&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80"
+                    alt=""
+                />
+                <img
+                    class="inline-block h-12 w-12 rounded-full ring-2 ring-white"
+                    src="https://images.unsplash.com/photo-1500648767791-00dcc994a43e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2.25&w=256&h=256&q=80"
+                    alt=""
+                />
+                <img
+                    class="inline-block h-12 w-12 rounded-full ring-2 ring-white"
+                    src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80"
+                    alt=""
+                />
+                <img
+                    class="inline-block h-12 w-12 rounded-full ring-2 ring-white"
+                    src="https://images.unsplash.com/photo-1517365830460-955ce3ccd263?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80"
+                    alt=""
+                />
+            </div>
+            <div class="mt-3 text-sm font-medium">
+                <a href="#" class="text-blue-500">
+                    + 198 others
+                </a>
+            </div>
+        </div>
+    )
+})

packages/docs/src/components/widgets/FAQs.tsx

@@ -51,7 +51,7 @@ export default component$(() => {
                             FAQs
                         </p>
                         <h2 class="max-w-lg mb-4 text-3xl font-bold leading-none tracking-tight sm:text-4xl md:mx-auto font-heading">
-                            Frequently Asked Questions
+                            Preguntas Frecuentes
                         </h2>
                     </div>
                 </div>

packages/docs/src/components/widgets/Features.tsx

@@ -1,45 +1,43 @@
 import { component$ } from '@builder.io/qwik'
 import { IconStar } from '~/components/icons/IconStar'
+import { IconDiscord } from '../icons/IconDiscord'
 
 export default component$(() => {
     const items = [
         [
             {
-                title: 'Qwik + Tailwind CSS Integration',
+                title: 'Atención al cliente rápida y eficiente',
                 description:
-                    'A seamless integration between two great frameworks that offer high productivity, performance and versatility.',
+                    'El chatbot puede ayudar a tus clientes a obtener respuestas a sus preguntas o solucionar problemas de manera rápida y sencilla, sin tener que esperar horas o incluso días por una respuesta.',
-                icon: 'tabler:brand-tailwind',
             },
             {
-                title: 'Ready-to-use Components',
+                title: 'Automatización de tareas repetitiva',
                 description:
-                    'Widgets made with Tailwind CSS ready to be used in Marketing Websites, SaaS, Blogs, Personal Profiles, Small Business...',
+                    'Se pueden automatizar tareas repetitivas y ahorrar tiempo y esfuerzo en tareas administrativas, como enviar recordatorios a tus clientes sobre pagos pendientes o para confirmar citas o reservas.',
-                icon: 'tabler:components',
             },
             {
-                title: 'Best Practices',
+                title: 'Experiencia personalizada para tus clientes',
                 description:
-                    'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi sagittis, quam nec venenatis lobortis, mi risus tempus nulla.',
+                    'Podrás enviar mensajes automatizados con ofertas especiales o recomendaciones de productos basadas en el historial de compras de tus clientes, lo que significa que tus clientes pueden recibir una experiencia más personalizada.',
-                icon: 'tabler:list-check',
             },
         ],
         [
             {
-                title: 'Excellent Page Speed',
+                title: 'Análisis de datos y toma de decisiones informadas',
                 description:
-                    'Having a good page speed impacts organic search ranking, improves user experience (UI/UX) and increase conversion rates.',
+                    'Te permite recopilar y analizar datos sobre tus clientes para ayudarte a entender mejor sus necesidades y preferencias, y ofrecerles un servicio aún más destacado.',
                 icon: 'tabler:rocket',
             },
             {
-                title: 'Search Engine Optimization (SEO)',
+                title: 'Mejora de la eficiencia',
                 description:
-                    'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi sagittis, quam nec venenatis lobortis, mi risus tempus nulla.',
+                    'Te brinda la facilidad de manejar varias conversaciones al mismo tiempo, lo que significa que tus clientes no tendrán que esperar en una larga cola de mensajes para obtener atención. Esto puede ayudar a mejorar la eficiencia y la productividad en tu negocio.',
                 icon: 'tabler:arrows-right-left',
             },
             {
-                title: 'Open to new ideas and contributions',
+                title: 'Personalización y adaptación',
                 description:
-                    'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi sagittis, quam nec venenatis lobortis, mi risus tempus nulla.',
+                    'Como proyecto open source, el chatbot de WhatsApp es totalmente personalizable y puede ser adaptado a las necesidades específicas de tu negocio o proyecto. Esto significa que puedes modificar el código fuente y adaptar el chatbot a tus necesidades exactas.',
                 icon: 'tabler:bulb',
             },
         ],
@@ -50,16 +48,16 @@ export default component$(() => {
             <div class="px-4 py-16 mx-auto max-w-6xl lg:px-8 lg:py-20">
                 <div class="mb-10 md:mx-auto sm:text-center md:mb-12 max-w-3xl">
                     <p class="text-base text-primary-600 dark:text-purple-200 font-semibold tracking-wide uppercase">
-                        Features
+                        Caracteristicas
                     </p>
                     <h2 class="text-4xl md:text-5xl font-bold leading-tighter tracking-tighter mb-4 font-heading">
-                        What you get with{' '}
+                        Nuestras principales{' '}
-                        <span class="whitespace-nowrap">Qwind</span>
+                        <span class="whitespace-nowrap">funciones</span>
                     </h2>
                     <p class="max-w-3xl mx-auto sm:text-center text-xl text-gray-600 dark:text-slate-400">
-                        Sed ut perspiciatis unde omnis iste natus error sit
+                        El secreto es mantener los procesos repetitivos en
-                        voluptatem accusantium doloremque rem aperiam, eaque
+                        procesos automatizados simples, por eso te mostramos en
-                        ipsa quae.
+                        que destacamos.
                     </p>
                 </div>
                 <div class="grid mx-auto space-y-6 md:grid-cols-2 md:space-y-0">
@@ -68,7 +66,7 @@ export default component$(() => {
                             {subitems.map(({ title, description }) => (
                                 <div class="flex flex-row max-w-md">
                                     <div class="mb-4 mr-4">
-                                        <div class="text-white flex items-center justify-center w-12 h-12 rounded-full bg-secondary-500 dark:bg-secondary-700">
+                                        <div class="text-white flex items-center justify-center w-12 h-12 rounded-full bg-primary-500 dark:bg-primary-500">
                                             <IconStar />
                                         </div>
                                     </div>

packages/docs/src/components/widgets/Header.tsx

@@ -3,6 +3,7 @@ import Logo from '~/components/atoms/Logo'
 import { IconGithub } from '~/components/icons/IconGithub'
 import ToggleTheme from '~/components/core/ToggleTheme'
 import ToggleMenu from '~/components/core/ToggleMenu'
+import { IconDiscord } from '../icons/IconDiscord'
 
 export default component$(() => {
     const store = useStore({
@@ -40,7 +41,7 @@ export default component$(() => {
                     aria-label="Main navigation"
                 >
                     <ul class="flex flex-col pt-8 md:pt-0 md:flex-row md:self-center w-full md:w-auto text-xl md:text-base">
-                        <li class="dropdown">
+                        {/* <li class="dropdown">
                             <button class="font-medium hover:text-gray-900 dark:hover:text-white px-4 py-3 flex items-center transition duration-150 ease-in-out">
                                 Pages
                             </button>
@@ -70,7 +71,7 @@ export default component$(() => {
                                     </a>
                                 </li>
                             </ul>
-                        </li>
+                        </li> */}
                         <li>
                             <a
                                 class="font-medium hover:text-gray-900 dark:hover:text-white px-4 py-3 flex items-center transition duration-150 ease-in-out"
@@ -104,6 +105,15 @@ export default component$(() => {
                         <div class="hidden items-center md:flex">
                             <ToggleTheme />
                             <a
+                                target={'_blank'}
+                                href="https://link.codigoencasa.com/DISCORD"
+                                class="inline-block text-gray-500 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-700 focus:outline-none focus:ring-4 focus:ring-gray-200 dark:focus:ring-gray-700 rounded-lg text-sm p-2.5"
+                                aria-label="Qwind Github"
+                            >
+                                <IconDiscord />
+                            </a>
+                            <a
+                                target={'_blank'}
                                 href="https://github.com/codigoencasa/bot-whatsapp"
                                 class="inline-block text-gray-500 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-700 focus:outline-none focus:ring-4 focus:ring-gray-200 dark:focus:ring-gray-700 rounded-lg text-sm p-2.5"
                                 aria-label="Qwind Github"

packages/docs/src/components/widgets/Hero.tsx

@@ -1,63 +1,62 @@
 import { component$ } from '@builder.io/qwik'
 
 // @ts-ignore
-import srcsetAvif from '~/assets/images/hero.jpg?w=400;900&avif&srcset'
+import srcsetAvif from '~/assets/images/chatbot-whatsapp.png?w=400;900&avif&srcset'
 // @ts-ignore
-import srcsetWebp from '~/assets/images/hero.jpg?w=400;900&webp&srcset'
+import srcsetWebp from '~/assets/images/chatbot-whatsapp.png?w=400;900&webp&srcset'
 // @ts-ignore
-import { src as placeholder } from '~/assets/images/hero.jpg?width=400&metadata'
+import { src as placeholder } from '~/assets/images/chatbot-whatsapp.png?width=400&metadata'
 
 export default component$(() => {
     return (
         <section
-            class={`bg-gradient-to-b md:bg-gradient-to-r from-white via-purple-50 to-sky-100 dark:bg-none mt-[-72px]`}
+            class={` from-white via-purple-50 to-sky-100 dark:bg-none mt-[-95px]`}
         >
             <div class="max-w-6xl mx-auto px-4 sm:px-6 md:flex md:h-screen 2xl:h-auto pt-[72px]">
                 <div class="py-12 md:py-12 lg:py-16 block md:flex text-center md:text-left">
                     <div class="pb-12 md:pb-0 md:py-0 max-w-5xl mx-auto md:pr-16 flex items-center basis-[56%]">
                         <div>
                             <h1 class="text-5xl md:text-[3.48rem] font-bold leading-tighter tracking-tighter mb-4 font-heading px-4 md:px-0">
-                                Free template for <br class="hidden lg:block" />{' '}
+                                Chatbot +
-                                <span class="hidden lg:inline">
+                                <span class="sm:whitespace-nowrap text-[#25b637]">
-                                    create a website using{' '}
+                                    WhatsApp
                                 </span>{' '}
-                                <span class="text-[#039de1]">Qwik</span> +{' '}
+                                <br class="hidden lg:block" />{' '}
-                                <span class="sm:whitespace-nowrap text-[#039de1]">
+                                <span class="hidden lg:inline">
-                                    Tailwind CSS
+                                    prueba nuestro servicio{' '}
+                                    <span class="text-[#25b637]">gratis</span>{' '}
                                 </span>
                             </h1>
                             <div class="max-w-3xl mx-auto">
                                 <p class="text-xl text-gray-600 mb-8 dark:text-slate-400">
                                     <span class="font-semibold underline decoration-wavy decoration-1 decoration-secondary-600 underline-offset-2">
-                                        Qwind
+                                        Con nuestro{' '}
-                                    </span>{' '}
-                                    is a production ready template to start your
-                                    new website using <em>Qwik</em> +{' '}
-                                    <em>Tailwind CSS</em>. It has been designed
-                                    following Best Practices, SEO,
-                                    Accessibility,{' '}
-                                    <span class="inline md:hidden">...</span>
-                                    <span class="hidden md:inline">
-                                        Dark Mode, Great Page Speed, image
-                                        optimization, sitemap generation and
-                                        more.
                                     </span>
+                                    <span class="font-semibold underline decoration-wavy decoration-1 decoration-secondary-600 underline-offset-2">
+                                        Chatbot , puede configurar respuestas
+                                        automatizadas para preguntas frecuentes
+                                    </span>{' '}
+                                    , recibir y responder mensajes de manera
+                                    automatizada, y hacer un seguimiento de las
+                                    interacciones con los clientes. Además,
+                                    nuestro Chatbot se integra fácilmente con
+                                    otros sistemas y herramientas que ya esté
+                                    utilizando en su negocio.
                                 </p>
-                                <div class="max-w-xs sm:max-w-md flex flex-nowrap flex-col sm:flex-row gap-4 m-auto md:m-0 justify-center md:justify-start">
+
+                                <div class="max-w-xs sm:max-w-md flex flex-nowrap flex-col sm:flex-col gap-4 m-auto md:m-0 justify-center md:justify-start">
                                     <div class="flex w-full sm:w-auto">
-                                        <a
+                                        <code class="btn btn-primary  sm:mb-0 w-full">
-                                            class="btn btn-primary sm:mb-0 w-full"
+                                            npm create bot-whatsapp@latest
-                                            href="https://github.com/onwidget/qwind"
+                                        </code>
-                                            target="_blank"
-                                            rel="noopener"
-                                        >
-                                            Get template
-                                        </a>
                                     </div>
                                     <div class="flex w-full sm:w-auto">
-                                        <button class="btn w-full bg-gray-50 dark:bg-transparent">
+                                        <a
-                                            Learn more
+                                            href="/docs"
-                                        </button>
+                                            class="btn  bg-gray-50 dark:bg-transparent"
+                                        >
+                                            Más información
+                                        </a>
                                     </div>
                                 </div>
                             </div>
@@ -65,6 +64,24 @@ export default component$(() => {
                     </div>
                     <div class="block md:flex items-center flex-1">
                         <div class="relative m-auto max-w-4xl">
+                            {/* <video
+                                width="600"
+                                height="100%"
+                                autoPlay
+                                muted
+                                playsInline
+                            >
+                                <source
+                                    src="https://s19.aconvert.com/convert/p3r68-cdx67/5if2i-k2pvs.webm"
+                                    type='video/mp4; codecs="hvc1"'
+                                />
+
+                                <source
+                                    src="https://s19.aconvert.com/convert/p3r68-cdx67/5if2i-k2pvs.webm"
+                                    type="video/webm"
+                                />
+                            </video> */}
+
                             <picture>
                                 <source srcSet={srcsetAvif} type="image/avif" />
                                 <source srcSet={srcsetWebp} type="image/webp" />
@@ -72,7 +89,7 @@ export default component$(() => {
                                     src={placeholder}
                                     width={1000}
                                     height={1250}
-                                    class="mx-auto w-full rounded-md md:h-full drop-shadow-2xl bg-gray-400 dark:bg-slate-700"
+                                    class="mx-auto w-full rounded-md md:h-full drop-shadow-2xl"
                                     alt="Qwind Hero Image (Cool dog)"
                                     loading="eager"
                                     decoding="async"

packages/docs/src/components/widgets/NavBar.tsx

@@ -5,28 +5,62 @@ import { useLocation } from '@builder.io/qwik-city'
  * options = [] array con la lista de opciones de la documentacion
  */
 export default component$(
-    ({ options = [] }: { options: { link: string; name: string }[] }) => {
+    ({
-        const location = useLocation()
+        options = [],
-        const currentPage = location.pathname
+    }: {
+        options: {
+            title: string
+            link?: string
+            list: { link: string; name: string }[]
+        }[]
+    }) => {
         return (
             <div>
-                <ul>
+                {options.map((item) => (
-                    {options.map((opt) => (
+                    <UlCompoent title={item.title} list={item.list} />
-                        <li>
+                ))}
-                            <a
-                                class={
-                                    currentPage === `${opt.link}/`
-                                        ? 'font-semibold'
-                                        : ''
-                                }
-                                href={opt.link}
-                            >
-                                {opt.name}
-                            </a>
-                        </li>
-                    ))}
-                </ul>
             </div>
         )
     }
 )
+
+export const UlCompoent = component$(
+    (porps: { title: string; list: { link: string; name: string }[] }) => {
+        return (
+            <ul>
+                <li class="mt-2 lg:mt-2">
+                    <h5 class="mb-8 lg:mb-3 font-semibold text-slate-900 dark:text-slate-200">
+                        {porps.title}
+                    </h5>
+                    <LiComponent list={porps.list} />
+                </li>
+            </ul>
+        )
+    }
+)
+
+export const LiComponent = component$(
+    (porps: { list: { link: string; name: string }[] }) => {
+        const location = useLocation()
+        const currentPage = location.pathname
+        return (
+            <ul class="space-y-6 lg:space-y-2 border-l border-slate-100 dark:border-slate-800">
+                {porps.list.map((opt) => (
+                    <li>
+                        <a
+                            class={[
+                                currentPage === `${opt.link}/`
+                                    ? 'font-semibold'
+                                    : '',
+                                'block border-l pl-4 -ml-px border-transparent hover:border-slate-400 dark:hover:border-slate-500 text-slate-700 hover:text-slate-900 dark:text-slate-400 dark:hover:text-slate-300 ',
+                            ]}
+                            href={opt.link}
+                        >
+                            {opt.name}
+                        </a>
+                    </li>
+                ))}
+            </ul>
+        )
+    }
+)

packages/docs/src/root.tsx

@@ -8,6 +8,7 @@ import {
 import { RouterHead } from '~/components/core/RouterHead'
 import { DarkThemeLauncher } from '~/components/core/DarkThemeLauncher'
 
+import fontStyles from '~/assets/styles/fonts.css?inline'
 import globalStyles from '~/assets/styles/global.css?inline'
 
 export default component$(() => {
@@ -18,6 +19,7 @@ export default component$(() => {
      * Dont remove the `<head>` and `<body>` elements.
      */
 
+    useStyles$(fontStyles)
     useStyles$(globalStyles)
 
     return (
@@ -29,10 +31,7 @@ export default component$(() => {
                     content="width=device-width, initial-scale=1"
                 />
                 <link rel="manifest" href="/manifest.json" />
-                <link
+
-                    href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;700&display=swap"
-                    rel="stylesheet"
-                />
                 <RouterHead />
                 <DarkThemeLauncher />
             </head>

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

@@ -0,0 +1 @@
+# Botones

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

@@ -0,0 +1 @@
+# Personas que quieran unirse

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

@@ -1,3 +1,5 @@
+import Collaborators from '../../components/widgets/Collaborators'
+
 # Primeros Pasos
 
 Los chatbots son una herramienta poderosa para que las empresas y
@@ -6,8 +8,6 @@ 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
 
 Es muy sencillo solo deberas ejecutar el siguiente comando 🚀
@@ -16,4 +16,12 @@ Es muy sencillo solo deberas ejecutar el siguiente comando 🚀
 npm create bot-whatsapp@latest
 ```
 
-![](https://camo.githubusercontent.com/97cd563fb448c72cc50dd60d71e85d269e5b1c738473d56fee6e023e1e0723bb/68747470733a2f2f692e67697068792e636f6d2f6d656469612f6e744d74365476616c70737454497837416b2f67697068792e77656270)
+<div class="my-4 w-full">
+    <img
+        class="w-full"
+        src="https://camo.githubusercontent.com/97cd563fb448c72cc50dd60d71e85d269e5b1c738473d56fee6e023e1e0723bb/68747470733a2f2f692e67697068792e636f6d2f6d656469612f6e744d74365476616c70737454497837416b2f67697068792e77656270"
+        alt=""
+    />
+</div>
+
+<Collaborators />

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

@@ -9,75 +9,112 @@ contributors:
 
 # Instalación
 
-Instalar el bot muy sencillo, solo deberas ejecutar el siguiente comando 🚀
+### 📄 Bienvenido/a
 
-```shell
+Si deseas colaborar con el proyecto existen varias maneras, la primera de ellas es aportando conocimiento y mejorando el repositorio (actualizando documentación, mejorando código, revisando **[issues](https://github.com/codigoencasa/bot-whatsapp/issues)**, etc).
-npm create bot-whatsapp@latest
+
+También es bien recibido los aportes económicos que se utilizaran para diferentes fines **[ver más](https://opencollective.com/bot-whatsapp)**
+
+El lenguaje principal que se utilizó para desarrollar este proyecto fue **JavaScript** con el fin de qué personas que están iniciando en el mundo de la programación puedan entender fácilmente.
+
+### 🤔 Preguntas frecuentes
+
+-   ¿Como puedo hacer aportaciones de código en el proyecto?: [Ver Video](https://youtu.be/Lxt8Acob6aU)
+-   ¿Como ejecutar el entorno de pruebas?: [Ver Video](https://youtu.be/Mf9V-dloBfk)
+-   ¿Como crear un nuevo proveedor?: [Ver Video](https://youtu.be/cahK9zH3SI8)
+-   ¿Que son los GithubActions?: [Ver Video](https://youtu.be/nYBEBFKLiqw)
+-   ¿Canales de comunicación?: [Discord](https://link.codigoencasa.com/DISCORD)
+
+---
+
+![](https://i.giphy.com/media/ntMt6TvalpstTIx7Ak/giphy.webp)
+
+**Requerimientos:**
+
+-   Node v16 o superior **[descargar node](https://nodejs.org/es/download/)**
+-   **[Yarn](https://classic.yarnpkg.com/lang/en/docs/install/#windows-stable)** como gestor de paquetes. En el link conseguirás las intrucciones para instalar yarn.
+-   **[VSCode](https://code.visualstudio.com/download)** (recomendado): Editor de código con plugins.
+-   **[Conventional Commits](https://marketplace.visualstudio.com/items?itemName=vivaxy.vscode-conventional-commits&ssr=false#overview)** (plugin-vscode) este plugin te ayudará a crear commit semántico.
+-   Se usará la rama **dev** _(https://github.com/leifermendez/bot-whatsapp/tree/dev)_ como rama principal hasta que se haga oficialmente el lanzamiento de la V2.
+
+### 🚀 Iniciando
+
+**Clonar repo rama dev**
+
+```
+git clone --branch dev https://github.com/codigoencasa/bot-whatsapp
 ```
 
-Te va a preguntar que si quieres crear un bot, contesta con "Y" y la tecla `Enter`
+**Instalar dependencias**
 
-```shell
+```
-🚀 Revisando tu Node.js
+cd bot-whatsapp
-Node.js compatible v18.12.0
+yarn install
-
-🙂 Revisando tu sistema operativo
-
-? Quieres crear un bot? (Y/n) »
 ```
 
-A continuación te va pedir que selecciones el proveedor que quieres usar, puedes seleccionarlo moviendote sobre las opciones con las flechas arriba y abajo, y cuando estes sobre el que quieres, presiona la tecla de `Espacio` y después la tecla `Enter`.
+**Compilar (build)**
+Para compilar la aplicación es necesario ejecutar este comando, el cual genera un directorio `lib` dentro de los paquetes del monorepo.
 
-```shell
+```
-? ¿Cuál proveedor de whatsapp quieres utilizar? » Espacio para seleccionar ↑/↓
+yarn build
-( )   whatsapp-web.js (gratis)
-( )   Venom (gratis)
-(x)   Baileys (gratis)
-( )   Twilio
-( )   API Oficial (Meta)
 ```
 
-Continuamos con la selección de la base de datos que vamos a usar para guardar las conversaciones, de igual manera, usamos las flechas y barra de espacio para la selección:
+**Example-app**
+Se ejecuta el CLI (Command Line Interface) para ayudarte a crear un app-bot de ejemplo.
 
-```shell
+```
-? ¿Cuál base de datos quieres utilizar? » Espacio para seleccionar ↑/↓
+yarn run cli
-(x)   Memory
-( )   Mongo
-( )   MySQL
-( )   Json
 ```
 
-Terminamos con la selección de preveedor y base de datos, y continuamos con la instalación:
+Selecionas (mediante las flechas arriba y abajo) el proveedor que quieras usar y cuando estes sobre el presiona la barra de espacio, igualmente selecciona la base de datos que quieras usar.
 
-Hay que cambiarnos de directorio al que se acaba de crear, dependiendo de lo que seleccionamos previamente, en este caso es `base-baileys-memory`.
+Se creó un subdirecorio con el nombre del proveedor y base de datos que seleccionaste, ejemplo: `base-bailey-mysql`
-Una vez que nos cambiamos de directorio ejecutamos el comando `npm install`.
-Y cuando termine la instalación ejecutamos `npm start`.
 
-```shell
+Dentro de ese directorio necesitas editar el archivo package.json y borrar las siguientes lineas:
-√ ¿Cuál base de datos quieres utilizar? » Memory
-success!
 
-⚡⚡⚡ INSTRUCCIONES ⚡⚡⚡
+```
-cd base-bailey-memory
+        "@bot-whatsapp/bot": "latest",
+        "@bot-whatsapp/cli": "latest",
+        "@bot-whatsapp/database": "latest",
+        "@bot-whatsapp/provider": "latest",
+```
+
+Cambiate al directorio creado ejemplo: `base-bailey-mysql`
+
+```
+cd base-baileys-mysql
+```
+
+Ejecuta los comandos:
+
+```
 npm install
+npm run pre-copy
 npm start
 ```
 
-En el directorio del bot (**base-baileys-memory**) se va a crear un archivo `qr.png`, este archivo contiene un código QR, hay que escanear ese código desde la aplicación de Whatsapp en el telefono que queremos ligar al bot.
+En el caso de MySql y Mongo es necesario especificar en app.js los datos de la conexión, ejemplo de MySql:
 
-```shell
+```
-⚡⚡ ACCIÓN REQUERIDA ⚡⚡
+const BaileysProvider = require('@bot-whatsapp/provider/baileys')
-Debes escanear el QR Code para iniciar session reivsa qr.svg
+const MySQLAdapter = require('@bot-whatsapp/database/mysql')
-Recuerda que el QR se actualiza cada minuto
+
-Necesitas ayuda: https://link.codigoencasa.com/DISCORD
+/**
+ * Declaramos las conexiones de MySQL
+ */
+const MYSQL_DB_HOST = 'localhost'
+const MYSQL_DB_USER = 'usr'
+const MYSQL_DB_PASSWORD = 'pass'
+const MYSQL_DB_NAME = 'bot'
 ```
 
-Una vez que escanemos el código nos va a aparecer el mensaje, y el bot está listo para recibir mensajes.
+![](https://i.imgur.com/dC6lEwy.png)
 
-```shell
+> **NOTA:** [Eres libre de aportar informacion a este documento o arreglar ortografia 🤣](https://github.com/codigoencasa/bot-whatsapp/edit/dev/CONTRIBUTING.md)
-Proveedor conectado y listo
-```
 
-Desde **otro** celular, manda un mensaje al numero que acabas de ligar con el texto "hola", y debes de recibir un mensaje de "Bienvenido a mi tienda".
+---
 
-**Listo.**
+-   [Discord](https://link.codigoencasa.com/DISCORD)
+-   [Twitter](https://twitter.com/leifermendez)
+-   [Youtube](https://www.youtube.com/watch?v=5lEMCeWEJ8o&list=PL_WGMLcL4jzWPhdhcUyhbFU6bC0oJd2BR)
+-   [Telegram](https://t.me/leifermendez)

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

@@ -3,23 +3,23 @@ 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'
+// import ExtraBar from '~/components/widgets/ExtraBar'
 
 export default component$(() => {
     const store = useStore({
         options: [
-            { name: 'Primeros pasos', link: '/docs' },
+            {
-            { name: 'Instalación', link: '/docs/install' },
+                title: 'Primeros pasos',
-            { name: 'Configuración', link: '/docs/settings' },
+                list: [
-            { name: 'Botones y Listas', link: '/docs/buttons_lists' },
+                    { name: 'Vista rápida', link: '/docs' },
-            { name: 'Migración', link: '/docs/migration' },
+                    { name: 'Instalación', link: '/docs/install' },
-            { name: 'Avanzado', link: '/docs/advanced' },
+                    { name: 'Configuración', link: '/docs/settings' },
-        ],
+                    { name: 'Migración', link: '/docs/migration' },
-        extraOptions: [
+                    { name: 'Botones y Listas', link: '/docs/buttons_lists' },
-            { name: 'Primeros pasos', link: '/docs', class: 'font-semibold' },
+                    { name: 'Avanzado', link: '/docs/advanced' },
-            { name: 'Instalación', link: '/docs' },
+                    { name: 'Contribuidores', link: '/docs/contribuiting' },
-            { name: 'Configuración', link: '/docs' },
+                ],
-            { name: 'Forma de pensar', link: '/docs' },
+            },
         ],
     })
 
@@ -35,7 +35,7 @@ export default component$(() => {
                         <Slot />
                     </div>
                     <div class={'px-3 col-span-1  '}>
-                        <ExtraBar options={store.extraOptions} />
+                        <NavBar options={store.options} />
                     </div>
                 </div>
             </main>

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

@@ -0,0 +1 @@
+# Listas

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

@@ -1,19 +1,10 @@
----
-title: Overview
-contributors:
-    - adamdbradley
-    - steve8708
-    - manucorporat
-    - gabrielgrant
----
-
 # Migración
 
 #### Versión (legacy)
 
-En la **_versión (legacy)_** se implementaban los flujos en dos archivos independientes, de la siguiente manera:
+En la **_versión (legacy)_** se implementas los flujos de esta manera, en dos archivos independientes.
 
-> **`initial.json`** para establecer las palabras claves y el flujo a responder, por otro lado, tambien se necesitaba implementar
+> **`initial.json`** para establecer las palabras claves y el flujo a responder, por otro lado tambien se necesitaba implementar.
 > **`response.json`** donde se escriben los mensajes a responder.
 
 ```json

packages/docs/src/routes/index.tsx

@@ -5,22 +5,22 @@ import Hero from '~/components/widgets/Hero'
 import Features from '~/components/widgets/Features'
 import FAQs from '~/components/widgets/FAQs'
 import Stats from '~/components/widgets/Stats'
-import CallToAction from '~/components/widgets/CallToAction'
+// import CallToAction from '~/components/widgets/CallToAction'
 
 export default component$(() => {
     return (
         <>
             <Hero />
             <Features />
+            {/* <CallToAction /> */}
             <FAQs />
             <Stats />
-            <CallToAction />
         </>
     )
 })
 
 export const head: DocumentHead = {
-    title: 'Qwind — Free template for starts a website using Qwik + Tailwind CSS',
+    title: 'Chatbot Whatsapp — Servicio de chatbot para whatspp gratis proyecto OpenSource',
     meta: [
         {
             name: 'description',

packages/docs/tailwind.config.js

@@ -8,14 +8,215 @@ module.exports = {
     theme: {
         extend: {
             colors: {
-                primary: colors.purple,
+                primary: colors.green,
                 secondary: colors.sky,
             },
+            typography: (theme) => ({
+                DEFAULT: {
+                    css: {
+                        maxWidth: 'none',
+                        color: theme('colors.slate.700'),
+                        hr: {
+                            borderColor: theme('colors.slate.100'),
+                            marginTop: '3em',
+                            marginBottom: '3em',
+                        },
+                        'h1, h2, h3': {
+                            letterSpacing: '-0.025em',
+                        },
+                        h2: {
+                            marginBottom: `${16 / 24}em`,
+                        },
+                        h3: {
+                            marginTop: '2.4em',
+                            lineHeight: '1.4',
+                        },
+                        h4: {
+                            marginTop: '2em',
+                            fontSize: '1.125em',
+                        },
+                        'h2 small, h3 small, h4 small': {
+                            fontFamily: theme('fontFamily.mono').join(', '),
+                            color: theme('colors.slate.500'),
+                            fontWeight: 500,
+                        },
+                        'h2 small': {
+                            fontSize: theme('fontSize.lg')[0],
+                            ...theme('fontSize.lg')[1],
+                        },
+                        'h3 small': {
+                            fontSize: theme('fontSize.base')[0],
+                            ...theme('fontSize.base')[1],
+                        },
+                        'h4 small': {
+                            fontSize: theme('fontSize.sm')[0],
+                            ...theme('fontSize.sm')[1],
+                        },
+                        'h2, h3, h4': {
+                            'scroll-margin-top': 'var(--scroll-mt)',
+                        },
+                        ul: {
+                            listStyleType: 'none',
+                            paddingLeft: 0,
+                        },
+                        'ul > li': {
+                            position: 'relative',
+                            paddingLeft: '1.75em',
+                        },
+                        'ul > li::before': {
+                            content: '""',
+                            width: '0.75em',
+                            height: '0.125em',
+                            position: 'absolute',
+                            top: 'calc(0.875em - 0.0625em)',
+                            left: 0,
+                            borderRadius: '999px',
+                            backgroundColor: theme('colors.slate.300'),
+                        },
+                        a: {
+                            fontWeight: theme('fontWeight.semibold'),
+                            textDecoration: 'none',
+                            borderBottom: `1px solid ${theme(
+                                'colors.sky.300'
+                            )}`,
+                        },
+                        'a:hover': {
+                            borderBottomWidth: '2px',
+                        },
+                        'a code': {
+                            color: 'inherit',
+                            fontWeight: 'inherit',
+                        },
+                        strong: {
+                            color: theme('colors.slate.900'),
+                            fontWeight: theme('fontWeight.semibold'),
+                        },
+                        'a strong': {
+                            color: 'inherit',
+                            fontWeight: 'inherit',
+                        },
+                        kbd: {
+                            background: theme('colors.slate.100'),
+                            borderWidth: '1px',
+                            borderColor: theme('colors.slate.200'),
+                            padding: '0.125em 0.25em',
+                            color: theme('colors.slate.700'),
+                            fontWeight: 500,
+                            fontSize: '0.875em',
+                            fontVariantLigatures: 'none',
+                            borderRadius: '4px',
+                            margin: '0 1px',
+                        },
+                        code: {
+                            fontWeight: theme('fontWeight.medium'),
+                            fontVariantLigatures: 'none',
+                        },
+                        pre: {
+                            color: theme('colors.slate.50'),
+                            borderRadius: theme('borderRadius.xl'),
+                            padding: theme('padding.5'),
+                            boxShadow: theme('boxShadow.md'),
+                            display: 'flex',
+                            marginTop: `${20 / 14}em`,
+                            marginBottom: `${32 / 14}em`,
+                        },
+                        'p + pre': {
+                            marginTop: `${-4 / 14}em`,
+                        },
+                        'pre + pre': {
+                            marginTop: `${-16 / 14}em`,
+                        },
+                        'pre code': {
+                            flex: 'none',
+                            minWidth: '100%',
+                        },
+                        table: {
+                            fontSize: theme('fontSize.sm')[0],
+                            lineHeight: theme('fontSize.sm')[1].lineHeight,
+                        },
+                        thead: {
+                            color: theme('colors.slate.700'),
+                            borderBottomColor: theme('colors.slate.200'),
+                        },
+                        'thead th': {
+                            paddingTop: 0,
+                            fontWeight: theme('fontWeight.semibold'),
+                        },
+                        'tbody tr': {
+                            borderBottomColor: theme('colors.slate.100'),
+                        },
+                        'tbody tr:last-child': {
+                            borderBottomWidth: '1px',
+                        },
+                        'tbody code': {
+                            fontSize: theme('fontSize.xs')[0],
+                        },
+                        'figure figcaption': {
+                            textAlign: 'center',
+                            fontStyle: 'italic',
+                        },
+                        'figure > figcaption': {
+                            marginTop: `${12 / 14}em`,
+                        },
+                    },
+                },
+                dark: {
+                    css: {
+                        color: theme('colors.slate.400'),
+                        'h2, h3, h4, thead th': {
+                            color: theme('colors.slate.200'),
+                        },
+                        'h2 small, h3 small, h4 small': {
+                            color: theme('colors.slate.400'),
+                        },
+                        kbd: {
+                            background: theme('colors.slate.700'),
+                            borderColor: theme('colors.slate.600'),
+                            color: theme('colors.slate.200'),
+                        },
+                        code: {
+                            color: theme('colors.slate.200'),
+                        },
+                        hr: {
+                            borderColor: theme('colors.slate.200'),
+                            opacity: '0.05',
+                        },
+                        pre: {
+                            boxShadow: 'inset 0 0 0 1px rgb(255 255 255 / 0.1)',
+                        },
+                        a: {
+                            color: theme('colors.white'),
+                            borderBottomColor: theme('colors.sky.400'),
+                        },
+                        strong: {
+                            color: theme('colors.slate.200'),
+                        },
+                        thead: {
+                            color: theme('colors.slate.300'),
+                            borderBottomColor: 'rgb(148 163 184 / 0.2)',
+                        },
+                        'tbody tr': {
+                            borderBottomColor: 'rgb(148 163 184 / 0.1)',
+                        },
+                        blockQuote: {
+                            color: theme('colors.white'),
+                        },
+                    },
+                },
+            }),
             fontFamily: {
-                sans: ["'Inter'", ...defaultTheme.fontFamily.sans],
+                sans: ['Inter var', ...defaultTheme.fontFamily.sans],
+                mono: ['Fira Code VF', ...defaultTheme.fontFamily.mono],
+                source: ['Source Sans Pro', ...defaultTheme.fontFamily.sans],
+                'ubuntu-mono': ['Ubuntu Mono', ...defaultTheme.fontFamily.mono],
             },
         },
     },
-    plugins: [],
     darkMode: 'class',
+    plugins: [
+        require('@tailwindcss/line-clamp'),
+        require('@tailwindcss/typography'),
+        require('@tailwindcss/aspect-ratio'),
+        require('@tailwindcss/forms')({ strategy: 'class' }),
+    ],
 }

yarn.lock

@@ -916,11 +916,11 @@ __metadata:
   linkType: hard
 
 "@babel/runtime@npm:^7.3.4":
-  version: 7.20.6
+  version: 7.20.7
-  resolution: "@babel/runtime@npm:7.20.6"
+  resolution: "@babel/runtime@npm:7.20.7"
   dependencies:
     regenerator-runtime: ^0.13.11
-  checksum: 42a8504db21031b1859fbc0f52d698a3d2f5ada9519eb76c6f96a7e657d8d555732a18fe71ef428a67cc9fc81ca0d3562fb7afdc70549c5fec343190cbaa9b03
+  checksum: 4629ce5c46f06cca9cfb9b7fc00d48003335a809888e2b91ec2069a2dcfbfef738480cff32ba81e0b7c290f8918e5c22ddcf2b710001464ee84ba62c7e32a3a3
   languageName: node
   linkType: hard
 
@@ -1882,6 +1882,49 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@tailwindcss/aspect-ratio@npm:^0.4.0":
+  version: 0.4.2
+  resolution: "@tailwindcss/aspect-ratio@npm:0.4.2"
+  peerDependencies:
+    tailwindcss: ">=2.0.0 || >=3.0.0 || >=3.0.0-alpha.1"
+  checksum: e998fcb0c1a55cae4e83c4510fed0d4d1cba845b7ed79a18451f55377d4a177050c2401af59222662a216aa9c407ef49c475c93db8e13246e0bb3f1ed42f78f8
+  languageName: node
+  linkType: hard
+
+"@tailwindcss/forms@npm:^0.5.3":
+  version: 0.5.3
+  resolution: "@tailwindcss/forms@npm:0.5.3"
+  dependencies:
+    mini-svg-data-uri: ^1.2.3
+  peerDependencies:
+    tailwindcss: ">=3.0.0 || >= 3.0.0-alpha.1"
+  checksum: 9eddb4dbd06d01b1068138ff52a54ed0e35a28e7bfd3c72e226fc28658ecd92a9c078c4abe9c83db090984672040644d7ae2e035933fb619dd703df1d87aa275
+  languageName: node
+  linkType: hard
+
+"@tailwindcss/line-clamp@npm:^0.3.1":
+  version: 0.3.1
+  resolution: "@tailwindcss/line-clamp@npm:0.3.1"
+  peerDependencies:
+    tailwindcss: ">=2.0.0 || >=3.0.0 || >=3.0.0-alpha.1"
+  checksum: 805322a6333f029d6d961e02f23099d16f55d31f4736511bc741efff4097a1ad1574a7dff0530b17dbc974e08138b3beb13766f809e0116ebc192b0edf38b737
+  languageName: node
+  linkType: hard
+
+"@tailwindcss/typography@npm:^0.5.0":
+  version: 0.5.8
+  resolution: "@tailwindcss/typography@npm:0.5.8"
+  dependencies:
+    lodash.castarray: ^4.4.0
+    lodash.isplainobject: ^4.0.6
+    lodash.merge: ^4.6.2
+    postcss-selector-parser: 6.0.10
+  peerDependencies:
+    tailwindcss: "*"
+  checksum: afe172c75ddf086f840b10f95e562bb210dde5612fccfcfd3c4cee688c57ca5b79569b3c2cb75687b34b1b7f9ad194b14e9fbb09a741cd69198bb92b5ac3838f
+  languageName: node
+  linkType: hard
+
 "@tootallnate/once@npm:1":
   version: 1.1.2
   resolution: "@tootallnate/once@npm:1.1.2"
@@ -7434,6 +7477,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"lodash.castarray@npm:^4.4.0":
+  version: 4.4.0
+  resolution: "lodash.castarray@npm:4.4.0"
+  checksum: fca8c7047e0ae2738b0b2503fb00157ae0ff6d8a1b716f87ed715b22560e09de438c75b65e01a7e44ceb41c5b31dce2eb576e46db04beb9c699c498e03cbd00f
+  languageName: node
+  linkType: hard
+
 "lodash.clone@npm:^4.5.0":
   version: 4.5.0
   resolution: "lodash.clone@npm:4.5.0"
@@ -8301,6 +8351,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"mini-svg-data-uri@npm:^1.2.3":
+  version: 1.4.4
+  resolution: "mini-svg-data-uri@npm:1.4.4"
+  bin:
+    mini-svg-data-uri: cli.js
+  checksum: 997f1fbd8d59a70f03761e18626d335197a3479cb9d1ff75678e4b64b864d32a0b8fc18115eabde035e5299b8b4a354a78e57dd6ac10f9d604162a6170898d09
+  languageName: node
+  linkType: hard
+
 "miniflare@npm:2.10.0":
   version: 2.10.0
   resolution: "miniflare@npm:2.10.0"
@@ -9718,6 +9777,16 @@ __metadata:
   languageName: node
   linkType: hard
 
+"postcss-selector-parser@npm:6.0.10":
+  version: 6.0.10
+  resolution: "postcss-selector-parser@npm:6.0.10"
+  dependencies:
+    cssesc: ^3.0.0
+    util-deprecate: ^1.0.2
+  checksum: 46afaa60e3d1998bd7adf6caa374baf857cc58d3ff944e29459c9a9e4680a7fe41597bd5b755fc81d7c388357e9bf67c0251d047c640a09f148e13606b8a8608
+  languageName: node
+  linkType: hard
+
 "postcss-selector-parser@npm:^6.0.10, postcss-selector-parser@npm:^6.0.4, postcss-selector-parser@npm:^6.0.5, postcss-selector-parser@npm:^6.0.9":
   version: 6.0.11
   resolution: "postcss-selector-parser@npm:6.0.11"
@@ -10034,6 +10103,10 @@ __metadata:
     "@builder.io/qwik-city": 0.0.128
     "@fontsource/inter": ^4.5.14
     "@iconify-json/tabler": ^1.1.49
+    "@tailwindcss/aspect-ratio": ^0.4.0
+    "@tailwindcss/forms": ^0.5.3
+    "@tailwindcss/line-clamp": ^0.3.1
+    "@tailwindcss/typography": ^0.5.0
     "@types/eslint": 8.4.10
     "@types/node": latest
     "@typescript-eslint/eslint-plugin": 5.45.0