Sobre esta plantilla
Infrastructure conserva el rastro de sus decisiones: el brief que hay detrás de sección hero ocupa 2.467 caracteres. El titular de la propia página dice “Ready to elevate your digital infrastructure?”, y la composición se construye alrededor de esas palabras exactas. Toda la página se construye sobre índigo intenso #010002 de base, blanco #DAD6DB para la tipografía y azul #0F2F65 para los acentos. Se entrega como React y Tailwind CSS, y la captura se fija a 2076x1498 antes de escribir código. La página reduce el movimiento a transiciones de 4s y un vídeo en bucle de fondo. Tenlo abierto mientras escribes: el brief de 2.467 caracteres es la parte que se traslada a tu propia página.
Pensado para
- Profesionales del marketing de producto que necesitan que cada sección hero siga leyéndose con 8s de vídeo en bucle detrás del texto.
- Pensado para responsables de contenidos que reescriben un diseño de sección hero cuyo titular tiene que seguir siendo tan largo como el de Infrastructure.
- Fija #010002 y #0F2F65 como los dos colores de marca y rehace después el diseño de sección hero dentro de ese límite.
Qué incluye
- Una barra sin nada de más. Los enlaces van en una sola línea y a un único tamaño, y la acción #0F2F65 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 #0F2F65 es el único elemento de la barra con peso.
- Los tamaños están en el brief, no en una escala. La maquetación se resuelve con valores fijos (pasos de espaciado de 10px y transiciones de 4s), y eso es lo que mantiene compuesta la primera pantalla a cualquier ancho. No hay ningún valor intermedio inventado entre los citados; la lista de medidas es todo el sistema.
- Vídeo en la capa inferior. El marco de 2076x1498 lo llena un solo bucle que se reproduce detrás del texto y no pide controles. Exporta a 2076x1498 o más ancho y el recorte de cobertura sigue funcionando.
- Una barra de navegación que no estorba. La fila gasta el contraste en un solo punto: la acción #0F2F65, con la marca y los enlaces retenidos sobre el color del texto.
Movimiento e interacción
Una duración para los controles
Aquí el movimiento se mide en milisegundos: 4s. Ese es todo el presupuesto de animación, y se gasta en cambios de estado y no en una línea de tiempo de scroll. El easing se especifica junto a la duración (4s), así que una reconstrucción no puede colar otra sensación sin avisar.
Movimiento ambiente sin librería de scroll
El movimiento ambiente viene del bucle de 8s en 2076x1498 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.
El reflujo de sección hero
Prueba este tipo de sección hero a 2076x1498 y luego a ancho de móvil: el mismo orden aguanta, con la escala es fluida en lugar de escalonada. Los dos estados están descritos en el mismo brief.
Hacer tuyo este tipo de sección hero
No hace falta rehacer este tipo de sección hero para que sea tuyo. Sustituye el titular y el material, conserva la escala (pasos de espaciado de 10px y transiciones de 4s) y la maquetación seguirá leyéndose como fue diseñada. Sustituir es más barato que componer, y de eso se trata.
Las cifras detrás de sección hero
Una captura te dice cómo se ve la página; el brief te dice por qué. Con pasos de espaciado de 10px y transiciones de 4s se cierra la distancia entre las dos. Nada de este tipo de sección hero depende de un valor por defecto.
Preguntas frecuentes
¿Qué contiene en realidad el brief que hay detrás de Infrastructure?
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 2076x1498. En ningún punto la imagen renderizada funciona como fuente de la verdad.
¿Necesito React y Tailwind CSS para recrear Infrastructure?
Infrastructure 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.
¿Cómo trato los medios de Infrastructure en un proyecto de cliente?
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 2076x1498.
