Sobre esta plantilla
Intelligent Operations se capturó a 1476x1080 y se conserva como especificación, no como imagen de galería. La paleta se queda en gris #BCCCD4 de base y negro #0A0A0A para la tipografía, y el tipo es Inter. Se entrega como React y Tailwind CSS, y la captura se fija a 1476x1080 antes de escribir código. El brief gasta su presupuesto de movimiento en transiciones de 700ms y un vídeo en bucle de fondo. Tenlo abierto mientras escribes: el brief de 10.447 caracteres es la parte que se traslada a tu propia página.
Pensado para
- Pensado para agencias que facturan por ronda y quieren acordar secciones de 100vh y pasos de espaciado de 10px antes de la primera.
- Este diseño de landing page sirve a fundadores que necesitan una pantalla de prueba de que los textos de SaaS aguantan 7,9s de vídeo en bucle.
- Pensado para responsables de contenidos que reescriben un diseño de landing page cuyo titular tiene que seguir siendo tan largo como el de Intelligent Operations.
Qué incluye
- La barra sigue la cuadrícula. La barra es una fila de texto y una acción, medida en secciones de 100vh y pasos de espaciado de 10px, así que se lee como franja y no como banda. Las etiquetas son lo bastante cortas para caber en una línea en cualquier ancho que cubra el brief. La barra son unos pocos elementos, así que se reconstruye sin librería de componentes.
- Vídeo en la capa inferior. Los medios hacen trabajo atmosférico y no narrativo: un bucle de 7,9s a 1476x1080 detrás de todo lo demás. Un fotograma de póster a 1476x1080 sostiene la composición cuando no hay reproducción automática, así que la maquetación nunca se desmorona.
- Dos tipografías, papeles claros. La línea display se compone en Inter a un tamaño que fija el brief, lo que convierte el titular en un elemento de composición y no en un párrafo. Los pesos se especifican por papel, así que la jerarquía no depende de la improvisación al montar.
- Navegación sin fondo propio. La marca ocupa el borde izquierdo y los enlaces corren a su derecha, todo compuesto en Inter, para que la barra pertenezca a la página de abajo y no a un sistema aparte. Diseña el estado colapsado antes de añadir un sexto enlace.
Movimiento e interacción
Todo el presupuesto de animación
El movimiento de los controles es corto y repetible: 700ms en cada cambio de estado. Un mismo valor se reutiliza en todos los controles, así que sus tiempos no se separan.
La interacción está en los controles
La página solo responde donde se puede actuar: estados hover en los botones y los enlaces y no en todas las tarjetas y un elemento fijo que mantiene la posición mientras el contenido pasa por debajo. Un control que parece interactivo se comporta como tal, así que nada promete una acción que no existe.
Leer Intelligent Operations como especificación
El coste de una escala fija es menos margen para improvisar. Con secciones de 100vh y pasos de espaciado de 10px la composición se mantiene coherente, pero un elemento nuevo hay que encajarlo y no simplemente colocarlo. Nada de este tipo de landing page depende de un valor por defecto.
Qué se mueve en Intelligent Operations
El movimiento es una lista corta, no un sistema. El brief nombra transiciones de 700ms, un bucle de 7,9s y una aparición al hacer scroll y el resto de la página se queda quieto. Nada se anima por gusto en este tipo de landing page.
El reflujo de landing page
Cuando el texto es largo, la maquetación estrecha es la primera que rompe. Aquí un clamp entre 80px y 10px absorbe el cambio, y la sección se mantiene a 100vh. El reflujo mantiene la acción al alcance en cualquier ancho.
Preguntas frecuentes
¿El prompt de Intelligent Operations es una especificación cerrada o un punto de partida?
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 1476x1080. En ningún punto la imagen renderizada funciona como fuente de la verdad.
¿Necesito React y Tailwind CSS para recrear Intelligent Operations?
Intelligent Operations 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.
¿De dónde sale el diseño de Intelligent Operations?
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 1476x1080.
