@nordsym/apiclaw 1.0.0 → 1.1.0

package/landing/src/app/page.tsx

@@ -1,258 +1,442 @@
 "use client";
 
-import { useState, useEffect } from "react";
 import { 
-  MessageSquare, Mail, Search, Cpu, Volume2, 
   ArrowRight, Zap, Shield, Terminal, ExternalLink,
-  Github, Check, Twitter, Quote, Sparkles, Code2, Wallet, Plus,
-  Sun, Moon
+  Github, Check, Twitter, Sparkles, Code2, Link, Sun, Moon,
+  Bot, Building2, Search, Rocket, Clock, Globe, Database,
+  Play, ChevronRight, Star, Users, Cpu, Activity
 } from "lucide-react";
+import statsData from "@/lib/stats.json";
+import { useState, useEffect, useRef } from "react";
+
+const stats = [
+  { number: statsData.apiCount.toLocaleString(), label: "APIs Indexed", live: true },
+  { number: statsData.categoryCount.toString(), label: "Categories", live: true },
+  { number: "<200 ms", label: "Response Time", live: false },
+  { number: "24/7", label: "Live Registry", live: false },
+];
 
-const apis = [
-  { name: "46elks", category: "SMS", flag: "🇸🇪", color: "text-blue-400" },
-  { name: "Resend", category: "Email", icon: Mail, color: "text-purple-400" },
-  { name: "Brave Search", category: "Search", icon: Search, color: "text-orange-400" },
-  { name: "OpenRouter", category: "LLM", icon: Cpu, color: "text-cyan-400" },
-  { name: "ElevenLabs", category: "TTS", icon: Volume2, color: "text-pink-400" },
+const trustedBy = [
+  "Claude Agents",
+  "GPT Builders", 
+  "AutoGPT",
+  "LangChain",
+  "CrewAI",
+  "Indie Hackers",
 ];
 
-const testimonials = [
-  {
-    quote: "Found 14 SMS providers in 0.2s. Picked 46elks. Sent the message. Done.",
-    author: "Claude 3.5",
-    handle: "Anthropic agent",
-    avatar: "🤖"
-  },
+const howItWorks = [
   {
-    quote: "My agent used to ask me for API keys. Now it just... gets them. I almost miss being needed.",
-    author: "ML Engineer",
-    handle: "YC W24 startup",
-    avatar: "🧑‍💻"
+    step: "1",
+    title: "Agent Asks",
+    description: "Your agent queries APIClaw for a capability—not a product name.",
+    icon: Search,
+    codeJsx: (
+      <>
+        <span className="text-gray-500">{"// Agent needs to send transactional email"}</span>{"\n"}
+        <span className="text-blue-400">mcp</span>.<span className="text-yellow-400">call</span>(<span className="text-green-400">"apiclaw"</span>, {"{"}{"\n"}
+        {"  "}<span className="text-red-400">capability</span>: <span className="text-green-400">"email"</span>,{"\n"}
+        {"  "}<span className="text-red-400">type</span>: <span className="text-green-400">"transactional"</span>,{"\n"}
+        {"  "}<span className="text-red-400">maxPrice</span>: <span className="text-green-400">"$0.001/email"</span>{"\n"}
+        {"}"})
+      </>
+    ),
   },
   {
-    quote: "Searched 'weather EU compliant'. Got 3 options with pricing. Picked one. Shipped.",
-    author: "GPT-4o",
-    handle: "OpenAI agent",
-    avatar: "🧠"
+    step: "2",
+    title: "APIClaw Matches",
+    description: `We search ${statsData.apiCount.toLocaleString()}+ APIs and return ranked options with full metadata.`,
+    icon: Database,
+    codeJsx: (
+      <>
+        <span className="text-gray-500">{"// Structured response"}</span>{"\n"}
+        {"{"}{"\n"}
+        {"  "}<span className="text-red-400">"matches"</span>: [{"\n"}
+        {"    "}{"{ "}<span className="text-red-400">"name"</span>: <span className="text-green-400">"Resend"</span>, <span className="text-red-400">"price"</span>: <span className="text-yellow-400">"$0.0005"</span>{" },"}{"\n"}
+        {"    "}{"{ "}<span className="text-red-400">"name"</span>: <span className="text-green-400">"SendGrid"</span>, <span className="text-red-400">"price"</span>: <span className="text-yellow-400">"$0.001"</span>{" }"}{"\n"}
+        {"  "}],{"\n"}
+        {"  "}<span className="text-red-400">"bestMatch"</span>: <span className="text-green-400">"Resend"</span>{"\n"}
+        {"}"}
+      </>
+    ),
   },
   {
-    quote: "We removed 400 lines of API discovery code. APIClaw just handles it.",
-    author: "Infra Lead",
-    handle: "Series B fintech",
-    avatar: "🚀"
+    step: "3",
+    title: "Agent Integrates",
+    description: "Full specs, auth details, endpoints—everything to start building.",
+    icon: Rocket,
+    codeJsx: (
+      <>
+        <span className="text-gray-500">{"// Get full API spec"}</span>{"\n"}
+        <span className="text-purple-400">const</span> <span className="text-blue-400">spec</span> = <span className="text-purple-400">await</span> <span className="text-blue-400">mcp</span>.<span className="text-yellow-400">call</span>(<span className="text-green-400">"apiclaw"</span>, {"{"}{"\n"}
+        {"  "}<span className="text-red-400">action</span>: <span className="text-green-400">"get_spec"</span>,{"\n"}
+        {"  "}<span className="text-red-400">api</span>: <span className="text-green-400">"Resend"</span>{"\n"}
+        {"}"}){"\n"}
+        <span className="text-gray-500">{"// → docs, auth, endpoints, examples"}</span>
+      </>
+    ),
   },
 ];
 
-const features = [
+const agentBenefits = [
   {
     icon: Search,
-    title: "Discovery",
-    description: "Agents query capabilities, not product names. 'I need EU SMS' returns ranked options."
+    title: "Semantic Search",
+    description: "Query by capability, not keywords. 'I need GDPR-compliant email' returns perfect matches.",
   },
   {
-    icon: Code2,
-    title: "Evaluation",
-    description: "Pricing, rate limits, regions, compliance—all in structured, agent-readable format."
+    icon: Zap,
+    title: "Instant Results",
+    description: "Sub-200ms responses. Your agent doesn't wait, it acts.",
   },
   {
-    icon: Wallet,
-    title: "Purchase",
-    description: "Instant credential provisioning via USDC on Base. No signups. No dashboards."
+    icon: Database,
+    title: "Structured Data",
+    description: "JSON responses with pricing, limits, regions, auth—everything an agent needs.",
   },
   {
-    icon: Sparkles,
-    title: "Integration",
-    description: "MCP-native. Works with Claude, GPT, and any agent that speaks the protocol."
+    icon: Shield,
+    title: "MCP Native",
+    description: "Built for Model Context Protocol. Works with Claude, GPT, and any compatible agent.",
   },
 ];
 
-const steps = [
+const providerBenefits = [
   {
-    step: "1",
-    title: "Agent asks",
-    description: '"I need to send SMS"',
-    code: `agent.call("apiclaw", {
-  capability: "sms",
-  region: "EU"
-})`,
+    icon: Users,
+    title: "Reach AI Agents",
+    description: "Get discovered by thousands of autonomous agents looking for APIs like yours.",
   },
   {
-    step: "2",
-    title: "APIClaw returns",
-    description: "Ranked options with pricing",
-    code: `{
-  "apis": [
-    { "name": "46elks", "price": "$0.07" },
-    { "name": "twilio", "price": "$0.09" }
-  ]
-}`,
+    icon: Globe,
+    title: "Global Visibility",
+    description: "Your API appears in searches across all MCP-compatible platforms.",
   },
   {
-    step: "3",
-    title: "Agent purchases",
-    description: "Instant credentials via USDC",
-    code: `agent.purchase({
-  api: "46elks",
-  payment: "usdc-base",
-  amount: 100
-})`,
+    icon: Cpu,
+    title: "Agent-Optimized Listing",
+    description: "We structure your API data so agents can understand and integrate it instantly.",
   },
   {
-    step: "4",
-    title: "Done",
-    description: "API ready to use",
-    code: `{
-  "status": "active",
-  "credentials": { ... },
-  "ready": true
-}`,
+    icon: Clock,
+    title: "Zero Maintenance",
+    description: "List once, we keep it updated. No ongoing work required.",
   },
 ];
 
+const terminalLines = [
+  { type: "prompt", text: "npx @nordsym/apiclaw" },
+  { type: "output", text: "", delay: 500 },
+  { type: "output", text: "🦞 APIClaw v1.0.0", delay: 100 },
+  { type: "output", text: "", delay: 50 },
+  { type: "success", text: "✓ Connecting to registry...", delay: 300 },
+  { type: "success", text: `✓ ${statsData.apiCount.toLocaleString()} APIs loaded`, delay: 200 },
+  { type: "success", text: "✓ MCP server ready", delay: 200 },
+  { type: "output", text: "", delay: 100 },
+  { type: "accent", text: "→ Listening on stdio for agent requests", delay: 300 },
+  { type: "accent", text: "→ Add to Claude Desktop: Settings → MCP → Add Server", delay: 0 },
+];
+
 export default function Home() {
   const [isDark, setIsDark] = useState(true);
-  const [stats, setStats] = useState({ apis: 1490, categories: 52 });
+  const [terminalOutput, setTerminalOutput] = useState<typeof terminalLines>([]);
+  const [isTyping, setIsTyping] = useState(true);
+  const [currentLineIndex, setCurrentLineIndex] = useState(0);
+  const [activeSection, setActiveSection] = useState<string>("");
+  const terminalRef = useRef<HTMLDivElement>(null);
 
+  // Scroll-based active section detection using Intersection Observer
   useEffect(() => {
-    document.documentElement.classList.toggle('light', !isDark);
-  }, [isDark]);
+    const sections = ["how-it-works", "for-agents", "for-providers", "pricing"];
+    
+    const observerOptions = {
+      root: null,
+      rootMargin: "-20% 0px -60% 0px", // Trigger when section is in upper portion of viewport
+      threshold: 0,
+    };
+
+    const observerCallback = (entries: IntersectionObserverEntry[]) => {
+      entries.forEach((entry) => {
+        if (entry.isIntersecting) {
+          setActiveSection(entry.target.id);
+        }
+      });
+    };
+
+    const observer = new IntersectionObserver(observerCallback, observerOptions);
+
+    sections.forEach((sectionId) => {
+      const element = document.getElementById(sectionId);
+      if (element) {
+        observer.observe(element);
+      }
+    });
+
+    return () => observer.disconnect();
+  }, []);
 
   useEffect(() => {
-    fetch('/api/stats')
-      .then(res => res.json())
-      .then(data => setStats(data))
-      .catch(() => {});
-    
-    // Log page view
-    fetch('/api/log', {
-      method: 'POST',
-      headers: { 'Content-Type': 'application/json' },
-      body: JSON.stringify({ event: 'page_view', data: { page: 'landing' } })
-    }).catch(() => {});
+    const saved = localStorage.getItem('theme');
+    const prefersDark = saved ? saved === 'dark' : true;
+    setIsDark(prefersDark);
+    document.documentElement.classList.toggle('dark', prefersDark);
   }, []);
 
+  // Terminal animation with auto-loop
+  useEffect(() => {
+    if (currentLineIndex >= terminalLines.length) {
+      setIsTyping(false);
+      // Auto-restart after 3 seconds
+      const restartTimeout = setTimeout(() => {
+        setTerminalOutput([]);
+        setCurrentLineIndex(0);
+        setIsTyping(true);
+      }, 3000);
+      return () => clearTimeout(restartTimeout);
+    }
+
+    const line = terminalLines[currentLineIndex];
+    const timeout = setTimeout(() => {
+      setTerminalOutput(prev => [...prev, line]);
+      setCurrentLineIndex(prev => prev + 1);
+    }, line.delay);
+
+    return () => clearTimeout(timeout);
+  }, [currentLineIndex]);
+
+  const toggleTheme = () => {
+    const newTheme = !isDark;
+    setIsDark(newTheme);
+    document.documentElement.classList.toggle('dark', newTheme);
+    localStorage.setItem('theme', newTheme ? 'dark' : 'light');
+  };
+
+  const restartTerminal = () => {
+    setTerminalOutput([]);
+    setCurrentLineIndex(0);
+    setIsTyping(true);
+  };
+
   return (
-    <main className="min-h-screen">
+    <main className="min-h-screen overflow-x-hidden">
       {/* Header */}
-      <header className="fixed top-0 w-full z-50 bg-background/90 backdrop-blur-xl border-b border-border-subtle">
+      <header className="fixed top-0 w-full z-50 bg-background/80 backdrop-blur-xl border-b border-border-subtle">
         <div className="max-w-6xl mx-auto px-6 py-4 flex items-center justify-between">
           <div className="flex items-center gap-3">
-            <div className="w-9 h-9 rounded-xl bg-accent/20 flex items-center justify-center">
-              <span className="text-xl">🦞</span>
+            <div className="w-10 h-10 rounded-xl bg-accent/20 flex items-center justify-center text-2xl logo-float">
+              🦞
             </div>
-            <span className="font-bold text-lg tracking-tight">APIClaw</span>
-            <span className="px-2 py-0.5 text-xs font-semibold bg-accent/20 text-accent rounded-full">Beta</span>
+            <span className="font-bold text-xl tracking-tight">APIClaw</span>
           </div>
           <nav className="hidden md:flex items-center gap-8 text-sm text-text-muted">
-            <a href="#features" className="hover:text-text-primary transition">Features</a>
-            <a href="#quick-start" className="hover:text-text-primary transition">Quick Start</a>
-            <a href="#apis" className="hover:text-text-primary transition">APIs</a>
-            <a href="#pricing" className="hover:text-text-primary transition">Pricing</a>
+            <a 
+              href="#how-it-works" 
+              className={`transition ${activeSection === "how-it-works" ? "text-accent font-medium" : "hover:text-text-primary"}`}
+            >
+              How It Works
+            </a>
+            <a 
+              href="#for-agents" 
+              className={`transition ${activeSection === "for-agents" ? "text-accent font-medium" : "hover:text-text-primary"}`}
+            >
+              For Agents
+            </a>
+            <a 
+              href="#for-providers" 
+              className={`transition ${activeSection === "for-providers" ? "text-accent font-medium" : "hover:text-text-primary"}`}
+            >
+              For Providers
+            </a>
+            <a 
+              href="#pricing" 
+              className={`transition ${activeSection === "pricing" ? "text-accent font-medium" : "hover:text-text-primary"}`}
+            >
+              Pricing
+            </a>
           </nav>
-          <button
-            onClick={() => setIsDark(!isDark)}
-            className="w-9 h-9 rounded-lg bg-surface-elevated border border-border flex items-center justify-center text-text-muted hover:text-text-primary transition"
-            aria-label="Toggle theme"
-          >
-            {isDark ? <Sun className="w-4 h-4" /> : <Moon className="w-4 h-4" />}
-          </button>
-          <a
-            href="https://github.com/nordsym/apiclaw"
-            target="_blank"
-            rel="noopener noreferrer"
-            className="btn-secondary !py-2 !px-4 text-sm"
-          >
-            <Github className="w-4 h-4" />
-            <span>GitHub</span>
-          </a>
-        </div>
-      </header>
-
-      {/* Hero */}
-      <section className="pt-36 pb-24 px-6">
-        <div className="max-w-4xl mx-auto text-center">
-          <div className="badge mb-8">
-            <Terminal className="w-4 h-4" />
-            <span>The API layer for autonomous agents</span>
-          </div>
-          
-          <h1 className="text-5xl md:text-7xl font-extrabold mb-6 leading-[1.1] tracking-tighter">
-            <span className="gradient-text">APIs for Agents</span>
-          </h1>
-          
-          <p className="text-xl md:text-2xl text-text-secondary mb-4 max-w-2xl mx-auto leading-relaxed">
-            Agents discover, evaluate, and connect to APIs directly.
-          </p>
-          <p className="text-lg text-text-muted mb-12">
-            No dashboards. No signups. Just APIs.
-          </p>
-          
-          <div className="flex flex-col sm:flex-row items-center justify-center gap-4 mb-8">
+          <div className="flex items-center gap-3">
+            <button
+              onClick={toggleTheme}
+              className="p-2.5 rounded-lg hover:bg-surface transition"
+              aria-label="Toggle theme"
+            >
+              {isDark ? <Sun className="w-5 h-5" /> : <Moon className="w-5 h-5" />}
+            </button>
             <a
               href="https://github.com/nordsym/apiclaw"
               target="_blank"
               rel="noopener noreferrer"
-              className="btn-primary glow"
+              className="btn-ghost hidden sm:flex"
             >
-              <Github className="w-5 h-5" />
-              View on GitHub
+              <Github className="w-4 h-4" />
+              <span>GitHub</span>
+            </a>
+            <a
+              href="#how-it-works"
+              className="btn-primary !py-2 !px-3 text-xs hidden md:flex"
+            >
+              Start
             </a>
-            <button className="btn-secondary">
-              <span>Add to Claude</span>
-              <ArrowRight className="w-4 h-4" />
-            </button>
           </div>
-
-          <p className="text-sm text-text-muted">
-            Apps are dead. API-first. Agent-native.
-          </p>
         </div>
-      </section>
+      </header>
 
-      {/* Live Stats */}
-      <section className="pb-20 px-6">
-        <div className="max-w-4xl mx-auto">
-          <div className="flex flex-wrap items-center justify-center gap-6">
-            <div className="flex items-center gap-2">
-              <span className="text-3xl font-bold text-accent">{stats.apis.toLocaleString()}+</span>
-              <span className="text-text-muted">APIs</span>
-            </div>
-            <div className="w-px h-8 bg-border hidden sm:block" />
-            <div className="flex items-center gap-2">
-              <span className="text-3xl font-bold">{stats.categories}</span>
-              <span className="text-text-muted">Categories</span>
+      {/* Hero */}
+      <section className="relative pt-32 pb-20 px-6 bg-grid">
+        <div className="hero-glow" />
+        
+        <div className="max-w-6xl mx-auto relative z-10">
+          <div className="grid lg:grid-cols-2 gap-12 lg:gap-16 items-center">
+            {/* Left: Copy */}
+            <div className="text-center lg:text-left">
+              <div className="badge badge-live mb-6 inline-flex">
+                <span className="flex items-center gap-2"><span className="w-2 h-2 bg-green-500 rounded-full animate-pulse" />Live • {statsData.apiCount.toLocaleString()} APIs</span>
+              </div>
+              
+              <h1 className="text-5xl md:text-6xl lg:text-7xl font-black mb-6 leading-[1.05] tracking-tighter">
+                <span className="gradient-text">The API Layer</span>
+                <br />
+                <span className="text-text-primary">for Autonomous Agents</span>
+              </h1>
+              
+              <p className="text-xl md:text-2xl text-text-secondary mb-4 leading-relaxed max-w-xl mx-auto lg:mx-0">
+                Find, evaluate, and integrate APIs in milliseconds.
+              </p>
+              
+              <p className="text-text-muted mb-8 max-w-lg mx-auto lg:mx-0">
+                Structured data. Ranked results. Sub-200ms responses.
+                Built for the agentic era.
+              </p>
+              
+              <div className="flex flex-col sm:flex-row items-center justify-center lg:justify-start gap-4 mb-8">
+                <button
+                  onClick={() => {
+                    navigator.clipboard.writeText('npx @nordsym/apiclaw');
+                    alert('Copied: npx @nordsym/apiclaw');
+                  }}
+                  className="btn-primary glow-pulse"
+                >
+                  <Terminal className="w-5 h-5" />
+                  <code className="font-mono">npx @nordsym/apiclaw</code>
+                  <span className="text-xs opacity-70">copy</span>
+                </button>
+                <a
+                  href="https://github.com/nordsym/apiclaw"
+                  target="_blank"
+                  rel="noopener noreferrer"
+                  className="btn-secondary"
+                >
+                  <Github className="w-5 h-5" />
+                  View on GitHub
+                </a>
+              </div>
+
+              {/* Trusted by */}
+              <div className="pt-8 border-t border-border">
+                <p className="text-sm text-text-muted mb-4">Trusted by agents worldwide</p>
+                <div className="flex flex-wrap items-center justify-center lg:justify-start gap-3">
+                  {trustedBy.map((name, i) => (
+                    <span key={i} className="text-sm text-text-secondary px-3 py-1.5 rounded-lg bg-surface border border-border">
+                      {name}
+                    </span>
+                  ))}
+                </div>
+              </div>
             </div>
-            <div className="w-px h-8 bg-border hidden sm:block" />
-            <div className="flex items-center gap-2">
-              <span className="text-3xl font-bold text-green-500">Live</span>
-              <span className="text-text-muted">Registry</span>
+
+            {/* Right: Terminal */}
+            <div className="relative">
+              <div className="terminal glow" ref={terminalRef}>
+                <div className="terminal-header">
+                  <div className="terminal-dot terminal-dot-red" />
+                  <div className="terminal-dot terminal-dot-yellow" />
+                  <div className="terminal-dot terminal-dot-green" />
+                  <span className="terminal-title">apiclaw — zsh</span>
+                </div>
+                <div className="terminal-body">
+                  {terminalOutput.map((line, i) => (
+                    <div key={i} className={`${line.text ? 'mb-1' : 'mb-2'}`}>
+                      {line.type === 'prompt' && (
+                        <>
+                          <span className="terminal-prompt">$ </span>
+                          <span className="terminal-command">{line.text}</span>
+                        </>
+                      )}
+                      {line.type === 'output' && (
+                        <span className="terminal-output">{line.text}</span>
+                      )}
+                      {line.type === 'success' && (
+                        <span className="terminal-success">{line.text}</span>
+                      )}
+                      {line.type === 'accent' && (
+                        <span className="terminal-accent">{line.text}</span>
+                      )}
+                    </div>
+                  ))}
+                  {isTyping && <span className="typing-cursor" />}
+                </div>
+              </div>
+              
+{/* Auto-loops - no replay button needed */}
             </div>
           </div>
         </div>
       </section>
 
+      {/* Stats */}
+      <section className="py-16 px-6 bg-surface/50">
+        <div className="max-w-5xl mx-auto">
+          <div className="grid grid-cols-2 md:grid-cols-4 gap-6">
+            {stats.map((stat, i) => (
+              <div key={i} className="stat-card relative">
+                {stat.live && (
+                  <div className="absolute top-2 right-2 flex items-center gap-1">
+                    <span className="w-2 h-2 bg-green-500 rounded-full animate-pulse" />
+                    <span className="text-[10px] text-green-500 font-medium">LIVE</span>
+                  </div>
+                )}
+                <div className="stat-number">{stat.number}</div>
+                <div className="stat-label">{stat.label}</div>
+              </div>
+            ))}
+          </div>
+        </div>
+      </section>
+
       <div className="divider" />
 
-      {/* What People Say */}
-      <section className="py-24 px-6">
+      {/* How It Works */}
+      <section id="how-it-works" className="py-24 px-6">
         <div className="max-w-6xl mx-auto">
           <div className="text-center mb-16">
-            <span className="section-label">TESTIMONIALS</span>
-            <h2 className="text-3xl md:text-4xl font-bold mt-4 tracking-tight">What People Say</h2>
+            <span className="section-label">HOW IT WORKS</span>
+            <h2 className="text-3xl md:text-5xl font-bold mt-4 tracking-tight">
+              Three steps. That's it.
+            </h2>
+            <p className="text-text-secondary text-lg mt-4 max-w-2xl mx-auto">
+              Your agent asks for a capability, APIClaw finds the best API, 
+              and returns everything needed to integrate.
+            </p>
           </div>
 
-          <div className="grid md:grid-cols-3 gap-6">
-            {testimonials.map((t, i) => (
-              <div key={i} className="testimonial-card rounded-2xl p-6">
-                <Quote className="w-8 h-8 text-accent/30 mb-4" />
-                <p className="text-text-secondary mb-6 leading-relaxed">"{t.quote}"</p>
-                <div className="flex items-center gap-3">
-                  <div className="w-10 h-10 rounded-full bg-surface flex items-center justify-center text-xl">
-                    {t.avatar}
-                  </div>
+          <div className="grid md:grid-cols-3 gap-8">
+            {howItWorks.map((step, i) => (
+              <div key={i} className="feature-card">
+                <div className="flex items-center gap-4 mb-6">
+                  <div className="step-indicator">{step.step}</div>
                   <div>
-                    <p className="font-medium text-sm">{t.author}</p>
-                    <p className="text-text-muted text-sm">{t.handle}</p>
+                    <h3 className="font-bold text-xl">{step.title}</h3>
+                  </div>
+                </div>
+                <p className="text-text-secondary mb-6 leading-relaxed">
+                  {step.description}
+                </p>
+                <div className="code-preview">
+                  <div className="code-preview-header">
+                    example.ts
+                  </div>
+                  <div className="code-preview-body">
+                    <pre className="text-sm whitespace-pre-wrap">{step.codeJsx}</pre>
                   </div>
                 </div>
               </div>
@@ -263,411 +447,324 @@ export default function Home() {
 
       <div className="divider" />
 
-      {/* Quick Start */}
-      <section id="quick-start" className="py-24 px-6">
-        <div className="max-w-4xl mx-auto">
-          <div className="text-center mb-16">
-            <span className="section-label">QUICK START</span>
-            <h2 className="text-3xl md:text-4xl font-bold mt-4 tracking-tight">Up and running in seconds</h2>
-          </div>
-
-          <div className="terminal glow-subtle">
-            <div className="terminal-header">
-              <div className="terminal-dot terminal-dot-red" />
-              <div className="terminal-dot terminal-dot-yellow" />
-              <div className="terminal-dot terminal-dot-green" />
-            </div>
-            <div className="terminal-body">
-              <div className="mb-4">
-                <span className="terminal-prompt">$ </span>
-                <span className="terminal-command">npx @nordsym/apiclaw init</span>
+      {/* For Agents */}
+      <section id="for-agents" className="py-24 px-6 bg-surface/30">
+        <div className="max-w-6xl mx-auto">
+          <div className="grid lg:grid-cols-2 gap-16 items-center">
+            <div>
+              <div className="inline-flex items-center gap-2 px-4 py-2 rounded-full bg-accent/10 border border-accent/20 text-accent text-sm font-medium mb-6">
+                <Bot className="w-4 h-4" />
+                For AI Agents
               </div>
-              <div className="terminal-output mb-4">
-                ✓ APIClaw MCP server installed<br />
-                ✓ Configuration file created<br />
-                ✓ Ready to connect to Claude Desktop
+              
+              <h2 className="text-3xl md:text-4xl font-bold tracking-tight mb-6">
+                Your agent's API encyclopedia
+              </h2>
+              
+              <p className="text-text-secondary text-lg mb-8 leading-relaxed">
+                Stop hardcoding API choices. Let your agent discover the best API 
+                for each task dynamically, with full pricing and capability data.
+              </p>
+
+              <div className="space-y-6 mb-8">
+                {agentBenefits.map((benefit, i) => (
+                  <div key={i} className="flex items-start gap-4">
+                    <div className="w-10 h-10 rounded-xl bg-accent/10 flex items-center justify-center flex-shrink-0">
+                      <benefit.icon className="w-5 h-5 text-accent" />
+                    </div>
+                    <div>
+                      <h4 className="font-semibold mb-1">{benefit.title}</h4>
+                      <p className="text-text-secondary text-sm">{benefit.description}</p>
+                    </div>
+                  </div>
+                ))}
               </div>
-              <div className="mb-4">
-                <span className="terminal-prompt">$ </span>
-                <span className="terminal-command">npx @nordsym/apiclaw start</span>
+
+              <a
+                href="https://github.com/nordsym/apiclaw#installation"
+                target="_blank"
+                rel="noopener noreferrer"
+                className="btn-primary inline-flex"
+              >
+                Start Building
+                <ArrowRight className="w-4 h-4" />
+              </a>
+            </div>
+
+            <div className="code-preview">
+              <div className="code-preview-header">
+                agent.ts — Claude Agent Example
               </div>
-              <div className="terminal-output">
-                🚀 APIClaw running on MCP<br />
-                📡 Listening for agent requests...<br />
-                <br />
-                <span className="text-accent">→ Add to Claude: Settings → MCP Servers → Add</span>
+              <div className="code-preview-body">
+                <pre className="text-sm">
+                  <span className="text-gray-500">{"// Your agent needs to send a notification"}</span>{"\n"}
+                  <span className="text-purple-400">const</span> <span className="text-blue-400">result</span> = <span className="text-purple-400">await</span> <span className="text-blue-400">mcp</span>.<span className="text-yellow-400">call</span>(<span className="text-green-400">"apiclaw"</span>, {"{"}{"\n"}
+                  {"  "}<span className="text-red-400">capability</span>: <span className="text-green-400">"push_notification"</span>,{"\n"}
+                  {"  "}<span className="text-red-400">platforms</span>: [<span className="text-green-400">"ios"</span>, <span className="text-green-400">"android"</span>],{"\n"}
+                  {"  "}<span className="text-red-400">maxPrice</span>: <span className="text-green-400">"$0.001/msg"</span>{"\n"}
+                  {"}"});{"\n"}
+                  {"\n"}
+                  <span className="text-gray-500">{"// APIClaw returns ranked matches"}</span>{"\n"}
+                  <span className="text-blue-400">console</span>.<span className="text-yellow-400">log</span>(<span className="text-blue-400">result</span>.<span className="text-red-400">matches</span>);{"\n"}
+                  <span className="text-gray-500">{"// ["}</span>{"\n"}
+                  <span className="text-gray-500">{"//   { "}<span className="text-red-400">name</span>: <span className="text-green-400">"OneSignal"</span>, <span className="text-red-400">price</span>: <span className="text-yellow-400">"$0.0005"</span>{" }"}</span>{"\n"}
+                  <span className="text-gray-500">{"//   { "}<span className="text-red-400">name</span>: <span className="text-green-400">"Firebase"</span>, <span className="text-red-400">price</span>: <span className="text-yellow-400">"free"</span>{" }"}</span>{"\n"}
+                  <span className="text-gray-500">{"//   { "}<span className="text-red-400">name</span>: <span className="text-green-400">"Pusher"</span>, <span className="text-red-400">price</span>: <span className="text-yellow-400">"$0.001"</span>{" }"}</span>{"\n"}
+                  <span className="text-gray-500">{"// ]"}</span>{"\n"}
+                  {"\n"}
+                  <span className="text-gray-500">{"// Get full spec for the best match"}</span>{"\n"}
+                  <span className="text-purple-400">const</span> <span className="text-blue-400">spec</span> = <span className="text-purple-400">await</span> <span className="text-blue-400">mcp</span>.<span className="text-yellow-400">call</span>(<span className="text-green-400">"apiclaw"</span>, {"{"}{"\n"}
+                  {"  "}<span className="text-red-400">action</span>: <span className="text-green-400">"get_spec"</span>,{"\n"}
+                  {"  "}<span className="text-red-400">api</span>: <span className="text-blue-400">result</span>.<span className="text-red-400">bestMatch</span>{"\n"}
+                  {"}"});{"\n"}
+                  {"\n"}
+                  <span className="text-gray-500">{"// spec includes: auth, endpoints, examples, rate limits"}</span>{"\n"}
+                  <span className="text-gray-500">{"// Your agent can now integrate dynamically! 🚀"}</span>
+                </pre>
               </div>
             </div>
           </div>
-
-          <div className="text-center mt-8">
-            <a
-              href="https://github.com/nordsym/apiclaw#installation"
-              target="_blank"
-              rel="noopener noreferrer"
-              className="text-accent hover:underline inline-flex items-center gap-2"
-            >
-              View full documentation
-              <ExternalLink className="w-4 h-4" />
-            </a>
-          </div>
         </div>
       </section>
 
-      <div className="divider" />
-
-      {/* Features */}
-      <section id="features" className="py-24 px-6 bg-surface/30">
+      {/* For Providers */}
+      <section id="for-providers" className="py-24 px-6">
         <div className="max-w-6xl mx-auto">
-          <div className="text-center mb-16">
-            <span className="section-label">FEATURES</span>
-            <h2 className="text-3xl md:text-4xl font-bold mt-4 tracking-tight">Built for the agentic era</h2>
-          </div>
+          <div className="grid lg:grid-cols-2 gap-16 items-center">
+            <div className="order-2 lg:order-1">
+              <div className="gradient-border p-8">
+                <div className="flex items-center gap-4 mb-6">
+                  <div className="w-16 h-16 rounded-2xl bg-accent/20 flex items-center justify-center text-3xl">
+                    🚀
+                  </div>
+                  <div>
+                    <h4 className="font-bold text-lg">Your API</h4>
+                    <p className="text-text-muted text-sm">Ready for the agentic era</p>
+                  </div>
+                </div>
+                
+                <div className="space-y-4 mb-6">
+                  <div className="flex items-center gap-3 text-text-secondary">
+                    <Check className="w-5 h-5 text-accent" />
+                    <span>{statsData.apiCount.toLocaleString()}+ APIs indexed and growing</span>
+                  </div>
+                  <div className="flex items-center gap-3 text-text-secondary">
+                    <Check className="w-5 h-5 text-accent" />
+                    <span>Structured for instant integration</span>
+                  </div>
+                  <div className="flex items-center gap-3 text-text-secondary">
+                    <Check className="w-5 h-5 text-accent" />
+                    <span>Ranked by capability match</span>
+                  </div>
+                  <div className="flex items-center gap-3 text-text-secondary">
+                    <Check className="w-5 h-5 text-accent" />
+                    <span>Zero ongoing maintenance</span>
+                  </div>
+                </div>
 
-          <div className="grid sm:grid-cols-2 lg:grid-cols-4 gap-6">
-            {features.map((f, i) => (
-              <div key={i} className="card-hover rounded-2xl bg-surface-elevated border border-border p-6">
-                <div className="w-12 h-12 rounded-xl bg-accent/10 flex items-center justify-center mb-4">
-                  <f.icon className="w-6 h-6 text-accent" />
+                <div className="flex items-center justify-between pt-6 border-t border-border">
+                  <div>
+                    <p className="font-semibold">Free Listing</p>
+                    <p className="text-text-muted text-sm">For all API providers</p>
+                  </div>
+                  <div className="flex gap-2">
+                    <a href="/providers/dashboard" className="btn-ghost !py-2.5 !px-4 text-sm">
+                      Dashboard
+                    </a>
+                    <a href="/providers" className="btn-primary !py-2.5 !px-5 text-sm">
+                      List Your API
+                    </a>
+                  </div>
                 </div>
-                <h3 className="font-semibold text-lg mb-2">{f.title}</h3>
-                <p className="text-text-secondary text-sm leading-relaxed">{f.description}</p>
               </div>
-            ))}
-          </div>
-        </div>
-      </section>
+            </div>
 
-      {/* How it works */}
-      <section id="how-it-works" className="py-24 px-6">
-        <div className="max-w-6xl mx-auto">
-          <div className="text-center mb-16">
-            <span className="section-label">HOW IT WORKS</span>
-            <h2 className="text-3xl md:text-4xl font-bold mt-4 tracking-tight">Four lines of agent code</h2>
-            <p className="text-text-secondary text-lg mt-4">That's it.</p>
-          </div>
+            <div className="order-1 lg:order-2">
+              <div className="inline-flex items-center gap-2 px-4 py-2 rounded-full bg-accent/10 border border-accent/20 text-accent text-sm font-medium mb-6">
+                <Building2 className="w-4 h-4" />
+                For API Providers
+              </div>
+              
+              <h2 className="text-3xl md:text-4xl font-bold tracking-tight mb-6">
+                Reach the agent economy
+              </h2>
+              
+              <p className="text-text-secondary text-lg mb-8 leading-relaxed">
+                AI agents are the new developers. They don't browse landing pages—
+                they query capabilities. Get your API in front of them.
+              </p>
 
-          <div className="grid md:grid-cols-2 lg:grid-cols-4 gap-6">
-            {steps.map((item, i) => (
-              <div key={i} className="card-hover rounded-2xl bg-surface-elevated border border-border p-6">
-                <div className="w-10 h-10 rounded-full bg-accent/20 text-accent font-bold flex items-center justify-center mb-4">
-                  {item.step}
-                </div>
-                <h3 className="font-semibold text-lg mb-2">{item.title}</h3>
-                <p className="text-text-secondary text-sm mb-4">{item.description}</p>
-                <div className="code-block rounded-lg p-3">
-                  <pre className="text-xs font-mono text-text-muted overflow-x-auto">
-                    {item.code}
-                  </pre>
-                </div>
+              <div className="space-y-6">
+                {providerBenefits.map((benefit, i) => (
+                  <div key={i} className="flex items-start gap-4">
+                    <div className="w-10 h-10 rounded-xl bg-accent/10 flex items-center justify-center flex-shrink-0">
+                      <benefit.icon className="w-5 h-5 text-accent" />
+                    </div>
+                    <div>
+                      <h4 className="font-semibold mb-1">{benefit.title}</h4>
+                      <p className="text-text-secondary text-sm">{benefit.description}</p>
+                    </div>
+                  </div>
+                ))}
               </div>
-            ))}
+            </div>
           </div>
         </div>
       </section>
 
       <div className="divider" />
 
-      {/* Supported APIs */}
-      <section id="apis" className="py-24 px-6 bg-surface/30">
-        <div className="max-w-6xl mx-auto">
-          <div className="text-center mb-16">
-            <span className="section-label">API CATALOG</span>
-            <h2 className="text-3xl md:text-4xl font-bold mt-4 tracking-tight">Supported APIs</h2>
-            <p className="text-text-secondary text-lg mt-4">1,400+ APIs across 50 categories. Growing daily.</p>
-          </div>
-
-          <div className="grid sm:grid-cols-2 lg:grid-cols-5 gap-4">
-            {apis.map((api, i) => (
-              <div
-                key={i}
-                className="card-hover rounded-xl bg-surface-elevated border border-border p-5 text-center"
-              >
-                <div className={`w-12 h-12 rounded-xl bg-surface flex items-center justify-center mx-auto mb-3 ${api.color}`}>
-                  {api.flag ? (
-                    <span className="text-2xl">{api.flag}</span>
-                  ) : api.icon ? (
-                    <api.icon className="w-6 h-6" />
-                  ) : null}
-                </div>
-                <h3 className="font-semibold">{api.name}</h3>
-                <p className="text-text-muted text-sm">{api.category}</p>
-              </div>
-            ))}
-          </div>
-
-          <p className="text-center text-text-muted mt-8">
-            + Stripe, Twilio, SendGrid, Anthropic, OpenAI, and more...
-          </p>
-        </div>
-      </section>
-
       {/* Pricing */}
-      <section id="pricing" className="py-24 px-6">
-        <div className="max-w-5xl mx-auto">
+      <section id="pricing" className="py-24 px-6 bg-surface/30">
+        <div className="max-w-4xl mx-auto">
           <div className="text-center mb-16">
             <span className="section-label">PRICING</span>
-            <h2 className="text-3xl md:text-4xl font-bold mt-4 tracking-tight">Free for agents. Simple fees for providers.</h2>
-            <p className="text-text-secondary text-lg mt-4">We make money when API providers reach the agent market.</p>
+            <h2 className="text-3xl md:text-4xl font-bold mt-4 tracking-tight">
+              Simple. Free. Forever.
+            </h2>
+            <p className="text-text-secondary text-lg mt-4">
+              API discovery should be free. We're building the infrastructure for agent commerce.
+            </p>
           </div>
 
           <div className="grid md:grid-cols-2 gap-8">
-            {/* For Agents */}
-            <div className="rounded-2xl bg-surface-elevated border border-border p-8">
-              <div className="text-sm text-accent font-semibold mb-4">FOR AGENTS & DEVELOPERS</div>
-              <h3 className="text-2xl font-bold mb-2">Always Free</h3>
-              <p className="text-text-secondary mb-6">Discover and connect to 1,400+ APIs</p>
-              <div className="text-4xl font-bold mb-6">
-                $0<span className="text-lg text-text-muted font-normal"> forever</span>
+            {/* Free tier */}
+            <div className="rounded-2xl bg-surface-elevated border-2 border-accent p-8 relative glow">
+              <div className="absolute -top-3 left-1/2 -translate-x-1/2 px-4 py-1 bg-accent text-white text-xs font-bold tracking-wide rounded-full uppercase">
+                Available Now
               </div>
-              <ul className="space-y-3 mb-8">
+              <h3 className="text-2xl font-bold mb-2">Discovery</h3>
+              <p className="text-text-secondary mb-6">Full API discovery and evaluation</p>
+              <div className="text-5xl font-black mb-6">
+                $0<span className="text-lg text-text-muted font-normal">/forever</span>
+              </div>
+              <ul className="space-y-4 mb-8">
                 <li className="flex items-center gap-3 text-text-secondary">
                   <Check className="w-5 h-5 text-accent flex-shrink-0" />
-                  Full API discovery
+                  Search {statsData.apiCount.toLocaleString()}+ APIs by capability
                 </li>
                 <li className="flex items-center gap-3 text-text-secondary">
                   <Check className="w-5 h-5 text-accent flex-shrink-0" />
-                  MCP integration
+                  Full pricing & feature comparison
+                </li>
+                <li className="flex items-center gap-3 text-text-secondary">
+                  <Check className="w-5 h-5 text-accent flex-shrink-0" />
+                  Structured JSON responses
                 </li>
                 <li className="flex items-center gap-3 text-text-secondary">
                   <Check className="w-5 h-5 text-accent flex-shrink-0" />
-                  Pricing & capability comparison
+                  MCP integration
                 </li>
                 <li className="flex items-center gap-3 text-text-secondary">
                   <Check className="w-5 h-5 text-accent flex-shrink-0" />
-                  Community support
+                  Unlimited queries
                 </li>
               </ul>
-              <a 
-                href="https://github.com/nordsym/apiclaw#installation"
-                target="_blank"
-                rel="noopener noreferrer"
-                className="btn-secondary w-full justify-center"
-              >
-                Get started free
+              <a href="https://github.com/nordsym/apiclaw" className="btn-primary w-full justify-center">
+                Get Started Free
               </a>
             </div>
 
-            {/* For API Providers - two sub-tiers */}
-            <div className="space-y-4">
-              <div className="text-sm text-accent font-semibold mb-2">FOR API PROVIDERS</div>
-              
-              {/* Basic */}
-              <div className="rounded-xl bg-surface border border-border p-6">
-                <div className="flex items-center justify-between mb-3">
-                  <h3 className="text-lg font-semibold">Basic Listing</h3>
-                  <span className="text-text-muted font-bold">Free</span>
-                </div>
-                <p className="text-text-secondary text-sm mb-4">We index public APIs automatically</p>
-                <ul className="space-y-2 text-sm">
-                  <li className="flex items-center gap-2 text-text-secondary">
-                    <Check className="w-4 h-4 text-accent flex-shrink-0" />
-                    Included in discovery
-                  </li>
-                  <li className="flex items-center gap-2 text-text-secondary">
-                    <Check className="w-4 h-4 text-accent flex-shrink-0" />
-                    Basic API info
-                  </li>
-                </ul>
+            {/* Coming soon tier */}
+            <div className="rounded-2xl bg-surface-elevated border border-border p-8 relative">
+              <div className="absolute -top-3 left-1/2 -translate-x-1/2 px-4 py-1 bg-surface border border-border text-text-muted text-xs font-bold tracking-wide rounded-full uppercase">
+                Coming Q2 2026
               </div>
-
-              {/* Partner */}
-              <div className="rounded-xl bg-surface-elevated border border-accent/50 p-6 relative glow">
-                <div className="absolute -top-2 right-4 px-2 py-0.5 bg-accent text-background text-xs font-bold tracking-wide rounded-full uppercase">
-                  Partner
-                </div>
-                <div className="flex items-center justify-between mb-3">
-                  <h3 className="text-lg font-semibold">Partner Listing</h3>
-                  <span className="text-accent font-bold">5% rev share</span>
-                </div>
-                <p className="text-text-secondary text-sm mb-4">Active partnership with premium benefits</p>
-                <ul className="space-y-2 text-sm mb-4">
-                  <li className="flex items-center gap-2 text-text-secondary">
-                    <Check className="w-4 h-4 text-accent flex-shrink-0" />
-                    Verified badge ✓
-                  </li>
-                  <li className="flex items-center gap-2 text-text-secondary">
-                    <Check className="w-4 h-4 text-accent flex-shrink-0" />
-                    Priority placement
-                  </li>
-                  <li className="flex items-center gap-2 text-text-secondary">
-                    <Check className="w-4 h-4 text-accent flex-shrink-0" />
-                    Usage analytics
-                  </li>
-                  <li className="flex items-center gap-2 text-text-secondary">
-                    <Plus className="w-4 h-4 text-accent flex-shrink-0" />
-                    More benefits coming
-                  </li>
-                </ul>
-                <a 
-                  href="https://github.com/nordsym/apiclaw/issues/new?template=add-api.yml"
-                  target="_blank"
-                  rel="noopener noreferrer"
-                  className="btn-primary w-full justify-center text-sm"
-                >
-                  Become a Partner
-                </a>
+              <h3 className="text-2xl font-bold mb-2">Provisioning</h3>
+              <p className="text-text-secondary mb-6">Agent-native credential management</p>
+              <div className="text-5xl font-black mb-6 text-text-muted">
+                TBD
               </div>
+              <ul className="space-y-4 mb-8">
+                <li className="flex items-center gap-3 text-text-muted">
+                  <Check className="w-5 h-5 flex-shrink-0" />
+                  OAuth broker for major APIs
+                </li>
+                <li className="flex items-center gap-3 text-text-muted">
+                  <Check className="w-5 h-5 flex-shrink-0" />
+                  Instant API key provisioning
+                </li>
+                <li className="flex items-center gap-3 text-text-muted">
+                  <Check className="w-5 h-5 flex-shrink-0" />
+                  Usage tracking & analytics
+                </li>
+                <li className="flex items-center gap-3 text-text-muted">
+                  <Check className="w-5 h-5 flex-shrink-0" />
+                  Agent-native payments
+                </li>
+                <li className="flex items-center gap-3 text-text-muted">
+                  <Check className="w-5 h-5 flex-shrink-0" />
+                  Unified billing
+                </li>
+              </ul>
+              <button className="btn-secondary w-full justify-center opacity-50 cursor-not-allowed" disabled>
+                Join Waitlist
+              </button>
             </div>
           </div>
-
-          {/* Bottom note */}
-          <div className="text-center mt-12 text-text-muted">
-            <p>We index the web. Partners get premium. 🦞</p>
-          </div>
-        </div>
-      </section>
-
-      <div className="divider" />
-
-      {/* FAQ */}
-      <section id="faq" className="py-24 px-6">
-        <div className="max-w-3xl mx-auto">
-          <div className="text-center mb-16">
-            <span className="section-label">FAQ</span>
-            <h2 className="text-3xl md:text-4xl font-bold mt-4 tracking-tight">Questions & Answers</h2>
-          </div>
-
-          <div className="space-y-6">
-            {[
-              {
-                q: "What is APIClaw?",
-                a: "APIClaw is an API marketplace built for autonomous agents. Instead of humans browsing documentation, agents discover and evaluate APIs programmatically via MCP (Model Context Protocol)."
-              },
-              {
-                q: "Is it free?",
-                a: "Yes! Discovery is completely free for agents and developers. API providers who want premium placement pay a 5% revenue share."
-              },
-              {
-                q: "How do I add APIClaw to my agent?",
-                a: "Install the MCP server with 'npx @nordsym/apiclaw init' and add it to your Claude config. Your agent can then discover APIs by capability, not by name."
-              },
-              {
-                q: "What APIs are available?",
-                a: "We index 1,400+ public APIs across 52 categories including SMS, Email, Search, LLM, TTS, Payments, Weather, and more. The registry grows daily."
-              },
-              {
-                q: "How do I list my API?",
-                a: "Submit a PR to our GitHub repo or use the 'List Your API' form below. Basic listings are free. Partner listings with premium placement are 5% revenue share."
-              },
-              {
-                q: "Is this related to OpenClaw?",
-                a: "APIClaw is part of the OpenClaw universe and built with MCP compatibility in mind. Think of it as specialized infrastructure for the agentic era."
-              },
-            ].map((faq, i) => (
-              <div key={i} className="rounded-xl bg-surface-elevated border border-border p-6">
-                <h3 className="font-semibold text-lg mb-2">{faq.q}</h3>
-                <p className="text-text-secondary">{faq.a}</p>
-              </div>
-            ))}
-          </div>
         </div>
       </section>
 
-      <div className="divider" />
-
-      {/* Stay in the Loop */}
-      <section className="py-24 px-6">
-        <div className="max-w-xl mx-auto text-center">
-          <span className="section-label">NEWSLETTER</span>
-          <h2 className="text-3xl md:text-4xl font-bold mt-4 mb-4 tracking-tight">Stay in the Loop</h2>
-          <p className="text-text-secondary mb-8">
-            Get updates on new features, integrations, and lobster wisdom. No spam, unsubscribe anytime.
-          </p>
-          
-          <form className="flex flex-col sm:flex-row gap-3" onSubmit={(e) => e.preventDefault()}>
-            <input
-              type="email"
-              placeholder="you@company.com"
-              className="flex-1 px-4 py-3 rounded-xl text-text-primary"
-            />
-            <button type="submit" className="btn-primary flex-shrink-0 justify-center">
-              <Sparkles className="w-4 h-4" />
-              Subscribe
-            </button>
-          </form>
-          
-          <p className="text-text-muted text-sm mt-4">
-            No spam. Unsubscribe anytime.
-          </p>
-        </div>
-      </section>
-
-      {/* List Your API */}
-      <section className="py-24 px-6">
-        <div className="max-w-2xl mx-auto text-center">
-          <div className="w-16 h-16 rounded-2xl bg-accent/10 flex items-center justify-center mx-auto mb-6">
-            <Plus className="w-8 h-8 text-accent" />
-          </div>
-          <span className="section-label">FOR API PROVIDERS</span>
-          <h2 className="text-3xl md:text-4xl font-bold mt-4 mb-4 tracking-tight">List Your API</h2>
-          <p className="text-text-secondary text-lg mb-8">
-            Are you an API provider? Get your API in front of thousands of AI agents. 
-            Join the marketplace where agents discover and purchase API access autonomously.
-          </p>
-          <a
-            href="https://github.com/nordsym/apiclaw/issues/new?template=add-api.yml"
-            target="_blank"
-            rel="noopener noreferrer"
-            className="btn-primary inline-flex"
-          >
-            Submit your API
-            <ArrowRight className="w-4 h-4" />
-          </a>
-          <p className="text-text-muted text-sm mt-6">
-            Free to list. We review submissions within 48 hours.
-          </p>
-        </div>
-      </section>
-
-      <div className="divider" />
-
       {/* CTA */}
-      <section className="py-24 px-6 bg-surface/30">
-        <div className="max-w-2xl mx-auto text-center">
-          <h2 className="text-3xl md:text-4xl font-bold mb-6 tracking-tight">Ready to go agent-native?</h2>
-          <p className="text-text-secondary text-lg mb-8">
-            Join the waitlist for early access and shape the future of agent commerce.
-          </p>
-          <div className="flex flex-col sm:flex-row items-center justify-center gap-4">
-            <a
-              href="https://github.com/nordsym/apiclaw"
-              target="_blank"
-              rel="noopener noreferrer"
-              className="btn-primary"
-            >
-              <Github className="w-5 h-5" />
-              Star on GitHub
-            </a>
-            <button className="btn-secondary">
-              Join waitlist
-              <ArrowRight className="w-4 h-4" />
-            </button>
+      <section id="contact" className="py-24 px-6">
+        <div className="max-w-3xl mx-auto">
+          <div className="gradient-border p-12 text-center">
+            <div className="w-20 h-20 rounded-2xl bg-accent/20 flex items-center justify-center text-4xl mx-auto mb-6 logo-float">
+              🦞
+            </div>
+            <h2 className="text-3xl md:text-4xl font-bold mb-4 tracking-tight">
+              Ready to go agent-native?
+            </h2>
+            <p className="text-text-secondary text-lg mb-8 max-w-lg mx-auto">
+              Join thousands of agents already discovering APIs through APIClaw.
+              Get started in under a minute.
+            </p>
+            <div className="flex flex-col sm:flex-row items-center justify-center gap-4">
+              <a
+                href="https://github.com/nordsym/apiclaw"
+                target="_blank"
+                rel="noopener noreferrer"
+                className="btn-primary"
+              >
+                <Terminal className="w-5 h-5" />
+                npx @nordsym/apiclaw
+              </a>
+              <a
+                href="https://github.com/nordsym/apiclaw"
+                target="_blank"
+                rel="noopener noreferrer"
+                className="btn-secondary"
+              >
+                <Star className="w-5 h-5" />
+                Star on GitHub
+              </a>
+            </div>
           </div>
         </div>
       </section>
 
       {/* Footer */}
-      <footer className="border-t border-border py-16 px-6">
+      <footer className="border-t border-border py-16 px-6 bg-surface/30">
         <div className="max-w-6xl mx-auto">
           <div className="grid md:grid-cols-4 gap-12 mb-12">
             {/* Brand */}
             <div className="md:col-span-2">
               <div className="flex items-center gap-3 mb-4">
-                <div className="w-9 h-9 rounded-xl bg-accent/20 flex items-center justify-center">
-                  <span className="text-xl">🦞</span>
+                <div className="w-10 h-10 rounded-xl bg-accent/20 flex items-center justify-center text-2xl">
+                  🦞
                 </div>
-                <span className="font-bold text-lg tracking-tight">APIClaw</span>
+                <span className="font-bold text-xl tracking-tight">APIClaw</span>
               </div>
-              <p className="text-text-muted mb-6 max-w-sm">
-                The API marketplace built for autonomous agents. Discover, evaluate, and purchase—all without human intervention.
+              <p className="text-text-muted mb-6 max-w-sm leading-relaxed">
+                The API discovery layer for autonomous agents. 
+                Find, evaluate, and integrate APIs in milliseconds.
               </p>
-              <div className="flex items-center gap-4">
+              <div className="flex items-center gap-3">
                 <a
                   href="https://github.com/nordsym/apiclaw"
                   target="_blank"
                   rel="noopener noreferrer"
-                  className="w-10 h-10 rounded-lg bg-surface-elevated border border-border flex items-center justify-center text-text-muted hover:text-text-primary hover:border-accent/50 transition"
+                  className="w-10 h-10 rounded-lg bg-surface-elevated border border-border flex items-center justify-center text-text-muted hover:text-text-primary hover:border-accent transition"
                 >
                   <Github className="w-5 h-5" />
                 </a>
@@ -675,7 +772,7 @@ export default function Home() {
                   href="https://twitter.com/nordsym"
                   target="_blank"
                   rel="noopener noreferrer"
-                  className="w-10 h-10 rounded-lg bg-surface-elevated border border-border flex items-center justify-center text-text-muted hover:text-text-primary hover:border-accent/50 transition"
+                  className="w-10 h-10 rounded-lg bg-surface-elevated border border-border flex items-center justify-center text-text-muted hover:text-text-primary hover:border-accent transition"
                 >
                   <Twitter className="w-5 h-5" />
                 </a>
@@ -686,9 +783,11 @@ export default function Home() {
             <div>
               <h4 className="font-semibold mb-4">Product</h4>
               <ul className="space-y-3 text-text-muted">
-                <li><a href="#features" className="hover:text-text-primary transition">Features</a></li>
+                <li><a href="#how-it-works" className="hover:text-text-primary transition">How It Works</a></li>
+                <li><a href="#for-agents" className="hover:text-text-primary transition">For Agents</a></li>
+                <li><a href="#for-providers" className="hover:text-text-primary transition">For Providers</a></li>
+                <li><a href="/providers/dashboard" className="hover:text-text-primary transition">Provider Dashboard</a></li>
                 <li><a href="#pricing" className="hover:text-text-primary transition">Pricing</a></li>
-                <li><a href="#apis" className="hover:text-text-primary transition">API Catalog</a></li>
                 <li><a href="https://github.com/nordsym/apiclaw#installation" target="_blank" rel="noopener noreferrer" className="hover:text-text-primary transition">Documentation</a></li>
               </ul>
             </div>
@@ -696,58 +795,47 @@ export default function Home() {
             <div>
               <h4 className="font-semibold mb-4">Company</h4>
               <ul className="space-y-3 text-text-muted">
-                <li><a href="https://nordsym.se" target="_blank" rel="noopener noreferrer" className="hover:text-text-primary transition">NordSym</a></li>
+                <li><a href="https://nordsym.com" target="_blank" rel="noopener noreferrer" className="hover:text-text-primary transition">NordSym</a></li>
                 <li><a href="https://github.com/nordsym" target="_blank" rel="noopener noreferrer" className="hover:text-text-primary transition">GitHub</a></li>
-                <li><a href="https://twitter.com/nordsym" target="_blank" rel="noopener noreferrer" className="hover:text-text-primary transition">Twitter</a></li>
+                <li><a href="https://twitter.com/nordsym" target="_blank" rel="noopener noreferrer" className="hover:text-text-primary transition">Twitter / X</a></li>
               </ul>
             </div>
           </div>
 
-          {/* OpenClaw-style footer links */}
-          <div className="pt-8 border-t border-border text-center">
-            <div className="flex items-center justify-center gap-2 text-sm text-text-muted mb-4">
-              <a href="https://github.com/nordsym/apiclaw" className="hover:text-text-primary transition">GitHub</a>
-              <span>·</span>
-              <a href="https://github.com/nordsym/apiclaw#installation" className="hover:text-text-primary transition">Docs</a>
-              <span>·</span>
-              <a href="https://x.com/HokusPontuz" className="hover:text-text-primary transition">@HokusPontuz</a>
-              <span>·</span>
-              <a href="https://x.com/NordSym" className="hover:text-text-primary transition">@NordSym</a>
-              <span>·</span>
-              <a href="https://nordsym.com" className="hover:text-text-primary transition">NordSym</a>
-            </div>
-            <p className="text-text-muted text-sm mb-2">
-              Made with 🦞 and unreasonable amounts of ambition.
-            </p>
-            <p className="text-text-muted text-xs">
-              Part of the OpenClaw universe. Independent project.
+          <div className="pt-8 border-t border-border flex flex-col md:flex-row items-center justify-between gap-4">
+            <p className="text-text-muted text-sm">
+              © 2026 NordSym. Building infrastructure for agent commerce.
             </p>
+            <div className="flex items-center gap-4">
+              <div className="badge">
+                <Shield className="w-3 h-3" />
+                MCP Compatible
+              </div>
+              <div className="badge badge-live">
+                Live
+              </div>
+            </div>
           </div>
         </div>
       </footer>
 
-      {/* Floating Chat Button */}
+      {/* Telegram Chat Bubble */}
       <a
         href="https://t.me/SymbotAPI_bot"
         target="_blank"
         rel="noopener noreferrer"
-        className="fixed bottom-6 right-6 z-50 group flex items-center gap-3"
+        className="fixed bottom-6 right-6 z-50 group"
       >
-        {/* Label - always visible */}
-        <div className="bg-surface-elevated border border-border rounded-xl px-4 py-2 shadow-lg">
-          <div className="font-medium text-sm">Talk to Symbot</div>
-          <div className="text-text-muted text-xs">The AI building this — on Telegram</div>
+        <div className="flex items-center gap-2 bg-[#0088cc] hover:bg-[#0077b5] text-white px-4 py-3 rounded-full shadow-lg transition-all duration-300 hover:scale-105 hover:shadow-xl">
+          <span className="text-xl">🦞</span>
+          <span className="font-medium text-sm hidden sm:inline">Chat with the bot</span>
         </div>
-        {/* Button */}
-        <div className="relative">
-          <div className="w-14 h-14 rounded-full bg-accent text-background flex items-center justify-center shadow-lg group-hover:scale-110 transition-transform cursor-pointer">
-            <span className="text-2xl">🦞</span>
-          </div>
-          {/* Pulse */}
-          <div className="absolute inset-0 rounded-full bg-accent animate-ping opacity-20"></div>
+        <div className="absolute bottom-full right-0 mb-2 px-3 py-2 bg-surface-elevated border border-border rounded-lg text-xs text-text-muted whitespace-nowrap opacity-0 group-hover:opacity-100 transition-opacity pointer-events-none shadow-lg">
+          Talk to the AI that builds APIClaw
+          <br />
+          <span className="text-text-primary">Opens in Telegram</span>
         </div>
       </a>
-
     </main>
   );
 }