From a825ce9add4f2b6dc5166cd5283502a05439c2a3 Mon Sep 17 00:00:00 2001 From: Musa Date: Fri, 12 Dec 2025 11:31:03 -0800 Subject: [PATCH] refactor(www): text clarity, padding adj. --- apps/www/public/Benchmarks.svg | 50 ----------------- apps/www/src/app/blog/[slug]/page.tsx | 8 +-- apps/www/src/app/blog/page.tsx | 4 +- apps/www/src/components/BlogHeader.tsx | 6 +-- apps/www/src/components/ConditionalLayout.tsx | 2 +- apps/www/src/components/Hero.tsx | 15 +++--- apps/www/src/components/HowItWorksSection.tsx | 2 +- .../www/src/components/IdeaToAgentSection.tsx | 8 +-- apps/www/src/components/IntroSection.tsx | 11 ++-- apps/www/src/components/UseCasesSection.tsx | 11 ++-- .../components/VerticalCarouselSection.tsx | 54 +++++++++++-------- .../src/components/research/ResearchCTA.tsx | 5 +- .../research/ResearchCapabilities.tsx | 9 ++-- .../src/components/research/ResearchGrid.tsx | 4 +- .../src/components/research/ResearchHero.tsx | 18 +++---- packages/shared-styles/globals.css | 1 + packages/ui/src/components/Footer.tsx | 2 +- packages/ui/src/components/Navbar.tsx | 2 +- 18 files changed, 88 insertions(+), 124 deletions(-) diff --git a/apps/www/public/Benchmarks.svg b/apps/www/public/Benchmarks.svg index 3a507793..f9da4bc9 100644 --- a/apps/www/public/Benchmarks.svg +++ b/apps/www/public/Benchmarks.svg @@ -7,15 +7,9 @@ - - - - - - @@ -32,9 +26,7 @@ - - @@ -110,46 +102,4 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - diff --git a/apps/www/src/app/blog/[slug]/page.tsx b/apps/www/src/app/blog/[slug]/page.tsx index f1a1e379..4a64aca3 100644 --- a/apps/www/src/app/blog/[slug]/page.tsx +++ b/apps/www/src/app/blog/[slug]/page.tsx @@ -84,7 +84,7 @@ export default async function BlogPostPage({ {/* Featured Image - First */} {(post.mainImage || post.mainImageUrl) && (
-
+
{post.mainImage ? ( {/* Back to Blog Button */} -
+
{/* Author and Date */} -
+
{post.author?.name && (
{post.author.image ? ( @@ -176,7 +176,7 @@ export default async function BlogPostPage({
{/* Title */} -
+

{post.title}

diff --git a/apps/www/src/app/blog/page.tsx b/apps/www/src/app/blog/page.tsx index e6dbbc10..bdc27ec1 100644 --- a/apps/www/src/app/blog/page.tsx +++ b/apps/www/src/app/blog/page.tsx @@ -92,7 +92,7 @@ export default async function BlogPage() { {/* Featured Post */} {featuredPostWithDate && (
-
+
@@ -100,7 +100,7 @@ export default async function BlogPage() { {/* Recent Posts Section */} {recentPostsWithDates.length > 0 && ( -
+
diff --git a/apps/www/src/components/BlogHeader.tsx b/apps/www/src/components/BlogHeader.tsx index e89c7148..eebb0791 100644 --- a/apps/www/src/components/BlogHeader.tsx +++ b/apps/www/src/components/BlogHeader.tsx @@ -12,11 +12,11 @@ export function BlogHeader() { ease: "easeOut", }} > -
-

+
+

What's new with Plano

-

+

Building the future of infrastructure and tools for AI developers.

diff --git a/apps/www/src/components/ConditionalLayout.tsx b/apps/www/src/components/ConditionalLayout.tsx index dc81d1f6..f5d3f144 100644 --- a/apps/www/src/components/ConditionalLayout.tsx +++ b/apps/www/src/components/ConditionalLayout.tsx @@ -18,7 +18,7 @@ export function ConditionalLayout({ return (
-
{children}
+
{children}
); diff --git a/apps/www/src/components/Hero.tsx b/apps/www/src/components/Hero.tsx index d50ea784..3b968ab2 100644 --- a/apps/www/src/components/Hero.tsx +++ b/apps/www/src/components/Hero.tsx @@ -13,14 +13,14 @@ export function Hero() {
-
+
{/* Version Badge */}
v0.4 - + — @@ -34,18 +34,19 @@ export function Hero() { {/* Main Heading */}

- Delivery infrastructure + Delivery Infrastructure - for agentic apps + for Agentic Apps

{/* Subheading with CTA Buttons */}
-

- Build agents faster, and deliver them reliably to production - - by offloading the plumbing work in building agentic applications. +

+ Build agents faster, and deliver them reliably to production - + by offloading the critical plumbing work to Plano. +

{/* CTA Buttons */} diff --git a/apps/www/src/components/HowItWorksSection.tsx b/apps/www/src/components/HowItWorksSection.tsx index cd844c47..62f1dc57 100644 --- a/apps/www/src/components/HowItWorksSection.tsx +++ b/apps/www/src/components/HowItWorksSection.tsx @@ -13,7 +13,7 @@ export function HowItWorksSection() {

One configuration file to orchestrate

-
+

Plano offers a delightful developer experience with a simple configuration file that describes the types of prompts your diff --git a/apps/www/src/components/IdeaToAgentSection.tsx b/apps/www/src/components/IdeaToAgentSection.tsx index f2efa1de..7dc44d08 100644 --- a/apps/www/src/components/IdeaToAgentSection.tsx +++ b/apps/www/src/components/IdeaToAgentSection.tsx @@ -11,7 +11,7 @@ const carouselData = [ category: "LAUNCH FASTER", title: "Focus on core objectives", description: - "Building AI agents is hard enough (iterate on prompts and evaluate LLMs, etc), the plumbing work shouldn't add to that complexity. Plano takes care of the critical plumbing work like routing and orchestration to agents that slows you down and locks you into rigid frameworks, freeing developers to innovate on what truly matters.", + "Building agents is hard enough. The plumbing work shouldn't be. Plano handles routing, observability, and policy hooks as a models-native sidecar—so you can focus on your agent's core product logic and ship to production faster.", image: "/LaunchFaster.svg", link: "https://docs.plano.katanemo.com/getting-started/installation", }, @@ -20,7 +20,7 @@ const carouselData = [ category: "BUILD WITH CHOICE", title: "Rapidly incorporate LLMs", description: - "Build with multiple LLMs or model versions with a single unified API. Plano centralizes access controls, offers resiliency for traffic to 100+ LLMs -- all without you having to write a single line of code.", + "Build with multiple LLMs or model versions with a single unified API. Plano centralizes access controls, offers resiliency for traffic to 100+ LLMs -- all without you having to write a single line of code. Use existing libraries and proxy traffic through Plano.", image: "/BuildWithChoice.svg", link: "https://docs.plano.katanemo.com/getting-started/installation", }, @@ -29,7 +29,7 @@ const carouselData = [ category: "RICH LEARNING SIGNALS", title: "Hyper-rich agent traces and logs", description: - "Knowing when agents fail or delight users is a critical signal that feeds into a reinforcement learning and optimization cycle. Plano makes this trivial by sampling hyper-rich information traces from live production agentic interactions so that you can improve agent performance faster.", + "Knowing when agents fail or delight users is a critical signal that feeds into the reinforcement learning and optimization cycle. Plano makes this trivial by sampling hyper-rich information traces from live production agentic interactions so that you can improve agent performance faster.", image: "/Telemetry.svg", link: "https://docs.plano.katanemo.com/getting-started/installation", }, @@ -143,7 +143,7 @@ export function IdeaToAgentSection() {

{/* Description */} -
+

{carouselData[currentSlide].description}

diff --git a/apps/www/src/components/IntroSection.tsx b/apps/www/src/components/IntroSection.tsx index c3569f89..867528bf 100644 --- a/apps/www/src/components/IntroSection.tsx +++ b/apps/www/src/components/IntroSection.tsx @@ -18,14 +18,15 @@ export function IntroSection() { {/* Body Text */} -
+

- Plano is a models-native proxy and dataplane for agents that handles - critical plumbing work in AI - agent routing and orchestration, rich agentic - traces, guardrail hooks, and smart model routing APIs for LLMs. + Plano is a models-native proxy and dataplane for agents that handles + critical plumbing work in AI - agent routing and orchestration, rich agentic + traces, guardrail hooks, and smart model routing APIs for LLMs. Use any + language, AI framework, and deliver agents to productions quickly with Plano.

- Developers can focus more on modeling workflows. + Developers can focus more on core product logic of agents. Product teams can accelerate feedback loops for reinforcement learning. Engineering teams can standardize policies and access controls across every agent and LLM for safer, more reliable scaling.

diff --git a/apps/www/src/components/UseCasesSection.tsx b/apps/www/src/components/UseCasesSection.tsx index e905b64c..2c8c7255 100644 --- a/apps/www/src/components/UseCasesSection.tsx +++ b/apps/www/src/components/UseCasesSection.tsx @@ -262,7 +262,7 @@ export function UseCasesSection() { }} className="mb-10" > - + {selectedUseCase.fullContent} @@ -279,14 +279,15 @@ export function UseCasesSection() { className="flex flex-col sm:flex-row items-stretch sm:items-center justify-between gap-4 pt-8 border-t border-[rgba(171,178,250,0.2)]" > {/* "Ready to get started?" is now first in column on mobile */} -
+
Ready to get started?
diff --git a/apps/www/src/components/VerticalCarouselSection.tsx b/apps/www/src/components/VerticalCarouselSection.tsx index 14fb5e74..3a0309d0 100644 --- a/apps/www/src/components/VerticalCarouselSection.tsx +++ b/apps/www/src/components/VerticalCarouselSection.tsx @@ -9,41 +9,51 @@ const verticalCarouselData = [ { id: 1, category: "INTRODUCTION", - title: "Simple to revolutionary", - description: - "Plano is an intelligent (edge and LLM) proxy server designed for agents - to help you focus on core business objectives. Arch handles critical but the pesky tasks related to the handling and processing of prompts, which includes detecting and rejecting jailbreak attempts, intelligent task routing for improved accuracy, mapping user requests into 'backend' functions, and managing the observability of prompts and LLM in a centralized way.", + title: "", + description: [ + "Plano is a models-native data plane for AI agents - a framework-friendly, protocol-native fabric that lets you focus on what really matters: your agents' product logic.", + "Plano takes over the plumbing work that slows teams down when handling and processing prompts, including detecting and blocking jailbreaks, routing tasks to the right model or agent for better accuracy, applying context engineering hooks, and centralizing observability across agentic interactions.", + ], diagram: "/IntroDiagram.svg", }, { id: 2, category: "OPEN SOURCE", - title: "Freedom to extend & deploy", - description: - "No lock-in. No black boxes. Just an open, intelligent (edge and LLM) proxy for building smarter, agentic AI applications. Created by contributors to Envoy Proxy, Arch brings enterprise-grade reliability to prompt orchestration, while giving you the flexibility to shape, extend, and integrate it into your AI workflows.", + title: "", + description: [ + "No lock-in. No black boxes. Just an open, intelligent fabric for building more reliable agentic AI applications.", + "Built by engineers with roots in the Envoy ecosystem, Plano brings production-grade reliability to agent traffic and prompt orchestration—while staying fully extensible. Shape it, extend it, and integrate it into your existing workflows without being forced into a rigid framework or a single provider.", + ], diagram: "/OpenSource.svg", }, { id: 3, category: "BUILT ON ENVOY", - title: "Production-proven infrastructure", - description: - "Plano takes a dependency on Envoy and is a self-contained process designed to run alongside your application servers. Plano extends Envoy's HTTP connection management subsystem, filtering, and telemetry capabilities exclusively for prompts and LLMs. Use Plano with any application language or framework, and use Plano with any LLM provider.", + title: "", + description: [ + "Plano is built on Envoy and runs as a self-contained sidecar alongside your application servers. It extends Envoy's HTTP connection management, filtering, and telemetry specifically for prompt and LLM traffic—so you get production-grade routing, policy enforcement, and observability out of the box.", + "Use Plano with any application language or framework, and connect it to any LLM provider.", + ], diagram: "/BuiltOnEnvoy.svg", }, { id: 4, category: "PURPOSE-BUILT", - title: "Task-optimized, efficient LLMs", - description: - "Unlike generic API gateways, Plano is purpose-built for AI agent workloads. Every feature is designed with prompt processing, model routing, and agent orchestration in mind, providing optimal performance for your AI applications.", + title: "", + description: [ + "Unlike generic API gateways, Plano is purpose-built for agent workloads, where prompts are the unit of work.", + "Plano treats prompts as first-class traffic: it understands prompt/response flows, tool calls, model selection, and multi-agent handoffs. That means routing, policy enforcement, and observability are optimized for agent execution—not retrofitted from traditional API infrastructure—so your AI applications stay fast, reliable, and easy to evolve.", + ], diagram: "/PurposeBuilt.svg", }, { id: 5, - category: "PROMPT ROUTING", - title: "Intelligent request handling", - description: - "Prompt Targets are a core concept in Plano, enabling developers to define how different types of user prompts should get processed and routed. Define prompt targets, so you can seperate business logic from the complexities of processing and handling of prompts, focusing on the quality of your application and a cleaner seperation of concerns in your codebase.", + category: "PROGRAMMABLE ARCHITECTURE", + title: "", + description: [ + "As agent workloads move beyond prototypes, teams end up scattering critical logic across apps: compliance checks, context \"patches,\" provider-specific quirks, etc. That glue code gets duplicated across agents, is hard to audit, and slows iteration because every policy or workflow change requires touching application code and redeploying.", + "Plano keeps that logic in one place with a programmable Agent Filter Chain—hooks that can inspect, mutate, or terminate prompt traffic early, turning common steps (policy enforcement, jailbreak checks, context engineering, tool gating, routing hints) into reusable building blocks.", + ], diagram: "/PromptRouting.svg", }, ]; @@ -153,7 +163,7 @@ export function VerticalCarouselSection() {
{verticalCarouselData[activeSlide].title} */} {/* Description */} -
-

- {verticalCarouselData[activeSlide].description} -

+
+ {verticalCarouselData[activeSlide].description.map((paragraph, index) => ( +

+ {paragraph} +

+ ))}
diff --git a/apps/www/src/components/research/ResearchCTA.tsx b/apps/www/src/components/research/ResearchCTA.tsx index 9587a06c..9298107b 100644 --- a/apps/www/src/components/research/ResearchCTA.tsx +++ b/apps/www/src/components/research/ResearchCTA.tsx @@ -14,9 +14,8 @@ export function ResearchCTA() {
{/* Description with CTA Buttons */} -
- {/* text-base sm:text-lg md:text-xl lg:text-2xl font-sans font-[400] tracking-[-1.2px] sm:tracking-[-1.82px]! text-black max-w-70 sm:max-w-2xl mb-6 */} -

+

+

Plano-Orchestrator is a family of state-of-the-art routing and orchestration models that decides which agent(s) or LLM(s) should handle each request, and in what sequence. Built for multi-agent orchestration systems, Plano-Orchestrator excels at analyzing diff --git a/apps/www/src/components/research/ResearchCapabilities.tsx b/apps/www/src/components/research/ResearchCapabilities.tsx index 6a1d9858..eda864f5 100644 --- a/apps/www/src/components/research/ResearchCapabilities.tsx +++ b/apps/www/src/components/research/ResearchCapabilities.tsx @@ -46,7 +46,7 @@ export function ResearchCapabilities() { {/* PLANO-4B CAPABILITIES Label */}

- PLANO-4B CAPABILITIES + PLANO-ORCHESTRATOR CAPABILITIES
@@ -55,10 +55,11 @@ export function ResearchCapabilities() { Accurately route with confidence with no compromise -

+

Designed for real-world deployments, it delivers strong performance across general conversations, coding tasks, and long-context multi-turn conversations, while remaining efficient enough for low-latency production environments. +

@@ -94,7 +95,7 @@ export function ResearchCapabilities() { {/* Description */} -

+

{capability.description}

@@ -140,7 +141,7 @@ export function ResearchCapabilities() { {/* Description */} -

+

{capability.description}

diff --git a/apps/www/src/components/research/ResearchGrid.tsx b/apps/www/src/components/research/ResearchGrid.tsx index a2c900e0..fd9555a8 100644 --- a/apps/www/src/components/research/ResearchGrid.tsx +++ b/apps/www/src/components/research/ResearchGrid.tsx @@ -17,7 +17,7 @@ const researchItems: ResearchItem[] = [ "Building an agent is easy — knowing what it does in production and how to improve it is very hard. Our research focuses on making agent behavior observable and governable: studying how agents respond to real and adversarial traffic, policy changes, and turning signals into learning loops that make agents safer and more effective over time.", }, { - title: "Better Performance", + title: "Agentic Performance", description: "Better system performance comes from directing traffic to the right agents for each task or workflow. We build compact orchestration models that manage traffic between agents — ensuring clean handoffs, preserved context, and reliable multi-agent collaboration across distributed systems.", }, @@ -37,7 +37,7 @@ export function ResearchGrid() { {/* Description */} -

+

{item.description}

diff --git a/apps/www/src/components/research/ResearchHero.tsx b/apps/www/src/components/research/ResearchHero.tsx index 4b1e91a7..e1cb561c 100644 --- a/apps/www/src/components/research/ResearchHero.tsx +++ b/apps/www/src/components/research/ResearchHero.tsx @@ -5,10 +5,10 @@ import Link from "next/link"; export function ResearchHero() { return ( -
+
- +
@@ -24,10 +24,9 @@ export function ResearchHero() { — - - Plano-4B - The state-of-the-art agent routing and orchestration LLM + + Plano Orchestrator models released - Unified /v1/responses API
@@ -40,11 +39,10 @@ export function ResearchHero() { {/* Description */}
-

- Our open source applied research focuses on how to deliver agents - safely, efficiently, and with predictable real-world performance — - critical for any AI application, but sits outside any product’s core - business logic. +

+ Our applied research focuses on how to deliver agents safely, efficiently, + and with improved real-world performance — critical for any AI application, + but work that sits outside of any agent's core product logic.

diff --git a/packages/shared-styles/globals.css b/packages/shared-styles/globals.css index 804b1a73..e45f5eb9 100644 --- a/packages/shared-styles/globals.css +++ b/packages/shared-styles/globals.css @@ -175,6 +175,7 @@ /* Apply custom font to body by default */ body { font-family: var(--font-sans); + letter-spacing: -0.04em; } .dark { diff --git a/packages/ui/src/components/Footer.tsx b/packages/ui/src/components/Footer.tsx index ce438b55..4c1bb552 100644 --- a/packages/ui/src/components/Footer.tsx +++ b/packages/ui/src/components/Footer.tsx @@ -27,7 +27,7 @@ export function Footer() {
{/* Left Column - Tagline and Copyright */}
-

+

Plano is a powerful agent delivery infrastructure platform that is framework-friendly, and empowers developers and teams to seamlessly build, deliver, and scale agentic applications. diff --git a/packages/ui/src/components/Navbar.tsx b/packages/ui/src/components/Navbar.tsx index 23f9d7be..728176ff 100644 --- a/packages/ui/src/components/Navbar.tsx +++ b/packages/ui/src/components/Navbar.tsx @@ -179,7 +179,7 @@ export function Navbar() { }; return ( -