CloudWay Pricing

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.

Best for

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.

Layout and behavior

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.

Accessibility

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.

Included UI

• Decorative full-bleed background image
• Top navigation with CloudWay wordmark and dropdown menus
• Mobile sheet navigation
• Eyebrow, headline, supporting copy, and a monthly or yearly billing switch
• Four pricing cards including a highlighted Growth tier and a custom Enterprise tier
• Footer trial note

Customize

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.

Dependencies

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