desenvolvimento pre-lancamento

Commit inicial - add do repo privado para o repo NT

style: changes header's logo and colors

style: changes home page first session layout

feat: creates about us home page section

chore: creates home page section for whom

chore: creates student materails home page section

chore: creates teachers materials home page section

chore: creates teacher materials home page section

style: changes primary color

style: changes color at activities page

style: changes about page color

style: changes name to Decoda

fix: changes route to about page at footer

fix: changes background color

style: changes game page header colors

style: changes footer colors

chore: adds home page sections title

style: changes main font family to Lato

style: adds title font

fix: changes sizes to be more responsive for mobile

ajuste no build vercel

atualiza regras envio homol

Adiciona instrucoes de uso

add JupyterLite

fix solucao turtle

Add Mole Mash e Modal de Falhas

Add Progress Bar na pagina de Atividades

fix game name

chore: atualiza lockfile removendo vercel analytics

inclusão de efeito ao mudar de fase

add mecanismo de solução de fases em debug

vite config test

add BaseGame e refator do MoleMash

refatoração turtle

refatoração automato

refatoração automato

add tag

bug 1 e 2 automato

mostrar apenas games em homologação na pagina de atividades

aumentar timeout das fases finais do Turtle

fix bug scroll

add video

refactor semaforo

arrumar ordem das cores

add build docs

update vercel

update vercel

update vercel

update vercel

update vercel

add vercel jupyter

add vercel jupyter

fix deploy Vercel

fix deploy Vercel

fix deploy Vercel

add cripto

add cripto

refatoração

fix tour Mole Mash

.

remover arquivos de controle

chore: adds development tag for activity card

remover arquivos de status indevidamente versionados

atualizar cores nas atividades

add Quebra Cabeças

add Quebra Cabeças

add iniciativas

add Iniciativas

alteração de fotos pesadas

fix menu mobile

fix menu mobile

fix menu mobile

add Aspirador

update icons

update identidade visual documentação

update jupyter

add kernel python local

add kernel python local

add kernel python local

feat: add health check

feat: add primeiros passos

add letramento

mover letramento de lugar

update path games

update path games

fix: ajuste clique rapido no botão executar

remover dead code

fix: refactor: extract shared utilities for storage, phase unlock and mobile detection

stabilize context references and fix stale closure

extrair GameProgressContext do GameStateContext (SRP)

refactor(game): extrair usePhaser e useGameModals de GameBase + corrigir bugs descobertos

refactor(game): remove todos os aliases PT/EN duplicados

Remover aliases PT/EN da camada de modais

refactor + tests

security: add CodeSanitizer and integrate into GameInterpreter

- CodeSanitizer.js: 4 built-in rules (max_length, infinite_while,
  infinite_for, excessive_nesting) with pluggable extra rules
- GameInterpreter.executeCode: calls sanitizeCode() before js-interpreter,
  differentiates CodeSanitizationError (warn) from other errors (error)
- 21 unit tests for CodeSanitizer (100% coverage)
- 4 integration tests in GameInterpreter for sanitization paths

add CodeSanitizer

fix: fase 10 aspirador

fix: bug semaforo

teste

feat: add version

Ajusta a landing page para ficar mais próxima ao protótipo

ajusta raio da borda do botão de Acesse nosso Laboratório

pequenos ajustes de layout na página de iniciativas

atualiza tabela de jogos educativos com os jogos disponíveis atualmente

ajustados pequenos detalhes e informações do jogos na seção de guias pedagógicos

troca nome playground para laboratório e adiciona imagens do lab

adiciona documentação de conceitos básicos de programação

ajustado pequenos erros de digitação

adiciona tooltip com conceitos escondidos em hover na tag +N de conceitos

update docs dev

desativar tour

setup matriz MoleMash

setup matriz MoleMash

fix: link

update version

update docs

update docs

mudou o layout de quem somos

mudei as imgs dos icons e baixei o botao

centraliza titulo com imagem e ajusta sessão com gradiente vermelho-rosa

adiciona responsividade para a pagina quem somos

ajusta botão de conheça nossa história

ajustes

ajustes na home + add. teclado

update version

security

security

feat: add tapume para telas pequenas

v1.1.0

feat: decoda offline

feat: doc offline

offline

fix: ajustes para release

fix: navbar; config ordenação; versão

fix: rotas docs e jupyter para pwa

delete private files

Co-authored-by: Indra Araujo <indra.araujo.santos@gmail.com>
Co-authored-by: solange dos santos <sollangelive71@gmail.com>

docs/edu/como-usar.md

