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 전문 보기 ↗
