DIGITALBREAK

Landing & CRM de Gestión de Leads — Plataforma de marketing performance con 500+ leads mensuales y Core Web Vitals A+.

DigitalBreak Landing Page

Sobre el Proyecto

DigitalBreak es una plataforma de marketing performance que integra un landing moderno con gestión centralizada de contactos. Diseñé y desarrollé un sitio de alta conversión (multilingüe EN/ES) con carrusel dinámico, formulario con validación en tiempo real y panel admin completo.

Como Desarrollador Full-Stack (Tech Lead), fui responsable de la arquitectura completa, diseño de componentes reutilizables, integración de autenticación, optimización SEO/Core Web Vitals y deployment en Vercel.

El sistema procesa 500+ leads mensuales con seguridad enterprise (reCAPTCHA v3, NextAuth, CSP headers) y mantiene un 15%+ conversion rate desde el landing.

VISITAR SITIO

Detalles Técnicos

  • RolTech Lead
  • Año2025
  • StackNext.js 15, TS, Prisma
  • EstadoEn Producción
  • Leads/mes500+
  • Uptime99.99%

STACK TECNOLÓGICO —

Next.js 15
React 19
TypeScript 5
Tailwind CSS 3
Prisma 5
PostgreSQL
NextAuth OAuth
Vercel

Stack Completo:

Estilos:

Tailwind CSS 3, Custom Fonts (Satoshi, THE_GLITCH)

Seguridad:

reCAPTCHA v3, CSP headers, CORS

Formularios:

Zod, react-hook-form

Analytics:

Vercel Analytics, SpeedInsights

FUNCIONALIDADES —

Landing Responsivo

Hero con carrusel autoplay (10s), 3 secciones (Gray, Black, Pixel) con animaciones suaves de Framer Motion.

Multiidioma EN/ES

Context global + constantes tipadas (TEXT_CONTENT) + URLs amigables por región con getBaseUrl().

Formulario Inteligente

Validación client/server con Zod, reCAPTCHA v3 invisible, envío async con feedback visual.

Panel Admin

Gestión de contactos (listar/eliminar), estado 'atendido', tabla con filtros y búsqueda.

Autenticación OAuth

Login con Google, roles (admin/user), JWT en cookies seguras con NextAuth.js.

SEO Empresarial

Metadata dinámico, OG images, Sitemap, robots.txt, canonicals y Core Web Vitals A+.

Desafíos Técnicos y Soluciones

01. Internacionalización sin Duplicación

Implementé Context API + constantes tipadas (TEXT_CONTENT) para soportar EN/ES sin replicar componentes. Rutas dinámicas con getBaseUrl() maneja prod vs dev.

02. Formulario con reCAPTCHA

Integré Zod schemas con validación client-side, server actions para submit, y reCAPTCHA v3 sin interrumpir UX. Manejo de errores con feedback visual + persistencia en Prisma.

03. Performance AAA

Lazy loading con next/image, Code Splitting automático, CSP headers restrictivos y carrusel optimizado con useEffect + setInterval sin memory leaks.

IMPACTO —

500+
Leads capturados mensuales
15%+
Conversion rate
A+
Core Web Vitals
#1
SEO rank LATAM
<1.5s
LCP (Largest Contentful Paint)
99.99%
Uptime en Vercel
80%
Reducción tiempo gestión leads

Notas Técnicas

TypeScript 98.9% coverage. Middleware con NextAuth para protección de rutas. Seed script para desarrollo. Docker multi-stage. Vercel SpeedInsights + Analytics integrado. Componentes reutilizables: Grid, Title, Container, CardSvg, Button variants. Estructura escalable para agregar más idiomas o regiones.

PERFORMANCE MARKETING.

VER EN VIVO