El contexto
Una landing sencilla para seguir practicando. Usé clsx y tailwind-merge para aprender a organizar las clases de Tailwind cuando el marcado se vuelve confuso, y busqué componentes React reutilizables con props que permiten cambiar textos y estilos con facilidad.
Sirve como base de frontend para extenderla después a una app full stack con Next.js como front headless. También planteé la diferenciación entre componentes de servidor y de cliente para aprovechar al máximo el renderizado en servidor (SSR) de Next.js.
Por ahora es solo una demo de una página: los enlaces son ficticios y cumplen un rol visual.
Lo que aprendí :
- Stack y organización:
- Next.js 16 (App Router), React 19 y TypeScript
- Tailwind CSS v4 con design tokens y @theme en globals.css
- clsx y tailwind-merge para componer y deduplicar className
- Componentes reutilizables: textos y estilos controlados por props
- Layout, rendimiento y accesibilidad:
- next/image con priority y sizes en el hero para el LCP
- Flexbox y grid; min-w-0 en columnas 50/50 texto/imagen para evitar desbordes
- Jerarquía de encabezados semántica (un h1, h2 por bloque, h3 en testimonios)
- Enlaces tipo subrayado/resaltado con color-mix alineado a la guía de estilo
- Producto e integración:
- Metadatos y favicons siguiendo las convenciones de Next.js
- UI mayormente en Server Components; "use client" solo cuando hace falta
- Separación explícita servidor / cliente: menos JS en el navegador y más trabajo en el servidor para sacar partido del SSR
- Demo de una página: enlaces de navegación decorativos por ahora