Central Praia: imagens para UX

Paleta sem verde. PNG original com transparência e WebP em 320, 640 e 1100 px.
Geração pela ferramenta nativa de imagens. Prompts completos em prompts.json.

Produto: guia de arenas de areia. Público: jogadores escolhendo onde e com quem jogar.
Objetivo: apoiar a decisão, apresentar ações e orientar a recuperação de uma busca vazia.

Aplicações:

Encontrar uma arena (arena-discovery)
O mapa ajuda a apresentar a busca por localização. Funciona ao lado do texto na abertura da busca, com 240 a 360 px no desktop e até 160 px no celular.
Exemplo de título: Tem areia perto de você.
Exemplo de texto: Escolha a região e descubra onde jogar.
Ação: Encontrar arenas
Alt quando a imagem informa: Mapa dobrado com marcador coral e bola amarela

Escolher o esporte (choose-your-sport)
Apresenta o universo dos esportes antes das perguntas. No quiz horizontal, use de forma compacta, sem ocupar o espaço das opções. Cada opção continua com seu nome e ícone próprio.
Exemplo de título: Qual é a sua praia?
Exemplo de texto: Beach tennis, vôlei ou futevôlei? Comece pelo que você quer jogar.
Ação: Escolher meu esporte
Alt quando a imagem informa: Raquete amarela de beach tennis ao lado de duas bolas

Chamar a turma (bring-your-crew)
A bolsa com garrafas sugere um passeio em grupo. Pode apoiar o compartilhamento no perfil da arena. Não representa presenças ou confirmações de pessoas.
Exemplo de título: Já sabe quem vai com você?
Exemplo de texto: Escolha uma arena e mande o link para a turma combinar o jogo.
Ação: Ver arenas para compartilhar
Alt quando a imagem informa: Bolsa coral com três garrafas, toalha e bola de vôlei

Busca sem resultados (search-empty)
A lupa acompanha uma orientação clara. Use entre 96 e 144 px, com o botão de ajuste visível. Esse estado só aparece quando a busca retornar zero resultados.
Exemplo de título: Vamos tentar outra combinação?
Exemplo de texto: Não encontramos arenas com esses filtros. Tente outro bairro ou retire uma preferência.
Ação: Ajustar busca
Alt quando a imagem informa: Lupa lavanda sobre uma pequena porção de areia com pegadas

Regras de aplicação:
Uma imagem principal por bloco. Em listas de arenas, as fotos reais continuam sendo o foco.
No celular, reduza a ilustração antes de empurrar a pergunta ou o botão para baixo.
Mantenha títulos e botões fora da imagem para preservar leitura, tradução e acessibilidade.
Use imagens menores nos estados vazios. A próxima ação precisa chamar mais atenção.
As imagens apoiam a interface. Labels, mensagens e estados dos controles continuam em texto.
Movimento pode entrar em uma transição curta, sem animação contínua durante a busca.

Acessibilidade: use alt vazio quando a imagem apenas repetir a mensagem ao lado. Reserve espaço com width/height e use object-fit: contain para não cortar o recorte. Carregue imagens fora da primeira tela com lazy loading.
Os exemplos são sugestões de aplicação, sem alteração da home ou dos perfis. As imagens não representam arenas reais nem confirmam presença, reserva ou pagamento.
