A dreamy SaaS hero for CloudWay over a hot air balloon sunset sky, with an editorial headline, an AI insights pill, paired conversion actions, and a lightweight inline dashboard mockup.
Documentation
A full-viewport SaaS hero anchored by a soft sunset sky with hot air balloons drifting over clouds. The block pairs a refined display serif headline that emphasizes the word beyond with an AI insights announcement pill, paired conversion actions, and a self contained inline SVG dashboard mockup that anchors the bottom of the section.
Use this block as the opening section of an AI productivity, team collaboration, or workflow automation landing page where the first viewport should feel aspirational and a little dreamy.
The background image is rendered as a decorative full-bleed img with soft top and bottom gradient overlays so the headline, pill, CTAs, and dashboard card sit comfortably over the sky. Navigation keeps the CloudWay 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 CloudWay dashboard with a left sidebar, KPI cards, an AI insights grid, and small chart panels without reproducing the source design's detailed UI.
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 warm sky.
Replace /cloudway-ai-hero-background.png with your own hosted image path if needed. Update the navLinks array inline to match your product, and tune the brand purple by editing the #6c2bd9 accents.
Requires lucide-react plus button, dropdown-menu, and sheet from the shadcn registry.
More from this creator