Carregando projeto...


webapp · Gota de Cura
Projeto voluntário desenvolvido para a Gota de Cura, iniciativa sem fins lucrativos de aromaterapia cujos recursos são revertidos para os trabalhos assistenciais da Morada Espírita Prof. Lairi Hans. A plataforma reúne catálogo de dezessete prateleiras de produtos, sistema de pedidos, agendamento de visitas à Chácara da Mãe Luzia e painel de gestão para a equipe. Em 2026 o site foi reconstruído do zero sobre Next.js 16 e Tailwind CSS v4, com sistema de cor em OKLCH definido em tokens, área de blog para conteúdo editorial, publicação integral dos laudos de cromatografia por planta e grafo completo de dados estruturados para busca.
A História do Projeto
O Desafio
A Gota de Cura é uma iniciativa sem fins lucrativos de aromaterapia, com produção artesanal na Chácara da Mãe Luzia e loja física em Campinas, cujos recursos são revertidos para os trabalhos assistenciais da Morada Espírita Prof. Lairi Hans. A plataforma nasceu em 2021 para dar conta do catálogo e dos pedidos, e desde então cresceu por acréscimo: novas categorias, relatórios, cupons, controle de visitas. Cinco anos depois, a interface já não acompanhava o que o projeto tinha se tornado, e faltava ao site duas coisas que a operação passou a exigir — um canal editorial próprio e uma forma de expor publicamente os laudos que comprovam a procedência dos produtos.
A Solução
A decisão foi reconstruir em vez de remendar. Voltei aos fundamentos do produto antes de escrever qualquer linha: quem compra valoriza origem e transparência de processo, e o site não deveria parecer farmácia industrial nem e-commerce genérico. A partir daí, defini que o topo da página deixaria de vender o catálogo para convidar à loja física, que os laudos ganhariam presença de destaque e que a marca teria onde escrever com as próprias palavras.
O Processo
Reconstruí a aplicação sobre Next.js 16 com App Router, React 19 e Tailwind CSS v4, concentrando o sistema visual em tokens OKLCH declarados em um único arquivo de tema. A estratégia de cor é deliberada: o violeta da marca é tinta, preenchendo topo, faixa de laudos e rodapé, com o terracota da terra da chácara como acento. O blog roda sobre arquivos Markdown lidos do repositório, o carrinho vive no localStorage com os preços revalidados contra o Firestore a cada carregamento, e os dados estruturados foram montados como grafo, com Organization e WebSite emitidos pelo layout para que as referências por @id resolvam em qualquer página.
Os Resultados
O site atual apresenta o catálogo em dezessete prateleiras, publica os laudos de cromatografia por planta com nome científico e categoria, mantém uma área editorial com filtro por tag e organiza a visitação à chácara com datas, valores por faixa etária e inscrição. O painel da equipe segue cobrindo pedidos, produtos, visitas, cupons, laudos e relatórios, agora com o mesmo sistema visual do site público. Como projeto voluntário, a plataforma já processou mais de 1300 pedidos e continua recebendo funcionalidades novas.
+1300
Pedidos Realizados
-70%
Tempo de Gestão
100%
Alcance Nacional
Principais Funcionalidades
Catálogo por Prateleiras
Dezessete prateleiras de produtos — das águas florais aos sabonetes de argila — cada uma abrindo a lista completa com preço, descrição e disponibilidade em tempo real.
Laudos de Cromatografia
Publicação integral dos laudos laboratoriais por planta, com nome popular e científico, cadastrados pela própria equipe pelo painel de gestão.
Área Editorial
Blog alimentado por arquivos Markdown no repositório, com filtro por tag, faixa de chamada na home e dados estruturados para indexação.
Sistema de Pedidos
Fluxo de pedido em três passos, com carrinho persistido no navegador e preços revalidados contra a base a cada carregamento.
Painel da Equipe
Gestão de pedidos, produtos, visitas, cupons, laudos e relatórios de venda, com interface pensada para quem não é técnico.
Visitação à Chácara
Agendamento das manhãs na Chácara da Mãe Luzia, com datas abertas, valores por faixa etária e inscrição com confirmação por e-mail.
Capturas de Tela
Homepage reconstruída em 2026 — o convite é para a loja física na José Paulino, com endereço e horário de funcionamento logo no primeiro scroll
O catálogo organizado em dezessete prateleiras — hidrolatos, óleos essenciais, diluições e sabonetes artesanais, cada uma abrindo a lista completa com preço e disponibilidade
Os laudos de cromatografia publicados por planta, com nome científico e categoria — a procedência fica verificável sem depender da palavra da marca
A área de blog, incluída no redesign — listagem com filtro por tag e uma promessa editorial explícita: aromaterapia sem misticismo e sem promessa
Artigo aberto — o conteúdo vem de arquivos Markdown no repositório e carrega dados estruturados de BlogPosting para indexação
A visitação à Chácara da Mãe Luzia com duração, local, valores por faixa etária e as próximas datas com vagas abertas
Painel da equipe — controle de disponibilidade e estoque por produto, com preço e código, no mesmo sistema visual do site público
Versão mobile — o mesmo conteúdo do topo reorganizado em coluna única, com a tipografia e o espaçamento recalculados para a tela pequena
Listagem do blog em mobile — os filtros por tag quebram em duas linhas e o cartão do artigo se reorganiza sem perder miniatura nem metadados
Stack
Next.js 16 · React 19 · TypeScript · Tailwind CSS v4 · Firebase (Firestore) · react-hook-form · react-markdown · EmailJS · Vercel · Vercel Analytics
Projeto Voluntário · Catálogo Digital · Aromaterapia · Sem fins lucrativos · Redesign · Blog · Cromatografias · Sistema de Pedidos · Painel de Gestão · SEO · Propósito Social · Em Constante Melhoria
Depoimentos dos Usuários
“O site representa exatamente o que é a Gota de Cura: simplicidade, amor e propósito. Adriano conseguiu traduzir nossa essência e facilitar nossa rotina com o sistema de pedidos. Foi um divisor de águas para o nosso trabalho.”