diff --git a/src/features/docs/pages/about-project.tsx b/src/features/docs/pages/about-project.tsx
new file mode 100644
index 0000000..6e49858
--- /dev/null
+++ b/src/features/docs/pages/about-project.tsx
@@ -0,0 +1,57 @@
+import { motion } from 'framer-motion'
+import { h1, h2, p } from '@/shared/components/typography'
+
+export function AboutProjectPage() {
+ return (
+
+ {h1({ children: 'Sobre o Projeto' })}
+
+ {h2({ children: 'Por que criamos o Knowly?' })}
+ {p({
+ children: (
+ <>
+ A inteligência artificial está mudando a forma como empresas
+ trabalham, trazendo mais agilidade e eficiência para o dia a dia.
+ Mas, para a maioria dos negócios, usar IA ainda é caro e complicado:
+ exige conhecimento técnico, tempo e investimento alto em tecnologia.
+
+ )
+ })}
+ {p({
+ children: (
+ <>
+ O Knowly nasceu para simplificar esse cenário. Queremos que qualquer
+ empresa consiga aproveitar o poder dos grandes modelos de linguagem
+ para responder dúvidas, organizar informações e automatizar tarefas,
+ sem precisar se preocupar com detalhes técnicos ou infraestrutura.
+
+ )
+ })}
+ {p({
+ children: (
+ <>
+ Nossa plataforma permite que você envie seus próprios documentos e,
+ em poucos cliques, já tenha uma base de conhecimento inteligente
+ pronta para ser usada no seu atendimento, site ou operação interna.
+ Tudo isso com segurança, praticidade e custos acessíveis.
+
+ )
+ })}
+ {p({
+ children: (
+ <>
+ O objetivo é ajudar empresas a inovar, ganhar tempo e focar no que
+ realmente importa: crescer e atender melhor seus clientes, usando IA
+ de verdade no dia a dia.
+
+ )
+ })}
+
+ )
+}
+
+export default AboutProjectPage
diff --git a/src/features/docs/pages/foundation-models.tsx b/src/features/docs/pages/foundation-models.tsx
new file mode 100644
index 0000000..407c874
--- /dev/null
+++ b/src/features/docs/pages/foundation-models.tsx
@@ -0,0 +1,129 @@
+import { motion } from 'framer-motion'
+import { h1, h2, p, ul, li } from '@/shared/components/typography'
+
+export function FoundationModelsPage() {
+ return (
+
+ {h1({ children: 'Modelos de Fundação AWS' })}
+
+ {h2({ children: 'O que são modelos de fundação?' })}
+ {p({
+ children: (
+ <>
+ Modelos de fundação são inteligências artificiais treinadas para
+ entender e gerar textos, responder perguntas, resumir informações e
+ até criar conteúdos. Eles servem como base para várias aplicações de
+ IA, desde chatbots até análise de documentos.
+
+ )
+ })}
+
+ {h2({ children: 'Principais modelos disponíveis na AWS' })}
+ {ul({
+ children: (
+ <>
+ {li({
+ children: (
+ <>
+ Amazon Titan: Modelo versátil para tarefas do
+ dia a dia, como responder perguntas, resumir textos e
+ organizar informações. É uma ótima escolha para quem busca
+ equilíbrio entre custo e desempenho.
+
+ )
+ })}
+ {li({
+ children: (
+ <>
+ Anthropic Claude: Ideal para conversas mais
+ longas, respostas detalhadas e situações que exigem mais
+ segurança e controle. Muito usado em chatbots avançados e
+ assistentes virtuais.
+
+ )
+ })}
+ {li({
+ children: (
+ <>
+ AI21 Labs: Especialista em geração de textos
+ criativos, artigos, e até mesmo conteúdos técnicos. Indicado
+ para quem precisa de textos mais elaborados ou criativos.
+
+ )
+ })}
+ {li({
+ children: (
+ <>
+ Cohere: Focado em análise de linguagem,
+ classificação de textos e extração de informações. Bom para
+ automação de processos e análise de grandes volumes de dados.
+
+ )
+ })}
+
+ )
+ })}
+
+ {h2({ children: 'Quando usar cada modelo?' })}
+ {ul({
+ children: (
+ <>
+ {li({
+ children: (
+ <>
+ Precisa de respostas rápidas e gerais? Use o{' '}
+ Amazon Titan.
+
+ )
+ })}
+ {li({
+ children: (
+ <>
+
+ Vai criar um chatbot ou assistente virtual que precisa
+ conversar bastante?
+ {' '}
+ O Claude é uma ótima opção.
+
+ )
+ })}
+ {li({
+ children: (
+ <>
+ Quer gerar textos criativos ou técnicos?{' '}
+ Experimente o AI21 Labs.
+
+ )
+ })}
+ {li({
+ children: (
+ <>
+
+ Precisa analisar, classificar ou organizar muitos textos?
+ {' '}
+ O Cohere pode ajudar.
+
+ )
+ })}
+
+ )
+ })}
+
+ {p({
+ children: (
+ <>
+ Com esses modelos, você pode escolher a solução que mais combina com
+ o seu projeto, sem se preocupar com a complexidade técnica. Basta
+ selecionar o modelo e começar a usar!
+
+ )
+ })}
+
+ )
+}
+
+export default FoundationModelsPage
diff --git a/src/features/docs/pages/integration.tsx b/src/features/docs/pages/integration.tsx
new file mode 100644
index 0000000..10a5a86
--- /dev/null
+++ b/src/features/docs/pages/integration.tsx
@@ -0,0 +1,83 @@
+import { motion } from 'framer-motion'
+import { h1, h2, p, ul, li, pre } from '@/shared/components/typography'
+
+export function IntegrationPage() {
+ return (
+
+ {h1({ children: 'Como integrar com sua base de conhecimento' })}
+
+ {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 prompt (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.
+
+ )
+ })}
+
+ )
+}
+
+export default IntegrationPage
diff --git a/src/features/docs/pages/knowledge-bases.tsx b/src/features/docs/pages/knowledge-bases.tsx
new file mode 100644
index 0000000..78192e0
--- /dev/null
+++ b/src/features/docs/pages/knowledge-bases.tsx
@@ -0,0 +1,63 @@
+import { motion } from 'framer-motion'
+import { h1, h2, p, ul, li } from '@/shared/components/typography'
+
+export function KnowledgeBasesPage() {
+ return (
+
+ {h1({ children: 'Gerenciando Bases de Conhecimento' })}
+
+ {h2({ children: 'Como criar, editar e excluir suas bases' })}
+ {p({
+ children: (
+ <>
+ Gerenciar suas bases de conhecimento no Knowly é simples e rápido.
+ Basta acessar as configurações do seu perfil após fazer login e
+ selecionar a opção "Minhas bases".
+
+ )
+ })}
+
+ {ul({
+ children: (
+ <>
+ {li({
+ children: (
+ <>
+ Para criar uma base: Clique em{' '}
+ "Nova base", escolha um nome e
+ envie os documentos que deseja usar. Pronto! Sua base estará
+ disponível para consultas e integrações assim que terminar de
+ ser criada.
+
+ )
+ })}
+ {li({
+ children: (
+ <>
+ Para editar: Selecione uma base existente na
+ lista para ver detalhes, adicionar ou remover documentos, ou
+ atualizar informações.
+
+ )
+ })}
+ {li({
+ children: (
+ <>
+ Para excluir: Escolha a base desejada e
+ clique em "Excluir". Confirme a
+ ação para remover a base do sistema.
+
+ )
+ })}
+
+ )
+ })}
+
+ )
+}
+
+export default KnowledgeBasesPage
diff --git a/src/features/docs/pages/playground-testing.tsx b/src/features/docs/pages/playground-testing.tsx
new file mode 100644
index 0000000..1e7a64e
--- /dev/null
+++ b/src/features/docs/pages/playground-testing.tsx
@@ -0,0 +1,68 @@
+import { motion } from 'framer-motion'
+import { h1, h2, p, ul, li } from '@/shared/components/typography'
+
+export function PlaygroundTestingPage() {
+ return (
+
+ {h1({ children: 'Testando sua Base de Conhecimento no Playground' })}
+
+ {h2({ children: 'O que é o Playground?' })}
+ {p({
+ children: (
+ <>
+ O Playground é uma área do nosso site feita para você testar, na
+ prática, as bases de conhecimento que criou. Ele funciona como um
+ chat, parecido com o ChatGPT ou o Gemini, onde você pode conversar
+ com a sua base e ver as respostas geradas pela inteligência
+ artificial.
+
+ )
+ })}
+
+ {h2({ children: 'Como funciona?' })}
+ {ul({
+ children: (
+ <>
+ {li({
+ children: <>Escolha qual base de conhecimento você quer testar.
+ })}
+ {li({
+ children: (
+ <>
+ Envie perguntas ou comandos (prompts) no chat, como faria em
+ um atendimento real.
+
+ )
+ })}
+ {li({
+ children: (
+ <>
+ Veja as respostas geradas na hora, usando os documentos e
+ informações que você cadastrou.
+
+ )
+ })}
+
+ )
+ })}
+
+ {h2({ children: 'Por que usar o Playground?' })}
+ {p({
+ children: (
+ <>
+ O Playground é a maneira mais fácil e rápida de conferir se sua base
+ está funcionando como esperado. Você pode testar diferentes
+ perguntas, ajustar seus documentos e experimentar os modelos antes
+ de integrar a IA ao seu site ou sistema.
+
+ )
+ })}
+
+ )
+}
+
+export default PlaygroundTestingPage
diff --git a/src/features/docs/pages/subscription-management.tsx b/src/features/docs/pages/subscription-management.tsx
new file mode 100644
index 0000000..a6f0251
--- /dev/null
+++ b/src/features/docs/pages/subscription-management.tsx
@@ -0,0 +1,66 @@
+import { motion } from 'framer-motion'
+import { h1, h2, p, ul, li } from '@/shared/components/typography'
+
+export function SubscriptionManagementPage() {
+ return (
+
+ {h1({ children: 'Gerenciando seu Plano de Assinatura' })}
+
+ {h2({ children: 'Como alterar seu plano' })}
+ {p({
+ children: (
+ <>
+ Para gerenciar seu plano de assinatura no Knowly, é só acessar a
+ área do usuário após fazer login. No menu lateral à esquerda, clique
+ em "Assinatura".
+
+ )
+ })}
+ {ul({
+ children: (
+ <>
+ {li({
+ children: (
+ <>
+ Na seção "Plano atual", procure o
+ botão "Mudar plano" no canto
+ inferior direito.
+
+ )
+ })}
+ {li({
+ children: (
+ <>
+ Clique em "Mudar plano" para ver as
+ opções disponíveis e escolher o plano que melhor atende às
+ suas necessidades.
+
+ )
+ })}
+ {li({
+ children: (
+ <>
+ Confirme a alteração e pronto! Seu novo plano já estará ativo.
+
+ )
+ })}
+
+ )
+ })}
+ {p({
+ children: (
+ <>
+ Assim, você pode ajustar sua assinatura sempre que quiser, de forma
+ rápida e sem complicação.
+
+ )
+ })}
+
+ )
+}
+
+export default SubscriptionManagementPage
diff --git a/src/routes/app-routes.tsx b/src/routes/app-routes.tsx
index 507a518..a2d14f9 100644
--- a/src/routes/app-routes.tsx
+++ b/src/routes/app-routes.tsx
@@ -19,6 +19,13 @@ import { PageWithSidebar } from '@/shared/components/page-with-sidebar'
import { CreateBase } from '@/features/user-area/pages/create-base'
import { CreateBasePipeline } from '@/features/user-area/pages/create-base-pipeline'
import { PlaygroundPage } from '@/features/playground/pages/playground'
+import { DocsLayout } from '@/shared/components/docs-layout'
+import { AboutProjectPage } from '@/features/docs/pages/about-project'
+import { FoundationModelsPage } from '@/features/docs/pages/foundation-models'
+import { KnowledgeBasesPage } from '@/features/docs/pages/knowledge-bases'
+import { IntegrationPage } from '@/features/docs/pages/integration'
+import { PlaygroundTestingPage } from '@/features/docs/pages/playground-testing'
+import { SubscriptionManagementPage as DocsSubscriptionPage } from '@/features/docs/pages/subscription-management'
export function AppRoutes() {
return (
@@ -60,6 +67,24 @@ export function AppRoutes() {
} />
} />
+
+ }>
+ } />
+ }
+ />
+ } />
+ } />
+ }
+ />
+ }
+ />
+
)
diff --git a/src/shared/components/docs-layout.tsx b/src/shared/components/docs-layout.tsx
new file mode 100644
index 0000000..a3a9428
--- /dev/null
+++ b/src/shared/components/docs-layout.tsx
@@ -0,0 +1,26 @@
+import { Outlet } from 'react-router-dom'
+import { Navbar } from '@/shared/components/navbar'
+import { Toaster } from 'react-hot-toast'
+import { DocsSidebar } from '@/shared/components/docs-sidebar'
+import { Background } from '@/shared/components/background'
+import { BackgroundBlobs } from '@/shared/components/background-blobs'
+
+export function DocsLayout() {
+ return (
+ <>
+
+
+
+
+
+
+