hapiix
PWA Lojista · Mapa de fluxo
hapIIx · 45 telas
PWA instalável · offline-readyNext.js 14 · Tailwind · iOS frame

Clique em qualquer card abaixo pra abrir a tela num iPhone mockup — exatamente como vai aparecer no PWA final. No celular, abra este link no Safari/Chrome e toque em "Adicionar à tela inicial" pra instalar como app.

🚪

Entrada & Auth

6 telas
01
Splash
Logo + tagline
/splash
02
Welcome
Onboarding 3 slides
/welcome
03
Login
E-mail + senha
/login
04
Registro
Dados empresa
/register
05
2FA
Código 6 dígitos
/2fa
06
Esqueci senha
E-mail recuperação
/forgot-password
🔑

Recuperação de senha

4 telas
01
Identificação
CNPJ ou e-mail
/forgot-password/identify
02
Verificar código
6 dígitos SMS/e-mail
/forgot-password/verify
03
Nova senha
Regras + força
/forgot-password/reset
04
Sucesso
Sessões encerradas
/forgot-password/success
🆔

Autenticação / KYB

6 telas
01
Autenticação Intro
3 etapas + LGPD
/kyc/intro
02
Tipo documento
RG · CNH · Passaporte
/kyc/doc-type
03
Captura doc
Câmera · frame
/kyc/capture
04
Liveness
Selfie · prova de vida
/kyc/liveness
05
Docs empresa
CS · CNPJ · endereço
/kyc/docs-empresa
06
Status análise
Até 24h · stepper
/kyc/status
🏠

Home & Notificações

2 telas
01
Home
Saldo + cotação + shortcuts
/home
02
Notificações
Central · 2 não lidas
/notifications
💸

Cobrar

4 telas
01
Tipo cobrança
Única · Link · QR fixo
/charges
02
Criar cobrança
Valor · descrição
/charges/create
03
QR gerado
QR + pix copia-cola
/charges/qr
04
Histórico
87 geradas · filtros
/charges/history
📊

Extrato

2 telas
01
Extrato
Agrupado por data
/statement
02
Detalhe
Transação completa
/statement/TX-8820
💰

Saldo & Saque

5 telas
01
Saldo + evolução
Gráfico 30D
/balance
02
Escolher saque
USD ou PIX
/withdraw
03
Saque PIX
Converter BRL
/withdraw/pix
04
Saque USD
On-chain
/withdraw/usdt
05
Andamento
Stepper 4 passos
/withdraw/status
👛

Carteiras & Contas

5 telas
01
Nova carteira
Endereço + rede
/wallets/register
02
Lista contas
PIX + TED
/accounts
03
Cadastrar PIX
CNPJ · e-mail · etc
/accounts/pix-register
04
Cadastrar conta
Banco · ag · cc
/accounts/ted-register
05
Confirmação
Microdepósito 0,01
/accounts/confirm
👤

Perfil, Segurança & Planos

3 telas
01
Perfil
Dados empresa
/profile
02
Segurança
2FA · senhas · sessões
/profile/security
03
Planos
Business · fees
/profile/plans
📜

Legal

2 telas
01
Termos de uso
v 2.4 · checkboxes
/legal/terms
02
LGPD
Consentimento
/legal/privacy
🌐

Idioma

1 tela
01
Idioma e região
5 locales · formato
/language
⚠️

Estados críticos

2 telas
01
Conta inativa
12+ meses
/inactive
02
Bloqueada · fraude
Eventos suspeitos
/blocked
🔄

Reativação

3 telas
01
Status
Motivo + saldo
/reactivate
02
Verificação
4 etapas
/reactivate/verify
03
Confirmação
Bem-vinda de volta
/reactivate/confirm