Desmenuzando Brainwave y Aprendiendo a Construir Interfaces Complejas con React y Tailwind
Cada vez que los diseñadores traen maquetas al estilo de los servicios modernos de IA, los desarrolladores empiezan a sentir un leve tic nervioso. Degradados de neón, cuadrículas complejas de fondo, cruces decorativas en los bordes de las secciones, diseños tipo bento y efecto parallax. Armar esto prolijamente sin convertir el código en un desastre de cientos de clases de Tailwind dispersas puede ser un desafío.
En el repositorio brainwave, el autor del canal JavaScript Mastery, Adrian Hajdin, publicó el código fuente de una landing page completa para un producto de IA ficticio. El proyecto está construido con React, Vite y Tailwind CSS. Este es un gran ejemplo de cómo organizar el estilo y la arquitectura de componentes cuando el diseño va más allá de tarjetas y botones estándar.
Qué hay dentro del Proyecto
El repositorio es un sitio frontend de una sola página listo para usar. Incluye todos los bloques típicos de un sitio web comercial: una sección hero con un llamado a la acción, tarjetas de características, una hoja de ruta interactiva, una sección de integraciones y niveles de precios.
El valor principal del proyecto no está en el diseño en sí, sino en el enfoque para implementar elementos visuales complejos. En lugar de conectar dependencias pesadas de bibliotecas de componentes, el autor demuestra cómo aprovechar al máximo Tailwind CSS vanilla y React puro.
Soluciones Técnicas Interesantes
Revisé el código base e identifiqué cuatro técnicas que serán útiles en el desarrollo real.
1. Arquitectura de Tipografía mediante Plugin de Tailwind
En proyectos grandes de Tailwind, surge un problema común: los desarrolladores copian cadenas largas de clases como font-semibold text-[2.5rem] leading-[3.25rem] md:text-[2.75rem] de un encabezado a otro. Esto desordena el marcado y complica la refactorización.
En Brainwave, esto se manejó a través del archivo de configuración tailwind.config.js. Usando la función incorporada plugin, el autor creó clases de componentes personalizados para todos los niveles de tipografía:
plugins: [
plugin(function ({ addBase, addComponents, addUtilities }) {
addComponents({
".h1": {
"@apply font-semibold text-[2.5rem] leading-[3.25rem] md:text-[2.75rem] md:leading-[3.75rem] lg:text-[3.25rem] lg:leading-[4.0625rem] xl:text-[3.75rem] xl:leading-[4.5rem]":
{},
},
".h2": {
"@apply text-[1.75rem] leading-[2.5rem] md:text-[2rem] md:leading-[2.5rem] lg:text-[2.5rem] lg:leading-[3.5rem] xl:text-[3rem] xl:leading-tight":
{},
},
".body-1": {
"@apply text-[0.875rem] leading-[1.5rem] md:text-[1rem] md:leading-[1.75rem] lg:text-[1.25rem] lg:leading-8":
{},
},
".tagline": {
"@apply font-grotesk font-light text-xs tracking-tagline uppercase":
{},
},
});
}),
]
Ahora en JSX solo necesitas escribir <h1 className="h1">, y los estilos se cargan automáticamente junto con los puntos de quiebre responsivos.
2. Wrapper Universal de Sección con Líneas Guía
El diseño del proyecto usa líneas divisorias delgadas a lo largo de los lados de la página y cruces decorativas en las intersecciones de los bloques. Construir este marcado manualmente dentro de cada componente es inconveniente.
El proyecto incluye un componente dedicado Section.jsx que maneja toda la geometría decorativa:
import SectionSvg from "../../public/assets/svg/SectionSvg";
const Section = ({
className,
id,
crosses,
crossesOffset,
customPaddings,
children,
}) => (
<div
id={id}
className={`relative
${
customPaddings ||
`py-10 lg:py-16 xl:py-20 ${crosses ? "lg:py-32 xl:py-40" : ""}`
} ${className || ""}`}
>
{children}
<div className="hidden absolute top-0 left-5 w-0.25 h-full bg-stroke-1 pointer-events-none md:block lg:left-7.5 xl:left-10" />
<div className="hidden absolute top-0 right-5 w-0.25 h-full bg-stroke-1 pointer-events-none md:block lg:right-7.5 xl:right-10" />
{crosses && (
<>
<div
className={`hidden absolute top-0 left-7.5 right-7.5 h-0.25 bg-stroke-1 ${
crossesOffset && crossesOffset
} pointer-events-none lg:block xl:left-10 right-10`}
/>
<SectionSvg crossesOffset={crossesOffset} />
</>
)}
</div>
);
El componente aísla la lógica para renderizar guías laterales (w-0.25 h-full bg-stroke-1) y divisores horizontales con íconos SVG en las intersecciones. Otros bloques simplemente se envuelven en <Section crosses>, manteniendo una estructura limpia.
3. Diseño Bento para la Hoja de Ruta
La sección de Hoja de Ruta está construida como una cuadrícula asimétrica. Las tarjetas con números pares se desplazan verticalmente en pantallas medianas y grandes usando la clase even:md:translate-y-[7rem].
Los bordes con degradado usan una técnica de doble envoltura: el contenedor externo obtiene un fondo con degradado (bg-conic-gradient) con padding mínimo p-0.25, mientras que el bloque interno se llena con el color principal del tema oscuro bg-n-8. Esto crea un borde brillante limpio de apenas fracciones de píxel sin filtros CSS pesados.
4. Extracción del Contenido a Constantes
Todo el texto, estructura de navegación, precios y listas de características se extraen al archivo constants/index.js. Los componentes mismos no contienen cadenas codificadas—they solo manejan el mapeo de datos. Para adaptar el proyecto a un servicio real, solo necesitas modificar un objeto JS sin tocar el marcado JSX.
Cómo Ejecutar el Proyecto Localmente
Necesitarás Node.js y Git instalados para ejecutar esto. Clona el repositorio e instala las dependencias:
git clone https://github.com/adrianhajdin/brainwave.git
cd brainwave
npm install
npm run dev
El servidor local de Vite se inicia en http://localhost:5173.
A quién le será útil este Repositorio
El proyecto no tiene backend, integración de base de datos ni gestión compleja de estado. Es específicamente una plantilla y recurso de aprendizaje para desarrollo frontend.
Vale la pena explorar el repositorio en dos escenarios:
- Quieres mejorar tus habilidades en Tailwind CSS y entender cómo personalizar correctamente el tema para maquetas de diseño no estándar.
- Necesitas un marco de trabajo listo para usar para una landing page de tu proyecto paralelo o portafolio, donde importa una presentación visual impresionante.
El código es limpio, dividido en módulos claros y fácil de dividir en componentes reutilizables separados. Enlace al código fuente: github.com/adrianhajdin/brainwave.
Proyectos relacionados