01 / Portal Recóleo
Del aceite usadoa una nuevaenergía.
Un portal que convierte la recolección y el reciclaje en una historia visual.
El sitio de una empresa que recicla aceite de cocina: en tres idiomas, con el video que avanza con el scroll y un panel de 16 pantallas para el equipo.Sitio de reciclaje de aceite, en 3 idiomas, con panel propio.
- 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óleoDel aceite usadoa una nuevaenergía.
Un portal que convierte la recolección y el reciclaje en una historia 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
El sitio de una empresa que recicla aceite de cocina: en tres idiomas, con el video que avanza con el scroll y un panel de 16 pantallas para el equipo.Sitio de reciclaje de aceite, en 3 idiomas, con panel propio.
- 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
De la cocina a la energía
Un video que avanza con tu scroll.
En la home del sitio, la historia del aceite usado la cuenta un video que obedece al dedo: baja y avanza, sube y retrocede. La pantalla queda fija hasta el final de la escena, y las frases entran justo en cada corte. Haz scroll aquí para verlo.
- Todos los días, litros de aceite de cocina se irían por el desagüe.
- Recóleo lo recoge, de casas, escuelas y restaurantes en todo Brasil.
- Lo trata con control de laboratorio, protegiendo nacientes y ríos.
- Y lo transforma en energía: biodiésel, y ahora combustible de aviación.
En el códigosrc/components/sections/cozinha-energia.tsx
Una página que reacciona
El agua responde a tu toque.
La parte de arriba del sitio es una superficie de agua: el mouse (o el dedo) pasa y abre ondas, y las letras de una palabra caen una a una y salpican. Esta está hecha igual, toca o pasa el puntero, haz clic o toca. Todo se detiene cuando el aparato pide menos movimiento.
Toca o pasa el puntero o toca el agua
Agua arriba
Una simulación de ondas dibujada cuadro a cuadro, que reacciona al mouse y al toque.
En el código
src/components/sections/HeroWater.tsxPolvo que sigue al cursor
Partículas finas que se alejan y vuelven cuando toca o pasa el puntero.
En el código
src/components/fx/WaterDust.tsxTexto que se arma
Los títulos llegan palabra por palabra, atados al scroll.
En el código
src/components/fx/TextSplit.tsxTarjeta que se inclina
La tarjeta sigue al puntero y se inclina en 3D, como un cartel en la mano.
En el código
src/components/fx/Tilt.tsxNúmeros que cuentan
Los números de la empresa suben desde cero al aparecer en pantalla.
En el código
src/components/sections/pioneirismo-stats.tsxFranja de socios
Las marcas corren en una franja sin fin; un clic abre el detalle de cada una.
En el código
src/components/sections/partners-marquee.tsx
02/El viaje de la gota
Una gota. Un viaje entero.
De la recolección a la energía, una narrativa visual que sigue el scroll.
01 / Recolección02 / Transformación03 / Nueva energíaEl aceite usado se recolectade casas, escuelas, restaurantes
y empresas en todo Brasil.El material recolectado pasa por
procesos de tratamiento que
lo preparan para convertirse
en nuevos combustibles.El resultado es el biodiésel
y ahora también el combustible
de aviación (SAF), que mueve
un futuro más circular.
Al final del viaje está su razón. El sitio lo muestra sin discurso: arrastras la gota y ves el mismo río limpio y luego con el aceite tirado en la pileta. Arrástrala aquí, o solo baja, que se mueve sola.
Arrastra la gota hacia los lados
Dónde descartar
El punto más cercano, en dos toques.
Quien tiene aceite usado en casa quiere saber una cosa: dónde llevarlo. El sitio lista los puntos de recolección y deja filtrar por tipo o buscar por nombre. Pruébalo aquí: los 23 puntos del sitio están en el mapa, cada uno en el color de su categoría (el mapa es dibujado, sin dirección).
23puntos en la lista
- DomiciliarioRecolección para vecinos, en casa o en el edificio.
- SupermercadoPuntos de entrega en mercados socios.
- MunicipioPuntos públicos, junto a los municipios.
- SocioEmpresas e instituciones que reciben el aceite.
- Cada punto es un registroEl equipo crea, edita y oculta puntos en el panel; el sitio se actualiza al instante.
- Búsqueda y filtro juntosEl texto escrito y la categoría elegida se suman, como aquí.
- En tres idiomasLos nombres de las categorías y los textos de la página cambian con el idioma del sitio.
Todo llega a un solo lugar
Tres formularios, una bandeja de entrada.
Un pedido de recolección, una duda, un currículum: cada uno entra por su formulario, pero todos caen en la misma bandeja del panel, con la etiqueta de dónde vinieron. El equipo no necesita buscar correos, abre el panel y responde. Toca o pasa el mouse por un embudo para ver bajar el mensaje.
Sea Cliente
Para empresas que quieren la recolección.
Lo que pide
- Razón social
- Identificación fiscal
- Volumen de aceite
- Contacto
- Aceptación de términos
Contacto
Dudas, elogios y pedidos generales.
Lo que pide
- Nombre
- Correo
- Teléfono
- Asunto
- Mensaje
Trabaje con Nosotros
Para quien quiere ser parte del equipo.
Lo que pide
- Nombre
- Correo
- Área de interés
- Presentación
La bandeja del panel
Cada mensaje llega con su origen; el equipo lo organiza a su manera.
- Sea ClienteRecolección para un restaurante
- Contacto¿Dónde llevo el aceite de casa?
- Trabaje con NosotrosQuiero trabajar en la flota
- Sea ClienteRecolección para un edificio
- Contacto¿Cómo funciona el pago por el aceite?
- Marcar como leído
- Favorito
- Archivar
- Papelera
- Etiquetas
- Responder por correo
Y Recolito en la esquina
La mascota abre una conversación en WhatsApp con mensajes listos. El número y el encendido quedan en el panel.
- Quiero agendar una recolección
- ¿Dónde descarto el aceite?
- Quiero ser cliente
- Trampa para robotsUn campo oculto que solo un robot completa: su envío se descarta.
- Límite de envíosCada dirección de internet (IP) solo envía algunas veces por minuto.
- Nada se pierdeCada mensaje se graba antes de la respuesta de "enviado".
03/El panel
La operación también tiene su propio centro de control.
Contenido, flota, franquicias y puntos de recolección en un panel hecho para el equipo.
Una empresa de recolección cambia todo el tiempo: entra un punto nuevo, sale un camión, abre una franquicia. Aquí el propio equipo actualiza todo, en los tres idiomas, sin llamar a un programador, son 16 pantallas, cada una un bidón en este estante. Toca o pasa el mouse para llenarlo.
Visión general
- 01PanelEl resumen de todo, al entrar.
- 02MensajesLa bandeja de los formularios.
Contenido
- 03Secciones de la homeEnciende, apaga y reordena las 11 partes.
- 04Editor de secciónEl texto de una parte, en 3 idiomas.
- 05PáginasLos textos de cada página.
- 06NoticiasLas novedades de la empresa.
- 07PublicacionesMateriales para leer y descargar.
Estructura
- 08NavegaciónLos ítems del menú.
- 09Pie de páginaLo que aparece al pie del sitio.
Negocio
- 10SociosLas marcas de la franja de la home.
- 11FlotaLos vehículos y las fotos.
- 12FranquiciasLas unidades de la red.
- 13Puntos de recolecciónDónde descartar.
Sistema
- 14ConfiguraciónContactos, redes y el aviso de arriba.
- 15ContraseñaEl cambio de la contraseña del panel.
- 16CopiasLas copias, con la vuelta a cualquiera.
- Contraseña bien guardadaCifrada con scrypt, con la receta que recomienda OWASP.
- Sesión de 8 horasDespués, se entra de nuevo; cambiar la contraseña cierra todas las sesiones.
- 5 códigos de rescatePara cuando se pierde la contraseña, con límite de intentos por minuto.
- Archivo revisadoSe aceptan hasta 5 MB y se revisa el tipo real por los primeros bytes.
- Historial de cambiosCada cambio del panel queda registrado (auditoría).
- Hasta 20 copiasCada colección guarda sus últimas 20 versiones, con fecha.
Debajo del sitio
Lo que nadie ve, capa por capa.
Un sitio de empresa vive de ser encontrado, entendido y leído por cualquiera. Eso no aparece en pantalla, vive debajo, en capas. Baja para que se asienten; toca o pasa el mouse por un ítem para ver su capa.
- 3idiomasPortugués, inglés y español, cada uno con su dirección (/pt, /en, /es) y 1.155 textos.
- Traducción en el panelUn botón pasa el texto nuevo del portugués al inglés y al español (con el servicio MyMemory).
- Claro y oscuroEl sitio y el panel tienen los dos temas; el oscuro es el predeterminado.
- 12direcciones antiguasLas páginas del sitio anterior llevan a las nuevas (redirección 301): nadie cae en una página vacía.
- Mapa del sitioEl sitemap y el robots le dicen a Google qué existe y qué leer.
- Datos estructuradosLa empresa se describe en formato schema.org, para que los buscadores entiendan quién es.
- Menos movimientoQuien pide menos animación en su aparato ve el sitio quieto y completo.
Las tecnologías
De qué está hecho, pieza por pieza
El sitio institucional de una empresa de reciclaje de aceite, con panel propio y sin base de datos: el contenido vive en archivos, grabados con cuidado para que nunca se corrompan. Elige una pieza para ver qué hace aquí y en qué archivo está.
16tecnologías, en 4 capas
Pantalla
Idiomas
Datos
Integraciones
Las pantallas
El sitio entero, por la tubería.
El sitio, el panel y el celular, en los temas oscuro y claro. Baja: las pantallas corren por la tubería y se encienden cuando pasa la gota. Haz clic en una para verla grande.
- El sitio
- El panel
- En el celular
Sitios y experiencias webDr. Filipe Carvalho