Dinno App: landing de conversão

Página única e estática, publicada em https://dinnoapp.forjadev.app.br/, cujo único trabalho é levar o visitante para o app, https://dinno-app.vercel.app/. O Dinno App é um produto da ForjaDev.

Não faz parte do app Next.js. É HTML, CSS e um JavaScript puro: sem build, sem framework, sem npm install. Publica no GitHub Pages sem pipeline, e mexer nela nunca derruba nem reimplanta o produto. O repositório é rodprado128/dinnoapp (o nome antigo, dinno-landing, redireciona).

index.html              a página inteira, com o JSON-LD no <head>
assets/css/styles.css   todo o visual; a identidade inteira em custom properties no :root
assets/js/main.js       o único script: warp, entrada das peças, contador, confete e a demonstração
assets/img/             logo, mascotes, favicons e o cartão de compartilhamento
robots.txt              libera a indexação e aponta o sitemap
sitemap.xml             a única URL deste site, com o lastmod da última publicação
CNAME                   o domínio próprio servido pelo GitHub Pages

A marca

A identidade visual é definitiva desde 26/09/2026: nome "Dinno App", mascote dino astronauta, wordmark, paleta, tom de voz e tema espacial (Starcoin, missões, patentes, ofensiva). A fonte prescritiva é o BRANDING_DINNO.md do repositório do app; os valores dos tokens vêm do app/globals.css e do DESIGN.md de lá, lidos e copiados, nunca lembrados.

• Tema escuro e só ele (color-scheme: dark, theme-color #140F26). A landing já teve um tema claro por prefers-color-scheme e ele fazia a página renderizar clara para quem tinha o sistema no claro (16/09/2026). color-scheme: dark também impede o escurecimento forçado do Chromium de reprocessar as cores: medido com --blink-settings=forceDarkModeEnabled=true, as cores ficam iguais.
• Accent por seção, como no app. Cada <section> declara data-secao e só os quatro tokens de accent mudam: herói, missões, instalar, FAQ e chamada final em missoes (roxo); como funciona em aprovacoes (lima); dinheiro em carteira (dourado); criança em amigos (ciano); família e segurança em dashboard (azul). O dourado do Starcoin convive com todos.
• Peça de plástico injetado: borda de 2px, sombra dura deslocada para baixo, raio de 32px em card, pílula em botão. Nada de vidro, blur, backdrop-filter, sombra difusa, brilho ou gradiente como fundo de card. Os únicos gradientes são os do próprio app: o contorno de brasa da Super Missão, a chama da Meta e a aurora.
• Nenhum hex fora do :root. As oito seções do app estão lá como --missoes-accent, --carteira-accent e assim por diante; [data-secao] só aponta para elas. O JavaScript lê as cores das custom properties. Os tokens da ForjaDev ficam à parte, com prefixo --cor-forjadev-*.
• Baloo 2 (500 a 800) e Material Symbols Rounded (FILL 1, wght 600, opsz 24), as duas do Google Fonts com display=swap. Os ícones vêm com icon_names (só os glifos usados, em ordem alfabética, que é o que a API exige).
• Fallback com a métrica da Baloo 2. "Baloo 2 Fallback" usa local(Arial) com os mesmos ascent-override: 112.55%, descent-override: 54.71%, line-gap-override: 0% e size-adjust: 95.78% que o next/font gera para o app. Com isso e com a caixa de cada bloco do wordmark fixada na largura medida da Baloo 2 800, a troca de fonte não mexe em nada: CLS 0.

As peças mostram o app

As peças centrais de cada seção são recriações em HTML/CSS das telas reais, não capturas. Todo texto dentro delas é string que existe no código do app; os dados (nomes, títulos de missão, valores, datas) são fictícios e cada peça é um <figure> com aria-label começando por "Exemplo com dados fictícios".

Peça	Tela do app
Tela de missões com a Super Missão	/missoes da criança (app/(crianca)/missoes/page.tsx, mission-tabs.tsx)
Aprovação com Reprovar e Aprovar	components/dashboard/aprovar-missao-card.tsx
Carteira Starcoin e a taxa	app/(crianca)/carteira/page.tsx
Formulário de missão	components/dashboard/criar-missao-form.tsx e a página /dashboard/missoes
Barra de aprovação em lote	components/dashboard/fila-aprovacoes.tsx
Saldo total, bloqueado e disponível	app/(crianca)/carteira/page.tsx
Meu extrato	app/(crianca)/carteira/extrato/page.tsx e lib/extrato.ts
Mesada fixa	components/dashboard/configurar-mesada-fixa-form.tsx
Você pode gastar e o item da loja	app/(crianca)/loja/page.tsx e lib/loja.ts
Minha meta	app/(crianca)/meta/page.tsx e components/meta/barra-meta.tsx (parada)
Ofensiva	components/ofensiva/cartao-ofensiva.tsx
Suas conquistas	app/(crianca)/perfil/conquistas/page.tsx; o emblema usa o ícone do catálogo (emblemas.icone), porque a arte PNG dos emblemas não é fonte autorizada para esta página
Ranking entre amigos	app/(crianca)/amigos/page.tsx
Autorização para o uso do Dinno pela criança	components/consentimento/gate-consentimento.tsx e lib/consentimento.ts

Movimento: de onde veio cada efeito

Nenhum efeito foi inventado. Cada um replica um da tabela "Movimento" do BRANDING_DINNO.md ou do app, com os parâmetros lidos do código.

以上為 README 的開頭部分。其餘內容請閱讀原文。 檢視完整 README ↗