From 4309035edde6716915045d5633bcad247bc68747 Mon Sep 17 00:00:00 2001
From: eldadfux <eldad.fux@gmail.com>
Date: Fri, 1 May 2026 06:21:45 -0400
Subject: [PATCH 1/2] feat(statsig): add best_cta experiment and sync nav CTA

Add Statsig experiment best_cta with cta param for hero primary button.
Wire SSR bundle, bootstrap, client exposure, and hero_cta URL override.
Align desktop nav, mobile header, and custom hero with heroCta from load.

Made-with: Cursor
---
 src/lib/components/IsLoggedIn.svelte          |  9 +++-
 .../homepage-variations/custom-hero.svelte    | 18 +++++---
 src/lib/components/layout/site-header.svelte  |  8 +++-
 src/lib/layouts/Main.svelte                   |  4 +-
 src/lib/statsig/constants.ts                  |  2 +
 .../experiments/marketing-hero-client.ts      | 16 +++++++-
 .../statsig/experiments/marketing-hero-ids.ts |  2 +
 .../experiments/marketing-hero-server.ts      | 41 +++++++++++++++++--
 src/lib/statsig/hero-query-overrides.ts       | 26 ++++++++++--
 src/lib/statsig/hero-statsig.server.ts        |  1 +
 .../(marketing)/(components)/hero.svelte      | 25 ++++++++---
 src/routes/(marketing)/+page.server.ts        | 22 ++++++----
 src/routes/(marketing)/+page.ts               |  5 ++-
 13 files changed, 148 insertions(+), 31 deletions(-)

diff --git a/src/lib/components/IsLoggedIn.svelte b/src/lib/components/IsLoggedIn.svelte
index df8af8a76d..cd79d79ca8 100644
--- a/src/lib/components/IsLoggedIn.svelte
+++ b/src/lib/components/IsLoggedIn.svelte
@@ -1,7 +1,9 @@
 <script lang="ts">
     import { browser } from '$app/environment';
+    import { page } from '$app/state';
     import { Button } from '$lib/components/ui';
     import { cn } from '$lib/utils/cn';
+    import { DEFAULT_HERO_CTA } from '$lib/statsig/constants';
     import { getAppwriteDashboardUrl } from '$lib/utils/dashboard';
 
     interface Props {
@@ -11,6 +13,11 @@
 
     const { class: className, offerButton = false }: Props = $props();
     const isLoggedIn = browser && 'loggedIn' in document.body.dataset;
+
+    /** Marketing homepage `best_cta` SSR value; other routes fall back to default. */
+    const navCtaLabel = $derived(
+        (page.data as { heroCta?: string | null }).heroCta ?? DEFAULT_HERO_CTA
+    );
 </script>
 
 <Button
@@ -25,7 +32,7 @@
             >Go to Console</span
         >
         <span class="block group-[&[data-logged-in]]/body:hidden" aria-hidden={isLoggedIn}
-            >Start building for free</span
+            >{navCtaLabel}</span
         >
     {/if}
 </Button>
diff --git a/src/lib/components/homepage-variations/custom-hero.svelte b/src/lib/components/homepage-variations/custom-hero.svelte
index dd3b57c6b1..07d3c2c052 100644
--- a/src/lib/components/homepage-variations/custom-hero.svelte
+++ b/src/lib/components/homepage-variations/custom-hero.svelte
@@ -4,7 +4,7 @@
     import { PUBLIC_APPWRITE_DASHBOARD } from '$env/static/public';
     import { onMount } from 'svelte';
     import { trackEvent } from '$lib/actions/analytics';
-    import { DEFAULT_HERO_SUBTITLE, DEFAULT_HERO_TITLE } from '$lib/statsig/constants';
+    import { DEFAULT_HERO_CTA, DEFAULT_HERO_SUBTITLE, DEFAULT_HERO_TITLE } from '$lib/statsig/constants';
     import { initStatsig, whenStatsigReady } from '$lib/statsig/client';
     import { readMarketingHeroExperimentsForExposure } from '$lib/statsig/experiments/marketing-hero-client';
     import {
@@ -22,7 +22,7 @@
         title = DEFAULT_HERO_TITLE,
         subtitle = DEFAULT_HERO_SUBTITLE,
         showDashboard = true,
-        ctaLabel = 'Start building for free',
+        ctaLabel = DEFAULT_HERO_CTA,
         ctaHref = PUBLIC_APPWRITE_DASHBOARD,
         heroLayout = 0
     } = $props<{
@@ -37,12 +37,14 @@
     /** Same client hydration path as marketing `hero.svelte` (Statsig + query overrides). */
     let clientHeroLayout = $state<HeroLayoutVariant | undefined>(undefined);
     let clientHeroSubtitle = $state<string | undefined>(undefined);
+    let clientHeroCta = $state<string | undefined>(undefined);
 
     const resolved = $derived(
         resolveHeroQueryOverrides(building ? new URLSearchParams() : page.url.searchParams, {
             heroLayout: clientHeroLayout ?? heroLayout,
             heroSubtitle: clientHeroSubtitle ?? subtitle,
-            heroTitle: title
+            heroTitle: title,
+            heroCta: clientHeroCta ?? ctaLabel
         })
     );
 
@@ -64,10 +66,11 @@
         void whenStatsigReady().then((client) => {
             if (!client) return;
 
-            const { heroSubtitle: nextSubtitle, heroLayout: nextLayout } =
+            const { heroSubtitle: nextSubtitle, heroLayout: nextLayout, heroCta: nextCta } =
                 readMarketingHeroExperimentsForExposure(client, {
                     heroSubtitle: subtitle,
-                    heroLayout
+                    heroLayout,
+                    heroCta: ctaLabel
                 });
             if (nextSubtitle !== subtitle) {
                 clientHeroSubtitle = nextSubtitle;
@@ -75,6 +78,9 @@
             if (nextLayout !== heroLayout) {
                 clientHeroLayout = nextLayout;
             }
+            if (nextCta !== ctaLabel) {
+                clientHeroCta = nextCta;
+            }
         });
     });
 
@@ -170,7 +176,7 @@
                     class={layoutAside ? 'w-full! lg:w-fit!' : 'w-full! sm:w-fit!'}
                     onclick={() => {
                         trackEvent(`main-get_started_btn_hero-click`);
-                    }}>{ctaLabel}</Button
+                    }}>{resolved.heroCta}</Button
                 >
             </div>
         </div>
