CloudWay AI Hero

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.

Best for

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.

Layout and behavior

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.

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 warm sky.

Included UI

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

Customize

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.

Dependencies

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