Sobre esta plantilla
Vectrus Energy muestra una forma de construir este tipo de landing page para una empresa industrial y publica las instrucciones que lo generaron. El titular dice “Advancing resources for a cleaner future”, y el orden de landing page gira alrededor de esa línea. La paleta se queda en gris #C7CED7 de base y azul intenso #1D3045 para la tipografía, y el tipo es Helvetica, Arial. La entrega es React y Tailwind CSS: una página, sin plugins y sin herramientas de build entre tú y el diseño. El presupuesto de movimiento se agota en transiciones de 200ms, cubic-bezier(0.16,1,0.3,1) y un vídeo en bucle de fondo. Tómalo como el brief de landing page para una empresa industrial que tiene que aguantar una reconstrucción, no solo un primer vistazo.
Pensado para
- Los fundadores que le pasen el brief a una agencia usarán el marco de 1468x1080 como prueba de aceptación de la primera ronda.
- Los responsables de marketing que hereden un diseño de landing page usarán secciones de 500vh y pasos de espaciado de 40px para comprobar que una reescritura mantuvo la escala.
- Este diseño de landing page sirve a fundadores que necesitan una pantalla de prueba de que los textos de industria aguantan 5,6s de vídeo en bucle.
Qué incluye
- Una barra sin nada de más. La navegación es una sola fila, sin un segundo nivel debajo. Una superposición móvil toma el relevo por debajo del breakpoint de tableta. La marca se trata como tipografía y no como un logotipo compuesto, lo que mantiene la fila superior en una sola línea base.
- Tamaños fijados en el brief. El brief fija secciones de 500vh, pasos de espaciado de 40px, transiciones de 200ms y easing cubic-bezier(0.16,1,0.3,1) y deja el resto a la disposición, que es lo contrario de una escala que crece sola. No hay ningún valor intermedio inventado entre los citados; la lista de medidas es todo el sistema.
- El fotograma de póster importa. La primera pantalla es un único clip a 1468x1080, y todo lo demás se dispone encima. Un fotograma de póster a 1468x1080 sostiene la composición cuando no hay reproducción automática, así que la maquetación nunca se desmorona.
- Las funciones van como texto. Las funciones se componen como una lista en Helvetica, Arial y no como un muro de tarjetas. La lista se alinea a la izquierda con el mismo margen que el titular.
Movimiento e interacción
Movimiento ambiente sin librería de scroll
Un clip de 5,6s es toda la capa ambiente: se reproduce detrás del texto, da la vuelta sin corte visible y nunca reacciona al puntero. Un fotograma de portada hace de suplente cuando la reproducción automática está bloqueada, así que el movimiento suma y no es obligatorio. Graba o exporta a 1468x1080 o más ancho.
Tiempos en milisegundos
Los controles se resuelven en 200ms, lo bastante rápido para que la página responda al tocarla y no después. Los estados de foco usan el mismo tiempo que el hover, así que la respuesta de teclado y de puntero coincide. No publiques el valor por defecto del navegador.
Qué cambiar primero en Vectrus Energy
Cuando pongas tu propio material, conserva el recorte y el orden de capas. El medio es un bucle de 5,6s en 1468x1080. Esa colocación es lo que mantiene legible el texto. Compón el texto nuevo al mismo tamaño de display y vuelve a comprobar el contraste antes de añadir nada.
Cómo ordena Vectrus Energy la primera lectura
Podrías reordenar estos bloques y la página seguiría cargando. Pero dejaría de leerse como un argumento: navegación, el titular, la fila de cifras, la lista de funciones y el clip de fondo son una secuencia, y secciones de 500vh y pasos de espaciado de 40px solo funcionan en ese orden. Quien busca industria recibe la oferta antes que las opciones.
El reflujo de landing page
Frente a una maquetación de móvil que esconde secciones, esta las conserva y les cambia la forma: la escala es fluida en lugar de escalonada, la sección se mantiene a 500vh y la navegación se pliega en un menú móvil. La jerarquía es lo que sobrevive al reflujo.
Preguntas frecuentes
¿Cuánto ocupa el prompt que hay detrás de Vectrus Energy?
El brief capturado ocupa 8.300 caracteres y describe la maqueta, la escala tipográfica, la paleta y las transiciones. Copiarlo te da ese texto; si lo mandas a Studio, la misma petición queda preparada con la página ya descrita.
¿Qué puedo hacer con el brief de Vectrus Energy una vez lo tengo?
Todo lo que se cita en la página procede del brief capturado de 8.300 caracteres y no de un texto redactado a posteriori. Por eso los números y la prosa concuerdan.
¿Necesito React y Tailwind CSS para recrear Vectrus Energy?
Vectrus Energy 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.
