Ascent Hero

A full-viewport SaaS hero anchored by a warm mountain sunrise visual. The block uses a supplied full-bleed background image, a centered headline in a refined display serif, an announcement pill, paired conversion actions, and a lightweight inline SVG dashboard mockup that anchors the bottom of the section.

Best for

Use this block as the opening section of a planning, analytics, project management, or team productivity landing page where the first viewport should feel editorial and aspirational.

Layout and behavior

The background image is rendered as a decorative full-bleed img with a soft top and bottom gradient overlay so the headline and CTAs sit comfortably over the sky. Navigation keeps the Ascent brand at left, primary product links centered on wide desktop, and account actions on the right. On narrower screens, the full nav collapses into a shadcn Sheet side menu so the header never crowds or overflows. The decorative SVG mockup hints at a dashboard layout without reproducing the source design's detailed UI.

Accessibility

The background image and dashboard mockup are decorative (aria-hidden). Dropdown nav, mobile sheet links, and CTAs use shadcn/Radix primitives with accessible anchor semantics via asChild. Foreground text and controls are tuned for contrast over the lighter sky.

Included UI

• Decorative full-bleed background image
• Top navigation with Ascent wordmark and dropdown menus
• Mobile sheet navigation
• Announcement pill
• Headline, supporting copy, and two CTAs
• Lightweight decorative SVG dashboard mockup

Customize

Replace /ascent-hero-background.png with your own hosted image path if needed. Update the navLinks array inline to match your product.

Dependencies

Requires lucide-react plus button, dropdown-menu, and sheet from the shadcn registry.