Fino Trato – Sitio web con reservas en línea, CRM y sistema de marca
Sitio web de una empresa de limpieza de tapicería de Brasilia: una landing page con un antes y después interactivo, solicitud de presupuesto y reservas en línea, y un panel con inicio de sesión de Google en el que el equipo sigue leads y reservas y edita servicios, testimonios, fotos y SEO. La marca también se creó desde cero.
En pocas palabras
- Senior Design Engineer
- Mi rol
- abr–oct 2026
- Período
- En solitario, del diseño al deploy
- Equipo
- páginas
- 9
- tablas en la base de datos
- 11
- rutas de API
- 5
- commits
- 58
Identidad visual
Logo e identidad creados por mí
Logo creado en 2020. Con el sitio nuevo, la marca ganó paleta digital, tipografía, voz y reglas de uso, documentadas en una guía.
Logo
Fondo claroFondo oscuroConcepto
Un hexágono en dos mitades, azul y morado, enmarca un sofá con gotas de agua: el servicio explicado en el propio símbolo. El nombre en serifa clásica da el tono cuidadoso del “fino trato”, y la línea de servicios en mayúsculas espaciadas cierra el conjunto en los mismos dos colores.
Diseño: Estevão Marques · 2020
Paleta · haz clic para copiar
Títulos
Fino Trato
Playfair Display
Display y títulos, con cursiva en los destacados.
Interfaz y texto
Agendar agora
Inter
Botones, formularios y texto corrido.
Variaciones del logo
Horizontal 
Vertical 
Símbolo
Dónde aparece la marca
Favicon
El hexágono solo, en la pestaña del navegador.
Cabecera del sitio, panel y acceso
Logo horizontal en la cabecera de la landing page y en la entrada del panel.
Guía de marca
Página con logo, paleta, tipografía, voz y reglas de uso, publicada junto con el sitio.
Sí
- Usa el azul #1565C0 como color de acento en los CTA
- Combina Playfair Display (títulos) con Inter (cuerpo)
- Usa el degradado azul→morado en banners y destacados
- Respeta el área de protección alrededor del logo
- Respeta el tamaño mínimo de 120px / 32mm
- Usa fotos reales del servicio con antes/después
No
- No deformes el logo ni le apliques efectos no aprobados
- No lo uses sobre fondos con poco contraste
- No mezcles otras fuentes sin aprobación
- No uses imágenes genéricas de bancos de imágenes
- No abuses de las MAYÚSCULAS
Voz de la marca
Fino Trato transmite cuidado, competencia y cercanía. El lenguaje une profesionalismo y calidez, como un especialista de confianza de la familia.
Personalidad
- Confiable
- Profesional
- Sofisticado
- Cuidadoso
- Cálido
- Transparente
Tono
- Directo y claro
- Didáctico
- Cercano, no íntimo
- Aspiracional
- Sin jerga técnica
El desafío
Fino Trato necesitaba un sitio que transmitiera confianza a las familias de Brasilia, mostrara el resultado del servicio y convirtiera la visita en una solicitud. El equipo también necesitaba seguir presupuestos y reservas sin depender de conversaciones sueltas en WhatsApp, y la marca todavía no existía.
La solución
Creé la marca desde cero (logo, paleta, tipografía y guía de uso) y construí el sitio en Next.js: un antes y después interactivo, solicitud de presupuesto y reservas en línea con fecha y franja horaria, con aviso por correo en cada solicitud. En el panel, con inicio de sesión de Google, el equipo sigue leads y reservas en un CRM y edita servicios, testimonios, fotos y SEO sin programador.
Panel propio
Panel hecho para Fino Trato
El sitio envía cada pedido al panel, y el equipo da seguimiento, responde y cambia el contenido del sitio sin depender de nadie.
La necesidadLos pedidos de presupuesto llegaban por el sitio y se perdían en la conversación de WhatsApp.
Lo que se hizoCRM con los presupuestos del sitio, estado Pendiente, Contactado y Finalizado, y WhatsApp, correo o eliminación en cada fila.
Datos ficticiosLa necesidadConfirmar cada reserva sin abrir otro programa.
Lo que se hizoPestaña de reservas con fecha, horario y el mensaje del cliente, y el correo escrito y enviado desde el propio panel.
Datos ficticiosLa necesidadLa mejor prueba del servicio es el antes y después.
Lo que se hizoLas fotos de antes y después del slider de la portada se cambian en el panel, con carga arrastrando y soltando.
Datos ficticiosLa necesidadLos servicios ofrecidos cambian según la época del año.
Lo que se hizoServicios con destaque, icono, orden y activar/desactivar, editados en el panel y publicados en el sitio al instante.
Datos ficticiosEn el móvil
La necesidadSeguir los pedidos del día desde el móvil.
Lo que se hizoResumen con el total de presupuestos y reservas, los nuevos de hoy y cuántos esperan contacto.
Datos ficticiosDel pedido de presupuesto al servicio hecho
CRM
Presupuestos y reservas del sitio con estado Pendiente, Contactado y Finalizado, y WhatsApp y correo en cada fila.
Correo desde el panel
El equipo escribe y envía el correo de confirmación sin salir del panel.
Servicios
Servicios del sitio con destaque, icono, orden y activar/desactivar.
Testimonios
Testimonios con foto ajustable, nota, barrio y servicio, y cada uno puede salir del aire.
Antes y después
Las fotos del slider de antes y después de la portada, cambiadas arrastrando y soltando.
Acceso
Entrada con la cuenta de Google autorizada, sin contraseña que guardar.
Diseño en Figma
Del design system al prototipo
Tecnología
El stack tecnológico
Next.js
Framework de alto rendimiento con URLs que Google puede indexar (SEO), renderizado en el servidor y cargas casi instantáneas.
React
Arquitectura de componentes para una experiencia de usuario fluida e interactiva, sin recargar la página.
TypeScript
Tipado estático estricto que detecta errores antes de que lleguen a producción y mantiene estable la aplicación.
Tailwind CSS
Un design system a medida: identidad visual propia, una interfaz coherente y archivos livianos para ganar velocidad.
Prisma
Acceso rápido y seguro a la base de datos, que evita vulnerabilidades de inyección y protege la integridad de los datos del negocio.
PostgreSQL
Base de datos
Auth.js
Auth
Google Auth
Auth
Resend
Medios / Correo
Framer Motion
Motor de microinteracciones que agrega movimiento fluido y cuidado a cada interacción del usuario.
Vercel
Infraestructura en la nube global, en el edge: el sitio carga en milisegundos esté donde esté el visitante.
Ingeniería
Aspectos técnicos
Antes y después interactivo
El visitante arrastra el control y ve el mismo tapizado antes y después de la limpieza.
Reservas en línea
Servicio, fecha preferida y franja horaria (mañana, tarde o noche) elegidos en el sitio, con confirmación por WhatsApp y un aviso por correo al equipo en cada solicitud.
CRM de leads y reservas
Cada solicitud entra en el panel con un estado, del primer contacto al servicio realizado.
Panel con inicio de sesión de Google
Acceso restringido al equipo, sin una contraseña nueva que recordar.
Contenido editable
Servicios, testimonios, fotos de la portada y SEO se cambian desde el panel, sin programador.
Marca creada desde cero
Logo, paleta, tipografía, tokens y guía de uso documentados y aplicados en el sitio.
El impacto
Fino Trato ahora tiene una marca coherente en todos sus canales y un sitio que recibe solicitudes y reservas a cualquier hora, con todo registrado en un panel que el propio equipo administra.
Siguiente paso
¿Quieres una marca y un sitio que traigan solicitudes?
Creamos la marca, el sitio y el panel para que tu equipo siga cada solicitud.