From fcdce11d657cc172e4773889e720d2a34c6f1d46 Mon Sep 17 00:00:00 2001
From: eldadfux <eldad.fux@gmail.com>
Date: Wed, 29 Apr 2026 06:53:17 -0400
Subject: [PATCH 1/4] Add Statsig-driven marketing hero layouts with query
 overrides

Introduce hero_layout experiment (0 aside, 1 bottom two-line title, 2 bottom
one-line title) evaluated on the server and mirrored on the client for
exposure logging. Add URL query overrides for title, subtitle, and layout,
optional variation config heroLayout, and dashboard placement styling.

Tighten bottom-layout spacing, align CTA-to-screenshot gap with nav-to-banner
padding, and add dev-only Statsig experiment console logging (plus
?debug_statsig for preview builds).

Made-with: Cursor
---
 .../components/AppwriteIn100Seconds.svelte    |   2 +-
 .../homepage-variations/custom-hero.svelte    |  95 +++++++--
 .../homepage-variations/variation-config.ts   |   4 +
 src/lib/statsig/client.ts                     |   7 +-
 src/lib/statsig/constants.ts                  |   5 +
 src/lib/statsig/hero-layout.ts                |  13 ++
 src/lib/statsig/hero-query-overrides.ts       |  67 ++++++
 src/lib/statsig/hero-statsig.server.ts        |  32 ++-
 .../(marketing)/(components)/dashboard.svelte |  10 +-
 .../(marketing)/(components)/hero.svelte      | 200 ++++++++++++++----
 src/routes/(marketing)/+page.server.ts        |  19 +-
 src/routes/(marketing)/+page.svelte           |   2 +-
 src/routes/[variation]/+page.svelte           |   1 +
 13 files changed, 387 insertions(+), 70 deletions(-)
 create mode 100644 src/lib/statsig/hero-layout.ts
 create mode 100644 src/lib/statsig/hero-query-overrides.ts

diff --git a/src/lib/components/AppwriteIn100Seconds.svelte b/src/lib/components/AppwriteIn100Seconds.svelte
index 82774ad90a..3595520784 100644
--- a/src/lib/components/AppwriteIn100Seconds.svelte
+++ b/src/lib/components/AppwriteIn100Seconds.svelte
@@ -15,7 +15,7 @@
     action={trigger}
     event="intro-video-btn_hero-click"
     variant="secondary"
-    class="w-full! cursor-pointer shadow-[0_2px_40px_rgba(0,0,0,0.5)] transition-opacity hover:opacity-90 active:scale-95 lg:w-fit!"
+    class="w-full! cursor-pointer shadow-[0_2px_40px_rgba(0,0,0,0.5)] transition-opacity hover:opacity-90 active:scale-95 sm:w-fit!"
 >
     Appwrite in 100 seconds
 
diff --git a/src/lib/components/homepage-variations/custom-hero.svelte b/src/lib/components/homepage-variations/custom-hero.svelte
index 45e0717040..06a369094b 100644
--- a/src/lib/components/homepage-variations/custom-hero.svelte
+++ b/src/lib/components/homepage-variations/custom-hero.svelte
@@ -1,27 +1,51 @@
 <script lang="ts">
+    import { page } from '$app/state';
     import { PUBLIC_APPWRITE_DASHBOARD } from '$env/static/public';
     import { trackEvent } from '$lib/actions/analytics';
+    import { DEFAULT_HERO_SUBTITLE, DEFAULT_HERO_TITLE } from '$lib/statsig/constants';
+    import { resolveHeroQueryOverrides } from '$lib/statsig/hero-query-overrides';
+    import type { HeroLayoutVariant } from '$lib/statsig/hero-layout';
     import GradientText from '$lib/components/fancy/gradient-text.svelte';
     import { Button } from '$lib/components/ui';
     import { cn } from '$lib/utils/cn';
     import Dashboard from '$routes/(marketing)/(components)/dashboard.svelte';
 
     const {
-        title = 'Build like a team of hundreds',
-        subtitle = 'Appwrite is an open-source, all-in-one development platform. Use built-in backend infrastructure and web hosting, all from a single place.',
+        title = DEFAULT_HERO_TITLE,
+        subtitle = DEFAULT_HERO_SUBTITLE,
         showDashboard = true,
         ctaLabel = 'Start building for free',
-        ctaHref = PUBLIC_APPWRITE_DASHBOARD
+        ctaHref = PUBLIC_APPWRITE_DASHBOARD,
+        heroLayout = 0
     } = $props<{
         title?: string;
         subtitle?: string;
         showDashboard?: boolean;
         ctaLabel?: string;
         ctaHref?: string;
+        heroLayout?: HeroLayoutVariant;
     }>();
+
+    const resolved = $derived(
+        resolveHeroQueryOverrides(page.url.searchParams, {
+            heroLayout,
+            heroSubtitle: subtitle,
+            heroTitle: title
+        })
+    );
+
+    const layoutAside = $derived(resolved.heroLayout === 0);
+    const layoutBottomTwoLineTitle = $derived(resolved.heroLayout === 1);
 </script>
 
