From 89dacdde49a69727c3a3951cc991dbeeb39de88f Mon Sep 17 00:00:00 2001
From: codebanditssss <diwankhushi428@gmail.com>
Date: Thu, 2 Jul 2026 22:38:17 +0530
Subject: [PATCH] shade testing

---
 .../landing/components/LandingAgentsBar.tsx   |  6 +-
 .../landing/components/LandingFeatures.tsx    | 24 +++----
 .../src/landing/components/LandingFooter.tsx  |  2 +-
 .../src/landing/components/LandingHero.tsx    | 24 ++++---
 .../landing/components/LandingHowItWorks.tsx  |  2 +-
 .../landing/components/LandingLiveDemo.tsx    |  2 +-
 frontend/src/landing/styles/globals.css       | 71 +++++++++++++------
 7 files changed, 80 insertions(+), 51 deletions(-)

diff --git a/frontend/src/landing/components/LandingAgentsBar.tsx b/frontend/src/landing/components/LandingAgentsBar.tsx
index 32b45f8f5..91648ecce 100644
--- a/frontend/src/landing/components/LandingAgentsBar.tsx
+++ b/frontend/src/landing/components/LandingAgentsBar.tsx
@@ -31,7 +31,7 @@ export function LandingAgentsBar() {
 		<section
 			id="agents"
 			data-testid="agents-marquee"
-			className="landing-reveal relative overflow-hidden border-y border-[color:var(--border)] bg-[color:var(--bg-deep)]"
+			className="landing-reveal relative overflow-hidden border-y border-[color:var(--border)] bg-[color:var(--bg)]"
 		>
 			<div className="container-page pt-12 pb-10">
 				<div className="mx-auto flex max-w-[1120px] flex-wrap items-baseline justify-between gap-8">
@@ -49,8 +49,8 @@ export function LandingAgentsBar() {
 
 			<div className="container-page pb-12">
 				<div className="relative mx-auto max-w-3xl overflow-hidden">
-					<div className="pointer-events-none absolute inset-y-0 left-0 z-10 w-20 bg-gradient-to-r from-[color:var(--bg-deep)] to-transparent" />
-					<div className="pointer-events-none absolute inset-y-0 right-0 z-10 w-20 bg-gradient-to-l from-[color:var(--bg-deep)] to-transparent" />
+					<div className="pointer-events-none absolute inset-y-0 left-0 z-10 w-20 bg-gradient-to-r from-[color:var(--bg)] to-transparent" />
+					<div className="pointer-events-none absolute inset-y-0 right-0 z-10 w-20 bg-gradient-to-l from-[color:var(--bg)] to-transparent" />
 					<div className="agents-marquee-track flex w-max items-end gap-4">
 						{marqueeAgents.map((agent, index) => (
 							<div
diff --git a/frontend/src/landing/components/LandingFeatures.tsx b/frontend/src/landing/components/LandingFeatures.tsx
index 790e294d2..5cc3276dc 100644
--- a/frontend/src/landing/components/LandingFeatures.tsx
+++ b/frontend/src/landing/components/LandingFeatures.tsx
@@ -179,10 +179,10 @@ const daemonChecks = [
 ];
 
 const FEATURE_META = [
-	{ eyebrow: "Feature 01", title: "Bring your own agent.", accent: "AO gives it a workflow." },
-	{ eyebrow: "Feature 02", title: "Every task gets its own checkout.", accent: "Your main repo stays clean." },
-	{ eyebrow: "Feature 03", title: "Reviews route back to the owner.", accent: "Not to a random terminal." },
-	{ eyebrow: "Feature 04", title: "Desktop and CLI share one brain.", accent: "A local daemon owns the loop." },
+	{ eyebrow: "Agent harness", title: "Bring your own agent.", accent: "AO gives it a workflow." },
+	{ eyebrow: "Worktrees", title: "Every task gets its own checkout.", accent: "Your main repo stays clean." },
+	{ eyebrow: "Review routing", title: "Reviews route back to the owner.", accent: "Not to a random terminal." },
+	{ eyebrow: "Local daemon", title: "Desktop and CLI share one brain.", accent: "A local daemon owns the loop." },
 ];
 
 export function LandingFeatures() {
@@ -253,7 +253,7 @@ export function LandingFeatures() {
 
 	// Fluid swap between features: outgoing fades out while the incoming text
 	// rises line-by-line and the mockup settles in with a soft scale. Runs on
-	// active change; the first run just reveals feature 1 without animating.
+	// active change; the first run just reveals the initial panel without animating.
 	useEffect(() => {
 		const root = pinRef.current;
 		if (!root) return;
@@ -415,7 +415,7 @@ function MobileMockup({ children }: { children: ReactNode }) {
 function FeatureNarrative({ worker, orchestrator }: { worker: AgentHarness; orchestrator: AgentHarness }) {
 	return (
 		<FeatureCopy
-			eyebrow="Feature 01"
+			eyebrow="Agent harness"
 			title="Bring your own agent."
 			accent="AO gives it a workflow."
 			meta="23 harnesses"
@@ -652,7 +652,7 @@ function WorkspaceIsolationDemo({
 	return (
 		<article className="surface relative max-h-[500px] overflow-hidden p-0">
 			<div className="grid h-full min-h-[500px] grid-cols-[220px_1fr]">
-				<aside className="flex min-h-0 flex-col border-r border-[color:var(--border)] bg-[#050506]">
+				<aside className="flex min-h-0 flex-col border-r border-[color:var(--border)] bg-[color:var(--bg-card)]">
 					<div className="landing-card-header flex items-center justify-between px-4 py-4">
 						<div className="flex min-w-0 items-center gap-2.5">
 							<img src="/ao-logo-transparent.png" alt="" className="h-6 w-6 object-contain" />
@@ -787,7 +787,7 @@ function WorkspaceIsolationDemo({
 function WorkspaceNarrative({ workspace }: { workspace: (typeof workspaceSessions)[number] }) {
 	return (
 		<FeatureCopy
-			eyebrow="Feature 02"
+			eyebrow="Worktrees"
 			title="Every task gets its own checkout."
 			accent="Your main repo stays clean."
 			meta={workspace.id}
@@ -812,7 +812,7 @@ function InspectorFact({ label, value }: { label: string; value: string }) {
 function FeedbackNarrative({ feedback }: { feedback: (typeof feedbackSessions)[number] }) {
 	return (
 		<FeatureCopy
-			eyebrow="Feature 03"
+			eyebrow="Review routing"
 			title="Reviews route back to the owner."
 			accent="Not to a random terminal."
 			meta={feedback.number}
@@ -851,7 +851,7 @@ function FeedbackRoutingDemo({
 			</div>
 
 			<div className="grid min-h-[424px] grid-cols-[280px_1fr]">
-				<aside className="border-r border-[color:var(--border)] bg-[#050506] p-4">
+				<aside className="border-r border-[color:var(--border)] bg-[color:var(--bg-card)] p-4">
 					<div className="mb-3 font-mono text-[10px] uppercase tracking-[0.22em] text-[color:var(--fg-dim)]">
 						Open PRs
 					</div>
@@ -985,7 +985,7 @@ function DaemonControlDemo() {
 					</div>
 				</div>
 
-				<aside className="bg-[#050506] p-4">
+				<aside className="bg-[color:var(--bg-card)] p-4">
 					<div className="mb-4 flex items-center gap-3">
 						<img src="/ao-logo-transparent.png" alt="" className="h-8 w-8 object-contain" />
 						<div>
@@ -1021,7 +1021,7 @@ function DaemonControlDemo() {
 function DaemonNarrative() {
 	return (
 		<FeatureCopy
-			eyebrow="Feature 04"
+			eyebrow="Local daemon"
 			title="Desktop and CLI share one brain."
 			accent="A local daemon owns the loop."
 			meta="127.0.0.1"
diff --git a/frontend/src/landing/components/LandingFooter.tsx b/frontend/src/landing/components/LandingFooter.tsx
index 719c03269..605817500 100644
--- a/frontend/src/landing/components/LandingFooter.tsx
+++ b/frontend/src/landing/components/LandingFooter.tsx
@@ -40,7 +40,7 @@ function GithubIcon({ className = "" }: { className?: string }) {
 
 export function LandingFooter() {
 	return (
-		<footer data-testid="footer" className="landing-reveal border-t border-[color:var(--border)] bg-black">
+		<footer data-testid="footer" className="landing-reveal border-t border-[color:var(--border)] bg-[color:var(--bg)]">
 			<div className="container-page py-24">
 				<div className="grid gap-10 lg:grid-cols-[0.95fr_1.05fr]">
 					<div className="max-w-md">
diff --git a/frontend/src/landing/components/LandingHero.tsx b/frontend/src/landing/components/LandingHero.tsx
index d061b8b91..22bd8a119 100644
--- a/frontend/src/landing/components/LandingHero.tsx
+++ b/frontend/src/landing/components/LandingHero.tsx
@@ -276,8 +276,9 @@ function HeroDashboardMockup() {
 	}
 
 	return (
-		<div className="relative mx-auto mt-6 w-full max-w-[1600px]" data-testid="hero-dashboard-interactive">
-			<div className="relative overflow-hidden rounded-[6px] border border-[rgba(255,255,255,0.08)] bg-[#0a0b0d] shadow-[0_34px_120px_-76px_rgba(0,0,0,1)]">
+		<div className="hero-laptop relative mx-auto mt-6 w-full max-w-[1600px]" data-testid="hero-dashboard-interactive">
+			<div className="hero-laptop-screen">
+				<div className="hero-laptop-display">
 				<div
 					className="grid min-h-[640px] text-left text-[#f4f5f7] transition-[grid-template-columns] duration-200"
 					style={{
@@ -286,7 +287,7 @@ function HeroDashboardMockup() {
 							'-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Fira Sans", "Helvetica Neue", sans-serif',
 					}}
 				>
-					<aside className="flex min-h-[640px] overflow-hidden flex-col border-r border-[rgba(255,255,255,0.06)] bg-[#08090b]">
+					<aside className="flex min-h-[640px] overflow-hidden flex-col border-r border-[rgba(255,255,255,0.06)] bg-[#11100b]">
 						<div
 							className={`flex shrink-0 items-center gap-2.5 pt-3.5 ${
 								sidebarOpen ? "px-5 pb-[18px]" : "justify-center px-1.5 pb-2"
@@ -346,7 +347,7 @@ function HeroDashboardMockup() {
 												onClick={() => toggleProject(project.id)}
 												className={`relative flex h-9 w-full items-center gap-[9px] rounded-[5px] px-1.5 py-0 pr-[84px] text-left text-[13px] font-medium transition-colors before:absolute before:bottom-2 before:left-0 before:top-2 before:w-px before:rounded-full ${
 													activeProject === project.id
-														? "bg-white/[0.07] text-[#f4f5f7] before:bg-[#4d8dff]"
+														? "bg-white/[0.07] text-[#f4f5f7] before:bg-[#b0bdd8]"
 														: "text-[#9ba1aa] before:bg-transparent hover:bg-white/[0.04] hover:text-[#f4f5f7]"
 												}`}
 											>
@@ -389,7 +390,7 @@ function HeroDashboardMockup() {
 															}}
 															className={`relative flex h-auto w-full items-center gap-[9px] rounded-[4px] py-[5px] pl-2.5 pr-1.5 text-left transition-colors before:absolute before:bottom-1.5 before:left-0 before:top-1.5 before:w-px before:rounded-full ${
 																activeCard === session.title
-																	? "text-[#f4f5f7] before:bg-[#4d8dff]"
+																	? "text-[#f4f5f7] before:bg-[#b0bdd8]"
 																	: "text-[#9ba1aa] before:bg-transparent hover:text-[#f4f5f7]"
 															}`}
 														>
@@ -435,7 +436,7 @@ function HeroDashboardMockup() {
 						</div>
 					</aside>
 
-					<div className="flex min-w-0 flex-col bg-[#0a0b0d]">
+					<div className="flex min-w-0 flex-col bg-[#14120d]">
 						<div className="flex items-center gap-3 px-[18px] pt-[22px]">
 							<div className="flex min-w-0 items-baseline gap-3">
 								<h2 className="text-[21px] font-bold tracking-[-0.025em] text-[#f4f5f7]">Board</h2>
@@ -447,7 +448,7 @@ function HeroDashboardMockup() {
 								<button
 									type="button"
 									onClick={() => setActiveCard("New task drafted")}
-									className="hero-pressable inline-flex h-[34px] items-center gap-1.5 rounded-[7px] border border-[rgba(255,255,255,0.06)] bg-[#1b1d22] px-[15px] text-[13px] font-semibold leading-none text-[#9ba1aa] hover:bg-[#15171b] hover:text-[#f4f5f7]"
+									className="hero-pressable inline-flex h-[34px] items-center gap-1.5 rounded-[7px] border border-[rgba(255,255,255,0.07)] bg-[#211d14] px-[15px] text-[13px] font-semibold leading-none text-[#9ba1aa] hover:bg-[#252116] hover:text-[#f4f5f7]"
 								>
 									<PlusIcon className="h-3.5 w-3.5" />
 									New task
@@ -455,7 +456,7 @@ function HeroDashboardMockup() {
 								<button
 									type="button"
 									onClick={() => setActiveCard("Spawn Orchestrator")}
-									className="hero-pressable inline-flex h-[34px] items-center gap-1.5 rounded-[7px] bg-[#4d8dff] px-[15px] text-[13px] font-semibold leading-none text-white hover:brightness-110"
+									className="hero-pressable inline-flex h-[34px] items-center gap-1.5 rounded-[7px] bg-[#9faccc] px-[15px] text-[13px] font-semibold leading-none text-[#11140c] hover:brightness-110"
 								>
 									<NetworkIcon className="h-3.5 w-3.5" />
 									Spawn Orchestrator
@@ -470,7 +471,7 @@ function HeroDashboardMockup() {
 										key={column.title}
 										className="flex min-w-0 flex-col overflow-hidden rounded-[13px]"
 										style={{
-											background: `linear-gradient(180deg, ${column.glow}, transparent 130px), rgba(255,255,255,0.018)`,
+											background: `linear-gradient(180deg, ${column.glow}, transparent 130px), rgba(255,255,255,0.028)`,
 										}}
 									>
 										<div className="flex shrink-0 items-center gap-[9px] px-[15px] pb-[11px] pt-[14px]">
@@ -501,7 +502,7 @@ function HeroDashboardMockup() {
 														key={card.title}
 														type="button"
 														onClick={() => setActiveCard(card.title)}
-														className={`w-full rounded-[7px] border bg-[#15171b] text-left transition-colors hover:border-[rgba(255,255,255,0.10)] ${
+														className={`w-full rounded-[7px] border bg-[#1a1812] text-left transition-colors hover:border-[rgba(255,255,255,0.10)] ${
 															activeCard === card.title
 																? "border-[rgba(77,141,255,0.48)]"
 																: "border-[rgba(255,255,255,0.06)]"
@@ -545,6 +546,7 @@ function HeroDashboardMockup() {
 						</div>
 					</div>
 				</div>
+				</div>
 			</div>
 		</div>
 	);
@@ -659,7 +661,7 @@ export function LandingHero() {
 						<a
 							href="/docs/installation"
 							className="hero-pressable group inline-flex h-12 w-full items-center justify-center gap-2 rounded-[6px] border border-transparent bg-[color:var(--accent)] px-6 text-[15px] font-semibold shadow-[0_12px_32px_-18px_var(--accent-glow)] hover:brightness-[1.07] hover:shadow-[0_18px_44px_-16px_var(--accent-glow)] sm:w-auto"
-							style={{ color: "#000000" }}
+							style={{ color: "#11140c" }}
 						>
 							<DownloadIcon className="h-4 w-4" />
 							Install Agent Orchestrator
diff --git a/frontend/src/landing/components/LandingHowItWorks.tsx b/frontend/src/landing/components/LandingHowItWorks.tsx
index eec076a80..04c781fa6 100644
--- a/frontend/src/landing/components/LandingHowItWorks.tsx
+++ b/frontend/src/landing/components/LandingHowItWorks.tsx
@@ -50,7 +50,7 @@ export function LandingHowItWorks() {
 		<section
 			id="how"
 			data-testid="how-it-works"
-			className="relative border-t border-[color:var(--border)] bg-[color:var(--bg-deep)] py-24 sm:py-32"
+			className="relative border-t border-[color:var(--border)] bg-[color:var(--bg)] py-24 sm:py-32"
 		>
 			<div className="container-page">
 				<div className="mb-14 grid items-end gap-8 lg:grid-cols-12">
diff --git a/frontend/src/landing/components/LandingLiveDemo.tsx b/frontend/src/landing/components/LandingLiveDemo.tsx
index cd5f6722f..c9a68a214 100644
--- a/frontend/src/landing/components/LandingLiveDemo.tsx
+++ b/frontend/src/landing/components/LandingLiveDemo.tsx
@@ -159,7 +159,7 @@ export function LandingLiveDemo() {
 		<section
 			id="quickstart"
 			data-testid="live-demo-terminal"
-			className="relative border-t border-[color:var(--border)] bg-[color:var(--bg-deep)] py-24 sm:py-32"
+			className="relative border-t border-[color:var(--border)] bg-[color:var(--bg)] py-24 sm:py-32"
 		>
 			<div className="container-page">
 				<div className="mb-14 grid items-end gap-8 lg:grid-cols-12">
diff --git a/frontend/src/landing/styles/globals.css b/frontend/src/landing/styles/globals.css
index 02bf2dd1b..baf1e01bf 100644
--- a/frontend/src/landing/styles/globals.css
+++ b/frontend/src/landing/styles/globals.css
@@ -31,12 +31,12 @@
 
 /* ── Dark mode ────────────────────────────────────────────────── */
 .dark {
-	--color-bg-base: #000000;
-	--color-bg-surface: #050506;
-	--color-bg-elevated: #09090b;
-	--color-bg-subtle: #070708;
-	--color-bg-inset: #020203;
-	--color-bg-sidebar: #030304;
+	--color-bg-base: #14120b;
+	--color-bg-surface: #19160e;
+	--color-bg-elevated: #201c12;
+	--color-bg-subtle: #1b170f;
+	--color-bg-inset: #100e08;
+	--color-bg-sidebar: #17140c;
 
 	--color-text-primary: #f5f5f4;
 	--color-text-secondary: #9b9b98;
@@ -46,8 +46,8 @@
 	--color-border-subtle: rgba(255, 255, 255, 0.06);
 
 	--color-accent: #82aaff;
-	--color-accent-dim: rgba(130, 170, 255, 0.14);
-	--color-accent-border: rgba(130, 170, 255, 0.32);
+	--color-accent-dim: rgba(130, 170, 255, 0.1);
+	--color-accent-border: rgba(130, 170, 255, 0.22);
 	--color-accent-amber: var(--color-accent);
 	--color-accent-amber-dim: var(--color-accent-dim);
 	--color-accent-amber-border: var(--color-accent-border);
@@ -253,31 +253,31 @@ body::-webkit-scrollbar,
 
 .landing-hero-heading {
 	max-width: 1080px;
-	font-size: clamp(52px, 6.2vw, 84px);
+	font-size: clamp(44px, 5.1vw, 66px);
 	font-weight: 650;
-	line-height: 0.96;
+	line-height: 1;
 	letter-spacing: 0;
 	color: var(--fg);
 }
 
 .landing-hero-heading-setup {
-	font-size: 0.74em;
-	font-weight: 440;
-	line-height: 1.08;
+	font-size: 1em;
+	font-weight: 650;
+	line-height: 1;
 	color: color-mix(in oklab, var(--fg) 72%, var(--fg-muted));
 }
 
 .landing-hero-heading-action {
-	margin-top: 0.04em;
+	margin-top: 0;
 	font-size: 1em;
-	font-weight: 760;
-	line-height: 0.96;
+	font-weight: 650;
+	line-height: 1;
 	color: var(--fg);
 }
 
 .landing-hero-heading-accent {
-	color: #93b4f8;
-	font-weight: 780;
+	color: #82aaff;
+	font-weight: 650;
 }
 
 .landing-body {
@@ -325,6 +325,33 @@ body::-webkit-scrollbar,
 	transform: scale(0.985);
 }
 
+.hero-laptop {
+	filter: drop-shadow(0 30px 64px rgba(0, 0, 0, 0.34));
+}
+
+.hero-laptop-screen {
+	position: relative;
+	padding: 1px;
+	border: 1px solid rgba(255, 255, 255, 0.075);
+	border-radius: 12px;
+	background: rgba(255, 255, 255, 0.06);
+	box-shadow:
+		0 0 0 1px rgba(0, 0, 0, 0.22) inset,
+		0 18px 54px rgba(0, 0, 0, 0.22);
+}
+
+.hero-laptop-screen::before {
+	content: none;
+}
+
+.hero-laptop-display {
+	overflow: hidden;
+	border: 0;
+	border-radius: 10px;
+	background: #14120d;
+	box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.035) inset;
+}
+
 @media (prefers-reduced-motion: reduce) {
 	.hero-pressable:active {
 		transform: none;
@@ -495,7 +522,7 @@ body::-webkit-scrollbar,
 }
 
 .surface {
-	background: #050506;
+	background: var(--bg-card);
 	border: 1px solid var(--border);
 	border-radius: 4px;
 	box-shadow: none;
@@ -505,12 +532,12 @@ body::-webkit-scrollbar,
 }
 
 .surface:hover {
-	background: #050506;
+	background: var(--bg-card-hover);
 	border-color: var(--border);
 }
 
 .landing-card-header {
-	background: #08090a;
+	background: var(--bg-elevated);
 	border-bottom: 1px solid var(--border);
 }
 
@@ -532,7 +559,7 @@ body::-webkit-scrollbar,
 }
 
 .surface-elev {
-	background: #050506;
+	background: var(--bg-card);
 	border: 1px solid var(--border);
 	border-radius: 4px;
 }