diff --git a/web/app/globals.css b/web/app/globals.css index cac36f74..9fbdbbea 100644 --- a/web/app/globals.css +++ b/web/app/globals.css @@ -153,7 +153,7 @@ a { @media (hover: hover) and (pointer: fine) { .btn-primary:hover { - background: var(--primary-500); + background: var(--primary-700); border-color: var(--primary-800); } } diff --git a/web/app/landing.module.css b/web/app/landing.module.css index 96f3746a..d4726ff3 100644 --- a/web/app/landing.module.css +++ b/web/app/landing.module.css @@ -1935,10 +1935,9 @@ background: var(--agent-tools-band-bg); } -/* The homepage hero's wash is a flat vertical fade: the animated backdrop - carries the hero, so no highlight competes with it. */ +/* A plain navy field keeps the homepage's message in focus. */ .homeLanding::before { - background: linear-gradient(180deg, #10273a 0%, #13314a 52%, #0d2638 100%); + background: #0d2638; } /* Lift the page content above the hero wash. Targeted at the two content diff --git a/web/components/InvestorStrip.tsx b/web/components/InvestorStrip.tsx index a5c9d274..2232a032 100644 --- a/web/components/InvestorStrip.tsx +++ b/web/components/InvestorStrip.tsx @@ -6,7 +6,7 @@ import s from './investor-strip.module.css'; // and already web-ready, so they skip the /_next/image round trip too. const LOGO_IMAGE_PROPS = { loading: 'eager', unoptimized: true } as const; -export function InvestorStrip() { +export function InvestorStrip({ compact = false }: { compact?: boolean } = {}) { const logos = [ Hustle Fund, Active Capital, @@ -26,7 +26,7 @@ export function InvestorStrip() { ]; return ( -
+

Backed by

{logos}
diff --git a/web/components/homepage/HomeHero.tsx b/web/components/homepage/HomeHero.tsx index d43299c1..fa580b73 100644 --- a/web/components/homepage/HomeHero.tsx +++ b/web/components/homepage/HomeHero.tsx @@ -2,22 +2,20 @@ import type { CSSProperties } from 'react'; import { InvestorStrip } from '../InvestorStrip'; import { AgentIcons } from '../AgentSignup'; -import { HOME_HERO_DESCRIPTION, HOME_HERO_TITLE_LINES, HOME_SIGNUP_HREF } from '../../lib/home-copy'; -import { HeroBackdrop } from './HeroBackdrop'; +import { HOME_HERO_SUBTITLE, HOME_HERO_TITLE_LINES, HOME_SIGNUP_HREF } from '../../lib/home-copy'; import s from '../../app/landing.module.css'; +import home from './home-hero.module.css'; /** * The homepage hero: the two-line headline rising in, the description, one - * sign-up button with the agent logos turning in it, and the backers, over a - * faint animated backdrop of agents talking. The button is marked so the nav can show its - * own once this one scrolls away. + * sign-up button and the backers on plain navy. + * The button is marked so the nav can show its own once this one scrolls away. */ export function HomeHero() { return ( -
- -
-
+
+
+

{HOME_HERO_TITLE_LINES.map((line, index) => ( @@ -28,9 +26,9 @@ export function HomeHero() { ))}

-

{HOME_HERO_DESCRIPTION}

+

{HOME_HERO_SUBTITLE}

-
- +
); } diff --git a/web/components/homepage/RotatingHeadline.tsx b/web/components/homepage/RotatingHeadline.tsx index 6e123bc7..d2f9b283 100644 --- a/web/components/homepage/RotatingHeadline.tsx +++ b/web/components/homepage/RotatingHeadline.tsx @@ -6,17 +6,20 @@ import { AGENT_TOOLS, type AgentTool } from '../home/AgentMarks'; import { TypeScriptLogo } from '../home/icons'; import s from './rotating-headline.module.css'; -type Tool = AgentTool | 'custom'; +type Tool = AgentTool | 'custom' | 'dots' | 'pi'; /** The agents we work with, plus one built on our SDK. */ const TOOLS: Record = { ...AGENT_TOOLS, + muse: { name: 'Muse', logo: }, + dots: { name: 'Dots', logo: }, + pi: { name: 'Pi', logo: }, custom: { name: 'your custom agent', logo: }, }; /** - * Each step swaps one side, and every pair keeps Claude Code or Codex on one - * side: the other tools take turns talking to the two agents people know. + * Start with familiar coding agents, then mix in hosted assistants and + * cross-provider conversations as the rotation progresses. */ const PAIRS: [Tool, Tool][] = [ ['claude', 'codex'], @@ -31,12 +34,21 @@ const PAIRS: [Tool, Tool][] = [ ['opencode', 'codex'], ['opencode', 'claude'], ['grok', 'claude'], + ['dots', 'claude'], + ['dots', 'muse'], + ['muse', 'grokbot'], + ['muse', 'claude'], + ['pi', 'claude'], + ['pi', 'codex'], ['grok', 'codex'], ['custom', 'codex'], ['claude', 'codex'], ['claude', 'antigravity'], ['codex', 'antigravity'], ['codex', 'grokbot'], + ['codex', 'pi'], + ['claude', 'pi'], + ['claude', 'dots'], ['claude', 'grokbot'], ['claude', 'muse'], ['codex', 'muse'], diff --git a/web/components/homepage/home-hero.module.css b/web/components/homepage/home-hero.module.css new file mode 100644 index 00000000..d14087f9 --- /dev/null +++ b/web/components/homepage/home-hero.module.css @@ -0,0 +1,52 @@ +.hero.hero { + --investor-strip-padding-top: 6rem; + padding-top: 28px; + padding-bottom: 24px; +} + +.hero .copy { + padding-top: 64px; +} + +.hero .content { + gap: 28px; +} + +.hero .actions { + margin-top: 24px; +} + +.hero .copy h1 { + font-size: clamp(42px, 6.2vw, 92px); + font-weight: 500; +} + +.hero .copy p { + max-width: 44ch; + margin-top: 16px; + text-wrap: balance; +} + +@media (max-width: 600px) { + .hero.hero { + --investor-strip-padding-top: 4.5rem; + padding-top: 16px; + padding-bottom: 16px; + } + + .hero .copy { + padding-top: 48px; + } + + .hero .content { + gap: 24px; + } + + .hero .actions { + margin-top: 20px; + } + + .hero .copy h1 { + font-size: 8.2vw; + } +} diff --git a/web/components/homepage/rotating-headline.module.css b/web/components/homepage/rotating-headline.module.css index 11fabd10..c934634b 100644 --- a/web/components/homepage/rotating-headline.module.css +++ b/web/components/homepage/rotating-headline.module.css @@ -81,6 +81,14 @@ height: 100%; } +.logo img { + object-fit: contain; +} + +.monoLogo { + filter: brightness(0) invert(1); +} + .char { display: inline-block; } diff --git a/web/components/investor-strip.module.css b/web/components/investor-strip.module.css index 83e51f54..02a42542 100644 --- a/web/components/investor-strip.module.css +++ b/web/components/investor-strip.module.css @@ -46,6 +46,18 @@ .investorYonder svg { width: 25px; height: 25px; } .investorYonder strong { font-size: 1rem; font-weight: 720; letter-spacing: 0.015em; } +/* A quieter investor row for the homepage hero. */ +.compact .investorGroup { gap: 1.25rem clamp(1.25rem, 3vw, 2.5rem); } +.compact .investorHustle { width: 112px; } +.compact .investorActive { width: 106px; } +.compact .investorCortical { width: 116px; } +.compact .investorYc, +.compact .investorYonder { gap: 0.375rem; } +.compact .investorYc > span { width: 22px; height: 22px; font-size: 17px; } +.compact .investorYc strong { font-size: 13px; } +.compact .investorYonder svg { width: 19px; height: 19px; } +.compact .investorYonder strong { font-size: 0.75rem; } + @media (max-width: 680px) { .backers { padding-bottom: 3rem; } .investorGroup { gap: 1.5rem 1.25rem; } @@ -63,6 +75,9 @@ .investorCortical { width: 130px; } .investorYc strong { font-size: 15px; } .investorYonder strong { font-size: 0.9rem; } + .compact .investorHustle { width: 100px; } + .compact .investorActive { width: 98px; } + .compact .investorCortical { width: 104px; } } @keyframes investorFade { diff --git a/web/lib/home-copy.ts b/web/lib/home-copy.ts index 405e1bd4..e84bdf58 100644 --- a/web/lib/home-copy.ts +++ b/web/lib/home-copy.ts @@ -7,5 +7,8 @@ export const HOME_HERO_TITLE = HOME_HERO_TITLE_LINES.join(' '); export const HOME_HERO_DESCRIPTION = 'Your agents should talk to each other, just not through you. Connect your agents and your teammates’ agents so they can coordinate directly, without the copy-paste.'; +export const HOME_HERO_SUBTITLE = + 'Connect your coding agents and your teammates’ agents. Let them coordinate directly.'; + /** Google sign-in that lands on the connect-your-agents page. */ export const HOME_SIGNUP_HREF = teamsCloudUrl('/api/auth/google/start?next=%2Fteams%2Fconnect'); diff --git a/web/public/logos/dot.webp b/web/public/logos/dot.webp new file mode 100644 index 00000000..bd9aa8b6 Binary files /dev/null and b/web/public/logos/dot.webp differ diff --git a/web/public/logos/muse-transparent.png b/web/public/logos/muse-transparent.png new file mode 100644 index 00000000..6fa7c1b4 Binary files /dev/null and b/web/public/logos/muse-transparent.png differ diff --git a/web/public/logos/pi.svg b/web/public/logos/pi.svg new file mode 100644 index 00000000..8ce0ec25 --- /dev/null +++ b/web/public/logos/pi.svg @@ -0,0 +1,5 @@ + + + + +