Halo — Aurora Glass CTA Band

Summary

A full-bleed dark CTA band anchored by a frosted-glass panel that floats over a luminous aurora glow rising from the bottom edge. A slim context strip (eyebrow pill, headline, subhead, and a 4-up row of drawn prompt thumbnails) sets product context above the band; a sticky frosted nav sits above and a minimal footer below. Dark ink background, aqua-to-magenta gradient accent, Space Grotesk display + Inter body.

Style

Premium dark SaaS aesthetic. Near-black ink background (#0b0f14) with off-white text (#e8eef2) and a dual-accent gradient ramp from aqua (#2dd4bf) through cyan (#67e8f9) to magenta (#e879f9). The signature look is a frosted-glass panel (translucent white fill + heavy backdrop-blur + inset top highlight + a deep drop shadow) floating over a blurred radial aurora glow that rises from the bottom of the band, topped by a single sharp glowing horizon line. Subtle SVG film grain over dark sections for depth, a faint radial dot-grid texture, rounded-full pills and a rounded-[28px] glass card. Gradient-clipped accent text for one key phrase.

Layout & Structure

Full page: a sticky frosted nav, then a slim context strip (eyebrow pill, big headline, subhead, and a 4-up grid of drawn prompt thumbnails) that grounds the band as a real page section, then THE CTA BAND - a full-bleed dark section with an aurora glow rising from the bottom and a centered frosted-glass panel holding the eyebrow / gradient headline / subhead / dual buttons / inline trust row, then a minimal footer. Everything is centered and max-w-6xl; the band uses overflow-hidden so the aurora is clipped to it.

Sticky frosted nav

Context strip (above the band)

CTA band shell + aurora glow

Frosted glass CTA panel

Footer

Special Notes

The reusable value is the FROSTED-GLASS-ON-AURORA CTA BAND: a centered glass panel floating over a luminous aurora glow that rises from the bottom of a full-bleed dark section, with a single sharp glowing horizon line and one gradient-clipped accent phrase. Keep the dual aqua(#2dd4bf)->magenta(#e879f9) accent (via cyan #67e8f9) on near-black ink (#0b0f14) off-white (#e8eef2) text. The glow/bloom/horizon are pointer-events-none absolute layers clipped by the section's overflow-hidden; the glass needs real backdrop-blur to read. Display headings use Space Grotesk, body uses Inter. Icons via Iconify Phosphor (ph:*). Responsive: nav center links hide below md and the Sign in link below sm; the headline drops from 56px to 4xl with the <br/> hidden under sm; the CTA button row stacks full-width below sm; the third trust item and the footer right links reflow; no horizontal overflow at 390px.