Sobre esta plantilla
Antes de rehacer cada sección hero para un producto de IA o SaaS, lee Planor: la composición y la especificación que hay detrás están aquí. El esquema de color es naranja #634635 de base y blanco #E5E7EB para la tipografía, y la página está compuesta en Inter. Se entrega como un único archivo HTML autocontenido, y la captura se fija a 1964x1402 antes de escribir código. El brief gasta su presupuesto de movimiento en transiciones de 0.2s y un vídeo en bucle de fondo. Tenlo abierto mientras escribes: el brief de 3.036 caracteres es la parte que se traslada a tu propia página.
Pensado para
- Los responsables de producto que tengan que presupuestar la implementación leerán un único archivo HTML autocontenido como el alcance real del trabajo.
- Si la maquetación parte de un único archivo HTML autocontenido, llévate primero un tamaño de display fijo de 58px y pasos de espaciado de 30px y no toques la paleta hasta que se asiente la cuadrícula.
- La página sirve a desarrolladores front-end que rehacen su sección hero de un producto de IA o SaaS en un único archivo HTML autocontenido y buscan los números que hay detrás del aspecto.
Qué incluye
- Una barra de navegación que no estorba. 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 acción lleva el acento mientras los enlaces se quedan en el color del texto, así la jerarquía de la barra coincide con la de la página que tiene debajo. Prueba la barra sobre tus propios medios antes de darle un fondo.
- Tamaños fijados en el brief. Toda medida del brief es un número que puedes volver a medir: un tamaño de display fijo de 58px, pasos de espaciado de 30px y transiciones de 0.2s. El valor más pequeño y el más grande de esa lista marcan el rango en el que trabaja la composición.
- Vídeo a marco completo, sin panel. Los medios son un solo clip de 6,4s recortado para cubrir el marco de 1964x1402, así que nunca aparecen bandas negras en ningún ancho. Un fotograma de póster a 1964x1402 sostiene la composición cuando no hay reproducción automática, así que la maquetación nunca se desmorona. Exporta a 1964x1402 o más ancho para que el recorte siga siendo honesto.
- 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. Mantén la fila en una sola línea.
Movimiento e interacción
Un bucle, no una secuencia
El movimiento ambiente es un clip de 6,4s en 1964x1402, en bucle discreto detrás del texto y sin reaccionar al puntero. Nada más en la página se anima de forma continua, así que el medio es lo único que pide atención.
Duraciones del brief
Una sola duración cubre las interacciones (0.2s), y eso hace que hover y pulsación se lean como un mismo sistema. El easing se especifica junto a la duración (0.2s), así que una reconstrucción no puede colar otra sensación sin avisar.
El orden detrás de sección hero
Este tipo de sección hero tiene un recorrido de lectura declarado. La navegación presenta el producto y le da al visitante que vuelve una forma de moverse que ya reconoce. A partir de ahí la mirada recorre navegación, el titular y el clip de fondo en secuencia, y eso es lo que impide que una sola pantalla se lea como una lista. Quien busca SaaS recibe la oferta antes que las opciones.
El reflujo de sección hero
No hay un diseño de móvil aparte que mantener: la navegación se pliega en un menú móvil, y la misma jerarquía se mantiene en ambos. La versión de móvil es una decisión, no un recurso de emergencia.
Hacer tuyo este tipo de sección hero
La sustitución directa tiene un límite: si tu producto necesita otra jerarquía, un tamaño de display fijo de 58px y pasos de espaciado de 30px se resistirán. En ese caso cambia primero el orden y después los valores. Sustituir es más barato que componer, y de eso se trata.
Preguntas frecuentes
¿Por qué la ficha nombra un único archivo HTML autocontenido?
Planor se construyó en un único archivo HTML autocontenido, 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.
¿Qué me llevo cuando copio el brief de Planor?
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 1964x1402. En ningún punto la imagen renderizada funciona como fuente de la verdad.
¿Cómo trato los medios de Planor 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 1964x1402.
