INOVE · Mototáxi | Táxi · Redenção-PA
App Passageiro
Fluxos do usuário que pede corrida no app móvel. Mockups em frames de 320×640, paleta amarelo/preto da marca. Pagamento não é processado pela plataforma — o passageiro informa a forma (Dinheiro, PIX ou Cartão na máquina) e paga direto ao motorista.
1 · Splash & autenticação
Splash de marca (fundo preto) → login por telefone → OTP de 4 dígitos via SMS. Sem senha: o telefone é a identidade do passageiro em Redenção-PA.
Mototáxi & Táxi · Redenção-PA
INOVE
Entre com seu celular
Enviaremos um código SMS para confirmar.
Ao continuar, você aceita os Termos e a Política de Privacidade.
Código de verificação
Enviado para (94) 99123-4567
Reenviar em 0:42
Especificações · Splash & LoginRecriar exatamente
| Elemento | Dimensões | Tipografia | Cor | Fundo / Borda |
|---|---|---|---|---|
| Frame phone | 320 × 640 · raio 36px · padding 10px | — | — | #0A0A0A |
| Splash fundo | tela cheia | — | — | #0A0A0A + glow amarelo radial |
| Logo / wordmark | símbolo 72px · word 36/900 | Outfit 900 | INO branco · VE #F5C518 | — |
| Slogan | máx 220px | Outfit 500 · 13/18 | rgba(255,255,255,.7) | — |
| Barra progresso | 140 × 4px | — | trilho rgba branco .12 | fill #F5C518 ~58% |
| Campo telefone | altura 34px · ícone à esquerda | Outfit 400 · 13/18 | #0A0A0A | #fff · 1px border-strong · raio md |
| OTP boxes | 44 × 52 · gap 8px | Outfit 700 · 22px | #0A0A0A | borda 2px · filled = amarelo + yellow-50 |
| CTA Continuar / Confirmar | altura 48px (btn-lg) · 100% | Outfit 700 · 15/20 | #0A0A0A | #F5C518 |
Segurança: rate limit no envio de OTP, código com expiração curta, mensagem genérica em falha. O telefone é o único fator de autenticação no app passageiro.
2 · Home — pedir corrida
Mapa em tela cheia + bottom sheet com origem, destino, escolha Taxi vs Mototáxi (com preço estimado), forma de pagamento informativa e CTA Pedir agora.
Pagamento direto ao motorista — a INOVE não processa valores.
Especificações · Home / pedirRecriar exatamente
| Elemento | Dimensões | Tipografia | Cor | Fundo / Borda |
|---|---|---|---|---|
| Mapa (.map-fake) | flex 1 · grade 28px | — | — | #E8EDE8 + wash amarelo |
| Pin usuário | 18px + halo 8px | — | #F5C518 | borda 3px #0A0A0A |
| Pin motorista | 36px círculo | ícone 18px | ícone #F5C518 | fundo #0A0A0A |
| Sheet | raio topo 20px · padding 12/16/28 | — | — | #fff · sombra superior |
| Handle | 40 × 4 | — | — | ink-200 · centralizado |
| Vehicle card ativo | flex 1 · padding 12 | preço Outfit 800 · 18 | — | borda 2px #F5C518 · bg yellow-50 |
| Chips pagamento | pill · padding 7/10 | Outfit 600 · 12/16 | #0A0A0A | ativo: borda amarela |
| Nota pagamento | — | Outfit 400 · 11/15 | text-muted | bg-subtle · raio 10 |
| CTA Pedir agora | 48px · 100% | Outfit 700 | #0A0A0A | #F5C518 |
Preços são estimativas locais (tabela da cooperativa). O valor final pode variar conforme o trecho — comunicar no sheet se houver ajuste.
3 · Matching — buscando & motorista aceitou
Após pedir: estado de busca com cancelar. Quando um motorista aceita, banner amarelo em pulso, card do motorista (foto, nome, placa, veículo, ETA), ações de chat/ligar e lembrete da forma de pagamento.
Buscando motorista…
Mototáxi · R$ 8 · Dinheiro
Especificações · MatchingRecriar exatamente
| Elemento | Dimensões | Tipografia | Cor | Fundo / Borda |
|---|---|---|---|---|
| Spinner busca | 56px · borda 4px | — | top #F5C518 | anel rgba amarelo .25 · spin 1s |
| Pulse banner | full width · padding 10/14 | Outfit 700 · 13 | #0A0A0A | #F5C518 · anim pulseSoft |
| ETA pill | pill no mapa | Outfit 700 · 12 | texto branco · ETA amarelo | #0A0A0A · sombra |
| Avatar motorista | 52px | Outfit 700 · 16 | #F5C518 | #0A0A0A · borda 2px amarela |
| Placa | — | Outfit 700 · 12 | #0A0A0A | destaque bold no meta |
| Chat / Ligar | flex 1 · gap 8 | btn md | — | secondary / accent (preto + amarelo) |
| Cancelar | — | btn-ghost sm | text-danger | confirmação em modal antes de efetivar |
Timeout de busca sugerido: 60–90s com opção de ampliar raio ou trocar tipo de veículo. Cancelamento após aceite pode gerar aviso de taxa local (definir em requisitos).
4 · Em viagem & avaliação
Trajeto até o destino com rota no mapa. Ao finalizar, tela de avaliação por estrelas (obrigatória ou opcional — definir em requisitos) e agradecimento.
Corrida concluída!
Carlos Silva · Mototáxi
R$ 8 · Dinheiro
Como foi a corrida?
Especificações · Viagem & avaliaçãoRecriar exatamente
| Elemento | Dimensões | Tipografia | Cor | Fundo / Borda |
|---|---|---|---|---|
| Banner em viagem | full width | Outfit 700 · 13 | #F5C518 | #0A0A0A (inversão do pulse) |
| Pin destino | igual pin usuário, preto | — | #0A0A0A | halo escuro suave |
| SOS | btn accent flex 1 | — | #F5C518 | #0A0A0A · abre fluxo de emergência |
| Ícone sucesso | 64px círculo | — | check #F5C518 | yellow-50 |
| Estrelas | 40 × 40 · gap 8 | — | on: #F5C518 | on: yellow-50 + borda amarela |
| Textarea | min-height 68 | Outfit 400 · 13 | — | padrão .textarea |
| Enviar / Pular | 48px / ghost | — | — | primário amarelo · ghost neutro |
SOS deve acionar contato rápido (central / 190) e compartilhar localização. Avaliação: 1–5 estrelas; notas baixas podem abrir motivo estruturado.
5 · Chat & histórico
Chat em tempo real com o motorista (ex.: ponto de referência). Histórico de corridas com tipo, rota resumida, valor e forma de pagamento informada.
Carlos Silva
Minhas corridas
Especificações · Chat & históricoRecriar exatamente
| Elemento | Dimensões | Tipografia | Cor | Fundo / Borda |
|---|---|---|---|---|
| Bubble motorista | máx 78% · raio 14 · canto BL 4 | Outfit 400 · 13/18 | #0A0A0A | #fff · 1px border |
| Bubble passageiro | máx 78% · canto BR 4 | Outfit 400 · 13/18 | #fff | #0A0A0A |
| Timestamp | — | Outfit 400 · 10/14 | opacity .55 | — |
| Input chat | flex + btn ícone | — | — | barra branca · borda topo |
| Hist item | padding 14/16 · ícone 40 | título 500/13 · meta 11 | — | #fff · separador border |
| Ícone moto/táxi | 40 × 40 raio 12 | — | #0A0A0A | yellow-50 (moto) / ink-100 (táxi) |
| Bottom tabs | 3 itens · ícone + label 10px | Outfit 500 · 10/12 | ativo #0A0A0A | #fff · border topo |
Chat só disponível durante a corrida (do aceite até a conclusão). Histórico lista apenas corridas do usuário autenticado; canceladas com badge danger.
INOVE · App Passageiro · Redenção-PA · Pagamento fora da plataforma (Dinheiro · PIX · Cartão na máquina) · “O jeito novo de ir!”