AN
Todos os projetos
Profissionais2025/10

Vitte Climatização

Site institucional completo, em produção

React 19TypeScriptViteReact RouterTanStack QueryStyled Components
Página inicial do site da Vitte Climatização

O desafio

Uma empresa de climatização precisava de presença digital própria — até então dependia apenas de redes sociais e indicação boca a boca.

O objetivo não era ter "um site", e sim uma ferramenta de conversão: aparecer no Google quando alguém da região busca por instalação de ar-condicionado, e transformar essa visita em contato pelo WhatsApp.

O que eu fiz

01

Design e desenvolvimento completos

Do wireframe no Figma ao deploy em produção na Vercel, incluindo a definição da identidade visual e a estrutura de conteúdo.

02

Arquitetura em Atomic Design

Componentes organizados em átomos, moléculas e organismos, com Design System próprio (tokens de cor, tipografia e breakpoints centralizados).

03

SEO técnico

Open Graph, Twitter Cards e dados estruturados. Para um negócio local, ser encontrado é a função principal do site — SEO aqui não é detalhe, é o produto.

04

PWA e automação de qualidade

Aplicação instalável com suporte offline, e scripts de verificação (ESLint + Prettier) que impedem código fora do padrão de chegar à branch principal.

Galeria

Home em desktop
Catálogo de serviços
Marcas atendidas
Seção institucional
Depoimentos de clientes
Contato com mapa e formulário
Rota da loja
Rodapé, com a assinatura da Studway
Home em celular
Serviços em celular

Decisões técnicas

Vite em vez de Next.js

O site é essencialmente estático e não precisa de renderização no servidor. Vite entrega build mais rápido e bundle menor. Escolher a ferramenta pelo problema, e não pela moda, faz parte do trabalho.

TanStack React Query

Usado para cache e sincronização dos dados vindos da API, evitando requisições repetidas e mantendo a interface responsiva mesmo em conexões instáveis.

Componente de conversão

O botão flutuante de WhatsApp acompanha o usuário em toda a navegação, com mensagem pré-preenchida — reduz o atrito entre "gostei" e "vou falar com eles".

É o projeto mais maduro do portfólio: está em produção, com preocupações que só aparecem em software real — performance, indexação, monitoramento e manutenção.