Sitio web de una firma de auditoría y contabilidad de Brasilia, construido sobre el símbolo de la marca, con un panel propio para que el equipo edite textos, fotos y contactos sin depender de un programador.
En pocas palabras
Los sitios de contabilidad suelen parecerse entre sí, y Veritas necesitaba mostrar rigor técnico desde el primer contacto, tanto a empresas como a condominios. El equipo también necesitaba mantener el sitio por su cuenta: cambiar textos y fotos, actualizar contactos y hacer seguimiento de las solicitudes de propuesta.
Partimos del propio símbolo de la marca. En la apertura, una foto de Brasilia aparece dentro de las franjas de la “V”. Los cuatro servicios se convierten en cuatro franjas, cada una del color de una franja del símbolo. Detalles de los papeles de trabajo del auditor (rayado, números en fuente monoespaciada y marcas de verificación) unen la identidad. Detrás, un panel propio edita cada sección del sitio y organiza los contactos recibidos.
Qué se entregó
Tres momentos del sitio, tal como están en línea.
Una foto de Brasilia aparece dentro de las franjas del símbolo de la marca. A medida que el visitante se desplaza, la V crece hasta que la foto ocupa toda la pantalla.
Cada servicio es una franja con su propia foto, del color de la franja correspondiente de la V. Al pasar el ratón, la franja se abre y muestra lo que incluye, con el botón de propuesta.
Para administradores y comités de control, una rendición de cuentas de ejemplo con lupa: al mover el cursor, el visitante ve cómo se revisa cada asiento, con marcas de revisado y pendiente.
Panel propio
Los textos, las fotos y los contactos se editan en el panel. Si la base de datos falla, el sitio sigue en línea con el contenido por defecto.
La necesidadEl equipo quiere cambiar textos y fotos del sitio sin llamar a un programador.
Lo que se hizoCada sección del sitio en su propio formulario, con la foto reducida antes del envío. Guardar actualiza el sitio al instante, y "Texto original" deshace el cambio.
Datos ficticiosLa necesidadPublicar artículos con el estilo del sitio, sin romper el diseño.
Lo que se hizoEditor visual con subtítulos, listas, enlaces, fotos y recuadro destacado, borrador, vista previa y la firma de quien escribió.
Datos ficticiosLa necesidadNinguna solicitud del formulario puede quedar sin respuesta.
Lo que se hizoBandeja de contactos con nuevos, atendidos y archivados, respuesta por WhatsApp en un clic y eliminación automática después de 12 meses, según la ley brasileña de protección de datos (LGPD).
Datos ficticiosEn el móvil
La necesidadQuien es de Veritas y no mantiene el sitio necesita ver solo lo importante del día.
Lo que se hizoRol "Equipo Veritas" con su propia página de inicio: contactos esperando respuesta, noticias y un atajo de ayuda con EM por WhatsApp.
Datos ficticiosCada sección es editable: portada, servicios, condominios, etapas, preguntas frecuentes y contacto. Guardar actualiza el sitio al instante, y el botón “Texto original” deshace el cambio.
Las fotos se reducen en el navegador antes de subirlas y se convierten a WebP en el servidor. Las que ninguna sección usa se borran después de un día.
Cada envío del formulario queda guardado como nuevo, atendido o archivado, con aviso opcional por correo.
Una página de privacidad armada con los datos de la sección Contacto. Los contactos recibidos se borran automáticamente a los 12 meses.
Administrador y Editor con permisos distintos, e historial de los cambios hechos en el panel.
Un límite de 5 envíos por hora por dirección y una trampa para bots, sin captcha para el visitante.
Diseño en Figma
Tecnología
Next.js
Versión 16, con App Router; sitemap, datos estructurados e imagen para compartir generados por el propio sitio.
React
Versión 19. Un componente por sección, en el orden de la página, fácil de reorganizar.
TypeScript
Esquema de contenido tipado: cada campo editable tiene tipo y límite de longitud.
Tailwind CSS
Tokens de la marca en el tema: marino, verdes, azul y el tono papel.
GSAP
Animaciones de la apertura y de las franjas, con desplazamiento suave de Lenis.
Prisma
Contenido, contactos, usuarios e historial en el mismo schema.
Neon Postgres
Base de datos propia del proyecto, en la región de São Paulo.
Vercel
Publicado en São Paulo; el build aplica el schema de la base de datos antes de publicar.
Ingeniería
Cada sección tiene un esquema validado (zod) con límites de texto. Si la base de datos falla, el sitio muestra el contenido por defecto en lugar de romperse.
Reducción en el navegador, conversión a WebP con sharp y limpieza automática de las fotos que ninguna sección usa.
Una política de privacidad generada con los datos del panel y una retención de 12 meses aplicada automáticamente a los contactos recibidos.
Administrador y Editor con permisos separados, recuperación de contraseña e historial de cambios.
Identidad visual
Colores y fuentes comprobados en el sitio en línea. Los colores vienen del archivo original de la marca.
Paleta · haz clic para copiar
Títulos y texto
Números que dizem a verdade.
Jost
Toda la tipografía del sitio, de los títulos al cuerpo de texto.
Números y etiquetas
148.200,00 ✓
IBM Plex Mono
Cifras, etapas y etiquetas, como en un papel de trabajo de auditoría.
Siguiente paso
Creamos sitios con identidad propia y un panel para que tu equipo actualice el contenido sin depender de nadie.
