apunkt/plano
1
0
Fork 0
mirror of https://github.com/katanemo/plano.git synced 2026-06-17 15:25:17 +02:00
Code Issues Projects Releases Packages Wiki Activity

feat(www): feedback loop changes

Browse source
This commit is contained in:
Musa 2025-11-21 10:57:47 -08:00
parent f24cbde23f
commit f42ea872e7
11 changed files with 106 additions and 112 deletions
Download patch file Download diff file Expand all files Collapse all files

6
www/public/Contextual.svg
View file

File diff suppressed because one or more lines are too long
Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 34 KiB

After

Width:  |  Height:  |  Size: 39 KiB

Before After
Before After

2
www/public/IntroDiagram.svg
View file

File diff suppressed because one or more lines are too long
Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 133 KiB

After

Width:  |  Height:  |  Size: 136 KiB

Before After
Before After

146
www/public/LaunchFaster.svg
View file

File diff suppressed because one or more lines are too long
Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 44 KiB

After

Width:  |  Height:  |  Size: 25 KiB

Before After
Before After

10
www/src/components/Footer.tsx
View file

@ -22,7 +22,7 @@ export function Footer() {
<div className="grid grid-cols-1 lg:grid-cols-2 gap-20">
{/* Left Column - Tagline and Copyright */}
<div className="flex flex-col">
<p className="font-sans text-lg sm:text-xl lg:text-2xl text-black tracking-[-1.2px] sm:tracking-[-1.5px] lg:tracking-[-1.7px]! leading-7 sm:leading-8 mb-6 sm:mb-8">
<p className="font-sans font-normal text-lg sm:text-xl lg:text-2xl text-black tracking-[-1.2px] sm:tracking-[-1.5px] lg:tracking-[-1.7px]! leading-7 mb-6 sm:mb-8">
Plano is the powerful, intelligent platform that empowers teams to seamlessly build, automate, and scale agentic systems with ease.
</p>
@ -38,7 +38,7 @@ export function Footer() {
<div className="grid grid-cols-1 sm:grid-cols-2 gap-8">
{/* Company Links */}
<div>
<h3 className="font-sans font-medium text-2xl sm:text-2xl lg:text-3xl text-black tracking-[-1.2px] sm:tracking-[-1.4px] lg:tracking-[-1.6px]! mb-4 sm:mb-6">
<h3 className="font-sans font-normal text-xl sm:text-2xl lg:text-3xl text-black tracking-[-1.2px] sm:tracking-[-1.4px] lg:tracking-[-1.6px]! mb-4 sm:mb-6">
Company
</h3>
<nav className="space-y-3 sm:space-y-4">
@ -46,7 +46,7 @@ export function Footer() {
<Link
key={link.href}
href={link.href}
className="block font-sans text-base sm:text-lg lg:text-xl text-black tracking-[-0.8px] sm:tracking-[-0.9px] lg:tracking-[-1px]! hover:text-[var(--primary)] transition-colors"
className="block font-sans font-normal text-sm sm:text-base lg:text-lg text-black tracking-[-0.8px] sm:tracking-[-0.9px] lg:tracking-[-1px]! hover:text-[var(--primary)] transition-colors"
>
{link.label}
</Link>
@ -56,7 +56,7 @@ export function Footer() {
{/* Developer Resources */}
<div>
<h3 className="font-sans font-medium text-2xl sm:text-2xl lg:text-3xl text-black tracking-[-1.2px] sm:tracking-[-1.4px] lg:tracking-[-1.6px]! mb-4 sm:mb-6">
<h3 className="font-sans font-normal text-xl sm:text-2xl lg:text-3xl text-black tracking-[-1.2px] sm:tracking-[-1.4px] lg:tracking-[-1.6px]! mb-4 sm:mb-6">
Developer Resources
</h3>
<nav className="space-y-3 sm:space-y-4">
@ -64,7 +64,7 @@ export function Footer() {
<Link
key={link.href}
href={link.href}
className="block font-sans text-base sm:text-lg lg:text-xl text-black tracking-[-0.8px] sm:tracking-[-0.9px] lg:tracking-[-1px]! hover:text-[var(--primary)] transition-colors"
className="block font-sans font-normal text-sm sm:text-base lg:text-lg text-black tracking-[-0.8px] sm:tracking-[-0.9px] lg:tracking-[-1px]! hover:text-[var(--primary)] transition-colors"
>
{link.label}
</Link>

8
www/src/components/Hero.tsx
View file

@ -31,13 +31,13 @@ export function Hero() {
</div>
{/* Subheading with CTA Buttons */}
<div className="max-w-7xl flex flex-col lg:flex-row lg:items-center lg:justify-between gap-6">
<p className="text-base sm:text-lg md:text-xl lg:text-2xl font-sans font-[500] tracking-[-1.2px] sm:tracking-[-1.92px]! text-black max-w-4xl">
Build agents faster, and scale them reliably by offloading the plumbing work in AI agents.
<div className="max-w-7xl flex flex-col lg:flex-row lg:items-end lg:justify-between gap-6">
<p className="text-base sm:text-lg md:text-xl lg:text-2xl font-sans font-[400] tracking-[-1.2px] sm:tracking-[-1.92px]! text-black max-w-4xl">
Build agents faster, and scale them reliably by offloading the plumbing work in AI.
</p>
{/* CTA Buttons */}
<div className="flex flex-col sm:flex-row items-stretch sm:items-center gap-3 sm:gap-4 w-full sm:w-auto lg:justify-end">
<div className="mb-0.5 flex flex-col sm:flex-row items-stretch sm:items-center gap-3 sm:gap-4 w-full sm:w-auto lg:justify-end">
<Button asChild className="w-full sm:w-auto">
<Link href="/get-started">Get started</Link>
</Button>

10
www/src/components/HowItWorksSection.tsx
View file

@ -5,15 +5,15 @@ import Image from "next/image";
export function HowItWorksSection() {
return (
<section className="bg-[#1a1a1a] text-white pb-16 sm:pb-20 lg:pb-28 sm:pt-3 pt-20">
<div className="max-w-324 mx-auto sm:pl-0">
<section className="bg-[#1a1a1a] text-white pb-16 sm:pb-20 lg:pb-28 sm:pt-0 pt-20">
<div className="max-w-312 mx-auto sm:pl-0">
<div className="flex flex-col gap-8 sm:gap-12 lg:gap-16">
{/* Header and Description */}
<div className="max-w-4xl lg:-ml-[102px] lg:pl-[102px] sm:pl-0 pl-4">
<h2 className="font-sans font-normal text-2xl sm:text-3xl lg:text-4xl tracking-[-2px] sm:tracking-[-2.4px]! text-white leading-[1.03] mb-6 sm:mb-8">
A high-level overview of how Plano works
<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 leading-7 sm:leading-9 lg:leading-10 tracking-[-0.8px] sm:tracking-[-1.2px]!">
<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]!">
<p className="mb-0">
Plano offers a delightful developer experience with a simple configuration file that describes the types of prompts your agentic app supports, a set of APIs that need to be plugged in for agentic scenarios (including retrieval queries) and your choice of LLMs.
</p>

2
www/src/components/IdeaToAgentSection.tsx
View file

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

10
www/src/components/IntroSection.tsx
View file

@ -18,16 +18,16 @@ export function IntroSection() {
</h2>
{/* Body Text */}
<div className="font-mono tracking-[-0.96px]! text-white text-lg max-w-[713px]">
<p className="mb-0 leading-8">
<div className="font-mono tracking-[-0.96px]! text-white text-sm sm:text-base lg:text-lg max-w-[713px]">
<p className="mb-0">
Plano is a framework-friendly proxy server and dataplane for agents,
deployed as a sidecar. Plano handles the critical plumbing work in AI
like agent routing and orchestration, comprehensive traces for agentic
interactions, guardrail hooks, unified APIs for LLMs —
</p>
<p className="mb-0 leading-8 mt-4">
<strong>Developers</strong> can focus more on modeling workflows, <strong>product teams</strong> can accelerate
feedback loops for reinforcement learning and <strong>engineering teams</strong> can
<p className="mb-0 mt-4">
<strong><u>Developers</u></strong> can focus more on modeling workflows, <strong><u>product teams</u></strong> can accelerate
feedback loops for reinforcement learning and <strong><u>engineering teams</u></strong> can
standardize policies and access controls across every agent and LLM for
safer, more reliable scaling.
</p>

4
www/src/components/UnlockPotentialSection.tsx
View file

@ -17,8 +17,8 @@ export function UnlockPotentialSection({
<section className={`relative py-24 px-6 lg:px-[102px] ${backgroundClass} ${className}`}>
<div className="max-w-[81rem] mx-auto">
<div className="max-w-4xl">
<h2 className={`font-sans font-normal text-3xl lg:text-4xl tracking-[-2.88px]! ${textColor} leading-[1.4] mb-8`}>
Focus on prompting, not plumbing<br />
<h2 className={`font-sans font-normal text-[1.8rem] lg:text-4xl tracking-[-2.55px]! ${textColor} leading-[1.4] mb-8`}>
Focus on prompting, not plumbing.<br />
Build with <strong className="font-medium text-primary">plano</strong>, get started in less than a minute.
</h2>

10
www/src/components/UseCasesSection.tsx
View file

@ -46,7 +46,7 @@ const useCasesData: UseCase[] = [
},
{
id: 4,
category: "SECURITY",
category: "CENTRALIZED SECURITY",
title: "Built-in guardrails and centralized policies",
summary: "Safe scaling with jailbreak detection and access controls",
fullContent: "With built-in guardrails, centralized policies, and access controls, Plano ensures safe scaling across LLMs, detecting issues like jailbreak attempts. This is critical for deployments in regulated fields like finance or healthcare, and minimizing risks while standardizing reliability and security of agents.",
@ -55,7 +55,7 @@ const useCasesData: UseCase[] = [
},
{
id: 5,
category: "ON-PREMISES",
category: "ON-PREMISES DEPLOYMENT",
title: "Full data control in regulated environments",
summary: "Deploy on private infrastructure without compromising features",
fullContent: "Plano's lightweight sidecar model deploys effortlessly on your private infrastructure, empowering teams in regulated sectors to maintain full data control while benefiting from unified LLM access, custom filter chains, and production-grade tracing—without compromising on security or scalability.",
@ -97,17 +97,17 @@ export function UseCasesSection() {
key={useCase.id}
whileHover={{ y: -4 }}
transition={{ duration: 0.2 }}
className="bg-gradient-to-b from-[rgba(177,184,255,0.16)] to-[rgba(17,28,132,0.035)] border-2 border-[rgba(171,178,250,0.27)] rounded-md p-4 sm:p-6 lg:p-8 h-auto sm:h-64 md:h-72 lg:h-90 flex flex-col justify-between cursor-pointer"
className="bg-gradient-to-b from-[rgba(177,184,255,0.16)] to-[rgba(17,28,132,0.035)] border-2 border-[rgba(171,178,250,0.27)] rounded-md p-4 sm:p-6 lg:p-6 h-auto sm:h-64 md:h-72 lg:h-90 flex flex-col justify-between cursor-pointer"
onClick={() => setSelectedUseCase(useCase)}
>
{/* Category */}
<div className="mb-4 sm:mb-6">
<p className="font-mono font-bold text-[#2a3178] text-sm sm:text-base tracking-[1.44px] sm:tracking-[1.92px]! mb-3 sm:mb-4">
<p className="font-mono font-bold text-[#2a3178] text-sm sm:text-sm tracking-[1.44px] sm:tracking-[1.92px]! mb-3 sm:mb-4">
{useCase.category}
</p>
{/* Title */}
<h3 className="font-sans font-medium text-black text-lg sm:text-xl lg:text-2xl tracking-[-1.2px]! leading-[1.102]">
<h3 className="font-sans font-normal text-black text-lg sm:text-xl lg:text-2xl tracking-[-1.2px]! leading-[1.102]">
{useCase.title}
</h3>
</div>

10
www/src/components/VerticalCarouselSection.tsx
View file

@ -51,11 +51,11 @@ export function VerticalCarouselSection() {
};
return (
<section className="relative bg-[#1a1a1a] text-white py-12 sm:py-16 lg:py-24 px-4 sm:px-6 lg:px-[102px]">
<section className="relative bg-[#1a1a1a] text-white pt-20 pb-0 lg:pb-4 px-4 sm:px-6 lg:px-[102px] h-auto sm:h-[650px]">
<div className="max-w-324 mx-auto">
{/* Main Heading */}
<h2 className="font-sans font-normal text-2xl sm:text-3xl lg:text-4xl tracking-[-2px] sm:tracking-[-2.88px]! text-white leading-[1.03] mb-8 sm:mb-12 lg:mb-12 max-w-4xl">
Basic scenarios to powerful agentic apps in minutes
Under the hood
</h2>
{/* Mobile: Horizontal Scroller Navigation */}
@ -156,13 +156,13 @@ export function VerticalCarouselSection() {
{/* Text Content */}
<div className="flex-1 max-w-2xl order-last lg:order-first flex flex-col justify-start">
{/* Title */}
{/* Title
<h3 className="font-sans font-medium text-primary text-xl sm:text-2xl lg:text-[34px] tracking-[-1px]! leading-[1.03] mb-4 sm:mb-6">
{verticalCarouselData[activeSlide].title}
</h3>
</h3> */}
{/* Description */}
<div className="font-mono text-white text-sm sm:text-base lg:text-lg leading-6 sm:leading-8 lg:leading-10 tracking-[-0.8px] sm:tracking-[-1.2px]! max-w-full lg:max-w-md">
<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>