Add a/b test for home

apps/web/app/(landing)/home/CTAButtons.tsx

@@ -1,10 +1,21 @@
 "use client";
 
 import { Button } from "@/components/Button";
-import { usePostHog } from "posthog-js/react";
+import { env } from "@/env";
+import { useFeatureFlagVariantKey, usePostHog } from "posthog-js/react";
+
+const variants: Record<string, string> = {
+  control: "Get Started for Free",
+  "cta-get-inbox-zero": "Get Your Inbox to Zero",
+};
 
 export function CTAButtons() {
   const posthog = usePostHog();
+  const variant = useFeatureFlagVariantKey(
+    env.NEXT_PUBLIC_POSTHOG_HERO_AB || "",
+  );
+
+  if (variant === "cta-get-inbox-zero") return null;
 
   return (
     <Button
@@ -16,7 +27,8 @@ export function CTAButtons() {
       }}
       color="blue"
     >
-      Get Started for Free
+      {variants[(variant as string | undefined) || "control"] ||
+        variants.control}
     </Button>
   );
 }

apps/web/app/(landing)/home/FAQs.tsx

@@ -1,3 +1,8 @@
+"use client";
+
+import { useFeatureFlagVariantKey } from "posthog-js/react";
+import { env } from "@/env";
+
 const faqs = [
   {
     question: "Do you store my emails?",
@@ -103,3 +108,13 @@ export function FAQs() {
     </div>
   );
 }
+
+export function FAQsHome() {
+  const variant = useFeatureFlagVariantKey(
+    env.NEXT_PUBLIC_POSTHOG_HERO_AB || "",
+  );
+
+  if (variant === "short-page") return null;
+
+  return <FAQs />;
+}

apps/web/app/(landing)/home/Features.tsx

@@ -1,3 +1,6 @@
+"use client";
+
+import { env } from "@/env";
 import clsx from "clsx";
 import {
   BarChart2Icon,
@@ -12,6 +15,7 @@ import {
   TagIcon,
 } from "lucide-react";
 import Image from "next/image";
+import { useFeatureFlagVariantKey, usePostHog } from "posthog-js/react";
 
 const features = [
   {
@@ -82,7 +86,7 @@ function FeaturesOld() {
   );
 }
 
-export function Features() {
+export function FeaturesPrivacy() {
   return (
     <div className="bg-white py-24 sm:py-32" id="features">
       <div className="mx-auto max-w-7xl px-6 lg:px-8">
@@ -269,6 +273,12 @@ const featuresStats = [
 ];
 
 export function FeaturesStats() {
+  const variant = useFeatureFlagVariantKey(
+    env.NEXT_PUBLIC_POSTHOG_HERO_AB || "",
+  );
+
+  if (variant === "short-page") return null;
+
   return (
     <FeaturesWithImage
       imageSide="right"
@@ -314,3 +324,24 @@ export function FeaturesUnsubscribe() {
     />
   );
 }
+
+export function FeaturesHome() {
+  const posthog = usePostHog();
+  posthog.featureFlags.override({ "hero-copy-3": "short-page" });
+
+  const variant = useFeatureFlagVariantKey(
+    env.NEXT_PUBLIC_POSTHOG_HERO_AB || "",
+  );
+
+  if (variant === "short-page") return <FeaturesAutomation />;
+
+  return (
+    <>
+      {variant === "no-privacy" ? null : <FeaturesPrivacy />}
+      <FeaturesAutomation />
+      <FeaturesUnsubscribe />
+      <FeaturesColdEmailBlocker />
+      <FeaturesStats />
+    </>
+  );
+}

apps/web/app/(landing)/home/HeroAB.tsx

@@ -9,25 +9,30 @@ const copy: {
     subtitle: string;
   };
 } = {
-  automate: {
-    title: "Automate Your Email Inbox",
-    subtitle:
-      "Automate your email with our AI assistant, bulk unsubscribe from newsletters, block cold emails, and view your analytics. Open-source.",
-  },
-  autopilot: {
-    title: "Autopilot For Your Email",
+  control: {
+    title: "Stop wasting half your day in Gmail",
     subtitle:
-      "Automate your email with our AI assistant by telling it in plain English how to handle your emails. Open-source.",
+      "Automate your email with AI, bulk unsubscribe from newsletters, and block cold emails. Open-source.",
   },
-  clean: {
+  "clean-up-in-minutes": {
     title: "Clean Up Your Inbox In Minutes",
     subtitle:
       "Bulk unsubscribe from newsletters, automate your emails with AI, block cold emails, and view your analytics. Open-source.",
   },
-  control: {
-    title: "Clean Up Your Inbox In Minutes",
+  "how-busy-founders": {
+    title: "How busy founders manage their email",
+    subtitle:
+      "Automate your email with AI, bulk unsubscribe from newsletters, and block cold emails. Open-source.",
+  },
+  "email-assistant-in-30": {
+    title: "Set up your AI email assistant in just 30 minutes",
+    subtitle:
+      "Automate your email with AI, bulk unsubscribe from newsletters, and block cold emails. Open-source",
+  },
+  "half-the-time": {
+    title: "Spend 50% less time on email",
     subtitle:
-      "Newsletter cleaner, AI automation, cold email blocker, and analytics. Inbox Zero is the open-source email app that puts you back in control of your inbox.",
+      "Automate your email with AI, bulk unsubscribe from newsletters, and block cold emails. Open-source.",
   },
 };
 
@@ -37,7 +42,7 @@ export function HeroHeadingAB(props: { variantKey: string }) {
   if (!variant) return <Skeleton className="h-28 w-full rounded" />;
   if (typeof variant !== "string") return <>{copy.control.title}</>;
 
-  return <>{copy[variant].title || copy.control.title}</>;
+  return <>{copy[variant]?.title || copy.control.title}</>;
 }
 
 export function HeroSubtitleAB(props: { variantKey: string }) {
@@ -46,5 +51,5 @@ export function HeroSubtitleAB(props: { variantKey: string }) {
   if (!variant) return <Skeleton className="h-24 w-full rounded" />;
   if (typeof variant !== "string") return <>{copy.control.subtitle}</>;
 
-  return <>{copy[variant].subtitle || copy.control.subtitle}</>;
+  return <>{copy[variant]?.subtitle || copy.control.subtitle}</>;
 }

apps/web/app/(landing)/page.tsx

@@ -1,20 +1,14 @@
 import { Suspense } from "react";
 import type { Metadata } from "next";
 import { Hero } from "@/app/(landing)/home/Hero";
-import {
-  Features,
-  FeaturesUnsubscribe,
-  FeaturesAutomation,
-  FeaturesColdEmailBlocker,
-  FeaturesStats,
-} from "@/app/(landing)/home/Features";
+import { FeaturesHome } from "@/app/(landing)/home/Features";
 import { Testimonials } from "@/app/(landing)/home/Testimonials";
 import { Pricing } from "@/app/(app)/premium/Pricing";
-import { FAQs } from "@/app/(landing)/home/FAQs";
+import { FAQsHome } from "@/app/(landing)/home/FAQs";
 import { CTA } from "@/app/(landing)/home/CTA";
 import { BasicLayout } from "@/components/layouts/BasicLayout";
-// import { HeroHeadingAB, HeroSubtitleAB } from "@/app/(landing)/home/HeroAB";
-// import { env } from "@/env";
+import { HeroHeadingAB, HeroSubtitleAB } from "@/app/(landing)/home/HeroAB";
+import { env } from "@/env";
 
 export const metadata: Metadata = {
   alternates: { canonical: "/" },
@@ -24,33 +18,29 @@ export default function Home() {
   return (
     <BasicLayout>
       <Hero
-      // title={
-      //   env.NEXT_PUBLIC_POSTHOG_HERO_AB ? (
-      //     <Suspense>
-      //       <HeroHeadingAB variantKey={env.NEXT_PUBLIC_POSTHOG_HERO_AB} />
-      //     </Suspense>
-      //   ) : undefined
-      // }
-      // subtitle={
-      //   env.NEXT_PUBLIC_POSTHOG_HERO_AB ? (
-      //     <Suspense>
-      //       <HeroSubtitleAB variantKey={env.NEXT_PUBLIC_POSTHOG_HERO_AB} />
-      //     </Suspense>
-      //   ) : undefined
-      // }
+        title={
+          env.NEXT_PUBLIC_POSTHOG_HERO_AB ? (
+            <Suspense>
+              <HeroHeadingAB variantKey={env.NEXT_PUBLIC_POSTHOG_HERO_AB} />
+            </Suspense>
+          ) : undefined
+        }
+        subtitle={
+          env.NEXT_PUBLIC_POSTHOG_HERO_AB ? (
+            <Suspense>
+              <HeroSubtitleAB variantKey={env.NEXT_PUBLIC_POSTHOG_HERO_AB} />
+            </Suspense>
+          ) : undefined
+        }
       />
       <Testimonials />
-      <Features />
-      <FeaturesAutomation />
-      <FeaturesUnsubscribe />
-      <FeaturesColdEmailBlocker />
-      <FeaturesStats />
+      <FeaturesHome />
       <Suspense>
         <div className="pb-32">
           <Pricing />
         </div>
       </Suspense>
-      <FAQs />
+      <FAQsHome />
       <CTA />
     </BasicLayout>
   );