fix: increase pricing clarity (#2302)

2026-02-18 04:49:17 -06:00 · 2024-03-21 10:17:53 +01:00
parent 917847b5da
commit 90f978bcd6
6 changed files with 100 additions and 128 deletions
--- a/apps/formbricks-com/components/salespage/HeaderLight.tsx
+++ b/apps/formbricks-com/components/salespage/HeaderLight.tsx
@@ -13,6 +13,7 @@ const mainNav = [
  { name: "Link Surveys", href: "/open-source-form-builder", status: true },
  { name: "Website Surveys", href: "/website-survey", status: true },
  { name: "In-app Surveys", href: "/in-app-survey", status: true },
+  { name: "Pricing", href: "/pricing", status: true },
 ];

 export default function HeaderLight() {
@@ -25,22 +26,22 @@ export default function HeaderLight() {
        <FooterLogo className="h-8 w-auto sm:h-10" />
      </Link>

-      <div className="hidden lg:block">
+      <div className="hidden w-auto justify-around lg:block">
        {mainNav.map((item) => (
          <Link
            key={item.name}
            href={item.href}
-            className="px-8 text-sm font-medium text-slate-400 hover:text-slate-700 lg:text-base  dark:hover:text-slate-300">
+            className="px-4 text-sm font-medium text-slate-400 hover:text-slate-700 lg:px-6 lg:text-base xl:px-8  dark:hover:text-slate-300">
            {item.name}
          </Link>
        ))}
      </div>
      <Button
        variant="highlight"
-        className="hidden md:px-6 lg:block"
+        className="hidden whitespace-nowrap md:px-6 lg:block"
        onClick={() => {
          router.push("https://app.formbricks.com/auth/signup");
-          plausible("Demo_CTA_TryForFree");
+          plausible("Header_CTA_GetStarted");
        }}>
        Get started - it&apos;s free!
      </Button>
--- a/apps/formbricks-com/components/shared/EnterpriseEditionInfo.tsx
+++ b/apps/formbricks-com/components/shared/EnterpriseEditionInfo.tsx
@@ -3,8 +3,8 @@ import { Button } from "@formbricks/ui/Button";
 export const EnterpriseEditionInfo = () => {
  return (
    <div className="my-8 md:my-6">
-      <div className="px-8 md:px-16">
-        <div className=" rounded-xl bg-slate-100 px-4 py-8 md:px-12 dark:bg-slate-800">
+      <div className="md:px-16">
+        <div className=" rounded-xl bg-slate-100 p-8 md:px-12 dark:bg-slate-800">
          <h2 className="text-lg font-semibold leading-7 tracking-tight text-slate-800 md:text-2xl dark:text-slate-200">
            Enterprise Edition (Self-hosting)
          </h2>
@@ -14,13 +14,15 @@ export const EnterpriseEditionInfo = () => {
            Edition. If you would like to use these features on a self-hosted instance, you need to purchase
            an Enterprise license from us.
          </p>
-          <div className="mt-4 space-x-2">
+          <div className="mt-4 flex flex-col gap-2 sm:flex-row">
            <Button
+              className="inline"
              variant="darkCTA"
              onClick={() => window.open("https://cal.com/johannes/license", "_blank")}>
              Talk to us
            </Button>
            <Button
+              className="inline"
              onClick={() => window.open("/docs/self-hosting/enterprise", "_blank")}
              variant="secondary">
              More info on Enterprise Edition
--- a/apps/formbricks-com/components/shared/OpenSourceInfo.tsx
+++ b/apps/formbricks-com/components/shared/OpenSourceInfo.tsx
@@ -3,24 +3,26 @@ import { Button } from "@formbricks/ui/Button";
 export const OpenSourceInfo = () => {
  return (
    <div className="my-8 md:my-6">
-      <div className="px-8 md:px-16">
-        <div className=" rounded-xl bg-slate-100 px-4 py-8 md:px-12 dark:bg-slate-800">
+      <div className="md:px-16">
+        <div className=" rounded-xl bg-slate-100 p-8 md:px-12 dark:bg-slate-800">
          <h2 className="text-lg font-semibold leading-7 tracking-tight text-slate-800 md:text-2xl dark:text-slate-200">
            Open Source
          </h2>

          <p className=" my-2 text-slate-600 dark:text-slate-300">
-            Formbricks is an open source project. You can self-host it for free. We provide multiple easy
-            deployment options as per your customisation needs. We have documented the process of self-hosting
-            Formbricks on your own server using Docker & Bash Scripting.
+            Formbricks is an open source project. You can self-host the Community Edition for free. We provide
+            multiple easy deployment options as per your customisation needs. We have documented the process
+            of self-hosting Formbricks on your own server using Docker & Bash Scripting.
          </p>
-          <div className="mt-4 space-x-2">
+          <div className="mt-4 flex flex-col gap-2 sm:flex-row">
            <Button
+              className="inline"
              variant="darkCTA"
              onClick={() => window.open("https://github.com/formbricks/formbricks", "_blank")}>
              Star us on GitHub
            </Button>
            <Button
+              className="inline"
              onClick={() => window.open("/docs/self-hosting/deployment", "_blank")}
              variant="secondary">
              Read self-hosting docs
--- a/apps/formbricks-com/components/shared/PricingGetStarted.tsx
+++ b/apps/formbricks-com/components/shared/PricingGetStarted.tsx
@@ -3,17 +3,17 @@ import { Button } from "@formbricks/ui/Button";
 export const GetStartedWithPricing = ({ showDetailed }: { showDetailed: boolean }) => {
  return (
    <>
-      <div className="flex items-center gap-x-4 px-4 pb-4 md:gap-4 md:px-16">
+      <div className="mx-auto hidden max-w-4xl items-center gap-x-4 md:flex md:gap-4 ">
        <div className="w-1/3"></div>
        <div className="w-1/3 text-left text-sm text-slate-800 dark:text-slate-100">
          <p className="text-base font-semibold text-slate-800">
            Community Edition
-            <span className="ml-2 rounded-full bg-slate-700 px-3 py-0.5 text-sm text-slate-50">Free</span>
+            <span className="ml-2 rounded-full bg-slate-700 px-3 py-0.5 text-sm text-slate-50 ">Free</span>
          </p>

          {showDetailed && (
-            <p className="leading text-xs text-slate-500 md:text-base dark:text-slate-400">
-              Covers 95% of all features. Great for startups, hobbyists and to get started. Free forever.
+            <p className="leading text-xs text-slate-500  md:text-base dark:text-slate-400">
+              Covers 95% of all features. Great for startups and to get started. Free forever.
            </p>
          )}

@@ -21,7 +21,7 @@ export const GetStartedWithPricing = ({ showDetailed }: { showDetailed: boolean
            className="mt-4 w-full justify-center"
            variant="secondary"
            onClick={() => {
-              window.open("https://app.formbricks.com/", "_blank");
+              window.open("https://app.formbricks.com/auth/signup");
            }}>
            Get started - free
          </Button>
@@ -30,19 +30,21 @@ export const GetStartedWithPricing = ({ showDetailed }: { showDetailed: boolean
          <p className="text-base font-semibold text-slate-800">
            {" "}
            Enterprise Edition{" "}
-            <span className="ml-2 rounded-full bg-slate-700 px-3 py-0.5 text-sm text-slate-50">Freemium</span>
+            <span className="ml-2  rounded-full bg-slate-700 px-3 py-0.5 text-sm text-slate-50 ">
+              Freemium
+            </span>
          </p>
          {showDetailed && (
-            <p className="leading text-xs text-slate-500 md:text-base dark:text-slate-400">
+            <p className="leading  text-xs text-slate-500  md:text-base dark:text-slate-400">
              Includes all features with unlimited usage. Free credits every month to get started.
            </p>
          )}

          <Button
-            className="mt-4 w-full justify-center"
-            variant="highlight"
+            className="mt-4  w-full justify-center "
+            variant="darkCTA"
            onClick={() => {
-              window.open("https://app.formbricks.com/", "_blank");
+              window.open("https://app.formbricks.com/auth/signup");
            }}>
            Get started - free
          </Button>
--- a/apps/formbricks-com/components/shared/PricingTable.tsx
+++ b/apps/formbricks-com/components/shared/PricingTable.tsx
@@ -1,23 +1,23 @@
 import { CheckIcon, XIcon } from "lucide-react";

-import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@formbricks/ui/Tooltip";
+import { Button } from "@formbricks/ui/Button";

 export const PricingTable = ({ leadRow, pricing, endRow }) => {
  return (
-    <div className="grid grid-cols-1 px-4 md:gap-4 md:px-16 ">
-      <div className="rounded-xl px-4 md:px-12">
+    <div className="mx-auto grid max-w-4xl grid-cols-1 md:gap-4">
+      <div className="rounded-xl px-4 pb-4 md:px-12 md:pb-0">
        <div className="flex items-center gap-x-4">
          <div className="w-1/3 text-left font-semibold text-slate-700 md:text-xl dark:text-slate-200">
            {leadRow.title}
-            <span className="pl-2 text-sm font-normal text-slate-600">{leadRow.comparison}</span>
+            {/*             <span className="hidden pl-2 text-sm font-normal text-slate-600 lg:inline-block">
+              {leadRow.comparison}
+            </span> */}
          </div>
-          <div
-            className="flex w-1/3 items-center justify-center text-center text-sm font-semibold
-           text-slate-500 md:text-lg dark:text-slate-200">
+          <div className=" w-1/3 text-center font-medium text-slate-600 dark:text-slate-200">
            {leadRow.free}
          </div>

-          <div className="w-1/3 text-center font-semibold text-slate-700 md:text-lg dark:text-slate-200">
+          <div className="w-1/3 text-center  font-medium text-slate-600 dark:text-slate-200">
            {leadRow.paid}
          </div>
        </div>
@@ -39,42 +39,24 @@ export const PricingTable = ({ leadRow, pricing, endRow }) => {
                </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 ? (
-                <TooltipProvider delayDuration={50}>
-                  <Tooltip>
-                    <TooltipTrigger>
-                      <u>{feature.free}</u>
-                    </TooltipTrigger>
-                    <TooltipContent side={"top"}>
-                      <p className="py-2 text-center text-xs text-slate-500 dark:text-slate-400">
-                        {feature.addOnText}
-                      </p>
-                    </TooltipContent>
-                  </Tooltip>
-                </TooltipProvider>
+            <div className="flex w-1/3 items-center justify-center">
+              {typeof feature.free === "string" ? (
+                <span className="text-center text-sm font-medium leading-4 text-slate-600 md:text-base">
+                  {feature.free}
+                </span>
              ) : feature.free ? (
-                <CheckIcon className=" rounded-full border border-green-300 bg-green-100 p-0.5 text-green-500 dark:border-green-600 dark:bg-green-900 dark:text-green-300" />
+                <CheckIcon className="rounded-full border border-green-300 bg-green-100 p-0.5 text-green-500 dark:border-green-600 dark:bg-green-900 dark:text-green-300" />
              ) : (
                <XIcon className="rounded-full border border-red-300 bg-red-100 p-0.5 text-red-500 dark:border-red-500 dark:bg-red-300 dark:text-red-600" />
              )}
            </div>
-            <div className="flex w-1/3 items-center justify-center text-center text-sm text-slate-800 dark:text-slate-100">
-              {feature.addOnText ? (
-                <TooltipProvider>
-                  <Tooltip>
-                    <TooltipTrigger>
-                      <u>{feature.paid}</u>
-                    </TooltipTrigger>
-                    <TooltipContent side={"top"}>
-                      <p className="py-2 text-center text-xs text-slate-500 dark:text-slate-400">
-                        {feature.addOnText}
-                      </p>
-                    </TooltipContent>
-                  </Tooltip>
-                </TooltipProvider>
+            <div className="flex w-1/3 items-center justify-center">
+              {typeof feature.free === "string" ? (
+                <span className="text-center text-sm font-medium leading-4 text-slate-600 md:text-base">
+                  {feature.paid}
+                </span>
              ) : feature.paid ? (
-                <CheckIcon className=" rounded-full border border-green-300 bg-green-100 p-0.5 text-green-500 dark:border-green-600 dark:bg-green-900 dark:text-green-300" />
+                <CheckIcon className="rounded-full border border-green-300 bg-green-100 p-0.5 text-green-500 dark:border-green-600 dark:bg-green-900 dark:text-green-300" />
              ) : (
                <XIcon className="rounded-full border border-red-300 bg-red-100 p-0.5 text-red-500 dark:border-red-500 dark:bg-red-300 dark:text-red-600" />
              )}
@@ -85,15 +67,25 @@ export const PricingTable = ({ leadRow, pricing, endRow }) => {

      <div className="rounded-xl px-4 md:px-12">
        <div className="flex items-center gap-x-4">
-          <div className="w-1/3 text-left text-sm font-semibold text-slate-700 md:text-base dark:text-slate-200">
-            {endRow.title}
-          </div>
-          <div className="flex w-1/3 items-center justify-center text-center text-sm font-semibold text-slate-700 md:text-base dark:text-slate-200">
+          <div className="w-1/3"></div>
+          <div className="w-1/3 pt-4 text-center text-sm font-semibold text-slate-700 md:pt-0 md:text-xl dark:text-slate-200">
            <span>{endRow.free}</span>
+            <Button
+              variant="secondary"
+              className="mt-4 hidden w-full py-2 md:block"
+              href="https://app.formbricks.com/auth/signup">
+              Get started
+            </Button>
          </div>

-          <div className="w-1/3 text-center text-sm font-semibold text-slate-700 md:text-base dark:text-slate-200">
+          <div className="w-1/3 pt-4 text-center text-sm font-semibold text-slate-700 md:pt-0 md:text-xl dark:text-slate-200">
            {endRow.paid}
+            <Button
+              variant="darkCTA"
+              className="mt-4 hidden w-full py-2 md:block"
+              href="https://app.formbricks.com/auth/signup">
+              Get started
+            </Button>
          </div>
        </div>
      </div>
--- a/apps/formbricks-com/pages/pricing.tsx
+++ b/apps/formbricks-com/pages/pricing.tsx
@@ -10,36 +10,22 @@ const inProductSurveys = {
  leadRow: {
    title: "Website and In-App Surveys",
    comparison: "like HotJar Ask",
-    free: (
-      <div>
-        <span>250 Responses</span> <span className="text-slate-400">/ Month</span>{" "}
-      </div>
-    ),
-    paid: "Unlimited",
+    free: "Community Edition",
+    paid: "Enterprise Edition",
  },
  features: [
-    { name: "Unlimited Surveys", free: true, paid: true },
-    { name: "Unlimited Team Members", free: true, paid: true },
-    { name: "API Access", free: true, paid: true },
-    { name: "30+ Templates", free: true, paid: true },
-    { name: "Unlimited Responses", free: false, paid: true },
-    { name: "Team Role Management", free: false, paid: true },
-    { name: "Multi Language Surveys", free: false, paid: true },
+    { name: "Unlimited surveys", free: true, paid: true },
+    { name: "Unlimited team members", free: true, paid: true },
+    { name: "API access", free: true, paid: true },
+    { name: "35+ templates", free: true, paid: true },
+    { name: "Unlimited responses", free: "250 responses / month", paid: "Unlimited" },
+    { name: "Team role management", free: false, paid: true },
+    { name: "Multi-language surveys", free: false, paid: true },
  ],
  endRow: {
    title: "Website and In-App Surveys",
    free: "Free",
-    paid: (
-      <div>
-        <span>Free</span>{" "}
-        <span className="text-slate-400">
-          up to 250 responses / month <br />
-          then{" "}
-        </span>
-        <span>$0.15</span>
-        <span className="text-slate-400"> / submission</span>
-      </div>
-    ),
+    paid: "$0.15 / response",
  },
 };

@@ -47,35 +33,21 @@ const userSegmentation = {
  leadRow: {
    title: "User Segmentation",
    comparison: "like Segment",
-    free: (
-      <div>
-        <span>2500 Users</span> <span className="text-slate-400">/ Month</span>{" "}
-      </div>
-    ),
-    paid: "Unlimited",
+    free: "Community Edition",
+    paid: "Enterprise Edition",
  },
  features: [
-    { name: "Identify Users", free: true, paid: true },
-    { name: "Collect Events", free: true, paid: true },
-    { name: "Collect Attributes", free: true, paid: true },
-    { name: "Reusable Segments", free: true, paid: true },
-    { name: "Basic Targeting", free: true, paid: true },
-    { name: "Advanced Targeting", free: false, paid: true },
+    { name: "Collect events", free: true, paid: true },
+    { name: "Collect attributes", free: true, paid: true },
+    { name: "Reusable segments", free: true, paid: true },
+    { name: "Basic targeting", free: true, paid: true },
+    { name: "Identify users", free: "2,500 users / month", paid: "Unlimited" },
+    { name: "Advanced targeting", free: false, paid: true },
  ],
  endRow: {
    title: "User Segmentation",
    free: "Free",
-    paid: (
-      <div>
-        <span>Free</span>{" "}
-        <span className="text-slate-400">
-          up to 2500 users / month <br />
-          then{" "}
-        </span>
-        <span>$0.01</span>
-        <span className="text-slate-400"> / user</span>
-      </div>
-    ),
+    paid: "$0.01 / identified user",
  },
 };

@@ -83,26 +55,26 @@ const linkSurveys = {
  leadRow: {
    title: "Link Surveys",
    comparison: "like Typeform",
-    free: <span>Unlimited</span>,
-    paid: "Unlimited",
+    free: "Community Edition",
+    paid: "Enterprise Edition",
  },

  features: [
-    { name: "Unlimited Surveys", free: true, paid: true },
-    { name: "Unlimited Responses", free: true, paid: true },
-    { name: "Partial Responses", free: true, paid: true },
-    { name: "Multi-media Backgrounds", free: true, paid: true },
-    { name: "File Upload", free: true, paid: true },
-    { name: "Hidden Fields", free: true, paid: true },
-    { name: "Single Use Survey Links", free: true, paid: true },
-    { name: "Pin-protected Surveys", free: true, paid: true },
-    { name: "Custom Styling", free: true, paid: true },
-    { name: "Recall Information", free: true, paid: true },
+    { name: "Unlimited surveys", free: true, paid: true },
+    { name: "Unlimited responses", free: true, paid: true },
+    { name: "Partial responses", free: true, paid: true },
+    { name: "Multi-media backgrounds", free: true, paid: true },
+    { name: "File upload", free: true, paid: true },
+    { name: "Hidden fields", free: true, paid: true },
+    { name: "Single-use links", free: true, paid: true },
+    { name: "Pin-protected surveys", free: true, paid: true },
+    { name: "Custom styling", free: true, paid: true },
+    { name: "Recall information", free: true, paid: true },
    { name: "Book appointments", free: true, paid: true },
-    { name: "Collect Payments", free: true, paid: true, comingSoon: true },
-    { name: "Collect Signatures", free: true, paid: true, comingSoon: true },
+    { name: "Collect payments", free: true, paid: true, comingSoon: true },
+    { name: "Collect signatures", free: true, paid: true, comingSoon: true },
    { name: "Custom URL", free: false, paid: true, comingSoon: true },
-    { name: "Remove Formbricks Branding", free: false, paid: true },
+    { name: "Remove Formbricks branding", free: false, paid: true },
  ],

  endRow: {
@@ -213,6 +185,7 @@ const PricingPage = () => {
          pricing={integrations.features}
          endRow={integrations.endRow}
        />
+
        <div>
          {/* <PricingCalculator /> */}
          <OpenSourceInfo />