refactor(www): text clarity, padding adj.

This commit is contained in:
Musa 2025-12-12 11:31:03 -08:00
parent 573744961d
commit a825ce9add
18 changed files with 88 additions and 124 deletions

File diff suppressed because one or more lines are too long

Before

Width:  |  Height:  |  Size: 332 KiB

After

Width:  |  Height:  |  Size: 329 KiB

Before After
Before After

View file

@ -84,7 +84,7 @@ export default async function BlogPostPage({
{/* Featured Image - First */}
{(post.mainImage || post.mainImageUrl) && (
<div className="">
<div className="max-w-[89rem] mx-auto px-4 sm:px-6 lg:px- py-8 sm:py-12">
<div className="max-w-[89rem] mx-auto px-4 sm:px-6 lg:px-8 pt-8 sm:pt-12 lg:pt-1 pb-8 sm:pb-12">
<div className="relative aspect-[21/8] w-full overflow-hidden rounded-lg">
{post.mainImage ? (
<Image
@ -111,7 +111,7 @@ export default async function BlogPostPage({
{/* Content Section */}
<div className="max-w-[58rem] mx-auto px-4 sm:px-6 lg:px-8">
{/* Back to Blog Button */}
<div className="pt-8 sm:pt-12 lg:pt-16 pb-6">
<div className="pt-4 sm:pt-6 lg:pt-8 pb-4 sm:pb-6">
<Link
href="/blog"
className="inline-flex items-center gap-2 text-sm font-medium text-black/60 hover:text-black transition-colors"
@ -134,7 +134,7 @@ export default async function BlogPostPage({
</div>
{/* Author and Date */}
<div className="flex flex-col sm:flex-row items-start sm:items-center justify-between gap-4 sm:gap-6 pb-4 pt-5">
<div className="flex flex-col sm:flex-row items-start sm:items-center justify-between gap-4 sm:gap-6 pb-4">
{post.author?.name && (
<div className="flex items-center gap-3">
{post.author.image ? (
@ -176,7 +176,7 @@ export default async function BlogPostPage({
</div>
{/* Title */}
<div className="pb-10 sm:-ml-1.5">
<div className="pb-6 sm:pb-8 sm:-ml-1.5">
<h1 className="text-4xl sm:text-5xl lg:text-6xl font-medium leading-tight tracking-tighter text-black">
<span className="font-sans">{post.title}</span>
</h1>

View file

@ -92,7 +92,7 @@ export default async function BlogPage() {
{/* Featured Post */}
{featuredPostWithDate && (
<section className="">
<div className="max-w-[85rem] mx-auto px-4 sm:px-6 lg:px-8 py-12 sm:py-16 lg:py-0">
<div className="max-w-[85rem] mx-auto px-4 sm:px-6 lg:px-8 pb-8 sm:pb-12 lg:pb-0">
<FeaturedBlogCard post={featuredPostWithDate} />
</div>
</section>
@ -100,7 +100,7 @@ export default async function BlogPage() {
{/* Recent Posts Section */}
{recentPostsWithDates.length > 0 && (
<section className="border-b border-black/10 py-12 sm:py-16 lg:py-24">
<section className="border-b border-black/10 py-8 sm:py-12 lg:py-24">
<div className="max-w-[85rem] mx-auto px-4 sm:px-6 lg:px-8">
<BlogSectionHeader />
<div className="grid sm:grid-cols-2 lg:grid-cols-3 gap-6 lg:gap-8">

View file

@ -12,11 +12,11 @@ export function BlogHeader() {
ease: "easeOut",
}}
>
<div className="max-w-[85rem] mx-auto px-4 sm:px-6 lg:px-8 py-16 sm:py-20 lg:py-16">
<h1 className="text-4xl sm:text-5xl lg:text-7xl font-normal leading-tight tracking-tighter text-black mb-4">
<div className="max-w-[85rem] mx-auto px-4 sm:px-6 lg:px-8 pt-8 sm:pt-12 lg:pt-1 pb-8 sm:pb-12 lg:pb-16">
<h1 className="text-4xl sm:text-5xl lg:text-7xl font-normal leading-tight tracking-tighter text-black mb-3 sm:mb-4">
<span className="font-sans">What's new with Plano</span>
</h1>
<p className="text-lg sm:text-xl lg:text-2xl font-sans font-normal tracking-[-1.2px] text-black max-w-3xl">
<p className="text-base sm:text-lg md:text-xl lg:text-2xl font-sans font-normal tracking-[-1.0px] sm:tracking-[-1.2px] text-black max-w-3xl">
Building the future of infrastructure and tools for AI developers.
</p>
</div>

View file

@ -18,7 +18,7 @@ export function ConditionalLayout({
return (
<div className="min-h-screen">
<Navbar />
<main className="pt-20">{children}</main>
<main className="pt-2 md:pt-10">{children}</main>
<Footer />
</div>
);

View file

@ -13,14 +13,14 @@ export function Hero() {
<div className="lg:hidden absolute inset-0 pointer-events-none">
<NetworkAnimation className="!w-[300px] !h-[300px] left-82! top-1! opacity-90! " />
</div>
<div className="max-w-3xl mb-6 sm:mb-4 relative z-10">
<div className="max-w-3xl mb-3 sm:mb-4 relative z-10">
{/* Version Badge */}
<div className="mb-4 sm:mb-6">
<div className="inline-flex flex-wrap items-center gap-1.5 sm:gap-2 px-3 sm:px-4 py-1 rounded-full bg-[rgba(185,191,255,0.4)] border border-[var(--secondary)] shadow backdrop-blur">
<span className="text-xs sm:text-sm font-medium text-black/65">
v0.4
</span>
<span className="text-xs sm:text-sm font-medium text-black hidden sm:inline">
<span className="text-xs sm:text-sm font-medium text-black ">
</span>
<span className="text-xs sm:text-sm font-[600] tracking-[-0.6px]! text-black leading-tight">
@ -34,18 +34,19 @@ export function Hero() {
{/* Main Heading */}
<h1 className="text-4xl sm:text-4xl md:text-5xl lg:text-7xl font-normal leading-tight tracking-tighter text-black flex flex-col gap-0 sm:-space-y-2 lg:-space-y-3">
<span className="font-sans">Delivery infrastructure </span>
<span className="font-sans">Delivery Infrastructure </span>
<span className="font-sans font-medium text-[var(--secondary)]">
for agentic apps
for Agentic Apps
</span>
</h1>
</div>
{/* Subheading with CTA Buttons */}
<div className="max-w-7xl relative z-10">
<p className="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">
Build agents faster, and deliver them reliably to production -
by offloading the plumbing work in building agentic applications.
<p className="text-base sm:text-lg md:text-xl lg:text-[22px] font-sans font-[400] tracking-[-1.0px] sm:tracking-[-1.22px]! text-black max-w-76 sm:max-w-2xl mb-6">
Build agents faster, and deliver them reliably to production -
by offloading the critical plumbing work to Plano.
</p>
{/* CTA Buttons */}

View file

@ -13,7 +13,7 @@ export function HowItWorksSection() {
<h2 className="font-sans font-normal text-xl sm:text-2xl lg:text-3xl tracking-[-1.6px] sm:tracking-[-2px]! text-white leading-[1.03] mb-6 sm:mb-8">
One configuration file to orchestrate
</h2>
<div className="font-mono text-white w-100 sm:w-full text-sm sm:text-lg lg:text-lg tracking-[-0.8px] sm:tracking-[-1.2px]!">
<div className="text-white w-100 sm:w-full text-sm sm:text-lg lg:text-lg">
<p className="mb-0">
Plano offers a delightful developer experience with a simple
configuration file that describes the types of prompts your

View file

@ -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() {
</h3>
{/* Description */}
<div className="font-mono text-black text-sm sm:text-base lg:text-lg max-w-full lg:max-w-140 tracking-[-0.8px] sm:tracking-[-1.2px]!">
<div className="text-black text-sm sm:text-base lg:text-lg max-w-full lg:max-w-140">
<p className="mb-0">
{carouselData[currentSlide].description}
</p>

View file

@ -18,14 +18,15 @@ export function IntroSection() {
</h2>
{/* Body Text */}
<div className="font-mono tracking-[-0.96px]! text-white text-sm sm:text-base lg:text-lg max-w-[713px]">
<div className="text-white text-sm sm:text-base lg:text-lg max-w-[713px]">
<p className="mb-0">
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.
</p>
<p className="mb-0 mt-4">
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.
</p>

View file

@ -262,7 +262,7 @@ export function UseCasesSection() {
}}
className="mb-10"
>
<DialogDescription className="font-mono text-[#494949] text-base lg:text-base xl:text-lg leading-relaxed tracking-tight max-w-none mb-0">
<DialogDescription className="text-[#494949] text-base lg:text-base xl:text-lg leading-relaxed max-w-none mb-0">
{selectedUseCase.fullContent}
</DialogDescription>
</motion.div>
@ -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 */}
<div className="flex items-center gap-2 text-sm font-mono text-[#494949] justify-center sm:justify-start order-0">
<div className="flex items-center gap-2 text-sm text-neutral-500 justify-center sm:justify-start order-0">
<span>Ready to get started?</span>
</div>
<div className="flex flex-col sm:flex-row gap-3 w-full sm:w-auto order-1">
<Button asChild className="w-full sm:w-auto">
<Link href="https://docs.plano.katanemo.com/getting-started/installation">Start building</Link>
Start building
<ArrowRightIcon className="w-4 h-4" />
<Link href="https://docs.plano.katanemo.com/getting-started/installation" className="flex items-center gap-2">
Start building
<ArrowRightIcon className="w-4 h-4" />
</Link>
</Button>
</div>
</motion.div>

View file

@ -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() {
<div className="relative w-full max-w-full sm:max-w-md lg:max-w-[600px] aspect-4/3">
<Image
src={verticalCarouselData[activeSlide].diagram}
alt={verticalCarouselData[activeSlide].title}
alt={verticalCarouselData[activeSlide].category}
fill
className="object-contain object-top"
priority
@ -169,10 +179,12 @@ export function VerticalCarouselSection() {
</h3> */}
{/* Description */}
<div className="font-mono text-white text-sm sm:text-base lg:text-lg tracking-[-0.8px] sm:tracking-[-1.2px]! max-w-full lg:max-w-md">
<p className="mb-0">
{verticalCarouselData[activeSlide].description}
</p>
<div className="text-white text-sm sm:text-base lg:text-lg max-w-full lg:max-w-md -mt-0.5">
{verticalCarouselData[activeSlide].description.map((paragraph, index) => (
<p key={index} className={index < verticalCarouselData[activeSlide].description.length - 1 ? "mb-4" : "mb-0"}>
{paragraph}
</p>
))}
</div>
</div>
</div>

View file

@ -14,9 +14,8 @@ export function ResearchCTA() {
</div>
{/* Description with CTA Buttons */}
<div className="max-w-2xl">
{/* 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 */}
<p className="leading-relaxed sm:text-lg md:text-xl lg:text-2xl font-sans font-normal tracking-[-1.0px] sm:tracking-[-1.22px]! text-white/90 mb-6">
<div className="max-w-5xl">
<p className="leading-relaxed sm:text-lg md:text-lg lg:text-[18px] font-sans font-normal text-white/90 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

View file

@ -46,7 +46,7 @@ export function ResearchCapabilities() {
{/* PLANO-4B CAPABILITIES Label */}
<div className="mb-2 sm:mb-1">
<div className="font-mono font-bold text-[#9797ea] text-sm sm:text-base lg:text-xl tracking-[1.44px] sm:tracking-[1.92px]! leading-[1.502]">
PLANO-4B CAPABILITIES
PLANO-ORCHESTRATOR CAPABILITIES
</div>
</div>
@ -55,10 +55,11 @@ export function ResearchCapabilities() {
<span className="font-sans">Accurately route with confidence with no compromise</span>
</h2>
<p className="font-mono text-white/90 w-[75%] text-sm sm:text-base tracking-[-0.8px] sm:tracking-[-1.2px]! leading-relaxed">
<p className="text-white/90 w-full sm:w-[75%] text-sm sm:text-base leading-relaxed">
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.
</p>
</div>
@ -94,7 +95,7 @@ export function ResearchCapabilities() {
</h3>
{/* Description */}
<p className="font-mono text-white/90 text-base tracking-[-0.8px]! leading-relaxed">
<p className="text-white/90 text-base leading-relaxed">
{capability.description}
</p>
</div>
@ -140,7 +141,7 @@ export function ResearchCapabilities() {
</h3>
{/* Description */}
<p className="font-mono text-white/90 text-base tracking-[-1.2px]! leading-relaxed">
<p className="text-white/90 text-base leading-relaxed">
{capability.description}
</p>
</div>

View file

@ -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() {
</h3>
{/* Description */}
<p className="font-mono text-black text-sm sm:text-base lg:text-lg leading-relaxed tracking-[-0.8px] sm:tracking-[-1.2px]!">
<p className="text-black text-sm sm:text-base lg:text-lg leading-relaxed">
{item.description}
</p>
</div>

View file

@ -5,10 +5,10 @@ import Link from "next/link";
export function ResearchHero() {
return (
<section className="relative pt-8 sm:pt-12 lg:pt-16 pb-12 sm:pb-16 lg:pb-20 px-4 sm:px-6 lg:px-[102px] overflow-hidden">
<section className="relative pt-8 sm:pt-12 lg:pt-1 pb-12 sm:pb-16 lg:pb-20 px-4 sm:px-6 lg:px-[102px] overflow-hidden">
<div className="max-w-[81rem] mx-auto relative">
<div className="hidden lg:block absolute inset-0 pointer-events-none">
<NetworkAnimation className="!w-[500px] !h-[500px] xl:!w-[600px] xl:!h-[600px] 2xl:!w-[570px] 2xl:!h-[570px]" />
<NetworkAnimation className="!w-[500px] !h-[500px] xl:!w-[600px] xl:!h-[600px] 2xl:!w-[570px] 2xl:!h-[540px] !top-[15%]" />
</div>
<div className="lg:hidden absolute inset-0 pointer-events-none">
<NetworkAnimation className="!w-[300px] !h-[300px] left-77! -top-2! opacity-90! " />
@ -24,10 +24,9 @@ export function ResearchHero() {
</span>
<span className="text-xs sm:text-sm font-[600] tracking-[-0.6px]! text-black leading-tight">
<span className="hidden sm:inline">
Plano-4B - The state-of-the-art agent routing and orchestration LLM
<span className="">
Plano Orchestrator models released
</span>
<span className="sm:hidden">Unified /v1/responses API</span>
</span>
</div>
</div>
@ -40,11 +39,10 @@ export function ResearchHero() {
{/* Description */}
<div className="max-w-70 sm:max-w-2xl relative z-10">
<p className="text-base sm:text-lg md:text-xl lg:text-2xl font-sans font-normal tracking-[-1.0px] sm:tracking-[-1.22px]! text-black">
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 products core
business logic.
<p className="text-base sm:text-lg md:text-xl lg:text-[22px] font-sans font-normal tracking-[-1.0px] sm:tracking-[-1.22px]! text-black">
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.
</p>
</div>