Next WaveNEXT WAVE
Todos os cases
Logo 88 Car Club
Comunidade · Clube automotivo2026

88 Car Club: Site de clube automotivo com adesão de membro fechada no WhatsApp

O 88 Car Club é uma entidade sem fins lucrativos que reúne apaixonados por carros. A entrada no clube já acontecia pelo WhatsApp, na conversa com o pessoal do clube — o que faltava era um lugar público que explicasse o que é o clube, quanto custa e o que o membro leva.

Em vez de empurrar um e-commerce com carrinho e gateway para uma operação que fatura R$15 por mês, o site leva o interessado até o fim da escolha — cor e tamanho da camiseta, plano — e entrega essa escolha montada na mensagem. Quem atende recebe o pedido pronto, sem ida e volta de perguntas.

Visitar o site no ar

O que foi construído

01

Landing do clube

A página que responde as três perguntas de quem chega pelo Instagram: o que é, como entra e o que eu ganho.

  • Hero com encontro noturno, valor a partir de R$15/mês e link direto para o Instagram do clube
  • Seção de essência com os valores e as regras do clube — inclusive eventos sem álcool e opção vegana
  • Como se tornar membro em três passos: camiseta, plano e grupo no WhatsApp
  • Oito vantagens de ser Amigo 88, de desconto com parceiro a campeonato de kart
02

Planos de associação

Bronze, Prata e Ouro lado a lado, com o plano do meio destacado como o mais escolhido.

  • Cada plano lista o que soma em relação ao anterior, sem repetir a lista inteira
  • Destaque visual no plano recomendado
  • Todos os planos levam ao mesmo fluxo de adesão
03

Personalizador da camiseta

Tela dividida: de um lado a camiseta, do outro as escolhas. A entrada no clube começa aqui.

  • Três cores (preto, branco e azul) e seis tamanhos, de PP a XG
  • O fundo da tela assume a cor da camiseta escolhida, com transição suave
  • Lembrete da mensalidade antes de finalizar, para ninguém ser pego de surpresa
  • Botão de finalizar só libera depois que o tamanho é escolhido
04

Vitrine de parceiros

Página própria para os prestadores parceiros e a condição especial que cada um dá ao membro.

  • Card com capa, categoria, desconto em destaque e resumo da descrição
  • Modal com o texto completo, carrossel de fotos e links para Instagram e site
  • Estado de espera pronto para quando ainda não há parceiro anunciado
  • Cadastro de parceiro em arquivo versionado — entra parceiro novo sem mexer em layout
05

Captação de patrocinador

A mesma página que mostra parceiro também recruta o próximo, com o argumento e o formulário juntos.

  • Segmentos que o clube procura: oficina, estética, rodas, performance, seguradora e lava-rápido
  • Quatro motivos para patrocinar: visibilidade, presença nos encontros, divulgação e cliente real
  • Formulário de empresa, segmento e responsável que vira mensagem de WhatsApp identificada
  • Formulário fixo na lateral enquanto o argumento rola na tela
06

Base do site em arquivo

Número de WhatsApp, preço, redes, cores da camiseta e parceiros ficam em um lugar só.

  • Configuração central do clube, usada por todas as páginas
  • Trocar preço ou número de contato é uma linha, não uma caça pelo código
  • Sem banco de dados e sem painel para manter — publicação na Vercel
  • Metadados, manifest, ícones e analytics configurados desde o primeiro deploy

Decisões que fizeram diferença

O checkout é a conversa que o clube já tinha

Não existe carrinho nem gateway: a escolha de cor, tamanho e plano vira o texto da mensagem de WhatsApp. Para uma mensalidade de R$15, montar cobrança automática custaria mais atenção do que resolve — e o clube já atendia por lá.

A mensagem nunca chega pela metade

O botão de finalizar fica desabilitado até o tamanho ser escolhido, e o rótulo diz o que falta. Assim o clube não recebe pedido sem tamanho, que é a pergunta que mais atrasaria o atendimento.

Trocar a cor não recarrega imagem

As três fotos da camiseta ficam empilhadas no mesmo lugar e só a opacidade muda entre elas. A troca é instantânea mesmo no celular, sem o piscar de quem baixa a imagem na hora do clique.

O card de parceiro só abre quando tem o que mostrar

O 'Ver mais' aparece se a descrição foi cortada ou se há fotos no carrossel. Parceiro com texto curto e sem foto não ganha um modal vazio.

Uma arte de logo serve aos dois fundos

A marca original é preta e o site é escuro. Em vez de manter duas versões do arquivo para desencontrar depois, a inversão é feita por CSS na hora de exibir.

Tecnologias usadas

  • Next.js
  • React
  • TypeScript
  • Tailwind CSS
  • Base UI
  • shadcn
  • Vercel

Seu negócio precisa de algo parecido?

Nem todo projeto precisa de tudo isso de uma vez. A gente começa pelo que destrava sua operação e vai somando.

Falar com a gente