chore: update cloud prices (#3823)

Co-authored-by: Johannes <johannes@formbricks.com>

apps/web/app/(ee)/api/billing/stripe-webhook/lib/constants.ts

@@ -5,12 +5,12 @@ export const CLOUD_PRICING_DATA = {
       id: "free",
       featured: false,
       description: "Unlimited Surveys, Team Members, and more.",
-      price: { monthly: "€0", yearly: "€0" },
+      price: { monthly: "$0", yearly: "$0" },
       mainFeatures: [
         "Unlimited Surveys",
         "Unlimited Team Members",
-        "500 Monthly Responses",
-        "1.000 Monthly Identified Users",
+        "1,500 Monthly Responses",
+        "2,000 Monthly Identified Users",
         "Website Surveys",
         "App Surveys",
         "Unlimited Apps & Websites",
@@ -28,13 +28,13 @@ export const CLOUD_PRICING_DATA = {
       id: "startup",
       featured: false,
       description: "Everything in Free with additional features.",
-      price: { monthly: "€59", yearly: "€49" },
+      price: { monthly: "$39", yearly: "$390 " },
       mainFeatures: [
         "Everything in Free",
         "Remove Branding",
         "Email Support",
-        "2.000 Monthly Responses",
-        "2.500 Monthly Identified Users",
+        "5,000 Monthly Responses",
+        "7,500 Monthly Identified Users",
       ],
       href: "https://app.formbricks.com/auth/signup?plan=startup",
     },
@@ -43,15 +43,15 @@ export const CLOUD_PRICING_DATA = {
       id: "scale",
       featured: true,
       description: "Advanced features for scaling your business.",
-      price: { monthly: "€199", yearly: "€179" },
+      price: { monthly: "$149", yearly: "$1,490" },
       mainFeatures: [
         "Everything in Startup",
         "Team Access Roles",
         "Multi-Language Surveys",
         "Advanced Targeting",
         "Priority Support",
-        "5.000 Monthly Responses",
-        "20.000 Monthly Identified Users",
+        "10,000 Monthly Responses",
+        "30,000 Monthly Identified Users",
       ],
       href: "https://app.formbricks.com/auth/signup?plan=scale",
     },

apps/web/app/(ee)/environments/[environmentId]/settings/(organization)/billing/components/PricingTable.tsx

@@ -213,7 +213,7 @@ export const PricingTable = ({
 
         <div className="mx-auto mb-12">
           <div className="flex gap-x-2">
-            <div className="mb-4 flex w-fit max-w-xs cursor-pointer overflow-hidden rounded-lg border border-slate-200 p-1 lg:mb-0">
+            <div className="mb-4 flex w-fit cursor-pointer overflow-hidden rounded-lg border border-slate-200 p-1 lg:mb-0">
               <div
                 className={`flex-1 rounded-md px-4 py-0.5 text-center ${
                   planPeriod === "monthly" ? "bg-slate-200 font-semibold" : "bg-transparent"
@@ -222,11 +222,14 @@ export const PricingTable = ({
                 Monthly
               </div>
               <div
-                className={`flex-1 rounded-md px-4 py-0.5 text-center ${
+                className={`items-centerrounded-md flex-1 whitespace-nowrap py-0.5 pl-4 pr-2 text-center ${
                   planPeriod === "yearly" ? "bg-slate-200 font-semibold" : "bg-transparent"
                 }`}
                 onClick={() => handleMonthlyToggle("yearly")}>
-                Yearly
+                Annually
+                <span className="ml-2 inline-flex items-center rounded-full border border-green-200 bg-green-100 px-2.5 py-0.5 text-xs font-medium text-green-800">
+                  Get 2 months free 🔥
+                </span>
               </div>
             </div>
           </div>

packages/ui/components/PricingCard/index.tsx

@@ -128,8 +128,8 @@ export const PricingCard = ({
           </h2>
           {isCurrentPlan && <Badge text="Current Plan" type="success" size="normal" />}
         </div>
-        <div className="flex flex-col gap-6 sm:flex-row sm:items-end sm:justify-between lg:flex-col lg:items-stretch">
-          <div className="mt-2 flex items-center gap-x-4">
+        <div className="flex flex-col items-end gap-6 sm:flex-row sm:justify-between lg:flex-col lg:items-stretch">
+          <div className="mt-2 flex items-end gap-x-1">
             <p
               className={cn(
                 plan.featured ? "text-slate-900" : "text-slate-800",
@@ -139,10 +139,9 @@ export const PricingCard = ({
             </p>
             {plan.name !== "Enterprise" && (
               <div className="text-sm leading-5">
-                <p className={plan.featured ? "text-slate-900" : "text-slate-800"}>/ Month</p>
-                <p className={plan.featured ? "text-slate-500" : "text-slate-400"}>{`Billed ${
-                  planPeriod === "monthly" ? "monthly" : "yearly"
-                }`}</p>
+                <p className={plan.featured ? "text-slate-700" : "text-slate-600"}>
+                  / {planPeriod === "monthly" ? "Month" : "Year"}
+                </p>
               </div>
             )}
           </div>