feat: add command palette, accessibility, scroll animations, demo workspace, and keyboard navigation
- COMP-139: Command palette for quick navigation - COMP-140: Accessibility improvements - COMP-141: Scroll animations with animate-on-scroll component - COMP-143: Demo workspace with seed data and demo banner - COMP-145: Keyboard navigation and shortcuts help Ultraworked with [Sisyphus](https://github.com/code-yeongyu/oh-my-Claude) Co-authored-by: Sisyphus <clio-agent@sisyphuslabs.ai>
This commit is contained in:
Vectry
@@ -17,10 +17,11 @@ import {
|
||||
Clipboard,
|
||||
Shield,
|
||||
} from "lucide-react";
|
||||
import { AnimateOnScroll } from "@/components/animate-on-scroll";
|
||||
|
||||
export default function HomePage() {
|
||||
return (
|
||||
<div className="min-h-screen bg-neutral-950">
|
||||
<main id="main-content" className="min-h-screen bg-neutral-950">
|
||||
<script
|
||||
type="application/ld+json"
|
||||
dangerouslySetInnerHTML={{
|
||||
@@ -161,6 +162,7 @@ export default function HomePage() {
|
||||
{/* Features Section */}
|
||||
<section className="py-24 border-b border-neutral-800/50">
|
||||
<div className="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<AnimateOnScroll>
|
||||
<div className="text-center mb-16">
|
||||
<h2 className="text-3xl sm:text-4xl font-bold mb-4">
|
||||
Everything you need to understand your agents
|
||||
@@ -169,9 +171,11 @@ export default function HomePage() {
|
||||
From decision trees to cost intelligence, get complete visibility into how your AI systems operate
|
||||
</p>
|
||||
</div>
|
||||
</AnimateOnScroll>
|
||||
|
||||
<div className="grid md:grid-cols-3 gap-8">
|
||||
{/* Feature 1: Decision Trees */}
|
||||
<AnimateOnScroll delay={0}>
|
||||
<div className="group p-8 rounded-2xl border border-neutral-800/50 bg-gradient-to-b from-neutral-900/50 to-transparent hover:border-emerald-500/30 transition-all duration-300">
|
||||
<div className="w-14 h-14 rounded-xl bg-emerald-500/10 flex items-center justify-center mb-6 group-hover:scale-110 transition-transform duration-300">
|
||||
<GitBranch className="w-7 h-7 text-emerald-400" />
|
||||
@@ -181,8 +185,10 @@ export default function HomePage() {
|
||||
Visualize the complete reasoning behind every agent choice. See the branching logic, alternatives considered, and the path chosen.
|
||||
</p>
|
||||
</div>
|
||||
</AnimateOnScroll>
|
||||
|
||||
{/* Feature 2: Context Awareness */}
|
||||
<AnimateOnScroll delay={100}>
|
||||
<div className="group p-8 rounded-2xl border border-neutral-800/50 bg-gradient-to-b from-neutral-900/50 to-transparent hover:border-emerald-500/30 transition-all duration-300">
|
||||
<div className="w-14 h-14 rounded-xl bg-emerald-500/10 flex items-center justify-center mb-6 group-hover:scale-110 transition-transform duration-300">
|
||||
<Brain className="w-7 h-7 text-emerald-400" />
|
||||
@@ -192,8 +198,10 @@ export default function HomePage() {
|
||||
Monitor context window utilization in real-time. Track what's being fed into your agents and what's being left behind.
|
||||
</p>
|
||||
</div>
|
||||
</AnimateOnScroll>
|
||||
|
||||
{/* Feature 3: Cost Intelligence */}
|
||||
<AnimateOnScroll delay={200}>
|
||||
<div className="group p-8 rounded-2xl border border-neutral-800/50 bg-gradient-to-b from-neutral-900/50 to-transparent hover:border-emerald-500/30 transition-all duration-300">
|
||||
<div className="w-14 h-14 rounded-xl bg-emerald-500/10 flex items-center justify-center mb-6 group-hover:scale-110 transition-transform duration-300">
|
||||
<DollarSign className="w-7 h-7 text-emerald-400" />
|
||||
@@ -203,6 +211,7 @@ export default function HomePage() {
|
||||
Track spending per decision, per agent, per trace. Get granular insights into where every dollar goes in your AI operations.
|
||||
</p>
|
||||
</div>
|
||||
</AnimateOnScroll>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
@@ -211,6 +220,7 @@ export default function HomePage() {
|
||||
<section className="py-24 border-b border-neutral-800/50 relative">
|
||||
<div className="absolute inset-0 bg-[radial-gradient(ellipse_60%_40%_at_50%_50%,rgba(16,185,129,0.04),transparent)]" />
|
||||
<div className="relative max-w-6xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<AnimateOnScroll>
|
||||
<div className="text-center mb-16">
|
||||
<div className="inline-flex items-center gap-2 px-4 py-2 rounded-full border border-neutral-700 bg-neutral-800/30 text-neutral-400 text-sm mb-6">
|
||||
<Zap className="w-4 h-4" />
|
||||
@@ -223,9 +233,11 @@ export default function HomePage() {
|
||||
Go from zero to full agent observability in under five minutes
|
||||
</p>
|
||||
</div>
|
||||
</AnimateOnScroll>
|
||||
|
||||
<div className="grid md:grid-cols-3 gap-6 lg:gap-8">
|
||||
{/* Step 1: Install */}
|
||||
<AnimateOnScroll delay={0}>
|
||||
<div className="relative p-8 rounded-2xl border border-neutral-800/50 bg-neutral-900/30">
|
||||
<div className="absolute -top-4 left-8">
|
||||
<span className="inline-flex items-center justify-center w-8 h-8 rounded-full bg-emerald-500 text-neutral-950 text-sm font-bold shadow-lg shadow-emerald-500/25">
|
||||
@@ -243,8 +255,10 @@ export default function HomePage() {
|
||||
<code className="text-sm font-mono text-emerald-400">pip install vectry-agentlens</code>
|
||||
</div>
|
||||
</div>
|
||||
</AnimateOnScroll>
|
||||
|
||||
{/* Step 2: Instrument */}
|
||||
<AnimateOnScroll delay={100}>
|
||||
<div className="relative p-8 rounded-2xl border border-neutral-800/50 bg-neutral-900/30">
|
||||
<div className="absolute -top-4 left-8">
|
||||
<span className="inline-flex items-center justify-center w-8 h-8 rounded-full bg-emerald-500 text-neutral-950 text-sm font-bold shadow-lg shadow-emerald-500/25">
|
||||
@@ -264,8 +278,10 @@ export default function HomePage() {
|
||||
<code className="text-sm font-mono text-emerald-400">wrap_openai()</code>
|
||||
</div>
|
||||
</div>
|
||||
</AnimateOnScroll>
|
||||
|
||||
{/* Step 3: Observe */}
|
||||
<AnimateOnScroll delay={200}>
|
||||
<div className="relative p-8 rounded-2xl border border-neutral-800/50 bg-neutral-900/30">
|
||||
<div className="absolute -top-4 left-8">
|
||||
<span className="inline-flex items-center justify-center w-8 h-8 rounded-full bg-emerald-500 text-neutral-950 text-sm font-bold shadow-lg shadow-emerald-500/25">
|
||||
@@ -283,6 +299,7 @@ export default function HomePage() {
|
||||
<code className="text-sm font-mono text-emerald-400">agentlens.vectry.tech</code>
|
||||
</div>
|
||||
</div>
|
||||
</AnimateOnScroll>
|
||||
</div>
|
||||
|
||||
{/* Connecting arrows decoration */}
|
||||
@@ -302,6 +319,7 @@ export default function HomePage() {
|
||||
<section className="py-24 border-b border-neutral-800/50">
|
||||
<div className="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<div className="grid lg:grid-cols-2 gap-12 items-start">
|
||||
<AnimateOnScroll>
|
||||
<div className="lg:sticky lg:top-8">
|
||||
<div className="inline-flex items-center gap-2 px-4 py-2 rounded-full border border-neutral-700 bg-neutral-800/30 text-neutral-400 text-sm mb-6">
|
||||
<Cpu className="w-4 h-4" />
|
||||
@@ -331,8 +349,10 @@ export default function HomePage() {
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
</AnimateOnScroll>
|
||||
|
||||
{/* Code Blocks - Two patterns stacked */}
|
||||
<AnimateOnScroll delay={150}>
|
||||
<div className="space-y-6">
|
||||
{/* Decorator Pattern */}
|
||||
<div className="rounded-xl overflow-hidden border border-neutral-800 bg-neutral-900/50 backdrop-blur-sm">
|
||||
@@ -480,6 +500,7 @@ export default function HomePage() {
|
||||
</pre>
|
||||
</div>
|
||||
</div>
|
||||
</AnimateOnScroll>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
@@ -488,6 +509,7 @@ export default function HomePage() {
|
||||
<section className="py-24 border-b border-neutral-800/50 relative">
|
||||
<div className="absolute inset-0 bg-[radial-gradient(ellipse_50%_50%_at_50%_50%,rgba(16,185,129,0.03),transparent)]" />
|
||||
<div className="relative max-w-6xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<AnimateOnScroll>
|
||||
<div className="text-center mb-16">
|
||||
<div className="inline-flex items-center gap-2 px-4 py-2 rounded-full border border-neutral-700 bg-neutral-800/30 text-neutral-400 text-sm mb-6">
|
||||
<Link2 className="w-4 h-4" />
|
||||
@@ -500,7 +522,9 @@ export default function HomePage() {
|
||||
First-class support for the most popular AI frameworks. Drop in and start tracing.
|
||||
</p>
|
||||
</div>
|
||||
</AnimateOnScroll>
|
||||
|
||||
<AnimateOnScroll>
|
||||
<div className="grid sm:grid-cols-3 gap-6 max-w-3xl mx-auto">
|
||||
{/* OpenAI */}
|
||||
<div className="group flex flex-col items-center p-8 rounded-2xl border border-neutral-800/50 bg-neutral-900/30 hover:border-emerald-500/20 transition-all duration-300">
|
||||
@@ -538,6 +562,7 @@ export default function HomePage() {
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</AnimateOnScroll>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
@@ -545,6 +570,7 @@ export default function HomePage() {
|
||||
<section className="py-24 border-b border-neutral-800/50 relative">
|
||||
<div className="absolute inset-0 bg-[radial-gradient(ellipse_70%_50%_at_50%_50%,rgba(16,185,129,0.04),transparent)]" />
|
||||
<div className="relative max-w-6xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<AnimateOnScroll>
|
||||
<div className="text-center mb-16">
|
||||
<div className="inline-flex items-center gap-2 px-4 py-2 rounded-full border border-neutral-700 bg-neutral-800/30 text-neutral-400 text-sm mb-6">
|
||||
<Shield className="w-4 h-4" />
|
||||
@@ -557,7 +583,9 @@ export default function HomePage() {
|
||||
No hidden fees. Start free, scale as you grow. Every plan includes the full dashboard experience.
|
||||
</p>
|
||||
</div>
|
||||
</AnimateOnScroll>
|
||||
|
||||
<AnimateOnScroll>
|
||||
<div className="grid md:grid-cols-3 gap-6 max-w-5xl mx-auto">
|
||||
{/* Free Tier */}
|
||||
<div className="relative flex flex-col p-8 rounded-2xl border border-neutral-800/50 bg-neutral-900/30 transition-all duration-300 hover:border-neutral-700">
|
||||
@@ -657,6 +685,7 @@ export default function HomePage() {
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</AnimateOnScroll>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
@@ -689,6 +718,6 @@ export default function HomePage() {
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
</div>
|
||||
</main>
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user