From 8ac6f71a53837595af120fa3b6d1595480696a4a Mon Sep 17 00:00:00 2001 From: Satya Patel Date: Tue, 21 Jul 2026 08:53:51 -0700 Subject: [PATCH] feat(marketing): hero positioning A/B test + solid primary download CTA - Gate hero headline/subheadline on the landing-hero-positioning PostHog flag (control vs capability-mac), Mac visitors only; non-Mac platforms always render control copy - Restyle download CTA from transparent orange to solid primary (bg-foreground/text-background) - Drive-by: Biome format fix on desktop CommitRow Claude-Session: https://claude.ai/code/session_01CALU4gFuyo3ABdp1Cc7BJh --- .../components/CommitRow/CommitRow.tsx | 14 ++--- .../DownloadButton/DownloadButton.tsx | 2 +- .../components/HeroSection/HeroSection.tsx | 62 +++++++++++++++---- 3 files changed, 57 insertions(+), 21 deletions(-) diff --git a/apps/desktop/src/renderer/routes/_authenticated/_dashboard/v2-workspace/$workspaceId/components/WorkspaceSidebar/hooks/useChangesTab/components/CommitFilterDropdown/components/CommitRow/CommitRow.tsx b/apps/desktop/src/renderer/routes/_authenticated/_dashboard/v2-workspace/$workspaceId/components/WorkspaceSidebar/hooks/useChangesTab/components/CommitFilterDropdown/components/CommitRow/CommitRow.tsx index 79a39375650..3109683101f 100644 --- a/apps/desktop/src/renderer/routes/_authenticated/_dashboard/v2-workspace/$workspaceId/components/WorkspaceSidebar/hooks/useChangesTab/components/CommitFilterDropdown/components/CommitRow/CommitRow.tsx +++ b/apps/desktop/src/renderer/routes/_authenticated/_dashboard/v2-workspace/$workspaceId/components/WorkspaceSidebar/hooks/useChangesTab/components/CommitFilterDropdown/components/CommitRow/CommitRow.tsx @@ -22,17 +22,15 @@ interface CommitRowProps { wrap?: boolean; } -export function CommitRow({ commit, isSelected, wrap = false }: CommitRowProps) { +export function CommitRow({ + commit, + isSelected, + wrap = false, +}: CommitRowProps) { return (
-
+
{commit.message}
diff --git a/apps/marketing/src/app/components/DownloadButton/DownloadButton.tsx b/apps/marketing/src/app/components/DownloadButton/DownloadButton.tsx index ecafd8dc741..680404d865f 100644 --- a/apps/marketing/src/app/components/DownloadButton/DownloadButton.tsx +++ b/apps/marketing/src/app/components/DownloadButton/DownloadButton.tsx @@ -28,7 +28,7 @@ export function DownloadButton({ ? "px-2 sm:px-4 py-2 text-sm" : "px-3 sm:px-6 py-2 sm:py-3 text-sm sm:text-base"; - const buttonClasses = `bg-brand/10 text-[#ff8c3a] border border-brand/20 ${sizeClasses} font-normal hover:bg-brand/15 hover:border-brand/35 transition-colors flex items-center gap-2 ${className}`; + const buttonClasses = `bg-foreground text-background ${sizeClasses} font-normal hover:opacity-90 transition-opacity flex items-center gap-2 ${className}`; const goToInterstitial = () => { track("download_clicked"); diff --git a/apps/marketing/src/app/components/HeroSection/HeroSection.tsx b/apps/marketing/src/app/components/HeroSection/HeroSection.tsx index e5df199d90c..14e5a899d93 100644 --- a/apps/marketing/src/app/components/HeroSection/HeroSection.tsx +++ b/apps/marketing/src/app/components/HeroSection/HeroSection.tsx @@ -2,16 +2,62 @@ import { COMPANY } from "@superset/shared/constants"; import { useScroll } from "framer-motion"; +import { useFeatureFlagVariantKey } from "posthog-js/react"; import { useRef, useState } from "react"; import { FaGithub } from "react-icons/fa"; +import { isMacPlatform, usePlatform } from "../../hooks/useOS"; import { DownloadButton } from "../DownloadButton"; import { WaitlistModal } from "../WaitlistModal"; import { ProductDemo } from "./components/ProductDemo"; import { TypewriterText } from "./components/TypewriterText"; +const HERO_POSITIONING_FLAG = "landing-hero-positioning"; + +const PIXEL_FONT_STYLE = { + fontFamily: "var(--font-geist-pixel-grid)", +} satisfies React.CSSProperties; + +interface HeroCopy { + headline: string; + segments: { text: string; style?: React.CSSProperties }[]; + subheadline: string; +} + +const TEST_SUBHEADLINE = + "Isolated workspaces for Claude Code, Codex, and any CLI agent — run them side by side and review every change from one dashboard. Free to start."; + +const HERO_COPY = { + control: { + headline: "The Code Editor for AI Agents.", + segments: [ + { text: "The Code Editor for " }, + { text: "AI Agents.", style: PIXEL_FONT_STYLE }, + ], + subheadline: + "Orchestrate 100+ coding agents in parallel. Works for any agents. Built for the AI era.", + }, + "capability-mac": { + headline: "Run parallel coding agents on your Mac.", + segments: [ + { text: "Run " }, + { text: "parallel coding agents", style: PIXEL_FONT_STYLE }, + { text: " on your Mac." }, + ], + subheadline: TEST_SUBHEADLINE, + }, +} satisfies Record; + export function HeroSection() { const [isWaitlistOpen, setIsWaitlistOpen] = useState(false); const demoRef = useRef(null); + const { platform } = usePlatform(); + const heroVariant = useFeatureFlagVariantKey(HERO_POSITIONING_FLAG); + const copy = + isMacPlatform(platform) && + typeof heroVariant === "string" && + heroVariant in HERO_COPY + ? HERO_COPY[heroVariant as keyof typeof HERO_COPY] + : HERO_COPY.control; const { scrollYProgress } = useScroll({ target: demoRef, @@ -31,27 +77,19 @@ export function HeroSection() { }} >

- Orchestrate 100+ coding agents in parallel. Works for any - agents. Built for the AI era. + {copy.subheadline}