← Back to projects
Case study
Estudio Jurídico Lachat
Professional website for a law firm, developed to present legal services, build trust and make it easier to receive online inquiries.
The project started as a React.js and Tailwind CSS landing page, and was later migrated to Next.js with TypeScript to improve structure, scalability and maintainability.
Context
The problem
The firm needed a professional web presence that communicated trust, explained its services clearly and allowed potential clients to submit inquiries in a simple way.
The objective was not only to build a visually attractive landing page, but to create a functional tool that helped organize the first contact with people interested in legal advice.
Goals
What the project needed to solve
The priority was to build a clear, accessible and useful solution for a real need: receiving legal inquiries in an organized way.
Professional presence
Present the law firm with a sober, trustworthy and coherent visual identity for the legal field.
Inquiry generation
Make it easy for potential clients to start contact from the website.
Functional contact flow
Implement a form, attachments, notifications and data registration for later follow-up.
Solution
What I developed
I developed a professional website focused on capturing legal inquiries. The interface was designed with a sober editorial aesthetic, prioritizing readability, trust and clear navigation.
The solution includes a main landing page with informative sections, calls to action, a consultation form, file uploads, email notifications and automatic data registration to simplify later lead management.
Features
Main features
Responsive landing page
Design adapted to mobile and desktop, with clear hierarchy and conversion focus.
Consultation form
Structured fields to organize the initial information submitted by potential clients.
File uploads
Users can attach relevant documentation when submitting an inquiry.
Supabase persistence
Inquiry and file registration to preserve contact data.
Automated email
Resend notifications to alert when a new inquiry enters the system.
Google Sheets logging
Automation to centralize leads in a simple tool the client can review.
Stack
Technologies used
Frontend
Next.jsReactTypeScriptTailwind CSS
Services and integrations
SupabaseResendGoogle Sheets
Deployment and infrastructure
VercelCustom domainBasic SEOOpen Graph
Migration
From React.js to Next.js with TypeScript
The first version was built with React.js and Tailwind CSS. That stage helped validate the visual structure, main content and general site experience.
After the first delivery, I decided to migrate the project to Next.js with TypeScript to improve architecture, organize components better, use a more scalable structure and bring the project closer to a professional standard.
The migration created a stronger base for future improvements, better separation of responsibilities and lower technical debt from early stages.
Technical decisions
Criteria applied during development
More maintainable architecture
I separated reusable components, main sections and content data to avoid duplication and simplify future changes.
TypeScript for stronger safety
I added typing to reduce errors in props, data structures and components.
Simple integrations for the client
I used Supabase, Resend and Google Sheets so the inquiry flow could work without depending on overly complex tooling.
Real production setup
I configured deployment, custom domain, favicon, metadata, basic SEO and Open Graph so the website was ready to share.
Result
Published website with custom domain and functional contact flow
The result was a professional website published in production, with a custom domain and a functional contact flow. The project did not remain a static landing page; it became a real tool for capturing and organizing inquiries for the law firm.
Learnings
What I learned from this project
This project helped me better understand the difference between a practice project and a real delivery.
In a real project, every decision has impact: content clarity, button placement, responsive behavior, forms, errors, emails, domain, deployment and final details.
It also reinforced the importance of building simple, maintainable solutions focused on a concrete need instead of adding unnecessary complexity.
Links
View project and code
The project is available in production and the repository contains the migrated Next.js and TypeScript version.