A dreamy SaaS pricing hero for CloudWay over a hot air balloon sunset sky, with an editorial headline, a monthly or yearly billing switch, and four plan cards including a highlighted Growth tier.
Documentation
A full-viewport pricing 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 your with a small uppercase eyebrow, a monthly or yearly billing switch, and four plan cards so visitors can compare prices at a glance on the first viewport.
Use this block as the pricing page hero, or as the conversion section of a long form landing page, for AI productivity, team collaboration, or workflow automation products that want an aspirational editorial feel.
The background image is rendered as a decorative full-bleed img with soft top and bottom gradient overlays so the headline, switch, and white cards stay readable over the sky. The header 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. A switch toggles every visible plan price between monthly and yearly amounts. The Growth tier is visually elevated as the recommended option.
The background image is decorative (aria-hidden). The billing switch is labeled, and the dropdown nav and mobile sheet links use shadcn/Radix primitives with accessible anchor semantics via asChild.
Replace /cloudway-pricing-background.png with your own hosted image path if needed. Edit the plans array to swap names, prices, blurbs, and feature lists. The Growth card's highlight: true flag controls the popular pill and color emphasis. Tune the brand purple by editing the #6c2bd9 accents.
Requires lucide-react plus button, dropdown-menu, sheet, and switch from the shadcn registry.
More from this creator