← Volver a proyectos
Caso de estudio
Estudio Jurídico Lachat
Sitio web profesional para un estudio jurídico, desarrollado para presentar servicios legales, generar confianza y facilitar la recepción de consultas online.
El proyecto comenzó como una landing en React.js y Tailwind CSS, y luego fue migrado a Next.js con TypeScript para mejorar su estructura, escalabilidad y mantenibilidad.
Contexto
El problema
El estudio necesitaba una presencia web profesional que transmitiera confianza, explicara con claridad sus servicios y permitiera recibir consultas de potenciales clientes de forma simple.
El objetivo no era solamente construir una landing visualmente atractiva, sino crear una herramienta funcional que ayudara a ordenar el primer contacto con personas interesadas en recibir asesoramiento legal.
Objetivos
Qué tenía que resolver el proyecto
La prioridad fue construir una solución clara, accesible y útil para una necesidad real: recibir consultas legales de manera ordenada.
Presencia profesional
Presentar el estudio jurídico con una estética sobria, confiable y coherente con el rubro legal.
Captación de consultas
Facilitar que potenciales clientes puedan iniciar contacto de forma clara desde el sitio.
Flujo funcional
Implementar formulario, adjuntos, notificaciones y registro de datos para seguimiento posterior.
Solución
Qué desarrollé
Desarrollé un sitio web profesional orientado a la captación de consultas legales. La interfaz fue pensada con una estética editorial y sobria, priorizando la legibilidad, la confianza y la claridad en la navegación.
La solución incluye una landing principal con secciones informativas, llamadas a la acción, formulario de consulta, carga de archivos, notificaciones por email y registro automático de datos para facilitar la gestión posterior de los contactos recibidos.
Funcionalidades
Características principales
Landing responsive
Diseño adaptado a mobile y desktop, con jerarquía clara y foco en conversión.
Formulario de consulta
Campos estructurados para ordenar la información inicial enviada por potenciales clientes.
Carga de archivos
Posibilidad de adjuntar documentación relevante al enviar una consulta.
Persistencia en Supabase
Registro de consultas y archivos para conservar los datos del contacto.
Email automático
Notificaciones mediante Resend para avisar cuando ingresa una nueva consulta.
Registro en Google Sheets
Automatización para centralizar los leads en una herramienta simple de revisar.
Stack
Tecnologías utilizadas
Frontend
Next.js
React
TypeScript
Tailwind CSS
Servicios e integraciones
Supabase
Resend
Google Sheets
Deploy e infraestructura
Vercel
Dominio propio
SEO básico
Open Graph
Migración
De React.js a Next.js con TypeScript
La primera versión fue desarrollada con React.js y Tailwind CSS. Esa etapa permitió validar la estructura visual, el contenido principal y la experiencia general del sitio.
Después de la primera entrega, decidí migrar el proyecto a Next.js con TypeScript para mejorar la arquitectura, ordenar mejor los componentes, aprovechar una estructura más escalable y acercar el proyecto a un estándar más profesional.
La migración permitió trabajar con una base más sólida para futuras mejoras, mantener una mejor separación de responsabilidades y reducir deuda técnica desde etapas tempranas.
Decisiones técnicas
Criterios aplicados durante el desarrollo
Arquitectura más mantenible
Separé componentes reutilizables, secciones principales y datos del contenido para evitar duplicación y facilitar futuras modificaciones.
TypeScript para mayor seguridad
Incorporé tipado para reducir errores en props, estructuras de datos y componentes.
Integraciones simples para el cliente
Usé Supabase, Resend y Google Sheets para que el flujo de consultas fuera funcional sin depender de herramientas complejas.
Producción real
Configuré deploy, dominio propio, favicon, metadatos, SEO básico y Open Graph para que el sitio quedara listo para compartir.
Resultado
Sitio publicado con dominio propio y flujo de contacto funcional
El resultado fue un sitio web profesional publicado en producción, con dominio propio y un flujo de contacto funcional. El proyecto no quedó solamente como una landing estática, sino como una herramienta real de captación y organización de consultas para el estudio.
Aprendizajes
Qué me dejó este proyecto
Este proyecto me permitió entender mejor la diferencia entre un proyecto de práctica y una entrega real.
En un proyecto real, cada decisión tiene impacto: la claridad del contenido, la ubicación de los botones, el comportamiento responsive, los formularios, los errores, los emails, el dominio, el deploy y los detalles finales.
También reforcé la importancia de construir soluciones simples, mantenibles y orientadas a una necesidad concreta, en lugar de sumar complejidad innecesaria.
Links
Ver proyecto y código
El proyecto está disponible en producción y el repositorio contiene la versión migrada a Next.js con TypeScript.