From 53f64a93da2c77fce5e8dfa37c9390a0a6f05958 Mon Sep 17 00:00:00 2001
From: Parikshit Deshmukh <ar.parikshit.d@gmail.com>
Date: Tue, 28 Jul 2026 16:09:28 +0530
Subject: [PATCH] feat(home): widen the stack diagram rails, drop the hero star
 button

Rails go from two lanes to four (two streaming up, two flowing down) and
each lane widens. The second lane of each pair is offset by half a cycle
so neighbours do not march in lockstep and read as one wide lane.

The mobile rail override is gone: it scaled the lanes up from a smaller
base that now matches it, leaving only the taller run.

Also renames the first card to Agent Interface, and drops the GitHub star
CTA from the hero by removing the props on the homepage, which is the only
caller that passes them. That also restores the shadow-room compensation
the stack applies when it has no secondary CTA.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
---
 docs/app/(home)/page.tsx                      |  2 --
 .../StackDiagramSection.module.css            | 22 +++++++++----------
 .../StackDiagramSection.tsx                   |  6 ++++-
 3 files changed, 16 insertions(+), 14 deletions(-)

diff --git a/docs/app/(home)/page.tsx b/docs/app/(home)/page.tsx
index 448f00e12..a0234519c 100644
--- a/docs/app/(home)/page.tsx
+++ b/docs/app/(home)/page.tsx
@@ -25,8 +25,6 @@ export default function HomePage() {
           align="left"
           subtitle="Open Standard for Generative UI"
           showPlaygroundButton={false}
-          githubRepoUrl="https://github.com/thesysdev/openui"
-          githubButtonLabel="Star us on GitHub"
           showTagline={false}
         />
         <LogoStrip />
diff --git a/docs/app/(home)/sections/StackDiagramSection/StackDiagramSection.module.css b/docs/app/(home)/sections/StackDiagramSection/StackDiagramSection.module.css
index f55951d43..c643bc07e 100644
--- a/docs/app/(home)/sections/StackDiagramSection/StackDiagramSection.module.css
+++ b/docs/app/(home)/sections/StackDiagramSection/StackDiagramSection.module.css
@@ -169,7 +169,7 @@
   z-index: 0;
   display: flex;
   align-items: stretch;
-  gap: 0.25rem;
+  gap: 0.3125rem;
   pointer-events: none;
 }
 
@@ -185,7 +185,7 @@
 .rail {
   position: relative;
   flex: 0 0 auto;
-  width: 0.625rem;
+  width: 0.875rem;
   align-self: stretch;
   min-height: 4rem;
   overflow: hidden;
@@ -214,6 +214,13 @@
   animation: railDown 3.2s linear infinite;
 }
 
+/* Offset the second lane of each pair so neighbours do not march in lockstep,
+   which would read as one wide lane rather than two. */
+.rails > :nth-child(2) .railTrack,
+.rails > :nth-child(4) .railTrack {
+  animation-delay: -1.6s;
+}
+
 @keyframes railUp {
   from {
     transform: translateY(0);
@@ -234,8 +241,8 @@
 
 .chevron {
   flex: 0 0 auto;
-  width: 0.625rem;
-  height: 0.3125rem;
+  width: 0.875rem;
+  height: 0.4375rem;
   opacity: 0.5;
 }
 
@@ -269,7 +276,6 @@
   flex: 0 1 auto;
 }
 
-/* Title on the left; everything after it rides to the right edge. */
 /* Title row: vertically centred, with the arrow pinned to the right edge. */
 .contentSplit {
   align-items: center;
@@ -590,15 +596,9 @@
   }
 
   .rail {
-    width: 0.75rem;
     min-height: 5.5rem;
   }
 
-  .chevron {
-    width: 0.75rem;
-    height: 0.375rem;
-  }
-
   /* The description becomes a sheet that rises from the bottom on tap. */
   .trayBackdrop {
     display: block;
diff --git a/docs/app/(home)/sections/StackDiagramSection/StackDiagramSection.tsx b/docs/app/(home)/sections/StackDiagramSection/StackDiagramSection.tsx
index 71976517d..4c5d852ed 100644
--- a/docs/app/(home)/sections/StackDiagramSection/StackDiagramSection.tsx
+++ b/docs/app/(home)/sections/StackDiagramSection/StackDiagramSection.tsx
@@ -252,7 +252,7 @@ export function StackDiagramSection() {
                   <span className={styles.itemIcon}>
                     <Browser size={ICON_SIZE} />
                   </span>
-                  <span className={styles.itemTitle}>App surface</span>
+                  <span className={styles.itemTitle}>Agent Interface</span>
                 </div>
                 <span className={styles.layerArrow}>
                   <ArrowRight size={12} weight="bold" />
@@ -276,8 +276,12 @@ export function StackDiagramSection() {
           </div>
 
           <div className={styles.connector}>
+            {/* Four lanes: the left pair streams UI up, the right pair carries
+                actions down. */}
             <span className={styles.rails}>
               <Rail direction="up" />
+              <Rail direction="up" />
+              <Rail direction="down" />
               <Rail direction="down" />
             </span>
             <div className={styles.langLayer}>