diff --git a/packages/docs/src/components/atoms/Logo.tsx b/packages/docs/src/components/atoms/Logo.tsx
index bd310f5..b5e1199 100644
--- a/packages/docs/src/components/atoms/Logo.tsx
+++ b/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>
 ))
diff --git a/packages/docs/src/components/icons/IconDiscord.tsx b/packages/docs/src/components/icons/IconDiscord.tsx
new file mode 100644
index 0000000..8d70ef8
--- /dev/null
+++ b/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>
+)
diff --git a/packages/docs/src/components/widgets/FAQs.tsx b/packages/docs/src/components/widgets/FAQs.tsx
index 6377cb1..c9c9f70 100644
--- a/packages/docs/src/components/widgets/FAQs.tsx
+++ b/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>
diff --git a/packages/docs/src/components/widgets/Features.tsx b/packages/docs/src/components/widgets/Features.tsx
index 5f870e5..87cd099 100644
--- a/packages/docs/src/components/widgets/Features.tsx
+++ b/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.',
-                icon: 'tabler:brand-tailwind',
+                    '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.',
             },
             {
-                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...',
-                icon: 'tabler:components',
+                    '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.',
             },
             {
-                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.',
-                icon: 'tabler:list-check',
+                    '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.',
             },
         ],
         [
             {
-                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{' '}
-                        <span class="whitespace-nowrap">Qwind</span>
+                        Nuestras principales{' '}
+                        <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
-                        voluptatem accusantium doloremque rem aperiam, eaque
-                        ipsa quae.
+                        El secreto es mantener los procesos repetitivos en
+                        procesos automatizados simples, por eso te mostramos en
+                        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>
diff --git a/packages/docs/src/components/widgets/Header.tsx b/packages/docs/src/components/widgets/Header.tsx
index 14967b1..9a11a0d 100644
--- a/packages/docs/src/components/widgets/Header.tsx
+++ b/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({
@@ -103,6 +104,14 @@ export default component$(() => {
                     <div class="md:self-center flex items-center mb-4 md:mb-0 ml-2">
                         <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"
diff --git a/packages/docs/src/components/widgets/Hero.tsx b/packages/docs/src/components/widgets/Hero.tsx
index 04c8cb8..c590eed 100644
--- a/packages/docs/src/components/widgets/Hero.tsx
+++ b/packages/docs/src/components/widgets/Hero.tsx
@@ -10,17 +10,17 @@ import { src as placeholder } from '~/assets/images/chatbot-whatsapp.png?width=4
 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">
+                                Chatbot +
                                 <span class="sm:whitespace-nowrap text-[#25b637]">
-                                    Chatbot +
+                                    WhatsApp
                                 </span>{' '}
-                                WhatsApp
                                 <br class="hidden lg:block" />{' '}
                                 <span class="hidden lg:inline">
                                     prueba nuestro servicio{' '}
diff --git a/packages/docs/src/routes/index.tsx b/packages/docs/src/routes/index.tsx
index 1d072b1..fb3ffaf 100644
--- a/packages/docs/src/routes/index.tsx
+++ b/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: 'Chatbot Whatsapp — Free template for starts a website using Qwik + Tailwind CSS',
+    title: 'Chatbot Whatsapp — Servicio de chatbot para whatspp gratis proyecto OpenSource',
     meta: [
         {
             name: 'description',