From 90f978bcd67ab28e72162d29dcf3b9c87e10b95f Mon Sep 17 00:00:00 2001
From: Johannes <72809645+jobenjada@users.noreply.github.com>
Date: Thu, 21 Mar 2024 10:17:53 +0100
Subject: [PATCH] fix: increase pricing clarity (#2302)

---
 .../components/salespage/HeaderLight.tsx      |  9 +-
 .../shared/EnterpriseEditionInfo.tsx          |  8 +-
 .../components/shared/OpenSourceInfo.tsx      | 14 +--
 .../components/shared/PricingGetStarted.tsx   | 22 +++--
 .../components/shared/PricingTable.tsx        | 78 +++++++--------
 apps/formbricks-com/pages/pricing.tsx         | 97 +++++++------------
 6 files changed, 100 insertions(+), 128 deletions(-)

diff --git a/apps/formbricks-com/components/salespage/HeaderLight.tsx b/apps/formbricks-com/components/salespage/HeaderLight.tsx
index d9b3a00190..f1aa665346 100644
--- 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>
diff --git a/apps/formbricks-com/components/shared/EnterpriseEditionInfo.tsx b/apps/formbricks-com/components/shared/EnterpriseEditionInfo.tsx
index 704b013af2..0d71da0c45 100644
--- 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
diff --git a/apps/formbricks-com/components/shared/OpenSourceInfo.tsx b/apps/formbricks-com/components/shared/OpenSourceInfo.tsx
index 895f61baec..3b0edbd08c 100644
--- 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
diff --git a/apps/formbricks-com/components/shared/PricingGetStarted.tsx b/apps/formbricks-com/components/shared/PricingGetStarted.tsx
index b22be52119..2a0aa307b8 100644
--- 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>
diff --git a/apps/formbricks-com/components/shared/PricingTable.tsx b/apps/formbricks-com/components/shared/PricingTable.tsx
index 49ec40484f..ef377241cf 100644
--- 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>
diff --git a/apps/formbricks-com/pages/pricing.tsx b/apps/formbricks-com/pages/pricing.tsx
index 9157ee2fe4..6401f02611 100644
--- 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 />