El contexto
Huddle es una landing page realizada en solitario. El objetivo es crear una página de inicio para un producto o servicio. La página es responsive y funciona en todos los dispositivos.
La página está desarrollada con Next.js 16 y Tailwind CSS. Next.js permite crear una página estática optimizada para el SEO: a diferencia de React puro, el mecanismo de Server Components permite renderizar el HTML desde el servidor. Tailwind CSS se usa para el diseño, con un enfoque atómico y una responsividad guiada por variables (tema Tailwind v4).
Nota sobre la arquitectura: el código se estructura siguiendo la clean architecture para anticipar una evolución del proyecto, pero en esta fase esa arquitectura no aporta valor por lo que no se ha utilizado. De hecho, solo hay una presentación de la empresa 'Huddle', sin reglas de negocio ni dominio identificado; es un sitio estático sencillo. Next.js se usa sobre todo por el SEO y también porque el proyecto está pensado para evolucionar hacia mayor complejidad.
Lo que aprendí :
- Contexto y objetivos:
- Landing page sencilla con fin pedagógico: dominar Next.js 16, React 19 y Tailwind
- Elección deliberada de la stack: App Router, Server Components por defecto, directivas Tailwind (@apply, @layer, @theme, etc.) y responsividad
- Sistema atómico (decisiones de componentes):
- Átomos: botones, enlaces, iconos, etiquetas — componentes UI indivisibles reutilizables
- Moléculas: tarjetas, bloques CTA, encabezados de sección — combinaciones de átomos con un rol definido
- Organismos: hero, footer, barra de navegación — secciones completas de la página
- Templates: estructura de layout (secciones, grids) sin contenido de negocio
- Pages: composición de organismos en el layout; layout.tsx para el esqueleto y page.tsx para las páginas propiamente dichas
- Responsividad con Tailwind (enfoque actual):
- Variables CSS y theme(): breakpoints, espaciados y colores centralizados (tailwind.config o @theme en v4) para una coherencia responsive
- Uso de contenedores fluidos (max-w-*, mx-auto), espaciados responsivos (p-4 md:p-6 lg:p-8) y tipografía fluida (clamp, text-sm md:text-base lg:text-lg) mediante las variables del tema
- Mobile-first: clases sin prefijo para móvil, sm:/md:/lg: para los breakpoints superiores, apoyándose en los breakpoints definidos en el tema