Skip to content

Size the landing page to the studio composer (staging) #318

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
bashybaranaba merged 1 commit into from
Aug 23, 2026
Merged

Size the landing page to the studio composer (staging) #318

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 3 additions & 3 deletions apps/commons-app/app/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -74,21 +74,21 @@ export default function Home() {
</header>

<div className="flex min-h-0 flex-1 flex-col items-center justify-center overflow-hidden px-5 py-4 sm:px-8 sm:py-6">
<h1 className="shrink-0 text-center text-[1.7rem] font-medium leading-[1.1] tracking-[-0.04em] text-stone-950 sm:text-[2rem]">
<h1 className="shrink-0 text-center text-[1.5rem] font-medium leading-[1.1] tracking-[-0.04em] text-stone-950 sm:text-[1.8rem]">
One home for all your{" "}
<span className="inline-block rounded-md border border-teal-300/70 bg-teal-200 px-[0.18em] leading-[1.15] text-stone-950">
agents
</span>
.
</h1>

<div className="mt-5 w-full max-w-[52rem] shrink-0 sm:mt-6">
<div className="mt-5 w-full max-w-[46rem] shrink-0 sm:mt-6">
<FeatureCarousel />
</div>

{/* The composer closes the page: the last thing a visitor sees is
the box they would type into once they are inside. */}
<div className="mt-6 w-full max-w-[52rem] shrink-0 sm:mt-7">
<div className="mt-6 w-full max-w-[46rem] shrink-0 sm:mt-7">
<HeroComposer />
</div>
</div>
Expand Down
4 changes: 2 additions & 2 deletions apps/commons-app/components/landing/developer-visual.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,7 @@ export function DeveloperVisual() {
</p>
<p className="mt-4 text-zinc-200">
<span className="text-emerald-400">❯</span> agc agents create --name
Scout --model gpt-5.4
Scout --model gpt-5.5
</p>
<div className="mt-2 border-l border-zinc-700 pl-4">
<p className="flex items-center gap-2 font-sans text-emerald-400">
Expand All @@ -30,7 +30,7 @@ export function DeveloperVisual() {
<span className="text-zinc-600">Name</span>
<span className="text-zinc-300">Scout</span>
<span className="text-zinc-600">Model</span>
<span className="text-zinc-300">gpt-5.4</span>
<span className="text-zinc-300">gpt-5.5</span>
</p>
</div>
<p className="mt-4 text-zinc-200">
Expand Down
14 changes: 7 additions & 7 deletions apps/commons-app/components/landing/feature-carousel.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -214,7 +214,7 @@ function StartButton() {
return (
<Button variant="outline" size="sm" asChild className="w-fit">
<Link href={START_URL}>
Get started free
Get started
<ArrowRight />
</Link>
</Button>
Expand Down Expand Up @@ -272,13 +272,13 @@ export function FeatureCarousel() {
if (event.key === "ArrowLeft") go(index - 1);
}}
>
<div className="relative h-[220px] w-full overflow-hidden rounded-2xl border border-stone-200 bg-white shadow-card sm:h-[300px]">
<div className="relative h-[210px] w-full overflow-hidden rounded-2xl border border-stone-200 bg-white shadow-card sm:h-[276px]">
{SLIDES.map((slide, i) => (
<div
key={slide.id}
aria-hidden={i !== index}
className={cn(
"absolute inset-0 grid grid-cols-1 transition-opacity duration-700 ease-out sm:grid-cols-[minmax(0,1.22fr)_minmax(0,0.78fr)]",
"absolute inset-0 grid grid-cols-1 transition-opacity duration-700 ease-out sm:grid-cols-[minmax(0,1.2fr)_minmax(0,0.8fr)]",
i === index ? "opacity-100" : "pointer-events-none opacity-0",
)}
>
Expand All @@ -293,17 +293,17 @@ export function FeatureCarousel() {
</ScaledStage>
)}
</div>
<div className="hidden min-w-0 flex-col justify-center px-6 sm:flex">
<div className="hidden min-w-0 flex-col justify-center px-5 sm:flex">
{/* Fixed height, so the button lands on the same line no matter
how long the headline and description run. */}
<div className="h-[136px]">
<div className="h-[148px]">
<p className="text-[10px] font-medium uppercase tracking-[0.16em] text-stone-400">
{slide.eyebrow}
</p>
<h2 className="mt-2 text-[1.15rem] font-medium leading-[1.2] tracking-[-0.025em] text-stone-950">
<h2 className="mt-2 text-[1.05rem] font-medium leading-[1.25] tracking-[-0.025em] text-stone-950">
{slide.title}
</h2>
<p className="mt-2 text-[13px] leading-5 text-stone-500">
<p className="mt-1.5 text-[12.5px] leading-[1.45] text-stone-500">
{slide.body}
</p>
</div>
Expand Down
23 changes: 13 additions & 10 deletions apps/commons-app/components/landing/hero-composer.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,6 +17,9 @@ const PROMPTS = [
* The hero's centerpiece: a replica of the in-app composer that types out
* example prompts on a loop. Any interaction routes to sign-in and drops the
* visitor straight into the studio.
*
* Sizing and chrome track ChatInputBox exactly, so the box a visitor sees here
* is the box they get once they are inside.
*/
export function HeroComposer() {
const router = useRouter();
Expand Down Expand Up @@ -65,26 +68,26 @@ export function HeroComposer() {
type="button"
onClick={start}
aria-label="Start a session on Agent Commons"
className="group block w-full cursor-text rounded-[1.35rem] border border-stone-300 bg-white text-left shadow-composer transition-all hover:-translate-y-0.5 hover:border-stone-400 hover:shadow-floating"
className="group relative block w-full cursor-text rounded-2xl border border-stone-300 bg-white text-left shadow-composer transition-colors hover:border-stone-400"
>
<div className="min-h-[5rem] px-5 pt-4 text-[15px] leading-6 text-stone-400 sm:text-base">
<div className="h-16 p-3 text-sm text-muted-foreground/60">
{text}
<span className="ml-px inline-block h-[1.15em] w-[2px] translate-y-[3px] animate-caret-blink rounded-full bg-stone-400" />
<span className="ml-px inline-block h-[1.1em] w-[2px] translate-y-[3px] animate-caret-blink rounded-full bg-stone-400" />
</div>
<div className="flex items-center justify-between px-4 pb-4 pt-1">
<div className="flex items-center gap-1.5">
<span className="flex h-8 w-8 items-center justify-center rounded-full border border-stone-200 text-stone-500">
<div className="flex items-center justify-between px-2 pb-2">
<div className="flex items-center gap-1">
<span className="rounded-lg p-1.5 text-muted-foreground">
<Plus className="h-4 w-4" />
</span>
<span className="flex h-8 w-8 items-center justify-center rounded-full text-stone-500">
<span className="rounded-lg p-1.5 text-muted-foreground">
<Monitor className="h-4 w-4" />
</span>
<span className="flex h-8 items-center gap-1.5 rounded-full px-2 text-xs text-stone-500">
<Sparkles className="h-3.5 w-3.5" />
<span className="flex items-center gap-1.5 rounded-lg p-1.5 text-xs text-muted-foreground">
<Sparkles className="h-4 w-4" />
Auto
</span>
</div>
<span className="flex h-8 w-8 items-center justify-center rounded-full bg-stone-900 text-white transition-transform group-hover:scale-105">
<span className="rounded-lg bg-foreground p-1.5 text-background transition-opacity group-hover:opacity-80">
<ArrowUp className="h-4 w-4" />
</span>
</div>
Expand Down
19 changes: 9 additions & 10 deletions apps/commons-app/components/landing/models-visual.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,15 +2,14 @@ import { Check } from "lucide-react";
import { BrandLogo } from "@/components/landing/brand-logo";

/**
* The model picker exactly as an agent's settings present it, the clearest
* way to say "swap the model, keep the agent". Model ids are the platform's
* own provider defaults.
* The model picker exactly as an agent's settings present it, the clearest way
* to say "swap the model, keep the agent". One current flagship per provider.
*/
const MODELS = [
{ logo: "openai-icon", id: "gpt-5.4-mini", provider: "OpenAI" },
{ logo: "claude-icon", id: "claude-sonnet-4-6", provider: "Anthropic" },
{ logo: "google-gemini", id: "gemini-2.0-flash", provider: "Google" },
{ logo: "mistral-ai-icon", id: "mistral-large-latest", provider: "Mistral" },
{ logo: "openai-icon", name: "GPT-5.5", provider: "OpenAI" },
{ logo: "claude-icon", name: "Claude Opus 5", provider: "Anthropic" },
{ logo: "google-gemini", name: "Gemini 3 Pro", provider: "Google" },
{ logo: "mistral-ai-icon", name: "Mistral Large", provider: "Mistral" },
];
const SELECTED = 1;

Expand All @@ -23,7 +22,7 @@ export function ModelsVisual() {
<div className="divide-y divide-stone-100">
{MODELS.map((model, i) => (
<div
key={model.id}
key={model.name}
className={`flex items-center gap-2.5 px-4 py-2.5 ${
i === SELECTED ? "bg-stone-50" : ""
}`}
Expand All @@ -32,8 +31,8 @@ export function ModelsVisual() {
<BrandLogo name={model.logo} size={16} maxWidth={28} />
</span>
<span className="min-w-0 flex-1">
<span className="block truncate font-mono text-[11px] leading-4 text-stone-800">
{model.id}
<span className="block truncate text-[12px] font-medium leading-4 text-stone-800">
{model.name}
</span>
<span className="block text-[10px] leading-4 text-stone-400">
{model.provider}
Expand Down
Loading