Uma plataforma para conectar marca, alunos e gestão
A Box One Hybrid é um centro de treinamento híbrido premium em Maringá–PR. O projeto reuniu presença digital, captação de interessados, organização das turmas, relacionamento com alunos e loja oficial em uma mesma plataforma.
A proposta foi traduzir o posicionamento da marca em uma experiência que também desse suporte ao dia a dia do negócio: conhecer as modalidades, escolher uma aula experimental, acompanhar os interessados e administrar a operação.
Minha atuação conectou visão de negócio, desenho dos fluxos e construção da solução com Lovable, integrando a jornada comercial às rotinas de atendimento e gestão.
O desafio: transformar interesse em uma jornada organizada
O relacionamento com um futuro aluno começa antes da matrícula. Ele precisa entender a proposta do centro de treinamento, encontrar uma modalidade compatível e escolher um horário para experimentar. Do outro lado, a equipe precisa receber esse interesse com informações suficientes para dar continuidade ao atendimento.
A plataforma foi desenhada para conectar esses momentos à gestão de turmas, alunos e mensalidades. A loja oficial acrescenta outra frente de relacionamento e receita, com regras próprias de produtos, estoque, descontos e pagamento.
O foco do projeto foi organizar essas jornadas em uma estrutura comum, com autonomia para a equipe atualizar conteúdo e conduzir a operação.
Uma experiência digital à altura do posicionamento da marca
A identidade visual combina fundo escuro, tipografia esportiva de alto impacto e acentos em verde-lima. O vídeo de abertura tem imagem estática inicial e controles de reprodução pensados para equilibrar presença visual e carregamento.
Páginas dedicadas apresentam treinamento híbrido, HYROX, crosstraining, corrida, o Método Box One e o trabalho do Head Coach Rafael Casagrande. A equipe pode atualizar textos, imagens e vídeos pelo painel.
O blog permite organizar conteúdos por autor e categoria. Quando não há artigos publicados, seus links ficam ocultos, evitando uma experiência com seções vazias. A estrutura de busca e compartilhamento complementa a apresentação da marca nos canais digitais.
Da aula experimental à matrícula, com continuidade
O visitante pode solicitar uma aula experimental informando modalidade e período de interesse ou escolher um horário disponível diretamente na grade pública. O WhatsApp complementa o contato com mensagens previamente organizadas.
No painel, os cadastros ficam separados entre interessados, matriculados e profissionais. A equipe pode filtrar os contatos, identificar novos interessados e iniciar uma conversa pelo WhatsApp.
A conversão de interessado em aluno preserva seu histórico e permite atribuir turmas sem criar outro cadastro. A gestão dos horários indica quais aulas recebem novos visitantes e sinaliza quando uma turma ultrapassa a capacidade ideal definida.
Essa continuidade dá à equipe uma referência comum para acompanhar o atendimento e organizar a ocupação das aulas.
Uma loja oficial com regras para cada momento da oferta
O catálogo contempla produtos em pré-lançamento, disponíveis para compra, em lista de espera e esgotados. As variações atendem itens com gênero e tamanho, acessórios sem grade e inscrições esportivas individuais ou em dupla.
O checkout integrado ao Mercado Pago oferece Pix, cartão e boleto. Cupons podem seguir regras de validade, uso e valor mínimo de pedido. Após a confirmação, o comprador recebe um comprovante digital com os detalhes da compra e as instruções de retirada na unidade.
A confirmação de pagamento combina notificações do provedor com consulta no retorno do cliente. A lógica evita repetir a baixa de estoque quando o mesmo pagamento é processado novamente, e a equipe dispõe de verificação manual de status no painel.
Autonomia para operar e visibilidade conforme a responsabilidade
A administração reúne alunos, interessados, turmas, horários, mensalidades, pedidos e conteúdo. Os horários podem ser cadastrados em lote por dia da semana, e o acompanhamento financeiro dos alunos distingue meses pagos e pendentes.
As permissões diferenciam a operação dos dados financeiros reservados ao proprietário. Assim, o acesso necessário para manter a plataforma não exige que todas as contas visualizem faturamento e custos.
O valor da entrega está na conexão entre a experiência pública e os bastidores do negócio: a mesma estrutura que apresenta a marca também apoia a captação, a matrícula, a organização das aulas e a venda de produtos. A equipe mantém autonomia para atualizar o site sem depender de uma nova publicação de código.
Arquitetura e detalhes técnicos
ARQUITETURA FULL-STACK E EDGE
TanStack Start v1 com React 19, renderização no servidor (SSR) e execução no Cloudflare Workers. Tailwind CSS v4 na interface. Backend no Lovable Cloud com PostgreSQL, Supabase Auth, Edge Functions e Storage.
IDENTIDADE E MÍDIA
Design dark-first, superfícies em grafite. Barlow Condensed nos títulos e Inter na leitura. Hero com vídeo assíncrono WebM, alternativa MP4 e imagem estática inicial. A reprodução pausa quando o componente sai da área visível ou a aba perde atividade, com mídias substituíveis pelo CMS. Esses recursos foram concebidos para reduzir o impacto do vídeo no carregamento e no uso de recursos.
CAPTAÇÃO E GESTÃO
Formulários com validação e máscara telefônica brasileira. Grade pública com agendamento por horário. CRM com segmentação de interessados, matriculados e profissionais, preservação de histórico na matrícula, filtros, paginação e indicação de cadastros ainda não visualizados. Cadastro de horários em lote com intervalos de 15 minutos, capacidade de turmas e controle de mensalidades.
CATÁLOGO, CUPONS E PEDIDOS
Quatro estados comerciais de produto, variações por gênero e tamanho de PP a 5G, itens sem grade e modalidades de inscrição individual ou em dupla. Validação de cupons no cliente e no servidor, com normalização de código e limitação de tentativas. Snapshot de preço e atributos no pedido para preservar os dados da compra após alterações no catálogo.
PAGAMENTOS E CONSISTÊNCIA TRANSACIONAL
Mercado Pago Checkout Pro para Pix, cartão e boleto. Confirmação por webhook e reconciliação no retorno do comprador. Processamento idempotente para evitar baixa duplicada de estoque. Consulta manual de status disponível à gestão e comprovante digital com identificação do pedido, variação, desconto e orientações de retirada.
ACESSO E PRIVACIDADE
Autenticação com Supabase Auth e controle de acesso por papéis, apoiado em políticas de Row-Level Security (RLS) no PostgreSQL. Fluxo de troca de senha no primeiro acesso. Permissões específicas restringem a visualização de faturamento, custos e dados financeiros à conta do proprietário, distinguindo-os do acesso operacional.
CONTEÚDO, SEO E DESCOBERTA
CMS para páginas, modalidades, autores, categorias, artigos e mídias. Ocultamento da navegação do blog quando não há artigos publicados. Dados estruturados Schema.org em JSON-LD, Open Graph dinâmico, sitemap.xml, robots.txt e llms.txt. Banner de cookies e medição anônima de acessos.
TESTES AUTOMATIZADOS
Testes de unidade com Vitest cobrem lógica crítica de cupons e regras de negócio.