Create modern documentation interface with responsive sidebar navigation and navbar integration

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 (
+    <motion.div
+      initial={{ opacity: 0, y: 20 }}
+      animate={{ opacity: 1, y: 0 }}
+      transition={{ duration: 0.5 }}
+    >
+      {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.
+          </>
+        )
+      })}
+    </motion.div>
+  )
+}
+
+export default AboutProjectPage

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 (
+    <motion.div
+      initial={{ opacity: 0, y: 20 }}
+      animate={{ opacity: 1, y: 0 }}
+      transition={{ duration: 0.5 }}
+    >
+      {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: (
+                <>
+                  <strong>Amazon Titan:</strong> 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: (
+                <>
+                  <strong>Anthropic Claude:</strong> 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: (
+                <>
+                  <strong>AI21 Labs:</strong> 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: (
+                <>
+                  <strong>Cohere:</strong> 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: (
+                <>
+                  <strong>Precisa de respostas rápidas e gerais?</strong> Use o{' '}
+                  <strong>Amazon Titan</strong>.
+                </>
+              )
+            })}
+            {li({
+              children: (
+                <>
+                  <strong>
+                    Vai criar um chatbot ou assistente virtual que precisa
+                    conversar bastante?
+                  </strong>{' '}
+                  O <strong>Claude</strong> é uma ótima opção.
+                </>
+              )
+            })}
+            {li({
+              children: (
+                <>
+                  <strong>Quer gerar textos criativos ou técnicos?</strong>{' '}
+                  Experimente o <strong>AI21 Labs</strong>.
+                </>
+              )
+            })}
+            {li({
+              children: (
+                <>
+                  <strong>
+                    Precisa analisar, classificar ou organizar muitos textos?
+                  </strong>{' '}
+                  O <strong>Cohere</strong> 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!
+          </>
+        )
+      })}
+    </motion.div>
+  )
+}
+
+export default FoundationModelsPage

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 (
+    <motion.div
+      initial={{ opacity: 0, y: 20 }}
+      animate={{ opacity: 1, y: 0 }}
+      transition={{ duration: 0.5 }}
+    >
+      {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 <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 IntegrationPage

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 (
+    <motion.div
+      initial={{ opacity: 0, y: 20 }}
+      animate={{ opacity: 1, y: 0 }}
+      transition={{ duration: 0.5 }}
+    >
+      {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 <strong>&quot;Minhas bases&quot;</strong>.
+          </>
+        )
+      })}
+
+      {ul({
+        children: (
+          <>
+            {li({
+              children: (
+                <>
+                  <strong>Para criar uma base:</strong> Clique em{' '}
+                  <strong>&quot;Nova base&quot;</strong>, 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: (
+                <>
+                  <strong>Para editar:</strong> Selecione uma base existente na
+                  lista para ver detalhes, adicionar ou remover documentos, ou
+                  atualizar informações.
+                </>
+              )
+            })}
+            {li({
+              children: (
+                <>
+                  <strong>Para excluir:</strong> Escolha a base desejada e
+                  clique em <strong>&quot;Excluir&quot;</strong>. Confirme a
+                  ação para remover a base do sistema.
+                </>
+              )
+            })}
+          </>
+        )
+      })}
+    </motion.div>
+  )
+}
+
+export default KnowledgeBasesPage