Fino Trato – Site com agendamento online, CRM e brand system
Site de uma empresa de higienização de estofados de Brasília: landing page com antes e depois interativo, pedido de orçamento e agendamento online, e um painel com login Google em que a equipe acompanha leads e agendamentos e edita serviços, depoimentos, fotos e SEO. A marca também foi criada do zero.
Resumo em 30 segundos
- Senior Design Engineer
- Meu papel
- abr–out/2026
- Período
- Sozinho, do design ao deploy
- Equipe
- páginas
- 9
- tabelas no banco
- 11
- rotas de API
- 5
- commits
- 58
Identidade visual
Logo e identidade criados por mim
Logo criado em 2020. Com o site novo, a marca ganhou paleta digital, tipografia, voz e regras de uso, documentadas num guia.
Logo
Fundo claroFundo escuroConceito
Um hexágono em duas metades, azul e roxo, emoldura um sofá com gotas d’água: o serviço explicado no próprio símbolo. O nome em serifa clássica dá o tom cuidadoso do “fino trato”, e a linha de serviços em caixa alta espaçada fecha o conjunto nas mesmas duas cores.
Criação: Estevão Marques · 2020
Paleta · clique para copiar
Títulos
Fino Trato
Playfair Display
Display e títulos, com itálico nos destaques.
Interface e texto
Agendar agora
Inter
Botões, formulários e textos corridos.
Variações do logo
Horizontal 
Vertical 
Símbolo
Onde a marca aparece
Favicon
O hexágono sozinho, na aba do navegador.
Topo do site, painel e login
Logo horizontal no cabeçalho da landing page e na entrada do painel.
Guia de marca
Página com logo, paleta, tipografia, voz e regras de uso, publicada junto do site.
Faça
- Use o azul #1565C0 como cor de destaque em CTAs
- Combine Playfair Display (títulos) com Inter (corpo)
- Use o gradiente azul→roxo em banners e destaques
- Mantenha espaço de proteção ao redor da logo
- Respeite o tamanho mínimo de 120px / 32mm
- Use fotos reais de serviços com antes/depois
Evite
- Não distorça ou aplique efeitos não aprovados no logo
- Não use sobre fundos com baixo contraste
- Não misture outras fontes sem aprovação
- Não use imagens genéricas de banco de dados
- Não escreva em CAIXA ALTA excessiva
Voz da marca
A Fino Trato comunica cuidado, competência e proximidade. A linguagem une profissionalismo e acolhimento, como um especialista de confiança da família.
Personalidade
- Confiável
- Profissional
- Sofisticado
- Cuidadoso
- Acolhedor
- Transparente
Tom
- Direto e claro
- Educativo
- Próximo, não íntimo
- Aspiracional
- Sem jargões técnicos
O Desafio
A Fino Trato precisava de um site que passasse confiança a famílias de Brasília, mostrasse o resultado do serviço e transformasse a visita em pedido. A equipe também precisava acompanhar orçamentos e agendamentos sem depender de conversas soltas no WhatsApp, e a marca ainda não existia.
A Solução
Criei a marca do zero (logo, paleta, tipografia e guia de uso) e construí o site em Next.js: antes e depois interativo, pedido de orçamento e agendamento online com data e período, com aviso por e-mail a cada pedido. No painel, com login Google, a equipe acompanha leads e agendamentos num CRM e edita serviços, depoimentos, fotos e SEO sem programador.
Painel próprio
Painel feito para Fino Trato
O site manda cada pedido para o painel, e a equipe acompanha, responde e muda o conteúdo do site sem depender de ninguém.
NecessidadeOs pedidos de orçamento chegavam pelo site e se perdiam na conversa do WhatsApp.
O que foi feitoCRM com os orçamentos do site, status Pendente, Contatado e Finalizado, e WhatsApp, e-mail ou exclusão em cada linha.
Dados fictíciosNecessidadeConfirmar cada agendamento sem abrir outro programa.
O que foi feitoAba de agendamentos com data, horário e recado do cliente, e o e-mail escrito e enviado pelo próprio painel.
Dados fictíciosNecessidadeA melhor prova do serviço é o antes e depois.
O que foi feitoAs fotos de antes e depois do slider do topo do site são trocadas pelo painel, com envio por arrastar e soltar.
Dados fictíciosNecessidadeOs serviços oferecidos mudam com a época do ano.
O que foi feitoServiços com destaque, ícone, ordem e liga/desliga, editados no painel e publicados no site na hora.
Dados fictíciosNo celular
NecessidadeAcompanhar os pedidos do dia pelo celular.
O que foi feitoResumo com o total de orçamentos e agendamentos, os novos de hoje e quantos aguardam contato.
Dados fictíciosDo pedido de orçamento ao serviço feito
CRM
Orçamentos e agendamentos do site com status Pendente, Contatado e Finalizado, WhatsApp e e-mail em cada linha.
E-mail pelo painel
A equipe escreve e envia o e-mail de confirmação sem sair do painel.
Serviços
Serviços do site com destaque, ícone, ordem e liga/desliga.
Depoimentos
Depoimentos com foto ajustável, nota, bairro e serviço, cada um podendo sair do ar.
Antes e depois
As fotos do slider de antes e depois do topo do site, trocadas com arrastar e soltar.
Acesso
Entrada com a conta Google autorizada, sem senha para guardar.
Design no Figma
Do design system ao protótipo
Tecnologia
A Stack Tecnológica
Next.js
Framework de alta performance que garante URLs indexáveis pelo Google (SEO), renderização SSR e tempos de carregamento instantâneos.
React
Arquitetura baseada em componentes reativos, proporcionando uma experiência de usuário (UX) fluida e interativa, sem recarregamentos de página.
TypeScript
Adiciona tipagem estática rigorosa ao código, prevenindo erros em tempo de execução e garantindo estabilidade corporativa à aplicação.
Tailwind CSS
Design system construído sob medida. Garante exclusividade visual, consistência na interface e tamanho de arquivo otimizado para velocidade.
Prisma
Comunicação com o banco de dados ultrarrápida e segura. Previne vulnerabilidades de injeção e garante integridade dos dados do negócio.
PostgreSQL
Banco de Dados
Auth.js
Auth
Google Auth
Auth
Resend
Mídia / Email
Framer Motion
Motor de micro-animações avançado que adiciona fluidez, dinamicidade e um toque premium a cada interação do usuário.
Vercel
Infraestrutura em nuvem global na borda (Edge Network). Garante que o site carregue em milissegundos para o usuário, independente da localização.
Engenharia
Destaques Técnicos
Antes e depois interativo
O visitante arrasta o controle e vê o mesmo estofado antes e depois da higienização.
Agendamento online
Serviço, data preferida e período (manhã, tarde ou noite) escolhidos no site, com confirmação pelo WhatsApp e aviso por e-mail para a equipe a cada pedido.
CRM de leads e agendamentos
Cada pedido entra no painel com status, do primeiro contato ao serviço feito.
Painel com login Google
Acesso restrito à equipe, sem senha nova para lembrar.
Conteúdo editável
Serviços, depoimentos, fotos do topo e SEO mudam pelo painel, sem programador.
Marca criada do zero
Logo, paleta, tipografia, tokens e guia de uso documentados e aplicados no site.
O Impacto
A Fino Trato passou a ter uma marca consistente em todos os canais e um site que recebe pedidos e agendamentos a qualquer hora, com tudo registrado num painel que a própria equipe administra.
Próximo passo
Quer uma marca e um site que recebem pedidos?
Criamos a marca, o site e o painel para a sua equipe acompanhar cada pedido.