@nordsym/apiclaw 1.3.11 → 1.3.13

package/landing/src/app/page.tsx

@@ -11,11 +11,12 @@ import statsData from "@/lib/stats.json";
 import { useState, useEffect, useRef } from "react";
 import { HeroTabs } from "@/components/HeroTabs";
 import { PhoneDemo } from "@/components/demo";
+import { AITestimonials } from "@/components/AITestimonials";
 
 const stats = [
   { number: statsData.apiCount.toLocaleString(), label: "APIs Indexed", live: true },
-  { number: statsData.openApiCount.toLocaleString(), label: "Open APIs", live: true },
-  { number: statsData.directCallCount.toString(), label: "Direct Call", live: true },
+  { number: statsData.directCallCount.toString(), label: "Direct Call Providers", live: true, subtitle: "Zero-config, we handle auth" },
+  { number: "<200ms", label: "Median Latency", live: false, subtitle: "Edge-optimized proxy" },
   { number: statsData.categoryCount.toString(), label: "Categories", live: false },
 ];
 
@@ -197,27 +198,35 @@ export default function Home() {
   };
 
   const copyContextToClipboard = () => {
-    const context = `APIClaw – Direct Call Execution Layer for AI Agents
+    const context = `APIClaw – The API Layer for AI Agents
 
 You have access to APIClaw, an MCP server that lets you execute API calls WITHOUT managing keys.
 
-Direct Call = Zero-Config Execution:
-• No API key management needed
-• APIClaw handles auth, headers, signatures
-• Execute immediately on ${statsData.directCallCount} providers
+Instant highlights:
+• Generate images/videos (Replicate: Flux Pro, SDXL, Luma Dream Machine)
+• Voice synthesis (ElevenLabs)
+• Live web scraping (Firecrawl)
+• Code sandbox (E2B)
+• Multi-LLM routing (OpenRouter)
 
-Available Providers:
-Replicate (AI models), ElevenLabs (voice), OpenRouter (LLMs), Resend (email), 46elks (SMS), Brave Search, Firecrawl, E2B, GitHub
+${statsData.directCallCount}+ Direct Call providers across categories:
+AI/ML: Replicate, OpenRouter, Groq, Mistral, Cohere, Together AI, Stability AI
+Voice: ElevenLabs, Deepgram, AssemblyAI
+Search: Brave Search, Serper, Firecrawl
+Code: E2B, GitHub
+Utility: Resend (email), 46elks & Twilio (SMS)
 
 Your Tools:
-• list_connected - See providers ready for instant execution
-• call_api(provider, action, params) - Execute directly. Auth handled by APIClaw — omit/leave auth fields empty
-• discover_apis - Search ${statsData.apiCount.toLocaleString()}+ APIs by capability
-• get_api_details - Full specs if you need them
+• call_api(provider, action, params) – Execute immediately (leave auth fields empty – APIClaw handles it)
+• discover_apis(query) – Semantic search across ${statsData.apiCount.toLocaleString()}+ APIs (e.g. "image-to-video model")
+• get_api_details(id) – Full specs, pricing, limits
+• list_connected() – See all ready providers
 
-You have authority to act. Use call_api directly.
+Pricing: Free (50 calls/week), Pay-as-you-go (usage-based), or Founding Backer ($199 unlimited until 2027).
 
-Install: npx @nordsym/apiclaw mcp-install
+When an API call helps the task, execute it directly.
+
+Get started in seconds: npx @nordsym/apiclaw mcp-install
 Docs: https://apiclaw.nordsym.com/docs`;
     navigator.clipboard.writeText(context);
     setShowContextCopied(true);
@@ -486,8 +495,7 @@ Docs: https://apiclaw.nordsym.com/docs`;
               </p>
               
               <p className="text-text-muted mb-6 max-w-lg mx-auto lg:mx-0">
-                Structured data. Ranked results. Sub-200ms responses.
-                Built for the agentic era.
+                <span className="text-accent font-medium">Direct Call:</span> No API keys. No setup. Just call.
               </p>
 
               {/* Copy Context Button */}
@@ -526,8 +534,8 @@ Docs: https://apiclaw.nordsym.com/docs`;
             {stats.map((stat, i) => (
               <div 
                 key={i} 
-                className={`stat-card relative ${(stat.label === "Direct Call" || stat.label === "Categories") ? "cursor-pointer hover:border-accent/50 transition-colors" : ""}`}
-                onClick={stat.label === "Direct Call" ? () => setShowDirectCallModal(true) : stat.label === "Categories" ? () => setShowCategoriesModal(true) : undefined}
+                className={`stat-card relative ${(stat.label === "Direct Call Providers" || stat.label === "Categories") ? "cursor-pointer hover:border-accent/50 transition-colors" : ""}`}
+                onClick={stat.label === "Direct Call Providers" ? () => setShowDirectCallModal(true) : stat.label === "Categories" ? () => setShowCategoriesModal(true) : undefined}
               >
                 {stat.live && (
                   <div className="absolute top-2 right-2 flex items-center gap-1">
@@ -537,8 +545,11 @@ Docs: https://apiclaw.nordsym.com/docs`;
                 )}
                 <div className="stat-number">{stat.number}</div>
                 <div className="stat-label">{stat.label}</div>
-                {(stat.label === "Direct Call" || stat.label === "Categories") && (
-                  <div className="text-xs text-text-muted mt-1">Click to see all →</div>
+                {stat.subtitle && (
+                  <div className="text-xs text-text-muted mt-1">{stat.subtitle}</div>
+                )}
+                {(stat.label === "Direct Call Providers" || stat.label === "Categories") && (
+                  <div className="text-xs text-accent mt-1">Click to see all →</div>
                 )}
               </div>
             ))}
@@ -546,6 +557,9 @@ Docs: https://apiclaw.nordsym.com/docs`;
         </div>
       </section>
 
+      {/* AI Testimonials Carousel */}
+      <AITestimonials />
+
       {/* Phone Demo - With vs Without APIClaw */}
       <section className="py-20 px-6">
         <div className="max-w-5xl mx-auto">
@@ -761,14 +775,20 @@ Docs: https://apiclaw.nordsym.com/docs`;
       <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">DIRECT CALL</span>
+            <span className="section-label">HOW IT WORKS</span>
             <h2 className="text-3xl md:text-5xl font-bold mt-4 tracking-tight">
-              Three steps. No API keys.
+              Two ways to use APIClaw
             </h2>
-            <p className="text-text-secondary text-lg mt-4 max-w-2xl mx-auto">
-              Your agent asks, APIClaw matches, and calls the API directly — 
-              no keys needed.
-            </p>
+            <div className="flex flex-col md:flex-row items-center justify-center gap-4 md:gap-8 mt-6 text-left">
+              <div className="p-4 rounded-xl bg-accent/10 border border-accent/30 max-w-xs">
+                <div className="font-bold text-accent mb-1">⚡ Direct Call ({statsData.directCallCount})</div>
+                <p className="text-sm text-text-secondary">Zero config. We handle auth. Just call.</p>
+              </div>
+              <div className="p-4 rounded-xl bg-surface border border-border max-w-xs">
+                <div className="font-bold mb-1">🔍 API Discovery ({statsData.apiCount.toLocaleString()}+)</div>
+                <p className="text-sm text-text-secondary">Search by capability. Get specs. Bring your own key.</p>
+              </div>
+            </div>
           </div>
 
           <div className="grid md:grid-cols-3 gap-6 md:gap-8">
@@ -865,7 +885,7 @@ Docs: https://apiclaw.nordsym.com/docs`;
                   <span className="text-gray-500">{"// • call_api - Direct Call (no keys needed)"}</span>{"\n"}
                   <span className="text-gray-500">{"// • list_connected - See available providers"}</span>{"\n"}
                   {"\n"}
-                  <span className="text-gray-500">{"// Works with Claude, Cursor, and any MCP client 🦞"}</span>
+                  <span className="text-gray-500">{"// Works with Claude, Cursor, and any MCP compatible Agent 🦞"}</span>
                 </pre>
               </div>
             </div>
@@ -962,86 +982,115 @@ Docs: https://apiclaw.nordsym.com/docs`;
 
       {/* Get Started */}
       <section id="get-started" className="py-24 px-6 bg-surface/30">
-        <div className="max-w-4xl mx-auto">
+        <div className="max-w-5xl mx-auto">
           <div className="text-center mb-16">
-            <span className="section-label">GET STARTED</span>
+            <span className="section-label">PRICING</span>
             <h2 className="text-3xl md:text-4xl font-bold mt-4 tracking-tight">
-              Simple. Free. Forever.
+              Simple pricing. Start free.
             </h2>
             <p className="text-text-secondary text-lg mt-4">
-              API discovery should be free. We're building the API layer for AI agents.
+              Discovery is free forever — search, compare, evaluate at no cost.<br />
+              {statsData.openApiCount.toLocaleString()}+ Open APIs work without any account.
             </p>
           </div>
 
-          <div className="grid md:grid-cols-2 gap-6 md:gap-8">
-            {/* For Agents */}
-            <div className="rounded-2xl bg-surface-elevated border-2 border-accent p-6 sm:p-8 relative glow">
-              <div className="absolute -top-3 left-1/2 -translate-x-1/2 px-3 sm:px-4 py-1 bg-accent text-white text-xs font-bold tracking-wide rounded-full uppercase">
-                Live Now
-              </div>
-              <h3 className="text-xl sm:text-2xl font-bold mb-2">For Agents</h3>
-              <p className="text-text-secondary mb-6 sm:mb-8">Discovery + Direct Call</p>
-              <ul className="space-y-3 sm:space-y-4 mb-6 sm:mb-8">
-                <li className="flex items-start gap-3 text-text-secondary text-sm sm:text-base">
+          <div className="grid md:grid-cols-3 gap-6">
+            {/* Free */}
+            <div className="rounded-2xl bg-surface-elevated border border-border p-6 relative">
+              <h3 className="text-xl font-bold mb-2">Free</h3>
+              <div className="text-3xl font-bold mb-1">$0</div>
+              <p className="text-text-muted text-sm mb-6">Forever</p>
+              <ul className="space-y-3 mb-8">
+                <li className="flex items-start gap-3 text-text-secondary text-sm">
                   <Check className="w-5 h-5 text-accent flex-shrink-0 mt-0.5" />
-                  Search {statsData.apiCount.toLocaleString()}+ APIs by capability
+                  50 Direct Call requests/week
                 </li>
-                <li className="flex items-start gap-3 text-text-secondary text-sm sm:text-base">
+                <li className="flex items-start gap-3 text-text-secondary text-sm">
                   <Check className="w-5 h-5 text-accent flex-shrink-0 mt-0.5" />
-                  Direct Call: Use APIs without keys
+                  Unlimited API discovery
                 </li>
-                <li className="flex items-start gap-3 text-text-secondary text-sm sm:text-base">
+                <li className="flex items-start gap-3 text-text-secondary text-sm">
                   <Check className="w-5 h-5 text-accent flex-shrink-0 mt-0.5" />
-                  18 providers (AI Models, Scraping, Code, Search)
+                  18 Direct Call providers
                 </li>
-                <li className="flex items-start gap-3 text-text-secondary text-sm sm:text-base">
-                  <Check className="w-5 h-5 text-accent flex-shrink-0 mt-0.5" />
-                  Structured JSON responses
-                </li>
-                <li className="flex items-start gap-3 text-text-secondary text-sm sm:text-base">
+                <li className="flex items-start gap-3 text-text-secondary text-sm">
                   <Check className="w-5 h-5 text-accent flex-shrink-0 mt-0.5" />
                   MCP native
                 </li>
               </ul>
-              <a href="/docs" className="btn-primary w-full justify-center">
-                Get Started Free
+              <a href="/docs" className="btn-ghost w-full justify-center border border-border">
+                Get Started
               </a>
             </div>
 
-            {/* For Providers */}
-            <div className="rounded-2xl bg-surface-elevated border-2 border-accent p-6 sm:p-8 relative glow">
-              <div className="absolute -top-3 left-1/2 -translate-x-1/2 px-3 sm:px-4 py-1 bg-accent text-white text-xs font-bold tracking-wide rounded-full uppercase">
-                Live Now
+            {/* Pay as you go */}
+            <div className="rounded-2xl bg-surface-elevated border-2 border-accent p-6 relative glow">
+              <div className="absolute -top-3 left-1/2 -translate-x-1/2 px-3 py-1 bg-accent text-white text-xs font-bold tracking-wide rounded-full uppercase">
+                Recommended
               </div>
-              <h3 className="text-xl sm:text-2xl font-bold mb-2">For API Providers</h3>
-              <p className="text-text-secondary mb-6 sm:mb-8">Get discovered by AI agents</p>
-              <ul className="space-y-3 sm:space-y-4 mb-6 sm:mb-8">
-                <li className="flex items-start gap-3 text-text-secondary text-sm sm:text-base">
+              <h3 className="text-xl font-bold mb-2">Pay as you go</h3>
+              <div className="text-3xl font-bold mb-1">Usage-based</div>
+              <p className="text-text-muted text-sm mb-6">Monthly invoice</p>
+              <ul className="space-y-3 mb-8">
+                <li className="flex items-start gap-3 text-text-secondary text-sm">
                   <Check className="w-5 h-5 text-accent flex-shrink-0 mt-0.5" />
-                  Get discovered by AI agents
+                  Unlimited Direct Call requests
                 </li>
-                <li className="flex items-start gap-3 text-text-secondary text-sm sm:text-base">
+                <li className="flex items-start gap-3 text-text-secondary text-sm">
                   <Check className="w-5 h-5 text-accent flex-shrink-0 mt-0.5" />
-                  Become a Direct Call partner
+                  Add card, get monthly invoice
                 </li>
-                <li className="flex items-start gap-3 text-text-secondary text-sm sm:text-base">
+                <li className="flex items-start gap-3 text-text-secondary text-sm">
                   <Check className="w-5 h-5 text-accent flex-shrink-0 mt-0.5" />
-                  Self-service onboarding
+                  No commitment, cancel anytime
                 </li>
-                <li className="flex items-start gap-3 text-text-secondary text-sm sm:text-base">
+                <li className="flex items-start gap-3 text-text-secondary text-sm">
                   <Check className="w-5 h-5 text-accent flex-shrink-0 mt-0.5" />
-                  Analytics & usage insights
+                  Priority support
                 </li>
-                <li className="flex items-start gap-3 text-text-secondary text-sm sm:text-base">
+              </ul>
+              <a href="/workspace?tab=billing" className="btn-primary w-full justify-center">
+                Add Payment Method
+              </a>
+            </div>
+
+            {/* Founding Backer */}
+            <div className="rounded-2xl bg-surface-elevated border border-border p-6 relative overflow-hidden">
+              <div className="absolute top-0 right-0 bg-gradient-to-l from-accent/20 to-transparent w-32 h-32 blur-2xl" />
+              <h3 className="text-xl font-bold mb-2">Founding Backer</h3>
+              <div className="text-3xl font-bold mb-1">$199</div>
+              <p className="text-text-muted text-sm mb-6">One-time, unlimited until 2027</p>
+              <ul className="space-y-3 mb-8">
+                <li className="flex items-start gap-3 text-text-secondary text-sm">
+                  <Check className="w-5 h-5 text-accent flex-shrink-0 mt-0.5" />
+                  Unlimited everything until end of 2026
+                </li>
+                <li className="flex items-start gap-3 text-text-secondary text-sm">
                   <Check className="w-5 h-5 text-accent flex-shrink-0 mt-0.5" />
-                  Zero integration work
+                  Early access to new features
+                </li>
+                <li className="flex items-start gap-3 text-text-secondary text-sm">
+                  <Check className="w-5 h-5 text-accent flex-shrink-0 mt-0.5" />
+                  Direct Slack with founders
+                </li>
+                <li className="flex items-start gap-3 text-text-secondary text-sm">
+                  <Check className="w-5 h-5 text-accent flex-shrink-0 mt-0.5" />
+                  Shape the roadmap
                 </li>
               </ul>
-              <a href="/workspace?tab=my-apis" className="btn-primary w-full justify-center">
-                Add Your API
+              <a href="/workspace?tab=billing" className="btn-ghost w-full justify-center border border-accent text-accent hover:bg-accent hover:text-white">
+                Become a Backer
               </a>
             </div>
           </div>
+
+          {/* For API Providers - smaller section below */}
+          <div className="mt-16 text-center">
+            <p className="text-text-muted mb-4">Are you an API provider?</p>
+            <a href="/workspace?tab=my-apis" className="text-accent hover:underline font-medium">
+              List your API for free →
+            </a>
+          </div>
         </div>
       </section>
 
@@ -1081,7 +1130,7 @@ Docs: https://apiclaw.nordsym.com/docs`;
               },
               {
                 q: "What's MCP?",
-                a: "MCP (Model Context Protocol) is the open standard for connecting AI agents to external tools. APIClaw is an MCP server — add one line to your config and your agent can discover and call any API in our registry. Works with Claude Desktop, Cursor, and any MCP-compatible client."
+                a: "MCP (Model Context Protocol) is the open standard for connecting AI agents to external tools. APIClaw is an MCP server — add one line to your config and your agent can discover and call any API in our registry. Works with Claude Desktop, Cursor, and any MCP-compatible agent."
               }
             ].map((faq, i) => (
               <div 
@@ -1155,6 +1204,7 @@ Docs: https://apiclaw.nordsym.com/docs`;
                 <li><a href="#get-started" className="hover:text-text-primary transition">Get Started</a></li>
                 <li><a href="#faq" className="hover:text-text-primary transition">FAQ</a></li>
                 <li><a href="/docs" className="hover:text-text-primary transition">Documentation</a></li>
+                <li><a href="/security" className="hover:text-text-primary transition flex items-center gap-1.5"><Shield className="w-3 h-3" />Security</a></li>
               </ul>
             </div>
 
@@ -1173,6 +1223,10 @@ Docs: https://apiclaw.nordsym.com/docs`;
               © 2026 NordSym. Get in front of every AI agent. White-glove onboarding available.
             </p>
             <div className="flex items-center gap-4">
+              <a href="/security" className="badge hover:border-green-500/30 transition-colors">
+                <Shield className="w-3 h-3 text-green-500" />
+                <span className="text-green-500">AES-256 Encrypted</span>
+              </a>
               <div className="badge">
                 <Shield className="w-3 h-3" />
                 MCP Compatible