diff --git a/apps/web/app/(landing)/home/CTAButtons.tsx b/apps/web/app/(landing)/home/CTAButtons.tsx index aa118bc82c..faa98e6303 100644 --- a/apps/web/app/(landing)/home/CTAButtons.tsx +++ b/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 = { + 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 ( ); } diff --git a/apps/web/app/(landing)/home/FAQs.tsx b/apps/web/app/(landing)/home/FAQs.tsx index d4bb140906..1337572a2c 100644 --- a/apps/web/app/(landing)/home/FAQs.tsx +++ b/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() { ); } + +export function FAQsHome() { + const variant = useFeatureFlagVariantKey( + env.NEXT_PUBLIC_POSTHOG_HERO_AB || "", + ); + + if (variant === "short-page") return null; + + return ; +} diff --git a/apps/web/app/(landing)/home/Features.tsx b/apps/web/app/(landing)/home/Features.tsx index 2f206d024c..ea12e7e861 100644 --- a/apps/web/app/(landing)/home/Features.tsx +++ b/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 (
@@ -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 ( ); } + +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 ; + + return ( + <> + {variant === "no-privacy" ? null : } + + + + + + ); +} diff --git a/apps/web/app/(landing)/home/HeroAB.tsx b/apps/web/app/(landing)/home/HeroAB.tsx index 8ac51e522f..28fbf2d136 100644 --- a/apps/web/app/(landing)/home/HeroAB.tsx +++ b/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 ; 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 ; if (typeof variant !== "string") return <>{copy.control.subtitle}; - return <>{copy[variant].subtitle || copy.control.subtitle}; + return <>{copy[variant]?.subtitle || copy.control.subtitle}; } diff --git a/apps/web/app/(landing)/page.tsx b/apps/web/app/(landing)/page.tsx index 80b6b9f87d..5e0ae99a1b 100644 --- a/apps/web/app/(landing)/page.tsx +++ b/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 ( - // - // - // ) : undefined - // } - // subtitle={ - // env.NEXT_PUBLIC_POSTHOG_HERO_AB ? ( - // - // - // - // ) : undefined - // } + title={ + env.NEXT_PUBLIC_POSTHOG_HERO_AB ? ( + + + + ) : undefined + } + subtitle={ + env.NEXT_PUBLIC_POSTHOG_HERO_AB ? ( + + + + ) : undefined + } /> - - - - - +
- +
);