mirror of
https://github.com/katanemo/plano.git
synced 2026-06-26 15:39:40 +02:00
feat: redesign archgw -> plano + website in Next.js (#613)
* feat: redesign archgw -> plano + website * feat(www): refactor landing page sections, add new diagrams and UI improvements * feat(www): sections enhanced for clarify & diagrams added * feat(www): improvements to mobile design, layout of diagrams * feat(www): clean + typecheck * feat(www): feedback loop changes * feat(www): fix type error * fix lib/utils error * feat(www): ran biome formatting * feat(www): graphic changes * feat(www): web analytics * fea(www): changes * feat(www): introduce monorepo This change brings Turborepo monorepo to independently handle the marketing website, the docs website and any other future use cases for mutli-platform support. They are using internal @katanemo package handlers for the design system and logic. * fix(www): transpiler failure * fix(www): tsconfig issue * fix(www): next.config issue * feat(docs): hold off on docs * Delete next.config.ts * feat(www): content fix * feat(www): introduce blog * feat(www): content changes * Update package-lock.json * feat: update text * Update IntroSection.tsx * feat: Turbopack issue * fix * Update IntroSection.tsx * feat: updated Research page * refactor(www): text clarity, padding adj. * format(www) * fix: add missing lib/ files to git - fixes Vercel GitHub deployment - Updated .gitignore to properly exclude Python lib/ but include Next.js lib/ directories - Added packages/ui/src/lib/utils.ts (cn utility function) - Added apps/www/src/lib/sanity.ts (Sanity client configuration) - Fixes module resolution errors in Vercel GitHub deployments (case-sensitive filesystem) * Update .gitignore * style(www): favicon + metadata * fix(www): links * fix(www): add analytics * fix(www): add * fix(www): fix links + image * fix(www): fix links + image * fix(www): fix links * fix(www): remove from tools testing.md
This commit is contained in:
Musa
GitHub
parent
48bbc7cce7
commit
0c3efdbef2
119 changed files with 27142 additions and 266 deletions
67
apps/www/src/components/research/ResearchBenchmarks.tsx
Normal file
67
apps/www/src/components/research/ResearchBenchmarks.tsx
Normal file
|
|
@ -0,0 +1,67 @@
|
|||
import React from "react";
|
||||
import Image from "next/image";
|
||||
|
||||
export function ResearchBenchmarks() {
|
||||
return (
|
||||
<section className="relative py-12 sm:py-16 lg:py-20 px-4 sm:px-6 lg:px-[102px] bg-[#1a1a1a] border-b-2 border-white/10">
|
||||
<div className="max-w-[81rem] mx-auto">
|
||||
{/* Section Header */}
|
||||
<div className="mb-8 sm:mb-12 lg:mb-6">
|
||||
{/* BENCHMARKS Label */}
|
||||
<div className="mb-4 sm:mb-2">
|
||||
<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]">
|
||||
BENCHMARKS
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Title */}
|
||||
<h2 className="text-4xl sm:text-4xl md:text-5xl lg:text-4xl font-medium leading-tight tracking-[-0.06em]! text-white">
|
||||
<span className="font-sans">
|
||||
Production excellence, outperforming frontier LLMs
|
||||
</span>
|
||||
</h2>
|
||||
</div>
|
||||
|
||||
{/* Benchmarks Image */}
|
||||
{/* Mobile: Full-width scrollable container that extends to viewport edges */}
|
||||
<div
|
||||
className="mt-5 lg:hidden relative left-1/2 right-1/2 -ml-[50vw] -mr-[50vw] w-screen overflow-x-auto overflow-y-visible"
|
||||
style={{
|
||||
scrollbarWidth: "none",
|
||||
msOverflowStyle: "none",
|
||||
WebkitOverflowScrolling: "touch",
|
||||
}}
|
||||
>
|
||||
<style jsx>{`
|
||||
.benchmarks-scroll-container::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
`}</style>
|
||||
<div className="benchmarks-scroll-container inline-block pl-4 sm:pl-6">
|
||||
<Image
|
||||
src="/Benchmarks.svg"
|
||||
alt="Benchmarks"
|
||||
width={1200}
|
||||
height={600}
|
||||
className="h-auto"
|
||||
style={{ width: "1200px", maxWidth: "none", display: "block" }}
|
||||
priority
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Desktop: Normal display */}
|
||||
<div className="hidden lg:block w-full">
|
||||
<Image
|
||||
src="/Benchmarks.svg"
|
||||
alt="Benchmarks"
|
||||
width={1200}
|
||||
height={600}
|
||||
className="w-full h-auto"
|
||||
priority
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
46
apps/www/src/components/research/ResearchCTA.tsx
Normal file
46
apps/www/src/components/research/ResearchCTA.tsx
Normal file
|
|
@ -0,0 +1,46 @@
|
|||
import React from "react";
|
||||
import { Button } from "@katanemo/ui";
|
||||
import Link from "next/link";
|
||||
|
||||
export function ResearchCTA() {
|
||||
return (
|
||||
<section className="relative pt-16 sm:pt-20 lg:pt-24 pb-12 sm:pb-16 lg:pb-20 px-4 sm:px-6 lg:px-[102px] bg-[#1a1a1a]">
|
||||
<div className="max-w-[81rem] mx-auto relative z-10">
|
||||
<div className="max-w-4xl">
|
||||
{/* Main Heading */}
|
||||
<h1 className="text-4xl sm:text-4xl md:text-5xl lg:text-5xl font-medium leading-tight tracking-[-0.06em]! text-white -ml-1 mb-3 mt-4">
|
||||
<span className="font-sans">
|
||||
Meet Plano-Orchestrator. Our latest models.
|
||||
</span>
|
||||
</h1>
|
||||
</div>
|
||||
|
||||
{/* Description with CTA Buttons */}
|
||||
<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 user
|
||||
intent and conversation context to make precise routing and
|
||||
orchestration decisions.
|
||||
</p>
|
||||
|
||||
{/* CTA Buttons */}
|
||||
<div className="flex flex-col sm:flex-row items-stretch sm:items-start gap-3 sm:gap-4">
|
||||
<Button asChild className="w-full sm:w-auto">
|
||||
<Link href="https://huggingface.co/katanemo">
|
||||
Download Plano models
|
||||
</Link>
|
||||
</Button>
|
||||
<Button variant="secondary" asChild className="w-full sm:w-auto">
|
||||
<Link href="https://docs.planoai.dev">
|
||||
Get Started with Plano
|
||||
</Link>
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
157
apps/www/src/components/research/ResearchCapabilities.tsx
Normal file
157
apps/www/src/components/research/ResearchCapabilities.tsx
Normal file
|
|
@ -0,0 +1,157 @@
|
|||
"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 className="relative py-12 sm:py-16 lg:py-20 px-4 sm:px-6 lg:px-[102px] bg-[#1a1a1a]">
|
||||
<div className="max-w-[81rem] mx-auto">
|
||||
{/* Section Header */}
|
||||
<div className="mb-8 sm:mb-12 lg:mb-10">
|
||||
{/* 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-ORCHESTRATOR CAPABILITIES
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Title */}
|
||||
<h2 className="text-4xl sm:text-4xl md:text-5xl lg:text-4xl font-medium leading-tight tracking-[-0.06em]! text-white mb-4">
|
||||
<span className="font-sans">
|
||||
Accurately route with confidence with no compromise
|
||||
</span>
|
||||
</h2>
|
||||
|
||||
<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>
|
||||
|
||||
{/* Mobile: Icon card above title/description, stacked vertically */}
|
||||
<div className="lg:hidden grid grid-cols-1 gap-8">
|
||||
{capabilitiesData.map((capability) => {
|
||||
// Map each capability to its icon
|
||||
const iconMap: Record<
|
||||
number,
|
||||
React.ComponentType<{ className?: string }>
|
||||
> = {
|
||||
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 (
|
||||
<div key={capability.id} className="flex flex-col">
|
||||
{/* Icon Card */}
|
||||
<motion.div
|
||||
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-6 h-40 flex items-center justify-center mb-4"
|
||||
>
|
||||
{Icon && <Icon className="w-24 h-24 text-[#9797ea]" />}
|
||||
</motion.div>
|
||||
|
||||
{/* Title */}
|
||||
<h3 className="font-sans font-medium text-white text-xl tracking-[-1.2px]! leading-[1.102] mb-3">
|
||||
{capability.title}
|
||||
</h3>
|
||||
|
||||
{/* Description */}
|
||||
<p className="text-white/90 text-base leading-relaxed">
|
||||
{capability.description}
|
||||
</p>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
|
||||
{/* Desktop: Icon cards separate from titles/descriptions */}
|
||||
<div className="hidden lg:grid lg:grid-cols-4 gap-6 mb-6">
|
||||
{capabilitiesData.map((capability) => {
|
||||
// Map each capability to its icon
|
||||
const iconMap: Record<
|
||||
number,
|
||||
React.ComponentType<{ className?: string }>
|
||||
> = {
|
||||
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 (
|
||||
<motion.div
|
||||
key={capability.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-6 h-52 flex items-center justify-center"
|
||||
>
|
||||
{Icon && <Icon className="w-24 h-24 text-[#9797ea]" />}
|
||||
</motion.div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
|
||||
{/* Desktop: Titles and Descriptions Below Boxes */}
|
||||
<div className="hidden lg:grid lg:grid-cols-4 gap-6">
|
||||
{capabilitiesData.map((capability) => (
|
||||
<div key={capability.id}>
|
||||
{/* Title */}
|
||||
<h3 className="font-sans font-medium text-white text-2xl tracking-[-1.2px]! leading-[1.102] mb-4">
|
||||
{capability.title}
|
||||
</h3>
|
||||
|
||||
{/* Description */}
|
||||
<p className="text-white/90 text-base leading-relaxed">
|
||||
{capability.description}
|
||||
</p>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
111
apps/www/src/components/research/ResearchFamily.tsx
Normal file
111
apps/www/src/components/research/ResearchFamily.tsx
Normal file
|
|
@ -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 className="relative py-16 sm:py-20 lg:py-24 px-4 sm:px-6 lg:px-[102px] bg-white">
|
||||
<div className="max-w-[81rem] mx-auto">
|
||||
{/* Section Header */}
|
||||
<div className="mb-8 sm:mb-12 lg:mb-10">
|
||||
{/* PLANO FAMILY Label */}
|
||||
<div className="mb-4 sm:mb-2">
|
||||
<div className="font-mono font-bold text-[#2A3178] text-sm sm:text-base lg:text-xl tracking-[1.44px] sm:tracking-[1.92px]! leading-[1.502]">
|
||||
PLANO FAMILY
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Title */}
|
||||
<h2 className="text-4xl sm:text-4xl md:text-5xl lg:text-4xl font-medium leading-tight tracking-[-0.06em]! text-black -ml-1">
|
||||
<span className="font-sans">Plano Models</span>
|
||||
</h2>
|
||||
</div>
|
||||
|
||||
{/* 2 Card Grid - Side by Side */}
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-6 mb-6">
|
||||
{modelsData.map((model) => (
|
||||
<motion.div
|
||||
key={model.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-6 sm:p-6 lg:p-6 h-72"
|
||||
>
|
||||
{/* Empty box - content is below */}
|
||||
</motion.div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{/* Titles and Descriptions Below Boxes */}
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
|
||||
{modelsData.map((model) => (
|
||||
<div key={model.id}>
|
||||
{/* Logo */}
|
||||
<div className="mb-6">
|
||||
<Image
|
||||
src={model.logo}
|
||||
alt={model.name}
|
||||
width={200}
|
||||
height={60}
|
||||
className="h-12 w-auto"
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Features List */}
|
||||
<div>
|
||||
{model.features.map((feature, index) => (
|
||||
<div key={index} className="flex items-start gap-3 mb-4">
|
||||
<Check className="w-5 h-5 text-[var(--primary)] flex-shrink-0 mt-0.5" />
|
||||
<p className="font-mono text-black text-sm sm:text-base tracking-[-0.8px] sm:tracking-[-1.2px]! leading-relaxed">
|
||||
{feature.text}
|
||||
</p>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
49
apps/www/src/components/research/ResearchGrid.tsx
Normal file
49
apps/www/src/components/research/ResearchGrid.tsx
Normal file
|
|
@ -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: "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.",
|
||||
},
|
||||
];
|
||||
|
||||
export function ResearchGrid() {
|
||||
return (
|
||||
<section className="relative py-12 sm:py-16 lg:py-20 px-4 sm:px-6 lg:px-[102px] bg-white">
|
||||
<div className="max-w-[81rem] mx-auto">
|
||||
{/* 3 Column Grid */}
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 sm:gap-8 lg:gap-12">
|
||||
{researchItems.map((item, index) => (
|
||||
<div key={index} className="flex flex-col">
|
||||
{/* Title */}
|
||||
<h3 className="font-sans font-medium text-2xl sm:text-3xl lg:text-3xl tracking-[-1.5px] sm:tracking-[-2px]! text-black leading-[1.1] mb-2 sm:mb-4">
|
||||
{item.title}
|
||||
</h3>
|
||||
|
||||
{/* Description */}
|
||||
<p className="text-black text-sm sm:text-base lg:text-lg leading-relaxed">
|
||||
{item.description}
|
||||
</p>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
58
apps/www/src/components/research/ResearchHero.tsx
Normal file
58
apps/www/src/components/research/ResearchHero.tsx
Normal file
|
|
@ -0,0 +1,58 @@
|
|||
import React from "react";
|
||||
import { NetworkAnimation } from "../NetworkAnimation";
|
||||
import { Button } from "@katanemo/ui";
|
||||
import Link from "next/link";
|
||||
|
||||
export function ResearchHero() {
|
||||
return (
|
||||
<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-[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! " />
|
||||
</div>
|
||||
<div className="max-w-3xl relative z-10">
|
||||
{/* 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">
|
||||
New!
|
||||
</span>
|
||||
<span className="text-xs sm:text-sm font-medium text-black hidden sm:inline">
|
||||
—
|
||||
</span>
|
||||
<span className="text-xs sm:text-sm font-[600] tracking-[-0.6px]! text-black leading-tight">
|
||||
<span className="">Plano Orchestrator models released</span>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Main Heading */}
|
||||
<h1 className="text-4xl sm:text-4xl md:text-5xl lg:text-7xl font-medium leading-tight tracking-tighter text-black -ml-1 mb-3 mt-4">
|
||||
<span className="font-sans">Research</span>
|
||||
</h1>
|
||||
</div>
|
||||
|
||||
{/* 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-[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>
|
||||
|
||||
<div className="flex flex-col sm:flex-row items-stretch sm:items-start gap-3 sm:gap-4 mt-6 sm:mt-8 relative z-10">
|
||||
<Button asChild className="w-full sm:w-auto">
|
||||
<Link href="https://huggingface.co/katanemo">
|
||||
Available on Hugging Face
|
||||
</Link>
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
50
apps/www/src/components/research/ResearchTimeline.tsx
Normal file
50
apps/www/src/components/research/ResearchTimeline.tsx
Normal file
|
|
@ -0,0 +1,50 @@
|
|||
import React from "react";
|
||||
import Image from "next/image";
|
||||
|
||||
export function ResearchTimeline() {
|
||||
return (
|
||||
<section className="relative py-12 sm:py-16 lg:py-16 px-4 sm:px-6 lg:px-[102px] bg-white border-b border-gray-200">
|
||||
<div className="max-w-[81rem] mx-auto">
|
||||
{/* Timeline Image */}
|
||||
{/* Mobile: Full-width scrollable container that extends to viewport edges */}
|
||||
<div
|
||||
className="mt-5 lg:hidden relative left-1/2 right-1/2 -ml-[50vw] -mr-[50vw] w-screen overflow-x-auto overflow-y-visible"
|
||||
style={{
|
||||
scrollbarWidth: "none",
|
||||
msOverflowStyle: "none",
|
||||
WebkitOverflowScrolling: "touch",
|
||||
}}
|
||||
>
|
||||
<style jsx>{`
|
||||
.timeline-scroll-container::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
`}</style>
|
||||
<div className="timeline-scroll-container inline-block pl-4 sm:pl-6">
|
||||
<Image
|
||||
src="/Timeline.svg"
|
||||
alt="Research Timeline"
|
||||
width={1200}
|
||||
height={600}
|
||||
className="h-auto"
|
||||
style={{ width: "1200px", maxWidth: "none", display: "block" }}
|
||||
priority
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Desktop: Normal display */}
|
||||
<div className="hidden lg:block w-full">
|
||||
<Image
|
||||
src="/Timeline.svg"
|
||||
alt="Research Timeline"
|
||||
width={1200}
|
||||
height={600}
|
||||
className="w-full h-auto"
|
||||
priority
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
7
apps/www/src/components/research/index.ts
Normal file
7
apps/www/src/components/research/index.ts
Normal file
|
|
@ -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";
|
||||
Loading…
Add table
Add a link
Reference in a new issue