@@ -0,0 +1,97 @@
+---
+sidebar_position: 2
+title: "Como Usar o Decoda"
+---
+
+# Como Usar o Decoda
+
+Esta página apresenta tudo que você precisa saber para começar a usar o **Decoda** em sala de aula — desde a navegação básica na plataforma até a compreensão dos conceitos pedagógicos por trás de cada atividade. Se você ainda não definiu seu perfil de uso, consulte o [Guia do Educador](./intro) para escolher a trilha mais adequada à sua experiência.
+
+## **Como Funciona o Decoda?**
+
+O **Decoda** nasceu inspirado em plataformas que usam o [Blockly](https://developers.google.com/blockly/guides/get-started/what-is-blockly?hl=pt-br), uma biblioteca educacional mundialmente reconhecida, que usa o conceito de **Programação Visual**. A plataforma adapta essa tecnologia para criar **Atividades de Programação** contextualizadas, onde cada desafio foi projetado para ensinar um conceito específico de lógica de programação de forma progressiva e motivadora. Mas ela não se resumo somente a bloco: temos também uma área de Laboratório onde é possível fazer a transição do Bloco para o Código, utilizando [JupypterLite](https://jupyterlab.readthedocs.io/en/latest/), uma interface de desenvolvimento Python online que funciona 100% no navegador do usuário, sem necessidade de instalação e configuração de ambiente.
+
+### **O que é Programação Visual?**
+
+A **programação visual** é uma abordagem educacional onde os estudantes criam programas usando **blocos gráficos** ao invés de escrever código texto. Como montar um quebra-cabeça ou peças construtivas!
+
+### **Por que usar Blocos?**
+
+- <i class="fas fa-check"></i> **Elimina erros de sintaxe**: Não há como "escrever errado"
+- <i class="fas fa-check"></i> **Foco na lógica**: Estudantes pensam no "como resolver" ao invés do "como escrever"
+- <i class="fas fa-check"></i> **Visual e intuitivo**: Cada bloco tem cor e formato únicos
+- <i class="fas fa-check"></i> **Feedback imediato**: Resultados aparecem instantaneamente
+
+### **Abordagem Pedagógica**
+
+O Decoda utiliza princípios pedagógicos modernos:
+
+#### **Aprendizagem Ativa**
+
+- **Estudantes como protagonistas**: Criadores de soluções, não apenas receptores
+- **Programação como ferramenta**: Meio para desenvolver o raciocínio lógico
+- **Autonomia do pensamento**: Desenvolvimento do pensamento crítico
+
+#### **Diálogo Prático**
+
+- **Problemas contextualizados**: Jogos conectados à realidade dos estudantes
+- **Discussão coletiva**: Socialização das estratégias e soluções
+- **Reflexão crítica**: "Por que minha solução funciona?"
+
+#### **Prática Transformadora**
+
+- **Ação-reflexão-ação**: Ciclo contínuo de aprender fazendo
+- **Transformação social**: Programação como ferramenta de mudança
+- **Desenvolvimento digital**: Compreensão crítica da tecnologia
+
+## **Por onde começar?**
+
+Independentemente do seu perfil, a jornada no Decoda segue uma progressão lógica. O diagrama abaixo resume as etapas e indica, para cada perfil, qual o caminho mais recomendado:
+
+```mermaid
+flowchart TD
+  A[Início] --> B[Conhecer a Plataforma]
+  B --> C{Você já conhece programação?}
+
+  C -->|Sim| D[Conhecer os Guias Pedagógicos]
+  C -->|Não| E[Conhecer Fundamentos de Programação]
+  E --> D
+
+  D --> F[Conhecer Computação Desplugada]
+  F --> G[Testar atividades]
+  G --> H[Planejar suas aulas]
+  H --> I[Aplicar em sala de aula]
+  I --> J[Fim]
+
+  click B "./como-usar" "Abrir: Como Usar o Decoda"
+  click D "./guias-pedagogicos/preparando-aula" "Abrir: Guias Pedagógicos"
+  click E "./fundamentos-programacao/intro" "Abrir: Fundamentos de Programação"
+  click F "./fundamentos-programacao/computacao-desplugada" "Abrir: Computação Desplugada"
+  click G "./recursos/atividades/programacao" "Abrir: Atividades de Programação"
+  click H "./guias-pedagogicos/preparando-aula" "Abrir: Planejando e Conduzindo a Aula"
+  click I "./guias-pedagogicos/avaliacao-aprendizado" "Abrir: Acompanhamento e Situações Comuns"
+```
+
+### **Etapa 1 — Conhecer a Plataforma**
+
+Explore a interface, os controles de execução e a estrutura das atividades antes de apresentar a plataforma para os estudantes. Quanto mais familiarizado você estiver com o ambiente, mais segura e fluida será a condução da aula.
+
+### **Etapa 2 — Conhecer os Fundamentos de Programação** *(somente para educadores sem experiência em programação)*
+
+Se você não tem familiaridade com lógica de programação, comece pelos [Fundamentos](./fundamentos-programacao/intro). Os módulos apresentam, de forma acessível, os conceitos essenciais — sequências, condicionais, loops e funções — com analogias do cotidiano e exemplos práticos prontos para uso em sala.
+
+### **Etapa 3 — Conhecer os Guias Pedagógicos**
+
+Os [Guias Pedagógicos](./guias-pedagogicos/preparando-aula) ensinam como planejar uma aula, escolher a atividade certa para o perfil da turma, estruturar o tempo e conduzir os momentos de prática, discussão e síntese. São o principal apoio para quem vai usar o Decoda com uma turma real.
+
+### **Etapa 4 — Conhecer Computação Desplugada**
+
+A [Computação Desplugada](./fundamentos-programacao/computacao-desplugada) oferece atividades que ensinam lógica de programação **sem computador** — com papel, movimentos e dinâmicas de grupo. É uma excelente forma de introduzir conceitos antes de entrar na plataforma, especialmente com turmas que têm pouca familiaridade com tecnologia.
+
+### **Etapa 5 — Testar as Atividades**
+
+Antes de aplicar em sala, explore as [Atividades de Programação](./recursos/atividades/programacao) e as [Atividades de Letramento](./recursos/atividades/letramento) você mesmo. Entender o fluxo de cada desafio, seus blocos disponíveis e os conceitos envolvidos é fundamental para mediar com segurança.
+
+### **Etapa 6 — Planejar e Aplicar**
+
+Com as atividades conhecidas, use o guia [Planejando e Conduzindo a Aula](./guias-pedagogicos/preparando-aula) para estruturar seu plano de aula, e o guia de [Acompanhamento](./guias-pedagogicos/avaliacao-aprendizado) para observar e registrar o progresso da turma durante e após a aplicação.