Pricing-First Home

The hero is the pricing cards themselves, followed immediately by a feature comparison table.

ProHome layoutshome-layout8 sections

Install

npx shadcn@latest add "https://webberui.com/r/pricing-first-home.json?t=<install token>"

The whole page lands in app/templates/pricing-first-home/. You can also use a long-lived licence key instead: set the Authorization: Bearer <key> header in the registries block of components.json — better for CI or a project several people share. What you may do with the source is in the licence terms.

Sections it ships with

Sections inside one template share the same design tokens, so swapping and reordering them keeps the colours, spacing and animation rhythm consistent. Pick and combine them in the section composer.

  1. 1

    Nav and Pricing Hero

    Top nav with a prices-up-front headline, a monthly/annual toggle and three pricing cards — the price list is the home page hero.

    hero
  2. 2

    Plan Comparison Table

    Grouped table laying out monitoring, alerting, status pages and security governance, comparing the three plans line by line.

    pricing
  3. 3

    Customer Trust Row

    Six customer names in a row, noting that these teams hand their 3 a.m. alerts to the platform.

    gallery
  4. 4

    Reliability Stats

    Dark band where four numbers back up the platform's own uptime, alert latency and global probe coverage.

    stats
  5. 5

    Customer Testimonials

    Three cards from an SRE lead, a CTO and a backend engineer on check frequency and transparent pricing.

    testimonial
  6. 6

    Billing FAQ

    Accordion covering five billing questions: the free plan, upgrades and downgrades, overages, payment methods and where data lives.

    faq
  7. 7

    Call to Action

    Violet-to-blue gradient card inviting visitors to start monitoring free, with a secondary button back to the plan comparison.

    cta
  8. 8

    Footer

    Brand blurb, social links and product/resources/company columns, with copyright and an all-systems-operational light.

    footer

What you get is source code

Not an npm package, not a zip file. Once installed, the page's TypeScript source sits in your repo: edit it however you like, no runtime dependency, no expiry mechanism. Your site keeps running even if ours goes down.

Browse the other 103 templates →