FDV PWA Vendedora — Mockup HTML
Substituição direta do WhatsApp Business pra Anna, Patrícia e Clarisse. Janela de conversa premium FDV (foco 80%), inbox priorizada por SLA, voice-first, offline-first via Workbox + IndexedDB. Standalone — antes de virar código.
v0.1 · 08 mai 20265 telas · iPhone 14 Pro 390×844
VANIUS para Alessandro
Aprovação visual antes de port
A. Inbox priorizado
🔍 Buscar nome ou telefone…
Júlia Castro
09:38
📷 Foto do cabelo enviada — quer ver liso 60cm
2
Fechando · CLA me passou
Marina Rocha
09:24
🎙️ Áudio · 0:34 — "tô na dúvida entre os dois…"
1
Orçando · 280g, 55cm
Fernanda Souza
09:02
Pós-venda · pago R$ 740
Tati Silva · CLA→PAT
08:47
🤖 Clarisse: lead qualificado, quer cacheado 65cm
1
Novo · vindo do IG
Bruna Mello
Ontem
link de pagamento enviado — aguardando
Fechando · R$ 1.080
Amanda Mendes
Ontem
Orçando · perdida 7d
Renata Prado
Seg
📷 enviei a foto do produto entregue
Pós-venda · 12d
SLA dot verde/âmbar/vermelho · estágio CRM · badge Clarisse→vendedora · filtros chip horizontal · tudo rolando suave 60fps
B. Janela de conversa · CORE
Hoje · 08 mai
oi! vi seu anúncio do liso 60cm 💕
09:18
tenho sim, amor! 60cm liso premium · 280g · R$ 1.480 no PIX 💜
09:21
Liso Premium 60cm · 280g
R$ 1.480
09:21
posso usar com esse meu? 🥹
09:36
N
NIVA sugere
cabelo dela é castanho médio. Lote N-204 (cód. HCM-60-280) bate certinho. Liso premium 60cm, 280g.
↓2
+
vou ver no estoque agora pra você 💜
😊
⭐ TELA CRÍTICA. Bubbles glass FDV violet/coral · 4-state delivery · reply quote · waveform real (Wavesurfer.js) · NIVA ghost suggestion · typing indicator · FAB scroll-to-bottom
C. Hold to record · waveform live
Hoje · 08 mai
posso usar com esse meu? 🥹09:36
vou te explicar tudo direitinho num áudio rapidinho amor 💜
09:42
MediaRecorder API + Wavesurfer Record · slide-left cancela · arrasta-pra-cima trava (pode soltar) · timer mono · ghost bubble "gravando…"
D. Anexar · catálogo + foto + local
Hoje · 08 mai
posso usar com esse meu? 🥹09:36
vou te explicar tudo 💜09:42
Bottom sheet 28px round-top · "Catálogo FDV" abre lista de produtos com NIVA/Clarisse podendo sugerir · "Resposta rápida" injeta template aprovado pela Vani
E. Push notif + Add to Home
Quinta-feira, 8 maio
9:45
Júlia Castro
📷 Foto do cabelo enviada
Ver
Responder
FDV
Instalar FDV Vendas
Ícone na tela inicial · funciona offline · sem perder mensagem
Instalar
Push com Notification Actions ("Responder" abre composer direto) · install prompt A2HS aparece após 3 sessões · funciona offline via Workbox
Specs técnicas
Stack escolhida pra entregar premium em 2 semanas. Tudo testado em produção em apps reais — sem reinventar roda.
Conversa (foco 80%)
Bubbles glass FDV — branco recebida, gradient violet→coral enviada, radius 18px (4px na tail)Sequência — 1ª bubble com tail; demais perdem tail (radius 4px no canto)4 estados delivery — 🕓 fila → ✓ entregue Meta → ✓✓ recebido device → ✓✓ azul lidoReply quote — barra cyan esquerda + autor + preview 2 linhasAudio bubble — Wavesurfer.js Record, seek tap-to-position, 1x/1.5x/2xDate dividers sticky — pílula glass que "gruda" no topo enquanto rolaNIVA ghost suggestion — sugestão dashed violet só pra vendedora verTyping indicator — 3 bolinhas violet bouncing
Composer voice-first
Hold-to-record — segura mic → grava (default mode)Slide-left cancela · slide-up trava (mãos livres)Wavesurfer Record live com gradient violet→coral durante captura
Mic vira send (gradient) quando começa a digitar texto
Visual viewport API — composer "gruda" acima do teclado iOS/Android
Inbox
SLA dot verde <2h · âmbar 2-6h · vermelho >6hStage tag CRM por cor (Novo/Orçando/Fechando/Pós-venda)Filter chips com count — Tudo / Não lidas / Quentes / SLA crítico / PósLista virtualizada (react-window) — 1.000 leads sem lagBadge Clarisse→Pat quando handoff IA → vendedora
PWA / offline
Workbox Background Sync — POSTs falhos → IndexedDB queue → replay com backoffOPFS pra blobs (audio/foto) — 10× mais rápido que IDB (~90ms vs 850ms)Optimistic UI — bubble aparece local instantâneo + sync backgroundWeb Push + Action — "Responder" abre composer direto (Chromium)Web Share Target — Android: vendedora compartilha foto pra dentro do appA2HS prompt custom — após 3 sessões, antes do beforeinstallprompt
Performance alvo
LCP < 1.8s · INP < 200ms · CLS < 0.1
Bundle inicial < 200KB gzip
60fps scroll mesmo em 500+ bubbles
Lighthouse PWA score 100 / Perf > 92
O que NÃO faz nessa v0.1
Coexistence Cloud API — bloqueada (já pesquisamos)Chamadas WhatsApp — só FaceTime/Meet via deep linkStories — sem prioridade, fica pra v0.3iOS Notification Actions — limitação iOS Safari, fallback "Ver"
Mockup standalone · aprovação visual antes de virar código