Mockups · Genesis Phase 2 · atualizado 2026-08-25

Seu Gerentte — tour visual completo

24 telas cobrindo o app inteiro: do beta tester do evento (Marco 0) até super-admin cross-org (V1 completo). Reusa o design system do Conversattiva. Mobile-first — abre no celular pra ver o layout de verdade. Setas ← / → pra navegar.

PWA · Web Push·Laravel 13 + Vue 3·Advertti teal palette·Montserrat
Marco 0 · Beta reveal (29/08) — fluxo mínimo end-to-end
SG
00 · LandingM0
Hero + CTA beta tester
01
01 · LoginM0
Magic link input
02
02 · Link enviadoM0
Confirmação + reenvio
03
03 · Onb 1 · KPIsM0
Picklist com checkboxes
04
04 · Onb 2 · Free-textM0
O que faltou no picklist
05
05 · Onb 3 · ConfirmarM0
LLM reformula, gerente OK
06
06 · Onb 4 · Bem-vindoM0
Sucesso + próximos passos
10
10 · Feed de açõesM0
A tela principal · mobile-first
Auth · fallbacks
07
07 · Código 6 dígitos
Fallback do magic-link
Dashboard · drill · listagens — V1
16
16 · Feed vazio
Empty state — bom sinal
14
14 · Ação · detalhe
Zoom em 1 action-point
11
11 · Drill de conversa
Gauge + tom + thread
15
15 · Conversas · lista
Filtro sentiment/tom/atendente
Time · highlights — V1
12
12 · Ranking do time
Best employee + reconhecim.
17
17 · Atendente · perfil
Stats + tom breakdown + convs
13
13 · Highlights diários
Top 3 wins + top 3 riscos
Settings — V1
20
20 · Config KPIs
Toggle + thresholds
21
21 · Notificações
Web Push + email digest
22
22 · Organização
API health + budget LLM
24
24 · Minha conta / LGPD
Profile + sessões + delete-me
Super-admin · Ricardo — cross-org
30
30 · SA · Todas as orgs
Health + LLM + ações abertas
31
31 · SA · Convidar org
Nova org + KPIs sugeridos
PWA · sistema
40
40 · Instalar no celular
iOS Safari + Android Chrome
50
50 · 404
Not found
Notas

Reuso do design system: tokens.css + theme-app.css + base.css + components.css são cópia direta do Conversattiva v0.3. Se algo faltar, adicione ao DS primeiro, nunca hardcode.

Sentimento vs. tom: gauge -1.0 a +1.0 = cliente (per-conversation). Chip friendly/direto/grosseira = atendente (per-conversation). Duas classificações independentes.

Wizard onboarding: picklist → free-text → LLM confirma (não é chat conversacional). Flexível em quantidade de KPIs.

Topbar mockup: _topbar.js injeta nav entre telas em modo scaffolding. NUNCA copiar essa lógica pra Blade/Vue prod.