diff --git a/src/lib/components/layout/site-header.svelte b/src/lib/components/layout/site-header.svelte
index 49d313caa5..dccf5d3256 100644
--- a/src/lib/components/layout/site-header.svelte
+++ b/src/lib/components/layout/site-header.svelte
@@ -1,7 +1,13 @@
 <script lang="ts">
+    import { page } from '$app/state';
+    import { DEFAULT_HERO_CTA } from '$lib/statsig/constants';
     import { Button } from '../ui';
     import HamburgerMenu from './navigation/hamburger-menu.svelte';
     import PrimaryNav from './navigation/primary-nav.svelte';
+
+    const navCtaLabel = $derived(
+        (page.data as { heroCta?: string | null }).heroCta ?? DEFAULT_HERO_CTA
+    );
 </script>
 
 <header
@@ -19,7 +25,7 @@
         >
 
         <PrimaryNav class="hidden md:block" />
-        <Button class="hidden! md:flex!">Start building for free</Button>
+        <Button class="hidden! md:flex!">{navCtaLabel}</Button>
 
         <HamburgerMenu class="block md:hidden" />
     </div>
diff --git a/src/lib/layouts/Main.svelte b/src/lib/layouts/Main.svelte
index 27f23b25ea..02b8a89539 100644
--- a/src/lib/layouts/Main.svelte
+++ b/src/lib/layouts/Main.svelte
@@ -23,6 +23,7 @@
     import { Button, Icon, InlineTag } from '$lib/components/ui';
     import MongoPartnershipBanner from '$lib/components/MongoPartnershipBanner.svelte';
     import { changelogNavBadgeVisible } from '$routes/changelog/utils';
+    import { DEFAULT_HERO_CTA } from '$lib/statsig/constants';
 
     export let omitMainId = false;
     export let hideNavigation = false;
@@ -157,11 +158,12 @@
 
     $: isOfferPage = page.route.id?.includes('/offer-300') ?? false;
 
+    $: navCtaLabel = (page.data as { heroCta?: string | null }).heroCta ?? DEFAULT_HERO_CTA;
     $: mobileButtonHref = isOfferPage ? 'https://apwr.dev/DCMWDSw' : getAppwriteDashboardUrl();
     $: mobileButtonEvent = isOfferPage
         ? 'mobile-claim_300_credits_btn-click'
         : 'main-start_building_btn-click';
