Sobre esta plantilla
Datacore Booking es la referencia de sección hero para un producto de IA o SaaS, y el brief que hay detrás es una especificación de construcción completa, no un moodboard. “Book your perfect stay instantly and hassle-free” es la línea que la maquetación está pensada para sostener. El esquema de color es negro #171717 de base, gris #D4D4D4 para la tipografía y índigo brillante #7B39FC para los acentos, y la página está compuesta en Manrope. Se entrega como React y Tailwind CSS, y la captura se fija a 800x553 antes de escribir código. Tenlo abierto mientras escribes: el brief de 2.826 caracteres es la parte que se traslada a tu propia página.
Pensado para
- Este diseño de sección hero responde a quien construye y quiere saber qué controlan realmente pasos de espaciado de 14px en la maquetación.
- 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 Datacore Booking.
- Si tu equipo ya trabaja con un sistema de diseño, esta clase de sección hero es el caso para gastar su único color saturado en #7B39FC.
Qué incluye
- Fila superior: marca, enlaces y acción. La navegación es una tira fina y no una banda: marca a la izquierda, enlaces hacia el centro-derecha y una acción en #7B39FC, todo en la capa superior de sección hero y sin fondo propio. Los enlaces se componen a un tamaño menor que la marca, y la acción en #7B39FC es el único elemento de la barra con peso.
- Los pasos de espaciado van cifrados. Aquí nada se mide a ojo. La especificación fija pasos de espaciado de 14px, y el resto de la maquetación se deriva de esos valores. No hay ningún valor intermedio inventado entre los citados; la lista de medidas es todo el sistema. Traslada los valores junto con la maquetación.
- Una fila, sin desplegables. Los enlaces van en una sola línea y a un único tamaño, y la acción #7B39FC cierra la fila por la derecha, de modo que el ojo termina donde acaba la navegación.
- El brief nombra los pasos. El espaciado se cita igual (pasos de espaciado de 14px), no como una escala que crece sola. Conserva los valores que parecen arbitrarios.
Movimiento e interacción
Estados de puntero, nada más
La respuesta se limita a estados hover en los botones y los enlaces y no en todas las tarjetas, y eso es lo que evita que una primera pantalla densa se sienta cargada. Nada en la página abre un modal ni secuestra el scroll; las interacciones se quedan en su elemento.
Estático a propósito
El brief deja fuera la animación y deja que la maquetación de 800x553 sostenga la página, con el hover y la pulsación como únicos cambios. El movimiento se trata como respuesta y no como adorno.
El brief de SaaS se sostiene
La razón de que esto funcione para un producto de IA o SaaS es que nunca pide al lector que arme el mensaje. “Book your perfect stay instantly and hassle-free” hace ese trabajo desde el primer fotograma. La maquetación, el tipo y el color están decididos (negro #171717 y índigo brillante #7B39FC, compuestos en Manrope), así que la primera pantalla se lee como un argumento cerrado y no como un montón de piezas. Datacore Booking enuncia la oferta una vez y deja que la composición la repita en lugar de añadir una segunda promesa.
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. El orden es lo último que cambia.
El orden detrás de sección hero
La página tiene un orden deliberado. La navegación presenta el producto y le da al visitante que vuelve una forma de moverse que ya reconoce. El titular ocupa el tamaño de display, la línea de apoyo explica la oferta y el acento índigo brillante #7B39FC marca la acción principal, así que el siguiente paso nunca está en duda. Nada más compite: no hay una cuadrícula de tarjetas antes de la primera decisión, y eso es lo que evita que este tipo de sección hero resulte pesado en un trabajo de SaaS. Quien busca SaaS recibe la oferta antes que las opciones.
Preguntas frecuentes
¿Qué me llevo cuando copio el brief de Datacore Booking?
El brief capturado ocupa 2.826 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.
¿Por qué la ficha nombra React y Tailwind CSS?
Datacore Booking 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 usar Datacore Booking 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 800x553.
