Estudio Augusto Cassiau

EmpresaEstudio Juridico

Año2026

TipoLanding Institucional · Full Stack

RolDiseno UI/UX · Desarrollo Full Stack

01El Desafío

El estudio operaba con su captacion de leads dispersa entre WhatsApp, Instagram y referencias directas, sin un canal centralizado que transmitiera la imagen profesional que el trabajo merecia. Necesitaban consolidar su presencia digital en un unico canal que capturara consultas, funcionara en dos idiomas (ES/EN) para clientes internacionales, y tuviera performance de primer nivel — todo con una estetica minimalista coherente con la identidad de una firma legal de Puerto Madero.

02La Solución

Disene y desarrolle una web institucional de alto rendimiento con arquitectura fullstack: frontend en React + Vite y backend en Vercel Serverless Functions (Express). Incluye i18n completo ES/EN con cambio sin recarga, feed de Instagram integrado via Graph API con cache en memoria y fallback, envio real de emails via Resend con alta entregabilidad, y hardening de seguridad completo con Helmet, CSP estricta, CORS restringido y rate limiting por IP.

i18n completo ES/EN con react-i18next — cambio de idioma instantaneo sin recarga ni flicker. Una sola fuente de verdad en i18n.jsx con todas las traducciones

Meta tags SEO dinamicos por idioma: title, description, og:locale cambian segun el idioma activo. Schema JSON-LD tambien se traduce

Backend serverless en Vercel Functions (Node.js + Express) — api/index.js con dos endpoints: POST /api/contact y GET /api/instagram-feed

Formulario de contacto con validacion server-side, sanitizacion de inputs contra XSS/injection, feedback visual de exito/error y envio real via Resend API (alta entregabilidad, no termina en spam)

Feed de Instagram integrado via Graph API con cache en memoria de 1 hora (objeto instagramCache con TTL). Si la API falla o el token expira, sirve el ultimo snapshot cacheado en vez de crashear

Helmet.js para cabeceras HTTP seguras: X-Content-Type-Options, X-Frame-Options, Strict-Transport-Security, X-XSS-Protection

Content Security Policy estricta con whitelist de dominios permitidos para scripts, estilos, imagenes, fonts y conexiones — bloquea inyeccion de recursos externos no autorizados

CORS restringido al dominio de produccion — rechaza requests de origenes no permitidos

Express Rate Limit: maximo 3 mensajes cada 15 minutos por IP para prevenir spam y abuso del formulario

Sanitizacion de inputs en el endpoint de contacto: nombre, email y mensaje se limpian antes de procesar

Structured Data JSON-LD tipo LegalService con direccion fisica, telefono, URL canonica, horarios de atencion y area de servicio — optimizado para Google Knowledge Panel

Open Graph + Twitter Cards configurados con imagen, titulo y descripcion para previsualizacion rica al compartir en WhatsApp, LinkedIn y X

Sitemap.xml + robots.txt generados con URLs canonicas por idioma. Meta tags canonicos para evitar contenido duplicado entre /es y /en

Imagenes .webp con variantes mobile/desktop, fetchpriority="high" en el LCP (hero) y lazy loading con loading="lazy" en el resto

Fuentes Playfair Display + Inter pre-conectadas con link rel="preconnect" y font-display: swap para evitar FOUT (Flash of Unstyled Text)

Splash Screen animado con CSS puro para reducir TBT (Total Blocking Time) mientras cargan los scripts

Lazy loading con React.Suspense para code-splitting por secciones — el usuario ve contenido inmediato sin esperar que cargue todo el bundle

Performance 95+ en Lighthouse, 100 en Accesibilidad y 100 en SEO en PageSpeed Insights

PWA-ready: manifest.json con name, short_name, theme_color negro, background_color, iconos y display standalone — instalable desde el navegador en Android e iOS

Animaciones Framer Motion con scroll reveal progresivo y efecto parallax en el hero. Transiciones suaves entre secciones

Dark mode activo por defecto, persistido en localStorage, con transicion de 500ms en el 100% de los componentes. La preferencia del usuario nunca se pierde entre sesiones

6 areas de practica con iconografia custom: Asesoramiento Empresarial, Contratos, Aspectos Societarios, Gestiones Extrajudiciales, Litigios, Marcas y Patentes

Diseno minimalista blanco y negro coherente con la identidad de una firma legal de Puerto Madero — cada decision visual tiene un argumento de marca

FLUJO — Formulario de contacto: [Usuario] completa nombre, email y mensaje → submit → [Frontend] validacion client-side (campos requeridos, formato email) → POST /api/contact {name, email, message} → [Vercel Serverless] Express middleware: Helmet (cabeceras seguras) → Rate Limit (3 msgs / 15min por IP) → CORS (solo dominio de produccion) → sanitiza inputs contra XSS → [Resend API] envia email real al estudio → response 200 → [Frontend] toast de confirmacion "Mensaje enviado"

FLUJO — Feed de Instagram con cache: [Usuario] visita la web → [Frontend] renderiza seccion Instagram → GET /api/instagram-feed → [Serverless] verifica instagramCache: si cache.timestamp + 1 hora > now → retorna cache.data (sin llamar a Meta) → si cache expirado: GET graph.facebook.com/me/media?fields=id,caption,media_url,permalink&access_token=... → parsea respuesta → guarda en instagramCache {data, timestamp: now} → response con posts → si la API falla (token expirado, rate limit): retorna ultimo snapshot cacheado en vez de error → el usuario siempre ve contenido

FLUJO — Cambio de idioma sin recarga: [Usuario] click en toggle ES/EN → [react-i18next] i18n.changeLanguage("en") → React re-renderiza todos los componentes con las traducciones del nuevo idioma desde i18n.jsx → meta tags SEO se actualizan: title, description, og:locale cambian a ingles → Schema JSON-LD se traduce → la URL no cambia, el idioma se persiste en localStorage → en la proxima visita carga directamente en el ultimo idioma usado

FLUJO — Capas de seguridad en cada request: [Request HTTP] → [Helmet] inyecta X-Content-Type-Options: nosniff, X-Frame-Options: DENY, Strict-Transport-Security, X-XSS-Protection → [CSP] Content-Security-Policy con whitelist de dominios para script-src, style-src, img-src, font-src, connect-src → [CORS] verifica Origin == estudioaugustocassiau.com.ar → si otro origen: 403 → [Rate Limit] verifica IP: si > 3 requests en 15min: 429 Too Many Requests → si todo pasa: ejecuta handler

03Stack Tecnológico

React 18

Vite

TypeScript

Tailwind CSS

Framer Motion

Node.js

Express

Vercel Serverless

Resend API

Instagram Graph API

react-i18next