-    $: mobileButtonText = isOfferPage ? 'Claim 300$ credits' : 'Start building';
+    $: mobileButtonText = isOfferPage ? 'Claim 300$ credits' : navCtaLabel;
 
     const handleNav = () => {
         $isMobileNavOpen = !$isMobileNavOpen;
diff --git a/src/lib/statsig/constants.ts b/src/lib/statsig/constants.ts
index 0205948f7a..9ce164c32e 100644
--- a/src/lib/statsig/constants.ts
+++ b/src/lib/statsig/constants.ts
@@ -8,3 +8,5 @@ export const DEFAULT_HERO_SUBTITLE =
     'Appwrite is an open-source, all-in-one development platform. Use built-in backend infrastructure and web hosting, all from a single place.';
 
 export const DEFAULT_HERO_TITLE = 'Build like a team of hundreds';
+
+export const DEFAULT_HERO_CTA = 'Start building for free';
diff --git a/src/lib/statsig/experiments/marketing-hero-client.ts b/src/lib/statsig/experiments/marketing-hero-client.ts
index 223dc881b7..6d4df78b75 100644
--- a/src/lib/statsig/experiments/marketing-hero-client.ts
+++ b/src/lib/statsig/experiments/marketing-hero-client.ts
@@ -7,7 +7,7 @@
 import type { StatsigBrowserClient } from '../client';
 import { readLayoutVariantFromStatsigClient } from '../experiment-eval';
 import type { HeroLayoutVariant } from '../hero-layout';
-import { normalizeHeroSubtitle } from '../hero-query-overrides';
+import { normalizeHeroCta, normalizeHeroSubtitle } from '../hero-query-overrides';
 import { MARKETING_HERO_EXPERIMENTS } from './marketing-hero-ids';
 
 export { MARKETING_HERO_EXPERIMENTS };
@@ -15,6 +15,7 @@ export { MARKETING_HERO_EXPERIMENTS };
 export type MarketingHeroStatsigBaseline = {
     heroSubtitle: string;
     heroLayout: HeroLayoutVariant;
+    heroCta: string;
 };
 
 export type MarketingHeroClientExposureDebug = Record<string, unknown>;
@@ -29,12 +30,17 @@ export function readMarketingHeroExperimentsForExposure(
 ): {
     heroSubtitle: string;
     heroLayout: HeroLayoutVariant;
+    heroCta: string;
     debug: MarketingHeroClientExposureDebug;
 } {
     const rawDescription = client
         .getExperiment(MARKETING_HERO_EXPERIMENTS.bestDescription)
         .get('description', baseline.heroSubtitle);
 
+    const rawCta = client
+        .getExperiment(MARKETING_HERO_EXPERIMENTS.bestCta)
+        .get('cta', baseline.heroCta);
+
     const layoutRead = readLayoutVariantFromStatsigClient(
         client,
         MARKETING_HERO_EXPERIMENTS.heroLayout,
@@ -42,10 +48,12 @@ export function readMarketingHeroExperimentsForExposure(
     );
 
     const heroSubtitle = normalizeHeroSubtitle(rawDescription, baseline.heroSubtitle);
+    const heroCta = normalizeHeroCta(rawCta, baseline.heroCta);
 
     return {
         heroSubtitle,
         heroLayout: layoutRead.layout,
+        heroCta,
         debug: {
             [MARKETING_HERO_EXPERIMENTS.bestDescription]: {
                 raw: rawDescription,
@@ -53,6 +61,12 @@ export function readMarketingHeroExperimentsForExposure(
                 normalizedLen: heroSubtitle.length,
                 ssrBaselineLen: baseline.heroSubtitle.length
             },
+            [MARKETING_HERO_EXPERIMENTS.bestCta]: {
+                raw: rawCta,
+                rawType: typeof rawCta,
+                normalizedLen: heroCta.length,
+                ssrBaselineLen: baseline.heroCta.length
+            },
             [MARKETING_HERO_EXPERIMENTS.heroLayout]: {
                 normalized: layoutRead.layout,
                 readSource: layoutRead.source,
diff --git a/src/lib/statsig/experiments/marketing-hero-ids.ts b/src/lib/statsig/experiments/marketing-hero-ids.ts
index fc87321d75..87a614d266 100644
--- a/src/lib/statsig/experiments/marketing-hero-ids.ts
+++ b/src/lib/statsig/experiments/marketing-hero-ids.ts
@@ -5,6 +5,8 @@
 export const MARKETING_HERO_EXPERIMENTS = {
     /** Param: `description` (string). */
     bestDescription: 'best_description',
+    /** Param: `cta` (string). Primary hero dashboard button label. */
+    bestCta: 'best_cta',
     /**
      * Experiment or dynamic config id. Params tried: `layout`, `hero_layout`, `heroLayout`; then `.value`.
      */
diff --git a/src/lib/statsig/experiments/marketing-hero-server.ts b/src/lib/statsig/experiments/marketing-hero-server.ts
index f073cb4936..dad419c7b2 100644
--- a/src/lib/statsig/experiments/marketing-hero-server.ts
+++ b/src/lib/statsig/experiments/marketing-hero-server.ts
@@ -7,7 +7,7 @@
 import type { Statsig, StatsigUser } from '@statsig/statsig-node-core';
 import { readLayoutVariantFromStatsigEvaluation } from '../experiment-eval';
 import type { HeroLayoutVariant } from '../hero-layout';
-import { normalizeHeroSubtitle } from '../hero-query-overrides';
+import { normalizeHeroCta, normalizeHeroSubtitle } from '../hero-query-overrides';
 import {
     getStatsigClientBootstrapPayloadForClient,
     getStatsigServerClient,
@@ -23,6 +23,7 @@ const DISABLE_EXPOSURE = { disableExposureLogging: true } as const;
 export type MarketingHomeStatsigBundle = {
     heroSubtitleBase: string;
     heroLayoutBase: HeroLayoutVariant;
+    heroCtaBase: string;
     statsigBootstrap: string | null;
 };
 
@@ -86,6 +87,24 @@ async function evaluateHeroDescriptionWithClient(
     }
 }
 
+async function evaluateHeroCtaWithClient(
+    client: Statsig,
+    statsigUser: StatsigUser,
+    fallback: string
+): Promise<string> {
+    try {
+        const experiment = client.getExperiment(
+            statsigUser,
+            MARKETING_HERO_EXPERIMENTS.bestCta,
+            DISABLE_EXPOSURE
+        );
+        const raw = experiment.get('cta', fallback);
+        return normalizeHeroCta(raw, fallback);
+    } catch {
+        return fallback;
+    }
+}
+
 async function evaluateHeroLayoutWithClient(
     client: Statsig,
     statsigUser: StatsigUser,
@@ -113,7 +132,7 @@ async function evaluateHeroLayoutWithClient(
 export async function loadMarketingHomeStatsigBundle(
     user: StatsigUser | StatsigServerUserInput,
     cacheKey: string,
-    fallbacks: { subtitle: string; layout: HeroLayoutVariant }
+    fallbacks: { subtitle: string; layout: HeroLayoutVariant; cta: string }
 ): Promise<MarketingHomeStatsigBundle> {
     const now = Date.now();
     sweepExpiredMarketingHomeStatsigCache(now);
@@ -129,6 +148,7 @@ export async function loadMarketingHomeStatsigBundle(
         return {
             heroSubtitleBase: fallbacks.subtitle,
             heroLayoutBase: fallbacks.layout,
+            heroCtaBase: fallbacks.cta,
             statsigBootstrap: null
         };
     }
@@ -138,14 +158,16 @@ export async function loadMarketingHomeStatsigBundle(
     const bootstrapFilters = {
         experimentFilter: new Set([
             MARKETING_HERO_EXPERIMENTS.bestDescription,
+            MARKETING_HERO_EXPERIMENTS.bestCta,
             MARKETING_HERO_EXPERIMENTS.heroLayout
         ]),
         dynamicConfigFilter: new Set([MARKETING_HERO_EXPERIMENTS.heroLayout])
     };
 
-    const [heroSubtitleBase, heroLayoutBase, statsigBootstrap] = await Promise.all([
+    const [heroSubtitleBase, heroLayoutBase, heroCtaBase, statsigBootstrap] = await Promise.all([
         evaluateHeroDescriptionWithClient(client, statsigUser, fallbacks.subtitle),
         evaluateHeroLayoutWithClient(client, statsigUser, fallbacks.layout),
+        evaluateHeroCtaWithClient(client, statsigUser, fallbacks.cta),
         Promise.resolve(
             getStatsigClientBootstrapPayloadForClient(client, statsigUser, bootstrapFilters)
         )
@@ -154,6 +176,7 @@ export async function loadMarketingHomeStatsigBundle(
     const bundle: MarketingHomeStatsigBundle = {
         heroSubtitleBase,
         heroLayoutBase,
+        heroCtaBase,
         statsigBootstrap
     };
 
@@ -190,3 +213,15 @@ export async function evaluateHeroLayoutExperiment(
     if (!client) return fallback;
     return evaluateHeroLayoutWithClient(client, toStatsigUser(user), fallback);
 }
+
+/**
+ * SSR: `best_cta` (`cta` param). Client must still call `readMarketingHeroExperimentsForExposure` so Pulse gets an exposure.
+ */
+export async function evaluateHeroCtaExperiment(
+    user: StatsigUser | StatsigServerUserInput,
+    fallback: string
+): Promise<string> {
+    const client = await getStatsigServerClient();
+    if (!client) return fallback;
+    return evaluateHeroCtaWithClient(client, toStatsigUser(user), fallback);
+}
diff --git a/src/lib/statsig/hero-query-overrides.ts b/src/lib/statsig/hero-query-overrides.ts
index ea04cdf198..16d1708c4c 100644
--- a/src/lib/statsig/hero-query-overrides.ts
+++ b/src/lib/statsig/hero-query-overrides.ts
@@ -5,9 +5,11 @@ import { normalizeHeroLayout, type HeroLayoutVariant } from './hero-layout';
 export const HERO_LAYOUT_QUERY_KEY = 'hero_layout';
 export const HERO_SUBTITLE_QUERY_KEY = 'hero_subtitle';
 export const HERO_TITLE_QUERY_KEY = 'hero_title';
+export const HERO_CTA_QUERY_KEY = 'hero_cta';
 
 const MAX_SUBTITLE_LEN = 560;
 const MAX_TITLE_LEN = 160;
+const MAX_CTA_LEN = 100;
 
 /**
  * Same rules as `hero_subtitle` URL overrides: collapse whitespace, trim, max length.
@@ -20,10 +22,19 @@ export function normalizeHeroSubtitle(raw: unknown, fallback: string): string {
     return t.length > MAX_SUBTITLE_LEN ? t.slice(0, MAX_SUBTITLE_LEN) : t;
 }
 
+/** Short button label — used for `best_cta` / `hero_cta` query override. */
+export function normalizeHeroCta(raw: unknown, fallback: string): string {
+    if (typeof raw !== 'string') return fallback;
+    const t = raw.replace(/\s+/g, ' ').trim();
+    if (t.length === 0) return fallback;
+    return t.length > MAX_CTA_LEN ? t.slice(0, MAX_CTA_LEN) : t;
+}
+
 export type HeroQueryBaseline = {
     heroLayout: HeroLayoutVariant;
     heroSubtitle: string;
     heroTitle: string;
+    heroCta: string;
 };
 
 export type HeroQueryResolved = HeroQueryBaseline;
@@ -32,12 +43,13 @@ export function hasHeroExperimentQueryOverrides(params: URLSearchParams): boolea
     return (
         params.has(HERO_LAYOUT_QUERY_KEY) ||
         params.has(HERO_SUBTITLE_QUERY_KEY) ||
-        params.has(HERO_TITLE_QUERY_KEY)
+        params.has(HERO_TITLE_QUERY_KEY) ||
+        params.has(HERO_CTA_QUERY_KEY)
     );
 }
 
 /**
- * Applies `hero_layout`, `hero_subtitle`, and `hero_title` search params when present.
+ * Applies `hero_layout`, `hero_subtitle`, `hero_title`, and `hero_cta` search params when present.
  * Values are clamped; unknown `hero_layout` values keep the baseline layout.
  */
 export function resolveHeroQueryOverrides(
@@ -47,7 +59,8 @@ export function resolveHeroQueryOverrides(
     return {
         heroLayout: readHeroLayoutOverride(params, baseline.heroLayout),
         heroSubtitle: readHeroSubtitleOverride(params, baseline.heroSubtitle),
-        heroTitle: readHeroTitleOverride(params, baseline.heroTitle)
+        heroTitle: readHeroTitleOverride(params, baseline.heroTitle),
+        heroCta: readHeroCtaOverride(params, baseline.heroCta)
     };
 }
 
@@ -74,3 +87,10 @@ function readHeroTitleOverride(params: URLSearchParams, fallback: string): strin
     if (t.length === 0) return fallback;
     return t.length > MAX_TITLE_LEN ? t.slice(0, MAX_TITLE_LEN) : t;
 }
+
+function readHeroCtaOverride(params: URLSearchParams, fallback: string): string {
+    if (!params.has(HERO_CTA_QUERY_KEY)) return fallback;
+    const raw = params.get(HERO_CTA_QUERY_KEY);
+    if (raw == null) return fallback;
+    return normalizeHeroCta(raw, fallback);
+}
diff --git a/src/lib/statsig/hero-statsig.server.ts b/src/lib/statsig/hero-statsig.server.ts
index c0fb79b594..8a5ee18092 100644
--- a/src/lib/statsig/hero-statsig.server.ts
+++ b/src/lib/statsig/hero-statsig.server.ts
@@ -9,6 +9,7 @@ export {
     toStatsigUser
 } from './server';
 export {
+    evaluateHeroCtaExperiment,
     evaluateHeroDescriptionExperiment,
     evaluateHeroLayoutExperiment,
     loadMarketingHomeStatsigBundle,
diff --git a/src/routes/(marketing)/(components)/hero.svelte b/src/routes/(marketing)/(components)/hero.svelte
index 44aa974e12..17506dc6ef 100644
--- a/src/routes/(marketing)/(components)/hero.svelte
+++ b/src/routes/(marketing)/(components)/hero.svelte
@@ -4,7 +4,11 @@
     import { PUBLIC_APPWRITE_DASHBOARD } from '$env/static/public';
     import { onMount } from 'svelte';
     import { trackEvent } from '$lib/actions/analytics';
-    import { DEFAULT_HERO_SUBTITLE, DEFAULT_HERO_TITLE } from '$lib/statsig/constants';
+    import {
+        DEFAULT_HERO_CTA,
+        DEFAULT_HERO_SUBTITLE,
+        DEFAULT_HERO_TITLE
+    } from '$lib/statsig/constants';
     import { initStatsig, whenStatsigReady } from '$lib/statsig/client';
     import {
         MARKETING_HERO_EXPERIMENTS,
@@ -39,7 +43,8 @@
         resolveHeroQueryOverrides(building ? new URLSearchParams() : page.url.searchParams, {
             heroLayout: (data.heroLayout ?? 0) as HeroLayoutVariant,
             heroSubtitle: data.heroSubtitle ?? DEFAULT_HERO_SUBTITLE,
-            heroTitle: data.heroTitle ?? DEFAULT_HERO_TITLE
+            heroTitle: data.heroTitle ?? DEFAULT_HERO_TITLE,
+            heroCta: data.heroCta ?? DEFAULT_HERO_CTA
         })
     );
 
@@ -63,15 +68,21 @@
         const baselineSubtitle = data.heroSubtitle ?? DEFAULT_HERO_SUBTITLE;
         const baselineLayout = (data.heroLayout ?? 0) as HeroLayoutVariant;
         const baselineTitle = data.heroTitle ?? DEFAULT_HERO_TITLE;
+        const baselineCta = data.heroCta ?? DEFAULT_HERO_CTA;
 
         if (hasHeroExperimentQueryOverrides(page.url.searchParams)) {
             log('URL query overrides (client layout)', {
                 ...resolveHeroQueryOverrides(page.url.searchParams, {
                     heroLayout: baselineLayout,
                     heroSubtitle: baselineSubtitle,
-                    heroTitle: baselineTitle
+                    heroTitle: baselineTitle,
+                    heroCta: baselineCta
                 }),
-                dataBaseline: { heroLayout: baselineLayout, subtitleLen: baselineSubtitle.length }
+                dataBaseline: {
+                    heroLayout: baselineLayout,
+                    subtitleLen: baselineSubtitle.length,
+                    ctaLen: baselineCta.length
+                }
             });
             return;
         }
@@ -93,12 +104,14 @@
 
             const { debug } = readMarketingHeroExperimentsForExposure(client, {
                 heroSubtitle: baselineSubtitle,
-                heroLayout: baselineLayout
+                heroLayout: baselineLayout,
+                heroCta: baselineCta
             });
 
             log('experiment exposure (display stays on `page.data`)', {
                 [MARKETING_HERO_EXPERIMENTS.bestDescription]:
                     debug[MARKETING_HERO_EXPERIMENTS.bestDescription],
+                [MARKETING_HERO_EXPERIMENTS.bestCta]: debug[MARKETING_HERO_EXPERIMENTS.bestCta],
                 [MARKETING_HERO_EXPERIMENTS.heroLayout]:
                     debug[MARKETING_HERO_EXPERIMENTS.heroLayout]
             });
@@ -215,7 +228,7 @@
                     class={layoutAside ? 'w-full! lg:w-fit!' : 'w-full! sm:w-fit!'}
                     onclick={() => {
                         trackEvent(`main-get_started_btn_hero-click`);
-                    }}>Start building for free</Button
+                    }}>{resolved.heroCta}</Button
                 >
                 <AppwriteIn100Seconds />
             </div>
diff --git a/src/routes/(marketing)/+page.server.ts b/src/routes/(marketing)/+page.server.ts
index d155a0b3a3..af964cbece 100644
--- a/src/routes/(marketing)/+page.server.ts
+++ b/src/routes/(marketing)/+page.server.ts
@@ -1,5 +1,6 @@
 import {
     STATSIG_STABLE_ID_KEY,
+    DEFAULT_HERO_CTA,
     DEFAULT_HERO_SUBTITLE,
     DEFAULT_HERO_TITLE
 } from '$lib/statsig/constants';
@@ -17,6 +18,7 @@ export const load: PageServerLoad = async ({ cookies, request, url }) => {
             heroSubtitle: DEFAULT_HERO_SUBTITLE,
             heroLayout: 0 as HeroLayoutVariant,
             heroTitle: DEFAULT_HERO_TITLE,
+            heroCta: DEFAULT_HERO_CTA,
             statsigBootstrap: null,
             statsigStableUserId: null,
             statsigUserAgent: null
@@ -43,25 +45,31 @@ export const load: PageServerLoad = async ({ cookies, request, url }) => {
         ...(userAgent ? { userAgent } : {})
     };
 
-    const { heroSubtitleBase, heroLayoutBase, statsigBootstrap } =
+    const { heroSubtitleBase, heroLayoutBase, heroCtaBase, statsigBootstrap } =
         await loadMarketingHomeStatsigBundle(user, stableId, {
             subtitle: DEFAULT_HERO_SUBTITLE,
-            layout: 0
+            layout: 0,
+            cta: DEFAULT_HERO_CTA
         });
 
     // `url.searchParams` is unavailable while prerendering (`+page.ts` has `prerender = true`).
     // Query overrides still apply in the browser via `hero.svelte` + `page.url.searchParams`.
     const heroQueryParams = url.searchParams;
-    const { heroSubtitle, heroLayout, heroTitle } = resolveHeroQueryOverrides(heroQueryParams, {
-        heroLayout: heroLayoutBase,
-        heroSubtitle: heroSubtitleBase,
-        heroTitle: DEFAULT_HERO_TITLE
-    });
+    const { heroSubtitle, heroLayout, heroTitle, heroCta } = resolveHeroQueryOverrides(
+        heroQueryParams,
+        {
+            heroLayout: heroLayoutBase,
+            heroSubtitle: heroSubtitleBase,
+            heroTitle: DEFAULT_HERO_TITLE,
+            heroCta: heroCtaBase
+        }
+    );
 
     return {
         heroSubtitle,
         heroLayout,
         heroTitle,
+        heroCta,
         statsigBootstrap,
         /** Same value as `STATSIG_STABLE_ID_KEY` cookie — pass to client init to avoid bootstrap / stableID mismatch. */
         statsigStableUserId: stableId,
diff --git a/src/routes/(marketing)/+page.ts b/src/routes/(marketing)/+page.ts
index 591e5029a9..e7a97d0dd2 100644
--- a/src/routes/(marketing)/+page.ts
+++ b/src/routes/(marketing)/+page.ts
@@ -4,13 +4,14 @@ export const prerender = false;
 
 /**
  * Runs after `+page.server.ts` merges into `data` and before the page renders. The marketing hero
- * reads `heroTitle`, `heroSubtitle`, and `heroLayout` from `page.data` only (no duplicate state in
+ * reads `heroTitle`, `heroSubtitle`, `heroLayout`, and `heroCta` from `page.data` only (no duplicate state in
  * `onMount`) so SSR / prerender and the first client paint stay aligned.
  */
 export const load: PageLoad = async ({ data }) => {
     return {
         heroTitle: data.heroTitle,
         heroSubtitle: data.heroSubtitle,
-        heroLayout: data.heroLayout
+        heroLayout: data.heroLayout,
+        heroCta: data.heroCta
     };
 };

From f3b857b9cd196263d3998d6adcf3dfb71adf74c0 Mon Sep 17 00:00:00 2001
From: eldadfux <eldad.fux@gmail.com>
Date: Fri, 1 May 2026 06:34:45 -0400
Subject: [PATCH 2/2] feat: integrate hero CTA updates across components

- Implemented `heroCtaIfShortStartBuilding` function to dynamically adjust CTA labels based on the `heroCta` value from the page state.
- Updated various components including PreFooter, custom hero, and pricing pages to utilize the new CTA logic, ensuring consistency in messaging.
- Enhanced blog mid CTA handling to sync with the latest hero experiment CTA values.
- Refactored imports and improved code organization for better readability.
---
 src/lib/components/PreFooter.svelte           | 12 +++++++--
 .../homepage-variations/custom-hero.svelte    | 21 ++++++++++------
 src/lib/statsig/hero-query-overrides.ts       | 11 ++++++++
 src/lib/utils/blog-mid-cta.ts                 | 12 ++++++---
 src/markdoc/layouts/Post.svelte               |  4 ++-
 .../(marketing)/(components)/pricing.svelte   | 14 +++++++++--
 .../(components)/call-to-action.svelte        | 11 ++++++--
 src/routes/pricing/+page.svelte               | 25 +++++++++++++++----
 src/routes/pricing/compare-plans.svelte       | 25 ++++++++++++++++---
 9 files changed, 110 insertions(+), 25 deletions(-)

diff --git a/src/lib/components/PreFooter.svelte b/src/lib/components/PreFooter.svelte
index 388cfd9bc2..0e8d5a2d5a 100644
--- a/src/lib/components/PreFooter.svelte
+++ b/src/lib/components/PreFooter.svelte
@@ -1,7 +1,14 @@
 <script lang="ts">
+    import { page } from '$app/state';
     import { Button, type Variant } from '$lib/components/ui';
-    import { getAppwriteDashboardUrl } from '$lib/utils/dashboard';
     import { SHOW_SCALE_PLAN } from '$lib/constants/feature-flags';
+    import { heroCtaIfShortStartBuilding } from '$lib/statsig/hero-query-overrides';
+    import { DEFAULT_HERO_CTA } from '$lib/statsig/constants';
+    import { getAppwriteDashboardUrl } from '$lib/utils/dashboard';
+
+    const navCtaLabel = $derived(
+        (page.data as { heroCta?: string | null }).heroCta ?? DEFAULT_HERO_CTA
+    );
 
     const plans: Array<{
         name: string;
@@ -124,7 +131,8 @@
                             variant={plan.buttonVariant}
                             class="w-full! flex-3 self-end md:w-fit"
                         >
-                            <span class="text" style:padding-inline="0.5rem">{plan.buttonText}</span
+                            <span class="text" style:padding-inline="0.5rem"
+                                >{heroCtaIfShortStartBuilding(plan.buttonText, navCtaLabel)}</span
                             >
                         </Button>
                     </div>
diff --git a/src/lib/components/homepage-variations/custom-hero.svelte b/src/lib/components/homepage-variations/custom-hero.svelte
index 07d3c2c052..14e0e0bb42 100644
--- a/src/lib/components/homepage-variations/custom-hero.svelte
+++ b/src/lib/components/homepage-variations/custom-hero.svelte
@@ -4,7 +4,11 @@
     import { PUBLIC_APPWRITE_DASHBOARD } from '$env/static/public';
     import { onMount } from 'svelte';
     import { trackEvent } from '$lib/actions/analytics';
-    import { DEFAULT_HERO_CTA, DEFAULT_HERO_SUBTITLE, DEFAULT_HERO_TITLE } from '$lib/statsig/constants';
+    import {
+        DEFAULT_HERO_CTA,
+        DEFAULT_HERO_SUBTITLE,
+        DEFAULT_HERO_TITLE
+    } from '$lib/statsig/constants';
     import { initStatsig, whenStatsigReady } from '$lib/statsig/client';
     import { readMarketingHeroExperimentsForExposure } from '$lib/statsig/experiments/marketing-hero-client';
     import {
@@ -66,12 +70,15 @@
         void whenStatsigReady().then((client) => {
             if (!client) return;
 
-            const { heroSubtitle: nextSubtitle, heroLayout: nextLayout, heroCta: nextCta } =
-                readMarketingHeroExperimentsForExposure(client, {
-                    heroSubtitle: subtitle,
-                    heroLayout,
-                    heroCta: ctaLabel
-                });
+            const {
+                heroSubtitle: nextSubtitle,
+                heroLayout: nextLayout,
+                heroCta: nextCta
+            } = readMarketingHeroExperimentsForExposure(client, {
+                heroSubtitle: subtitle,
+                heroLayout,
+                heroCta: ctaLabel
+            });
             if (nextSubtitle !== subtitle) {
                 clientHeroSubtitle = nextSubtitle;
             }
diff --git a/src/lib/statsig/hero-query-overrides.ts b/src/lib/statsig/hero-query-overrides.ts
index 16d1708c4c..8d17ad2f1c 100644
--- a/src/lib/statsig/hero-query-overrides.ts
+++ b/src/lib/statsig/hero-query-overrides.ts
@@ -1,5 +1,16 @@
+import { DEFAULT_HERO_CTA } from './constants';
 import { normalizeHeroLayout, type HeroLayoutVariant } from './hero-layout';
 
+/** Legacy fixed label on several CTAs — replaced by `best_cta` / `heroCta` when present. */
+export const SHORT_START_BUILDING_LABEL = 'Start building';
+
+/**
+ * Use homepage experiment CTA copy for buttons that historically used {@link SHORT_START_BUILDING_LABEL}.
+ */
+export function heroCtaIfShortStartBuilding(staticLabel: string, heroCta: string): string {
+    return staticLabel === SHORT_START_BUILDING_LABEL ? heroCta : staticLabel;
+}
+
 /** Query overrides for marketing hero experiments (Statsig parity for local QA). */
 
 export const HERO_LAYOUT_QUERY_KEY = 'hero_layout';
diff --git a/src/lib/utils/blog-mid-cta.ts b/src/lib/utils/blog-mid-cta.ts
index a41d0132ed..ad7dda93c4 100644
--- a/src/lib/utils/blog-mid-cta.ts
+++ b/src/lib/utils/blog-mid-cta.ts
@@ -1,3 +1,5 @@
+import { DEFAULT_HERO_CTA } from '$lib/statsig/constants';
+import { heroCtaIfShortStartBuilding } from '$lib/statsig/hero-query-overrides';
 import { getAppwriteDashboardUrl } from '$lib/utils/dashboard';
 import { DEFAULT_CTA_POINTS, resolveBlogCta, type BlogCtaConfig } from '$lib/utils/blog-cta';
 
@@ -39,6 +41,8 @@ export interface PrepareBlogCtaOptions {
     category: string;
     slug: string;
     rawContent?: string | null;
+    /** Homepage `best_cta` value when set (e.g. marketing `/` load); syncs legacy "Start building" labels. */
+    heroExperimentCta?: string | null;
 }
 
 export interface BlogCtaState {
@@ -80,8 +84,10 @@ export const prepareBlogCtaState = ({
     announcement,
     category,
     slug,
-    rawContent
+    rawContent,
+    heroExperimentCta
 }: PrepareBlogCtaOptions): BlogCtaState => {
+    const heroCta = heroExperimentCta ?? DEFAULT_HERO_CTA;
     const manualOverride = typeof callToAction === 'object' && callToAction !== null;
     const shouldAutoGenerate = !manualOverride && (callToAction ?? true) && !announcement;
     const targetHeadingIndex = getMidCtaTargetIndex(rawContent ?? null);
@@ -113,7 +119,7 @@ export const prepareBlogCtaState = ({
                       point2: cta.points[1],
                       point3: cta.points[2],
                       point4: cta.points[3],
-                      cta: cta.label,
+                      cta: heroCtaIfShortStartBuilding(cta.label, heroCta),
                       url: cta.href,
                       event: cta.event
                   } satisfies InlineCtaProps
@@ -124,7 +130,7 @@ export const prepareBlogCtaState = ({
         manualOverride && cta
             ? {
                   heading: cta.heading,
-                  label: cta.label,
+                  label: heroCtaIfShortStartBuilding(cta.label, heroCta),
                   href: cta.href,
                   description: cta.description,
                   event: cta.event
diff --git a/src/markdoc/layouts/Post.svelte b/src/markdoc/layouts/Post.svelte
index fe11ab0451..2dc50e6ae4 100644
--- a/src/markdoc/layouts/Post.svelte
+++ b/src/markdoc/layouts/Post.svelte
@@ -18,6 +18,7 @@
         getInlinedScriptTag
     } from '$lib/utils/metadata';
     import { isAnnouncement, parseCategories } from '$lib/utils/blog-cta';
+    import { DEFAULT_HERO_CTA } from '$lib/statsig/constants';
     import { prepareBlogCtaState, type BlogCallToActionInput } from '$lib/utils/blog-mid-cta';
     import { getPostAuthors } from '$lib/utils/blog-authors';
     import type { AuthorData, PostsData } from '$routes/blog/content';
@@ -85,7 +86,8 @@
         announcement,
         category,
         slug,
-        rawContent
+        rawContent,
+        heroExperimentCta: (page.data as { heroCta?: string | null }).heroCta ?? DEFAULT_HERO_CTA
     });
 
     if (midCta) {
diff --git a/src/routes/(marketing)/(components)/pricing.svelte b/src/routes/(marketing)/(components)/pricing.svelte
index 18f248a70f..a729d2b9d4 100644
--- a/src/routes/(marketing)/(components)/pricing.svelte
+++ b/src/routes/(marketing)/(components)/pricing.svelte
@@ -1,9 +1,16 @@
 <script lang="ts">
+    import { page } from '$app/state';
     import { trackEvent } from '$lib/actions/analytics';
     import { Button } from '$lib/components/ui';
+    import { SHOW_SCALE_PLAN } from '$lib/constants/feature-flags';
+    import { DEFAULT_HERO_CTA } from '$lib/statsig/constants';
+    import { heroCtaIfShortStartBuilding } from '$lib/statsig/hero-query-overrides';
     import { cn } from '$lib/utils/cn';
     import { getAppwriteDashboardUrl } from '$lib/utils/dashboard';
-    import { SHOW_SCALE_PLAN } from '$lib/constants/feature-flags';
+
+    const navCtaLabel = $derived(
+        (page.data as { heroCta?: string | null }).heroCta ?? DEFAULT_HERO_CTA
+    );
 
     const plans: Array<{
         name: string;
@@ -133,7 +140,10 @@
                         href={isEnterprise ? '/contact-us/enterprise' : getAppwriteDashboardUrl()}
                         onclick={() => {
                             trackEvent(event);
-                        }}>{isEnterprise ? 'Contact us' : 'Start building'}</Button
+                        }}
+                        >{isEnterprise
+                            ? 'Contact us'
+                            : heroCtaIfShortStartBuilding('Start building', navCtaLabel)}</Button
                     >
                 </div>
             {/each}
diff --git a/src/routes/cloud-ga/(components)/call-to-action.svelte b/src/routes/cloud-ga/(components)/call-to-action.svelte
index 5c933a7e72..abb0160c6d 100644
--- a/src/routes/cloud-ga/(components)/call-to-action.svelte
+++ b/src/routes/cloud-ga/(components)/call-to-action.svelte
@@ -1,9 +1,16 @@
 <script lang="ts">
+    import { page } from '$app/state';
     import Cell from './grid-system/cell.svelte';
     import { Button } from '$lib/components/ui';
     import Grid from './grid-system/grid.svelte';
-    import { getAppwriteDashboardUrl } from '$lib/utils/dashboard';
     import { trackEvent } from '$lib/actions/analytics';
+    import { DEFAULT_HERO_CTA } from '$lib/statsig/constants';
+    import { heroCtaIfShortStartBuilding } from '$lib/statsig/hero-query-overrides';
+    import { getAppwriteDashboardUrl } from '$lib/utils/dashboard';
+
+    const navCtaLabel = $derived(
+        (page.data as { heroCta?: string | null }).heroCta ?? DEFAULT_HERO_CTA
+    );
 </script>
 
 <div class="mx-auto -mb-[97px] flex max-w-6xl items-start justify-between">
@@ -22,7 +29,7 @@
                         class="w-full! lg:w-fit!"
                         onclick={() => {
                             trackEvent(`pricing-get-started-click`);
-                        }}>Start building</Button
+                        }}>{heroCtaIfShortStartBuilding('Start building', navCtaLabel)}</Button
                     >
                     <Button
                         onclick={() => {
diff --git a/src/routes/pricing/+page.svelte b/src/routes/pricing/+page.svelte
index 09b673a3bf..1db036cd14 100644
--- a/src/routes/pricing/+page.svelte
+++ b/src/routes/pricing/+page.svelte
@@ -1,5 +1,6 @@
 <script lang="ts">
-    import { FooterNav, MainFooter, PreFooter } from '$lib/components';
+    import { page } from '$app/state';
+    import { FooterNav, MainFooter } from '$lib/components';
     import { DEFAULT_HOST } from '$lib/utils/metadata';
 
     import { Main } from '$lib/layouts';
@@ -10,6 +11,12 @@
     import { getAppwriteDashboardUrl } from '$lib/utils/dashboard';
     import { Button, BadgeTransparent, Icon } from '$lib/components/ui';
     import { SHOW_SCALE_PLAN } from '$lib/constants/feature-flags';
+    import { DEFAULT_HERO_CTA } from '$lib/statsig/constants';
+    import { heroCtaIfShortStartBuilding } from '$lib/statsig/hero-query-overrides';
+
+    const navCtaLabel = $derived(
+        (page.data as { heroCta?: string | null }).heroCta ?? DEFAULT_HERO_CTA
+    );
 
     const title = 'Pricing' + TITLE_SUFFIX;
     const description =
@@ -109,7 +116,10 @@
                                                 event="pricing-cards-free-click"
                                             >
                                                 <span class="text-sub-body font-medium"
-                                                    >Start building</span
+                                                    >{heroCtaIfShortStartBuilding(
+                                                        'Start building',
+                                                        navCtaLabel
+                                                    )}</span
                                                 >
                                             </Button>
                                         </header>
@@ -182,7 +192,10 @@
                                                 event="pricing-cards-pro-click"
                                             >
                                                 <span class="text-sub-body font-medium"
-                                                    >Start building</span
+                                                    >{heroCtaIfShortStartBuilding(
+                                                        'Start building',
+                                                        navCtaLabel
+                                                    )}</span
                                                 >
                                             </Button>
                                         </header>
@@ -254,7 +267,10 @@
                                                     rel="noopener noreferrer"
                                                 >
                                                     <span class="text-sub-body font-medium"
-                                                        >Start building</span
+                                                        >{heroCtaIfShortStartBuilding(
+                                                            'Start building',
+                                                            navCtaLabel
+                                                        )}</span
                                                     >
                                                 </Button>
                                             </header>
@@ -419,7 +435,6 @@
             </div>
             <div class="web-big-padding-section-level-2 relative !mb-0">
                 <div class="container">
-                    <PreFooter />
                     <FooterNav />
                     <MainFooter />
                 </div>
diff --git a/src/routes/pricing/compare-plans.svelte b/src/routes/pricing/compare-plans.svelte
index 080cdaa001..b5f09a0942 100644
--- a/src/routes/pricing/compare-plans.svelte
+++ b/src/routes/pricing/compare-plans.svelte
@@ -1,5 +1,6 @@
 <script lang="ts">
     import { browser } from '$app/environment';
+    import { page } from '$app/state';
     import { Tabs } from '$lib/UI';
     import { visible } from '$lib/actions/visible';
     import { Tooltip } from '$lib/components';
@@ -12,6 +13,10 @@
     import { fly } from 'svelte/transition';
     import { trackEvent } from '$lib/actions/analytics';
     import { SHOW_SCALE_PLAN } from '$lib/constants/feature-flags';
+    import { DEFAULT_HERO_CTA } from '$lib/statsig/constants';
+    import { heroCtaIfShortStartBuilding } from '$lib/statsig/hero-query-overrides';
+
+    $: navCtaLabel = (page.data as { heroCta?: string | null }).heroCta ?? DEFAULT_HERO_CTA;
 
     type LinkRow = { text: string; url: string; event: string };
     type Row = string | true | LinkRow;
@@ -765,7 +770,12 @@
                                     href={getAppwriteDashboardUrl('/register')}
                                     event="pricing-compare-free-click"
                                 >
-                                    <span class="text-sub-body font-medium">Start building</span>
+                                    <span class="text-sub-body font-medium"
+                                        >{heroCtaIfShortStartBuilding(
+                                            'Start building',
+                                            navCtaLabel
+                                        )}</span
+                                    >
                                 </Button>
                             </div>
                         </div>
@@ -781,7 +791,12 @@
                                     event="pricing-compare-pro-click"
                                     rel="noopener noreferrer"
                                 >
-                                    <span class="text-sub-body font-medium">Start building</span>
+                                    <span class="text-sub-body font-medium"
+                                        >{heroCtaIfShortStartBuilding(
+                                            'Start building',
+                                            navCtaLabel
+                                        )}</span
+                                    >
                                 </Button>
                             </div>
                         </div>
@@ -799,7 +814,11 @@
                                         target="_blank"
                                         rel="noopener noreferrer"
                                     >
-                                        <span class="text-sub-body font-medium">Start building</span
+                                        <span class="text-sub-body font-medium"
+                                            >{heroCtaIfShortStartBuilding(
+                                                'Start building',
+                                                navCtaLabel
+                                            )}</span
                                         >
                                     </Button>
                                 </div>