diff --git a/apps/www/public/Benchmarks.svg b/apps/www/public/Benchmarks.svg new file mode 100644 index 00000000..3a507793 --- /dev/null +++ b/apps/www/public/Benchmarks.svg @@ -0,0 +1,155 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/apps/www/public/Plano30B-Logo.svg b/apps/www/public/Plano30B-Logo.svg new file mode 100644 index 00000000..831928eb --- /dev/null +++ b/apps/www/public/Plano30B-Logo.svg @@ -0,0 +1,54 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/apps/www/public/Plano4B-Logo.svg b/apps/www/public/Plano4B-Logo.svg new file mode 100644 index 00000000..163f61ff --- /dev/null +++ b/apps/www/public/Plano4B-Logo.svg @@ -0,0 +1,54 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/apps/www/public/PlanoIcon.svg b/apps/www/public/PlanoIcon.svg new file mode 100644 index 00000000..57fb5b33 --- /dev/null +++ b/apps/www/public/PlanoIcon.svg @@ -0,0 +1,53 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/apps/www/public/Timeline.svg b/apps/www/public/Timeline.svg new file mode 100644 index 00000000..c55999ae --- /dev/null +++ b/apps/www/public/Timeline.svg @@ -0,0 +1,33 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/apps/www/src/app/research/page.tsx b/apps/www/src/app/research/page.tsx new file mode 100644 index 00000000..ced0a980 --- /dev/null +++ b/apps/www/src/app/research/page.tsx @@ -0,0 +1,20 @@ +"use client"; + +import React from "react"; +import { ResearchHero, ResearchGrid, ResearchTimeline, ResearchCTA, ResearchCapabilities, ResearchBenchmarks, ResearchFamily } from "@/components/research"; +import { UnlockPotentialSection } from "@/components/UnlockPotentialSection"; + +export default function ResearchPage() { + return ( + <> + + + + + + + {/* */} + + + ); +} diff --git a/apps/www/src/components/Hero.tsx b/apps/www/src/components/Hero.tsx index ce27cab6..d50ea784 100644 --- a/apps/www/src/components/Hero.tsx +++ b/apps/www/src/components/Hero.tsx @@ -5,12 +5,15 @@ import { NetworkAnimation } from "./NetworkAnimation"; export function Hero() { return ( -
-
- -
-
-
+
+
+
+ +
+
+ +
+
{/* Version Badge */}
@@ -30,7 +33,7 @@ export function Hero() {
{/* Main Heading */} -

+

Delivery infrastructure for agentic apps @@ -39,13 +42,14 @@ export function Hero() {

{/* Subheading with CTA Buttons */} -
-

- Build agents faster, and deliver them reliably to prod by offloading plumbing work in AI +

+

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

{/* CTA Buttons */} -
+
diff --git a/apps/www/src/components/IdeaToAgentSection.tsx b/apps/www/src/components/IdeaToAgentSection.tsx index b02afc13..f2efa1de 100644 --- a/apps/www/src/components/IdeaToAgentSection.tsx +++ b/apps/www/src/components/IdeaToAgentSection.tsx @@ -3,6 +3,7 @@ import React, { useState, useEffect } from "react"; import { motion, AnimatePresence } from "framer-motion"; import { Button } from "@katanemo/ui"; +import Link from "next/link"; const carouselData = [ { @@ -12,6 +13,7 @@ const carouselData = [ 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.", image: "/LaunchFaster.svg", + link: "https://docs.plano.katanemo.com/getting-started/installation", }, { id: 2, @@ -20,6 +22,7 @@ const carouselData = [ 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.", image: "/BuildWithChoice.svg", + link: "https://docs.plano.katanemo.com/getting-started/installation", }, { id: 3, @@ -28,6 +31,7 @@ const carouselData = [ 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.", image: "/Telemetry.svg", + link: "https://docs.plano.katanemo.com/getting-started/installation", }, { id: 4, @@ -36,6 +40,7 @@ const carouselData = [ description: "Plano comes built-in with a state-of-the-art guardrail model you can use for things like jailbreak detection. But you can easily extend those capabilities via plano's agent filter chain to apply custom policy checks in a centralized way and keep users engaged on topics relevant to your requirements.", image: "/ShipConfidently.svg", + link: "https://docs.plano.katanemo.com/getting-started/installation", }, { id: 5, @@ -44,6 +49,7 @@ const carouselData = [ description: "Plano's sidecar deployment model avoids library-based abstractions - operating as a protocol-native data plane that integrates seamlessly with your existing agents via agentic APIs (like v1/responses). This decouples your core agent logic from plumbing concerns - run it alongside any framework without code changes, vendor lock-in, or performance overhead.", image: "/Contextual.svg", + link: "https://docs.plano.katanemo.com/getting-started/installation", }, ]; @@ -143,8 +149,8 @@ export function IdeaToAgentSection() {

-
diff --git a/apps/www/src/components/IntroSection.tsx b/apps/www/src/components/IntroSection.tsx index ac7ba7a8..c3569f89 100644 --- a/apps/www/src/components/IntroSection.tsx +++ b/apps/www/src/components/IntroSection.tsx @@ -5,9 +5,9 @@ export function IntroSection() { return (
-
+
{/* Left Content */} -
+
{/* Heading */}

WHY PLANO? diff --git a/apps/www/src/components/LogoCloud.tsx b/apps/www/src/components/LogoCloud.tsx index c2397c60..47b4f9b1 100644 --- a/apps/www/src/components/LogoCloud.tsx +++ b/apps/www/src/components/LogoCloud.tsx @@ -26,7 +26,7 @@ const customerLogos = [ export function LogoCloud() { return ( -

+
{customerLogos.map((logo, index) => { diff --git a/apps/www/src/components/NetworkAnimation.tsx b/apps/www/src/components/NetworkAnimation.tsx index ea1732cd..7c656804 100644 --- a/apps/www/src/components/NetworkAnimation.tsx +++ b/apps/www/src/components/NetworkAnimation.tsx @@ -1,203 +1,200 @@ "use client"; -import React, { useEffect, useState } from "react"; +import React, { useId } from "react"; import { motion } from "framer-motion"; -interface Node { - id: string; - x: number; - y: number; - size: number; - delay: number; -} - -interface Connection { - from: string; - to: string; -} - -interface Particle { - id: string; - connectionIndex: number; - progress: number; -} - -// 4 separate groups positioned to the right of the heading text, aligned with the text vertically -const nodes: Node[] = [ - // Group 1 - { id: "1", x: 20, y: 35, size: 18, delay: 0 }, - { id: "2", x: 70, y: 42, size: 12, delay: 0.8 }, - { id: "3", x: 76, y: 38, size: 16, delay: 1.6 }, - - // // Group 2 - // { id: "4", x: 80, y: 30, size: 18, delay: 0.4 }, - // { id: "5", x: 87, y: 36, size: 12, delay: 1.2 }, - // { id: "6", x: 92, y: 33, size: 16, delay: 2.0 }, - - // Group 3 - { id: "7", x: 62, y: 48, size: 10, delay: 0.6 }, - { id: "8", x: 65, y: 52, size: 18, delay: 1.4 }, - { id: "9", x: 75, y: 48, size: 14, delay: 0.6 }, +// Define the grid of squares with their positions and colors +const squares = [ + // Column 1 (x=3) + { x: 3, y: 3, color: "#B0B7FF", col: 0, row: 0 }, + { x: 3, y: 6, color: "#B0B7FF", col: 0, row: 1 }, + { x: 3, y: 9, color: "#B0B7FF", col: 0, row: 2 }, + { x: 3, y: 12, color: "#ABB2FA", col: 0, row: 3 }, + { x: 3, y: 15, color: "#ABB2FA", col: 0, row: 4 }, + { x: 3, y: 18, color: "#ABB2FA", col: 0, row: 5 }, + { x: 3, y: 21, color: "#969FF4", col: 0, row: 6 }, + + // Column 2 (x=6) + { x: 6, y: 3, color: "#B0B7FF", col: 1, row: 0 }, + { x: 6, y: 6, color: "#B0B7FF", col: 1, row: 1 }, + { x: 6, y: 9, color: "#ABB2FA", col: 1, row: 2 }, + { x: 6, y: 12, color: "#ABB2FA", col: 1, row: 3 }, + { x: 6, y: 15, color: "#ABB2FA", col: 1, row: 4 }, + { x: 6, y: 18, color: "#969FF4", col: 1, row: 5 }, + { x: 6, y: 21, color: "#969FF4", col: 1, row: 6 }, + + // Column 3 (x=9) + { x: 9, y: 3, color: "#B0B7FF", col: 2, row: 0 }, + { x: 9, y: 6, color: "#ABB2FA", col: 2, row: 1 }, + { x: 9, y: 9, color: "#ABB2FA", col: 2, row: 2 }, + { x: 9, y: 12, color: "#ABB2FA", col: 2, row: 3 }, + { x: 9, y: 15, color: "#969FF4", col: 2, row: 4 }, + { x: 9, y: 18, color: "#969FF4", col: 2, row: 5 }, + { x: 9, y: 21, color: "#969FF4", col: 2, row: 6 }, + + // Column 4 (x=12) + { x: 12, y: 3, color: "#ABB2FA", col: 3, row: 0 }, + { x: 12, y: 6, color: "#ABB2FA", col: 3, row: 1 }, + { x: 12, y: 9, color: "#ABB2FA", col: 3, row: 2 }, + { x: 12, y: 12, color: "#969FF4", col: 3, row: 3 }, + { x: 12, y: 15, color: "#969FF4", col: 3, row: 4 }, + { x: 12, y: 18, color: "#969FF4", col: 3, row: 5 }, + { x: 12, y: 21, color: "#969FF4", col: 3, row: 6 }, + + // Column 5 (x=15) + { x: 15, y: 3, color: "#ABB2FA", col: 4, row: 0 }, + { x: 15, y: 6, color: "#ABB2FA", col: 4, row: 1 }, + { x: 15, y: 9, color: "#969FF4", col: 4, row: 2 }, + { x: 15, y: 12, color: "#969FF4", col: 4, row: 3 }, + { x: 15, y: 15, color: "#969FF4", col: 4, row: 4 }, + { x: 15, y: 18, color: "#969FF4", col: 4, row: 5 }, + { x: 15, y: 21, color: "#969FF4", col: 4, row: 6 }, + + // Column 6 (x=18) + { x: 18, y: 3, color: "#ABB2FA", col: 5, row: 0 }, + { x: 18, y: 6, color: "#969FF4", col: 5, row: 1 }, + { x: 18, y: 9, color: "#969FF4", col: 5, row: 2 }, + { x: 18, y: 12, color: "#969FF4", col: 5, row: 3 }, + { x: 18, y: 15, color: "#969FF4", col: 5, row: 4 }, + { x: 18, y: 18, color: "#969FF4", col: 5, row: 5 }, + { x: 18, y: 21, color: "#969FF4", col: 5, row: 6 }, + + // Column 7 (x=21) + { x: 21, y: 3, color: "#969FF4", col: 6, row: 0 }, + { x: 21, y: 6, color: "#969FF4", col: 6, row: 1 }, + { x: 21, y: 9, color: "#969FF4", col: 6, row: 2 }, + { x: 21, y: 12, color: "#969FF4", col: 6, row: 3 }, + { x: 21, y: 15, color: "#969FF4", col: 6, row: 4 }, + { x: 21, y: 18, color: "#969FF4", col: 6, row: 5 }, + { x: 21, y: 21, color: "#969FF4", col: 6, row: 6 }, ]; -const connections: Connection[] = [ - // Group 1 connections - { from: "1", to: "2" }, - { from: "2", to: "3" }, +interface NetworkAnimationProps { + className?: string; +} - // // Group 2 connections - // { from: "4", to: "5" }, - // { from: "5", to: "6" }, +// Deterministic seeded random number generator for consistent SSR/client values +function seededRandom(seed: number): number { + const x = Math.sin(seed) * 10000; + return x - Math.floor(x); +} - // Group 3 connections - { from: "7", to: "8" }, - { from: "8", to: "9" }, -]; +// Round to fixed precision to avoid floating-point precision differences +function roundToPrecision(value: number, precision: number = 10): number { + return Math.round(value * Math.pow(10, precision)) / Math.pow(10, precision); +} -export function NetworkAnimation() { - const [particles, setParticles] = useState([]); - - // Create and animate particles along connections - much slower - useEffect(() => { - const createParticle = () => { - const connectionIndex = Math.floor(Math.random() * connections.length); - const particle: Particle = { - id: `particle-${Date.now()}-${Math.random()}`, - connectionIndex, - progress: 0, - }; - - setParticles((prev) => [...prev, particle]); - - // Remove particle after animation completes - setTimeout(() => { - setParticles((prev) => prev.filter((p) => p.id !== particle.id)); - }, 5000); // Slower duration - }; - - // Create particles at slower intervals - const interval = setInterval(createParticle, 2500); - return () => clearInterval(interval); - }, []); - - // Animate particles - slower movement - useEffect(() => { - const interval = setInterval(() => { - setParticles((prev) => - prev - .map((p) => ({ ...p, progress: p.progress + 0.008 })) // Much slower - .filter((p) => p.progress <= 1), - ); - }, 50); - - return () => clearInterval(interval); - }, []); +// Generate deterministic random values based on index +function getDeterministicValues(index: number) { + const seed1 = index * 0.1; + const seed2 = index * 0.2; + const seed3 = index * 0.3; + const seed4 = index * 0.4; + const seed5 = index * 0.5; + const seed6 = index * 0.6; + + return { + duration: roundToPrecision(3 + seededRandom(seed1) * 3, 10), // 3-6 seconds + peakOpacity: roundToPrecision(0.7 + seededRandom(seed2) * 0.3, 10), + baseOpacity: roundToPrecision(0.3 + seededRandom(seed3) * 0.2, 10), + midOpacity: roundToPrecision(0.5 + seededRandom(seed4) * 0.2, 10), + baseBrightness: roundToPrecision(0.85 + seededRandom(seed5) * 0.15, 10), + peakBrightness: roundToPrecision(1.0 + seededRandom(seed6) * 0.2, 10), + }; +} +export function NetworkAnimation({ className }: NetworkAnimationProps) { + // Generate unique IDs for gradient and mask to avoid conflicts when multiple instances exist + const gradientId = useId().replace(/:/g, '-'); + const maskId = useId().replace(/:/g, '-'); + return ( -
- + - - {/* Simple glow filter */} - - - - - - - - - - {/* Render connections - simple lines with lower opacity */} - {connections.map((conn, index) => { - const fromNode = nodes.find((n) => n.id === conn.from); - const toNode = nodes.find((n) => n.id === conn.to); - if (!fromNode || !toNode) return null; - - const x1 = (fromNode.x / 100) * 1920; - const y1 = (fromNode.y / 100) * 800; - const x2 = (toNode.x / 100) * 1920; - const y2 = (toNode.y / 100) * 800; - - return ( - - ); - })} - - {/* Render data particles with lower opacity */} - {particles.map((particle) => { - const conn = connections[particle.connectionIndex]; - const fromNode = nodes.find((n) => n.id === conn.from); - const toNode = nodes.find((n) => n.id === conn.to); - if (!fromNode || !toNode) return null; - - const x = - ((fromNode.x + (toNode.x - fromNode.x) * particle.progress) / 100) * - 1920; - const y = - ((fromNode.y + (toNode.y - fromNode.y) * particle.progress) / 100) * - 800; - - return ( - - ); - })} - - {/* Render nodes with subtle floating animation */} - {nodes.map((node) => { - const size = node.size; - const baseX = (node.x / 100) * 1920; - const baseY = (node.y / 100) * 800; - - return ( - - ); - })} - + + + {/* Gradient mask: transparent at bottom, opaque at top */} + + + + + + + + + + + + {/* Outer border */} + + + {/* Inner background */} + + + {/* Animated squares with wave effect */} + {squares.map((square, index) => { + // Use deterministic values based on index for SSR/client consistency + const { duration, peakOpacity, baseOpacity, midOpacity, baseBrightness, peakBrightness } = + getDeterministicValues(index); + + return ( + + ); + })} + + +
); } diff --git a/apps/www/src/components/UnlockPotentialSection.tsx b/apps/www/src/components/UnlockPotentialSection.tsx index d3c7f988..315367bc 100644 --- a/apps/www/src/components/UnlockPotentialSection.tsx +++ b/apps/www/src/components/UnlockPotentialSection.tsx @@ -1,5 +1,6 @@ import React from "react"; import { Button } from "@katanemo/ui"; +import Link from "next/link"; interface UnlockPotentialSectionProps { variant?: "transparent" | "black"; @@ -31,8 +32,12 @@ export function UnlockPotentialSection({
- - + +
diff --git a/apps/www/src/components/UseCasesSection.tsx b/apps/www/src/components/UseCasesSection.tsx index d613d417..e905b64c 100644 --- a/apps/www/src/components/UseCasesSection.tsx +++ b/apps/www/src/components/UseCasesSection.tsx @@ -20,6 +20,7 @@ import { DialogClose, } from "@katanemo/ui"; import { motion, AnimatePresence } from "framer-motion"; +import Link from "next/link"; interface UseCase { id: number; @@ -113,7 +114,9 @@ export function UseCasesSection() {

What's possible with Plano

- +
@@ -152,7 +155,9 @@ export function UseCasesSection() { {/* Start building button - Mobile only, appears last */}
- +
@@ -278,7 +283,8 @@ export function UseCasesSection() { Ready to get started?
- diff --git a/apps/www/src/components/research/ResearchBenchmarks.tsx b/apps/www/src/components/research/ResearchBenchmarks.tsx new file mode 100644 index 00000000..39c675a4 --- /dev/null +++ b/apps/www/src/components/research/ResearchBenchmarks.tsx @@ -0,0 +1,65 @@ +import React from "react"; +import Image from "next/image"; + +export function ResearchBenchmarks() { + return ( +
+
+ {/* Section Header */} +
+ {/* BENCHMARKS Label */} +
+
+ BENCHMARKS +
+
+ + {/* Title */} +

+ Production excellence, outperforming frontier LLMs +

+
+ + {/* Benchmarks Image */} + {/* Mobile: Full-width scrollable container that extends to viewport edges */} +
+ +
+ Benchmarks +
+
+ + {/* Desktop: Normal display */} +
+ Benchmarks +
+
+
+ ); +} diff --git a/apps/www/src/components/research/ResearchCTA.tsx b/apps/www/src/components/research/ResearchCTA.tsx new file mode 100644 index 00000000..9587a06c --- /dev/null +++ b/apps/www/src/components/research/ResearchCTA.tsx @@ -0,0 +1,39 @@ +import React from "react"; +import { Button } from "@katanemo/ui"; +import Link from "next/link"; + +export function ResearchCTA() { + return ( +
+
+
+ {/* Main Heading */} +

+ Meet Plano-Orchestrator. Our latest models. +

+
+ + {/* 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 + user intent and conversation context to make precise routing and orchestration decisions. +

+ + {/* CTA Buttons */} +
+ + +
+
+
+
+ ); +} diff --git a/apps/www/src/components/research/ResearchCapabilities.tsx b/apps/www/src/components/research/ResearchCapabilities.tsx new file mode 100644 index 00000000..6a1d9858 --- /dev/null +++ b/apps/www/src/components/research/ResearchCapabilities.tsx @@ -0,0 +1,152 @@ +"use client"; + +import React from "react"; +import { motion } from "framer-motion"; +import { MessagesSquare, GitFork, Route, RefreshCw } from "lucide-react"; + +interface Capability { + id: number; + title: string; + description: string; +} + +const capabilitiesData: Capability[] = [ + { + id: 1, + title: "Multi-turn Understanding", + description: + "Makes routing decisions based on full conversation history, maintaining contextual awareness across extended dialogues with evolving user needs.", + }, + { + id: 2, + title: "Multi-Intent Detection", + description: + "Identifies when a single user message requires multiple agents simultaneously, enabling parallel/sequential routing to fulfill complex requests", + }, + { + id: 3, + title: "Content-Dependency Routing", + description: + "Correctly interprets ambiguous or referential messages by leveraging prior conversation context for accurate routing decisions.", + }, + { + id: 4, + title: "Conversational-Flow Handling", + description: + "Understands diverse interaction patterns including follow-ups, clarifications, confirmations, and corrections within ongoing conversations.", + }, +]; + +export function ResearchCapabilities() { + return ( +
+
+ {/* Section Header */} +
+ {/* PLANO-4B CAPABILITIES Label */} +
+
+ PLANO-4B CAPABILITIES +
+
+ + {/* Title */} +

+ 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. +

+
+ + {/* Mobile: Icon card above title/description, stacked vertically */} +
+ {capabilitiesData.map((capability) => { + // Map each capability to its icon + const iconMap: Record> = { + 1: MessagesSquare, // Multi-turn Understanding + 2: GitFork, // Multi-Intent Detection + 3: Route, // Content-Dependency Routing + 4: RefreshCw, // Conversational-Flow Handling + }; + + const Icon = iconMap[capability.id]; + + return ( +
+ {/* Icon Card */} + + {Icon && ( + + )} + + + {/* Title */} +

+ {capability.title} +

+ + {/* Description */} +

+ {capability.description} +

+
+ ); + })} +
+ + {/* Desktop: Icon cards separate from titles/descriptions */} +
+ {capabilitiesData.map((capability) => { + // Map each capability to its icon + const iconMap: Record> = { + 1: MessagesSquare, // Multi-turn Understanding + 2: GitFork, // Multi-Intent Detection + 3: Route, // Content-Dependency Routing + 4: RefreshCw, // Conversational-Flow Handling + }; + + const Icon = iconMap[capability.id]; + + return ( + + {Icon && ( + + )} + + ); + })} +
+ + {/* Desktop: Titles and Descriptions Below Boxes */} +
+ {capabilitiesData.map((capability) => ( +
+ {/* Title */} +

+ {capability.title} +

+ + {/* Description */} +

+ {capability.description} +

+
+ ))} +
+
+
+ ); +} diff --git a/apps/www/src/components/research/ResearchFamily.tsx b/apps/www/src/components/research/ResearchFamily.tsx new file mode 100644 index 00000000..b7032152 --- /dev/null +++ b/apps/www/src/components/research/ResearchFamily.tsx @@ -0,0 +1,111 @@ +"use client"; + +import React from "react"; +import Image from "next/image"; +import { Check } from "lucide-react"; +import { motion } from "framer-motion"; + +interface ModelFeature { + text: string; +} + +interface Model { + id: number; + name: string; + logo: string; + features: ModelFeature[]; +} + +const modelsData: Model[] = [ + { + id: 1, + name: "Plano-4B", + logo: "/Plano4B-Logo.svg", + features: [ + { text: "Optimized for production routing with sub-100ms latency" }, + { text: "84-87% accuracy on long-context scenarios" }, + { text: "Cost-effective model selection at scale" }, + { text: "Seamless agent orchestration capabilities" }, + { text: "Frontier-level performance at fraction of cost" }, + ], + }, + { + id: 2, + name: "Plano-30B-A3B", + logo: "/Plano30B-Logo.svg", + features: [ + { text: "Advanced routing intelligence for complex workflows" }, + { text: "Enhanced context understanding and preservation" }, + { text: "Superior accuracy for multi-agent coordination" }, + { text: "Enterprise-grade performance and reliability" }, + { text: "Scalable architecture for high-throughput systems" }, + ], + }, +]; + +export function ResearchFamily() { + return ( +
+
+ {/* Section Header */} +
+ {/* PLANO FAMILY Label */} +
+
+ PLANO FAMILY +
+
+ + {/* Title */} +

+ Plano Models +

+
+ + {/* 2 Card Grid - Side by Side */} +
+ {modelsData.map((model) => ( + + {/* Empty box - content is below */} + + ))} +
+ + {/* Titles and Descriptions Below Boxes */} +
+ {modelsData.map((model) => ( +
+ {/* Logo */} +
+ {model.name} +
+ + {/* Features List */} +
+ {model.features.map((feature, index) => ( +
+ +

+ {feature.text} +

+
+ ))} +
+
+ ))} +
+
+
+ ); +} diff --git a/apps/www/src/components/research/ResearchGrid.tsx b/apps/www/src/components/research/ResearchGrid.tsx new file mode 100644 index 00000000..a2c900e0 --- /dev/null +++ b/apps/www/src/components/research/ResearchGrid.tsx @@ -0,0 +1,49 @@ +import React from "react"; + +interface ResearchItem { + title: string; + description: string; +} + +const researchItems: ResearchItem[] = [ + { + title: "Model Routing", + description: + "Great agent UX starts with using the best model for a task — fast and cheap when it can be, smarter when it needs to be — and our routing research gives developers the controls to do exactly that. Our policy-based router captures your evals and preferences, while our performance-based router learns from real traffic over time, so you can evolve model choices without retraining.", + }, + { + title: "Governance & Learning", + description: + "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", + 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.", + }, +]; + +export function ResearchGrid() { + return ( +
+
+ {/* 3 Column Grid */} +
+ {researchItems.map((item, index) => ( +
+ {/* Title */} +

+ {item.title} +

+ + {/* Description */} +

+ {item.description} +

+
+ ))} +
+
+
+ ); +} diff --git a/apps/www/src/components/research/ResearchHero.tsx b/apps/www/src/components/research/ResearchHero.tsx new file mode 100644 index 00000000..4b1e91a7 --- /dev/null +++ b/apps/www/src/components/research/ResearchHero.tsx @@ -0,0 +1,59 @@ +import React from "react"; +import { NetworkAnimation } from "../NetworkAnimation"; +import { Button } from "@katanemo/ui"; +import Link from "next/link"; + +export function ResearchHero() { + return ( +
+
+
+ +
+
+ +
+
+ {/* Badge */} +
+
+ + New! + + + — + + + + Plano-4B - The state-of-the-art agent routing and orchestration LLM + + Unified /v1/responses API + +
+
+ + {/* Main Heading */} +

+ Research +

+
+ + {/* 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. +

+
+ +
+ +
+
+
+ ); +} diff --git a/apps/www/src/components/research/ResearchTimeline.tsx b/apps/www/src/components/research/ResearchTimeline.tsx new file mode 100644 index 00000000..68d1706a --- /dev/null +++ b/apps/www/src/components/research/ResearchTimeline.tsx @@ -0,0 +1,50 @@ +import React from "react"; +import Image from "next/image"; + +export function ResearchTimeline() { + return ( +
+
+ {/* Timeline Image */} + {/* Mobile: Full-width scrollable container that extends to viewport edges */} +
+ +
+ Research Timeline +
+
+ + {/* Desktop: Normal display */} +
+ Research Timeline +
+
+
+ ); +} diff --git a/apps/www/src/components/research/index.ts b/apps/www/src/components/research/index.ts new file mode 100644 index 00000000..890f2f95 --- /dev/null +++ b/apps/www/src/components/research/index.ts @@ -0,0 +1,7 @@ +export { ResearchHero } from "./ResearchHero"; +export { ResearchGrid } from "./ResearchGrid"; +export { ResearchTimeline } from "./ResearchTimeline"; +export { ResearchCTA } from "./ResearchCTA"; +export { ResearchCapabilities } from "./ResearchCapabilities"; +export { ResearchBenchmarks } from "./ResearchBenchmarks"; +export { ResearchFamily } from "./ResearchFamily"; diff --git a/package-lock.json b/package-lock.json index d8474b2f..8e92d4f4 100644 --- a/package-lock.json +++ b/package-lock.json @@ -12,7 +12,7 @@ "packages/*" ], "devDependencies": { - "turbo": "^2.0.0" + "turbo": "^2.6.3" }, "engines": { "node": ">=18.0.0" @@ -16061,27 +16061,27 @@ } }, "node_modules/turbo": { - "version": "2.6.1", - "resolved": "https://registry.npmjs.org/turbo/-/turbo-2.6.1.tgz", - "integrity": "sha512-qBwXXuDT3rA53kbNafGbT5r++BrhRgx3sAo0cHoDAeG9g1ItTmUMgltz3Hy7Hazy1ODqNpR+C7QwqL6DYB52yA==", + "version": "2.6.3", + "resolved": "https://registry.npmjs.org/turbo/-/turbo-2.6.3.tgz", + "integrity": "sha512-bf6YKUv11l5Xfcmg76PyWoy/e2vbkkxFNBGJSnfdSXQC33ZiUfutYh6IXidc5MhsnrFkWfdNNLyaRk+kHMLlwA==", "dev": true, "license": "MIT", "bin": { "turbo": "bin/turbo" }, "optionalDependencies": { - "turbo-darwin-64": "2.6.1", - "turbo-darwin-arm64": "2.6.1", - "turbo-linux-64": "2.6.1", - "turbo-linux-arm64": "2.6.1", - "turbo-windows-64": "2.6.1", - "turbo-windows-arm64": "2.6.1" + "turbo-darwin-64": "2.6.3", + "turbo-darwin-arm64": "2.6.3", + "turbo-linux-64": "2.6.3", + "turbo-linux-arm64": "2.6.3", + "turbo-windows-64": "2.6.3", + "turbo-windows-arm64": "2.6.3" } }, "node_modules/turbo-darwin-64": { - "version": "2.6.1", - "resolved": "https://registry.npmjs.org/turbo-darwin-64/-/turbo-darwin-64-2.6.1.tgz", - "integrity": "sha512-Dm0HwhyZF4J0uLqkhUyCVJvKM9Rw7M03v3J9A7drHDQW0qAbIGBrUijQ8g4Q9Cciw/BXRRd8Uzkc3oue+qn+ZQ==", + "version": "2.6.3", + "resolved": "https://registry.npmjs.org/turbo-darwin-64/-/turbo-darwin-64-2.6.3.tgz", + "integrity": "sha512-BlJJDc1CQ7SK5Y5qnl7AzpkvKSnpkfPmnA+HeU/sgny3oHZckPV2776ebO2M33CYDSor7+8HQwaodY++IINhYg==", "cpu": [ "x64" ], @@ -16093,9 +16093,9 @@ ] }, "node_modules/turbo-darwin-arm64": { - "version": "2.6.1", - "resolved": "https://registry.npmjs.org/turbo-darwin-arm64/-/turbo-darwin-arm64-2.6.1.tgz", - "integrity": "sha512-U0PIPTPyxdLsrC3jN7jaJUwgzX5sVUBsKLO7+6AL+OASaa1NbT1pPdiZoTkblBAALLP76FM0LlnsVQOnmjYhyw==", + "version": "2.6.3", + "resolved": "https://registry.npmjs.org/turbo-darwin-arm64/-/turbo-darwin-arm64-2.6.3.tgz", + "integrity": "sha512-MwVt7rBKiOK7zdYerenfCRTypefw4kZCue35IJga9CH1+S50+KTiCkT6LBqo0hHeoH2iKuI0ldTF2a0aB72z3w==", "cpu": [ "arm64" ], @@ -16107,9 +16107,9 @@ ] }, "node_modules/turbo-linux-64": { - "version": "2.6.1", - "resolved": "https://registry.npmjs.org/turbo-linux-64/-/turbo-linux-64-2.6.1.tgz", - "integrity": "sha512-eM1uLWgzv89bxlK29qwQEr9xYWBhmO/EGiH22UGfq+uXr+QW1OvNKKMogSN65Ry8lElMH4LZh0aX2DEc7eC0Mw==", + "version": "2.6.3", + "resolved": "https://registry.npmjs.org/turbo-linux-64/-/turbo-linux-64-2.6.3.tgz", + "integrity": "sha512-cqpcw+dXxbnPtNnzeeSyWprjmuFVpHJqKcs7Jym5oXlu/ZcovEASUIUZVN3OGEM6Y/OTyyw0z09tOHNt5yBAVg==", "cpu": [ "x64" ], @@ -16121,9 +16121,9 @@ ] }, "node_modules/turbo-linux-arm64": { - "version": "2.6.1", - "resolved": "https://registry.npmjs.org/turbo-linux-arm64/-/turbo-linux-arm64-2.6.1.tgz", - "integrity": "sha512-MFFh7AxAQAycXKuZDrbeutfWM5Ep0CEZ9u7zs4Hn2FvOViTCzIfEhmuJou3/a5+q5VX1zTxQrKGy+4Lf5cdpsA==", + "version": "2.6.3", + "resolved": "https://registry.npmjs.org/turbo-linux-arm64/-/turbo-linux-arm64-2.6.3.tgz", + "integrity": "sha512-MterpZQmjXyr4uM7zOgFSFL3oRdNKeflY7nsjxJb2TklsYqiu3Z9pQ4zRVFFH8n0mLGna7MbQMZuKoWqqHb45w==", "cpu": [ "arm64" ], @@ -16135,9 +16135,9 @@ ] }, "node_modules/turbo-windows-64": { - "version": "2.6.1", - "resolved": "https://registry.npmjs.org/turbo-windows-64/-/turbo-windows-64-2.6.1.tgz", - "integrity": "sha512-buq7/VAN7KOjMYi4tSZT5m+jpqyhbRU2EUTTvp6V0Ii8dAkY2tAAjQN1q5q2ByflYWKecbQNTqxmVploE0LVwQ==", + "version": "2.6.3", + "resolved": "https://registry.npmjs.org/turbo-windows-64/-/turbo-windows-64-2.6.3.tgz", + "integrity": "sha512-biDU70v9dLwnBdLf+daoDlNJVvqOOP8YEjqNipBHzgclbQlXbsi6Gqqelp5er81Qo3BiRgmTNx79oaZQTPb07Q==", "cpu": [ "x64" ], @@ -16149,9 +16149,9 @@ ] }, "node_modules/turbo-windows-arm64": { - "version": "2.6.1", - "resolved": "https://registry.npmjs.org/turbo-windows-arm64/-/turbo-windows-arm64-2.6.1.tgz", - "integrity": "sha512-7w+AD5vJp3R+FB0YOj1YJcNcOOvBior7bcHTodqp90S3x3bLgpr7tE6xOea1e8JkP7GK6ciKVUpQvV7psiwU5Q==", + "version": "2.6.3", + "resolved": "https://registry.npmjs.org/turbo-windows-arm64/-/turbo-windows-arm64-2.6.3.tgz", + "integrity": "sha512-dDHVKpSeukah3VsI/xMEKeTnV9V9cjlpFSUs4bmsUiLu3Yv2ENlgVEZv65wxbeE0bh0jjpmElDT+P1KaCxArQQ==", "cpu": [ "arm64" ], diff --git a/package.json b/package.json index d7c9a511..8f7eeb94 100644 --- a/package.json +++ b/package.json @@ -15,11 +15,10 @@ "clean": "turbo run clean && rm -rf node_modules" }, "devDependencies": { - "turbo": "^2.0.0" + "turbo": "^2.6.3" }, "engines": { "node": ">=18.0.0" }, "packageManager": "npm@10.0.0" } - diff --git a/packages/shared-styles/globals.css b/packages/shared-styles/globals.css index 9db4325c..804b1a73 100644 --- a/packages/shared-styles/globals.css +++ b/packages/shared-styles/globals.css @@ -7,6 +7,11 @@ @custom-variant dark (&:is(.dark *)); +/* Custom breakpoint for extra large screens */ +@theme { + --breakpoint-3xl: 1920px; +} + /* Font Face Declarations */ @font-face { font-family: "IBM Plex Sans"; diff --git a/packages/ui/src/components/Footer.tsx b/packages/ui/src/components/Footer.tsx index 0f88a7c5..ce438b55 100644 --- a/packages/ui/src/components/Footer.tsx +++ b/packages/ui/src/components/Footer.tsx @@ -3,13 +3,17 @@ import Link from "next/link"; import Image from "next/image"; const footerLinks = { - company: [ - { label: "Product", href: "/product" }, - { label: "Use Cases", href: "/use-cases" }, + product: [ + { label: "Research", href: "/research" }, { label: "Blog", href: "/blog" }, - { label: "Plano LLMs", href: "/llms" }, + { label: "Documentation", href: "https://docs.plano.katanemo.com", external: true }, + { label: "Hugging Face", href: "https://huggingface.co/katanemo", external: true }, + ], + resources: [ + { label: "GitHub", href: "https://github.com/katanemo/arch", external: true }, + { label: "Discord", href: "https://discord.gg/pGZf2gcwEc", external: true }, + { label: "Get Started", href: "https://docs.plano.katanemo.com/getting-started/installation", external: true }, ], - developerResources: [{ label: "Documentation", href: "/docs" }], }; export function Footer() { @@ -23,9 +27,10 @@ export function Footer() {
{/* Left Column - Tagline and Copyright */}
-

- Plano is the powerful, intelligent platform that empowers teams to - seamlessly build, automate, and scale agentic systems with ease. +

+ 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.

{/* Copyright */} @@ -38,16 +43,18 @@ export function Footer() { {/* Right Column - Navigation Links */}
- {/* Company Links */} + {/* Product Links */}

- Company + Product

- {/* Developer Resources */} + {/* Resources Links */}

- Developer Resources + Resources