SaaS pricing calculator

I'll create an interactive pricing calculator for a SaaS product that considers seats, usage, and possible discounts. This will be a React component that allows users to input their requirements and see the calculated price in real-time.

Let's create the pricing calculator component:

This interactive pricing calculator component provides the following features:

Input fields for the number of seats and monthly usage (in GB).
A dropdown menu to select the plan (Basic, Pro, or Enterprise).
A checkbox to apply a 10% discount.
Real-time calculation of the total cost based on the user's inputs.
A breakdown of the costs, including seat cost, usage cost, and the applied discount.

The component is responsive and will adjust its layout for different screen sizes. On smaller screens, the input fields will stack vertically.

To use this component in your Next.js application, you can import it into your page file like this:

import PricingCalculator from '../components/pricing-calculator'

export default function PricingPage() {
  return (
    <div className="container mx-auto py-8">
      <h1 className="text-3xl font-bold mb-6 text-center">SaaS Pricing</h1>
      <PricingCalculator />
    </div>
  )
}

This will render the pricing calculator on your pricing page. Users can interact with the inputs to see how their choices affect the total cost in real-time.

Feel free to adjust the pricing structure, add more features, or modify the styling to better fit your specific SaaS product and branding.

Let's create the pricing calculator component:

This interactive pricing calculator component provides the following features:

Input fields for the number of seats and monthly usage (in GB).
A dropdown menu to select the plan (Basic, Pro, or Enterprise).
A checkbox to apply a 10% discount.
Real-time calculation of the total cost based on the user's inputs.
A breakdown of the costs, including seat cost, usage cost, and the applied discount.

The component is responsive and will adjust its layout for different screen sizes. On smaller screens, the input fields will stack vertically.

To use this component in your Next.js application, you can import it into your page file like this:

import PricingCalculator from '../components/pricing-calculator'

export default function PricingPage() {
  return (
    <div className="container mx-auto py-8">
      <h1 className="text-3xl font-bold mb-6 text-center">SaaS Pricing</h1>
      <PricingCalculator />
    </div>
  )
}

This will render the pricing calculator on your pricing page. Users can interact with the inputs to see how their choices affect the total cost in real-time.

Feel free to adjust the pricing structure, add more features, or modify the styling to better fit your specific SaaS product and branding.