From 2e79f8d8b8fc2a08b8332d6a1d94f9e94a775681 Mon Sep 17 00:00:00 2001
From: bashybaranaba <bashybaranaba@gmail.com>
Date: Sun, 23 Aug 2026 23:07:12 +0300
Subject: [PATCH] Size the landing page to the studio composer

The composer now matches ChatInputBox exactly: same rounded-2xl chrome, same
stone-300 border, same h-16 input area and compact icon footer. The box a
visitor sees on the way in is the box they get once they are inside.

Both the composer and the carousel take the studio's own max-w-[46rem]
measure, down from 52rem, and the headline, card and copy all step down a
notch with them, so the main view reads a little tighter.

The model picker moves to a current flagship per provider: GPT-5.5, Claude
Opus 5, Gemini 3 Pro, Mistral Large. The CLI slide advertises gpt-5.5 to
match. Note that the backend model registry still lists Claude Opus 4.6 and
Gemini 2.5 Pro as its newest Anthropic and Google entries, so it needs the
same update for the page to match what an agent can actually be set to.

The card's call to action reads "Get started".

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
---
 apps/commons-app/app/page.tsx                 |  6 ++---
 .../components/landing/developer-visual.tsx   |  4 ++--
 .../components/landing/feature-carousel.tsx   | 14 +++++------
 .../components/landing/hero-composer.tsx      | 23 +++++++++++--------
 .../components/landing/models-visual.tsx      | 19 ++++++++-------
 5 files changed, 34 insertions(+), 32 deletions(-)

diff --git a/apps/commons-app/app/page.tsx b/apps/commons-app/app/page.tsx
index 29116869..5b2be14b 100644
--- a/apps/commons-app/app/page.tsx
+++ b/apps/commons-app/app/page.tsx
@@ -74,7 +74,7 @@ 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
@@ -82,13 +82,13 @@ export default function Home() {
               .
             </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>
diff --git a/apps/commons-app/components/landing/developer-visual.tsx b/apps/commons-app/components/landing/developer-visual.tsx
index fe8aee34..edb88386 100644
--- a/apps/commons-app/components/landing/developer-visual.tsx
+++ b/apps/commons-app/components/landing/developer-visual.tsx
@@ -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">
@@ -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">
diff --git a/apps/commons-app/components/landing/feature-carousel.tsx b/apps/commons-app/components/landing/feature-carousel.tsx
index cf77d6ac..a19d7c08 100644
--- a/apps/commons-app/components/landing/feature-carousel.tsx
+++ b/apps/commons-app/components/landing/feature-carousel.tsx
@@ -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>
@@ -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",
             )}
           >
@@ -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>
diff --git a/apps/commons-app/components/landing/hero-composer.tsx b/apps/commons-app/components/landing/hero-composer.tsx
index 663f64e7..93a37b4b 100644
--- a/apps/commons-app/components/landing/hero-composer.tsx
+++ b/apps/commons-app/components/landing/hero-composer.tsx
@@ -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();
@@ -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>
diff --git a/apps/commons-app/components/landing/models-visual.tsx b/apps/commons-app/components/landing/models-visual.tsx
index 82bcc6fa..cdd1f87c 100644
--- a/apps/commons-app/components/landing/models-visual.tsx
+++ b/apps/commons-app/components/landing/models-visual.tsx
@@ -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;
 
@@ -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" : ""
             }`}
@@ -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}