Plans and Pricing page - v0 by Vercel

Build me a best-in-class Plans and Pricing page with the below plans. There should be options to pay monthly or annually. There should be a toggle at the top to switch between them. For the advanced plan, the CTA should say “Get a quote”. Lite: Address-level research. Best for users early in their STR research journey. Price: $24.99 per month when billed monthly. $175 per year when billed annually. Show this as $14.50 per month ($175 per year). Show that annual is 40% off. ✔️ Unlimited Rentalizer reports Tooltip: Get quick, detailed insights for any address worldwide ✔️ Revenue Projections Tooltip: Get projected revenue for the next 12 months, see high and low seasons, plus 2 years of historical revenue trends ✔️ Customizable Comp Sets Tooltip: Add or remove listings to refine your projections and get accurate revenue estimates. Use advanced filters to find the perfect comps. ✔️ Confidence Scores Tooltip: Instantly gauge the reliability of your revenue estimates with a clear confidence rating based on the variability of your current comps. ✔️ Save, Share & Export Tooltip: Keep all your estimates organized, easily access past reports, and export to a professional PDF or CSV for seamless analysis.

Pro: Market-level research and host benchmarking. Best for users that want to do deeper analysis before investing, and existing STR hosts. Price: $99.99 per month when billed monthly. $400 per year when billed annually. Show this as $34 per month ($400 per year). Show 67% off annual.

Everything in free plus… ✔️ Market Insights
Tooltip: Unlock every market and submarket dashboard to track market trends and stay ahead of the competition. Apply advanced filters for more precise data. ✔️ Historical & Future Reports
Tooltip: View past performance and future booking trends to make informed decisions. ✔️ Benchmarking & Comp Calendar Tooltip: Compare your STR listing’s performance against your custom comp set and track competitor pricing trends with a past and future-looking comp calendar. ✔️ Market Explorer Tooltip: Browse all active STR listings to analyze revenue, occupancy, and ADR. Search for properties for sale and assess their rental potential with key market data.

Advanced: Global deep advanced analysis. Best for property managers and users who manage multiple properties. Price: don’t show a price bc they need to contact sales. Everything in Pro plus, ✔️ Deep Historical Data Tooltip: Analyze market and comp set trends with data dating back to 2018. ✔️Powerful Filtering Tooltip: Unlock advanced filters, including amenities and property manager-specific insights. ✔️Advanced Table & Export Views Tooltip: View market data in table format and export with enhanced customization. ✔️Property Manager Insights Tooltip: Explore up to 500 property managers/host IDs with direct links to their listings. ✔️Revenue Comparison Tools Tooltip: Compare revenue across multiple comp sets and filter criteria for deeper analysis.

Show full message

246d ago

I'll create a best-in-class Plans and Pricing page with the specifications you've provided. I'll use React and Tailwind CSS to create a responsive and visually appealing design.

Here's the implementation of the Plans and Pricing page:

This implementation creates a responsive Plans and Pricing page with the following features:

A toggle switch to change between monthly and annual billing.
Three pricing cards for Lite, Pro, and Advanced plans.
Tooltips for features that provide additional information.
Responsive layout that adjusts for different screen sizes.
Visual highlights for the recommended plan (Pro plan in this case).
Badges to show the discount for annual billing.
A "Get a quote" CTA for the Advanced plan.

The page uses the shadcn/ui components for a consistent and modern look. The design is clean and easy to read, with clear pricing information and feature lists.

To further improve this page, you might consider:

Adding animations when toggling between monthly and annual pricing.
Implementing a FAQ section below the pricing cards.
Adding customer testimonials or trust signals.
Incorporating a comparison table for more detailed feature comparisons.

Let me know if you'd like any changes or additions to this implementation!

246d ago

I'd like to make a few changes

Under each plan, make it more clear what it's for. Lite should be for "Rentalizer (address-level research)". Pro should be for "Market Insights & Host Benchmarking". Avanced should be for "Deep Analysis". Under this, continue to show a line of text like "Best for users early in their STR research journey." etc.
When toggled to Monthly, don'y show "0% off" badge
Under the plans, add an option that says "Or, explore our Trial Market for free"

246d ago

I'll make those changes for you. Let's update the Plans and Pricing page with the requested modifications.

Here's the updated implementation of the Plans and Pricing page:

Here's a summary of the changes made:

Updated the plan structure to include a forText field that specifies what each plan is for. This is displayed prominently under the plan name.
Modified the badge display logic to only show the discount badge when the annual plan is selected. The "0% off" badge for monthly plans has been removed.
Added an option below the plans that says "Or, explore our Trial Market for free". This is styled as a link to allow users to easily navigate to the trial market.
Adjusted the styling slightly to accommodate these changes, ensuring that the new information is clear and easy to read.

These changes should make the purpose of each plan clearer, remove the unnecessary "0% off" badge for monthly plans, and provide an option for users to explore a free trial market.

Is there anything else you'd like to modify or add to this Plans and Pricing page?

246d ago

Adjust "Or, explore our Trial Market for free" to "Explore the Trial Market for Free" and make sure it looks like a link

246d ago

plans-and-pricing.tsx

I'll create a best-in-class Plans and Pricing page with the specifications you've provided. I'll use React and Tailwind CSS to create a responsive and visually appealing design.

Here's the implementation of the Plans and Pricing page:

This implementation creates a responsive Plans and Pricing page with the following features:

A toggle switch to change between monthly and annual billing.
Three pricing cards for Lite, Pro, and Advanced plans.
Tooltips for features that provide additional information.
Responsive layout that adjusts for different screen sizes.
Visual highlights for the recommended plan (Pro plan in this case).
Badges to show the discount for annual billing.
A "Get a quote" CTA for the Advanced plan.

The page uses the shadcn/ui components for a consistent and modern look. The design is clean and easy to read, with clear pricing information and feature lists.

To further improve this page, you might consider:

Adding animations when toggling between monthly and annual pricing.
Implementing a FAQ section below the pricing cards.
Adding customer testimonials or trust signals.
Incorporating a comparison table for more detailed feature comparisons.

Let me know if you'd like any changes or additions to this implementation!

246d ago

I'd like to make a few changes

Under each plan, make it more clear what it's for. Lite should be for "Rentalizer (address-level research)". Pro should be for "Market Insights & Host Benchmarking". Avanced should be for "Deep Analysis". Under this, continue to show a line of text like "Best for users early in their STR research journey." etc.
When toggled to Monthly, don'y show "0% off" badge
Under the plans, add an option that says "Or, explore our Trial Market for free"

246d ago

I'll make those changes for you. Let's update the Plans and Pricing page with the requested modifications.

Here's the updated implementation of the Plans and Pricing page:

Here's a summary of the changes made:

Updated the plan structure to include a forText field that specifies what each plan is for. This is displayed prominently under the plan name.
Modified the badge display logic to only show the discount badge when the annual plan is selected. The "0% off" badge for monthly plans has been removed.
Added an option below the plans that says "Or, explore our Trial Market for free". This is styled as a link to allow users to easily navigate to the trial market.
Adjusted the styling slightly to accommodate these changes, ensuring that the new information is clear and easy to read.

These changes should make the purpose of each plan clearer, remove the unnecessary "0% off" badge for monthly plans, and provide an option for users to explore a free trial market.

Is there anything else you'd like to modify or add to this Plans and Pricing page?

246d ago

Adjust "Or, explore our Trial Market for free" to "Explore the Trial Market for Free" and make sure it looks like a link

246d ago

plans-and-pricing.tsx