feat(website): expand homepage product story

packages/website/src/components/mockup/sidebar.tsx

@@ -25,6 +25,8 @@ import type { MockupStateId } from "./states";
 
 const SIDEBAR_STYLE = { width: SIDEBAR_W };
 const TITLEBAR_STYLE = { height: TITLEBAR_H };
+const NAV_DEFAULT_LAYOUT = { height: 97 };
+const NAV_EXTENDED_LAYOUT = { height: 127 };
 
 // --- data -------------------------------------------------------------------
 
@@ -278,12 +280,18 @@ export function Sidebar({ state }: { state: MockupStateId }) {
         </span>
       </div>
 
-      <div className="px-[8px] pt-[7px]">
+      <motion.div
+        initial={false}
+        animate={extending ? NAV_EXTENDED_LAYOUT : NAV_DEFAULT_LAYOUT}
+        className="overflow-hidden px-[8px] pt-[7px]"
+      >
         <NavItem icon={NEW_WORKSPACE_ICON} label="New workspace" />
         <NavItem icon={HISTORY_ICON} label="History" />
         <NavItem icon={SCHEDULES_ICON} label="Schedules" />
-        {extending ? <NavItem icon={PLUGIN_ICON} label="Release Radar" active /> : null}
-      </div>
+        <motion.div initial={false} animate={extending ? FADE_IN : FADE_OUT}>
+          <NavItem icon={PLUGIN_ICON} label="Release Radar" active />
+        </motion.div>
+      </motion.div>
 
       <div className="mt-[9px] h-px bg-mock-border" />
 

packages/website/src/components/mockup/window.tsx

@@ -16,6 +16,7 @@ const PANEL_OPEN = { width: RIGHT_PANEL_W + 1, opacity: 1 };
 /** Which center pane a state shows. States sharing a key keep it mounted. */
 function centerKey(state: MockupStateId): string {
   if (state === "review") return "review";
+  if (state === "extend") return "extend";
   return "chat";
 }
 

packages/website/src/routes/index.tsx

@@ -22,7 +22,13 @@ function Home() {
           for coding agents
         </>
       }
-      subtitle="Run any coding agent from your phone, desktop, or terminal. Self-hosted, multi-provider, open source."
+      subtitle={
+        <>
+          Run any coding agent from anywhere.
+          <br />
+          Self-hosted, multi-provider, open source
+        </>
+      }
     />
   );
 }

packages/website/src/routes/sponsor.tsx

@@ -34,9 +34,7 @@ function Sponsor() {
 
         <p>
           Paseo started as a personal project: I wanted to run coding agents from anywhere without
-          giving up control of my code, my keys, or my workflow. It grew into something bigger
-          because developers felt the same need: a single place to orchestrate agents across
-          devices, without vendor lock-in.
+          giving up control of my code, my keys, or my workflow.
         </p>
 
         <p>

packages/website/src/styles.css

@@ -664,6 +664,7 @@
   --color-foreground: #fafafa;
   --color-muted: #1a1f1e;
   --color-muted-foreground: #a8adac;
+  --color-extra-muted-foreground: #717574;
   --color-card: #171d1c;
   --color-border: #252b2a;
   --color-scrollbar-handle: #717574;