mirror of
https://github.com/formbricks/formbricks.git
synced 2026-05-04 19:39:39 -05:00
chore: include new features in pricing table (#1438)
This commit is contained in:
Matti Nannt
@@ -1,162 +0,0 @@
|
||||
import { Button } from "@formbricks/ui/Button";
|
||||
import clsx from "clsx";
|
||||
import HeadingCentered from "./HeadingCentered";
|
||||
import { CheckIcon } from "@heroicons/react/24/outline";
|
||||
import { usePlausible } from "next-plausible";
|
||||
import { useRouter } from "next/router";
|
||||
|
||||
const tiers = [
|
||||
{
|
||||
name: "Self-hosting",
|
||||
priceMonthly: "free",
|
||||
paymentRythm: "/always",
|
||||
button: "secondary",
|
||||
discounted: false,
|
||||
highlight: false,
|
||||
description: "Host Formbricks on your own server.",
|
||||
features: [
|
||||
"All Free features",
|
||||
"Easy self-hosting (Docker)",
|
||||
"Unlimited surveys",
|
||||
"Unlimited responses",
|
||||
"Unlimited team members",
|
||||
],
|
||||
ctaName: "Read docs",
|
||||
plausibleGoal: "Pricing_CTA_SelfHosting",
|
||||
href: "/docs/self-hosting/deployment",
|
||||
},
|
||||
{
|
||||
name: "Cloud",
|
||||
href: "https://app.formbricks.com/auth/signup",
|
||||
priceMonthly: "$0",
|
||||
paymentRythm: "/month",
|
||||
button: "highlight",
|
||||
discounted: false,
|
||||
highlight: true,
|
||||
description: "Start with the 'Free forever' plan.",
|
||||
features: [
|
||||
"Unlimited surveys",
|
||||
"In-product surveys",
|
||||
"Link surveys",
|
||||
"Remove branding",
|
||||
"Granular targeting",
|
||||
"30+ templates",
|
||||
"API access",
|
||||
"Integrations (Zapier, Make, ...)",
|
||||
"Unlimited team members",
|
||||
"100 responses per survey",
|
||||
],
|
||||
ctaName: "Get started",
|
||||
plausibleGoal: "Pricing_CTA_FreePlan",
|
||||
},
|
||||
{
|
||||
name: "Cloud Pro",
|
||||
href: "https://app.formbricks.com/auth/signup",
|
||||
priceMonthly: "$99",
|
||||
paymentRythm: "/month",
|
||||
button: "secondary",
|
||||
discounted: false,
|
||||
highlight: false,
|
||||
description: "All features, unlimited usage.",
|
||||
features: ["Everything in 'Cloud'", "Unlimited responses per survey"],
|
||||
ctaName: "Start for free",
|
||||
plausibleGoal: "Pricing_CTA_ProPlan",
|
||||
},
|
||||
];
|
||||
|
||||
export default function Pricing() {
|
||||
const plausible = usePlausible();
|
||||
const router = useRouter();
|
||||
|
||||
return (
|
||||
<div className="-mt-10 pb-20">
|
||||
<div className="mx-auto max-w-7xl py-4 sm:px-6 sm:pb-6 lg:px-8" id="pricing">
|
||||
<HeadingCentered heading="One price, unlimited usage." teaser="Pricing" />
|
||||
|
||||
<div className="mx-auto space-y-4 px-4 lg:grid lg:grid-cols-3 lg:gap-6 lg:space-y-0 lg:px-0">
|
||||
{tiers.map((tier) => (
|
||||
<div
|
||||
key={tier.name}
|
||||
className={clsx(
|
||||
`h-fit rounded-lg shadow-sm`,
|
||||
tier.highlight
|
||||
? "border border-slate-300 bg-slate-200 dark:border-slate-500 dark:bg-slate-800"
|
||||
: "bg-slate-100 dark:bg-slate-700"
|
||||
)}>
|
||||
<div className="p-8">
|
||||
<h2
|
||||
className={clsx(
|
||||
"inline-flex text-3xl font-bold",
|
||||
tier.highlight
|
||||
? "text-slate-700 dark:text-slate-200"
|
||||
: "text-slate-500 dark:text-slate-300"
|
||||
)}>
|
||||
{tier.name}
|
||||
</h2>
|
||||
<p className="mt-4 whitespace-pre-wrap text-sm text-slate-600 dark:text-slate-300">
|
||||
{tier.description}
|
||||
</p>
|
||||
<ul className="mt-4 space-y-4">
|
||||
{tier.features.map((feature, index) => (
|
||||
<li key={index} className="flex items-start">
|
||||
<div className="rounded-full border border-green-300 bg-green-100 p-0.5 dark:border-green-600 dark:bg-green-900">
|
||||
<CheckIcon className="h-5 w-5 p-0.5 text-green-500 dark:text-green-300" />
|
||||
</div>
|
||||
<span className="ml-2 text-sm text-slate-500 dark:text-slate-400">{feature}</span>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
<p className="mt-8">
|
||||
<span
|
||||
className={clsx(
|
||||
`text-4xl font-light`,
|
||||
tier.highlight
|
||||
? "text-slate-800 dark:text-slate-100"
|
||||
: "text-slate-500 dark:text-slate-200",
|
||||
tier.discounted ? "decoration-brand line-through" : ""
|
||||
)}>
|
||||
{tier.priceMonthly}
|
||||
</span>{" "}
|
||||
<span className="text-4xl font-bold text-slate-900 dark:text-slate-50">
|
||||
{tier.discounted && "$49"}
|
||||
</span>
|
||||
<span
|
||||
className={clsx(
|
||||
"text-base font-medium",
|
||||
tier.highlight
|
||||
? "text-slate-500 dark:text-slate-400"
|
||||
: "text-slate-400 dark:text-slate-500"
|
||||
)}>
|
||||
{tier.paymentRythm}
|
||||
</span>
|
||||
</p>
|
||||
|
||||
<Button
|
||||
onClick={() => {
|
||||
plausible(`${tier.plausibleGoal}`);
|
||||
router.push(`${tier.href}`);
|
||||
}}
|
||||
className={clsx(
|
||||
"mt-6 w-full justify-center py-4 text-lg shadow-sm",
|
||||
tier.highlight
|
||||
? ""
|
||||
: "bg-slate-300 hover:bg-slate-200 dark:bg-slate-600 dark:hover:bg-slate-500"
|
||||
)}
|
||||
variant={tier.highlight ? "highlight" : "secondary"}>
|
||||
{tier.ctaName}
|
||||
</Button>
|
||||
|
||||
{tier.name == "Cloud Pro" && (
|
||||
<p className="mt-1.5 text-center text-xs text-slate-500">No Creditcard required.</p>
|
||||
)}
|
||||
{tier.name == "Cloud" && (
|
||||
<p className="mt-1.5 text-center text-xs text-slate-500">Free forever 🤍</p>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -31,6 +31,11 @@ export const PricingTable = ({ leadRow, pricing, endRow }) => {
|
||||
Addon
|
||||
</span>
|
||||
)}
|
||||
{feature.comingSoon && (
|
||||
<span className=" mx-2 bg-blue-100 p-1 text-xs text-slate-400 dark:bg-slate-700 dark:text-teal-500">
|
||||
coming soon
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
<div className="flex w-1/3 items-center justify-center text-center text-sm text-slate-800 dark:text-slate-100">
|
||||
{feature.addOnText ? (
|
||||
|
||||
@@ -23,8 +23,9 @@ const inProductSurveys = {
|
||||
{ name: "Third-Party Integrations", free: true, paid: true },
|
||||
{ name: "Unlimited Team Members", free: true, paid: true },
|
||||
{ name: "Unlimited Responses per Survey", free: true, paid: true },
|
||||
{ name: "Advanced User Targeting", free: false, paid: true },
|
||||
{ name: "Multi Language", free: false, paid: true },
|
||||
{ name: "Team Role Management", free: false, paid: true },
|
||||
{ name: "Advanced User Targeting", free: false, paid: true, comingSoon: true },
|
||||
{ name: "Multi Language Surveys", free: false, paid: true, comingSoon: true },
|
||||
|
||||
{
|
||||
name: "Custom URL for Link Surveys",
|
||||
|
||||
Reference in New Issue
Block a user