next-jsturboreacttailwind
Lync Website - Plataforma Corporativa
By Noel Barral

- Published on
- Duración
- 2 meses
- Rol
- Lead Developer & Architect
- Stack
- Next.js Turbo · React 18 · TailwindCSS · Framer Motion · Radix UI

Sobre el Proyecto
Lync Website es la presencia digital central de nuestra compañía. Ha sido construida desde cero con un enfoque obsesivo en el rendimiento y la experiencia de usuario.
Utilizando Next.js con Turbopack, hemos logrado tiempos de carga instantáneos y una experiencia de desarrollo (DX) superior.
Visitar Lync.es
Tecnologías y Bibliotecas
Este proyecto no es solo una web, es una demostración técnica de lo que es posible con el stack moderno:
- Next.js (App Router + Turbo): El núcleo del sitio, aprovechando el renderizado híbrido y la compilación ultrarrápida de Turbopack.
- Tailwind CSS: Para un diseño atómico, mantenible y totalmente responsive.
- Framer Motion: Utilizamos esta biblioteca para todas las animaciones complejas y transiciones de página, dando una sensación de fluidez nativa.
- Radix UI: Componentes accesibles y robustos para la interfaz de usuario (modales, tooltips, etc.).
- React Hook Form + Zod: Manejo de formularios tipados y validación robusta.
Retos y Soluciones
| Reto Técnica | Solución Implementada |
|---|---|
| Velocidad de Compilación | Migración completa a Turbopack, reduciendo el tiempo de HMR a milisegundos. |
| SEO y Metadatos | Implementación de componentes de servidor para metadatos dinámicos y sitemap automático. |
| Animaciones Fluidas | Orquestación de animaciones con Framer Motion sin sacrificar el Core Web Vitals (LCP). |
| Diseño Modular | Arquitectura basada en componentes reutilizables con un Design System propio en Tailwind. |
Resultado Final
El resultado es una plataforma que no solo comunica nuestra misión, sino que sirve como ejemplo de la calidad técnica que ofrecemos. Con una puntuación de 100/100 en Lighthouse, la web de Lync establece un nuevo estándar en rendimiento web corporativo.
graph TD;
User[Usuario] --> CDN[Edge Network];
CDN --> Next[Next.js Server];
Next --> Content[Static Content (SSG)];
Next --> Dynamic[Dynamic Data (SSR)];
Dynamic --> API[Internal APIs];