Pricing copy

apps/web/app/(landing)/welcome-upgrade/WelcomeUpgradeHeader.tsx

@@ -0,0 +1,48 @@
+"use client";
+
+import { CheckCircleIcon } from "lucide-react";
+import { userCount } from "@/utils/config";
+import { usePricingCopyVariant } from "@/hooks/useFeatureFlags";
+
+export function WelcomeUpgradeHeader() {
+  const variant = usePricingCopyVariant();
+
+  return (
+    <div className="mb-8 flex flex-col items-start">
+      <div className="mx-auto text-center">
+        <h2 className="font-cal text-base leading-7 text-blue-600">
+          Spend 50% less time on email
+        </h2>
+        {variant === "free-trial-emphasis" ? (
+          <div>
+            <h1 className="mt-2 font-cal text-2xl text-gray-900 sm:text-3xl">
+              Start your 7-day FREE trial
+            </h1>
+            <p className="mt-2 text-lg text-gray-900 sm:text-xl">
+              Join {userCount} users that use Inbox Zero to be more productive!
+            </p>
+          </div>
+        ) : (
+          <h1 className="mt-2 font-cal text-2xl text-gray-900 sm:text-3xl">
+            Join {userCount} users that use Inbox Zero
+            <br />
+            to be more productive!
+          </h1>
+        )}
+      </div>
+
+      <div className="mx-auto mt-4 flex flex-col items-start gap-2">
+        <TrialFeature>100% no-risk trial</TrialFeature>
+        <TrialFeature>Free for the first 7 days</TrialFeature>
+        <TrialFeature>Cancel anytime, hassle-free</TrialFeature>
+      </div>
+    </div>
+  );
+}
+
+const TrialFeature = ({ children }: { children: React.ReactNode }) => (
+  <p className="flex items-center text-gray-900">
+    <CheckCircleIcon className="mr-2 h-4 w-4 text-green-500" />
+    {children}
+  </p>
+);

apps/web/app/(landing)/welcome-upgrade/page.tsx

@@ -1,44 +1,14 @@
-import { CheckCircleIcon } from "lucide-react";
 import { PricingLazy } from "@/app/(app)/premium/PricingLazy";
 import { Footer } from "@/app/(landing)/home/Footer";
 import { WelcomeUpgradeNav } from "@/app/(landing)/welcome-upgrade/WelcomeUpgradeNav";
-import { userCount } from "@/utils/config";
+import { WelcomeUpgradeHeader } from "@/app/(landing)/welcome-upgrade/WelcomeUpgradeHeader";
 
 export default function WelcomeUpgradePage() {
   return (
     <>
       <WelcomeUpgradeNav />
-      <PricingLazy
-        showSkipUpgrade
-        header={
-          <div className="mb-8 flex flex-col items-start">
-            <div className="mx-auto text-center">
-              <h2 className="font-cal text-base leading-7 text-blue-600">
-                Spend 50% less time on email
-              </h2>
-              <p className="mt-2 font-cal text-2xl text-gray-900 sm:text-3xl">
-                Join {userCount} users that use Inbox Zero
-                <br />
-                to be more productive!
-              </p>
-            </div>
-
-            <div className="mx-auto mt-4 flex flex-col items-start gap-2">
-              <TrialFeature>100% no-risk trial</TrialFeature>
-              <TrialFeature>Free for the first 7 days</TrialFeature>
-              <TrialFeature>Cancel anytime, hassle-free</TrialFeature>
-            </div>
-          </div>
-        }
-      />
+      <PricingLazy showSkipUpgrade header={<WelcomeUpgradeHeader />} />
       <Footer />
     </>
   );
 }
-
-const TrialFeature = ({ children }: { children: React.ReactNode }) => (
-  <p className="flex items-center text-gray-900">
-    <CheckCircleIcon className="mr-2 h-4 w-4 text-green-500" />
-    {children}
-  </p>
-);

apps/web/hooks/useFeatureFlags.ts

@@ -59,3 +59,12 @@ export function useOnboardingVariant() {
     "control"
   );
 }
+
+export type PricingCopyVariant = "control" | "free-trial-emphasis";
+
+export function usePricingCopyVariant() {
+  return (
+    (useFeatureFlagVariantKey("pricing-copy") as PricingCopyVariant) ||
+    "control"
+  );
+}

version.txt

@@ -1 +1 @@
-v2.6.2
+v2.6.3