StudioNope Themes Get the module →

The HubSpot hero module

One module. Every hero you'll ever ship.

Solid, gradient, image and video backgrounds. Forms, countdowns, parallax and letter-by-letter motion. Every color, font and pixel is a field — no code to touch.

Get the module See it in action
Live demos

One module, seven different sections

Every banner below is the same module — only the settings change. Different fonts, colors, buttons, layouts, backgrounds and motion. No custom CSS.

Demo 2 — Brand announcement

Logo + clean white

Solid white, centered, a modest logo and a single CTA — Space Grotesk.

Demo 3 — Full-bleed, mid-page

Image + parallax · 100vh

Edge-to-edge, full height, right-aligned — proof it works as a section anywhere.

Drop it anywhere on the page

A full-bleed section. Not a box.

100vh, edge to edge, mid-page. The same module you used up top — it adapts to wherever you place it.

Try full-width mode
Demo 4 — Lead-gen split

Light gray · content + form

A balanced split: copy left, a styled HubSpot form card right. Sora.

Private beta

Ship your launch page in days, not months.

Join the teams already building with Studio Nope. Grab a seat in the beta.

Request early access
Demo 5 — Launch event

Image background + countdown

Full-bleed event poster: concert image, bold condensed type, live countdown.

September 1 · Dublin & online

The 2026 Launch Event

Be in the room when it goes live. Save your seat for the keynote.

Reserve a seat Add to calendar
Demo 6 — Brand statement

Dark image · left · ghost buttons

A moody full-bleed statement on a dark image — Outfit, restrained.

Why Hero Banner Pro

Built for brands that mean business.

Restrained, confident and fully yours. Every detail is a field — set it once and it is on-brand everywhere.

Get started Read the docs
Demo 7 — Promo / sale

Image background + countdown

A Black Friday banner over a dark retail image — Oswald, red accent, pill, countdown.

48 hours only

Black Friday: 40% off everything

Our biggest sale of the year. Every theme and module, one price drop.

Shop the sale What's included

What it does

Hero Banner Pro is a single, self-contained section module covering every hero and banner use case — landing-page heroes, lead-gen banners, event countdowns, promos and section headers. It carries its own styles and vanilla JavaScript, so it works on any HubSpot page with no theme dependency.

Backgrounds

Choose None, Solid color, Gradient (two colors + angle), Image (with focal position) or Video (looping, muted, with a poster). An optional color overlay keeps text readable over images, video and gradients.

Content

Style — every value is a field

Every color, font, size, space, border, radius and shadow is an editor control wired through CSS variables — nothing is hardcoded. That includes section height (full viewport down to auto), full-width banner mode, alignment, container and text widths, and separate desktop/mobile padding and heading sizes.

Typography

Each element (eyebrow, heading, subheading, buttons, form, countdown) has its own font picker that sets family, weight, size and color together, plus line-height and letter-spacing.

Buttons & form

Full control of both buttons (background, hover, text, border, radius, padding) and the embedded form (card, labels, inputs, focus ring, submit button).

Animation

Pick an entrance animation (fade, slide, scale) with staggered timing, optional letter-by-letter heading animation, background parallax, and a scroll-down indicator that smooth-scrolls on click. All motion respects the visitor's reduced-motion preference.

Responsive & accessible

Configurable tablet and mobile breakpoints, mobile-specific padding and heading size, a real heading tag for SEO, and keyboard-friendly links. Built with IntersectionObserver and zero dependencies.