01 / Portal Recóleo
Do óleo usadoa uma novaenergia.
Um portal que transforma coleta e reciclagem em uma história visual.
O site de uma empresa que recicla óleo de cozinha: em três idiomas, com o vídeo que anda com a rolagem e um painel de 16 telas para a equipe.Site de reciclagem de óleo, em 3 idiomas, com painel próprio.
- Next.js 16.3
- React 19.3
- TypeScript 5.9
- next-intl 4.14
- GSAP 3.15
- Tailwind CSS 3.4
- next-themes 0.4
01 / Portal RecóleoDo óleo usadoa uma novaenergia.
Um portal que transforma coleta e reciclagem em uma história visual.
- Next.js 16.3
- React 19.3
- TypeScript 5.9
- next-intl 4.14
- GSAP 3.15
- Tailwind CSS 3.4
- next-themes 0.4
O site de uma empresa que recicla óleo de cozinha: em três idiomas, com o vídeo que anda com a rolagem e um painel de 16 telas para a equipe.Site de reciclagem de óleo, em 3 idiomas, com painel próprio.
- Next.js 16.3
- React 19.3
- TypeScript 5.9
- next-intl 4.14
- GSAP 3.15
- Tailwind CSS 3.4
- next-themes 0.4
Da cozinha à energia
Um vídeo que anda com a sua rolagem.
Na home do site, a história do óleo usado é contada por um vídeo que obedece ao dedo: role para baixo e ele avança, role para cima e ele volta. A tela fica presa até o fim da cena, e as frases entram na hora certa de cada corte. Role aqui para ver como é.
- Todo dia, litros de óleo de cozinha iriam pelo ralo.
- A Recóleo recolhe, de casas, escolas e restaurantes em todo o Brasil.
- Trata com controle de laboratório, protegendo nascentes e rios.
- E transforma em energia: biodiesel, e, agora, combustível de aviação.
No códigosrc/components/sections/cozinha-energia.tsx
Uma página que reage
A água responde ao seu toque.
O topo do site é uma superfície de água: o mouse (ou o dedo) passa e abre ondas, e as letras de uma palavra caem uma a uma e respingam. Esta aqui é feita do mesmo jeito, passe o ponteiro, clique ou toque. Tudo para quando a pessoa pede menos movimento no aparelho.
Passe o ponteiro ou toque na água
Água no topo
Uma simulação de ondas desenhada quadro a quadro, que reage ao mouse e ao toque.
No código
src/components/sections/HeroWater.tsxPoeira que segue o cursor
Partículas finas que fogem e voltam conforme o ponteiro passa.
No código
src/components/fx/WaterDust.tsxTexto que se monta
Os títulos chegam palavra por palavra, presos à rolagem.
No código
src/components/fx/TextSplit.tsxCartão que inclina
O cartão acompanha o ponteiro e inclina em 3D, como uma placa na mão.
No código
src/components/fx/Tilt.tsxNúmeros que contam
Os números da empresa sobem do zero quando aparecem na tela.
No código
src/components/sections/pioneirismo-stats.tsxFaixa de parceiros
As marcas correm numa faixa sem fim; um clique abre o detalhe de cada uma.
No código
src/components/sections/partners-marquee.tsx
02/Jornada da gota
Uma gota. Uma jornada inteira.
Da coleta à energia, uma narrativa visual que acompanha a rolagem.
01 / Coleta02 / Transformação03 / Nova energiaO óleo usado é coletadode casas, escolas, restaurantes
e empresas em todo o Brasil.O material coletado passa por
processos de tratamento que
o preparam para se tornar
novos combustíveis.O resultado é o biodiesel
e, agora, também o combustível
de aviação (SAF), que move
um futuro mais circular.
No fim da jornada está o motivo dela. O site mostra isso sem discurso: a pessoa arrasta a gota e vê o mesmo rio limpo e depois com o óleo jogado na pia. Arraste aqui, ou só desça, que ela anda sozinha.
Arraste a gota para os lados
Onde descartar
O ponto mais perto, em dois toques.
Quem tem óleo usado em casa quer saber uma coisa: onde levar. O site lista os pontos de coleta e deixa filtrar por tipo ou buscar pelo nome. Experimente aqui: os 23 pontos do site estão no mapa, cada um na cor da sua categoria (o mapa é desenhado, sem endereço).
23pontos na lista
- DomiciliarColeta para moradores, em casa ou no condomínio.
- SupermercadoPontos de entrega em mercados parceiros.
- PrefeituraPontos públicos, ligados às prefeituras.
- ParceiroEmpresas e instituições que recebem o óleo.
- Cada ponto é um cadastroA equipe cria, edita e esconde pontos no painel; o site atualiza na hora.
- Busca e filtro juntosO texto digitado e a categoria escolhida se somam, como aqui.
- Nos três idiomasOs nomes das categorias e os textos da página mudam com a língua do site.
Tudo chega num lugar só
Três formulários, uma caixa de entrada.
Um pedido de coleta, uma dúvida, um currículo: cada um entra pelo seu formulário, mas todos caem na mesma caixa do painel, com a etiqueta de onde vieram. A equipe não precisa caçar e-mail, abre o painel e responde. Toque ou passe o mouse num funil para ver a mensagem descer.
Seja Cliente
Para empresas que querem a coleta.
O que ele pede
- Razão social
- CNPJ
- Volume de óleo
- Contato
- Aceite dos termos
Contato
Dúvidas, elogios e pedidos gerais.
O que ele pede
- Nome
- Telefone
- Assunto
- Mensagem
Trabalhe Conosco
Para quem quer fazer parte da equipe.
O que ele pede
- Nome
- Área de interesse
- Apresentação
A caixa de entrada do painel
Cada mensagem chega com a origem; a equipe organiza do seu jeito.
- Seja ClienteColeta para um restaurante
- ContatoOnde levar o óleo de casa?
- Trabalhe ConoscoQuero trabalhar na frota
- Seja ClienteColeta para um condomínio
- ContatoComo funciona o pagamento pelo óleo?
- Marcar como lida
- Favoritar
- Arquivar
- Lixeira
- Etiquetas
- Responder por e-mail
E o Recolito no canto
O mascote abre uma conversa no WhatsApp com mensagens prontas. O número e o liga-desliga ficam no painel.
- Quero agendar uma coleta
- Onde descarto o óleo?
- Quero ser cliente
- Armadilha para robôsUm campo escondido que só robô preenche: o envio dele é descartado.
- Limite de enviosCada endereço de internet (IP) só envia algumas vezes por minuto.
- Nada se perdeCada mensagem é gravada antes da resposta de "enviado".
03/O painel
A operação também tem seu próprio centro de controle.
Conteúdo, frota, franquias e pontos de coleta em um painel feito para a equipe.
Empresa de coleta muda o tempo todo: entra um ponto novo, sai um caminhão, abre uma franquia. Aqui a própria equipe atualiza tudo, nos três idiomas, sem chamar programador, são 16 telas, cada uma uma bombona nesta prateleira. Toque ou passe o mouse para encher.
Visão geral
- 01PainelO resumo de tudo, logo na entrada.
- 02MensagensA caixa de entrada dos formulários.
Conteúdo
- 03Seções da homeLiga, desliga e reordena as 11 partes.
- 04Editor de seçãoO texto de uma parte, nos 3 idiomas.
- 05PáginasOs textos de cada página.
- 06NotíciasAs novidades da empresa.
- 07PublicaçõesMateriais para ler e baixar.
Estrutura
- 08NavegaçãoOs itens do menu.
- 09RodapéO que aparece no pé do site.
Negócio
- 10ParceirosAs marcas da faixa da home.
- 11FrotaOs veículos e as fotos.
- 12FranquiasAs unidades da rede.
- 13Pontos de coletaOs lugares onde descartar.
Sistema
- 14ConfiguraçõesContatos, redes e o aviso do topo.
- 15SenhaA troca da senha do painel.
- 16BackupAs cópias, com a volta a uma delas.
- Senha bem guardadaEmbaralhada com o scrypt, na receita que a OWASP recomenda.
- Sessão de 8 horasDepois disso, entra de novo; trocar a senha derruba todas as sessões.
- 5 códigos de resgatePara quando a senha se perde, com limite de tentativas por minuto.
- Arquivo conferidoO envio aceita até 5 MB e confere o tipo real pelos primeiros bytes.
- Histórico de mudançasCada alteração do painel fica registrada (auditoria).
- Até 20 cópiasCada coleção guarda as suas últimas 20 versões, com data.
Por baixo do site
O que ninguém vê, camada por camada.
Um site de empresa vive de ser encontrado, entendido e lido por qualquer pessoa. Isso não aparece na tela, mora por baixo, em camadas. Desça para elas assentarem; toque ou passe o mouse num item para ver a camada dele.
- 3idiomasPortuguês, inglês e espanhol, cada um com o seu endereço (/pt, /en, /es) e 1.155 textos.
- Tradução no painelUm botão passa o texto novo do português para inglês e espanhol (pelo serviço MyMemory).
- Claro e escuroO site e o painel têm os dois temas; o escuro é o padrão.
- 12endereços antigosAs páginas do site anterior levam às novas (redirecionamento 301): ninguém cai em página vazia.
- Mapa do siteO sitemap e o robots dizem ao Google o que existe e o que deve ser lido.
- Dados estruturadosA empresa é descrita no formato do schema.org, para os buscadores entenderem quem ela é.
- Menos movimentoQuem pede menos animação no aparelho vê o site parado e inteiro.
As tecnologias
Do que é feito, peça por peça
O site institucional de uma empresa de reciclagem de óleo, com painel próprio e sem banco de dados: o conteúdo mora em arquivos, gravados com cuidado para nunca corromper. Escolha uma peça para ver o que ela faz aqui e em que arquivo está.
16tecnologias, em 4 camadas
Tela
Idiomas
Dados
Integrações
As telas
O site inteiro, pelo cano.
O site, o painel e o celular, nos temas escuro e claro. Desça: as telas correm pela tubulação e acendem quando a gota passa. Clique numa para ver grande.
- O site
- O painel
- No celular
Sites e experiências webDr. Filipe Carvalho