Sobre esta plantilla
CozyPaws es la referencia de sección hero para una marca de ecommerce, y el brief que hay detrás es una especificación de construcción completa, no un moodboard. El esquema de color es blanco #EFFDF0 de base, verde intenso #1A3D1A para la tipografía y naranja brillante #E86A10 para los acentos, y la página está compuesta en Inter. El montaje es React y Tailwind CSS; todas sus medidas están anotadas, y eso es lo que lo hace reutilizable. El brief gasta su presupuesto de movimiento en transiciones de 0.8s, cubic-bezier(0.16, 1, 0.3, 1) y un vídeo en bucle de fondo. Sirve de referencia cuando construyas este tipo de sección hero para una marca de ecommerce y quieras una composición terminada en lugar de un punto de partida.
Pensado para
- Este diseño de sección hero está pensado para agencias que necesitan que el marco de 1460x1080 sobreviva a tres rondas de cambios del cliente.
- Diseñadores que necesitan los números antes que nada: secciones de 70vh y pasos de espaciado de 60px, todo citado del brief.
- Este diseño de sección hero sirve a fundadores que necesitan una pantalla de prueba de que los textos de ecommerce aguantan 4,8s de vídeo en bucle.
Qué incluye
- Una barra sin nada de más. La fila gasta el contraste en un solo punto: la acción #E86A10, con la marca y los enlaces retenidos sobre el color del texto. Los enlaces se componen a un tamaño menor que la marca, y la acción en #E86A10 es el único elemento de la barra con peso.
- Una escala para tipo y marco. El brief declara sus tamaños en la captura (secciones de 70vh, pasos de espaciado de 60px, transiciones de 0.8s y easing cubic-bezier(0.16, 1, 0.3, 1)), así que un remontaje se puede verificar en lugar de aproximar. Las proporciones del marco se registran junto a los tamaños, así un remontaje también acierta con el formato.
- Clip sin márgenes tras el tipo. Los medios hacen trabajo atmosférico y no narrativo: un bucle de 4,8s a 1460x1080 detrás de todo lo demás. Un fotograma de póster a 1460x1080 sostiene la composición cuando no hay reproducción automática, así que la maquetación nunca se desmorona.
- La escala baja de golpe. La tipografía es Inter, y el brief asigna un papel a la fuente en lugar de mezclar por variedad. El peso, el interletraje y los pasos de tamaño están especificados, así que la jerarquía sobrevive a una sustitución. Los pasos de tamaño son valores fijos, y por eso un cambio de tipografía puede conservar la misma jerarquía.
Movimiento e interacción
Tiempos en milisegundos
Cada cambio de estado de la especificación lleva una duración: las transiciones se resuelven en torno a 0.8s usando cubic-bezier(0.16, 1, 0.3, 1). Nada queda en el valor por defecto del navegador, y por eso la página se siente diseñada y no animada. El easing se especifica junto a la duración (0.8s), así que una reconstrucción no puede colar otra sensación sin avisar.
Interacción contenida y local
El trabajo de puntero es pequeño y está especificado: estados hover en los botones y los enlaces y no en todas las tarjetas, aplicado a los elementos que ya parecen interactivos. Los objetivos interactivos son lo bastante grandes para tocarlos y el tratamiento del puntero es coherente entre ellos. Mantén los efectos de puntero en los controles.
Leer CozyPaws como especificación
Comprometerse con secciones de 70vh, pasos de espaciado de 60px, transiciones de 0.8s y easing cubic-bezier(0.16, 1, 0.3, 1) cambia flexibilidad por repetibilidad. Ese es el sentido de la referencia: la misma página en otra marca, sin un nuevo juego de suposiciones. Nada de este tipo de sección hero depende de un valor por defecto.
El orden detrás de sección hero
Lee la primera pantalla de una pasada y la oferta ya está clara: navegación, el titular, la insignia de anuncio, la fila de cifras y la cuadrícula de tarjetas llegan en secuencia, con secciones de 70vh y pasos de espaciado de 60px de por medio en lugar de separadores decorativos. Quien busca ecommerce recibe la oferta antes que las opciones.
El acierto de sección hero
En esta página hay una sola promesa, y secciones de 70vh y pasos de espaciado de 60px la sostienen en su sitio. Nada por debajo de la primera pantalla tiene que cargar también con la oferta. Da a quien lee páginas de ecommerce el camino más corto y honesto hasta la oferta.
Preguntas frecuentes
¿Cuánto ocupa el prompt que hay detrás de CozyPaws?
El brief capturado ocupa 6.443 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.
¿Cómo está organizada esta ficha de CozyPaws?
Todo lo que se cita en la página procede del brief capturado de 6.443 caracteres y no de un texto redactado a posteriori. Por eso los números y la prosa concuerdan.
¿Cuánto de CozyPaws depende de React y Tailwind CSS?
CozyPaws 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.
