diff --git a/apps/web/app/(landing)/welcome-upgrade/WelcomeUpgradeHeader.tsx b/apps/web/app/(landing)/welcome-upgrade/WelcomeUpgradeHeader.tsx new file mode 100644 index 0000000000..e0c311d875 --- /dev/null +++ b/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 ( +
+
+

+ Spend 50% less time on email +

+ {variant === "free-trial-emphasis" ? ( +
+

+ Start your 7-day FREE trial +

+

+ Join {userCount} users that use Inbox Zero to be more productive! +

+
+ ) : ( +

+ Join {userCount} users that use Inbox Zero +
+ to be more productive! +

+ )} +
+ +
+ 100% no-risk trial + Free for the first 7 days + Cancel anytime, hassle-free +
+
+ ); +} + +const TrialFeature = ({ children }: { children: React.ReactNode }) => ( +

+ + {children} +

+); diff --git a/apps/web/app/(landing)/welcome-upgrade/page.tsx b/apps/web/app/(landing)/welcome-upgrade/page.tsx index 70628b7e73..b386a2cf50 100644 --- a/apps/web/app/(landing)/welcome-upgrade/page.tsx +++ b/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 ( <> - -
-

- Spend 50% less time on email -

-

- Join {userCount} users that use Inbox Zero -
- to be more productive! -

-
- -
- 100% no-risk trial - Free for the first 7 days - Cancel anytime, hassle-free -
- - } - /> + } />