PROESP

O desafio

A Associação Protetora da Diversidade das Espécies atua há quase cinco décadas com plantio de mudas, educação ambiental e defesa da Mata de Santa Genebra. Mas não tinha um site à altura dessa história, nem um caminho claro para quem quisesse doar ou virar voluntário.

Para uma ONG, isso é perda direta: sem canal, o apoio que existe não chega.

O que fiz

Assumi o projeto do começo ao fim, sozinho: design e código.

Arquitetura de conteúdo. Organizei o site em História, Estatuto, Projetos e Transparência. Essa última foi decisão deliberada: em ONG, transparência não é burocracia, é o que converte doador. Quem doa quer saber para onde vai o dinheiro.

Identidade visual. Verde da mata como cor condutora, fotografia real das áreas preservadas e tipografia de peso alto nos títulos, passando solidez, coerente com uma instituição de 49 anos.

Duas ações, sem fricção. Todo o site conduz a dois destinos: doar via PIX e se inscrever como voluntário, com formulário próprio. O CTA "Seja voluntário/doar" fica fixo na navegação, sempre a um clique.

Mobile em primeiro lugar. A maior parte do tráfego chega pelo Instagram, então o site foi construído para o celular antes do desktop.

Resultado

A PROESP passou a ter uma presença digital compatível com o trabalho que faz há quase 50 anos, com canais de doação e voluntariado funcionando, e um espaço próprio para prestar contas do que realiza.

Tecnologias envolvidas

Figma. Protótipo da nova página.

Figma MCP com Claude Code. Ligação entre design e código, gerando as telas a partir do próprio arquivo do Figma.

shadcn/ui. Biblioteca de componentes da interface.

Next.js. Front-end da nova versão.

Vercel. Hospedagem do ambiente, sem custo de infraestrutura.

Vercel Analytics. Implementado para gestão e análise de tráfego de usuários e comportamento, gerando relatórios para a organização.