shade testing
This commit is contained in:
codebanditssss
parent
e6a795fd82
commit
89dacdde49
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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"
|
||||
|
|
|
|||
|
|
@ -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">
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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">
|
||||
|
|
|
|||
|
|
@ -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">
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue