Patrones de hero
Diez secciones hero construidas Ăntegramente con el builder Punky. Cambia cada demo a la vista HTML para ver el cĂłdigo generado, o cĂłpialo para reutilizarlo.
Un tĂtulo claro que plantea el tema en una frase
Un subtĂtulo breve que desarrolla la promesa y da ganas de hacer clic. Con dos lĂneas basta para situar el contexto.
Tu agencia web
Sitios a medida,
rápidos y duraderos
Texto de gancho a la izquierda, visual a la derecha. El grid 7/5 sigue siendo legible en mĂłvil apilando las columnas.
Un hero a pantalla completa
con imagen de fondo
El overlay degradado garantiza la legibilidad del texto sea cual sea la imagen elegida.
Menos, pero mejor.
Un solo mensaje, mucho espacio. Ideal para un gancho potente.
Resultados que hablan por sĂ solos
Un gancho seguido de una fila de cifras clave para tranquilizar de inmediato.
Un hero que impacta
a todo color
Fondo degradado completo, texto blanco y un CTA contrastado para maximizar el clic.
Imagen a la izquierda,
mensaje a la derecha
Variante en espejo del split: útil para alternar el ritmo visual de una página larga.
CodeIgniter 4 · Alpine · HTMX
Construido para desarrolladores
Un builder que genera Blade estático, versionable y legible. El código de la derecha lo genera esta sección.
Punky Builder
Variante brutalista que usa los tokens del tema: .dots de fondo, .hard para la sombra dura y .tilt-r para la inclinaciĂłn.
ConfĂan en nosotros
Un gancho seguido de una banda de logos de clientes como prueba social.
Visuales que se responden
Dos imágenes superpuestas crean profundidad. Cada imagen sigue siendo un bloque nativo, editable desde la mediateca.
Nuestro enfoque
El texto de un lado,
las imágenes del otro
Dos imágenes superpuestas y desplazadas, con una sombra dura naranja (token .hard-o, 7 px) para un efecto gráfico marcado.
Un hero completo
para una verdadera página de inicio
Badge, tĂtulo, gancho, doble CTA y luego una fila de mini-features con iconos. Todo en bloques nativos.
Oferta de lanzamiento
Una tarjeta flotante sobre la imagen
Fondo de imagen a pantalla completa + tarjeta de contenido desplazada a la izquierda. Un patrón habitual para páginas de producto o evento.