Northwind Pricing

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.

Best for

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.

Layout and behavior

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.

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 Northwind wordmark and dropdown menus
• Mobile sheet navigation
• Headline, supporting copy, and a monthly or yearly billing switch
• Four pricing cards including a highlighted Pro tier and a custom Enterprise tier

Customize

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.

Dependencies

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