From 46d03817af0bf0643de5ffa0c93ae10bb4687f0c Mon Sep 17 00:00:00 2001
From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com>
Date: Thu, 23 Oct 2025 14:42:42 +0000
Subject: [PATCH 01/10] Initial plan


From 5edfd901e0ad9059856400ed199a8045fc1f695b Mon Sep 17 00:00:00 2001
From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com>
Date: Thu, 23 Oct 2025 15:00:26 +0000
Subject: [PATCH 02/10] Modernize home page with enhanced hero section and
 improved visual design

Co-authored-by: enzosakamoto <98707474+enzosakamoto@users.noreply.github.com>
---
 src/features/home/pages/home-page.tsx | 160 ++++++++++++++++++--------
 1 file changed, 109 insertions(+), 51 deletions(-)

diff --git a/src/features/home/pages/home-page.tsx b/src/features/home/pages/home-page.tsx
index d1ceeff..7a6ab3b 100644
--- a/src/features/home/pages/home-page.tsx
+++ b/src/features/home/pages/home-page.tsx
@@ -223,16 +223,24 @@ export function HomePage() {
       <Layout className="space-y-32 md:space-y-0">
         <motion.section
           id="home"
-          className="flex h-screen max-w-4/5 flex-col items-center justify-center gap-6 sm:max-w-none"
+          className="flex h-screen max-w-4/5 flex-col items-center justify-center gap-8 sm:max-w-none"
           initial="hidden"
           whileInView="visible"
           transition={{ staggerChildren: 0.04 }}
         >
-          <h1 className="text-center text-4xl font-semibold tracking-tight drop-shadow-xl sm:text-5xl md:text-7xl">
+          <motion.div
+            className="bg-primary/10 text-primary border-primary/20 rounded-full border px-4 py-2 text-sm font-medium backdrop-blur-sm"
+            transition={transition}
+            variants={variants}
+          >
+            🚀 Transforme documentos em conhecimento de IA
+          </motion.div>
+
+          <h1 className="text-center text-4xl font-bold tracking-tight drop-shadow-xl sm:text-6xl md:text-8xl lg:leading-tight">
             {words.map((word, index) => (
               <Fragment key={index}>
                 <motion.span
-                  className={`inline-block ${word === 'Knowly' ? 'from-primary to-foreground bg-gradient-to-r bg-clip-text text-transparent' : ''}`}
+                  className={`inline-block ${word === 'Knowly' ? 'from-primary bg-gradient-to-r via-purple-500 to-pink-500 bg-clip-text text-transparent' : ''}`}
                   transition={transition}
                   variants={variants}
                 >
@@ -243,7 +251,7 @@ export function HomePage() {
             ))}
           </h1>
           <motion.p
-            className="text-foreground/70 max-w-3xl text-center text-base font-light sm:text-lg md:text-2xl"
+            className="text-foreground/70 max-w-3xl text-center text-base leading-relaxed font-light sm:text-xl md:text-2xl"
             transition={transition}
             variants={variants}
           >
@@ -253,19 +261,26 @@ export function HomePage() {
           </motion.p>
 
           <motion.div
-            className="mt-2 flex gap-6"
+            className="mt-4 flex flex-col gap-4 sm:flex-row sm:gap-6"
             transition={transition}
             variants={variants}
           >
             <Link to="/docs">
-              <Button>Começar</Button>
+              <Button className="px-8 py-6 text-lg font-semibold shadow-lg transition-all hover:scale-105 hover:shadow-xl">
+                Começar Gratuitamente
+              </Button>
             </Link>
             <Link
               to="https://github.com/knowlyai/knowly"
               target="_blank"
               rel="noreferrer"
             >
-              <Button variant="outline">GitHub</Button>
+              <Button
+                variant="outline"
+                className="hover:bg-primary/10 px-8 py-6 text-lg font-semibold backdrop-blur-sm transition-all hover:scale-105"
+              >
+                Ver no GitHub
+              </Button>
             </Link>
           </motion.div>
           <LogoCarousel />
@@ -278,13 +293,18 @@ export function HomePage() {
           whileInView="visible"
           transition={{ staggerChildren: 0.04 }}
         >
-          <motion.h1
-            className="text-center text-4xl font-semibold sm:text-6xl"
+          <motion.div
+            className="mb-8 space-y-4 text-center"
             transition={transition}
             variants={variants}
           >
-            Como o Knowly Funciona
-          </motion.h1>
+            <h1 className="from-primary bg-gradient-to-r to-purple-600 bg-clip-text text-4xl font-bold text-transparent sm:text-6xl">
+              Como o Knowly Funciona
+            </h1>
+            <p className="text-foreground/60 mx-auto max-w-2xl text-lg">
+              Três passos simples para transformar seus documentos em IA
+            </p>
+          </motion.div>
           <motion.div
             className="grid w-full grid-cols-1 gap-12 md:grid-cols-2 lg:grid-cols-3"
             transition={transition}
@@ -293,10 +313,13 @@ export function HomePage() {
             {process.map((content, idx) => (
               <Card
                 key={idx}
-                className="bg-background relative flex flex-col items-center"
+                className="from-background to-background/50 hover:border-primary/50 relative flex flex-col items-center border-2 bg-gradient-to-br backdrop-blur-sm transition-all duration-300 hover:scale-105 hover:shadow-2xl"
               >
                 <CardHeader>
-                  <CardTitle className="text-foreground mb-4 text-3xl font-semibold">
+                  <div className="bg-primary/20 text-primary absolute top-4 left-4 flex h-10 w-10 items-center justify-center rounded-full text-lg font-bold">
+                    {idx + 1}
+                  </div>
+                  <CardTitle className="text-foreground mb-4 pt-8 text-3xl font-bold">
                     {content.title}
                   </CardTitle>
                 </CardHeader>
@@ -306,15 +329,15 @@ export function HomePage() {
                   </div>
                 </CardContent>
                 <CardFooter>
-                  <p className="text-foreground/80 text-center text-xl break-words">
+                  <p className="text-foreground/80 text-center text-xl leading-relaxed break-words">
                     {content.content}
                   </p>
                 </CardFooter>
                 {idx < process.length - 1 && window.innerWidth >= 768 && (
-                  <ArrowRight className="bg-background animate-bounce-right absolute inset-0 top-1/2 left-full ml-[6px] h-8 w-8 rounded-full p-2" />
+                  <ArrowRight className="bg-primary/20 text-primary animate-bounce-right absolute inset-0 top-1/2 left-full ml-[6px] h-10 w-10 rounded-full p-2 shadow-lg backdrop-blur-sm" />
                 )}
                 {idx < process.length - 1 && window.innerWidth < 768 && (
-                  <ArrowDown className="bg-background absolute inset-0 top-full left-1/2 mt-[10px] h-8 w-8 -translate-x-1/2 transform animate-bounce rounded-full p-2" />
+                  <ArrowDown className="bg-primary/20 text-primary absolute inset-0 top-full left-1/2 mt-[10px] h-10 w-10 -translate-x-1/2 transform animate-bounce rounded-full p-2 shadow-lg backdrop-blur-sm" />
                 )}
               </Card>
             ))}
@@ -328,13 +351,18 @@ export function HomePage() {
           whileInView="visible"
           transition={{ staggerChildren: 0.04 }}
         >
-          <motion.h1
-            className="mb-12 text-6xl font-semibold"
+          <motion.div
+            className="mb-16 space-y-4 text-center"
             transition={transition}
             variants={variants}
           >
-            Preços
-          </motion.h1>
+            <h1 className="from-primary bg-gradient-to-r to-purple-600 bg-clip-text text-5xl font-bold text-transparent sm:text-6xl">
+              Preços Simples e Transparentes
+            </h1>
+            <p className="text-foreground/60 mx-auto max-w-2xl text-lg">
+              Escolha o plano perfeito para suas necessidades
+            </p>
+          </motion.div>
           <motion.div
             className="grid w-full max-w-7xl grid-cols-1 gap-8 md:grid-cols-2 lg:grid-cols-3"
             transition={transition}
@@ -343,30 +371,47 @@ export function HomePage() {
             {plans.map((plan, idx) => (
               <Card
                 key={idx}
-                className="from-background to-background/80 w-full bg-gradient-to-b text-center"
+                className={`from-background to-background/80 w-full bg-gradient-to-b text-center backdrop-blur-sm transition-all duration-300 hover:scale-105 hover:shadow-2xl ${
+                  idx === 1
+                    ? 'border-primary shadow-primary/20 border-2 shadow-xl lg:scale-105'
+                    : 'border-2'
+                }`}
               >
-                <CardHeader>
-                  <CardDescription>{plan.title}</CardDescription>
-                  <CardTitle className="text-4xl font-extrabold">
-                    {plan.price}{' '}
-                    <span className="text-muted-foreground text-base font-normal">
-                      p/mês
-                    </span>
+                {idx === 1 && (
+                  <div className="from-primary absolute -top-4 left-1/2 -translate-x-1/2 rounded-full bg-gradient-to-r to-purple-600 px-4 py-1 text-sm font-semibold text-white shadow-lg">
+                    Mais Popular
+                  </div>
+                )}
+                <CardHeader className="pt-8">
+                  <CardDescription className="text-lg font-semibold">
+                    {plan.title}
+                  </CardDescription>
+                  <CardTitle className="from-primary bg-gradient-to-r to-purple-600 bg-clip-text text-5xl font-extrabold text-transparent">
+                    {plan.price}
                   </CardTitle>
+                  <span className="text-muted-foreground text-base font-normal">
+                    p/mês
+                  </span>
                 </CardHeader>
-                <CardContent className="space-y-4">
+                <CardContent className="space-y-4 py-6">
                   {plan.features.map((feature, idx) => (
                     <div
                       key={idx}
-                      className="text-primary/50 flex items-center gap-4 text-left"
+                      className="text-foreground/70 flex items-center gap-4 text-left"
                     >
-                      <Check className="text-green-60 h-5 w-5" />
+                      <div className="rounded-full bg-green-500/20 p-1">
+                        <Check className="h-5 w-5 text-green-600" />
+                      </div>
                       {feature}
                     </div>
                   ))}
                 </CardContent>
-                <CardFooter>
-                  <Button className="w-full">{plan.buttonText}</Button>
+                <CardFooter className="pb-8">
+                  <Button
+                    className={`w-full py-6 text-lg font-semibold ${idx === 1 ? 'shadow-primary/30 shadow-lg' : ''}`}
+                  >
+                    {plan.buttonText}
+                  </Button>
                 </CardFooter>
               </Card>
             ))}
@@ -385,19 +430,24 @@ export function HomePage() {
           }}
           variants={variants}
         >
-          <motion.h1
-            className="mb-8 text-center text-5xl font-semibold sm:mb-12 md:text-6xl"
+          <motion.div
+            className="mb-12 space-y-4 text-center"
             transition={transition}
             variants={variants}
           >
-            FAQ
-          </motion.h1>
+            <h1 className="from-primary bg-gradient-to-r to-purple-600 bg-clip-text text-5xl font-bold text-transparent sm:text-6xl">
+              Perguntas Frequentes
+            </h1>
+            <p className="text-foreground/60 mx-auto max-w-2xl text-lg">
+              Tudo o que você precisa saber sobre o Knowly
+            </p>
+          </motion.div>
           <motion.div
             className="w-full max-w-4xl"
             transition={transition}
             variants={variants}
           >
-            <Accordion className="w-full">
+            <Accordion className="w-full space-y-4">
               {faqs.map((faq, i) => (
                 <AccordionItem key={i} title={faq.title}>
                   {faq.content}
@@ -408,7 +458,7 @@ export function HomePage() {
                   <span>Acesse a página completa de FAQ</span>
                   <Button
                     variant="outline"
-                    className="ml-4"
+                    className="ml-4 transition-transform hover:scale-105"
                     onClick={() => (window.location.href = '/faq')}
                   >
                     Ir para FAQ
@@ -426,15 +476,20 @@ export function HomePage() {
           whileInView="visible"
           transition={{ staggerChildren: 0.04 }}
         >
-          <motion.h1
-            className="mb-6 text-center text-4xl font-semibold sm:mb-8 sm:text-5xl md:text-6xl"
+          <motion.div
+            className="mb-8 space-y-4 text-center md:mb-12"
             transition={transition}
             variants={variants}
           >
-            Sobre nós
-          </motion.h1>
+            <h1 className="from-primary bg-gradient-to-r to-purple-600 bg-clip-text text-4xl font-bold text-transparent sm:text-5xl md:text-6xl">
+              Sobre Nós
+            </h1>
+            <p className="text-foreground/60 mx-auto max-w-2xl text-lg">
+              Conheça a equipe por trás do Knowly
+            </p>
+          </motion.div>
           <motion.div
-            className="mb-8 max-w-4xl text-justify text-base leading-relaxed sm:text-lg md:mb-12 md:text-xl"
+            className="text-foreground/80 mb-8 max-w-4xl text-justify text-base leading-relaxed sm:text-lg md:mb-12 md:text-xl"
             transition={transition}
             variants={variants}
           >
@@ -455,13 +510,16 @@ export function HomePage() {
                 rel="noreferrer"
                 className="flex h-full w-full items-center justify-center"
               >
-                <Card className="flex h-[180px] w-full max-w-[280px] flex-col items-center justify-center p-4 transition-transform hover:scale-105 sm:h-[200px] md:max-w-none lg:h-[220px]">
-                  <img
-                    src={owner.image}
-                    alt={owner.name}
-                    className="h-16 w-16 rounded-full object-cover shadow-lg sm:h-20 sm:w-20 md:h-24 md:w-24"
-                  />
-                  <span className="mt-3 text-center text-xs leading-tight font-medium sm:text-sm md:mt-4">
+                <Card className="hover:border-primary/50 from-background to-background/50 flex h-[180px] w-full max-w-[280px] flex-col items-center justify-center bg-gradient-to-br p-4 backdrop-blur-sm transition-all duration-300 hover:scale-110 hover:shadow-2xl sm:h-[200px] md:max-w-none lg:h-[220px]">
+                  <div className="relative">
+                    <img
+                      src={owner.image}
+                      alt={owner.name}
+                      className="ring-primary/20 hover:ring-primary/50 h-16 w-16 rounded-full object-cover shadow-lg ring-2 transition-all sm:h-20 sm:w-20 md:h-24 md:w-24"
+                    />
+                    <div className="border-background absolute -right-1 -bottom-1 h-6 w-6 rounded-full border-2 bg-green-500"></div>
+                  </div>
+                  <span className="mt-3 text-center text-xs leading-tight font-semibold sm:text-sm md:mt-4">
                     {owner.name}
                   </span>
                   <span className="text-muted-foreground mt-2 text-center text-xs leading-tight font-light sm:text-sm">

From 9a934bd0195a3bb21f3ce43c43467d9e078c4a58 Mon Sep 17 00:00:00 2001
From: Enzo Sakamoto <enzo.sak@hotmail.com>
Date: Thu, 23 Oct 2025 14:32:26 -0300
Subject: [PATCH 03/10] refactor: update navbar links to use Link component for
 improved routing

---
 src/shared/components/navbar.tsx | 29 +++++++----------------------
 1 file changed, 7 insertions(+), 22 deletions(-)

diff --git a/src/shared/components/navbar.tsx b/src/shared/components/navbar.tsx
index a00f9b0..0cd6bde 100644
--- a/src/shared/components/navbar.tsx
+++ b/src/shared/components/navbar.tsx
@@ -1,6 +1,6 @@
 import brain from '@/assets/brain.png'
 import { Button } from '@/shared/components/button'
-import { useNavigate } from 'react-router-dom'
+import { Link, useNavigate } from 'react-router-dom'
 import {
   DropdownMenu,
   DropdownMenuContent,
@@ -72,23 +72,20 @@ export function Navbar() {
           variants={variants}
         >
           <a
-            href="/#how-knowly-works"
+            href="#how-knowly-works"
             className="hover:text-primary transition-colors"
           >
             Nosso produto
           </a>
-          <a href="/#pricing" className="hover:text-primary transition-colors">
+          <a href="#pricing" className="hover:text-primary transition-colors">
             Preços
           </a>
-          <a href="/docs" className="hover:text-primary transition-colors">
+          <Link to="/docs" className="hover:text-primary transition-colors">
             Documentação
-          </a>
-          <a href="/faq" className="hover:text-primary transition-colors">
+          </Link>
+          <Link to="/faq" className="hover:text-primary transition-colors">
             FAQ
-          </a>
-          <a href="/#about-us" className="hover:text-primary transition-colors">
-            Sobre nós
-          </a>
+          </Link>
           <DropdownMenu>
             <DropdownMenuTrigger className="outline-none">
               {theme === 'dark' ? (
@@ -241,18 +238,6 @@ export function Navbar() {
               >
                 FAQ
               </motion.a>
-              <motion.a
-                href="/#about-us"
-                className="hover:text-primary text-xl transition-colors"
-                onClick={closeMobileMenu}
-                variants={{
-                  hidden: { y: 20, opacity: 0 },
-                  visible: { y: 0, opacity: 1 }
-                }}
-                transition={{ duration: 0.5, ease: 'easeOut' }}
-              >
-                Sobre nós
-              </motion.a>
             </motion.div>
           </motion.div>
         )}

From 85d51955548e2f13f68589e853b2637cd8b38c46 Mon Sep 17 00:00:00 2001
From: Enzo Sakamoto <enzo.sak@hotmail.com>
Date: Thu, 23 Oct 2025 14:37:43 -0300
Subject: [PATCH 04/10] fix: update role for Izabel Sampaio Goes and adjust
 layout styles on home page

---
 src/features/home/pages/home-page.tsx | 14 +++-----------
 1 file changed, 3 insertions(+), 11 deletions(-)

diff --git a/src/features/home/pages/home-page.tsx b/src/features/home/pages/home-page.tsx
index 7a6ab3b..cc28c6a 100644
--- a/src/features/home/pages/home-page.tsx
+++ b/src/features/home/pages/home-page.tsx
@@ -119,7 +119,7 @@ const owners = [
   {
     name: 'Izabel Sampaio Goes',
     image: 'https://d1b8zs4rmj3xdl.cloudfront.net/iza.jpeg',
-    role: 'Estagiária de Ciência de Dados e IA na Evo Systems',
+    role: 'Estagiária de Business Analytics na Amazon',
     linkedin: 'https://www.linkedin.com/in/izabel-sampaio-goes/'
   },
   {
@@ -228,14 +228,6 @@ export function HomePage() {
           whileInView="visible"
           transition={{ staggerChildren: 0.04 }}
         >
-          <motion.div
-            className="bg-primary/10 text-primary border-primary/20 rounded-full border px-4 py-2 text-sm font-medium backdrop-blur-sm"
-            transition={transition}
-            variants={variants}
-          >
-            🚀 Transforme documentos em conhecimento de IA
-          </motion.div>
-
           <h1 className="text-center text-4xl font-bold tracking-tight drop-shadow-xl sm:text-6xl md:text-8xl lg:leading-tight">
             {words.map((word, index) => (
               <Fragment key={index}>
@@ -261,7 +253,7 @@ export function HomePage() {
           </motion.p>
 
           <motion.div
-            className="mt-4 flex flex-col gap-4 sm:flex-row sm:gap-6"
+            className="mt-4 flex flex-col items-center gap-4 sm:flex-row sm:gap-6"
             transition={transition}
             variants={variants}
           >
@@ -306,7 +298,7 @@ export function HomePage() {
             </p>
           </motion.div>
           <motion.div
-            className="grid w-full grid-cols-1 gap-12 md:grid-cols-2 lg:grid-cols-3"
+            className="grid w-full grid-cols-1 gap-16 md:grid-cols-2 lg:grid-cols-3"
             transition={transition}
             variants={variants}
           >

From a535afcc1992264e412dedd0226d2d393f5841b5 Mon Sep 17 00:00:00 2001
From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com>
Date: Thu, 23 Oct 2025 18:00:17 +0000
Subject: [PATCH 05/10] Add Getting Started documentation page with
 step-by-step instructions

Co-authored-by: enzosakamoto <98707474+enzosakamoto@users.noreply.github.com>
---
 src/features/docs/pages/getting-started.tsx | 359 ++++++++++++++++++++
 src/routes/app-routes.tsx                   |   2 +
 src/shared/components/docs-sidebar.tsx      |   8 +-
 3 files changed, 368 insertions(+), 1 deletion(-)
 create mode 100644 src/features/docs/pages/getting-started.tsx

diff --git a/src/features/docs/pages/getting-started.tsx b/src/features/docs/pages/getting-started.tsx
new file mode 100644
index 0000000..310a6dd
--- /dev/null
+++ b/src/features/docs/pages/getting-started.tsx
@@ -0,0 +1,359 @@
+import { motion } from 'framer-motion'
+import { h1, h2, p, ul, li, pre } from '@/shared/components/typography'
+
+export function GettingStartedPage() {
+  return (
+    <motion.div
+      initial={{ opacity: 0, y: 20 }}
+      animate={{ opacity: 1, y: 0 }}
+      transition={{ duration: 0.5 }}
+    >
+      {h1({ children: 'Comece a Usar o Knowly' })}
+
+      {p({
+        children: (
+          <>
+            Siga este guia passo a passo para começar a usar a plataforma Knowly
+            e criar sua primeira base de conhecimento de IA.
+          </>
+        )
+      })}
+
+      {h2({ children: 'Passo 1: Criar uma Conta' })}
+      {p({
+        children: (
+          <>Para começar, você precisa criar uma conta gratuita no Knowly:</>
+        )
+      })}
+      {ul({
+        children: (
+          <>
+            {li({
+              children: (
+                <>
+                  Acesse a página de{' '}
+                  <strong>
+                    <a href="/sign-up">cadastro</a>
+                  </strong>
+                </>
+              )
+            })}
+            {li({
+              children: <>Preencha seus dados: nome, e-mail e senha</>
+            })}
+            {li({
+              children: <>Confirme seu e-mail através do link enviado</>
+            })}
+            {li({
+              children: (
+                <>
+                  Faça <strong>login</strong> com suas credenciais
+                </>
+              )
+            })}
+          </>
+        )
+      })}
+
+      {h2({ children: 'Passo 2: Criar uma Base de Conhecimento' })}
+      {p({
+        children: (
+          <>
+            Após fazer login, você pode criar sua primeira base de conhecimento:
+          </>
+        )
+      })}
+      {ul({
+        children: (
+          <>
+            {li({
+              children: (
+                <>
+                  Acesse <strong>&quot;Minhas Bases&quot;</strong> no menu do
+                  usuário
+                </>
+              )
+            })}
+            {li({
+              children: (
+                <>
+                  Clique em <strong>&quot;Nova Base&quot;</strong>
+                </>
+              )
+            })}
+            {li({
+              children: (
+                <>
+                  Escolha um <strong>nome</strong> para sua base
+                </>
+              )
+            })}
+            {li({
+              children: (
+                <>
+                  Selecione o <strong>modelo de IA</strong> que deseja usar (ex:
+                  Amazon Bedrock)
+                </>
+              )
+            })}
+            {li({
+              children: (
+                <>
+                  Faça <strong>upload dos documentos PDF</strong> que servirão
+                  como base de conhecimento
+                </>
+              )
+            })}
+            {li({
+              children: (
+                <>
+                  Clique em <strong>&quot;Criar Base&quot;</strong>
+                </>
+              )
+            })}
+          </>
+        )
+      })}
+
+      {p({
+        children: (
+          <>
+            Aguarde alguns instantes enquanto o sistema processa seus
+            documentos. O tempo varia conforme a quantidade e tamanho dos
+            arquivos.
+          </>
+        )
+      })}
+
+      {h2({ children: 'Passo 3: Obter a Chave da Base' })}
+      {p({
+        children: (
+          <>
+            Depois que sua base estiver pronta, você precisa obter a chave de
+            API para integrá-la:
+          </>
+        )
+      })}
+      {ul({
+        children: (
+          <>
+            {li({
+              children: <>Na lista de bases, clique na base que você criou</>
+            })}
+            {li({
+              children: (
+                <>
+                  Na página de detalhes, copie a <strong>Chave da Base</strong>{' '}
+                  (Base ID)
+                </>
+              )
+            })}
+            {li({
+              children: (
+                <>
+                  Copie também sua <strong>Chave de API</strong> (API Key) nas
+                  configurações da conta
+                </>
+              )
+            })}
+          </>
+        )
+      })}
+
+      {p({
+        children: (
+          <>
+            <strong>Importante:</strong> Guarde essas chaves em um local seguro.
+            Você precisará delas para fazer requisições à API.
+          </>
+        )
+      })}
+
+      {h2({ children: 'Passo 4: Testar no Playground' })}
+      {p({
+        children: (
+          <>
+            Antes de integrar, você pode testar sua base de conhecimento no
+            Playground:
+          </>
+        )
+      })}
+      {ul({
+        children: (
+          <>
+            {li({
+              children: (
+                <>
+                  Clique em <strong>&quot;Testar no Playground&quot;</strong> na
+                  página da base
+                </>
+              )
+            })}
+            {li({
+              children: (
+                <>
+                  Digite perguntas relacionadas aos documentos que você enviou
+                </>
+              )
+            })}
+            {li({
+              children: (
+                <>
+                  Veja as respostas geradas pela IA com base no conhecimento da
+                  sua base
+                </>
+              )
+            })}
+          </>
+        )
+      })}
+
+      {h2({ children: 'Passo 5: Integrar com seu Código' })}
+      {p({
+        children: (
+          <>
+            Agora você pode integrar a base de conhecimento ao seu sistema
+            usando nossa API REST:
+          </>
+        )
+      })}
+
+      {pre({
+        children: `# Exemplo usando cURL
+curl -X POST https://api.knowly.ai/v1/query \\
+  -H "Content-Type: application/json" \\
+  -H "Authorization: Bearer SUA_CHAVE_DE_API" \\
+  -d '{
+    "prompt": "Qual é o horário de atendimento?",
+    "baseId": "SUA_BASE_ID"
+  }'`
+      })}
+
+      {p({
+        children: (
+          <>
+            <strong>Exemplo em JavaScript/Node.js:</strong>
+          </>
+        )
+      })}
+
+      {pre({
+        children: `const response = await fetch('https://api.knowly.ai/v1/query', {
+  method: 'POST',
+  headers: {
+    'Content-Type': 'application/json',
+    'Authorization': 'Bearer SUA_CHAVE_DE_API'
+  },
+  body: JSON.stringify({
+    prompt: 'Qual é o horário de atendimento?',
+    baseId: 'SUA_BASE_ID'
+  })
+});
+
+const data = await response.json();
+console.log(data.response);`
+      })}
+
+      {p({
+        children: (
+          <>
+            <strong>Exemplo em Python:</strong>
+          </>
+        )
+      })}
+
+      {pre({
+        children: `import requests
+
+url = "https://api.knowly.ai/v1/query"
+headers = {
+    "Content-Type": "application/json",
+    "Authorization": "Bearer SUA_CHAVE_DE_API"
+}
+data = {
+    "prompt": "Qual é o horário de atendimento?",
+    "baseId": "SUA_BASE_ID"
+}
+
+response = requests.post(url, json=data, headers=headers)
+print(response.json()["response"])`
+      })}
+
+      {h2({ children: 'Próximos Passos' })}
+      {p({
+        children: (
+          <>
+            Agora que você já sabe como começar, explore mais recursos da
+            plataforma:
+          </>
+        )
+      })}
+      {ul({
+        children: (
+          <>
+            {li({
+              children: (
+                <>
+                  Aprenda mais sobre{' '}
+                  <strong>
+                    <a href="/docs/foundation-models">Modelos de Fundação</a>
+                  </strong>
+                </>
+              )
+            })}
+            {li({
+              children: (
+                <>
+                  Veja detalhes sobre{' '}
+                  <strong>
+                    <a href="/docs/knowledge-bases">
+                      Gerenciamento de Bases de Conhecimento
+                    </a>
+                  </strong>
+                </>
+              )
+            })}
+            {li({
+              children: (
+                <>
+                  Explore opções avançadas de{' '}
+                  <strong>
+                    <a href="/docs/integration">Integração</a>
+                  </strong>
+                </>
+              )
+            })}
+            {li({
+              children: (
+                <>
+                  Gerencie sua{' '}
+                  <strong>
+                    <a href="/docs/subscription-management">Assinatura</a>
+                  </strong>
+                </>
+              )
+            })}
+          </>
+        )
+      })}
+
+      {p({
+        children: (
+          <>
+            Precisa de ajuda? Consulte nossa{' '}
+            <strong>
+              <a href="/faq">página de FAQ</a>
+            </strong>{' '}
+            ou entre em{' '}
+            <strong>
+              <a href="/faq/contact">contato</a>
+            </strong>
+            .
+          </>
+        )
+      })}
+    </motion.div>
+  )
+}
+
+export default GettingStartedPage
diff --git a/src/routes/app-routes.tsx b/src/routes/app-routes.tsx
index a2d14f9..343c5d7 100644
--- a/src/routes/app-routes.tsx
+++ b/src/routes/app-routes.tsx
@@ -21,6 +21,7 @@ import { CreateBasePipeline } from '@/features/user-area/pages/create-base-pipel
 import { PlaygroundPage } from '@/features/playground/pages/playground'
 import { DocsLayout } from '@/shared/components/docs-layout'
 import { AboutProjectPage } from '@/features/docs/pages/about-project'
+import { GettingStartedPage } from '@/features/docs/pages/getting-started'
 import { FoundationModelsPage } from '@/features/docs/pages/foundation-models'
 import { KnowledgeBasesPage } from '@/features/docs/pages/knowledge-bases'
 import { IntegrationPage } from '@/features/docs/pages/integration'
@@ -70,6 +71,7 @@ export function AppRoutes() {
 
         <Route element={<DocsLayout />}>
           <Route path="docs" element={<AboutProjectPage />} />
+          <Route path="docs/getting-started" element={<GettingStartedPage />} />
           <Route
             path="docs/foundation-models"
             element={<FoundationModelsPage />}
diff --git a/src/shared/components/docs-sidebar.tsx b/src/shared/components/docs-sidebar.tsx
index 44bb29f..53a3b41 100644
--- a/src/shared/components/docs-sidebar.tsx
+++ b/src/shared/components/docs-sidebar.tsx
@@ -9,7 +9,8 @@ import {
   TestTube,
   CreditCard,
   Menu,
-  X
+  X,
+  Rocket
 } from 'lucide-react'
 import { useState, useEffect } from 'react'
 import { Button } from '@/shared/components/button'
@@ -26,6 +27,11 @@ const docsItems: DocsSidebarItem[] = [
     icon: BookOpen,
     path: '/docs'
   },
+  {
+    label: 'Comece a Usar',
+    icon: Rocket,
+    path: '/docs/getting-started'
+  },
   {
     label: 'Modelos de Fundação',
     icon: Boxes,

From 1f3bdebdde64228c4f302e56a9162339572ee15d Mon Sep 17 00:00:00 2001
From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com>
Date: Thu, 23 Oct 2025 19:06:16 +0000
Subject: [PATCH 06/10] Add integration sub-pages for API, WhatsApp Business,
 and Instagram with expandable sidebar menu

Co-authored-by: enzosakamoto <98707474+enzosakamoto@users.noreply.github.com>
---
 src/features/docs/pages/integration-api.tsx   |  83 ++++
 .../docs/pages/integration-instagram.tsx      | 430 ++++++++++++++++++
 .../docs/pages/integration-whatsapp.tsx       | 302 ++++++++++++
 src/routes/app-routes.tsx                     |  12 +
 src/shared/components/docs-sidebar.tsx        | 139 +++++-
 5 files changed, 950 insertions(+), 16 deletions(-)
 create mode 100644 src/features/docs/pages/integration-api.tsx
 create mode 100644 src/features/docs/pages/integration-instagram.tsx
 create mode 100644 src/features/docs/pages/integration-whatsapp.tsx

diff --git a/src/features/docs/pages/integration-api.tsx b/src/features/docs/pages/integration-api.tsx
new file mode 100644
index 0000000..45bc9b7
--- /dev/null
+++ b/src/features/docs/pages/integration-api.tsx
@@ -0,0 +1,83 @@
+import { motion } from 'framer-motion'
+import { h1, h2, p, ul, li, pre } from '@/shared/components/typography'
+
+export function IntegrationApiPage() {
+  return (
+    <motion.div
+      initial={{ opacity: 0, y: 20 }}
+      animate={{ opacity: 1, y: 0 }}
+      transition={{ duration: 0.5 }}
+    >
+      {h1({ children: 'Integração via API' })}
+
+      {h2({ children: 'Integração simples via API' })}
+      {p({
+        children: (
+          <>
+            Depois de criar sua base de conhecimento no Knowly, você pode
+            integrá-la facilmente ao seu sistema usando nossa API. O
+            funcionamento é parecido com a API da OpenAI, muito usada em
+            chatbots de atendimento, como no WhatsApp.
+          </>
+        )
+      })}
+
+      {h2({ children: 'Como funciona?' })}
+      {ul({
+        children: (
+          <>
+            {li({
+              children: (
+                <>
+                  Você envia um <strong>prompt</strong> (mensagem ou pergunta)
+                  para a API, junto com sua chave de acesso.
+                </>
+              )
+            })}
+            {li({
+              children: (
+                <>
+                  A API responde com a melhor resposta baseada nos documentos
+                  que você enviou para sua base.
+                </>
+              )
+            })}
+            {li({
+              children: (
+                <>
+                  É possível usar essa integração em sites, sistemas internos,
+                  chatbots e muito mais.
+                </>
+              )
+            })}
+          </>
+        )
+      })}
+
+      {h2({ children: 'Exemplo de requisição' })}
+      {pre({
+        children: `POST https://api.knowly.ai/v1/query
+Headers:
+  Authorization: Bearer SUA_CHAVE_DE_API
+Body:
+{
+  "prompt": "Como faço para atualizar meus dados cadastrais?",
+  "baseId": "sua-base-id"
+}`
+      })}
+
+      {p({
+        children: (
+          <>
+            A resposta virá em formato JSON, com o texto gerado pela IA usando o
+            conhecimento da sua base. Assim, você pode automatizar atendimentos,
+            responder dúvidas de clientes ou integrar a IA ao seu sistema de
+            forma simples e eficiente.
+          </>
+        )
+      })}
+    </motion.div>
+  )
+}
+
+export default IntegrationApiPage
diff --git a/src/features/docs/pages/integration-instagram.tsx b/src/features/docs/pages/integration-instagram.tsx
new file mode 100644
index 0000000..4dfcb77
--- /dev/null
+++ b/src/features/docs/pages/integration-instagram.tsx
@@ -0,0 +1,430 @@
+import { motion } from 'framer-motion'
+import { h1, h2, p, ul, li, pre } from '@/shared/components/typography'
+
+export function IntegrationInstagramPage() {
+  return (
+    <motion.div
+      initial={{ opacity: 0, y: 20 }}
+      animate={{ opacity: 1, y: 0 }}
+      transition={{ duration: 0.5 }}
+    >
+      {h1({ children: 'Integração com Instagram' })}
+
+      {p({
+        children: (
+          <>
+            Automatize respostas nas mensagens diretas (DMs) do Instagram usando a
+            API do Knowly para responder automaticamente perguntas dos usuários
+            com base na sua base de conhecimento.
+          </>
+        )
+      })}
+
+      {h2({ children: 'Passo 1: Configurar Instagram Business Account' })}
+      {p({
+        children: (
+          <>
+            Para usar a API do Instagram, você precisa ter uma{' '}
+            <strong>Conta Business do Instagram</strong> conectada a uma{' '}
+            <strong>Página do Facebook</strong>:
+          </>
+        )
+      })}
+      {ul({
+        children: (
+          <>
+            {li({
+              children: (
+                <>
+                  Acesse{' '}
+                  <a
+                    href="https://business.facebook.com"
+                    target="_blank"
+                    rel="noreferrer"
+                    className="text-primary underline"
+                  >
+                    Meta Business Suite
+                  </a>
+                </>
+              )
+            })}
+            {li({
+              children: (
+                <>
+                  Conecte sua conta do Instagram a uma Página do Facebook
+                </>
+              )
+            })}
+            {li({
+              children: (
+                <>
+                  Converta para uma <strong>Conta Business</strong> no Instagram
+                </>
+              )
+            })}
+            {li({
+              children: (
+                <>
+                  Configure as permissões necessárias:{' '}
+                  <code>instagram_basic</code>, <code>instagram_manage_messages</code>
+                </>
+              )
+            })}
+          </>
+        )
+      })}
+
+      {h2({ children: 'Passo 2: Obter Token de Acesso' })}
+      {p({
+        children: (
+          <>
+            No{' '}
+            <a
+              href="https://developers.facebook.com"
+              target="_blank"
+              rel="noreferrer"
+              className="text-primary underline"
+            >
+              Meta for Developers
+            </a>
+            , crie um app e obtenha um token de acesso com as permissões
+            necessárias para gerenciar mensagens do Instagram.
+          </>
+        )
+      })}
+
+      {h2({ children: 'Passo 3: Configurar Webhook' })}
+      {p({
+        children: (
+          <>
+            Configure um webhook para receber notificações de mensagens diretas:
+          </>
+        )
+      })}
+
+      {pre({
+        children: `# URL do Webhook
+https://seu-servidor.com/webhook/instagram
+
+# Assine o evento: messages
+# Receberá notificações quando usuários enviarem DMs
+
+# Exemplo de payload recebido:
+{
+  "object": "instagram",
+  "entry": [{
+    "id": "INSTAGRAM_BUSINESS_ACCOUNT_ID",
+    "time": 1704116400,
+    "messaging": [{
+      "sender": { "id": "USER_ID" },
+      "recipient": { "id": "PAGE_ID" },
+      "timestamp": 1704116400,
+      "message": {
+        "mid": "MESSAGE_ID",
+        "text": "Qual é o horário de funcionamento?"
+      }
+    }]
+  }]
+}`
+      })}
+
+      {h2({ children: 'Passo 4: Integrar com Knowly API' })}
+      {p({
+        children: (
+          <>
+            Quando receber uma mensagem via webhook, consulte a API do Knowly e
+            envie a resposta de volta ao usuário:
+          </>
+        )
+      })}
+
+      {p({
+        children: (
+          <>
+            <strong>Exemplo em Node.js:</strong>
+          </>
+        )
+      })}
+
+      {pre({
+        children: `const express = require('express');
+const app = express();
+
+app.post('/webhook/instagram', async (req, res) => {
+  const { entry } = req.body;
+  
+  // Processar cada mensagem recebida
+  for (const event of entry) {
+    for (const messaging of event.messaging) {
+      const senderId = messaging.sender.id;
+      const messageText = messaging.message?.text;
+      
+      if (!messageText) continue;
+      
+      // Consultar API do Knowly
+      const knowlyResponse = await fetch('https://api.knowly.ai/v1/query', {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json',
+          'Authorization': 'Bearer SUA_CHAVE_DE_API'
+        },
+        body: JSON.stringify({
+          prompt: messageText,
+          baseId: 'SUA_BASE_ID'
+        })
+      });
+      
+      const data = await knowlyResponse.json();
+      const aiResponse = data.response;
+      
+      // Enviar resposta via Instagram Messaging API
+      await sendInstagramMessage(senderId, aiResponse);
+    }
+  }
+  
+  res.sendStatus(200);
+});
+
+// Função para enviar mensagem pelo Instagram
+async function sendInstagramMessage(recipientId, message) {
+  const pageId = 'SEU_INSTAGRAM_BUSINESS_ACCOUNT_ID';
+  
+  await fetch(\`https://graph.facebook.com/v18.0/\${pageId}/messages\`, {
+    method: 'POST',
+    headers: {
+      'Content-Type': 'application/json',
+      'Authorization': 'Bearer SEU_TOKEN_INSTAGRAM'
+    },
+    body: JSON.stringify({
+      recipient: { id: recipientId },
+      message: { text: message }
+    })
+  });
+}
+
+// Endpoint de verificação do webhook (obrigatório)
+app.get('/webhook/instagram', (req, res) => {
+  const mode = req.query['hub.mode'];
+  const token = req.query['hub.verify_token'];
+  const challenge = req.query['hub.challenge'];
+  
+  if (mode === 'subscribe' && token === 'SEU_TOKEN_DE_VERIFICACAO') {
+    res.status(200).send(challenge);
+  } else {
+    res.sendStatus(403);
+  }
+});`
+      })}
+
+      {p({
+        children: (
+          <>
+            <strong>Exemplo em Python:</strong>
+          </>
+        )
+      })}
+
+      {pre({
+        children: `from flask import Flask, request
+import requests
+
+app = Flask(__name__)
+
+@app.route('/webhook/instagram', methods=['POST'])
+def instagram_webhook():
+    data = request.json
+    
+    # Processar mensagens
+    for entry in data.get('entry', []):
+        for messaging in entry.get('messaging', []):
+            sender_id = messaging['sender']['id']
+            message_text = messaging.get('message', {}).get('text')
+            
+            if not message_text:
+                continue
+            
+            # Consultar API do Knowly
+            knowly_response = requests.post(
+                'https://api.knowly.ai/v1/query',
+                headers={
+                    'Content-Type': 'application/json',
+                    'Authorization': 'Bearer SUA_CHAVE_DE_API'
+                },
+                json={
+                    'prompt': message_text,
+                    'baseId': 'SUA_BASE_ID'
+                }
+            )
+            
+            ai_response = knowly_response.json()['response']
+            
+            # Enviar resposta pelo Instagram
+            send_instagram_message(sender_id, ai_response)
+    
+    return '', 200
+
+def send_instagram_message(recipient_id, message):
+    page_id = 'SEU_INSTAGRAM_BUSINESS_ACCOUNT_ID'
+    
+    requests.post(
+        f'https://graph.facebook.com/v18.0/{page_id}/messages',
+        headers={
+            'Content-Type': 'application/json',
+            'Authorization': 'Bearer SEU_TOKEN_INSTAGRAM'
+        },
+        json={
+            'recipient': {'id': recipient_id},
+            'message': {'text': message}
+        }
+    )
+
+@app.route('/webhook/instagram', methods=['GET'])
+def verify_webhook():
+    mode = request.args.get('hub.mode')
+    token = request.args.get('hub.verify_token')
+    challenge = request.args.get('hub.challenge')
+    
+    if mode == 'subscribe' and token == 'SEU_TOKEN_DE_VERIFICACAO':
+        return challenge, 200
+    return '', 403`
+      })}
+
+      {h2({ children: 'Passo 5: Testar a Integração' })}
+      {ul({
+        children: (
+          <>
+            {li({
+              children: (
+                <>
+                  Envie uma mensagem direta para sua conta Business do Instagram
+                </>
+              )
+            })}
+            {li({
+              children: (
+                <>
+                  Verifique se o webhook está recebendo a notificação
+                </>
+              )
+            })}
+            {li({
+              children: (
+                <>
+                  Confirme que a API do Knowly está retornando respostas adequadas
+                </>
+              )
+            })}
+            {li({
+              children: (
+                <>
+                  Valide se as respostas estão sendo enviadas corretamente ao
+                  usuário
+                </>
+              )
+            })}
+          </>
+        )
+      })}
+
+      {h2({ children: 'Funcionalidades Avançadas' })}
+      {ul({
+        children: (
+          <>
+            {li({
+              children: (
+                <>
+                  <strong>Respostas rápidas:</strong> Configure botões de resposta
+                  rápida para melhorar a experiência
+                </>
+              )
+            })}
+            {li({
+              children: (
+                <>
+                  <strong>Mídia:</strong> Envie imagens ou vídeos junto com as
+                  respostas quando apropriado
+                </>
+              )
+            })}
+            {li({
+              children: (
+                <>
+                  <strong>Templates:</strong> Use templates pré-aprovados para
+                  respostas frequentes
+                </>
+              )
+            })}
+            {li({
+              children: (
+                <>
+                  <strong>Horário comercial:</strong> Configure respostas
+                  automáticas apenas fora do horário comercial
+                </>
+              )
+            })}
+          </>
+        )
+      })}
+
+      {h2({ children: 'Boas Práticas' })}
+      {ul({
+        children: (
+          <>
+            {li({
+              children: (
+                <>
+                  <strong>Transparência:</strong> Informe aos usuários que estão
+                  interagindo com um assistente automático
+                </>
+              )
+            })}
+            {li({
+              children: (
+                <>
+                  <strong>Escalação:</strong> Ofereça opção de falar com atendente
+                  humano quando necessário
+                </>
+              )
+            })}
+            {li({
+              children: (
+                <>
+                  <strong>Tempo de resposta:</strong> Configure timeout adequado
+                  (máx. 10 segundos)
+                </>
+              )
+            })}
+            {li({
+              children: (
+                <>
+                  <strong>Monitoramento:</strong> Acompanhe métricas de satisfação
+                  e qualidade das respostas
+                </>
+              )
+            })}
+            {li({
+              children: (
+                <>
+                  <strong>Políticas do Instagram:</strong> Respeite as diretrizes
+                  de mensagens automatizadas da plataforma
+                </>
+              )
+            })}
+          </>
+        )
+      })}
+
+      {p({
+        children: (
+          <>
+            Com essa integração, você poderá responder automaticamente mensagens
+            diretas no Instagram, melhorando o engajamento com sua audiência e
+            fornecendo suporte instantâneo 24/7.
+          </>
+        )
+      })}
+    </motion.div>
+  )
+}
+
+export default IntegrationInstagramPage
diff --git a/src/features/docs/pages/integration-whatsapp.tsx b/src/features/docs/pages/integration-whatsapp.tsx
new file mode 100644
index 0000000..f2aed4d
--- /dev/null
+++ b/src/features/docs/pages/integration-whatsapp.tsx
@@ -0,0 +1,302 @@
+import { motion } from 'framer-motion'
+import { h1, h2, p, ul, li, pre } from '@/shared/components/typography'
+
+export function IntegrationWhatsAppPage() {
+  return (
+    <motion.div
+      initial={{ opacity: 0, y: 20 }}
+      animate={{ opacity: 1, y: 0 }}
+      transition={{ duration: 0.5 }}
+    >
+      {h1({ children: 'Integração com WhatsApp Business' })}
+
+      {p({
+        children: (
+          <>
+            Automatize o atendimento no WhatsApp Business usando a API do Knowly
+            para responder automaticamente mensagens de clientes com base na sua
+            base de conhecimento.
+          </>
+        )
+      })}
+
+      {h2({ children: 'Passo 1: Configurar o WhatsApp Business API' })}
+      {p({
+        children: (
+          <>
+            Primeiro, você precisa ter acesso à{' '}
+            <strong>WhatsApp Business API</strong>. Você pode configurar através
+            de:
+          </>
+        )
+      })}
+      {ul({
+        children: (
+          <>
+            {li({
+              children: (
+                <>
+                  <strong>Meta Business Platform</strong> - Acesse{' '}
+                  <a
+                    href="https://business.facebook.com"
+                    target="_blank"
+                    rel="noreferrer"
+                    className="text-primary underline"
+                  >
+                    business.facebook.com
+                  </a>{' '}
+                  e configure sua conta
+                </>
+              )
+            })}
+            {li({
+              children: (
+                <>
+                  <strong>Provedores terceiros</strong> - Como Twilio, 360Dialog,
+                  ou MessageBird
+                </>
+              )
+            })}
+          </>
+        )
+      })}
+
+      {h2({ children: 'Passo 2: Configurar Webhook' })}
+      {p({
+        children: (
+          <>
+            Configure um webhook para receber mensagens dos clientes. Este
+            endpoint receberá as mensagens enviadas ao seu número do WhatsApp
+            Business.
+          </>
+        )
+      })}
+
+      {p({
+        children: (
+          <>
+            <strong>Exemplo de configuração de webhook:</strong>
+          </>
+        )
+      })}
+
+      {pre({
+        children: `# URL do Webhook
+https://seu-servidor.com/webhook/whatsapp
+
+# Método: POST
+# Receberá mensagens no formato:
+{
+  "from": "5511999999999",
+  "message": "Qual é o horário de atendimento?",
+  "timestamp": "2025-01-15T10:30:00Z"
+}`
+      })}
+
+      {h2({ children: 'Passo 3: Integrar com Knowly API' })}
+      {p({
+        children: (
+          <>
+            No seu servidor, ao receber uma mensagem via webhook, faça uma
+            requisição para a API do Knowly para obter a resposta:
+          </>
+        )
+      })}
+
+      {p({
+        children: (
+          <>
+            <strong>Exemplo em Node.js:</strong>
+          </>
+        )
+      })}
+
+      {pre({
+        children: `// Servidor Express recebendo webhook do WhatsApp
+app.post('/webhook/whatsapp', async (req, res) => {
+  const { from, message } = req.body;
+  
+  // Consultar API do Knowly
+  const knowlyResponse = await fetch('https://api.knowly.ai/v1/query', {
+    method: 'POST',
+    headers: {
+      'Content-Type': 'application/json',
+      'Authorization': 'Bearer SUA_CHAVE_DE_API'
+    },
+    body: JSON.stringify({
+      prompt: message,
+      baseId: 'SUA_BASE_ID'
+    })
+  });
+  
+  const data = await knowlyResponse.json();
+  const aiResponse = data.response;
+  
+  // Enviar resposta de volta para o WhatsApp
+  await sendWhatsAppMessage(from, aiResponse);
+  
+  res.sendStatus(200);
+});
+
+// Função para enviar mensagem pelo WhatsApp Business API
+async function sendWhatsAppMessage(to, message) {
+  await fetch('https://graph.facebook.com/v18.0/SEU_PHONE_NUMBER_ID/messages', {
+    method: 'POST',
+    headers: {
+      'Content-Type': 'application/json',
+      'Authorization': 'Bearer SEU_TOKEN_WHATSAPP'
+    },
+    body: JSON.stringify({
+      messaging_product: 'whatsapp',
+      to: to,
+      text: { body: message }
+    })
+  });
+}`
+      })}
+
+      {p({
+        children: (
+          <>
+            <strong>Exemplo em Python:</strong>
+          </>
+        )
+      })}
+
+      {pre({
+        children: `from flask import Flask, request
+import requests
+
+app = Flask(__name__)
+
+@app.route('/webhook/whatsapp', methods=['POST'])
+def whatsapp_webhook():
+    data = request.json
+    from_number = data['from']
+    message = data['message']
+    
+    # Consultar API do Knowly
+    knowly_response = requests.post(
+        'https://api.knowly.ai/v1/query',
+        headers={
+            'Content-Type': 'application/json',
+            'Authorization': 'Bearer SUA_CHAVE_DE_API'
+        },
+        json={
+            'prompt': message,
+            'baseId': 'SUA_BASE_ID'
+        }
+    )
+    
+    ai_response = knowly_response.json()['response']
+    
+    # Enviar resposta pelo WhatsApp Business API
+    send_whatsapp_message(from_number, ai_response)
+    
+    return '', 200
+
+def send_whatsapp_message(to, message):
+    requests.post(
+        f'https://graph.facebook.com/v18.0/SEU_PHONE_NUMBER_ID/messages',
+        headers={
+            'Content-Type': 'application/json',
+            'Authorization': 'Bearer SEU_TOKEN_WHATSAPP'
+        },
+        json={
+            'messaging_product': 'whatsapp',
+            'to': to,
+            'text': {'body': message}
+        }
+    )`
+      })}
+
+      {h2({ children: 'Passo 4: Testar a Integração' })}
+      {ul({
+        children: (
+          <>
+            {li({
+              children: (
+                <>
+                  Envie uma mensagem para seu número do WhatsApp Business
+                </>
+              )
+            })}
+            {li({
+              children: (
+                <>
+                  Verifique se o webhook está recebendo a mensagem
+                </>
+              )
+            })}
+            {li({
+              children: (
+                <>
+                  Confirme que a API do Knowly está retornando respostas
+                </>
+              )
+            })}
+            {li({
+              children: (
+                <>
+                  Valide se as respostas estão sendo enviadas de volta ao cliente
+                </>
+              )
+            })}
+          </>
+        )
+      })}
+
+      {h2({ children: 'Dicas Importantes' })}
+      {ul({
+        children: (
+          <>
+            {li({
+              children: (
+                <>
+                  <strong>Timeout:</strong> Configure um tempo limite razoável
+                  para requisições (recomendado: 10-15 segundos)
+                </>
+              )
+            })}
+            {li({
+              children: (
+                <>
+                  <strong>Tratamento de erros:</strong> Implemente mensagens de
+                  fallback caso a API não responda
+                </>
+              )
+            })}
+            {li({
+              children: (
+                <>
+                  <strong>Rate limiting:</strong> Respeite os limites de taxa do
+                  WhatsApp Business API
+                </>
+              )
+            })}
+            {li({
+              children: (
+                <>
+                  <strong>Contexto:</strong> Considere manter histórico de
+                  conversas para melhorar as respostas
+                </>
+              )
+            })}
+          </>
+        )
+      })}
+
+      {p({
+        children: (
+          <>
+            Com essa integração, seu WhatsApp Business responderá automaticamente
+            aos clientes usando o conhecimento da sua base, proporcionando
+            atendimento 24/7 e reduzindo a carga de trabalho da equipe.
+          </>
+        )
+      })}
+    </motion.div>
+  )
+}
+
+export default IntegrationWhatsAppPage
diff --git a/src/routes/app-routes.tsx b/src/routes/app-routes.tsx
index 343c5d7..b243982 100644
--- a/src/routes/app-routes.tsx
+++ b/src/routes/app-routes.tsx
@@ -25,6 +25,9 @@ import { GettingStartedPage } from '@/features/docs/pages/getting-started'
 import { FoundationModelsPage } from '@/features/docs/pages/foundation-models'
 import { KnowledgeBasesPage } from '@/features/docs/pages/knowledge-bases'
 import { IntegrationPage } from '@/features/docs/pages/integration'
+import { IntegrationApiPage } from '@/features/docs/pages/integration-api'
+import { IntegrationWhatsAppPage } from '@/features/docs/pages/integration-whatsapp'
+import { IntegrationInstagramPage } from '@/features/docs/pages/integration-instagram'
 import { PlaygroundTestingPage } from '@/features/docs/pages/playground-testing'
 import { SubscriptionManagementPage as DocsSubscriptionPage } from '@/features/docs/pages/subscription-management'
 
@@ -78,6 +81,15 @@ export function AppRoutes() {
           />
           <Route path="docs/knowledge-bases" element={<KnowledgeBasesPage />} />
           <Route path="docs/integration" element={<IntegrationPage />} />
+          <Route path="docs/integration/api" element={<IntegrationApiPage />} />
+          <Route
+            path="docs/integration/whatsapp"
+            element={<IntegrationWhatsAppPage />}
+          />
+          <Route
+            path="docs/integration/instagram"
+            element={<IntegrationInstagramPage />}
+          />
           <Route
             path="docs/playground-testing"
             element={<PlaygroundTestingPage />}
diff --git a/src/shared/components/docs-sidebar.tsx b/src/shared/components/docs-sidebar.tsx
index 53a3b41..3c8c3cf 100644
--- a/src/shared/components/docs-sidebar.tsx
+++ b/src/shared/components/docs-sidebar.tsx
@@ -10,15 +10,23 @@ import {
   CreditCard,
   Menu,
   X,
-  Rocket
+  Rocket,
+  ChevronDown,
+  ChevronRight
 } from 'lucide-react'
 import { useState, useEffect } from 'react'
 import { Button } from '@/shared/components/button'
 
+export type DocsSidebarSubItem = {
+  label: string
+  path: string
+}
+
 export type DocsSidebarItem = {
   label: string
   icon: React.ComponentType<{ className?: string }>
   path: string
+  subItems?: DocsSidebarSubItem[]
 }
 
 const docsItems: DocsSidebarItem[] = [
@@ -45,7 +53,21 @@ const docsItems: DocsSidebarItem[] = [
   {
     label: 'Integração',
     icon: Plug,
-    path: '/docs/integration'
+    path: '/docs/integration',
+    subItems: [
+      {
+        label: 'API',
+        path: '/docs/integration/api'
+      },
+      {
+        label: 'WhatsApp Business',
+        path: '/docs/integration/whatsapp'
+      },
+      {
+        label: 'Instagram',
+        path: '/docs/integration/instagram'
+      }
+    ]
   },
   {
     label: 'Playground e Testes',
@@ -63,6 +85,7 @@ export function DocsSidebar() {
   const location = useLocation()
   const [isCollapsed, setIsCollapsed] = useState(false)
   const [isMobileOpen, setIsMobileOpen] = useState(false)
+  const [expandedItems, setExpandedItems] = useState<string[]>([])
 
   function toggleSidebar() {
     setIsCollapsed(!isCollapsed)
@@ -76,6 +99,28 @@ export function DocsSidebar() {
     setIsMobileOpen(false)
   }
 
+  function toggleExpanded(path: string) {
+    setExpandedItems((prev) =>
+      prev.includes(path)
+        ? prev.filter((p) => p !== path)
+        : [...prev, path]
+    )
+  }
+
+  // Auto-expand parent if sub-item is active
+  useEffect(() => {
+    docsItems.forEach((item) => {
+      if (item.subItems) {
+        const hasActiveSubItem = item.subItems.some(
+          (subItem) => location.pathname === subItem.path
+        )
+        if (hasActiveSubItem && !expandedItems.includes(item.path)) {
+          setExpandedItems((prev) => [...prev, item.path])
+        }
+      }
+    })
+  }, [location.pathname])
+
   // Close mobile sidebar on route change
   useEffect(() => {
     setIsMobileOpen(false)
@@ -174,34 +219,96 @@ export function DocsSidebar() {
           <motion.nav className="flex flex-col gap-1">
             {docsItems.map((item) => {
               const isActive = location.pathname === item.path
+              const isExpanded = expandedItems.includes(item.path)
+              const hasSubItems = item.subItems && item.subItems.length > 0
               const IconComponent = item.icon
+              
               return (
                 <motion.div
                   key={item.path}
                   transition={transition}
                   variants={variants}
                 >
-                  <Link
-                    to={item.path}
+                  <div
                     className={cn(
                       'flex items-center gap-3 rounded-lg px-3 py-2 text-sm font-medium transition-colors',
-                      isActive
+                      isActive && !hasSubItems
                         ? 'bg-primary/10 text-primary'
                         : 'hover:bg-muted/50 text-foreground/70 hover:text-foreground',
-                      isCollapsed && 'md:justify-center md:px-2'
+                      isCollapsed && 'md:justify-center md:px-2',
+                      hasSubItems && 'cursor-pointer'
                     )}
-                    title={isCollapsed ? item.label : undefined}
+                    onClick={() => {
+                      if (hasSubItems) {
+                        toggleExpanded(item.path)
+                      }
+                    }}
                   >
-                    <IconComponent
-                      className={cn(
-                        'flex-shrink-0',
-                        isCollapsed ? 'h-6 w-6' : 'h-5 w-5'
-                      )}
-                    />
-                    {(!isCollapsed || isMobileOpen) && (
-                      <span>{item.label}</span>
+                    {hasSubItems ? (
+                      <>
+                        <IconComponent
+                          className={cn(
+                            'flex-shrink-0',
+                            isCollapsed ? 'h-6 w-6' : 'h-5 w-5'
+                          )}
+                        />
+                        {(!isCollapsed || isMobileOpen) && (
+                          <>
+                            <span className="flex-1">{item.label}</span>
+                            {isExpanded ? (
+                              <ChevronDown className="h-4 w-4" />
+                            ) : (
+                              <ChevronRight className="h-4 w-4" />
+                            )}
+                          </>
+                        )}
+                      </>
+                    ) : (
+                      <Link
+                        to={item.path}
+                        className="flex w-full items-center gap-3"
+                      >
+                        <IconComponent
+                          className={cn(
+                            'flex-shrink-0',
+                            isCollapsed ? 'h-6 w-6' : 'h-5 w-5'
+                          )}
+                        />
+                        {(!isCollapsed || isMobileOpen) && (
+                          <span>{item.label}</span>
+                        )}
+                      </Link>
                     )}
-                  </Link>
+                  </div>
+
+                  {/* Sub-items */}
+                  {hasSubItems && isExpanded && (!isCollapsed || isMobileOpen) && (
+                    <motion.div
+                      initial={{ opacity: 0, height: 0 }}
+                      animate={{ opacity: 1, height: 'auto' }}
+                      exit={{ opacity: 0, height: 0 }}
+                      transition={{ duration: 0.2 }}
+                      className="ml-6 mt-1 flex flex-col gap-1"
+                    >
+                      {item.subItems?.map((subItem) => {
+                        const isSubItemActive = location.pathname === subItem.path
+                        return (
+                          <Link
+                            key={subItem.path}
+                            to={subItem.path}
+                            className={cn(
+                              'rounded-lg px-3 py-2 text-sm font-medium transition-colors',
+                              isSubItemActive
+                                ? 'bg-primary/10 text-primary'
+                                : 'hover:bg-muted/50 text-foreground/60 hover:text-foreground'
+                            )}
+                          >
+                            {subItem.label}
+                          </Link>
+                        )
+                      })}
+                    </motion.div>
+                  )}
                 </motion.div>
               )
             })}

From 068bf4d53ce87ea962b04a15d86ded15d1262939 Mon Sep 17 00:00:00 2001
From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com>
Date: Thu, 23 Oct 2025 19:27:42 +0000
Subject: [PATCH 07/10] Update API code snippets across all integration docs to
 match actual API format

Co-authored-by: enzosakamoto <98707474+enzosakamoto@users.noreply.github.com>
---
 src/features/docs/pages/getting-started.tsx   | 49 ++++++++++---------
 src/features/docs/pages/integration-api.tsx   |  9 ++--
 .../docs/pages/integration-instagram.tsx      | 18 +++----
 .../docs/pages/integration-whatsapp.tsx       | 18 +++----
 4 files changed, 48 insertions(+), 46 deletions(-)

diff --git a/src/features/docs/pages/getting-started.tsx b/src/features/docs/pages/getting-started.tsx
index 310a6dd..1dfbbd3 100644
--- a/src/features/docs/pages/getting-started.tsx
+++ b/src/features/docs/pages/getting-started.tsx
@@ -220,12 +220,12 @@ export function GettingStartedPage() {
 
       {pre({
         children: `# Exemplo usando cURL
-curl -X POST https://api.knowly.ai/v1/query \\
+curl -X POST https://api.knowly.dev.br/chat \\
   -H "Content-Type: application/json" \\
-  -H "Authorization: Bearer SUA_CHAVE_DE_API" \\
   -d '{
-    "prompt": "Qual é o horário de atendimento?",
-    "baseId": "SUA_BASE_ID"
+    "kb_key": "knowly_c81a7410-4c69-45e2-b6c6-79205c3a99fd",
+    "model": "MISTRAL_SMALL",
+    "prompt": "Qual é o horário de atendimento?"
   }'`
       })}
 
@@ -238,20 +238,19 @@ curl -X POST https://api.knowly.ai/v1/query \\
       })}
 
       {pre({
-        children: `const response = await fetch('https://api.knowly.ai/v1/query', {
+        children: `fetch('https://api.knowly.dev.br/chat', {
   method: 'POST',
   headers: {
-    'Content-Type': 'application/json',
-    'Authorization': 'Bearer SUA_CHAVE_DE_API'
+    'Content-Type': 'application/json'
   },
   body: JSON.stringify({
-    prompt: 'Qual é o horário de atendimento?',
-    baseId: 'SUA_BASE_ID'
+    kb_key: 'knowly_c81a7410-4c69-45e2-b6c6-79205c3a99fd',
+    model: 'MISTRAL_SMALL',
+    prompt: 'Qual é o horário de atendimento?'
   })
-});
-
-const data = await response.json();
-console.log(data.response);`
+})
+  .then(response => response.json())
+  .then(data => console.log(data.response));`
       })}
 
       {p({
@@ -265,18 +264,20 @@ console.log(data.response);`
       {pre({
         children: `import requests
 
-url = "https://api.knowly.ai/v1/query"
-headers = {
-    "Content-Type": "application/json",
-    "Authorization": "Bearer SUA_CHAVE_DE_API"
-}
-data = {
-    "prompt": "Qual é o horário de atendimento?",
-    "baseId": "SUA_BASE_ID"
-}
+response = requests.post(
+    'https://api.knowly.dev.br/chat',
+    headers={
+        'Content-Type': 'application/json',
+    },
+    json={
+        'kb_key': 'knowly_c81a7410-4c69-45e2-b6c6-79205c3a99fd',
+        'model': 'MISTRAL_SMALL',
+        'prompt': 'Qual é o horário de atendimento?'
+    }
+)
 
-response = requests.post(url, json=data, headers=headers)
-print(response.json()["response"])`
+data = response.json()
+print(data['response'])`
       })}
 
       {h2({ children: 'Próximos Passos' })}
diff --git a/src/features/docs/pages/integration-api.tsx b/src/features/docs/pages/integration-api.tsx
index 45bc9b7..52f5d09 100644
--- a/src/features/docs/pages/integration-api.tsx
+++ b/src/features/docs/pages/integration-api.tsx
@@ -56,13 +56,14 @@ export function IntegrationApiPage() {
 
       {h2({ children: 'Exemplo de requisição' })}
       {pre({
-        children: `POST https://api.knowly.ai/v1/query
+        children: `POST https://api.knowly.dev.br/chat
 Headers:
-  Authorization: Bearer SUA_CHAVE_DE_API
+  Content-Type: application/json
 Body:
 {
-  "prompt": "Como faço para atualizar meus dados cadastrais?",
-  "baseId": "sua-base-id"
+  "kb_key": "knowly_c81a7410-4c69-45e2-b6c6-79205c3a99fd",
+  "model": "MISTRAL_SMALL",
+  "prompt": "Como faço para atualizar meus dados cadastrais?"
 }`
       })}
 
diff --git a/src/features/docs/pages/integration-instagram.tsx b/src/features/docs/pages/integration-instagram.tsx
index 4dfcb77..82c23fa 100644
--- a/src/features/docs/pages/integration-instagram.tsx
+++ b/src/features/docs/pages/integration-instagram.tsx
@@ -162,15 +162,15 @@ app.post('/webhook/instagram', async (req, res) => {
       if (!messageText) continue;
       
       // Consultar API do Knowly
-      const knowlyResponse = await fetch('https://api.knowly.ai/v1/query', {
+      const knowlyResponse = await fetch('https://api.knowly.dev.br/chat', {
         method: 'POST',
         headers: {
-          'Content-Type': 'application/json',
-          'Authorization': 'Bearer SUA_CHAVE_DE_API'
+          'Content-Type': 'application/json'
         },
         body: JSON.stringify({
-          prompt: messageText,
-          baseId: 'SUA_BASE_ID'
+          kb_key: 'knowly_c81a7410-4c69-45e2-b6c6-79205c3a99fd',
+          model: 'MISTRAL_SMALL',
+          prompt: messageText
         })
       });
       
@@ -245,14 +245,14 @@ def instagram_webhook():
             
             # Consultar API do Knowly
             knowly_response = requests.post(
-                'https://api.knowly.ai/v1/query',
+                'https://api.knowly.dev.br/chat',
                 headers={
                     'Content-Type': 'application/json',
-                    'Authorization': 'Bearer SUA_CHAVE_DE_API'
                 },
                 json={
-                    'prompt': message_text,
-                    'baseId': 'SUA_BASE_ID'
+                    'kb_key': 'knowly_c81a7410-4c69-45e2-b6c6-79205c3a99fd',
+                    'model': 'MISTRAL_SMALL',
+                    'prompt': message_text
                 }
             )
             
diff --git a/src/features/docs/pages/integration-whatsapp.tsx b/src/features/docs/pages/integration-whatsapp.tsx
index f2aed4d..8b6da8e 100644
--- a/src/features/docs/pages/integration-whatsapp.tsx
+++ b/src/features/docs/pages/integration-whatsapp.tsx
@@ -117,15 +117,15 @@ app.post('/webhook/whatsapp', async (req, res) => {
   const { from, message } = req.body;
   
   // Consultar API do Knowly
-  const knowlyResponse = await fetch('https://api.knowly.ai/v1/query', {
+  const knowlyResponse = await fetch('https://api.knowly.dev.br/chat', {
     method: 'POST',
     headers: {
-      'Content-Type': 'application/json',
-      'Authorization': 'Bearer SUA_CHAVE_DE_API'
+      'Content-Type': 'application/json'
     },
     body: JSON.stringify({
-      prompt: message,
-      baseId: 'SUA_BASE_ID'
+      kb_key: 'knowly_c81a7410-4c69-45e2-b6c6-79205c3a99fd',
+      model: 'MISTRAL_SMALL',
+      prompt: message
     })
   });
   
@@ -177,14 +177,14 @@ def whatsapp_webhook():
     
     # Consultar API do Knowly
     knowly_response = requests.post(
-        'https://api.knowly.ai/v1/query',
+        'https://api.knowly.dev.br/chat',
         headers={
             'Content-Type': 'application/json',
-            'Authorization': 'Bearer SUA_CHAVE_DE_API'
         },
         json={
-            'prompt': message,
-            'baseId': 'SUA_BASE_ID'
+            'kb_key': 'knowly_c81a7410-4c69-45e2-b6c6-79205c3a99fd',
+            'model': 'MISTRAL_SMALL',
+            'prompt': message
         }
     )
     

From d98ee79a361856f65875e4f788fd2479ce399f55 Mon Sep 17 00:00:00 2001
From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com>
Date: Thu, 23 Oct 2025 19:50:33 +0000
Subject: [PATCH 08/10] Add Next Steps documentation page with roadmap for
 multi-tenant chatbot system

Co-authored-by: enzosakamoto <98707474+enzosakamoto@users.noreply.github.com>
---
 src/features/docs/pages/next-steps.tsx | 319 +++++++++++++++++++++++++
 src/routes/app-routes.tsx              |   2 +
 src/shared/components/docs-sidebar.tsx |   8 +-
 3 files changed, 328 insertions(+), 1 deletion(-)
 create mode 100644 src/features/docs/pages/next-steps.tsx

diff --git a/src/features/docs/pages/next-steps.tsx b/src/features/docs/pages/next-steps.tsx
new file mode 100644
index 0000000..bee3a1b
--- /dev/null
+++ b/src/features/docs/pages/next-steps.tsx
@@ -0,0 +1,319 @@
+import { motion } from 'framer-motion'
+import { h1, h2, p, ul, li } from '@/shared/components/typography'
+
+export function NextStepsPage() {
+  return (
+    <motion.div
+      initial={{ opacity: 0, y: 20 }}
+      animate={{ opacity: 1, y: 0 }}
+      transition={{ duration: 0.5 }}
+    >
+      {h1({ children: 'Próximos Passos' })}
+
+      {p({
+        children: (
+          <>
+            Estamos constantemente inovando e desenvolvendo novas funcionalidades
+            para tornar o Knowly ainda mais poderoso e fácil de usar. Confira o
+            que estamos planejando para o futuro da plataforma.
+          </>
+        )
+      })}
+
+      {h2({ children: 'Roadmap de Novas Features' })}
+
+      {h2({ children: '🤖 Sistema de Chatbot Multi-Tenant (Em Desenvolvimento)' })}
+      {p({
+        children: (
+          <>
+            Nossa próxima grande funcionalidade é um{' '}
+            <strong>sistema de chatbot multi-tenant</strong> completo que
+            simplificará drasticamente a integração do Knowly em suas
+            plataformas.
+          </>
+        )
+      })}
+
+      {p({
+        children: (
+          <>
+            <strong>O que é?</strong>
+          </>
+        )
+      })}
+      {p({
+        children: (
+          <>
+            Um sistema de chatbot gerenciado e hospedado pela Knowly que você
+            poderá integrar diretamente em seus canais de atendimento, sem
+            precisar se preocupar com infraestrutura, webhooks ou gerenciamento
+            de APIs.
+          </>
+        )
+      })}
+
+      {p({
+        children: (
+          <>
+            <strong>Benefícios:</strong>
+          </>
+        )
+      })}
+      {ul({
+        children: (
+          <>
+            {li({
+              children: (
+                <>
+                  <strong>Zero configuração de infraestrutura:</strong> Não
+                  será mais necessário criar e manter servidores para consumir
+                  as APIs das bases de conhecimento
+                </>
+              )
+            })}
+            {li({
+              children: (
+                <>
+                  <strong>Integração simplificada:</strong> Basta conectar suas
+                  contas do WhatsApp Business, Instagram, ou outras plataformas
+                  diretamente no painel do Knowly
+                </>
+              )
+            })}
+            {li({
+              children: (
+                <>
+                  <strong>Gerenciamento centralizado:</strong> Controle todos
+                  os seus chatbots de diferentes plataformas em um único lugar
+                </>
+              )
+            })}
+            {li({
+              children: (
+                <>
+                  <strong>Multi-tenant:</strong> Suporte a múltiplas empresas e
+                  organizações com isolamento completo de dados
+                </>
+              )
+            })}
+            {li({
+              children: (
+                <>
+                  <strong>Escalabilidade automática:</strong> Nossa
+                  infraestrutura cuida de todo o dimensionamento automaticamente
+                </>
+              )
+            })}
+            {li({
+              children: (
+                <>
+                  <strong>Monitoramento em tempo real:</strong> Acompanhe
+                  métricas de conversas, satisfação e performance dos chatbots
+                </>
+              )
+            })}
+          </>
+        )
+      })}
+
+      {p({
+        children: (
+          <>
+            <strong>Plataformas suportadas:</strong>
+          </>
+        )
+      })}
+      {ul({
+        children: (
+          <>
+            {li({ children: '✅ WhatsApp Business' })}
+            {li({ children: '✅ Instagram Direct Messages' })}
+            {li({ children: '✅ Website (Widget de chat embarcado)' })}
+            {li({ children: '🔜 Facebook Messenger' })}
+            {li({ children: '🔜 Telegram' })}
+            {li({ children: '🔜 Slack' })}
+            {li({
+              children: '🔜 E-commerce (integração com Shopify, WooCommerce, etc.)'
+            })}
+          </>
+        )
+      })}
+
+      {p({
+        children: (
+          <>
+            <strong>Como funcionará:</strong>
+          </>
+        )
+      })}
+      {ul({
+        children: (
+          <>
+            {li({
+              children: (
+                <>
+                  <strong>Passo 1:</strong> No painel do Knowly, acesse a seção
+                  "Chatbots"
+                </>
+              )
+            })}
+            {li({
+              children: (
+                <>
+                  <strong>Passo 2:</strong> Selecione a plataforma que deseja
+                  integrar (WhatsApp, Instagram, Website, etc.)
+                </>
+              )
+            })}
+            {li({
+              children: (
+                <>
+                  <strong>Passo 3:</strong> Conecte sua conta seguindo o fluxo
+                  de autenticação simplificado
+                </>
+              )
+            })}
+            {li({
+              children: (
+                <>
+                  <strong>Passo 4:</strong> Associe uma ou mais bases de
+                  conhecimento ao chatbot
+                </>
+              )
+            })}
+            {li({
+              children: (
+                <>
+                  <strong>Passo 5:</strong> Configure opções como horário de
+                  atendimento, mensagens de boas-vindas, e regras de escalação
+                </>
+              )
+            })}
+            {li({
+              children: (
+                <>
+                  <strong>Passo 6:</strong> Ative o chatbot e comece a receber
+                  atendimentos automatizados!
+                </>
+              )
+            })}
+          </>
+        )
+      })}
+
+      {h2({ children: '📊 Análises e Insights Avançados' })}
+      {p({
+        children: (
+          <>
+            Além do chatbot multi-tenant, estamos desenvolvendo um sistema
+            completo de análises para você entender melhor como seus clientes
+            interagem com a IA:
+          </>
+        )
+      })}
+      {ul({
+        children: (
+          <>
+            {li({
+              children:
+                'Dashboard com métricas de performance das bases de conhecimento'
+            })}
+            {li({
+              children: 'Análise de sentimento das conversas'
+            })}
+            {li({
+              children: 'Identificação de perguntas frequentes não respondidas'
+            })}
+            {li({
+              children:
+                'Sugestões de melhoria para otimizar suas bases de conhecimento'
+            })}
+            {li({
+              children: 'Relatórios de satisfação do cliente'
+            })}
+          </>
+        )
+      })}
+
+      {h2({ children: '🔧 Customização Avançada de Respostas' })}
+      {ul({
+        children: (
+          <>
+            {li({
+              children:
+                'Templates personalizáveis para diferentes tipos de perguntas'
+            })}
+            {li({
+              children: 'Tom de voz configurável (formal, casual, técnico, etc.)'
+            })}
+            {li({
+              children: 'Regras de negócio customizadas para tratamento especial de certos tópicos'
+            })}
+            {li({
+              children: 'Respostas com rich media (imagens, vídeos, carrosséis)'
+            })}
+          </>
+        )
+      })}
+
+      {h2({ children: '🌐 Suporte Multilíngue' })}
+      {ul({
+        children: (
+          <>
+            {li({
+              children: 'Detecção automática do idioma do usuário'
+            })}
+            {li({
+              children: 'Respostas em múltiplos idiomas a partir da mesma base de conhecimento'
+            })}
+            {li({
+              children: 'Tradução automática de documentos'
+            })}
+          </>
+        )
+      })}
+
+      {h2({ children: '🔗 Integrações com CRMs e Ferramentas' })}
+      {ul({
+        children: (
+          <>
+            {li({
+              children: 'Integração nativa com Salesforce, HubSpot, Pipedrive'
+            })}
+            {li({
+              children: 'Webhooks personalizados para integração com qualquer sistema'
+            })}
+            {li({
+              children: 'API de eventos para rastreamento de conversas'
+            })}
+          </>
+        )
+      })}
+
+      {h2({ children: 'Fique por Dentro' })}
+      {p({
+        children: (
+          <>
+            Estamos trabalhando arduamente para trazer essas funcionalidades o
+            mais rápido possível. O sistema de chatbot multi-tenant está em fase
+            avançada de desenvolvimento e será lançado em breve!
+          </>
+        )
+      })}
+
+      {p({
+        children: (
+          <>
+            Quer ser notificado quando essas features forem lançadas? Entre em{' '}
+            <strong>
+              <a href="/faq/contact">contato conosco</a>
+            </strong>{' '}
+            ou acompanhe nossas atualizações.
+          </>
+        )
+      })}
+    </motion.div>
+  )
+}
+
+export default NextStepsPage
diff --git a/src/routes/app-routes.tsx b/src/routes/app-routes.tsx
index b243982..6408b47 100644
--- a/src/routes/app-routes.tsx
+++ b/src/routes/app-routes.tsx
@@ -30,6 +30,7 @@ import { IntegrationWhatsAppPage } from '@/features/docs/pages/integration-whats
 import { IntegrationInstagramPage } from '@/features/docs/pages/integration-instagram'
 import { PlaygroundTestingPage } from '@/features/docs/pages/playground-testing'
 import { SubscriptionManagementPage as DocsSubscriptionPage } from '@/features/docs/pages/subscription-management'
+import { NextStepsPage } from '@/features/docs/pages/next-steps'
 
 export function AppRoutes() {
   return (
@@ -98,6 +99,7 @@ export function AppRoutes() {
             path="docs/subscription-management"
             element={<DocsSubscriptionPage />}
           />
+          <Route path="docs/next-steps" element={<NextStepsPage />} />
         </Route>
       </Routes>
     </Suspense>
diff --git a/src/shared/components/docs-sidebar.tsx b/src/shared/components/docs-sidebar.tsx
index 3c8c3cf..6a569a8 100644
--- a/src/shared/components/docs-sidebar.tsx
+++ b/src/shared/components/docs-sidebar.tsx
@@ -12,7 +12,8 @@ import {
   X,
   Rocket,
   ChevronDown,
-  ChevronRight
+  ChevronRight,
+  TrendingUp
 } from 'lucide-react'
 import { useState, useEffect } from 'react'
 import { Button } from '@/shared/components/button'
@@ -78,6 +79,11 @@ const docsItems: DocsSidebarItem[] = [
     label: 'Gerenciar Assinatura',
     icon: CreditCard,
     path: '/docs/subscription-management'
+  },
+  {
+    label: 'Próximos Passos',
+    icon: TrendingUp,
+    path: '/docs/next-steps'
   }
 ]
 

From a4569b4797d8b860abdeb4a3a56a5bfc52c369d5 Mon Sep 17 00:00:00 2001
From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com>
Date: Thu, 23 Oct 2025 20:02:08 +0000
Subject: [PATCH 09/10] Remove emojis from Next Steps documentation page

Co-authored-by: enzosakamoto <98707474+enzosakamoto@users.noreply.github.com>
---
 src/features/docs/pages/next-steps.tsx | 24 ++++++++++++------------
 1 file changed, 12 insertions(+), 12 deletions(-)

diff --git a/src/features/docs/pages/next-steps.tsx b/src/features/docs/pages/next-steps.tsx
index bee3a1b..9645a4d 100644
--- a/src/features/docs/pages/next-steps.tsx
+++ b/src/features/docs/pages/next-steps.tsx
@@ -22,7 +22,7 @@ export function NextStepsPage() {
 
       {h2({ children: 'Roadmap de Novas Features' })}
 
-      {h2({ children: '🤖 Sistema de Chatbot Multi-Tenant (Em Desenvolvimento)' })}
+      {h2({ children: 'Sistema de Chatbot Multi-Tenant (Em Desenvolvimento)' })}
       {p({
         children: (
           <>
@@ -126,14 +126,14 @@ export function NextStepsPage() {
       {ul({
         children: (
           <>
-            {li({ children: '✅ WhatsApp Business' })}
-            {li({ children: '✅ Instagram Direct Messages' })}
-            {li({ children: '✅ Website (Widget de chat embarcado)' })}
-            {li({ children: '🔜 Facebook Messenger' })}
-            {li({ children: '🔜 Telegram' })}
-            {li({ children: '🔜 Slack' })}
+            {li({ children: 'WhatsApp Business' })}
+            {li({ children: 'Instagram Direct Messages' })}
+            {li({ children: 'Website (Widget de chat embarcado)' })}
+            {li({ children: 'Facebook Messenger (Em breve)' })}
+            {li({ children: 'Telegram (Em breve)' })}
+            {li({ children: 'Slack (Em breve)' })}
             {li({
-              children: '🔜 E-commerce (integração com Shopify, WooCommerce, etc.)'
+              children: 'E-commerce (integração com Shopify, WooCommerce, etc.) (Em breve)'
             })}
           </>
         )
@@ -201,7 +201,7 @@ export function NextStepsPage() {
         )
       })}
 
-      {h2({ children: '📊 Análises e Insights Avançados' })}
+      {h2({ children: 'Análises e Insights Avançados' })}
       {p({
         children: (
           <>
@@ -235,7 +235,7 @@ export function NextStepsPage() {
         )
       })}
 
-      {h2({ children: '🔧 Customização Avançada de Respostas' })}
+      {h2({ children: 'Customização Avançada de Respostas' })}
       {ul({
         children: (
           <>
@@ -256,7 +256,7 @@ export function NextStepsPage() {
         )
       })}
 
-      {h2({ children: '🌐 Suporte Multilíngue' })}
+      {h2({ children: 'Suporte Multilíngue' })}
       {ul({
         children: (
           <>
@@ -273,7 +273,7 @@ export function NextStepsPage() {
         )
       })}
 
-      {h2({ children: '🔗 Integrações com CRMs e Ferramentas' })}
+      {h2({ children: 'Integrações com CRMs e Ferramentas' })}
       {ul({
         children: (
           <>

From eb09863545db10528739dc140a682103da68eb85 Mon Sep 17 00:00:00 2001
From: Enzo Sakamoto <enzo.sak@hotmail.com>
Date: Thu, 23 Oct 2025 17:15:04 -0300
Subject: [PATCH 10/10] refactor: improve formatting and readability in
 documentation pages

---
 .../docs/pages/integration-instagram.tsx      | 38 +++++------
 .../docs/pages/integration-whatsapp.tsx       | 28 ++++-----
 src/features/docs/pages/next-steps.tsx        | 33 +++++-----
 src/shared/components/docs-sidebar.tsx        | 63 ++++++++++---------
 4 files changed, 79 insertions(+), 83 deletions(-)

diff --git a/src/features/docs/pages/integration-instagram.tsx b/src/features/docs/pages/integration-instagram.tsx
index 82c23fa..234c1ab 100644
--- a/src/features/docs/pages/integration-instagram.tsx
+++ b/src/features/docs/pages/integration-instagram.tsx
@@ -13,9 +13,9 @@ export function IntegrationInstagramPage() {
       {p({
         children: (
           <>
-            Automatize respostas nas mensagens diretas (DMs) do Instagram usando a
-            API do Knowly para responder automaticamente perguntas dos usuários
-            com base na sua base de conhecimento.
+            Automatize respostas nas mensagens diretas (DMs) do Instagram usando
+            a API do Knowly para responder automaticamente perguntas dos
+            usuários com base na sua base de conhecimento.
           </>
         )
       })}
@@ -50,9 +50,7 @@ export function IntegrationInstagramPage() {
             })}
             {li({
               children: (
-                <>
-                  Conecte sua conta do Instagram a uma Página do Facebook
-                </>
+                <>Conecte sua conta do Instagram a uma Página do Facebook</>
               )
             })}
             {li({
@@ -66,7 +64,8 @@ export function IntegrationInstagramPage() {
               children: (
                 <>
                   Configure as permissões necessárias:{' '}
-                  <code>instagram_basic</code>, <code>instagram_manage_messages</code>
+                  <code>instagram_basic</code>,{' '}
+                  <code>instagram_manage_messages</code>
                 </>
               )
             })}
@@ -301,16 +300,13 @@ def verify_webhook():
               )
             })}
             {li({
-              children: (
-                <>
-                  Verifique se o webhook está recebendo a notificação
-                </>
-              )
+              children: <>Verifique se o webhook está recebendo a notificação</>
             })}
             {li({
               children: (
                 <>
-                  Confirme que a API do Knowly está retornando respostas adequadas
+                  Confirme que a API do Knowly está retornando respostas
+                  adequadas
                 </>
               )
             })}
@@ -333,8 +329,8 @@ def verify_webhook():
             {li({
               children: (
                 <>
-                  <strong>Respostas rápidas:</strong> Configure botões de resposta
-                  rápida para melhorar a experiência
+                  <strong>Respostas rápidas:</strong> Configure botões de
+                  resposta rápida para melhorar a experiência
                 </>
               )
             })}
@@ -381,8 +377,8 @@ def verify_webhook():
             {li({
               children: (
                 <>
-                  <strong>Escalação:</strong> Ofereça opção de falar com atendente
-                  humano quando necessário
+                  <strong>Escalação:</strong> Ofereça opção de falar com
+                  atendente humano quando necessário
                 </>
               )
             })}
@@ -397,16 +393,16 @@ def verify_webhook():
             {li({
               children: (
                 <>
-                  <strong>Monitoramento:</strong> Acompanhe métricas de satisfação
-                  e qualidade das respostas
+                  <strong>Monitoramento:</strong> Acompanhe métricas de
+                  satisfação e qualidade das respostas
                 </>
               )
             })}
             {li({
               children: (
                 <>
-                  <strong>Políticas do Instagram:</strong> Respeite as diretrizes
-                  de mensagens automatizadas da plataforma
+                  <strong>Políticas do Instagram:</strong> Respeite as
+                  diretrizes de mensagens automatizadas da plataforma
                 </>
               )
             })}
diff --git a/src/features/docs/pages/integration-whatsapp.tsx b/src/features/docs/pages/integration-whatsapp.tsx
index 8b6da8e..7e43943 100644
--- a/src/features/docs/pages/integration-whatsapp.tsx
+++ b/src/features/docs/pages/integration-whatsapp.tsx
@@ -52,8 +52,8 @@ export function IntegrationWhatsAppPage() {
             {li({
               children: (
                 <>
-                  <strong>Provedores terceiros</strong> - Como Twilio, 360Dialog,
-                  ou MessageBird
+                  <strong>Provedores terceiros</strong> - Como Twilio,
+                  360Dialog, ou MessageBird
                 </>
               )
             })}
@@ -216,29 +216,22 @@ def send_whatsapp_message(to, message):
           <>
             {li({
               children: (
-                <>
-                  Envie uma mensagem para seu número do WhatsApp Business
-                </>
+                <>Envie uma mensagem para seu número do WhatsApp Business</>
               )
             })}
             {li({
-              children: (
-                <>
-                  Verifique se o webhook está recebendo a mensagem
-                </>
-              )
+              children: <>Verifique se o webhook está recebendo a mensagem</>
             })}
             {li({
               children: (
-                <>
-                  Confirme que a API do Knowly está retornando respostas
-                </>
+                <>Confirme que a API do Knowly está retornando respostas</>
               )
             })}
             {li({
               children: (
                 <>
-                  Valide se as respostas estão sendo enviadas de volta ao cliente
+                  Valide se as respostas estão sendo enviadas de volta ao
+                  cliente
                 </>
               )
             })}
@@ -289,9 +282,10 @@ def send_whatsapp_message(to, message):
       {p({
         children: (
           <>
-            Com essa integração, seu WhatsApp Business responderá automaticamente
-            aos clientes usando o conhecimento da sua base, proporcionando
-            atendimento 24/7 e reduzindo a carga de trabalho da equipe.
+            Com essa integração, seu WhatsApp Business responderá
+            automaticamente aos clientes usando o conhecimento da sua base,
+            proporcionando atendimento 24/7 e reduzindo a carga de trabalho da
+            equipe.
           </>
         )
       })}
diff --git a/src/features/docs/pages/next-steps.tsx b/src/features/docs/pages/next-steps.tsx
index 9645a4d..94120c8 100644
--- a/src/features/docs/pages/next-steps.tsx
+++ b/src/features/docs/pages/next-steps.tsx
@@ -13,9 +13,9 @@ export function NextStepsPage() {
       {p({
         children: (
           <>
-            Estamos constantemente inovando e desenvolvendo novas funcionalidades
-            para tornar o Knowly ainda mais poderoso e fácil de usar. Confira o
-            que estamos planejando para o futuro da plataforma.
+            Estamos constantemente inovando e desenvolvendo novas
+            funcionalidades para tornar o Knowly ainda mais poderoso e fácil de
+            usar. Confira o que estamos planejando para o futuro da plataforma.
           </>
         )
       })}
@@ -65,9 +65,9 @@ export function NextStepsPage() {
             {li({
               children: (
                 <>
-                  <strong>Zero configuração de infraestrutura:</strong> Não
-                  será mais necessário criar e manter servidores para consumir
-                  as APIs das bases de conhecimento
+                  <strong>Zero configuração de infraestrutura:</strong> Não será
+                  mais necessário criar e manter servidores para consumir as
+                  APIs das bases de conhecimento
                 </>
               )
             })}
@@ -83,8 +83,8 @@ export function NextStepsPage() {
             {li({
               children: (
                 <>
-                  <strong>Gerenciamento centralizado:</strong> Controle todos
-                  os seus chatbots de diferentes plataformas em um único lugar
+                  <strong>Gerenciamento centralizado:</strong> Controle todos os
+                  seus chatbots de diferentes plataformas em um único lugar
                 </>
               )
             })}
@@ -133,7 +133,8 @@ export function NextStepsPage() {
             {li({ children: 'Telegram (Em breve)' })}
             {li({ children: 'Slack (Em breve)' })}
             {li({
-              children: 'E-commerce (integração com Shopify, WooCommerce, etc.) (Em breve)'
+              children:
+                'E-commerce (integração com Shopify, WooCommerce, etc.) (Em breve)'
             })}
           </>
         )
@@ -153,7 +154,7 @@ export function NextStepsPage() {
               children: (
                 <>
                   <strong>Passo 1:</strong> No painel do Knowly, acesse a seção
-                  "Chatbots"
+                  &quot;Chatbots&quot;
                 </>
               )
             })}
@@ -244,10 +245,12 @@ export function NextStepsPage() {
                 'Templates personalizáveis para diferentes tipos de perguntas'
             })}
             {li({
-              children: 'Tom de voz configurável (formal, casual, técnico, etc.)'
+              children:
+                'Tom de voz configurável (formal, casual, técnico, etc.)'
             })}
             {li({
-              children: 'Regras de negócio customizadas para tratamento especial de certos tópicos'
+              children:
+                'Regras de negócio customizadas para tratamento especial de certos tópicos'
             })}
             {li({
               children: 'Respostas com rich media (imagens, vídeos, carrosséis)'
@@ -264,7 +267,8 @@ export function NextStepsPage() {
               children: 'Detecção automática do idioma do usuário'
             })}
             {li({
-              children: 'Respostas em múltiplos idiomas a partir da mesma base de conhecimento'
+              children:
+                'Respostas em múltiplos idiomas a partir da mesma base de conhecimento'
             })}
             {li({
               children: 'Tradução automática de documentos'
@@ -281,7 +285,8 @@ export function NextStepsPage() {
               children: 'Integração nativa com Salesforce, HubSpot, Pipedrive'
             })}
             {li({
-              children: 'Webhooks personalizados para integração com qualquer sistema'
+              children:
+                'Webhooks personalizados para integração com qualquer sistema'
             })}
             {li({
               children: 'API de eventos para rastreamento de conversas'
diff --git a/src/shared/components/docs-sidebar.tsx b/src/shared/components/docs-sidebar.tsx
index 6a569a8..6ded96b 100644
--- a/src/shared/components/docs-sidebar.tsx
+++ b/src/shared/components/docs-sidebar.tsx
@@ -107,9 +107,7 @@ export function DocsSidebar() {
 
   function toggleExpanded(path: string) {
     setExpandedItems((prev) =>
-      prev.includes(path)
-        ? prev.filter((p) => p !== path)
-        : [...prev, path]
+      prev.includes(path) ? prev.filter((p) => p !== path) : [...prev, path]
     )
   }
 
@@ -228,7 +226,7 @@ export function DocsSidebar() {
               const isExpanded = expandedItems.includes(item.path)
               const hasSubItems = item.subItems && item.subItems.length > 0
               const IconComponent = item.icon
-              
+
               return (
                 <motion.div
                   key={item.path}
@@ -288,33 +286,36 @@ export function DocsSidebar() {
                   </div>
 
                   {/* Sub-items */}
-                  {hasSubItems && isExpanded && (!isCollapsed || isMobileOpen) && (
-                    <motion.div
-                      initial={{ opacity: 0, height: 0 }}
-                      animate={{ opacity: 1, height: 'auto' }}
-                      exit={{ opacity: 0, height: 0 }}
-                      transition={{ duration: 0.2 }}
-                      className="ml-6 mt-1 flex flex-col gap-1"
-                    >
-                      {item.subItems?.map((subItem) => {
-                        const isSubItemActive = location.pathname === subItem.path
-                        return (
-                          <Link
-                            key={subItem.path}
-                            to={subItem.path}
-                            className={cn(
-                              'rounded-lg px-3 py-2 text-sm font-medium transition-colors',
-                              isSubItemActive
-                                ? 'bg-primary/10 text-primary'
-                                : 'hover:bg-muted/50 text-foreground/60 hover:text-foreground'
-                            )}
-                          >
-                            {subItem.label}
-                          </Link>
-                        )
-                      })}
-                    </motion.div>
-                  )}
+                  {hasSubItems &&
+                    isExpanded &&
+                    (!isCollapsed || isMobileOpen) && (
+                      <motion.div
+                        initial={{ opacity: 0, height: 0 }}
+                        animate={{ opacity: 1, height: 'auto' }}
+                        exit={{ opacity: 0, height: 0 }}
+                        transition={{ duration: 0.2 }}
+                        className="mt-1 ml-6 flex flex-col gap-1"
+                      >
+                        {item.subItems?.map((subItem) => {
+                          const isSubItemActive =
+                            location.pathname === subItem.path
+                          return (
+                            <Link
+                              key={subItem.path}
+                              to={subItem.path}
+                              className={cn(
+                                'rounded-lg px-3 py-2 text-sm font-medium transition-colors',
+                                isSubItemActive
+                                  ? 'bg-primary/10 text-primary'
+                                  : 'hover:bg-muted/50 text-foreground/60 hover:text-foreground'
+                              )}
+                            >
+                              {subItem.label}
+                            </Link>
+                          )
+                        })}
+                      </motion.div>
+                    )}
                 </motion.div>
               )
             })}