agentlens/apps/web/src/app/page.tsx

import {
  Activity,
  Brain,
  DollarSign,
  ArrowRight,
  CheckCircle2,
  GitBranch,
  Cpu,
  Zap,
  Terminal,
  Code2,
  Eye,
  Package,
  Link2,
  Bot,
  Star,
  Clipboard,
  Shield,
} from "lucide-react";
import { AnimateOnScroll } from "@/components/animate-on-scroll";

export default function HomePage() {
  return (
    <main id="main-content" className="min-h-screen bg-neutral-950">
      <script
        type="application/ld+json"
        dangerouslySetInnerHTML={{
          __html: JSON.stringify({
            "@context": "https://schema.org",
            "@type": "SoftwareApplication",
            name: "AgentLens",
            applicationCategory: "DeveloperApplication",
            operatingSystem: "Web",
            url: "https://agentlens.vectry.tech",
            description:
              "Open-source agent observability platform that traces AI agent decisions, not just API calls.",
            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",
              "OpenAI Integration",
              "Anthropic Integration",
              "LangChain Integration",
              "OpenCode Plugin",
              "Self-hosting Support",
              "Python SDK",
              "TypeScript SDK",
            ],
          }),
        }}
      />
      <script
        type="application/ld+json"
        dangerouslySetInnerHTML={{
          __html: JSON.stringify({
            "@context": "https://schema.org",
            "@type": "Organization",
            name: "Vectry",
            url: "https://vectry.tech",
            logo: "https://vectry.tech/static/img/logo-icon.png",
            sameAs: ["https://gitea.repi.fun/repi/agentlens"],
          }),
        }}
      />
      {/* Hero Section */}
      <section className="relative overflow-hidden border-b border-neutral-800/50">
        <div className="absolute inset-0 bg-gradient-to-b from-emerald-500/5 via-transparent to-transparent" />
        <div className="absolute inset-0 bg-[radial-gradient(ellipse_80%_50%_at_50%_-20%,rgba(16,185,129,0.1),transparent)]" />
        {/* Subtle grid pattern for depth */}
        <div className="absolute inset-0 bg-[linear-gradient(rgba(255,255,255,0.012)_1px,transparent_1px),linear-gradient(90deg,rgba(255,255,255,0.012)_1px,transparent_1px)] bg-[size:64px_64px]" />

        <div className="relative max-w-6xl mx-auto px-4 sm:px-6 lg:px-8 pt-20 pb-24">
          <div className="text-center">
            {/* Top badges row */}
            <div className="flex flex-wrap items-center justify-center gap-3 mb-8">
              <div className="inline-flex items-center gap-2 px-4 py-2 rounded-full border border-emerald-500/20 bg-emerald-500/5 text-emerald-400 text-sm">
                <Zap className="w-4 h-4" />
                <span>Agent Observability Platform</span>
              </div>
              <a
                href="https://gitea.repi.fun/repi/agentlens"
                target="_blank"
                rel="noopener noreferrer"
                className="inline-flex items-center gap-2 px-4 py-2 rounded-full border border-neutral-700/50 bg-neutral-800/30 text-neutral-400 text-sm hover:border-neutral-600 hover:text-neutral-300 transition-all duration-200"
              >
                <Star className="w-3.5 h-3.5" />
                <span>Open Source</span>
              </a>
            </div>

            <h1 className="text-6xl sm:text-7xl md:text-8xl font-bold tracking-tight mb-6">
              <span className="bg-gradient-to-br from-emerald-400 via-emerald-300 to-emerald-500 bg-clip-text text-transparent">
                AgentLens
              </span>
            </h1>

            <p className="text-xl sm:text-2xl text-neutral-400 max-w-3xl mx-auto mb-8 leading-relaxed">
              See why your AI agents make the decisions they make. <br className="hidden sm:block" />
              Complete observability for multi-agent systems.
            </p>

            {/* pip install snippet */}
            <div className="flex justify-center mb-10">
              <div className="inline-flex items-center gap-3 px-5 py-3 rounded-full bg-neutral-800/80 border border-neutral-700/50 backdrop-blur-sm">
                <Terminal className="w-4 h-4 text-neutral-500 flex-shrink-0" />
                <code className="text-sm sm:text-base font-mono text-emerald-400 tracking-wide select-all">
                  pip install vectry-agentlens
                </code>
                <div className="w-px h-5 bg-neutral-700" />
                <Clipboard className="w-4 h-4 text-neutral-500 flex-shrink-0" />
              </div>
            </div>

            <div className="flex flex-col sm:flex-row gap-4 justify-center items-center">
              <a
                href="/dashboard"
                className="group px-8 py-4 bg-emerald-500 hover:bg-emerald-400 text-neutral-950 font-semibold rounded-lg transition-all duration-200 flex items-center gap-2 shadow-lg shadow-emerald-500/25 hover:shadow-emerald-500/40"
              >
                Get Started
                <ArrowRight className="w-5 h-5 group-hover:translate-x-1 transition-transform" />
              </a>
              <a
                href="https://gitea.repi.fun/repi/agentlens"
                target="_blank"
                rel="noopener noreferrer"
                className="px-8 py-4 border border-neutral-700 hover:border-neutral-600 text-neutral-300 font-medium rounded-lg transition-all duration-200"
              >
                View Source
              </a>
            </div>
          </div>
        </div>
      </section>

      {/* 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
            </h2>
            <p className="text-lg text-neutral-400 max-w-2xl mx-auto">
              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" />
              </div>
              <h3 className="text-xl font-semibold mb-3">Decision Trees</h3>
              <p className="text-neutral-400 leading-relaxed">
                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" />
              </div>
              <h3 className="text-xl font-semibold mb-3">Context Awareness</h3>
              <p className="text-neutral-400 leading-relaxed">
                Monitor context window utilization in real-time. Track what&apos;s being fed into your agents and what&apos;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" />
              </div>
              <h3 className="text-xl font-semibold mb-3">Cost Intelligence</h3>
              <p className="text-neutral-400 leading-relaxed">
                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>

      {/* How it Works Section */}
      <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" />
              <span>Quick Setup</span>
            </div>
            <h2 className="text-3xl sm:text-4xl font-bold mb-4">
              Up and running in 3 steps
            </h2>
            <p className="text-lg text-neutral-400 max-w-2xl mx-auto">
              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">
                  1
                </span>
              </div>
              <div className="w-12 h-12 rounded-xl bg-emerald-500/10 flex items-center justify-center mb-5 mt-2">
                <Package className="w-6 h-6 text-emerald-400" />
              </div>
              <h3 className="text-lg font-semibold mb-2">Install</h3>
              <p className="text-neutral-400 text-sm mb-4">
                One command to add AgentLens to your project.
              </p>
              <div className="px-4 py-2.5 rounded-lg bg-neutral-800/80 border border-neutral-700/50">
                <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">
                  2
                </span>
              </div>
              <div className="w-12 h-12 rounded-xl bg-emerald-500/10 flex items-center justify-center mb-5 mt-2">
                <Code2 className="w-6 h-6 text-emerald-400" />
              </div>
              <h3 className="text-lg font-semibold mb-2">Instrument</h3>
              <p className="text-neutral-400 text-sm mb-4">
                Add the <code className="text-emerald-400/80 font-mono text-xs bg-emerald-500/5 px-1.5 py-0.5 rounded">@trace</code> decorator or use <code className="text-emerald-400/80 font-mono text-xs bg-emerald-500/5 px-1.5 py-0.5 rounded">wrap_openai()</code>.
              </p>
              <div className="px-4 py-2.5 rounded-lg bg-neutral-800/80 border border-neutral-700/50">
                <code className="text-sm font-mono text-emerald-400">@trace</code>
                <span className="text-neutral-600 text-sm font-mono"> / </span>
                <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">
                  3
                </span>
              </div>
              <div className="w-12 h-12 rounded-xl bg-emerald-500/10 flex items-center justify-center mb-5 mt-2">
                <Eye className="w-6 h-6 text-emerald-400" />
              </div>
              <h3 className="text-lg font-semibold mb-2">Observe</h3>
              <p className="text-neutral-400 text-sm mb-4">
                See every decision in the real-time dashboard.
              </p>
              <div className="px-4 py-2.5 rounded-lg bg-neutral-800/80 border border-neutral-700/50">
                <code className="text-sm font-mono text-emerald-400">agentlens.vectry.tech</code>
              </div>
            </div>
            </AnimateOnScroll>
          </div>

          {/* Connecting arrows decoration */}
          <div className="hidden md:flex items-center justify-center mt-10">
            <div className="flex items-center gap-2">
              <div className="w-16 h-px bg-gradient-to-r from-transparent to-emerald-500/30" />
              <ArrowRight className="w-4 h-4 text-emerald-500/40" />
              <div className="w-16 h-px bg-emerald-500/30" />
              <ArrowRight className="w-4 h-4 text-emerald-500/40" />
              <div className="w-16 h-px bg-gradient-to-l from-transparent to-emerald-500/30" />
            </div>
          </div>
        </div>
      </section>

      {/* Code Example 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">
          <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" />
                <span>Python SDK</span>
              </div>

              <h2 className="text-3xl sm:text-4xl font-bold mb-4">
                Instrument your agents in minutes
              </h2>
              <p className="text-lg text-neutral-400 mb-8 leading-relaxed">
                Our Python SDK integrates seamlessly with LangChain, OpenAI, and custom agents. Add observability without changing your architecture.
              </p>

              <ul className="space-y-4">
                {[
                  "Drop-in decorators for automatic tracing",
                  "No code changes required for LangChain",
                  "Async-first design with minimal overhead",
                  "Type-safe with full IDE support",
                ].map((feature, i) => (
                  <li key={i} className="flex items-start gap-3">
                    <div className="w-6 h-6 rounded-full bg-emerald-500/20 flex items-center justify-center flex-shrink-0 mt-0.5">
                      <CheckCircle2 className="w-4 h-4 text-emerald-400" />
                    </div>
                    <span className="text-neutral-300">{feature}</span>
                  </li>
                ))}
              </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">
                <div className="px-4 py-3 border-b border-neutral-800 flex items-center justify-between">
                  <div className="flex items-center gap-2">
                    <div className="flex gap-1.5">
                      <div className="w-3 h-3 rounded-full bg-neutral-700" />
                      <div className="w-3 h-3 rounded-full bg-neutral-700" />
                      <div className="w-3 h-3 rounded-full bg-neutral-700" />
                    </div>
                    <span className="ml-3 text-sm text-neutral-500">decorator_pattern.py</span>
                  </div>
                  <span className="text-xs font-medium px-2.5 py-1 rounded-full bg-emerald-500/10 text-emerald-400 border border-emerald-500/20">
                    @trace
                  </span>
                </div>
                <pre className="p-6 overflow-x-auto text-sm leading-relaxed">
                  <code className="text-neutral-300">
                    <span className="text-purple-400">from</span>{" "}
                    <span className="text-neutral-300">agentlens</span>{" "}
                    <span className="text-purple-400">import</span>{" "}
                    <span className="text-emerald-300">init</span>
                    <span className="text-neutral-300">,</span>{" "}
                    <span className="text-emerald-300">trace</span>
                    {"\n"}
                    {"\n"}
                    <span className="text-neutral-500"># Initialize AgentLens</span>
                    {"\n"}
                    <span className="text-emerald-300">init</span>
                    <span className="text-neutral-300">(</span>
                    {"\n"}
                    {"    "}
                    <span className="text-orange-300">api_key</span>
                    <span className="text-neutral-300">=</span>
                    <span className="text-emerald-300">&quot;your-api-key&quot;</span>
                    <span className="text-neutral-300">,</span>
                    {"\n"}
                    {"    "}
                    <span className="text-orange-300">endpoint</span>
                    <span className="text-neutral-300">=</span>
                    <span className="text-emerald-300">&quot;https://agentlens.vectry.tech&quot;</span>
                    {"\n"}
                    <span className="text-neutral-300">)</span>
                    {"\n"}
                    {"\n"}
                    <span className="text-neutral-500"># Trace your agent function</span>
                    {"\n"}
                    <span className="text-purple-400">@trace</span>
                    <span className="text-neutral-300">(</span>
                    <span className="text-orange-300">name</span>
                    <span className="text-neutral-300">=</span>
                    <span className="text-emerald-300">&quot;research-agent&quot;</span>
                    <span className="text-neutral-300">)</span>
                    {"\n"}
                    <span className="text-purple-400">async</span>{" "}
                    <span className="text-purple-400">def</span>{" "}
                    <span className="text-emerald-300">research</span>
                    <span className="text-neutral-300">(</span>
                    <span className="text-blue-300">topic</span>
                    <span className="text-neutral-300">:</span>{" "}
                    <span className="text-blue-300">str</span>
                    <span className="text-neutral-300">):</span>
                    {"\n"}
                    {"    "}
                    <span className="text-neutral-500"># Your agent logic here</span>
                    {"\n"}
                    {"    "}
                    <span className="text-purple-400">return</span>{" "}
                    <span className="text-emerald-300">f&quot;Researching: {"{topic}"}&quot;</span>
                  </code>
                </pre>
              </div>

              {/* OpenAI Wrapper Pattern */}
              <div className="rounded-xl overflow-hidden border border-neutral-800 bg-neutral-900/50 backdrop-blur-sm">
                <div className="px-4 py-3 border-b border-neutral-800 flex items-center justify-between">
                  <div className="flex items-center gap-2">
                    <div className="flex gap-1.5">
                      <div className="w-3 h-3 rounded-full bg-neutral-700" />
                      <div className="w-3 h-3 rounded-full bg-neutral-700" />
                      <div className="w-3 h-3 rounded-full bg-neutral-700" />
                    </div>
                    <span className="ml-3 text-sm text-neutral-500">openai_wrapper.py</span>
                  </div>
                  <span className="text-xs font-medium px-2.5 py-1 rounded-full bg-purple-500/10 text-purple-400 border border-purple-500/20">
                    wrap_openai
                  </span>
                </div>
                <pre className="p-6 overflow-x-auto text-sm leading-relaxed">
                  <code className="text-neutral-300">
                    <span className="text-purple-400">from</span>{" "}
                    <span className="text-neutral-300">agentlens.integrations.openai</span>{" "}
                    <span className="text-purple-400">import</span>{" "}
                    <span className="text-emerald-300">wrap_openai</span>
                    {"\n"}
                    <span className="text-purple-400">import</span>{" "}
                    <span className="text-neutral-300">openai</span>
                    {"\n"}
                    {"\n"}
                    <span className="text-neutral-500"># Wrap the OpenAI client</span>
                    {"\n"}
                    <span className="text-neutral-300">client</span>{" "}
                    <span className="text-neutral-300">=</span>{" "}
                    <span className="text-neutral-300">openai.</span>
                    <span className="text-emerald-300">OpenAI</span>
                    <span className="text-neutral-300">()</span>
                    {"\n"}
                    <span className="text-neutral-300">client</span>{" "}
                    <span className="text-neutral-300">=</span>{" "}
                    <span className="text-emerald-300">wrap_openai</span>
                    <span className="text-neutral-300">(client)</span>
                    {"\n"}
                    {"\n"}
                    <span className="text-neutral-500"># Use as normal - traces automatically</span>
                    {"\n"}
                    <span className="text-neutral-300">response</span>{" "}
                    <span className="text-neutral-300">=</span>{" "}
                    <span className="text-neutral-300">client.chat.completions.</span>
                    <span className="text-emerald-300">create</span>
                    <span className="text-neutral-300">(</span>
                    {"\n"}
                    {"    "}
                    <span className="text-orange-300">model</span>
                    <span className="text-neutral-300">=</span>
                    <span className="text-emerald-300">&quot;gpt-4&quot;</span>
                    <span className="text-neutral-300">,</span>
                    {"\n"}
                    {"    "}
                    <span className="text-orange-300">messages</span>
                    <span className="text-neutral-300">=</span>
                    <span className="text-neutral-300">[</span>
                    <span className="text-neutral-300">{"{"}</span>
                    <span className="text-emerald-300">&quot;role&quot;</span>
                    <span className="text-neutral-300">:</span>{" "}
                    <span className="text-emerald-300">&quot;user&quot;</span>
                    <span className="text-neutral-300">,</span>{" "}
                    <span className="text-emerald-300">&quot;content&quot;</span>
                    <span className="text-neutral-300">:</span>{" "}
                    <span className="text-emerald-300">&quot;Hello!&quot;</span>
                    <span className="text-neutral-300">{"}"}</span>
                    <span className="text-neutral-300">]</span>
                    {"\n"}
                    <span className="text-neutral-300">)</span>
                  </code>
                </pre>
              </div>
            </div>
            </AnimateOnScroll>
          </div>
        </div>
      </section>

      {/* Integrations Section */}
      <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" />
              <span>Integrations</span>
            </div>
            <h2 className="text-3xl sm:text-4xl font-bold mb-4">
              Works with your stack
            </h2>
            <p className="text-lg text-neutral-400 max-w-2xl mx-auto">
              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">
              <div className="w-16 h-16 rounded-2xl bg-neutral-800/80 border border-neutral-700/50 flex items-center justify-center mb-5 group-hover:border-emerald-500/30 transition-colors duration-300">
                <Cpu className="w-8 h-8 text-neutral-300 group-hover:text-emerald-400 transition-colors duration-300" />
              </div>
              <h3 className="text-lg font-semibold mb-1">OpenAI</h3>
              <p className="text-sm text-neutral-500">GPT-4, GPT-3.5, o1</p>
              <span className="mt-3 text-xs font-medium px-3 py-1 rounded-full bg-emerald-500/10 text-emerald-400 border border-emerald-500/20">
                wrap_openai()
              </span>
            </div>

            {/* LangChain */}
            <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">
              <div className="w-16 h-16 rounded-2xl bg-neutral-800/80 border border-neutral-700/50 flex items-center justify-center mb-5 group-hover:border-emerald-500/30 transition-colors duration-300">
                <GitBranch className="w-8 h-8 text-neutral-300 group-hover:text-emerald-400 transition-colors duration-300" />
              </div>
              <h3 className="text-lg font-semibold mb-1">LangChain</h3>
              <p className="text-sm text-neutral-500">Chains, Agents, Tools</p>
              <span className="mt-3 text-xs font-medium px-3 py-1 rounded-full bg-emerald-500/10 text-emerald-400 border border-emerald-500/20">
                Auto-instrumented
              </span>
            </div>

            {/* Custom Agents */}
            <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">
              <div className="w-16 h-16 rounded-2xl bg-neutral-800/80 border border-neutral-700/50 flex items-center justify-center mb-5 group-hover:border-emerald-500/30 transition-colors duration-300">
                <Bot className="w-8 h-8 text-neutral-300 group-hover:text-emerald-400 transition-colors duration-300" />
              </div>
              <h3 className="text-lg font-semibold mb-1">Custom Agents</h3>
              <p className="text-sm text-neutral-500">Any Python agent</p>
              <span className="mt-3 text-xs font-medium px-3 py-1 rounded-full bg-emerald-500/10 text-emerald-400 border border-emerald-500/20">
                @trace decorator
              </span>
            </div>
          </div>
          </AnimateOnScroll>
        </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-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" />
              <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>
          </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">
              <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>
          </AnimateOnScroll>
        </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">
          <div className="flex flex-col md:flex-row justify-between items-center gap-6">
            <div className="flex items-center gap-2">
              <div className="w-8 h-8 rounded bg-gradient-to-br from-emerald-400 to-emerald-600 flex items-center justify-center">
                <Activity className="w-5 h-5 text-white" />
              </div>
              <span className="font-semibold text-lg">AgentLens</span>
            </div>

            <div className="flex items-center gap-8 text-sm text-neutral-400">
              <a href="https://vectry.tech" target="_blank" rel="noopener noreferrer" className="hover:text-emerald-400 transition-colors">
                Built by Vectry
              </a>
              <a href="https://gitea.repi.fun/repi/agentlens" target="_blank" rel="noopener noreferrer" className="hover:text-emerald-400 transition-colors">
                Source Code
              </a>
              <a href="https://agentlens.vectry.tech/docs" target="_blank" rel="noopener noreferrer" className="hover:text-emerald-400 transition-colors">
                Documentation
              </a>
            </div>

            <div className="text-sm text-neutral-500">
              MIT License &copy; 2026 Vectry
            </div>
          </div>
        </div>
      </footer>
    </main>
  );
}