Sobre esta plantilla
Alertix es una referencia de trabajo para un producto de IA o SaaS: el desglose de sección hero, con la maquetación medida y lista para recrear. El titular dice “Stay Ahead With *Cutting-Edge*”, y el orden de sección hero gira alrededor de esa línea. La paleta es azul intenso #0A0F14 de base, turquesa apagado #C3DFE8 para la tipografía y azul #1D1D6D para los acentos. Se entrega como React y Tailwind CSS, y la captura se fija a 1932x1400 antes de escribir código. El presupuesto de movimiento se agota en un vídeo en bucle de fondo. Tómalo como el brief de sección hero para un producto de IA o SaaS que tiene que aguantar una reconstrucción, no solo un primer vistazo.
Pensado para
- Equipos que construyen este tipo de sección hero para un producto de IA o SaaS y quieren el detalle medido (pasos de espaciado de 120px) en lugar de una captura que copiar.
- Profesionales del marketing de producto que necesitan que cada sección hero siga leyéndose con 7,9s de vídeo en bucle detrás del texto.
- Quien le pase el brief de sección hero a un modelo usará el prompt de 3.245 caracteres como punto de partida.
Qué incluye
- Una fila, sin desplegables. Los enlaces van en una sola línea y a un único tamaño, y la acción #1D1D6D cierra la fila por la derecha, de modo que el ojo termina donde acaba la navegación. Los enlaces se componen a un tamaño menor que la marca, y la acción en #1D1D6D es el único elemento de la barra con peso.
- Los tamaños están en el brief, no en una escala. La lista se mantiene corta (pasos de espaciado de 120px), y por eso todo el sistema se puede comprobar a mano. Los valores se citan del prompt capturado y no se deducen, por eso sobreviven a un nuevo render.
- El vídeo es el fondo, no un panel. El vídeo de 1932x1400 se reproduce en bucle durante 7,9s detrás del texto, silenciado y en línea, sin ninguna capa de tinte entre ambos. El bucle es lo bastante corto (7,9s) para que el ojo lo lea como textura y no como una línea de tiempo. Exporta a 1932x1400 o más ancho para que el recorte siga siendo honesto.
- Fila superior, una acción. Nada de la barra se anima al hacer scroll; está presente desde el primer fotograma y después se queda al margen. Copia este patrón cuando necesites una navegación que aguante una primera pantalla ruidosa.
Movimiento e interacción
Un bucle, no una secuencia
El movimiento ambiente viene del bucle de 7,9s en 1932x1400 y no de efectos de scroll, lo que mantiene la página tranquila y el texto legible. El clip está silenciado y en línea, así que el primer fotograma está disponible sin ninguna interacción.
Casi nada de movimiento
Aquí no hay librería de scroll: la composición de 1932x1400 se queda quieta y solo se mueven los elementos que responden a ti. El brief no incluye ninguna librería de animación, lo que mantiene pequeña la reconstrucción. No hacen falta líneas de tiempo de scroll.
Hacer tuyo este tipo de sección hero
La sustitución directa tiene un límite: si tu producto necesita otra jerarquía, pasos de espaciado de 120px se resistirán. En ese caso cambia primero el orden y después los valores. Reescribe el texto y el material antes de recolorear nada.
El reflujo de sección hero
Si tus breakpoints se eligieron para que todo cupiera y no para cambiar la maquetación, lee esta ficha: la navegación se pliega en un menú móvil en lugar de una lista de elementos escondidos. El reflujo mantiene la acción al alcance en cualquier ancho.
Cómo ordena Alertix la primera lectura
Cuando alguien que busca SaaS aterriza en una sola pantalla, escanea antes de leer. La maquetación responde a eso: navegación y el clip de fondo se dimensionan para el escaneo, con pasos de espaciado de 120px manteniendo cada parada distinta. Quien busca SaaS recibe la oferta antes que las opciones.
Preguntas frecuentes
¿Qué me llevo cuando copio el brief de Alertix?
Es un brief de construcción, no una descripción de ambiente: fija la escala tipográfica, el espaciado y los valores de movimiento en 1932x1400. En ningún punto la imagen renderizada funciona como fuente de la verdad.
¿Puedo reconstruir este diseño de sección hero de Alertix con otro stack?
Alertix se construyó en React y Tailwind CSS, y la ficha lo dice por procedencia. El brief describe posiciones, tamaños y tiempos, así que se puede reconstruir en cualquier framework capaz de componer tipografía y colocar elementos.
¿Puedo publicar una página reconstruida a partir de Alertix sin acreditar nada?
El brief es una descripción, no una licencia para redistribuir los recursos de otra persona. Conserva la estructura y los números, sustituye los medios y las marcas, y acredita la procedencia si un cliente pregunta de dónde sale la maqueta. La captura de la referencia es de 1932x1400.
