From e75873480796517b6bf2c7592cc2fa6bde2f31a2 Mon Sep 17 00:00:00 2001
From: Mohamed Boudra <boudra.moha@gmail.com>
Date: Mon, 30 Mar 2026 12:31:42 +0700
Subject: [PATCH] feat(website): update marketing copy and section styling

Rework multi-provider and self-hosted sections with clearer copy.
Scale up self-hosted diagram cards to match multi-provider sizing.
---
 .../website/src/components/landing-page.tsx   | 52 +++++++++----------
 1 file changed, 26 insertions(+), 26 deletions(-)

diff --git a/packages/website/src/components/landing-page.tsx b/packages/website/src/components/landing-page.tsx
index 636b2f02f..9cea3e24c 100644
--- a/packages/website/src/components/landing-page.tsx
+++ b/packages/website/src/components/landing-page.tsx
@@ -300,8 +300,8 @@ function MultiProviderSection() {
 
   return (
     <FeatureSection
-      title="Multi-provider"
-      description="Escape the vendor lock, mix and match frontier models through a single interface."
+      title="Use the best agent for the job"
+      description="Run multiple providers from a single interface. Paseo runs the native agent harness as you'd normally run it, with your skills, config and MCP servers intact."
     >
       <div className="grid grid-cols-1 sm:grid-cols-3 gap-4">
         {providers.map((p) => (
@@ -320,10 +320,10 @@ function MultiProviderSection() {
 
 function SelfHostedDiagram() {
   const clients = [
-    { name: "Desktop", icon: <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" className="text-white/40"><rect x="2" y="3" width="20" height="14" rx="2" /><path d="M8 21h8M12 17v4" /></svg> },
-    { name: "Web", icon: <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" className="text-white/40"><circle cx="12" cy="12" r="10" /><path d="M2 12h20M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z" /></svg> },
-    { name: "Mobile", icon: <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" className="text-white/40"><rect x="5" y="2" width="14" height="20" rx="2" /><path d="M12 18h.01" /></svg> },
-    { name: "CLI", icon: <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" className="text-white/40"><polyline points="4 17 10 11 4 5" /><line x1="12" y1="19" x2="20" y2="19" /></svg> },
+    { name: "Desktop", icon: <svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"><rect x="2" y="3" width="20" height="14" rx="2" /><path d="M8 21h8M12 17v4" /></svg> },
+    { name: "Web", icon: <svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"><circle cx="12" cy="12" r="10" /><path d="M2 12h20M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z" /></svg> },
+    { name: "Mobile", icon: <svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"><rect x="5" y="2" width="14" height="20" rx="2" /><path d="M12 18h.01" /></svg> },
+    { name: "CLI", icon: <svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"><polyline points="4 17 10 11 4 5" /><line x1="12" y1="19" x2="20" y2="19" /></svg> },
   ];
   const hosts = ["MacBook Pro", "Hetzner VM", "Dev server"];
   const containerRef = React.useRef<HTMLDivElement>(null);
@@ -376,9 +376,9 @@ function SelfHostedDiagram() {
     <div className="md:hidden flex flex-col items-center gap-4 py-4">
       <div className="space-y-2 w-full">
         {clients.map((c) => (
-          <div key={c.name} className="flex items-center gap-2 rounded-lg border border-white/10 bg-white/[0.03] px-4 py-2.5 text-sm">
-            {c.icon}
-            {c.name}
+          <div key={c.name} className="flex items-center justify-center gap-3 rounded-xl border border-white/10 bg-white/[0.03] px-5 py-4">
+            <span className="text-white/80">{c.icon}</span>
+            <span className="font-medium">{c.name}</span>
           </div>
         ))}
       </div>
@@ -391,14 +391,14 @@ function SelfHostedDiagram() {
       <div className="w-px h-6 border-l border-dashed border-white/25" />
       <div className="space-y-2 w-full">
         {hosts.map((h) => (
-          <div key={h} className="flex items-center gap-3 rounded-lg border border-white/10 bg-white/[0.03] px-4 py-2.5 text-sm">
-            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" className="text-white/40">
+          <div key={h} className="flex items-center justify-center gap-3 rounded-xl border border-white/10 bg-white/[0.03] px-5 py-4">
+            <span className="text-white/80"><svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round">
               <rect x="2" y="2" width="20" height="8" rx="2" />
               <rect x="2" y="14" width="20" height="8" rx="2" />
               <circle cx="6" cy="6" r="1" />
               <circle cx="6" cy="18" r="1" />
-            </svg>
-            {h}
+            </svg></span>
+            <span className="font-medium">{h}</span>
           </div>
         ))}
       </div>
@@ -419,10 +419,10 @@ function SelfHostedDiagram() {
           <div
             key={c.name}
             ref={(el) => { clientRefs.current[i] = el; }}
-            className="flex items-center gap-2 rounded-lg border border-white/10 bg-white/[0.03] px-4 py-2.5 text-sm backdrop-blur-sm"
+            className="flex items-center gap-3 rounded-xl border border-white/10 bg-white/[0.03] px-5 py-4 backdrop-blur-sm"
           >
-            {c.icon}
-            {c.name}
+            <span className="text-white/80">{c.icon}</span>
+            <span className="font-medium">{c.name}</span>
           </div>
         ))}
       </div>
@@ -431,10 +431,10 @@ function SelfHostedDiagram() {
       <div className="flex-1" />
 
       {/* Center label */}
-      <div ref={centerRef} className="flex-shrink-0 rounded-xl border border-white/10 bg-white/[0.03] px-6 py-5 text-center space-y-1 relative z-10 backdrop-blur-sm">
-        <p className="text-xs font-medium text-white/50">E2E Encrypted Relay</p>
-        <p className="text-[10px] text-white/25">or</p>
-        <p className="text-xs font-medium text-white/50">Direct Connection</p>
+      <div ref={centerRef} className="flex-shrink-0 rounded-xl border border-white/10 bg-white/[0.03] px-8 py-6 text-center space-y-1.5 relative z-10 backdrop-blur-sm">
+        <p className="text-sm font-medium text-white/50">E2E Encrypted Relay</p>
+        <p className="text-xs text-white/25">or</p>
+        <p className="text-sm font-medium text-white/50">Direct Connection</p>
       </div>
 
       {/* Spacer */}
@@ -446,15 +446,15 @@ function SelfHostedDiagram() {
           <div
             key={h}
             ref={(el) => { hostRefs.current[i] = el; }}
-            className="flex items-center gap-3 rounded-lg border border-white/10 bg-white/[0.03] px-4 py-2.5 text-sm backdrop-blur-sm"
+            className="flex items-center gap-3 rounded-xl border border-white/10 bg-white/[0.03] px-5 py-4 backdrop-blur-sm"
           >
-            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" className="text-white/40">
+            <span className="text-white/80"><svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round">
               <rect x="2" y="2" width="20" height="8" rx="2" />
               <rect x="2" y="14" width="20" height="8" rx="2" />
               <circle cx="6" cy="6" r="1" />
               <circle cx="6" cy="18" r="1" />
-            </svg>
-            {h}
+            </svg></span>
+            <span className="font-medium">{h}</span>
           </div>
         ))}
       </div>
@@ -466,8 +466,8 @@ function SelfHostedDiagram() {
 function SelfHostedSection() {
   return (
     <FeatureSection
-      title="Self-hosted"
-      description="Run the daemon wherever you want and connect however you want. Orchestrate agents in multiple hosts from a single interface."
+      title="Your agents, every surface"
+      description="Run agents on your laptop, a VM, or a dev server. Control them from any device with a direct connection or an E2E encrypted relay."
     >
       <SelfHostedDiagram />
     </FeatureSection>