Hero patterns
Ten hero sections built entirely with the Punky builder. Switch each demo to HTML view to see the generated code, or copy it to reuse it.
A clear headline that frames the topic in one sentence
A short subheading that expands the promise and makes people want to click. Two lines are enough to set the context.
Your web agency
Bespoke websites,
fast and built to last
Lead copy on the left, visual on the right. The 7/5 grid stays readable on mobile by stacking the columns.
A full-screen hero
with a background image
The gradient overlay keeps the text readable whatever image you choose.
Less, but better.
One message, lots of space. Ideal for a strong hook.
Results that speak for themselves
A hook followed by a row of key figures to reassure right away.
A hero that pops
in color
Full gradient background, white text and a contrasting CTA to maximize clicks.
Image on the left,
message on the right
Mirror variant of the split: handy for alternating the visual rhythm of a long page.
CodeIgniter 4 · Alpine · HTMX
Built for developers
A builder that outputs static Blade — versionable and readable. The code on the right is generated by this section.
Punky Builder
Brutalist variant using the theme tokens: .dots for the background, .hard for the hard shadow and .tilt-r for the tilt.
They trust us
A hook followed by a strip of client logos for social proof.
Visuals that echo each other
Two overlapping images create depth. Each image stays a native block, editable from the media library.
Our approach
Text on one side,
images on the other
Two stacked, offset images with an orange hard shadow (the .hard-o token, 7 px) for a bold graphic effect.
A rich hero
for a real homepage
Badge, title, hook, dual CTA then a row of mini-features with icons. All in native blocks.
Launch offer
A floating card set on the image
Full-screen image background + a content card offset to the left. A common pattern for product or event pages.