-<div class="relative flex max-w-screen items-center overflow-hidden py-12 md:py-0 lg:min-h-[700px]">
+<div
+    class={cn(
+        'relative flex max-w-screen items-center overflow-hidden',
+        layoutAside
+            ? 'py-12 md:py-0 lg:min-h-[700px]'
+            : 'pt-16 pb-8 md:pt-20 md:pb-10 lg:min-h-[600px] lg:pt-24'
+    )}
+>
     <div
         class={cn(
             'animate-lighting absolute top-0 left-0 -z-10 h-screen w-[200vw] -translate-x-[25%] translate-y-8 rotate-25 overflow-hidden blur-3xl md:w-full',
@@ -31,25 +55,58 @@
     ></div>
 
     <div
-        class="relative container mx-auto grid h-full grid-cols-1 place-items-center gap-24 md:grid-cols-2"
+        class={cn(
+            'relative container mx-auto h-full',
+            layoutAside
+                ? 'grid grid-cols-1 place-items-center gap-24 md:grid-cols-2'
+                : 'flex w-full flex-col items-center gap-16 md:gap-20 lg:gap-24'
+        )}
     >
         <div
-            class="animate-blur-in flex flex-col gap-4 [animation-delay:150ms] [animation-duration:1000ms] md:ml-12 lg:ml-0"
+            class={cn(
+                'animate-blur-in flex flex-col [animation-delay:150ms] [animation-duration:1000ms]',
+                layoutAside ? 'gap-4 md:ml-12 lg:ml-0' : 'gap-3 w-full max-w-6xl items-center px-4 text-center sm:px-0'
+            )}
         >
-            <GradientText class="animate-fade-in">
-                <h1 class="font-aeonik-pro text-headline text-pretty">
-                    {title}<span class="text-accent">_</span>
-                </h1>
-            </GradientText>
+            {#if layoutAside || layoutBottomTwoLineTitle}
+                <GradientText
+                    class={cn(
+                        'animate-fade-in my-2 md:my-3',
+                        layoutBottomTwoLineTitle && 'mx-auto block w-full max-w-4xl text-center'
+                    )}
+                >
+                    <h1 class="font-aeonik-pro text-headline text-pretty">
+                        {resolved.heroTitle}<span class="text-accent">_</span>
+                    </h1>
+                </GradientText>
+            {:else}
+                <GradientText
+                    class="animate-fade-in my-2 flex w-full min-w-0 max-w-full justify-center [-webkit-overflow-scrolling:touch] overflow-x-auto [scrollbar-width:none] md:my-3 [&::-webkit-scrollbar]:hidden"
+                >
+                    <h1 class="font-aeonik-pro text-headline max-w-none shrink-0 whitespace-nowrap">
+                        {resolved.heroTitle}<span class="text-accent">_</span>
+                    </h1>
+                </GradientText>
+            {/if}
 
-            <p class="text-description text-secondary font-medium">
-                {subtitle}
+            <p
+                class={cn(
+                    'text-description text-secondary mt-2 font-medium md:mt-3',
+                    !layoutAside && 'max-w-2xl text-balance text-center'
+                )}
+            >
+                {resolved.heroSubtitle}
             </p>
 
-            <div class="mt-4 flex flex-col gap-2 lg:flex-row">
+            <div
+                class={cn(
+                    'flex flex-col gap-2',
+                    layoutAside ? 'mt-4 lg:flex-row' : 'mt-3 w-full max-w-xs items-stretch sm:max-w-none sm:flex-row sm:justify-center'
+                )}
+            >
                 <Button
                     href={ctaHref}
-                    class="w-full! lg:w-fit!"
+                    class={layoutAside ? 'w-full! lg:w-fit!' : 'w-full! sm:w-fit!'}
                     onclick={() => {
                         trackEvent(`main-get_started_btn_hero-click`);
                     }}>{ctaLabel}</Button
@@ -58,7 +115,13 @@
         </div>
 
         {#if showDashboard}
-            <Dashboard />
+            {#if layoutAside}
+                <Dashboard />
+            {:else}
+                <div class="flex w-full justify-center">
+                    <Dashboard placement="below" />
+                </div>
+            {/if}
         {/if}
     </div>
 </div>
diff --git a/src/lib/components/homepage-variations/variation-config.ts b/src/lib/components/homepage-variations/variation-config.ts
index 95581a34c5..c5378bb45d 100644
--- a/src/lib/components/homepage-variations/variation-config.ts
+++ b/src/lib/components/homepage-variations/variation-config.ts
@@ -1,7 +1,11 @@
+import type { HeroLayoutVariant } from '$lib/statsig/hero-layout';
+
 export interface HomepageVariationConfig {
     title: string;
     subtitle: string;
     pageTitle: string;
+    /** Hero structure: `0` aside dashboard, `1` bottom + wrapped title, `2` bottom + single-line title. */
+    heroLayout?: HeroLayoutVariant;
     slug?: string;
     ctaLabel?: string;
     ctaHref?: string;
diff --git a/src/lib/statsig/client.ts b/src/lib/statsig/client.ts
index c16bcd5e71..7b467ece0c 100644
--- a/src/lib/statsig/client.ts
+++ b/src/lib/statsig/client.ts
@@ -3,16 +3,19 @@ import { ENV } from '$lib/system';
 import {
     STATSIG_STABLE_ID_KEY,
     STATSIG_EXPERIMENT_BEST_DESCRIPTION,
+    STATSIG_EXPERIMENT_HERO_LAYOUT,
     STATSIG_CLIENT_SDK_KEY
 } from '$lib/statsig/constants';
 
-export { STATSIG_EXPERIMENT_BEST_DESCRIPTION };
+export { STATSIG_EXPERIMENT_BEST_DESCRIPTION, STATSIG_EXPERIMENT_HERO_LAYOUT };
 
 /** Narrow surface we use from `@statsig/js-client` (avoids static `import type` from that package, which can break Vite named re-exports). */
 export type StatsigBrowserClient = {
     initializeSync(options?: object): unknown;
     initializeAsync(options?: object): Promise<unknown>;
-    getExperiment(name: string): { get(key: string, defaultValue: string): string };
+    getExperiment(name: string): {
+        get(key: string, defaultValue: string | number): string | number;
+    };
     logEvent(eventOrName: string, value?: string | number, metadata?: Record<string, string>): void;
     shutdown(): Promise<void>;
 };
diff --git a/src/lib/statsig/constants.ts b/src/lib/statsig/constants.ts
index 40c5d82670..ffb8834ba0 100644
--- a/src/lib/statsig/constants.ts
+++ b/src/lib/statsig/constants.ts
@@ -6,5 +6,10 @@ export const STATSIG_CLIENT_SDK_KEY = 'client-TRp4ODQ3Yfsha0XwmRayqwb7WW0ujUbiGr
 
 export const STATSIG_EXPERIMENT_BEST_DESCRIPTION = 'best_description';
 
+/** Experiment param key: `layout` (values `0` | `1` | `2`). */
+export const STATSIG_EXPERIMENT_HERO_LAYOUT = 'hero_layout';
+
 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';
diff --git a/src/lib/statsig/hero-layout.ts b/src/lib/statsig/hero-layout.ts
new file mode 100644
index 0000000000..30a1d8e574
--- /dev/null
+++ b/src/lib/statsig/hero-layout.ts
@@ -0,0 +1,13 @@
+/** `hero_layout` experiment: `0` aside dashboard, `1` bottom + multi-line title, `2` bottom + single-line title. */
+export type HeroLayoutVariant = 0 | 1 | 2;
+
+export function normalizeHeroLayout(raw: unknown, fallback: HeroLayoutVariant): HeroLayoutVariant {
+    if (typeof raw === 'number' && (raw === 0 || raw === 1 || raw === 2)) {
+        return raw;
+    }
+    const n = parseInt(String(raw).trim(), 10);
+    if (n === 0 || n === 1 || n === 2) {
+        return n;
+    }
+    return fallback;
+}
diff --git a/src/lib/statsig/hero-query-overrides.ts b/src/lib/statsig/hero-query-overrides.ts
new file mode 100644
index 0000000000..62741ffde6
--- /dev/null
+++ b/src/lib/statsig/hero-query-overrides.ts
@@ -0,0 +1,67 @@
+import { normalizeHeroLayout, type HeroLayoutVariant } from './hero-layout';
+
+/** Query overrides for marketing hero experiments (Statsig parity for local QA). */
+
+export const HERO_LAYOUT_QUERY_KEY = 'hero_layout';
+export const HERO_SUBTITLE_QUERY_KEY = 'hero_subtitle';
+export const HERO_TITLE_QUERY_KEY = 'hero_title';
+
+const MAX_SUBTITLE_LEN = 560;
+const MAX_TITLE_LEN = 160;
+
+export type HeroQueryBaseline = {
+    heroLayout: HeroLayoutVariant;
+    heroSubtitle: string;
+    heroTitle: string;
+};
+
+export type HeroQueryResolved = HeroQueryBaseline;
+
+export function hasHeroExperimentQueryOverrides(params: URLSearchParams): boolean {
+    return (
+        params.has(HERO_LAYOUT_QUERY_KEY) ||
+        params.has(HERO_SUBTITLE_QUERY_KEY) ||
+        params.has(HERO_TITLE_QUERY_KEY)
+    );
+}
+
+/**
+ * Applies `hero_layout`, `hero_subtitle`, and `hero_title` search params when present.
+ * Values are clamped; unknown `hero_layout` values keep the baseline layout.
+ */
+export function resolveHeroQueryOverrides(
+    params: URLSearchParams,
+    baseline: HeroQueryBaseline
+): HeroQueryResolved {
+    return {
+        heroLayout: readHeroLayoutOverride(params, baseline.heroLayout),
+        heroSubtitle: readHeroSubtitleOverride(params, baseline.heroSubtitle),
+        heroTitle: readHeroTitleOverride(params, baseline.heroTitle)
+    };
+}
+
+function readHeroLayoutOverride(
+    params: URLSearchParams,
+    fallback: HeroLayoutVariant
+): HeroLayoutVariant {
+    if (!params.has(HERO_LAYOUT_QUERY_KEY)) return fallback;
+    return normalizeHeroLayout(params.get(HERO_LAYOUT_QUERY_KEY), fallback);
+}
+
+function readHeroSubtitleOverride(params: URLSearchParams, fallback: string): string {
+    if (!params.has(HERO_SUBTITLE_QUERY_KEY)) return fallback;
+    const raw = params.get(HERO_SUBTITLE_QUERY_KEY);
+    if (raw == null) return fallback;
+    const t = raw.replace(/\s+/g, ' ').trim();
+    if (t.length === 0) return fallback;
+    return t.length > MAX_SUBTITLE_LEN ? t.slice(0, MAX_SUBTITLE_LEN) : t;
+}
+
+function readHeroTitleOverride(params: URLSearchParams, fallback: string): string {
+    if (!params.has(HERO_TITLE_QUERY_KEY)) return fallback;
+    const raw = params.get(HERO_TITLE_QUERY_KEY);
+    if (raw == null) return fallback;
+    const t = raw.replace(/\s+/g, ' ').trim();
+    if (t.length === 0) return fallback;
+    return t.length > MAX_TITLE_LEN ? t.slice(0, MAX_TITLE_LEN) : t;
+}
diff --git a/src/lib/statsig/hero-statsig.server.ts b/src/lib/statsig/hero-statsig.server.ts
index 1d1b263040..7e7cb3baff 100644
--- a/src/lib/statsig/hero-statsig.server.ts
+++ b/src/lib/statsig/hero-statsig.server.ts
@@ -5,7 +5,12 @@ import {
     type StatsigOptions,
     type StatsigUserArgs
 } from '@statsig/statsig-node-core';
-import { STATSIG_CLIENT_SDK_KEY, STATSIG_EXPERIMENT_BEST_DESCRIPTION } from './constants';
+import {
+    STATSIG_CLIENT_SDK_KEY,
+    STATSIG_EXPERIMENT_BEST_DESCRIPTION,
+    STATSIG_EXPERIMENT_HERO_LAYOUT
+} from './constants';
+import { normalizeHeroLayout, type HeroLayoutVariant } from './hero-layout';
 
 function buildStatsigServerOptions(): StatsigOptions {
     const explicit = env.STATSIG_ENVIRONMENT?.trim();
@@ -88,6 +93,31 @@ export async function evaluateHeroDescriptionExperiment(
     }
 }
 
+/**
+ * Evaluates `hero_layout` for SSR. Exposure is logged on the client when the hero reads
+ * `getExperiment(STATSIG_EXPERIMENT_HERO_LAYOUT).get('layout', …)` after `whenStatsigReady()`.
+ *
+ * Configure a dynamic config / experiment parameter named `layout` with values `0`, `1`, or `2`.
+ */
+export async function evaluateHeroLayoutExperiment(
+    user: StatsigUser | StatsigServerUserInput,
+    fallback: HeroLayoutVariant
+): Promise<HeroLayoutVariant> {
+    const client = await getStatsigClient();
+    if (!client) return fallback;
+
+    try {
+        const statsigUser = toStatsigUser(user);
+        const experiment = client.getExperiment(statsigUser, STATSIG_EXPERIMENT_HERO_LAYOUT, {
+            disableExposureLogging: true
+        });
+        const raw = experiment.get('layout', fallback);
+        return normalizeHeroLayout(raw, fallback);
+    } catch {
+        return fallback;
+    }
+}
+
 /**
  * JSON payload for `StatsigClient.dataAdapter.setData` + `initializeAsync`, so the JS SDK skips
  * cache-first experiment checks (Group Assignment Health). Requires `STATSIG_SERVER_SECRET`.
diff --git a/src/routes/(marketing)/(components)/dashboard.svelte b/src/routes/(marketing)/(components)/dashboard.svelte
index 32da1d5b75..5c5263488a 100644
--- a/src/routes/(marketing)/(components)/dashboard.svelte
+++ b/src/routes/(marketing)/(components)/dashboard.svelte
@@ -1,5 +1,9 @@
 <script lang="ts">
     import { cn } from '$lib/utils/cn';
+
+    type Placement = 'aside' | 'below';
+
+    const { placement = 'aside' }: { placement?: Placement } = $props();
     // import { animate, stagger } from 'motion';
 
     // $effect(() => {
@@ -21,8 +25,10 @@
 
 <div
     class={cn(
-        'bg-smooth -mb-108 max-w-[150vw] translate-x-8 -translate-y-32 scale-70 overflow-hidden rounded-t-2xl border-x border-t border-white/10 px-2 pt-2 backdrop-blur-2xl md:mt-12 md:mb-0 md:ml-24 md:translate-x-1/4 md:translate-y-0 md:scale-100 lg:ml-12 ',
-        'mask-b-from-0% mask-b-to-70% md:mask-b-to-100%'
+        placement === 'aside' &&
+            'bg-smooth -mb-108 max-w-[150vw] translate-x-8 -translate-y-32 scale-70 overflow-hidden rounded-t-2xl border-x border-t border-white/10 px-2 pt-2 backdrop-blur-2xl mask-b-from-0% mask-b-to-70% md:mt-12 md:mb-0 md:ml-24 md:translate-x-1/4 md:translate-y-0 md:scale-100 md:mask-b-to-100% lg:ml-12',
+        placement === 'below' &&
+            'bg-smooth mx-auto w-full max-h-[min(52vw,272px)] max-w-[min(1185px,calc(100vw-2rem))] -mb-8 scale-[0.72] overflow-hidden rounded-t-2xl border-x border-t border-white/10 px-2 pt-2 backdrop-blur-2xl mask-b-from-[48%] mask-b-to-[100%] sm:max-h-[min(48vw,292px)] sm:scale-90 md:mb-0 md:max-h-[min(42vw,332px)] md:scale-100 md:mask-b-from-[52%]'
     )}
 >
     <div class="bg-greyscale-900 h-full overflow-hidden rounded-t-xl">
diff --git a/src/routes/(marketing)/(components)/hero.svelte b/src/routes/(marketing)/(components)/hero.svelte
index b9aa5ed804..d81fa0aac2 100644
--- a/src/routes/(marketing)/(components)/hero.svelte
+++ b/src/routes/(marketing)/(components)/hero.svelte
@@ -1,10 +1,20 @@
 <script lang="ts">
+    import { page } from '$app/state';
     import { browser } from '$app/environment';
     import { PUBLIC_APPWRITE_DASHBOARD } from '$env/static/public';
     import { onMount } from 'svelte';
     import { trackEvent } from '$lib/actions/analytics';
-    import { DEFAULT_HERO_SUBTITLE } from '$lib/statsig/constants';
-    import { whenStatsigReady, STATSIG_EXPERIMENT_BEST_DESCRIPTION } from '$lib/statsig/client';
+    import { DEFAULT_HERO_SUBTITLE, DEFAULT_HERO_TITLE } from '$lib/statsig/constants';
+    import {
+        whenStatsigReady,
+        STATSIG_EXPERIMENT_BEST_DESCRIPTION,
+        STATSIG_EXPERIMENT_HERO_LAYOUT
+    } from '$lib/statsig/client';
+    import {
+        hasHeroExperimentQueryOverrides,
+        resolveHeroQueryOverrides
+    } from '$lib/statsig/hero-query-overrides';
+    import { normalizeHeroLayout, type HeroLayoutVariant } from '$lib/statsig/hero-layout';
     import { ENV } from '$lib/system';
     import AppwriteIn100Seconds from '$lib/components/AppwriteIn100Seconds.svelte';
     import GradientText from '$lib/components/fancy/gradient-text.svelte';
@@ -17,27 +27,95 @@
         title?: string;
         /** Resolved on the server from Statsig (`+page.server.ts`) so SSR matches the experiment. */
         subtitle?: string;
+        /** `hero_layout` experiment: `0` aside, `1` bottom + wrapped title, `2` bottom + single-line title. */
+        heroLayout?: HeroLayoutVariant;
     };
 
-    const { title = 'Build like a team of hundreds', subtitle = DEFAULT_HERO_SUBTITLE }: Props =
-        $props();
+    const {
+        title = DEFAULT_HERO_TITLE,
+        subtitle = DEFAULT_HERO_SUBTITLE,
+        heroLayout = 0
+    }: Props = $props();
+
+    /** Statsig baseline from SSR; URL query params override for local QA (see `resolveHeroQueryOverrides`). */
+    const resolved = $derived(
+        resolveHeroQueryOverrides(page.url.searchParams, {
+            heroLayout,
+            heroSubtitle: subtitle,
+            heroTitle: title
+        })
+    );
+
+    const layoutAside = $derived(resolved.heroLayout === 0);
+    const layoutBottom = $derived(resolved.heroLayout !== 0);
+    const layoutBottomTwoLineTitle = $derived(resolved.heroLayout === 1);
 
     /**
-     * SSR evaluates the experiment with exposure logging disabled; Pulse / Results need a client
-     * exposure when the user actually sees the hero. Reading `description` logs the exposure and
-     * keeps the rendered line as the SSR value (default matches props).
+     * SSR evaluates experiments with exposure logging disabled; Pulse / Results need a client
+     * exposure when the user actually sees the hero. Reading params logs the exposure and keeps
+     * the rendered values as the SSR defaults when the client matches bootstrap.
      * @see https://docs.statsig.com/pulse (exposures enroll units in the experiment)
      */
     onMount(() => {
         if (!browser || ENV.TEST) return;
+        /** Set `?debug_statsig` on the URL to log in non-dev builds (e.g. `pnpm preview`). */
+        const debugStatsigHero =
+            import.meta.env.DEV || page.url.searchParams.has('debug_statsig');
+        const log = (...args: unknown[]) => {
+            if (debugStatsigHero) console.log('[Statsig hero]', ...args);
+        };
+
+        if (hasHeroExperimentQueryOverrides(page.url.searchParams)) {
+            log('URL query overrides (client layout)', {
+                ...resolveHeroQueryOverrides(page.url.searchParams, {
+                    heroLayout,
+                    heroSubtitle: subtitle,
+                    heroTitle: title
+                }),
+                ssrBaseline: { heroLayout, subtitleLen: subtitle.length }
+            });
+            return;
+        }
+
         void whenStatsigReady().then((client) => {
-            if (!client) return;
-            client.getExperiment(STATSIG_EXPERIMENT_BEST_DESCRIPTION).get('description', subtitle);
+            if (!client) {
+                log('Statsig client not ready; SSR baseline only', { heroLayout });
+                return;
+            }
+
+            const rawDescription = client
+                .getExperiment(STATSIG_EXPERIMENT_BEST_DESCRIPTION)
+                .get('description', subtitle);
+            const rawLayout = client.getExperiment(STATSIG_EXPERIMENT_HERO_LAYOUT).get(
+                'layout',
+                heroLayout
+            );
+            const normalizedLayout = normalizeHeroLayout(rawLayout, heroLayout);
+
+            log('experiment values (after get → exposure)', {
+                [STATSIG_EXPERIMENT_BEST_DESCRIPTION]: {
+                    raw: rawDescription,
+                    rawType: typeof rawDescription
+                },
+                [STATSIG_EXPERIMENT_HERO_LAYOUT]: {
+                    raw: rawLayout,
+                    rawType: typeof rawLayout,
+                    normalized: normalizedLayout,
+                    ssrBaselineLayout: heroLayout
+                }
+            });
         });
     });
 </script>
 
-<div class="relative flex max-w-screen items-center overflow-hidden py-12 md:py-0 lg:min-h-[700px]">
+<div
+    class={cn(
+        'relative flex max-w-screen items-center overflow-hidden',
+        layoutAside
+            ? 'py-12 md:py-0 lg:min-h-[700px]'
+            : 'pt-16 pb-8 md:pt-20 md:pb-10 lg:min-h-[600px] lg:pt-24'
+    )}
+>
     <div
         class={cn(
             'animate-lighting absolute top-0 left-0 -z-10 h-screen w-[200vw] -translate-x-[25%] translate-y-8 rotate-25 overflow-hidden blur-3xl md:w-full',
@@ -47,34 +125,77 @@
     ></div>
 
     <div
-        class="relative container mx-auto grid h-full grid-cols-1 place-items-center gap-24 md:grid-cols-2"
+        class={cn(
+            'relative container mx-auto h-full',
+            layoutAside
+                ? 'grid grid-cols-1 place-items-center gap-24 md:grid-cols-2'
+                : 'flex w-full flex-col items-center gap-16 md:gap-20 lg:gap-24'
+        )}
     >
         <div
-            class="animate-blur-in flex flex-col gap-4 [animation-delay:150ms] [animation-duration:1000ms] md:ml-12 lg:ml-0"
+            class={cn(
+                'animate-blur-in flex flex-col [animation-delay:150ms] [animation-duration:1000ms]',
+                layoutAside ? 'gap-4 md:ml-12 lg:ml-0' : 'gap-3 w-full max-w-6xl items-center px-4 text-center sm:px-0'
+            )}
         >
-            <HeroBanner
-                title="Appwrite partners with the world's best database company"
-                href="/blog/post/appwrite-mongodb-partnership-self-hosted"
-                icon="mongo"
-            />
+            {#if layoutAside}
+                <HeroBanner
+                    title="Appwrite partners with the world's best database company"
+                    href="/blog/post/appwrite-mongodb-partnership-self-hosted"
+                    icon="mongo"
+                />
+            {:else}
+                <div class="flex w-full justify-center">
+                    <HeroBanner
+                        title="Appwrite partners with the world's best database company"
+                        href="/blog/post/appwrite-mongodb-partnership-self-hosted"
+                        icon="mongo"
+                    />
+                </div>
+            {/if}
 
-            <GradientText class="animate-fade-in">
-                <h1 class="font-aeonik-pro text-headline text-pretty">
-                    {title}<span class="text-accent">_</span>
-                </h1>
-            </GradientText>
+            {#if layoutAside || layoutBottomTwoLineTitle}
+                <GradientText
+                    class={cn(
+                        'animate-fade-in my-2 md:my-3',
+                        layoutBottomTwoLineTitle && 'mx-auto block w-full max-w-4xl text-center'
+                    )}
+                >
+                    <h1 class="font-aeonik-pro text-headline text-pretty">
+                        {resolved.heroTitle}<span class="text-accent">_</span>
+                    </h1>
+                </GradientText>
+            {:else}
+                <GradientText
+                    class="animate-fade-in my-2 flex w-full min-w-0 max-w-full justify-center [-webkit-overflow-scrolling:touch] overflow-x-auto [scrollbar-width:none] md:my-3 [&::-webkit-scrollbar]:hidden"
+                >
+                    <h1 class="font-aeonik-pro text-headline max-w-none shrink-0 whitespace-nowrap">
+                        {resolved.heroTitle}<span class="text-accent">_</span>
+                    </h1>
+                </GradientText>
+            {/if}
 
             <p
-                class="text-description text-secondary font-medium"
-                style:min-height="calc(4.25 * var(--text-description--line-height, 1.5rem))"
+                class={cn(
+                    'text-description text-secondary mt-2 font-medium md:mt-3',
+                    layoutBottom && 'max-w-2xl text-balance text-center'
+                )}
+                style:min-height={layoutAside
+                    ? 'calc(4.25 * var(--text-description--line-height, 1.5rem))'
+                    : 'calc(3.25 * var(--text-description--line-height, 1.5rem))'}
             >
-                {subtitle}
+                {resolved.heroSubtitle}
             </p>
 
-            <div class="mt-4 flex flex-col gap-2 lg:flex-row">
+            <div
+                class={cn(
+                    'flex flex-col gap-2',
+                    layoutAside ? 'mt-4 lg:flex-row' : 'mt-3 w-full max-w-md items-stretch sm:max-w-none sm:flex-row sm:flex-wrap sm:justify-center'
+                )}
+            >
                 <Button
                     href={PUBLIC_APPWRITE_DASHBOARD}
-                    class="w-full! lg:w-fit!"
+                    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
@@ -82,24 +203,13 @@
                 <AppwriteIn100Seconds />
             </div>
         </div>
-        <Dashboard />
-        <!--
-        Console image variation (disabled for now)
-        <div
-            class={cn(
-                'bg-smooth -mb-108 w-[1185px] max-w-[150vw] translate-x-8 -translate-y-32 scale-70 overflow-hidden rounded-t-2xl border-x border-t border-white/10 px-2 pt-2 backdrop-blur-2xl md:mt-12 md:mb-0 md:ml-24 md:translate-x-1/4 md:translate-y-0 md:scale-100 lg:ml-12',
-                'mask-b-from-0% mask-b-to-70% md:mask-b-to-100%'
-            )}
-        >
-            <div class="bg-greyscale-900 aspect-[3022/1894] overflow-hidden rounded-t-xl">
-                <img
-                    src="/images/heroes/console.png"
-                    alt="Appwrite Console refetch dashboard screenshot"
-                    class="h-full w-full object-cover object-top"
-                    loading="eager"
-                />
+
+        {#if layoutAside}
+            <Dashboard />
+        {:else}
+            <div class="flex w-full justify-center">
+                <Dashboard placement="below" />
             </div>
-        </div>
-        -->
+        {/if}
     </div>
 </div>
diff --git a/src/routes/(marketing)/+page.server.ts b/src/routes/(marketing)/+page.server.ts
index cb158aad1a..f8fad28f8c 100644
--- a/src/routes/(marketing)/+page.server.ts
+++ b/src/routes/(marketing)/+page.server.ts
@@ -1,6 +1,12 @@
-import { STATSIG_STABLE_ID_KEY, DEFAULT_HERO_SUBTITLE } from '$lib/statsig/constants';
+import {
+    STATSIG_STABLE_ID_KEY,
+    DEFAULT_HERO_SUBTITLE,
+    DEFAULT_HERO_TITLE
+} from '$lib/statsig/constants';
+import { resolveHeroQueryOverrides } from '$lib/statsig/hero-query-overrides';
 import {
     evaluateHeroDescriptionExperiment,
+    evaluateHeroLayoutExperiment,
     getStatsigClientBootstrapPayload
 } from '$lib/statsig/hero-statsig.server';
 import type { PageServerLoad } from './$types';
@@ -26,13 +32,22 @@ export const load: PageServerLoad = async ({ cookies, request, url }) => {
         ...(userAgent ? { userAgent } : {})
     };
 
-    const [heroSubtitle, statsigBootstrap] = await Promise.all([
+    const [heroSubtitleBase, heroLayoutBase, statsigBootstrap] = await Promise.all([
         evaluateHeroDescriptionExperiment(user, DEFAULT_HERO_SUBTITLE),
+        evaluateHeroLayoutExperiment(user, 0),
         getStatsigClientBootstrapPayload(user)
     ]);
 
+    const { heroSubtitle, heroLayout, heroTitle } = resolveHeroQueryOverrides(url.searchParams, {
+        heroLayout: heroLayoutBase,
+        heroSubtitle: heroSubtitleBase,
+        heroTitle: DEFAULT_HERO_TITLE
+    });
+
     return {
         heroSubtitle,
+        heroLayout,
+        heroTitle,
         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.svelte b/src/routes/(marketing)/+page.svelte
index f08e9b0ac6..7c951dda7c 100644
--- a/src/routes/(marketing)/+page.svelte
+++ b/src/routes/(marketing)/+page.svelte
@@ -23,7 +23,7 @@
 />
 
 <Main>
-    <Hero title="Build like a team of hundreds" subtitle={data.heroSubtitle} />
+    <Hero title={data.heroTitle} subtitle={data.heroSubtitle} heroLayout={data.heroLayout} />
     <Platforms headline="Designed for the tools you work with" />
     <LogoList class="border-smooth border-b" title="Loved by startups and world leaders" />
     <Bento />
diff --git a/src/routes/[variation]/+page.svelte b/src/routes/[variation]/+page.svelte
index 23198858b2..95b37b1ef2 100644
--- a/src/routes/[variation]/+page.svelte
+++ b/src/routes/[variation]/+page.svelte
@@ -27,6 +27,7 @@
         showDashboard={config.showDashboard}
         ctaLabel={config.ctaLabel}
         ctaHref={config.ctaHref}
+        heroLayout={config.heroLayout ?? 0}
     />
 
     {#if config.showPlatforms}

From ce1da0c5d167e3092c7e83a845bdc0ab3e179072 Mon Sep 17 00:00:00 2001
From: eldadfux <eldad.fux@gmail.com>
Date: Wed, 29 Apr 2026 06:53:53 -0400
Subject: [PATCH 2/4] format

---
 .../homepage-variations/custom-hero.svelte    | 12 ++++++----
 .../(marketing)/(components)/dashboard.svelte |  4 ++--
 .../(marketing)/(components)/hero.svelte      | 22 ++++++++++---------
 3 files changed, 22 insertions(+), 16 deletions(-)

diff --git a/src/lib/components/homepage-variations/custom-hero.svelte b/src/lib/components/homepage-variations/custom-hero.svelte
index 06a369094b..85510a4eef 100644
--- a/src/lib/components/homepage-variations/custom-hero.svelte
+++ b/src/lib/components/homepage-variations/custom-hero.svelte
@@ -65,7 +65,9 @@
         <div
             class={cn(
                 'animate-blur-in flex flex-col [animation-delay:150ms] [animation-duration:1000ms]',
-                layoutAside ? 'gap-4 md:ml-12 lg:ml-0' : 'gap-3 w-full max-w-6xl items-center px-4 text-center sm:px-0'
+                layoutAside
+                    ? 'gap-4 md:ml-12 lg:ml-0'
+                    : 'w-full max-w-6xl items-center gap-3 px-4 text-center sm:px-0'
             )}
         >
             {#if layoutAside || layoutBottomTwoLineTitle}
@@ -81,7 +83,7 @@
                 </GradientText>
             {:else}
                 <GradientText
-                    class="animate-fade-in my-2 flex w-full min-w-0 max-w-full justify-center [-webkit-overflow-scrolling:touch] overflow-x-auto [scrollbar-width:none] md:my-3 [&::-webkit-scrollbar]:hidden"
+                    class="animate-fade-in my-2 flex w-full max-w-full min-w-0 justify-center overflow-x-auto [-webkit-overflow-scrolling:touch] [scrollbar-width:none] md:my-3 [&::-webkit-scrollbar]:hidden"
                 >
                     <h1 class="font-aeonik-pro text-headline max-w-none shrink-0 whitespace-nowrap">
                         {resolved.heroTitle}<span class="text-accent">_</span>
@@ -92,7 +94,7 @@
             <p
                 class={cn(
                     'text-description text-secondary mt-2 font-medium md:mt-3',
-                    !layoutAside && 'max-w-2xl text-balance text-center'
+                    !layoutAside && 'max-w-2xl text-center text-balance'
                 )}
             >
                 {resolved.heroSubtitle}
@@ -101,7 +103,9 @@
             <div
                 class={cn(
                     'flex flex-col gap-2',
-                    layoutAside ? 'mt-4 lg:flex-row' : 'mt-3 w-full max-w-xs items-stretch sm:max-w-none sm:flex-row sm:justify-center'
+                    layoutAside
+                        ? 'mt-4 lg:flex-row'
+                        : 'mt-3 w-full max-w-xs items-stretch sm:max-w-none sm:flex-row sm:justify-center'
                 )}
             >
                 <Button
diff --git a/src/routes/(marketing)/(components)/dashboard.svelte b/src/routes/(marketing)/(components)/dashboard.svelte
index 5c5263488a..d06f4aa024 100644
--- a/src/routes/(marketing)/(components)/dashboard.svelte
+++ b/src/routes/(marketing)/(components)/dashboard.svelte
@@ -26,9 +26,9 @@
 <div
     class={cn(
         placement === 'aside' &&
-            'bg-smooth -mb-108 max-w-[150vw] translate-x-8 -translate-y-32 scale-70 overflow-hidden rounded-t-2xl border-x border-t border-white/10 px-2 pt-2 backdrop-blur-2xl mask-b-from-0% mask-b-to-70% md:mt-12 md:mb-0 md:ml-24 md:translate-x-1/4 md:translate-y-0 md:scale-100 md:mask-b-to-100% lg:ml-12',
+            'bg-smooth -mb-108 max-w-[150vw] translate-x-8 -translate-y-32 scale-70 overflow-hidden rounded-t-2xl border-x border-t border-white/10 mask-b-from-0% mask-b-to-70% px-2 pt-2 backdrop-blur-2xl md:mt-12 md:mb-0 md:ml-24 md:translate-x-1/4 md:translate-y-0 md:scale-100 md:mask-b-to-100% lg:ml-12',
         placement === 'below' &&
-            'bg-smooth mx-auto w-full max-h-[min(52vw,272px)] max-w-[min(1185px,calc(100vw-2rem))] -mb-8 scale-[0.72] overflow-hidden rounded-t-2xl border-x border-t border-white/10 px-2 pt-2 backdrop-blur-2xl mask-b-from-[48%] mask-b-to-[100%] sm:max-h-[min(48vw,292px)] sm:scale-90 md:mb-0 md:max-h-[min(42vw,332px)] md:scale-100 md:mask-b-from-[52%]'
+            'bg-smooth mx-auto -mb-8 max-h-[min(52vw,272px)] w-full max-w-[min(1185px,calc(100vw-2rem))] scale-[0.72] overflow-hidden rounded-t-2xl border-x border-t border-white/10 mask-b-from-[48%] mask-b-to-[100%] px-2 pt-2 backdrop-blur-2xl sm:max-h-[min(48vw,292px)] sm:scale-90 md:mb-0 md:max-h-[min(42vw,332px)] md:scale-100 md:mask-b-from-[52%]'
     )}
 >
     <div class="bg-greyscale-900 h-full overflow-hidden rounded-t-xl">
diff --git a/src/routes/(marketing)/(components)/hero.svelte b/src/routes/(marketing)/(components)/hero.svelte
index d81fa0aac2..85796603bf 100644
--- a/src/routes/(marketing)/(components)/hero.svelte
+++ b/src/routes/(marketing)/(components)/hero.svelte
@@ -59,8 +59,7 @@
     onMount(() => {
         if (!browser || ENV.TEST) return;
         /** Set `?debug_statsig` on the URL to log in non-dev builds (e.g. `pnpm preview`). */
-        const debugStatsigHero =
-            import.meta.env.DEV || page.url.searchParams.has('debug_statsig');
+        const debugStatsigHero = import.meta.env.DEV || page.url.searchParams.has('debug_statsig');
         const log = (...args: unknown[]) => {
             if (debugStatsigHero) console.log('[Statsig hero]', ...args);
         };
@@ -86,10 +85,9 @@
             const rawDescription = client
                 .getExperiment(STATSIG_EXPERIMENT_BEST_DESCRIPTION)
                 .get('description', subtitle);
-            const rawLayout = client.getExperiment(STATSIG_EXPERIMENT_HERO_LAYOUT).get(
-                'layout',
-                heroLayout
-            );
+            const rawLayout = client
+                .getExperiment(STATSIG_EXPERIMENT_HERO_LAYOUT)
+                .get('layout', heroLayout);
             const normalizedLayout = normalizeHeroLayout(rawLayout, heroLayout);
 
             log('experiment values (after get → exposure)', {
@@ -135,7 +133,9 @@
         <div
             class={cn(
                 'animate-blur-in flex flex-col [animation-delay:150ms] [animation-duration:1000ms]',
-                layoutAside ? 'gap-4 md:ml-12 lg:ml-0' : 'gap-3 w-full max-w-6xl items-center px-4 text-center sm:px-0'
+                layoutAside
+                    ? 'gap-4 md:ml-12 lg:ml-0'
+                    : 'w-full max-w-6xl items-center gap-3 px-4 text-center sm:px-0'
             )}
         >
             {#if layoutAside}
@@ -167,7 +167,7 @@
                 </GradientText>
             {:else}
                 <GradientText
-                    class="animate-fade-in my-2 flex w-full min-w-0 max-w-full justify-center [-webkit-overflow-scrolling:touch] overflow-x-auto [scrollbar-width:none] md:my-3 [&::-webkit-scrollbar]:hidden"
+                    class="animate-fade-in my-2 flex w-full max-w-full min-w-0 justify-center overflow-x-auto [-webkit-overflow-scrolling:touch] [scrollbar-width:none] md:my-3 [&::-webkit-scrollbar]:hidden"
                 >
                     <h1 class="font-aeonik-pro text-headline max-w-none shrink-0 whitespace-nowrap">
                         {resolved.heroTitle}<span class="text-accent">_</span>
@@ -178,7 +178,7 @@
             <p
                 class={cn(
                     'text-description text-secondary mt-2 font-medium md:mt-3',
-                    layoutBottom && 'max-w-2xl text-balance text-center'
+                    layoutBottom && 'max-w-2xl text-center text-balance'
                 )}
                 style:min-height={layoutAside
                     ? 'calc(4.25 * var(--text-description--line-height, 1.5rem))'
@@ -190,7 +190,9 @@
             <div
                 class={cn(
                     'flex flex-col gap-2',
-                    layoutAside ? 'mt-4 lg:flex-row' : 'mt-3 w-full max-w-md items-stretch sm:max-w-none sm:flex-row sm:flex-wrap sm:justify-center'
+                    layoutAside
+                        ? 'mt-4 lg:flex-row'
+                        : 'mt-3 w-full max-w-md items-stretch sm:max-w-none sm:flex-row sm:flex-wrap sm:justify-center'
                 )}
             >
                 <Button

From 88ca6fa021fe79864fb7bd2a472891f313716e4f Mon Sep 17 00:00:00 2001
From: eldadfux <eldad.fux@gmail.com>
Date: Wed, 29 Apr 2026 07:15:03 -0400
Subject: [PATCH 3/4] fix

---
 src/routes/(marketing)/+page.server.ts | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/src/routes/(marketing)/+page.server.ts b/src/routes/(marketing)/+page.server.ts
index f8fad28f8c..4f8009f105 100644
--- a/src/routes/(marketing)/+page.server.ts
+++ b/src/routes/(marketing)/+page.server.ts
@@ -4,6 +4,7 @@ import {
     DEFAULT_HERO_TITLE
 } from '$lib/statsig/constants';
 import { resolveHeroQueryOverrides } from '$lib/statsig/hero-query-overrides';
+import { building } from '$app/environment';
 import {
     evaluateHeroDescriptionExperiment,
     evaluateHeroLayoutExperiment,
@@ -38,7 +39,10 @@ export const load: PageServerLoad = async ({ cookies, request, url }) => {
         getStatsigClientBootstrapPayload(user)
     ]);
 
-    const { heroSubtitle, heroLayout, heroTitle } = resolveHeroQueryOverrides(url.searchParams, {
+    // `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 = building ? new URLSearchParams() : url.searchParams;
+    const { heroSubtitle, heroLayout, heroTitle } = resolveHeroQueryOverrides(heroQueryParams, {
         heroLayout: heroLayoutBase,
         heroSubtitle: heroSubtitleBase,
         heroTitle: DEFAULT_HERO_TITLE

From b98f5804347ff7879720d568a25ec4e1294c5c5d Mon Sep 17 00:00:00 2001
From: eldadfux <eldad.fux@gmail.com>
Date: Wed, 29 Apr 2026 10:57:30 -0400
Subject: [PATCH 4/4] fixes

---
 src/lib/components/homepage-variations/custom-hero.svelte | 3 ++-
 src/routes/(marketing)/(components)/hero.svelte           | 6 +++---
 2 files changed, 5 insertions(+), 4 deletions(-)

diff --git a/src/lib/components/homepage-variations/custom-hero.svelte b/src/lib/components/homepage-variations/custom-hero.svelte
index 85510a4eef..a29531ab7b 100644
--- a/src/lib/components/homepage-variations/custom-hero.svelte
+++ b/src/lib/components/homepage-variations/custom-hero.svelte
@@ -1,4 +1,5 @@
 <script lang="ts">
+    import { building } from '$app/environment';
     import { page } from '$app/state';
     import { PUBLIC_APPWRITE_DASHBOARD } from '$env/static/public';
     import { trackEvent } from '$lib/actions/analytics';
@@ -27,7 +28,7 @@
     }>();
 
     const resolved = $derived(
-        resolveHeroQueryOverrides(page.url.searchParams, {
+        resolveHeroQueryOverrides(building ? new URLSearchParams() : page.url.searchParams, {
             heroLayout,
             heroSubtitle: subtitle,
             heroTitle: title
diff --git a/src/routes/(marketing)/(components)/hero.svelte b/src/routes/(marketing)/(components)/hero.svelte
index 85796603bf..6d1b07733c 100644
--- a/src/routes/(marketing)/(components)/hero.svelte
+++ b/src/routes/(marketing)/(components)/hero.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
+    import { browser, building } from '$app/environment';
     import { page } from '$app/state';
-    import { browser } from '$app/environment';
     import { PUBLIC_APPWRITE_DASHBOARD } from '$env/static/public';
     import { onMount } from 'svelte';
     import { trackEvent } from '$lib/actions/analytics';
@@ -37,9 +37,9 @@
         heroLayout = 0
     }: Props = $props();
 
-    /** Statsig baseline from SSR; URL query params override for local QA (see `resolveHeroQueryOverrides`). */
+    /** Statsig baseline from SSR; URL query params override in the browser (see `resolveHeroQueryOverrides`). */
     const resolved = $derived(
-        resolveHeroQueryOverrides(page.url.searchParams, {
+        resolveHeroQueryOverrides(building ? new URLSearchParams() : page.url.searchParams, {
             heroLayout,
             heroSubtitle: subtitle,
             heroTitle: title