|
|
|
|
@@ -15,6 +15,7 @@ import {
|
|
|
|
|
Bot,
|
|
|
|
|
Star,
|
|
|
|
|
Clipboard,
|
|
|
|
|
Shield,
|
|
|
|
|
} from "lucide-react";
|
|
|
|
|
|
|
|
|
|
export default function HomePage() {
|
|
|
|
|
@@ -32,7 +33,34 @@ export default function HomePage() {
|
|
|
|
|
url: "https://agentlens.vectry.tech",
|
|
|
|
|
description:
|
|
|
|
|
"Open-source agent observability platform that traces AI agent decisions, not just API calls.",
|
|
|
|
|
offers: { "@type": "Offer", price: "0", priceCurrency: "USD" },
|
|
|
|
|
offers: [
|
|
|
|
|
{
|
|
|
|
|
"@type": "Offer",
|
|
|
|
|
name: "Free",
|
|
|
|
|
price: "0",
|
|
|
|
|
priceCurrency: "USD",
|
|
|
|
|
description:
|
|
|
|
|
"20 sessions per day, full dashboard access, 1 API key, community support",
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
"@type": "Offer",
|
|
|
|
|
name: "Starter",
|
|
|
|
|
price: "5",
|
|
|
|
|
priceCurrency: "USD",
|
|
|
|
|
billingIncrement: "P1M",
|
|
|
|
|
description:
|
|
|
|
|
"1,000 sessions per month, full dashboard access, unlimited API keys, email support",
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
"@type": "Offer",
|
|
|
|
|
name: "Pro",
|
|
|
|
|
price: "20",
|
|
|
|
|
priceCurrency: "USD",
|
|
|
|
|
billingIncrement: "P1M",
|
|
|
|
|
description:
|
|
|
|
|
"100,000 sessions per month, full dashboard access, unlimited API keys, priority support",
|
|
|
|
|
},
|
|
|
|
|
],
|
|
|
|
|
featureList: [
|
|
|
|
|
"Agent Decision Tracing",
|
|
|
|
|
"Real-time Dashboard",
|
|
|
|
|
@@ -513,6 +541,125 @@ export default function HomePage() {
|
|
|
|
|
</div>
|
|
|
|
|
</section>
|
|
|
|
|
|
|
|
|
|
{/* Pricing Section */}
|
|
|
|
|
<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-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
|
|
|
|
<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" />
|
|
|
|
|
<span>Pricing</span>
|
|
|
|
|
</div>
|
|
|
|
|
<h2 className="text-3xl sm:text-4xl font-bold mb-4">
|
|
|
|
|
Simple, transparent pricing
|
|
|
|
|
</h2>
|
|
|
|
|
<p className="text-lg text-neutral-400 max-w-2xl mx-auto">
|
|
|
|
|
No hidden fees. Start free, scale as you grow. Every plan includes the full dashboard experience.
|
|
|
|
|
</p>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<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">
|
|
|
|
|
<div className="mb-6">
|
|
|
|
|
<h3 className="text-xl font-semibold mb-1">Free</h3>
|
|
|
|
|
<p className="text-sm text-neutral-500">For experimentation</p>
|
|
|
|
|
</div>
|
|
|
|
|
<div className="mb-6">
|
|
|
|
|
<span className="text-4xl font-bold">$0</span>
|
|
|
|
|
<span className="text-neutral-500 ml-1">/month</span>
|
|
|
|
|
</div>
|
|
|
|
|
<ul className="space-y-3 mb-8 flex-1">
|
|
|
|
|
{[
|
|
|
|
|
"20 sessions per day",
|
|
|
|
|
"Full dashboard access",
|
|
|
|
|
"1 API key",
|
|
|
|
|
"Community support",
|
|
|
|
|
].map((feature, i) => (
|
|
|
|
|
<li key={i} className="flex items-start gap-3">
|
|
|
|
|
<CheckCircle2 className="w-5 h-5 text-neutral-600 flex-shrink-0 mt-0.5" />
|
|
|
|
|
<span className="text-sm text-neutral-400">{feature}</span>
|
|
|
|
|
</li>
|
|
|
|
|
))}
|
|
|
|
|
</ul>
|
|
|
|
|
<a
|
|
|
|
|
href="/register"
|
|
|
|
|
className="block w-full text-center px-6 py-3 rounded-lg border border-neutral-700 hover:border-neutral-600 text-neutral-300 font-medium transition-all duration-200 hover:bg-neutral-800/50"
|
|
|
|
|
>
|
|
|
|
|
Get Started Free
|
|
|
|
|
</a>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
{/* Starter Tier — Highlighted */}
|
|
|
|
|
<div className="relative flex flex-col p-8 rounded-2xl border border-emerald-500/40 bg-gradient-to-b from-emerald-500/[0.07] via-neutral-900/50 to-neutral-900/30 transition-all duration-300 shadow-[0_0_40px_-12px_rgba(16,185,129,0.15)]">
|
|
|
|
|
<div className="absolute -top-3.5 left-1/2 -translate-x-1/2">
|
|
|
|
|
<span className="inline-flex items-center px-3.5 py-1 rounded-full bg-emerald-500 text-neutral-950 text-xs font-bold tracking-wide shadow-lg shadow-emerald-500/25">
|
|
|
|
|
Most Popular
|
|
|
|
|
</span>
|
|
|
|
|
</div>
|
|
|
|
|
<div className="mb-6">
|
|
|
|
|
<h3 className="text-xl font-semibold mb-1">Starter</h3>
|
|
|
|
|
<p className="text-sm text-neutral-500">For small teams</p>
|
|
|
|
|
</div>
|
|
|
|
|
<div className="mb-6">
|
|
|
|
|
<span className="text-4xl font-bold">$5</span>
|
|
|
|
|
<span className="text-neutral-500 ml-1">/month</span>
|
|
|
|
|
</div>
|
|
|
|
|
<ul className="space-y-3 mb-8 flex-1">
|
|
|
|
|
{[
|
|
|
|
|
"1,000 sessions per month",
|
|
|
|
|
"Full dashboard access",
|
|
|
|
|
"Unlimited API keys",
|
|
|
|
|
"Email support",
|
|
|
|
|
].map((feature, i) => (
|
|
|
|
|
<li key={i} className="flex items-start gap-3">
|
|
|
|
|
<CheckCircle2 className="w-5 h-5 text-emerald-500/70 flex-shrink-0 mt-0.5" />
|
|
|
|
|
<span className="text-sm text-neutral-300">{feature}</span>
|
|
|
|
|
</li>
|
|
|
|
|
))}
|
|
|
|
|
</ul>
|
|
|
|
|
<a
|
|
|
|
|
href="/register"
|
|
|
|
|
className="block w-full text-center px-6 py-3 rounded-lg bg-emerald-500 hover:bg-emerald-400 text-neutral-950 font-semibold transition-all duration-200 shadow-lg shadow-emerald-500/25 hover:shadow-emerald-500/40"
|
|
|
|
|
>
|
|
|
|
|
Start Starter Plan
|
|
|
|
|
</a>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
{/* Pro Tier */}
|
|
|
|
|
<div className="relative flex flex-col p-8 rounded-2xl border border-neutral-800/50 bg-gradient-to-b from-neutral-900/50 to-transparent transition-all duration-300 hover:border-neutral-700">
|
|
|
|
|
<div className="mb-6">
|
|
|
|
|
<h3 className="text-xl font-semibold mb-1">Pro</h3>
|
|
|
|
|
<p className="text-sm text-neutral-500">For scaling teams</p>
|
|
|
|
|
</div>
|
|
|
|
|
<div className="mb-6">
|
|
|
|
|
<span className="text-4xl font-bold">$20</span>
|
|
|
|
|
<span className="text-neutral-500 ml-1">/month</span>
|
|
|
|
|
</div>
|
|
|
|
|
<ul className="space-y-3 mb-8 flex-1">
|
|
|
|
|
{[
|
|
|
|
|
"100,000 sessions per month",
|
|
|
|
|
"Full dashboard access",
|
|
|
|
|
"Unlimited API keys",
|
|
|
|
|
"Priority support",
|
|
|
|
|
].map((feature, i) => (
|
|
|
|
|
<li key={i} className="flex items-start gap-3">
|
|
|
|
|
<CheckCircle2 className="w-5 h-5 text-neutral-600 flex-shrink-0 mt-0.5" />
|
|
|
|
|
<span className="text-sm text-neutral-400">{feature}</span>
|
|
|
|
|
</li>
|
|
|
|
|
))}
|
|
|
|
|
</ul>
|
|
|
|
|
<a
|
|
|
|
|
href="/register"
|
|
|
|
|
className="block w-full text-center px-6 py-3 rounded-lg border border-neutral-700 hover:border-emerald-500/40 text-neutral-300 hover:text-emerald-400 font-medium transition-all duration-200 hover:bg-emerald-500/5"
|
|
|
|
|
>
|
|
|
|
|
Start Pro Plan
|
|
|
|
|
</a>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</section>
|
|
|
|
|
|
|
|
|
|
{/* Footer */}
|
|
|
|
|
<footer className="py-12 border-t border-neutral-800/50">
|
|
|
|
|
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
|
|
|
|
|