A pricing hero for Northwind with a soft alpine lake backdrop, refined editorial headline, monthly or yearly billing switch, and four side by side plan cards including a highlighted Pro tier.
Documentation
A full-viewport pricing hero anchored by a calm mountain landscape. The block pairs a refined display serif headline with a wide four column pricing grid so visitors can compare plans 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 commerce, operations, or inventory products that want a polished editorial feel.
The background image is rendered as a decorative full-bleed img with a soft white veil so dark text and white cards stay readable. The header keeps the Northwind 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 Pro 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 /northwind-pricing-background.png with your own hosted image path if needed. Edit the plans array to swap names, prices, icons, blurbs, and feature lists. The Pro card's highlight: true flag controls the most popular ribbon and color emphasis.
Requires lucide-react plus button, dropdown-menu, sheet, and switch from the shadcn registry.
More from this creator