From f914dfa486bd498f8d99e67f9523059b207d3399 Mon Sep 17 00:00:00 2001
From: Kiet Ho <hoakiet98@gmail.com>
Date: Thu, 12 Feb 2026 14:31:13 -0800
Subject: [PATCH 01/10] Mockup improvement

---
 .../components/HeroSection/HeroSection.tsx    | 96 +++++++++----------
 .../components/AppMockup/AppMockup.tsx        |  2 +-
 .../components/ProductDemo/ProductDemo.tsx    | 62 ++++++------
 .../components/SelectorPill/SelectorPill.tsx  |  4 +-
 4 files changed, 76 insertions(+), 88 deletions(-)

diff --git a/apps/marketing/src/app/components/HeroSection/HeroSection.tsx b/apps/marketing/src/app/components/HeroSection/HeroSection.tsx
index e27e9aea2f6..0d1b0ec1516 100644
--- a/apps/marketing/src/app/components/HeroSection/HeroSection.tsx
+++ b/apps/marketing/src/app/components/HeroSection/HeroSection.tsx
@@ -13,61 +13,57 @@ export function HeroSection() {
 
 	return (
 		<div>
-			<div className="flex mt-14 min-h-[calc(100svh-64px)] items-center -translate-y-12 overflow-hidden">
-				<div className="relative w-full max-w-[1600px] mx-auto px-4 sm:px-8 lg:px-[30px] py-8 sm:py-12 lg:py-16">
-					<div className="grid grid-cols-1 lg:grid-cols-[2fr_3fr] gap-8 lg:gap-16 items-center">
-						<div className="space-y-6 sm:space-y-8">
-							<div className="space-y-2 sm:space-y-6">
-								<h1
-									className="text-3xl sm:text-4xl lg:text-5xl font-normal tracking-normal leading-[1.3em] text-foreground relative"
-									style={{ fontFamily: "var(--font-ibm-plex-mono)" }}
-								>
-									<span className="invisible" aria-hidden="true">
-										The Terminal for Coding Agents.
-									</span>
-									<span className="absolute inset-0">
-										<TypewriterText
-											segments={[
-												{ text: "The Terminal for " },
-												{
-													text: "Coding Agents",
-													style: {
-														fontFamily: "var(--font-geist-pixel-grid)",
-													},
+			<div className="flex flex-col items-center pt-24 sm:pt-32 lg:pt-40 overflow-hidden">
+				<div className="relative w-full max-w-[1600px] mx-auto px-4 sm:px-8 lg:px-[30px]">
+					<div className="flex flex-col items-center text-center">
+						<div className="space-y-4 sm:space-y-6">
+							<h1
+								className="text-4xl sm:text-5xl md:text-6xl lg:text-7xl font-medium tracking-tight leading-[1.1] text-foreground relative"
+								style={{ fontFamily: "var(--font-ibm-plex-mono)" }}
+							>
+								<span className="invisible" aria-hidden="true">
+									The Terminal for Coding Agents.
+								</span>
+								<span className="absolute inset-0">
+									<TypewriterText
+										segments={[
+											{ text: "The Terminal for " },
+											{
+												text: "Coding Agents",
+												style: {
+													fontFamily: "var(--font-geist-pixel-grid)",
 												},
-												{ text: "." },
-											]}
-											speed={40}
-											delay={600}
-										/>
-									</span>
-								</h1>
-								<p className="text-base sm:text-xl font-light text-muted-foreground max-w-[400px]">
-									Orchestrate a team of Claude Code, Codex, or any other coding
-									agents
-								</p>
-							</div>
-
-							<div className="flex flex-wrap items-center gap-2 sm:gap-4">
-								<DownloadButton
-									onJoinWaitlist={() => setIsWaitlistOpen(true)}
-								/>
-								<button
-									type="button"
-									className="px-4 py-2.5 sm:px-6 sm:py-3 text-sm sm:text-base font-normal bg-background border border-border text-foreground hover:bg-muted transition-colors flex items-center gap-2"
-									onClick={() => window.open(COMPANY.GITHUB_URL, "_blank")}
-									aria-label="View on GitHub"
-								>
-									View on GitHub
-									<FaGithub className="size-4" />
-								</button>
-							</div>
+											},
+											{ text: "." },
+										]}
+										speed={40}
+										delay={600}
+									/>
+								</span>
+							</h1>
+							<p className="text-base sm:text-xl font-light text-muted-foreground max-w-xl mx-auto">
+								Orchestrate a team of Claude Code, Codex, or any other coding
+								agents
+							</p>
 						</div>
 
-						<div className="relative w-full min-w-0">
-							<ProductDemo />
+						<div className="flex flex-wrap items-center justify-center gap-2 sm:gap-4 mt-6 sm:mt-8">
+							<DownloadButton onJoinWaitlist={() => setIsWaitlistOpen(true)} />
+							<button
+								type="button"
+								className="px-4 py-2.5 sm:px-6 sm:py-3 text-sm sm:text-base font-normal bg-background border border-border text-foreground hover:bg-muted transition-colors flex items-center gap-2"
+								onClick={() => window.open(COMPANY.GITHUB_URL, "_blank")}
+								aria-label="View on GitHub"
+							>
+								View on GitHub
+								<FaGithub className="size-4" />
+							</button>
 						</div>
 					</div>
+
+					<div className="relative w-full mt-12 sm:mt-16 lg:mt-20">
+						<ProductDemo />
+					</div>
 				</div>
 			</div>
 			<WaitlistModal
diff --git a/apps/marketing/src/app/components/HeroSection/components/AppMockup/AppMockup.tsx b/apps/marketing/src/app/components/HeroSection/components/AppMockup/AppMockup.tsx
index 80fc0f67a8e..50690790f14 100644
--- a/apps/marketing/src/app/components/HeroSection/components/AppMockup/AppMockup.tsx
+++ b/apps/marketing/src/app/components/HeroSection/components/AppMockup/AppMockup.tsx
@@ -268,7 +268,7 @@ export function AppMockup({ activeDemo = "Use Any Agents" }: AppMockupProps) {
 
 	return (
 		<div
-			className="relative w-full min-w-[600px] rounded-xl overflow-hidden bg-black/40 backdrop-blur-xl border border-white/[0.08] shadow-2xl"
+			className="relative w-full min-w-[600px] rounded-2xl overflow-hidden bg-black/60 backdrop-blur-xl border border-white/[0.06] shadow-[0_8px_60px_-12px_rgba(0,0,0,0.7)]"
 			style={{ aspectRatio: "16/10" }}
 		>
 			{/* Window chrome */}
diff --git a/apps/marketing/src/app/components/HeroSection/components/ProductDemo/ProductDemo.tsx b/apps/marketing/src/app/components/HeroSection/components/ProductDemo/ProductDemo.tsx
index a7e67a7a91b..d1fc48a53e2 100644
--- a/apps/marketing/src/app/components/HeroSection/components/ProductDemo/ProductDemo.tsx
+++ b/apps/marketing/src/app/components/HeroSection/components/ProductDemo/ProductDemo.tsx
@@ -1,58 +1,50 @@
 "use client";
 
 import { motion } from "framer-motion";
-import dynamic from "next/dynamic";
 import { useState } from "react";
 import { type ActiveDemo, AppMockup } from "../AppMockup";
 import { SelectorPill } from "./components/SelectorPill";
 import { DEMO_OPTIONS } from "./constants";
 
-const MeshGradient = dynamic(
-	() => import("@superset/ui/mesh-gradient").then((mod) => mod.MeshGradient),
-	{ ssr: false },
-);
-
 export function ProductDemo() {
 	const [activeOption, setActiveOption] =
 		useState<ActiveDemo>("Use Any Agents");
 
 	return (
-		<div className="relative w-full max-w-full rounded-lg overflow-hidden">
-			{/* Animated mesh gradient backgrounds - all rendered, opacity controlled */}
-			{DEMO_OPTIONS.map((option) => (
-				<motion.div
-					key={`gradient-${option.label}`}
-					className="absolute inset-0"
-					initial={false}
-					animate={{ opacity: activeOption === option.label ? 1 : 0 }}
-					transition={{ duration: 0.5, ease: "easeInOut" }}
-				>
-					<MeshGradient
-						colors={option.colors}
-						className="absolute inset-0 w-full h-full"
+		<motion.div
+			className="relative w-full max-w-full"
+			initial={{ opacity: 0, y: 24 }}
+			animate={{ opacity: 1, y: 0 }}
+			transition={{ duration: 0.6, ease: "easeOut", delay: 0.2 }}
+		>
+			{/* Selector pills - centered above mockup */}
+			<div className="flex items-center justify-center gap-2 mb-4 sm:mb-6 overflow-x-auto pb-1 -mb-1 scrollbar-hide">
+				{DEMO_OPTIONS.map((option) => (
+					<SelectorPill
+						key={option.label}
+						label={option.label}
+						active={activeOption === option.label}
+						onSelect={() => setActiveOption(option.label as ActiveDemo)}
 					/>
-				</motion.div>
-			))}
+				))}
+			</div>
 
-			{/* Content wrapper - no right padding on mobile so content touches edge */}
-			<div className="relative flex flex-col gap-3 sm:gap-4 py-4 pl-4 sm:p-6">
+			{/* Mockup with fade overlays */}
+			<div className="relative">
 				{/* App mockup - horizontally scrollable on mobile */}
 				<div className="overflow-x-auto scrollbar-hide">
 					<AppMockup activeDemo={activeOption} />
 				</div>
 
-				{/* Selector pills - horizontally scrollable on mobile */}
-				<div className="flex items-center gap-2 overflow-x-auto pb-1 -mb-1 scrollbar-hide">
-					{DEMO_OPTIONS.map((option) => (
-						<SelectorPill
-							key={option.label}
-							label={option.label}
-							active={activeOption === option.label}
-							onSelect={() => setActiveOption(option.label as ActiveDemo)}
-						/>
-					))}
-				</div>
+				{/* Bottom gradient fade */}
+				<div className="absolute bottom-0 left-0 right-0 h-24 sm:h-32 bg-gradient-to-t from-background to-transparent pointer-events-none" />
+
+				{/* Left edge gradient fade */}
+				<div className="absolute top-0 bottom-0 left-0 w-12 sm:w-20 bg-gradient-to-r from-background to-transparent pointer-events-none" />
+
+				{/* Right edge gradient fade */}
+				<div className="absolute top-0 bottom-0 right-0 w-12 sm:w-20 bg-gradient-to-l from-background to-transparent pointer-events-none" />
 			</div>
-		</div>
+		</motion.div>
 	);
 }
diff --git a/apps/marketing/src/app/components/HeroSection/components/ProductDemo/components/SelectorPill/SelectorPill.tsx b/apps/marketing/src/app/components/HeroSection/components/ProductDemo/components/SelectorPill/SelectorPill.tsx
index be5dd4d03bb..a199dad69e9 100644
--- a/apps/marketing/src/app/components/HeroSection/components/ProductDemo/components/SelectorPill/SelectorPill.tsx
+++ b/apps/marketing/src/app/components/HeroSection/components/ProductDemo/components/SelectorPill/SelectorPill.tsx
@@ -19,11 +19,11 @@ export function SelectorPill({
 			onMouseEnter={onSelect}
 			onClick={onSelect}
 			className={`
-				inline-flex items-center justify-center py-2 text-xs sm:text-sm whitespace-nowrap cursor-pointer shrink-0
+				inline-flex items-center justify-center py-2 text-xs sm:text-sm whitespace-nowrap cursor-pointer shrink-0 rounded-full
 				${
 					active
 						? "bg-foreground/90 border border-foreground text-background/80"
-						: "bg-foreground/5 border border-foreground/20 text-foreground/80 hover:bg-foreground/10 hover:border-foreground/30"
+						: "bg-foreground/[0.03] border border-foreground/10 text-foreground/50 hover:bg-foreground/[0.06] hover:border-foreground/20 hover:text-foreground/70"
 				}
 			`}
 			animate={{

From db451b2c1ab75a2e3dfe948fe25199b03e9a2faa Mon Sep 17 00:00:00 2001
From: Kiet Ho <hoakiet98@gmail.com>
Date: Thu, 12 Feb 2026 15:58:04 -0800
Subject: [PATCH 02/10] Beauty

---
 .../components/HeroSection/HeroSection.tsx    |  13 +-
 .../components/AppMockup/AppMockup.tsx        | 188 +++++++++---------
 .../components/ProductDemo/ProductDemo.tsx    |  72 ++++---
 3 files changed, 138 insertions(+), 135 deletions(-)

diff --git a/apps/marketing/src/app/components/HeroSection/HeroSection.tsx b/apps/marketing/src/app/components/HeroSection/HeroSection.tsx
index 0d1b0ec1516..277c4d547fd 100644
--- a/apps/marketing/src/app/components/HeroSection/HeroSection.tsx
+++ b/apps/marketing/src/app/components/HeroSection/HeroSection.tsx
@@ -1,7 +1,8 @@
 "use client";
 
 import { COMPANY } from "@superset/shared/constants";
-import { useState } from "react";
+import { useScroll } from "framer-motion";
+import { useRef, useState } from "react";
 import { FaGithub } from "react-icons/fa";
 import { DownloadButton } from "../DownloadButton";
 import { WaitlistModal } from "../WaitlistModal";
@@ -10,6 +11,12 @@ import { TypewriterText } from "./components/TypewriterText";
 
 export function HeroSection() {
 	const [isWaitlistOpen, setIsWaitlistOpen] = useState(false);
+	const demoRef = useRef<HTMLDivElement>(null);
+
+	const { scrollYProgress } = useScroll({
+		target: demoRef,
+		offset: ["start 0.45", "start 0"],
+	});
 
 	return (
 		<div>
@@ -61,8 +68,8 @@ export function HeroSection() {
 						</div>
 					</div>
 
-					<div className="relative w-full mt-12 sm:mt-16 lg:mt-20">
-						<ProductDemo />
+					<div ref={demoRef} className="relative w-full mt-12 sm:mt-16 lg:mt-20">
+						<ProductDemo scrollYProgress={scrollYProgress} />
 					</div>
 				</div>
 			</div>
diff --git a/apps/marketing/src/app/components/HeroSection/components/AppMockup/AppMockup.tsx b/apps/marketing/src/app/components/HeroSection/components/AppMockup/AppMockup.tsx
index 50690790f14..015cc372ceb 100644
--- a/apps/marketing/src/app/components/HeroSection/components/AppMockup/AppMockup.tsx
+++ b/apps/marketing/src/app/components/HeroSection/components/AppMockup/AppMockup.tsx
@@ -47,14 +47,14 @@ function StatusIndicator({
 	}[status];
 
 	return (
-		<span className="relative flex size-2 shrink-0">
+		<span className="relative flex size-2.5 shrink-0">
 			{config.pulse && (
 				<span
 					className={`absolute inline-flex h-full w-full animate-ping rounded-full opacity-75 ${config.ping}`}
 				/>
 			)}
 			<span
-				className={`relative inline-flex size-2 rounded-full ${config.dot}`}
+				className={`relative inline-flex size-2.5 rounded-full ${config.dot}`}
 			/>
 		</span>
 	);
@@ -143,16 +143,16 @@ function WorkspaceItem({
 }) {
 	return (
 		<div
-			className={`flex items-start gap-2 px-2 py-1 text-[10px] ${isActive ? "bg-white/10" : "hover:bg-white/5"} cursor-pointer relative`}
+			className={`flex items-start gap-2.5 px-2.5 py-1.5 text-xs ${isActive ? "bg-white/10" : "hover:bg-white/5"} cursor-pointer relative`}
 		>
 			{isActive && (
 				<div className="absolute left-0 top-0 bottom-0 w-0.5 bg-cyan-500 rounded-r" />
 			)}
 			<div className="mt-0.5 text-muted-foreground/50 relative">
 				{status === "working" ? (
-					<AsciiSpinner className="text-[10px]" />
+					<AsciiSpinner className="text-xs" />
 				) : (
-					<LuFolderGit2 className="size-3.5" />
+					<LuFolderGit2 className="size-4" />
 				)}
 				{status && status !== "working" && (
 					<span className="absolute -top-0.5 -right-0.5">
@@ -170,7 +170,7 @@ function WorkspaceItem({
 					{(add !== undefined || pr) && (
 						<div className="flex items-center gap-1 shrink-0">
 							{add !== undefined && (
-								<span className="text-[9px]">
+								<span className="text-[11px]">
 									<span className="text-emerald-400">+{add}</span>
 									{del !== undefined && del > 0 && (
 										<span className="text-red-400 ml-0.5">-{del}</span>
@@ -181,12 +181,12 @@ function WorkspaceItem({
 					)}
 				</div>
 				<div className="flex items-center justify-between">
-					<span className="text-muted-foreground/50 truncate text-[9px] font-mono">
+					<span className="text-muted-foreground/50 truncate text-[11px] font-mono">
 						{branch}
 					</span>
 					{pr && (
-						<span className="text-muted-foreground/40 text-[9px] flex items-center gap-0.5">
-							<LuGitPullRequest className="size-2.5" />
+						<span className="text-muted-foreground/40 text-[11px] flex items-center gap-0.5">
+							<LuGitPullRequest className="size-3" />
 							{pr}
 						</span>
 					)}
@@ -229,18 +229,18 @@ function FileChangeItem({
 	return (
 		<div
 			className={`flex items-center justify-between gap-2 hover:bg-white/5 px-3 ${isFolder ? "py-1.5 mt-1" : "py-1"}`}
-			style={{ paddingLeft: `${12 + (indent || 0) * 14}px` }}
+			style={{ paddingLeft: `${12 + (indent || 0) * 16}px` }}
 		>
 			<div className="flex items-center gap-2 min-w-0">
-				<Icon className={`size-3.5 shrink-0 ${iconColor}`} />
+				<Icon className={`size-4 shrink-0 ${iconColor}`} />
 				<span
-					className={`truncate ${isFolder ? "text-muted-foreground/60 text-[9px]" : "text-muted-foreground/80 text-[10px]"}`}
+					className={`truncate ${isFolder ? "text-muted-foreground/60 text-[11px]" : "text-muted-foreground/80 text-xs"}`}
 				>
 					{path}
 				</span>
 			</div>
 			{!isFolder && (add > 0 || del > 0) && (
-				<span className="shrink-0 tabular-nums text-[9px]">
+				<span className="shrink-0 tabular-nums text-[11px]">
 					{add > 0 && <span className="text-emerald-400">+{add}</span>}
 					{del > 0 && <span className="text-red-400 ml-1">-{del}</span>}
 				</span>
@@ -260,51 +260,45 @@ interface AppMockupProps {
 }
 
 export function AppMockup({ activeDemo = "Use Any Agents" }: AppMockupProps) {
-	// Animation states based on activeDemo
-	// - "Use Any Agents": Highlight terminal area with agent output
-	// - "Create Parallel Branches": Highlight workspace sidebar with branches
-	// - "See Changes": Highlight file changes panel on right
-	// - "Open in Any IDE": Highlight top bar / open actions
-
 	return (
 		<div
-			className="relative w-full min-w-[600px] rounded-2xl overflow-hidden bg-black/60 backdrop-blur-xl border border-white/[0.06] shadow-[0_8px_60px_-12px_rgba(0,0,0,0.7)]"
+			className="relative w-full min-w-[700px] rounded-2xl overflow-hidden bg-black/60 backdrop-blur-xl border border-white/[0.08] shadow-[0_8px_60px_-12px_rgba(0,0,0,0.7)] ring-1 ring-white/[0.04]"
 			style={{ aspectRatio: "16/10" }}
 		>
 			{/* Window chrome */}
-			<div className="flex items-center justify-between px-3 py-2 bg-white/[0.03] backdrop-blur-md border-b border-white/[0.06]">
+			<div className="flex items-center justify-between px-4 py-2.5 bg-white/[0.03] backdrop-blur-md border-b border-white/[0.06]">
 				<div className="flex items-center gap-1.5">
-					<div className="w-2.5 h-2.5 rounded-full bg-[#ff5f57]" />
-					<div className="w-2.5 h-2.5 rounded-full bg-[#febc2e]" />
-					<div className="w-2.5 h-2.5 rounded-full bg-[#28c840]" />
+					<div className="w-3 h-3 rounded-full bg-[#ff5f57]" />
+					<div className="w-3 h-3 rounded-full bg-[#febc2e]" />
+					<div className="w-3 h-3 rounded-full bg-[#28c840]" />
 				</div>
-				<span className="text-[11px] text-muted-foreground/70">superset</span>
+				<span className="text-[13px] text-muted-foreground/70">superset</span>
 				<div className="w-12" />
 			</div>
 
-			<div className="flex h-[calc(100%-36px)]">
+			<div className="flex h-[calc(100%-40px)]">
 				{/* Left sidebar */}
-				<div className="w-[180px] bg-white/[0.02] backdrop-blur-lg border-r border-white/[0.06] flex flex-col shrink-0">
+				<div className="w-[210px] bg-white/[0.02] backdrop-blur-lg border-r border-white/[0.06] flex flex-col shrink-0">
 					{/* New Workspace button */}
-					<div className="px-2 py-2 border-b border-white/[0.06]">
+					<div className="px-2.5 py-2.5 border-b border-white/[0.06]">
 						<button
 							type="button"
-							className="flex items-center gap-2 text-[10px] text-muted-foreground/60 hover:text-muted-foreground cursor-pointer w-full px-1.5 py-1 hover:bg-white/[0.04] rounded"
+							className="flex items-center gap-2 text-xs text-muted-foreground/60 hover:text-muted-foreground cursor-pointer w-full px-2 py-1 hover:bg-white/[0.04] rounded"
 						>
-							<LuPlus className="size-3.5" />
+							<LuPlus className="size-4" />
 							<span>New Workspace</span>
 						</button>
 					</div>
 
 					{/* Repository section */}
-					<div className="flex items-center justify-between px-2 py-1.5 border-b border-white/[0.06] cursor-pointer hover:bg-white/[0.04]">
+					<div className="flex items-center justify-between px-2.5 py-2 border-b border-white/[0.06] cursor-pointer hover:bg-white/[0.04]">
 						<div className="flex items-center gap-2">
-							<span className="text-[11px] text-foreground/90">superset</span>
-							<span className="text-[10px] text-muted-foreground/50">(5)</span>
+							<span className="text-[13px] text-foreground/90">superset</span>
+							<span className="text-xs text-muted-foreground/50">(5)</span>
 						</div>
 						<div className="flex items-center gap-1 text-muted-foreground/50">
-							<LuPlus className="size-3" />
-							<LuChevronDown className="size-3" />
+							<LuPlus className="size-3.5" />
+							<LuChevronDown className="size-3.5" />
 						</div>
 					</div>
 
@@ -320,9 +314,9 @@ export function AppMockup({ activeDemo = "Use Any Agents" }: AppMockupProps) {
 							}}
 							transition={{ duration: 0.3, ease: "easeOut" }}
 						>
-							<div className="flex items-start gap-2 px-2 py-1 text-[10px] bg-cyan-500/10 border-l-2 border-cyan-500 relative">
+							<div className="flex items-start gap-2.5 px-2.5 py-1.5 text-xs bg-cyan-500/10 border-l-2 border-cyan-500 relative">
 								<div className="mt-0.5 text-muted-foreground/50 relative">
-									<AsciiSpinner className="text-[10px]" />
+									<AsciiSpinner className="text-xs" />
 								</div>
 								<div className="flex-1 min-w-0">
 									<div className="flex items-center justify-between gap-1">
@@ -330,7 +324,7 @@ export function AppMockup({ activeDemo = "Use Any Agents" }: AppMockupProps) {
 											new workspace
 										</span>
 									</div>
-									<span className="text-muted-foreground/50 truncate text-[9px] font-mono">
+									<span className="text-muted-foreground/50 truncate text-[11px] font-mono">
 										creating...
 									</span>
 								</div>
@@ -357,26 +351,26 @@ export function AppMockup({ activeDemo = "Use Any Agents" }: AppMockupProps) {
 
 					{/* Ports section */}
 					<div className="border-t border-white/[0.06]">
-						<div className="flex items-center justify-between px-2 py-1.5">
-							<div className="flex items-center gap-1 text-[10px] text-muted-foreground/40">
+						<div className="flex items-center justify-between px-2.5 py-2">
+							<div className="flex items-center gap-1 text-xs text-muted-foreground/40">
 								<span>⌥</span>
 								<span>Ports</span>
 							</div>
-							<span className="text-[9px] text-muted-foreground/30">4</span>
+							<span className="text-[11px] text-muted-foreground/30">4</span>
 						</div>
 						{PORTS.map((port) => (
-							<div key={port.workspace} className="px-2 py-1">
-								<div className="flex items-center justify-between text-[9px]">
+							<div key={port.workspace} className="px-2.5 py-1">
+								<div className="flex items-center justify-between text-[11px]">
 									<span className="text-muted-foreground/50 truncate">
 										{port.workspace}
 									</span>
-									<LuX className="size-2.5 text-muted-foreground/30" />
+									<LuX className="size-3 text-muted-foreground/30" />
 								</div>
 								<div className="flex flex-wrap gap-1 mt-0.5">
 									{port.ports.map((p) => (
 										<span
 											key={p}
-											className="px-1.5 py-0.5 bg-white/[0.04] rounded text-[9px] text-muted-foreground/60 tabular-nums"
+											className="px-1.5 py-0.5 bg-white/[0.04] rounded text-[11px] text-muted-foreground/60 tabular-nums"
 										>
 											{p}
 										</span>
@@ -390,12 +384,12 @@ export function AppMockup({ activeDemo = "Use Any Agents" }: AppMockupProps) {
 				{/* Main content area */}
 				<div className="flex-1 flex flex-col min-w-0">
 					{/* Tab bar */}
-					<div className="flex items-center gap-0.5 px-2 py-1 bg-white/[0.02] backdrop-blur-md border-b border-white/[0.06]">
+					<div className="flex items-center gap-0.5 px-2 py-1.5 bg-white/[0.02] backdrop-blur-md border-b border-white/[0.06]">
 						{/* Claude tab - always visible, active */}
-						<div className="flex items-center gap-1.5 px-3 py-1 bg-white/[0.06] backdrop-blur-sm rounded-t text-[10px] text-foreground/90 border-b-2 border-cyan-500/70">
+						<div className="flex items-center gap-1.5 px-3 py-1 bg-white/[0.06] backdrop-blur-sm rounded-t text-xs text-foreground/90 border-b-2 border-cyan-500/70">
 							{activeDemo === "Create Parallel Branches" ? (
 								<>
-									<LuTerminal className="size-3 text-muted-foreground/70" />
+									<LuTerminal className="size-3.5 text-muted-foreground/70" />
 									<span>setup</span>
 								</>
 							) : (
@@ -403,17 +397,17 @@ export function AppMockup({ activeDemo = "Use Any Agents" }: AppMockupProps) {
 									<Image
 										src="/app-icons/claude.svg"
 										alt="Claude"
-										width={12}
-										height={12}
+										width={14}
+										height={14}
 									/>
 									<span>claude</span>
 								</>
 							)}
-							<LuX className="size-3 text-muted-foreground/50 hover:text-muted-foreground" />
+							<LuX className="size-3.5 text-muted-foreground/50 hover:text-muted-foreground" />
 						</div>
 						{/* Other agent tabs - shown when "Use Any Agents" is active */}
 						<motion.div
-							className="flex items-center gap-1.5 py-1 text-[10px] text-muted-foreground/60 hover:bg-white/5 rounded-t overflow-hidden"
+							className="flex items-center gap-1.5 py-1 text-xs text-muted-foreground/60 hover:bg-white/5 rounded-t overflow-hidden"
 							initial={{
 								opacity: 0,
 								width: 0,
@@ -435,14 +429,14 @@ export function AppMockup({ activeDemo = "Use Any Agents" }: AppMockupProps) {
 							<Image
 								src="/app-icons/codex.svg"
 								alt="Codex"
-								width={12}
-								height={12}
+								width={14}
+								height={14}
 							/>
 							<span>codex</span>
-							<LuX className="size-3 text-muted-foreground/30" />
+							<LuX className="size-3.5 text-muted-foreground/30" />
 						</motion.div>
 						<motion.div
-							className="flex items-center gap-1.5 py-1 text-[10px] text-muted-foreground/60 hover:bg-white/5 rounded-t overflow-hidden"
+							className="flex items-center gap-1.5 py-1 text-xs text-muted-foreground/60 hover:bg-white/5 rounded-t overflow-hidden"
 							initial={{
 								opacity: 0,
 								width: 0,
@@ -464,14 +458,14 @@ export function AppMockup({ activeDemo = "Use Any Agents" }: AppMockupProps) {
 							<Image
 								src="/app-icons/gemini.svg"
 								alt="Gemini"
-								width={12}
-								height={12}
+								width={14}
+								height={14}
 							/>
 							<span>gemini</span>
-							<LuX className="size-3 text-muted-foreground/30" />
+							<LuX className="size-3.5 text-muted-foreground/30" />
 						</motion.div>
 						<motion.div
-							className="flex items-center gap-1.5 py-1 text-[10px] text-muted-foreground/60 hover:bg-white/5 rounded-t overflow-hidden"
+							className="flex items-center gap-1.5 py-1 text-xs text-muted-foreground/60 hover:bg-white/5 rounded-t overflow-hidden"
 							initial={{
 								opacity: 0,
 								width: 0,
@@ -493,31 +487,29 @@ export function AppMockup({ activeDemo = "Use Any Agents" }: AppMockupProps) {
 							<Image
 								src="/app-icons/cursor-agent.svg"
 								alt="Cursor"
-								width={12}
-								height={12}
+								width={14}
+								height={14}
 							/>
 							<span>cursor</span>
-							<LuX className="size-3 text-muted-foreground/30" />
+							<LuX className="size-3.5 text-muted-foreground/30" />
 						</motion.div>
 						<div className="flex items-center px-2 py-1 text-muted-foreground/40 hover:text-muted-foreground/60 cursor-pointer">
-							<LuPlus className="size-3.5" />
-							<LuChevronDown className="size-3 ml-0.5" />
+							<LuPlus className="size-4" />
+							<LuChevronDown className="size-3.5 ml-0.5" />
 						</div>
 					</div>
 
 					{/* Terminal header */}
-					<div className="flex items-center gap-2 px-3 py-1.5 bg-black/20 border-b border-white/[0.04]">
-						<span className="text-muted-foreground/40 text-[10px]">⬛</span>
-						<span className="text-[10px] text-muted-foreground/60">
-							Terminal
-						</span>
+					<div className="flex items-center gap-2 px-4 py-2 bg-black/20 border-b border-white/[0.04]">
+						<span className="text-muted-foreground/40 text-xs">⬛</span>
+						<span className="text-xs text-muted-foreground/60">Terminal</span>
 						<div className="flex-1" />
-						<span className="text-muted-foreground/20 text-[10px]">□</span>
-						<LuX className="size-3 text-muted-foreground/20" />
+						<span className="text-muted-foreground/20 text-xs">□</span>
+						<LuX className="size-3.5 text-muted-foreground/20" />
 					</div>
 
 					{/* Terminal content */}
-					<div className="flex-1 bg-black/30 backdrop-blur-sm p-3 font-mono text-[10px] leading-relaxed overflow-hidden relative">
+					<div className="flex-1 bg-black/30 backdrop-blur-sm p-4 font-mono text-xs leading-relaxed overflow-hidden relative">
 						{/* Default terminal content */}
 						<motion.div
 							initial={{ opacity: 1 }}
@@ -528,12 +520,12 @@ export function AppMockup({ activeDemo = "Use Any Agents" }: AppMockupProps) {
 						>
 							{/* Claude ASCII art header */}
 							<div className="flex items-start gap-3 mb-3">
-								<div className="text-cyan-400 leading-none whitespace-pre text-[9px]">
+								<div className="text-cyan-400 leading-none whitespace-pre text-[11px]">
 									{`  * ▐▛███▜▌ *
  * ▝▜█████▛▘ *
   *  ▘▘ ▝▝  *`}
 								</div>
-								<div className="text-muted-foreground/90 text-[10px]">
+								<div className="text-muted-foreground/90 text-xs">
 									<div>
 										<span className="text-foreground font-medium">
 											Claude Code
@@ -617,7 +609,7 @@ export function AppMockup({ activeDemo = "Use Any Agents" }: AppMockupProps) {
 
 						{/* Create Parallel Branches overlay */}
 						<motion.div
-							className="absolute inset-0 p-3 font-mono text-[10px] leading-relaxed"
+							className="absolute inset-0 p-4 font-mono text-xs leading-relaxed"
 							initial={{ opacity: 0 }}
 							animate={{
 								opacity: activeDemo === "Create Parallel Branches" ? 1 : 0,
@@ -634,7 +626,7 @@ export function AppMockup({ activeDemo = "Use Any Agents" }: AppMockupProps) {
 							</div>
 							<div className="space-y-1.5 text-muted-foreground/70">
 								<div className="flex items-center gap-2">
-									<AsciiSpinner className="text-[10px]" />
+									<AsciiSpinner className="text-xs" />
 									<span>Setting up new parallel environment...</span>
 								</div>
 								<div className="ml-5 text-muted-foreground/50">
@@ -654,9 +646,9 @@ export function AppMockup({ activeDemo = "Use Any Agents" }: AppMockupProps) {
 				{/* Right sidebar */}
 				<motion.div
 					className="bg-white/[0.02] backdrop-blur-lg border-l border-white/[0.06] flex flex-col shrink-0 relative overflow-hidden"
-					initial={{ width: 200 }}
+					initial={{ width: 230 }}
 					animate={{
-						width: activeDemo === "See Changes" ? 350 : 200,
+						width: activeDemo === "See Changes" ? 380 : 230,
 					}}
 					transition={{ duration: 0.3, ease: "easeOut" }}
 				>
@@ -673,24 +665,22 @@ export function AppMockup({ activeDemo = "Use Any Agents" }: AppMockupProps) {
 						}}
 					>
 						{/* Header */}
-						<div className="flex items-center justify-between px-3 py-2 border-b border-white/[0.06]">
-							<span className="text-[10px] text-foreground/70">
-								Review Changes
-							</span>
-							<div className="flex items-center gap-1 text-[10px]">
-								<LuGitPullRequest className="size-3.5 text-cyan-400/70" />
+						<div className="flex items-center justify-between px-3 py-2.5 border-b border-white/[0.06]">
+							<span className="text-xs text-foreground/70">Review Changes</span>
+							<div className="flex items-center gap-1 text-xs">
+								<LuGitPullRequest className="size-4 text-cyan-400/70" />
 								<span className="text-muted-foreground/60">#827</span>
 							</div>
 						</div>
 
 						{/* Commit & Push section */}
-						<div className="px-3 py-2 border-b border-white/[0.06] space-y-2">
-							<div className="h-7 bg-black/20 rounded border border-white/[0.06] px-2 flex items-center text-[10px] text-muted-foreground/30">
+						<div className="px-3 py-2.5 border-b border-white/[0.06] space-y-2">
+							<div className="h-8 bg-black/20 rounded border border-white/[0.06] px-2.5 flex items-center text-xs text-muted-foreground/30">
 								Commit message...
 							</div>
 							<button
 								type="button"
-								className="w-full flex items-center justify-center gap-2 px-3 py-1.5 text-[10px] bg-white/[0.06] hover:bg-white/[0.1] rounded text-foreground/80"
+								className="w-full flex items-center justify-center gap-2 px-3 py-1.5 text-xs bg-white/[0.06] hover:bg-white/[0.1] rounded text-foreground/80"
 							>
 								<span>↑</span>
 								<span>Push</span>
@@ -737,9 +727,9 @@ export function AppMockup({ activeDemo = "Use Any Agents" }: AppMockupProps) {
 						}}
 					>
 						{/* PR Header */}
-						<div className="flex items-center justify-between px-3 py-2 border-b border-white/[0.06]">
+						<div className="flex items-center justify-between px-3 py-2.5 border-b border-white/[0.06]">
 							<div className="flex items-center gap-2">
-								<LuGitPullRequest className="size-4 text-emerald-400/80" />
+								<LuGitPullRequest className="size-4.5 text-emerald-400/80" />
 								<span className="text-sm text-foreground/80 font-medium">
 									Review PR #827
 								</span>
@@ -763,13 +753,13 @@ export function AppMockup({ activeDemo = "Use Any Agents" }: AppMockupProps) {
 						</div>
 
 						{/* Diff content */}
-						<div className="flex-1 overflow-hidden p-3 font-mono text-[10px]">
+						<div className="flex-1 overflow-hidden p-3 font-mono text-xs">
 							<div className="space-y-0.5">
 								<div className="text-muted-foreground/40 py-1">
 									@@ -1,4 +1,6 @@
 								</div>
 								<div className="flex">
-									<span className="w-6 text-muted-foreground/25 shrink-0">
+									<span className="w-7 text-muted-foreground/25 shrink-0">
 										1
 									</span>
 									<span className="text-muted-foreground/60">
@@ -777,37 +767,37 @@ export function AppMockup({ activeDemo = "Use Any Agents" }: AppMockupProps) {
 									</span>
 								</div>
 								<div className="flex bg-emerald-500/[0.08]">
-									<span className="w-6 text-emerald-400/80 shrink-0">+</span>
+									<span className="w-7 text-emerald-400/80 shrink-0">+</span>
 									<span className="text-emerald-400/80">
 										import {"{"} CloudWorkspace {"}"} from "./types"
 									</span>
 								</div>
 								<div className="flex bg-emerald-500/[0.08]">
-									<span className="w-6 text-emerald-400/80 shrink-0">+</span>
+									<span className="w-7 text-emerald-400/80 shrink-0">+</span>
 									<span className="text-emerald-400/80">
 										import {"{"} createSSHConnection {"}"} from "./ssh"
 									</span>
 								</div>
 								<div className="flex">
-									<span className="w-6 text-muted-foreground/25 shrink-0">
+									<span className="w-7 text-muted-foreground/25 shrink-0">
 										2
 									</span>
 									<span className="text-muted-foreground/60"></span>
 								</div>
 								<div className="flex bg-red-500/[0.08]">
-									<span className="w-6 text-red-400/80 shrink-0">-</span>
+									<span className="w-7 text-red-400/80 shrink-0">-</span>
 									<span className="text-red-400/80">
 										export const getWorkspaces = () ={">"} {"{"}
 									</span>
 								</div>
 								<div className="flex bg-emerald-500/[0.08]">
-									<span className="w-6 text-emerald-400/80 shrink-0">+</span>
+									<span className="w-7 text-emerald-400/80 shrink-0">+</span>
 									<span className="text-emerald-400/80">
 										export const getWorkspaces = async () ={">"} {"{"}
 									</span>
 								</div>
 								<div className="flex">
-									<span className="w-6 text-muted-foreground/25 shrink-0">
+									<span className="w-7 text-muted-foreground/25 shrink-0">
 										4
 									</span>
 									<span className="text-muted-foreground/60">
@@ -818,7 +808,7 @@ export function AppMockup({ activeDemo = "Use Any Agents" }: AppMockupProps) {
 						</div>
 
 						{/* Review actions */}
-						<div className="px-3 py-2 border-t border-white/[0.06] flex items-center gap-2">
+						<div className="px-3 py-2.5 border-t border-white/[0.06] flex items-center gap-2">
 							<button
 								type="button"
 								className="px-3 py-1.5 text-xs bg-emerald-500/[0.12] text-emerald-400/80 rounded hover:bg-emerald-500/20"
diff --git a/apps/marketing/src/app/components/HeroSection/components/ProductDemo/ProductDemo.tsx b/apps/marketing/src/app/components/HeroSection/components/ProductDemo/ProductDemo.tsx
index d1fc48a53e2..51ccdbdcd06 100644
--- a/apps/marketing/src/app/components/HeroSection/components/ProductDemo/ProductDemo.tsx
+++ b/apps/marketing/src/app/components/HeroSection/components/ProductDemo/ProductDemo.tsx
@@ -1,50 +1,56 @@
 "use client";
 
-import { motion } from "framer-motion";
+import { type MotionValue, motion, useTransform } from "framer-motion";
 import { useState } from "react";
 import { type ActiveDemo, AppMockup } from "../AppMockup";
 import { SelectorPill } from "./components/SelectorPill";
 import { DEMO_OPTIONS } from "./constants";
 
-export function ProductDemo() {
+interface ProductDemoProps {
+	scrollYProgress: MotionValue<number>;
+}
+
+export function ProductDemo({ scrollYProgress }: ProductDemoProps) {
 	const [activeOption, setActiveOption] =
 		useState<ActiveDemo>("Use Any Agents");
 
-	return (
-		<motion.div
-			className="relative w-full max-w-full"
-			initial={{ opacity: 0, y: 24 }}
-			animate={{ opacity: 1, y: 0 }}
-			transition={{ duration: 0.6, ease: "easeOut", delay: 0.2 }}
-		>
-			{/* Selector pills - centered above mockup */}
-			<div className="flex items-center justify-center gap-2 mb-4 sm:mb-6 overflow-x-auto pb-1 -mb-1 scrollbar-hide">
-				{DEMO_OPTIONS.map((option) => (
-					<SelectorPill
-						key={option.label}
-						label={option.label}
-						active={activeOption === option.label}
-						onSelect={() => setActiveOption(option.label as ActiveDemo)}
-					/>
-				))}
-			</div>
+	// Starts full size, shrinks as user scrolls down
+	const scale = useTransform(scrollYProgress, [0, 1], [1, 0.82]);
+	// Fade overlays start visible, disappear as user scrolls
+	const overlayOpacity = useTransform(scrollYProgress, [0, 0.6], [1, 0]);
 
-			{/* Mockup with fade overlays */}
-			<div className="relative">
-				{/* App mockup - horizontally scrollable on mobile */}
+	return (
+		<div className="relative w-full max-w-full">
+			{/* Mockup + pills with scroll-driven scale + fade */}
+			<motion.div className="relative" style={{ scale }}>
+				{/* Selector pills - centered above mockup */}
+				<div className="flex items-center justify-center gap-2 mb-4 sm:mb-6 overflow-x-auto pb-1 scrollbar-hide">
+					{DEMO_OPTIONS.map((option) => (
+						<SelectorPill
+							key={option.label}
+							label={option.label}
+							active={activeOption === option.label}
+							onSelect={() => setActiveOption(option.label as ActiveDemo)}
+						/>
+					))}
+				</div>
 				<div className="overflow-x-auto scrollbar-hide">
 					<AppMockup activeDemo={activeOption} />
 				</div>
 
-				{/* Bottom gradient fade */}
-				<div className="absolute bottom-0 left-0 right-0 h-24 sm:h-32 bg-gradient-to-t from-background to-transparent pointer-events-none" />
-
-				{/* Left edge gradient fade */}
-				<div className="absolute top-0 bottom-0 left-0 w-12 sm:w-20 bg-gradient-to-r from-background to-transparent pointer-events-none" />
-
-				{/* Right edge gradient fade */}
-				<div className="absolute top-0 bottom-0 right-0 w-12 sm:w-20 bg-gradient-to-l from-background to-transparent pointer-events-none" />
-			</div>
-		</motion.div>
+				{/* Gradient fade overlays - dissolve away as you scroll down */}
+				<motion.div
+					className="pointer-events-none"
+					style={{ opacity: overlayOpacity }}
+				>
+					{/* Bottom gradient fade */}
+					<div className="absolute bottom-0 left-0 right-0 h-24 sm:h-32 bg-gradient-to-t from-background to-transparent" />
+					{/* Left edge gradient fade */}
+					<div className="absolute top-0 bottom-0 left-0 w-12 sm:w-20 bg-gradient-to-r from-background to-transparent" />
+					{/* Right edge gradient fade */}
+					<div className="absolute top-0 bottom-0 right-0 w-12 sm:w-20 bg-gradient-to-l from-background to-transparent" />
+				</motion.div>
+			</motion.div>
+		</div>
 	);
 }

From c0c0b65af8c4996210fbf7df0dc49e5a9de5fca1 Mon Sep 17 00:00:00 2001
From: Kiet Ho <hoakiet98@gmail.com>
Date: Thu, 12 Feb 2026 16:05:27 -0800
Subject: [PATCH 03/10] Mockup

---
 .../components/AppMockup/AppMockup.tsx        |  4 +-
 .../components/ProductDemo/ProductDemo.tsx    | 38 ++++++++++++-------
 2 files changed, 26 insertions(+), 16 deletions(-)

diff --git a/apps/marketing/src/app/components/HeroSection/components/AppMockup/AppMockup.tsx b/apps/marketing/src/app/components/HeroSection/components/AppMockup/AppMockup.tsx
index 015cc372ceb..de62f7a880f 100644
--- a/apps/marketing/src/app/components/HeroSection/components/AppMockup/AppMockup.tsx
+++ b/apps/marketing/src/app/components/HeroSection/components/AppMockup/AppMockup.tsx
@@ -262,7 +262,7 @@ interface AppMockupProps {
 export function AppMockup({ activeDemo = "Use Any Agents" }: AppMockupProps) {
 	return (
 		<div
-			className="relative w-full min-w-[700px] rounded-2xl overflow-hidden bg-black/60 backdrop-blur-xl border border-white/[0.08] shadow-[0_8px_60px_-12px_rgba(0,0,0,0.7)] ring-1 ring-white/[0.04]"
+			className="relative w-full min-w-[700px] rounded-2xl overflow-hidden bg-black/60 backdrop-blur-xl border-2 border-white/[0.12] shadow-[0_8px_60px_-12px_rgba(0,0,0,0.7)] ring-1 ring-white/[0.06]"
 			style={{ aspectRatio: "16/10" }}
 		>
 			{/* Window chrome */}
@@ -350,7 +350,7 @@ export function AppMockup({ activeDemo = "Use Any Agents" }: AppMockupProps) {
 					</div>
 
 					{/* Ports section */}
-					<div className="border-t border-white/[0.06]">
+					<div className="border-t border-white/[0.06] mb-2">
 						<div className="flex items-center justify-between px-2.5 py-2">
 							<div className="flex items-center gap-1 text-xs text-muted-foreground/40">
 								<span>⌥</span>
diff --git a/apps/marketing/src/app/components/HeroSection/components/ProductDemo/ProductDemo.tsx b/apps/marketing/src/app/components/HeroSection/components/ProductDemo/ProductDemo.tsx
index 51ccdbdcd06..cd1ee79508e 100644
--- a/apps/marketing/src/app/components/HeroSection/components/ProductDemo/ProductDemo.tsx
+++ b/apps/marketing/src/app/components/HeroSection/components/ProductDemo/ProductDemo.tsx
@@ -16,26 +16,36 @@ export function ProductDemo({ scrollYProgress }: ProductDemoProps) {
 
 	// Starts full size, shrinks as user scrolls down
 	const scale = useTransform(scrollYProgress, [0, 1], [1, 0.82]);
+	// Pills shift down to follow the shrinking mockup (without scaling)
+	const pillsY = useTransform(scrollYProgress, [0, 1], [0, 80]);
 	// Fade overlays start visible, disappear as user scrolls
 	const overlayOpacity = useTransform(scrollYProgress, [0, 0.6], [1, 0]);
 
 	return (
 		<div className="relative w-full max-w-full">
-			{/* Mockup + pills with scroll-driven scale + fade */}
+			{/* Selector pills - move down but don't scale */}
+			<motion.div
+				className="flex items-center justify-center gap-2 mb-4 sm:mb-6 overflow-x-auto pb-1 scrollbar-hide"
+				style={{ y: pillsY }}
+			>
+				{DEMO_OPTIONS.map((option) => (
+					<SelectorPill
+						key={option.label}
+						label={option.label}
+						active={activeOption === option.label}
+						onSelect={() => setActiveOption(option.label as ActiveDemo)}
+					/>
+				))}
+			</motion.div>
+
+			{/* Mockup with scroll-driven scale */}
 			<motion.div className="relative" style={{ scale }}>
-				{/* Selector pills - centered above mockup */}
-				<div className="flex items-center justify-center gap-2 mb-4 sm:mb-6 overflow-x-auto pb-1 scrollbar-hide">
-					{DEMO_OPTIONS.map((option) => (
-						<SelectorPill
-							key={option.label}
-							label={option.label}
-							active={activeOption === option.label}
-							onSelect={() => setActiveOption(option.label as ActiveDemo)}
-						/>
-					))}
-				</div>
-				<div className="overflow-x-auto scrollbar-hide">
-					<AppMockup activeDemo={activeOption} />
+				<div className="relative">
+					{/* Large diffuse back-shadow */}
+					<div className="absolute inset-[10%] top-[20%] rounded-3xl bg-white/[0.07] blur-[60px] pointer-events-none" />
+					<div className="relative overflow-x-auto scrollbar-hide">
+						<AppMockup activeDemo={activeOption} />
+					</div>
 				</div>
 
 				{/* Gradient fade overlays - dissolve away as you scroll down */}

From 0437b2d215bc98c3989832cfe74225909fb47735 Mon Sep 17 00:00:00 2001
From: Kiet Ho <hoakiet98@gmail.com>
Date: Sun, 15 Feb 2026 16:46:21 -0800
Subject: [PATCH 04/10] UX

---
 .../components/AppMockup/AppMockup.tsx        |  4 +-
 .../components/ProductDemo/ProductDemo.tsx    | 51 ++++++++++++-------
 2 files changed, 34 insertions(+), 21 deletions(-)

diff --git a/apps/marketing/src/app/components/HeroSection/components/AppMockup/AppMockup.tsx b/apps/marketing/src/app/components/HeroSection/components/AppMockup/AppMockup.tsx
index de62f7a880f..5c87cf729c0 100644
--- a/apps/marketing/src/app/components/HeroSection/components/AppMockup/AppMockup.tsx
+++ b/apps/marketing/src/app/components/HeroSection/components/AppMockup/AppMockup.tsx
@@ -262,7 +262,7 @@ interface AppMockupProps {
 export function AppMockup({ activeDemo = "Use Any Agents" }: AppMockupProps) {
 	return (
 		<div
-			className="relative w-full min-w-[700px] rounded-2xl overflow-hidden bg-black/60 backdrop-blur-xl border-2 border-white/[0.12] shadow-[0_8px_60px_-12px_rgba(0,0,0,0.7)] ring-1 ring-white/[0.06]"
+			className="relative w-full min-w-[700px] rounded-2xl overflow-hidden bg-black/60 backdrop-blur-xl border border-white/[0.2] shadow-[0_8px_60px_-12px_rgba(0,0,0,0.7),inset_0_1px_0_0_rgba(255,255,255,0.15),inset_0_0_0_0.5px_rgba(255,255,255,0.1),0_0_0_1px_rgba(255,255,255,0.07)] ring-1 ring-white/[0.1]"
 			style={{ aspectRatio: "16/10" }}
 		>
 			{/* Window chrome */}
@@ -828,7 +828,7 @@ export function AppMockup({ activeDemo = "Use Any Agents" }: AppMockupProps) {
 
 			{/* External IDE Popup - shown when "Open in Any IDE" is active */}
 			<motion.div
-				className="absolute bottom-6 right-6 w-[55%] rounded-xl overflow-hidden bg-black/50 backdrop-blur-xl border border-white/[0.1] shadow-2xl"
+				className="absolute bottom-6 right-6 w-[55%] rounded-xl overflow-hidden bg-black/50 backdrop-blur-xl border border-white/[0.2] shadow-[0_8px_40px_-8px_rgba(0,0,0,0.6),inset_0_1px_0_0_rgba(255,255,255,0.15),inset_0_0_0_0.5px_rgba(255,255,255,0.1),0_0_0_1px_rgba(255,255,255,0.07)] ring-1 ring-white/[0.1]"
 				style={{ aspectRatio: "16/10" }}
 				initial={{ opacity: 0, scale: 0.9, y: 20 }}
 				animate={{
diff --git a/apps/marketing/src/app/components/HeroSection/components/ProductDemo/ProductDemo.tsx b/apps/marketing/src/app/components/HeroSection/components/ProductDemo/ProductDemo.tsx
index cd1ee79508e..53e6ce56977 100644
--- a/apps/marketing/src/app/components/HeroSection/components/ProductDemo/ProductDemo.tsx
+++ b/apps/marketing/src/app/components/HeroSection/components/ProductDemo/ProductDemo.tsx
@@ -2,6 +2,7 @@
 
 import { type MotionValue, motion, useTransform } from "framer-motion";
 import { useState } from "react";
+import { useIsMobile } from "@superset/ui/hooks/use-mobile";
 import { type ActiveDemo, AppMockup } from "../AppMockup";
 import { SelectorPill } from "./components/SelectorPill";
 import { DEMO_OPTIONS } from "./constants";
@@ -13,33 +14,30 @@ interface ProductDemoProps {
 export function ProductDemo({ scrollYProgress }: ProductDemoProps) {
 	const [activeOption, setActiveOption] =
 		useState<ActiveDemo>("Use Any Agents");
+	const isMobile = useIsMobile();
 
-	// Starts full size, shrinks as user scrolls down
-	const scale = useTransform(scrollYProgress, [0, 1], [1, 0.82]);
-	// Pills shift down to follow the shrinking mockup (without scaling)
-	const pillsY = useTransform(scrollYProgress, [0, 1], [0, 80]);
+	// Starts full size, shrinks as user scrolls down (less aggressive on mobile)
+	const scale = useTransform(
+		scrollYProgress,
+		[0, 1],
+		[1, isMobile ? 0.95 : 0.82],
+	);
+	// Pills shift up to follow the shrinking mockup (reduced on mobile)
+	const pillsY = useTransform(
+		scrollYProgress,
+		[0, 1],
+		[0, isMobile ? -15 : -40],
+	);
 	// Fade overlays start visible, disappear as user scrolls
 	const overlayOpacity = useTransform(scrollYProgress, [0, 0.6], [1, 0]);
 
 	return (
 		<div className="relative w-full max-w-full">
-			{/* Selector pills - move down but don't scale */}
+			{/* Mockup with scroll-driven scale */}
 			<motion.div
-				className="flex items-center justify-center gap-2 mb-4 sm:mb-6 overflow-x-auto pb-1 scrollbar-hide"
-				style={{ y: pillsY }}
+				className="relative"
+				style={{ scale, willChange: "transform" }}
 			>
-				{DEMO_OPTIONS.map((option) => (
-					<SelectorPill
-						key={option.label}
-						label={option.label}
-						active={activeOption === option.label}
-						onSelect={() => setActiveOption(option.label as ActiveDemo)}
-					/>
-				))}
-			</motion.div>
-
-			{/* Mockup with scroll-driven scale */}
-			<motion.div className="relative" style={{ scale }}>
 				<div className="relative">
 					{/* Large diffuse back-shadow */}
 					<div className="absolute inset-[10%] top-[20%] rounded-3xl bg-white/[0.07] blur-[60px] pointer-events-none" />
@@ -61,6 +59,21 @@ export function ProductDemo({ scrollYProgress }: ProductDemoProps) {
 					<div className="absolute top-0 bottom-0 right-0 w-12 sm:w-20 bg-gradient-to-l from-background to-transparent" />
 				</motion.div>
 			</motion.div>
+
+			{/* Selector pills - below mockup, shift up as mockup scales */}
+			<motion.div
+				className="flex items-center justify-center gap-2 -mt-2 sm:-mt-4 overflow-x-auto pb-1 scrollbar-hide"
+				style={{ y: pillsY, willChange: "transform" }}
+			>
+				{DEMO_OPTIONS.map((option) => (
+					<SelectorPill
+						key={option.label}
+						label={option.label}
+						active={activeOption === option.label}
+						onSelect={() => setActiveOption(option.label as ActiveDemo)}
+					/>
+				))}
+			</motion.div>
 		</div>
 	);
 }

From ae46a70ae7e82f290cae67de3235a94f4d6cf822 Mon Sep 17 00:00:00 2001
From: Kiet Ho <hoakiet98@gmail.com>
Date: Sun, 15 Feb 2026 16:48:54 -0800
Subject: [PATCH 05/10] Border

---
 .../components/AppMockup/AppMockup.tsx        | 32 +++++++++++++++++--
 1 file changed, 30 insertions(+), 2 deletions(-)

diff --git a/apps/marketing/src/app/components/HeroSection/components/AppMockup/AppMockup.tsx b/apps/marketing/src/app/components/HeroSection/components/AppMockup/AppMockup.tsx
index 5c87cf729c0..a72d99504bc 100644
--- a/apps/marketing/src/app/components/HeroSection/components/AppMockup/AppMockup.tsx
+++ b/apps/marketing/src/app/components/HeroSection/components/AppMockup/AppMockup.tsx
@@ -262,9 +262,23 @@ interface AppMockupProps {
 export function AppMockup({ activeDemo = "Use Any Agents" }: AppMockupProps) {
 	return (
 		<div
-			className="relative w-full min-w-[700px] rounded-2xl overflow-hidden bg-black/60 backdrop-blur-xl border border-white/[0.2] shadow-[0_8px_60px_-12px_rgba(0,0,0,0.7),inset_0_1px_0_0_rgba(255,255,255,0.15),inset_0_0_0_0.5px_rgba(255,255,255,0.1),0_0_0_1px_rgba(255,255,255,0.07)] ring-1 ring-white/[0.1]"
+			className="relative w-full min-w-[700px] rounded-2xl overflow-hidden bg-black/60 backdrop-blur-xl shadow-[0_8px_60px_-12px_rgba(0,0,0,0.7)]"
 			style={{ aspectRatio: "16/10" }}
 		>
+			{/* Diagonal gradient glass border — bright on top-left & bottom-right corners */}
+			<div
+				className="absolute inset-0 rounded-2xl pointer-events-none z-10"
+				style={{
+					background:
+						"linear-gradient(135deg, rgba(255,255,255,0.2) 0%, rgba(255,255,255,0.02) 25%, rgba(255,255,255,0.02) 75%, rgba(255,255,255,0.15) 100%)",
+					mask: "linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0)",
+					WebkitMask:
+						"linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0)",
+					maskComposite: "exclude",
+					WebkitMaskComposite: "xor",
+					padding: "1.5px",
+				}}
+			/>
 			{/* Window chrome */}
 			<div className="flex items-center justify-between px-4 py-2.5 bg-white/[0.03] backdrop-blur-md border-b border-white/[0.06]">
 				<div className="flex items-center gap-1.5">
@@ -828,7 +842,7 @@ export function AppMockup({ activeDemo = "Use Any Agents" }: AppMockupProps) {
 
 			{/* External IDE Popup - shown when "Open in Any IDE" is active */}
 			<motion.div
-				className="absolute bottom-6 right-6 w-[55%] rounded-xl overflow-hidden bg-black/50 backdrop-blur-xl border border-white/[0.2] shadow-[0_8px_40px_-8px_rgba(0,0,0,0.6),inset_0_1px_0_0_rgba(255,255,255,0.15),inset_0_0_0_0.5px_rgba(255,255,255,0.1),0_0_0_1px_rgba(255,255,255,0.07)] ring-1 ring-white/[0.1]"
+				className="absolute bottom-6 right-6 w-[55%] rounded-xl overflow-hidden bg-black/50 backdrop-blur-xl shadow-[0_8px_40px_-8px_rgba(0,0,0,0.6)]"
 				style={{ aspectRatio: "16/10" }}
 				initial={{ opacity: 0, scale: 0.9, y: 20 }}
 				animate={{
@@ -838,6 +852,20 @@ export function AppMockup({ activeDemo = "Use Any Agents" }: AppMockupProps) {
 				}}
 				transition={{ duration: 0.3, ease: "easeOut" }}
 			>
+				{/* Diagonal gradient glass border */}
+				<div
+					className="absolute inset-0 rounded-xl pointer-events-none z-10"
+					style={{
+						background:
+							"linear-gradient(135deg, rgba(255,255,255,0.18) 0%, rgba(255,255,255,0.02) 25%, rgba(255,255,255,0.02) 75%, rgba(255,255,255,0.13) 100%)",
+						mask: "linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0)",
+						WebkitMask:
+							"linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0)",
+						maskComposite: "exclude",
+						WebkitMaskComposite: "xor",
+						padding: "1.5px",
+					}}
+				/>
 				{/* IDE window chrome */}
 				<div className="flex items-center justify-between px-3 py-2 bg-white/[0.04] backdrop-blur-md border-b border-white/[0.06]">
 					<div className="flex items-center gap-1.5">

From 3f9872c0f0d031bb3d084deccfe545dd25173403 Mon Sep 17 00:00:00 2001
From: Kiet Ho <hoakiet98@gmail.com>
Date: Sun, 15 Feb 2026 16:50:31 -0800
Subject: [PATCH 06/10] UI

---
 .../HeroSection/components/AppMockup/AppMockup.tsx          | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/apps/marketing/src/app/components/HeroSection/components/AppMockup/AppMockup.tsx b/apps/marketing/src/app/components/HeroSection/components/AppMockup/AppMockup.tsx
index a72d99504bc..6f36f0329d0 100644
--- a/apps/marketing/src/app/components/HeroSection/components/AppMockup/AppMockup.tsx
+++ b/apps/marketing/src/app/components/HeroSection/components/AppMockup/AppMockup.tsx
@@ -47,14 +47,14 @@ function StatusIndicator({
 	}[status];
 
 	return (
-		<span className="relative flex size-2.5 shrink-0">
+		<span className="relative flex size-1.5 shrink-0">
 			{config.pulse && (
 				<span
 					className={`absolute inline-flex h-full w-full animate-ping rounded-full opacity-75 ${config.ping}`}
 				/>
 			)}
 			<span
-				className={`relative inline-flex size-2.5 rounded-full ${config.dot}`}
+				className={`relative inline-flex size-1.5 rounded-full ${config.dot}`}
 			/>
 		</span>
 	);
@@ -232,7 +232,7 @@ function FileChangeItem({
 			style={{ paddingLeft: `${12 + (indent || 0) * 16}px` }}
 		>
 			<div className="flex items-center gap-2 min-w-0">
-				<Icon className={`size-4 shrink-0 ${iconColor}`} />
+				<Icon className={`size-3.5 shrink-0 ${iconColor}`} />
 				<span
 					className={`truncate ${isFolder ? "text-muted-foreground/60 text-[11px]" : "text-muted-foreground/80 text-xs"}`}
 				>

From fbcb0a7273d5b1196820a2d317f41de048097cf0 Mon Sep 17 00:00:00 2001
From: Kiet Ho <hoakiet98@gmail.com>
Date: Sun, 15 Feb 2026 17:04:27 -0800
Subject: [PATCH 07/10] Lint

---
 .../app/components/HeroSection/HeroSection.tsx | 18 ++++++++++--------
 .../components/ProductDemo/ProductDemo.tsx     |  2 +-
 2 files changed, 11 insertions(+), 9 deletions(-)

diff --git a/apps/marketing/src/app/components/HeroSection/HeroSection.tsx b/apps/marketing/src/app/components/HeroSection/HeroSection.tsx
index 277c4d547fd..88b129093e1 100644
--- a/apps/marketing/src/app/components/HeroSection/HeroSection.tsx
+++ b/apps/marketing/src/app/components/HeroSection/HeroSection.tsx
@@ -29,28 +29,27 @@ export function HeroSection() {
 								style={{ fontFamily: "var(--font-ibm-plex-mono)" }}
 							>
 								<span className="invisible" aria-hidden="true">
-									The Terminal for Coding Agents.
+									The Code Editor for AI Agents.
 								</span>
 								<span className="absolute inset-0">
 									<TypewriterText
 										segments={[
-											{ text: "The Terminal for " },
+											{ text: "The Code Editor for " },
 											{
-												text: "Coding Agents",
+												text: "AI Agents.",
 												style: {
 													fontFamily: "var(--font-geist-pixel-grid)",
 												},
 											},
-											{ text: "." },
 										]}
 										speed={40}
 										delay={600}
 									/>
 								</span>
 							</h1>
-							<p className="text-base sm:text-xl font-light text-muted-foreground max-w-xl mx-auto">
-								Orchestrate a team of Claude Code, Codex, or any other coding
-								agents
+							<p className="text-base sm:text-xl font-light text-muted-foreground max-w-4xl mx-auto">
+								Superset helps you orchestrate swarms of coding agents in
+								parallel. Built for the AI era.
 							</p>
 						</div>
 
@@ -68,7 +67,10 @@ export function HeroSection() {
 						</div>
 					</div>
 
-					<div ref={demoRef} className="relative w-full mt-12 sm:mt-16 lg:mt-20">
+					<div
+						ref={demoRef}
+						className="relative w-full mt-12 sm:mt-16 lg:mt-20"
+					>
 						<ProductDemo scrollYProgress={scrollYProgress} />
 					</div>
 				</div>
diff --git a/apps/marketing/src/app/components/HeroSection/components/ProductDemo/ProductDemo.tsx b/apps/marketing/src/app/components/HeroSection/components/ProductDemo/ProductDemo.tsx
index 53e6ce56977..815e3e09b35 100644
--- a/apps/marketing/src/app/components/HeroSection/components/ProductDemo/ProductDemo.tsx
+++ b/apps/marketing/src/app/components/HeroSection/components/ProductDemo/ProductDemo.tsx
@@ -1,8 +1,8 @@
 "use client";
 
+import { useIsMobile } from "@superset/ui/hooks/use-mobile";
 import { type MotionValue, motion, useTransform } from "framer-motion";
 import { useState } from "react";
-import { useIsMobile } from "@superset/ui/hooks/use-mobile";
 import { type ActiveDemo, AppMockup } from "../AppMockup";
 import { SelectorPill } from "./components/SelectorPill";
 import { DEMO_OPTIONS } from "./constants";

From 74fe593fac5e08da9b2f46e0794e4f2ee022e88d Mon Sep 17 00:00:00 2001
From: Kiet Ho <hoakiet98@gmail.com>
Date: Sun, 15 Feb 2026 17:05:14 -0800
Subject: [PATCH 08/10] upgrade

---
 biome.jsonc | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/biome.jsonc b/biome.jsonc
index 1fb954d15c3..0f49d9ccf3c 100644
--- a/biome.jsonc
+++ b/biome.jsonc
@@ -1,5 +1,5 @@
 {
-	"$schema": "https://biomejs.dev/schemas/2.3.15/schema.json",
+	"$schema": "https://biomejs.dev/schemas/2.3.8/schema.json",
 	"vcs": {
 		"enabled": true,
 		"clientKind": "git",

From 12590744da910555b12f6dfc0d1c7b4aecc2bad2 Mon Sep 17 00:00:00 2001
From: Kiet Ho <hoakiet98@gmail.com>
Date: Sun, 15 Feb 2026 17:22:44 -0800
Subject: [PATCH 09/10] Clean up

---
 .../components/HeroSection/HeroSection.tsx    |  4 ++--
 .../components/ProductDemo/ProductDemo.tsx    | 22 +++----------------
 .../TrustedBySection/TrustedBySection.tsx     |  8 +++----
 3 files changed, 9 insertions(+), 25 deletions(-)

diff --git a/apps/marketing/src/app/components/HeroSection/HeroSection.tsx b/apps/marketing/src/app/components/HeroSection/HeroSection.tsx
index 88b129093e1..fe0eac0cf2d 100644
--- a/apps/marketing/src/app/components/HeroSection/HeroSection.tsx
+++ b/apps/marketing/src/app/components/HeroSection/HeroSection.tsx
@@ -48,8 +48,8 @@ export function HeroSection() {
 								</span>
 							</h1>
 							<p className="text-base sm:text-xl font-light text-muted-foreground max-w-4xl mx-auto">
-								Superset helps you orchestrate swarms of coding agents in
-								parallel. Built for the AI era.
+								Orchestrate swarms of Claude Code, Codex, etc. in
+								parallel. Works for any agents. Built for the AI era.
 							</p>
 						</div>
 
diff --git a/apps/marketing/src/app/components/HeroSection/components/ProductDemo/ProductDemo.tsx b/apps/marketing/src/app/components/HeroSection/components/ProductDemo/ProductDemo.tsx
index 815e3e09b35..a88ed50236c 100644
--- a/apps/marketing/src/app/components/HeroSection/components/ProductDemo/ProductDemo.tsx
+++ b/apps/marketing/src/app/components/HeroSection/components/ProductDemo/ProductDemo.tsx
@@ -22,15 +22,12 @@ export function ProductDemo({ scrollYProgress }: ProductDemoProps) {
 		[0, 1],
 		[1, isMobile ? 0.95 : 0.82],
 	);
-	// Pills shift up to follow the shrinking mockup (reduced on mobile)
+	// Pills shift up to follow the shrinking mockup (minimal on mobile since scale is subtle)
 	const pillsY = useTransform(
 		scrollYProgress,
 		[0, 1],
-		[0, isMobile ? -15 : -40],
+		[0, isMobile ? -6 : -40],
 	);
-	// Fade overlays start visible, disappear as user scrolls
-	const overlayOpacity = useTransform(scrollYProgress, [0, 0.6], [1, 0]);
-
 	return (
 		<div className="relative w-full max-w-full">
 			{/* Mockup with scroll-driven scale */}
@@ -45,24 +42,11 @@ export function ProductDemo({ scrollYProgress }: ProductDemoProps) {
 						<AppMockup activeDemo={activeOption} />
 					</div>
 				</div>
-
-				{/* Gradient fade overlays - dissolve away as you scroll down */}
-				<motion.div
-					className="pointer-events-none"
-					style={{ opacity: overlayOpacity }}
-				>
-					{/* Bottom gradient fade */}
-					<div className="absolute bottom-0 left-0 right-0 h-24 sm:h-32 bg-gradient-to-t from-background to-transparent" />
-					{/* Left edge gradient fade */}
-					<div className="absolute top-0 bottom-0 left-0 w-12 sm:w-20 bg-gradient-to-r from-background to-transparent" />
-					{/* Right edge gradient fade */}
-					<div className="absolute top-0 bottom-0 right-0 w-12 sm:w-20 bg-gradient-to-l from-background to-transparent" />
-				</motion.div>
 			</motion.div>
 
 			{/* Selector pills - below mockup, shift up as mockup scales */}
 			<motion.div
-				className="flex items-center justify-center gap-2 -mt-2 sm:-mt-4 overflow-x-auto pb-1 scrollbar-hide"
+				className="flex items-center gap-2 -mt-2 sm:-mt-4 px-4 sm:px-0 sm:justify-center overflow-x-auto pb-1 scrollbar-hide"
 				style={{ y: pillsY, willChange: "transform" }}
 			>
 				{DEMO_OPTIONS.map((option) => (
diff --git a/apps/marketing/src/app/components/TrustedBySection/TrustedBySection.tsx b/apps/marketing/src/app/components/TrustedBySection/TrustedBySection.tsx
index 7bdf4fc3a76..81180a3c924 100644
--- a/apps/marketing/src/app/components/TrustedBySection/TrustedBySection.tsx
+++ b/apps/marketing/src/app/components/TrustedBySection/TrustedBySection.tsx
@@ -37,7 +37,7 @@ export function TrustedBySection() {
 		<section className="py-6 sm:py-12 md:py-18 bg-background overflow-hidden">
 			<div className="max-w-7xl mx-auto">
 				<div>
-					<h2 className="text-lg sm:text-xl font-mono font-normal text-center mb-4 sm:mb-8 text-foreground px-4">
+					<h2 className="hidden sm:block text-lg sm:text-xl font-mono font-normal text-center mb-4 sm:mb-8 text-foreground px-4">
 						Trusted by builders from
 					</h2>
 				</div>
@@ -49,7 +49,7 @@ export function TrustedBySection() {
 						{CLIENT_LOGOS.map((client) => (
 							<div
 								key={client.name}
-								className="flex items-center justify-center opacity-60 hover:opacity-100 transition-opacity cursor-pointer whitespace-nowrap h-14 gap-2 mx-10"
+								className="flex items-center justify-center opacity-60 hover:opacity-100 transition-opacity cursor-pointer whitespace-nowrap h-10 sm:h-14 gap-1.5 sm:gap-2 mx-5 sm:mx-10"
 								style={{ willChange: "transform" }}
 							>
 								<Image
@@ -57,7 +57,7 @@ export function TrustedBySection() {
 									alt={client.name}
 									width={160}
 									height={client.height}
-									className="object-contain"
+									className="object-contain scale-75 sm:scale-100"
 									style={{
 										height: client.height,
 										width: "auto",
@@ -67,7 +67,7 @@ export function TrustedBySection() {
 									unoptimized
 								/>
 								{client.text && (
-									<span className="ml-2 mt-1 font-medium text-foreground text-[1.3rem]">
+									<span className="ml-2 mt-1 font-medium text-foreground text-[1rem] sm:text-[1.3rem]">
 										{client.text}
 									</span>
 								)}

From da04af983b92ac52ab423bca067a58f140f04081 Mon Sep 17 00:00:00 2001
From: Kiet Ho <hoakiet98@gmail.com>
Date: Sun, 15 Feb 2026 17:23:47 -0800
Subject: [PATCH 10/10] no biome

---
 apps/marketing/src/app/components/HeroSection/HeroSection.tsx | 4 ++--
 biome.jsonc                                                   | 2 +-
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/apps/marketing/src/app/components/HeroSection/HeroSection.tsx b/apps/marketing/src/app/components/HeroSection/HeroSection.tsx
index fe0eac0cf2d..01976e7fe12 100644
--- a/apps/marketing/src/app/components/HeroSection/HeroSection.tsx
+++ b/apps/marketing/src/app/components/HeroSection/HeroSection.tsx
@@ -48,8 +48,8 @@ export function HeroSection() {
 								</span>
 							</h1>
 							<p className="text-base sm:text-xl font-light text-muted-foreground max-w-4xl mx-auto">
-								Orchestrate swarms of Claude Code, Codex, etc. in
-								parallel. Works for any agents. Built for the AI era.
+								Orchestrate swarms of Claude Code, Codex, etc. in parallel.
+								Works for any agents. Built for the AI era.
 							</p>
 						</div>
 
diff --git a/biome.jsonc b/biome.jsonc
index 0f49d9ccf3c..1fb954d15c3 100644
--- a/biome.jsonc
+++ b/biome.jsonc
@@ -1,5 +1,5 @@
 {
-	"$schema": "https://biomejs.dev/schemas/2.3.8/schema.json",
+	"$schema": "https://biomejs.dev/schemas/2.3.15/schema.json",
 	"vcs": {
 		"enabled": true,
 		"clientKind": "git",