diff --git a/app/src/pages/HomePage/HomePage.jsx b/app/src/pages/HomePage/HomePage.jsx
index 1127c38..fa58b3d 100644
--- a/app/src/pages/HomePage/HomePage.jsx
+++ b/app/src/pages/HomePage/HomePage.jsx
@@ -4,6 +4,8 @@
* @module pages.HomePage.HomePage
*/
+import { useEffect } from "react";
+import capicodaUrl from "@/vendor/capicoda/capicoda.js?url";
import Navbar from "../../components/Navbar";
import PropTypes from "prop-types";
import Hero from "./Hero";
@@ -16,6 +18,21 @@ import StudentsMaterials from "./StudentsMaterials";
import TeachersMaterials from "./TeachersMaterials";
const HomePage = () => {
+ // Mascote Capicoda: injetado apenas na página inicial. O widget é um script
+ // autocontido que se anexa ao body; na saída da home removemos o script e o
+ // nó raiz (#dcs-root) para não vazar para outras rotas.
+ useEffect(() => {
+ const script = document.createElement("script");
+ script.src = capicodaUrl;
+ script.defer = true;
+ document.body.appendChild(script);
+ return () => {
+ script.remove();
+ const root = document.getElementById("dcs-root");
+ if (root) root.remove();
+ };
+ }, []);
+
return (
{/* Navegação */}
diff --git a/app/src/vendor/capicoda/README.md b/app/src/vendor/capicoda/README.md
new file mode 100644
index 0000000..0fe6c4b
--- /dev/null
+++ b/app/src/vendor/capicoda/README.md
@@ -0,0 +1,102 @@
+# Capicoda 🚩🦫
+
+A **capivara comunista** do Núcleo de Tecnologia do MTST. Um widget de chat que
+aparece na página do Núcleo, conversa com quem visita, identifica se a pessoa é
+desenvolvedora e a direciona para **contribuir com o [DECODA](https://git.mtst.tec.br/educacao/decoda/)**.
+
+Projeto do hackathon do Núcleo de Tecnologia do MTST.
+
+---
+
+## ✨ O que é
+
+- Balão de chat no canto inferior direito de qualquer site.
+- Conversa por **roteiro fixo** (botões) — sem IA, sem backend, sem build.
+- Faz a triagem do visitante (**dev / aprendiz / curiosx**) e entrega o caminho
+ certo: repositório, como rodar localmente, como abrir um PR, ou como ajudar
+ sem programar.
+- Um único arquivo: **`capicoda.js`** (CSS, SVG da capivara e diálogo embutidos).
+
+---
+
+## 🚀 Rodar o demo
+
+Não precisa instalar nada. Na pasta do projeto:
+
+```bash
+python3 -m http.server 8000
+```
+
+Abra **http://localhost:8000/demo.html** e clique no balão da capivara.
+
+> Também dá pra só abrir o `demo.html` direto no navegador (duplo clique).
+
+---
+
+## 🔌 Embutir em outro site
+
+Copie `capicoda.js` para o site e adicione **uma linha** antes do `
`:
+
+```html
+
+```
+
+Pronto — o balão se injeta sozinho. Não conflita com o CSS da página (tudo é
+prefixado com `dcs-` e isolado num `#dcs-root`).
+
+---
+
+## 💬 Editar a conversa
+
+Toda a conversa vive no objeto **`TREE`** no topo do `capicoda.js`. Cada nó:
+
+```js
+nome_do_no: {
+ msg: "Texto do balão", // ou um array de balões em sequência
+ options: [
+ { label: "Botão A", next: "outro_no" }, // navega para outro nó
+ { label: "Abrir repo", url: URLS.repo }, // abre um link em nova aba
+ { label: "Destaque", next: "x", primary: true } // botão em vermelho cheio
+ ]
+}
+```
+
+Os links reais ficam no objeto `URLS` (repo, página do DECODA, página do Núcleo).
+
+### Mapa do roteiro
+
+```
+start ──┬─ Bora! ───────────────► qualifica
+ └─ O que é o DECODA? ───► oque_decoda ──► qualifica
+
+qualifica ─┬─ Sou dev ──────► area ─┬─ Front/JS ──► cta_front
+ │ ├─ Back/DevOps ► cta_infra
+ │ └─ Full/outra ─► cta_geral
+ ├─ Tô aprendendo ► aprendiz
+ └─ Só curiosx ───► curioso
+
+cta_* ─┬─ Ver repositório (link)
+ ├─ Como rodar localmente ► setup
+ ├─ Como mandar um PR ─────► fluxo_pr
+ └─ Voltar ao início ──────► start
+```
+
+---
+
+## 🎨 Identidade
+
+Capivara marrom de boina vermelha com estrela dourada (SVG inline). Paleta MTST
+(vermelho `#c1121f`). Tom acolhedor e militante-bem-humorado.
+
+---
+
+## 🔮 Próximos passos (fora do escopo do hackathon)
+
+- Modo IA opcional (Claude API) para conversa livre.
+- Captura de contato de quem quer contribuir (onboarding → mutirão).
+- Puxar "good first issues" dinamicamente da aba de Issues do repositório.
+- Integração na página real do Núcleo e/ou sobre o app DECODA.
+
+---
+
+Desenvolvido com ✊ para o DECODA · Núcleo de Tecnologia do MTST
diff --git a/app/src/vendor/capicoda/capicoda.js b/app/src/vendor/capicoda/capicoda.js
new file mode 100644
index 0000000..e2d3e32
--- /dev/null
+++ b/app/src/vendor/capicoda/capicoda.js
@@ -0,0 +1,341 @@
+/*!
+ * Capicoda 🚩 — a capivara comunista do Núcleo de Tecnologia do MTST
+ * Widget autocontido: conversa com o visitante, identifica devs e os
+ * direciona para contribuir com o DECODA (https://git.mtst.tec.br/educacao/decoda/).
+ *
+ * Uso:
+ * Sem dependências, sem build, sem backend.
+ */
+(function () {
+ "use strict";
+
+ // ----- Links reais do DECODA ------------------------------------------
+ var URLS = {
+ repo: "https://git.mtst.tec.br/educacao/decoda/",
+ decoda: "https://www.nucleodetecnologia.com.br/decoda",
+ nucleo: "https://www.nucleodetecnologia.com.br",
+ };
+
+ // ----- Árvore de diálogo ----------------------------------------------
+ // Cada nó: { msg: string|string[], options: [{label, next?, url?, primary?}] }
+ // - next: navega para outro nó
+ // - url: abre link em nova aba (pode coexistir com next)
+ var TREE = {
+ start: {
+ msg: [
+ "Salve, companheirx! 🚩",
+ "Sou o