@nordsym/apiclaw 1.2.0 → 1.2.2

package/landing/src/app/api/auth/magic-link/route.ts

@@ -24,7 +24,14 @@ export async function POST(req: NextRequest) {
       throw new Error("Failed to create magic link");
     }
 
-    const { token } = await response.json();
+    const result = await response.json();
+    
+    // Convex wraps response in { status: "success", value: {...} }
+    const token = result.value?.token || result.token;
+    
+    if (!token) {
+      throw new Error("Failed to get token from Convex");
+    }
 
     // Send magic link email via n8n
     const magicLinkUrl = `${process.env.NEXT_PUBLIC_APP_URL || "https://apiclaw.nordsym.com"}/providers/dashboard/verify?token=${token}`;

package/landing/src/app/api/auth/verify/route.ts

@@ -25,16 +25,19 @@ export async function POST(req: NextRequest) {
     }
 
     const result = await response.json();
+    
+    // Convex wraps response in { status: "success", value: {...} }
+    const data = result.value || result;
 
-    if (!result.success) {
-      return NextResponse.json({ error: result.error || "Invalid token" }, { status: 400 });
+    if (!data.success) {
+      return NextResponse.json({ error: data.error || "Invalid token" }, { status: 400 });
     }
 
     // Return session token
     return NextResponse.json({
       success: true,
-      sessionToken: result.sessionToken,
-      provider: result.provider,
+      sessionToken: data.sessionToken,
+      provider: data.provider,
     });
   } catch (error) {
     console.error("Verify error:", error);

package/landing/src/app/docs/page.tsx

@@ -5,12 +5,12 @@ import { useState, useEffect } from 'react';
 import { Sun, Moon } from 'lucide-react';
 
 export default function DocsPage() {
-  const [theme, setTheme] = useState<'light' | 'dark'>('dark');
+  const [theme, setTheme] = useState<'light' | 'dark'>('light');
 
   useEffect(() => {
     const savedTheme = localStorage.getItem('apiclaw-theme') as 'light' | 'dark' | null;
-    const systemTheme = window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
-    const initialTheme = savedTheme || systemTheme;
+    // Default to light for docs
+    const initialTheme = savedTheme || 'light';
     setTheme(initialTheme);
     document.documentElement.classList.toggle('dark', initialTheme === 'dark');
   }, []);
@@ -33,14 +33,14 @@ export default function DocsPage() {
               APIClaw
             </span>
           </Link>
-          <nav className="flex items-center gap-6">
-            <Link href="/" className="text-[var(--text-secondary)] hover:text-[var(--accent)] transition-colors">Home</Link>
-            <Link href="/providers" className="text-[var(--text-secondary)] hover:text-[var(--accent)] transition-colors">Providers</Link>
-            <Link href="/earn" className="text-[var(--text-secondary)] hover:text-[var(--accent)] transition-colors">Earn Credits</Link>
+          <nav className="flex items-center gap-4 md:gap-6">
+            <Link href="/" className="hidden sm:block text-[var(--text-secondary)] hover:text-[var(--accent)] transition-colors text-sm md:text-base">Home</Link>
+            <Link href="/providers" className="hidden md:block text-[var(--text-secondary)] hover:text-[var(--accent)] transition-colors text-sm md:text-base">Providers</Link>
+            <Link href="/earn" className="hidden md:block text-[var(--text-secondary)] hover:text-[var(--accent)] transition-colors text-sm md:text-base">Earn Credits</Link>
             <a 
               href="https://github.com/nordsym/apiclaw" 
               target="_blank"
-              className="text-[var(--text-secondary)] hover:text-[var(--accent)] transition-colors"
+              className="text-[var(--text-secondary)] hover:text-[var(--accent)] transition-colors text-sm md:text-base"
             >
               GitHub
             </a>
@@ -112,6 +112,67 @@ export default function DocsPage() {
           </div>
         </section>
 
+
+        {/* Examples */}
+        <section className="mb-16">
+          <h2 className="text-2xl font-bold mb-6 flex items-center gap-3">
+            <span className="text-[var(--accent)]">💡</span> Examples
+          </h2>
+          
+          <div className="space-y-6">
+            <div className="bg-[var(--surface)] border border-[var(--border)] rounded-xl p-6">
+              <h3 className="text-lg font-semibold mb-4">Send an SMS</h3>
+              <pre className="bg-[var(--surface-elevated)] border border-[var(--border)] rounded-lg p-4 overflow-x-auto">
+                <code className="text-sm">
+                  <span className="text-[var(--text-muted)]">// Find SMS providers for Sweden</span>{'\n'}
+                  <span className="text-purple-600 dark:text-purple-400">discover_apis</span>({'{ '}<span className="text-sky-600 dark:text-sky-400">query</span>: <span className="text-emerald-600 dark:text-emerald-400">&quot;send SMS Sweden&quot;</span>{' }'}){'\n\n'}
+                  <span className="text-[var(--text-muted)]">// Send via direct-call</span>{'\n'}
+                  <span className="text-purple-600 dark:text-purple-400">call_api</span>({'{\n'}
+                  {"  "}<span className="text-sky-600 dark:text-sky-400">provider</span>: <span className="text-emerald-600 dark:text-emerald-400">&quot;46elks&quot;</span>,{'\n'}
+                  {"  "}<span className="text-sky-600 dark:text-sky-400">endpoint</span>: <span className="text-emerald-600 dark:text-emerald-400">&quot;sms&quot;</span>,{'\n'}
+                  {"  "}<span className="text-sky-600 dark:text-sky-400">params</span>: {'{\n'}
+                  {"    "}<span className="text-sky-600 dark:text-sky-400">to</span>: <span className="text-emerald-600 dark:text-emerald-400">&quot;+46701234567&quot;</span>,{'\n'}
+                  {"    "}<span className="text-sky-600 dark:text-sky-400">message</span>: <span className="text-emerald-600 dark:text-emerald-400">&quot;Hello from APIClaw!&quot;</span>{'\n'}
+                  {"  }"}{'\n'}
+                  {'}'})
+                </code>
+              </pre>
+            </div>
+
+            <div className="bg-[var(--surface)] border border-[var(--border)] rounded-xl p-6">
+              <h3 className="text-lg font-semibold mb-4">Search the web</h3>
+              <pre className="bg-[var(--surface-elevated)] border border-[var(--border)] rounded-lg p-4 overflow-x-auto">
+                <code className="text-sm">
+                  <span className="text-purple-600 dark:text-purple-400">call_api</span>({'{\n'}
+                  {"  "}<span className="text-sky-600 dark:text-sky-400">provider</span>: <span className="text-emerald-600 dark:text-emerald-400">&quot;brave_search&quot;</span>,{'\n'}
+                  {"  "}<span className="text-sky-600 dark:text-sky-400">endpoint</span>: <span className="text-emerald-600 dark:text-emerald-400">&quot;search&quot;</span>,{'\n'}
+                  {"  "}<span className="text-sky-600 dark:text-sky-400">params</span>: {'{ '}<span className="text-sky-600 dark:text-sky-400">query</span>: <span className="text-emerald-600 dark:text-emerald-400">&quot;best MCP servers 2026&quot;</span>{' }'}{'\n'}
+                  {'}'})
+                </code>
+              </pre>
+            </div>
+
+            <div className="bg-[var(--surface)] border border-[var(--border)] rounded-xl p-6">
+              <h3 className="text-lg font-semibold mb-4">Generate speech</h3>
+              <pre className="bg-[var(--surface-elevated)] border border-[var(--border)] rounded-lg p-4 overflow-x-auto">
+                <code className="text-sm">
+                  <span className="text-purple-600 dark:text-purple-400">call_api</span>({'{\n'}
+                  {"  "}<span className="text-sky-600 dark:text-sky-400">provider</span>: <span className="text-emerald-600 dark:text-emerald-400">&quot;elevenlabs&quot;</span>,{'\n'}
+                  {"  "}<span className="text-sky-600 dark:text-sky-400">endpoint</span>: <span className="text-emerald-600 dark:text-emerald-400">&quot;tts&quot;</span>,{'\n'}
+                  {"  "}<span className="text-sky-600 dark:text-sky-400">params</span>: {'{\n'}
+                  {"    "}<span className="text-sky-600 dark:text-sky-400">text</span>: <span className="text-emerald-600 dark:text-emerald-400">&quot;Hello, I am an AI agent!&quot;</span>,{'\n'}
+                  {"    "}<span className="text-sky-600 dark:text-sky-400">voice</span>: <span className="text-emerald-600 dark:text-emerald-400">&quot;adam&quot;</span>{'\n'}
+                  {"  }"}{'\n'}
+                  {'}'})
+                </code>
+              </pre>
+            </div>
+          </div>
+        </section>
+
+        {/* For Providers */}
+        <section className="mb-16">
+
         {/* Tools Reference */}
         <section className="mb-16">
           <h2 className="text-2xl font-bold mb-6 flex items-center gap-3">
@@ -143,10 +204,10 @@ export default function DocsPage() {
               <div className="mt-4 text-sm text-[var(--text-muted)]">
                 <strong className="text-[var(--text-primary)]">Parameters:</strong>
                 <ul className="list-disc list-inside mt-2 space-y-1">
-                  <li><code className="text-[var(--accent)]">query</code> — Natural language description</li>
-                  <li><code className="text-[var(--accent)]">category</code> — Filter: communication, search, ai</li>
-                  <li><code className="text-[var(--accent)]">max_results</code> — Number of results (default: 5)</li>
-                  <li><code className="text-[var(--accent)]">region</code> — Filter by region (e.g., &quot;sweden&quot;)</li>
+                  <li><code className="text-[var(--accent)]">query</code> - Natural language description</li>
+                  <li><code className="text-[var(--accent)]">category</code> - Filter: communication, search, ai</li>
+                  <li><code className="text-[var(--accent)]">max_results</code> - Number of results (default: 5)</li>
+                  <li><code className="text-[var(--accent)]">region</code> - Filter by region (e.g., &quot;sweden&quot;)</li>
                 </ul>
               </div>
             </div>
@@ -167,19 +228,19 @@ export default function DocsPage() {
             {/* get_connected_providers */}
             <div className="bg-[var(--surface)] border border-[var(--border)] rounded-xl p-6">
               <h3 className="text-lg font-mono text-[var(--accent)] mb-2">get_connected_providers</h3>
-              <p className="text-[var(--text-secondary)] mb-4">List all instant-connect providers (no API key needed).</p>
+              <p className="text-[var(--text-secondary)] mb-4">List all direct-call providers (no API key needed).</p>
               <pre className="bg-[var(--surface-elevated)] border border-[var(--border)] rounded-lg p-4 overflow-x-auto">
                 <code className="text-sm text-[var(--text-primary)]">get_connected_providers()</code>
               </pre>
               <div className="mt-4 text-sm text-[var(--text-muted)]">
                 <strong className="text-[var(--text-primary)]">Currently available:</strong>
                 <ul className="list-disc list-inside mt-2 space-y-1">
-                  <li><code className="text-[var(--accent)]">brave_search</code> — Web search</li>
-                  <li><code className="text-[var(--accent)]">46elks</code> — SMS (Sweden)</li>
-                  <li><code className="text-[var(--accent)]">twilio</code> — SMS (Global)</li>
-                  <li><code className="text-[var(--accent)]">resend</code> — Email</li>
-                  <li><code className="text-[var(--accent)]">openrouter</code> — LLM routing</li>
-                  <li><code className="text-[var(--accent)]">elevenlabs</code> — Text-to-speech</li>
+                  <li><code className="text-[var(--accent)]">brave_search</code> - Web search</li>
+                  <li><code className="text-[var(--accent)]">46elks</code> - SMS (Sweden)</li>
+                  <li><code className="text-[var(--accent)]">twilio</code> - SMS (Global)</li>
+                  <li><code className="text-[var(--accent)]">resend</code> - Email</li>
+                  <li><code className="text-[var(--accent)]">openrouter</code> - LLM routing</li>
+                  <li><code className="text-[var(--accent)]">elevenlabs</code> - Text-to-speech</li>
                 </ul>
               </div>
             </div>
@@ -187,7 +248,7 @@ export default function DocsPage() {
             {/* call_api */}
             <div className="bg-[var(--surface)] border border-[var(--border)] rounded-xl p-6">
               <h3 className="text-lg font-mono text-[var(--accent)] mb-2">call_api</h3>
-              <p className="text-[var(--text-secondary)] mb-4">Execute an API call through an instant-connect provider.</p>
+              <p className="text-[var(--text-secondary)] mb-4">Execute an API call through an direct-call provider.</p>
               <pre className="bg-[var(--surface-elevated)] border border-[var(--border)] rounded-lg p-4 overflow-x-auto">
                 <code className="text-sm">
                   <span className="text-purple-600 dark:text-purple-400">call_api</span>({'{\n'}
@@ -209,66 +270,6 @@ export default function DocsPage() {
             </div>
           </div>
         </section>
-
-        {/* Examples */}
-        <section className="mb-16">
-          <h2 className="text-2xl font-bold mb-6 flex items-center gap-3">
-            <span className="text-[var(--accent)]">💡</span> Examples
-          </h2>
-          
-          <div className="space-y-6">
-            <div className="bg-[var(--surface)] border border-[var(--border)] rounded-xl p-6">
-              <h3 className="text-lg font-semibold mb-4">Send an SMS</h3>
-              <pre className="bg-[var(--surface-elevated)] border border-[var(--border)] rounded-lg p-4 overflow-x-auto">
-                <code className="text-sm">
-                  <span className="text-[var(--text-muted)]">// Find SMS providers for Sweden</span>{'\n'}
-                  <span className="text-purple-600 dark:text-purple-400">discover_apis</span>({'{ '}<span className="text-sky-600 dark:text-sky-400">query</span>: <span className="text-emerald-600 dark:text-emerald-400">&quot;send SMS Sweden&quot;</span>{' }'}){'\n\n'}
-                  <span className="text-[var(--text-muted)]">// Send via instant-connect</span>{'\n'}
-                  <span className="text-purple-600 dark:text-purple-400">call_api</span>({'{\n'}
-                  {"  "}<span className="text-sky-600 dark:text-sky-400">provider</span>: <span className="text-emerald-600 dark:text-emerald-400">&quot;46elks&quot;</span>,{'\n'}
-                  {"  "}<span className="text-sky-600 dark:text-sky-400">endpoint</span>: <span className="text-emerald-600 dark:text-emerald-400">&quot;sms&quot;</span>,{'\n'}
-                  {"  "}<span className="text-sky-600 dark:text-sky-400">params</span>: {'{\n'}
-                  {"    "}<span className="text-sky-600 dark:text-sky-400">to</span>: <span className="text-emerald-600 dark:text-emerald-400">&quot;+46701234567&quot;</span>,{'\n'}
-                  {"    "}<span className="text-sky-600 dark:text-sky-400">message</span>: <span className="text-emerald-600 dark:text-emerald-400">&quot;Hello from APIClaw!&quot;</span>{'\n'}
-                  {"  }"}{'\n'}
-                  {'}'})
-                </code>
-              </pre>
-            </div>
-
-            <div className="bg-[var(--surface)] border border-[var(--border)] rounded-xl p-6">
-              <h3 className="text-lg font-semibold mb-4">Search the web</h3>
-              <pre className="bg-[var(--surface-elevated)] border border-[var(--border)] rounded-lg p-4 overflow-x-auto">
-                <code className="text-sm">
-                  <span className="text-purple-600 dark:text-purple-400">call_api</span>({'{\n'}
-                  {"  "}<span className="text-sky-600 dark:text-sky-400">provider</span>: <span className="text-emerald-600 dark:text-emerald-400">&quot;brave_search&quot;</span>,{'\n'}
-                  {"  "}<span className="text-sky-600 dark:text-sky-400">endpoint</span>: <span className="text-emerald-600 dark:text-emerald-400">&quot;search&quot;</span>,{'\n'}
-                  {"  "}<span className="text-sky-600 dark:text-sky-400">params</span>: {'{ '}<span className="text-sky-600 dark:text-sky-400">query</span>: <span className="text-emerald-600 dark:text-emerald-400">&quot;best MCP servers 2026&quot;</span>{' }'}{'\n'}
-                  {'}'})
-                </code>
-              </pre>
-            </div>
-
-            <div className="bg-[var(--surface)] border border-[var(--border)] rounded-xl p-6">
-              <h3 className="text-lg font-semibold mb-4">Generate speech</h3>
-              <pre className="bg-[var(--surface-elevated)] border border-[var(--border)] rounded-lg p-4 overflow-x-auto">
-                <code className="text-sm">
-                  <span className="text-purple-600 dark:text-purple-400">call_api</span>({'{\n'}
-                  {"  "}<span className="text-sky-600 dark:text-sky-400">provider</span>: <span className="text-emerald-600 dark:text-emerald-400">&quot;elevenlabs&quot;</span>,{'\n'}
-                  {"  "}<span className="text-sky-600 dark:text-sky-400">endpoint</span>: <span className="text-emerald-600 dark:text-emerald-400">&quot;tts&quot;</span>,{'\n'}
-                  {"  "}<span className="text-sky-600 dark:text-sky-400">params</span>: {'{\n'}
-                  {"    "}<span className="text-sky-600 dark:text-sky-400">text</span>: <span className="text-emerald-600 dark:text-emerald-400">&quot;Hello, I am an AI agent!&quot;</span>,{'\n'}
-                  {"    "}<span className="text-sky-600 dark:text-sky-400">voice</span>: <span className="text-emerald-600 dark:text-emerald-400">&quot;adam&quot;</span>{'\n'}
-                  {"  }"}{'\n'}
-                  {'}'})
-                </code>
-              </pre>
-            </div>
-          </div>
-        </section>
-
-        {/* For Providers */}
-        <section className="mb-16">
           <h2 className="text-2xl font-bold mb-6 flex items-center gap-3">
             <span className="text-[var(--accent)]">🤝</span> For API Providers
           </h2>
@@ -278,8 +279,8 @@ export default function DocsPage() {
             </p>
             <ul className="list-disc list-inside text-[var(--text-secondary)] space-y-2 mb-6">
               <li>Get discovered by AI agents searching for your capabilities</li>
-              <li>Direct Connect integration — agents use your API instantly</li>
-              <li>Analytics dashboard — see how agents use your API</li>
+              <li>Direct Connect integration. Agents use your API instantly</li>
+              <li>Analytics dashboard. See how agents use your API</li>
               <li>Revenue share on premium tiers</li>
             </ul>
             <Link 

package/landing/src/app/earn/page.tsx

@@ -73,12 +73,12 @@ export default function EarnPage() {
   const [email, setEmail] = useState('');
   const [subscribed, setSubscribed] = useState(false);
   const [totalCredits] = useState(1350); // Demo value
-  const [theme, setTheme] = useState<'light' | 'dark'>('dark');
+  const [theme, setTheme] = useState<'light' | 'dark'>('light');
 
   useEffect(() => {
     const savedTheme = localStorage.getItem('apiclaw-theme') as 'light' | 'dark' | null;
-    const systemTheme = window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
-    const initialTheme = savedTheme || systemTheme;
+    // Default to light
+    const initialTheme = savedTheme || 'light';
     setTheme(initialTheme);
     document.documentElement.classList.toggle('dark', initialTheme === 'dark');
   }, []);
@@ -116,14 +116,14 @@ export default function EarnPage() {
               APIClaw
             </span>
           </Link>
-          <nav className="flex items-center gap-6">
-            <Link href="/" className="text-[var(--text-secondary)] hover:text-[var(--accent)] transition-colors">
+          <nav className="flex items-center gap-4 md:gap-6">
+            <Link href="/" className="hidden sm:block text-[var(--text-secondary)] hover:text-[var(--accent)] transition-colors text-sm md:text-base">
               Home
             </Link>
-            <Link href="/docs" className="text-[var(--text-secondary)] hover:text-[var(--accent)] transition-colors">
+            <Link href="/docs" className="text-[var(--text-secondary)] hover:text-[var(--accent)] transition-colors text-sm md:text-base">
               Docs
             </Link>
-            <Link href="/providers" className="text-[var(--text-secondary)] hover:text-[var(--accent)] transition-colors">
+            <Link href="/providers" className="hidden md:block text-[var(--text-secondary)] hover:text-[var(--accent)] transition-colors text-sm md:text-base">
               Providers
             </Link>
             <button
@@ -278,7 +278,7 @@ export default function EarnPage() {
               </div>
               <h3 className="font-semibold mb-2">Use</h3>
               <p className="text-[var(--text-secondary)] text-sm">
-                Spend credits on API calls — SMS, search, AI, and more
+                Spend credits on API calls: SMS, search, AI, and more
               </p>
             </div>
             <div className="text-center">

package/landing/src/app/page.tsx

@@ -29,7 +29,7 @@ const howItWorks = [
   {
     step: "1",
     title: "Agent Asks",
-    description: "Your agent queries APIClaw for a capability—not a product name.",
+    description: "Your agent queries APIClaw for a capability. Not a product name.",
     icon: Search,
     codeJsx: (
       <>
@@ -63,7 +63,7 @@ const howItWorks = [
   {
     step: "3",
     title: "Agent Integrates",
-    description: "Full specs, auth details, endpoints—everything to start building.",
+    description: "Full specs, auth details, endpoints. Everything to start building.",
     icon: Rocket,
     codeJsx: (
       <>
@@ -92,7 +92,7 @@ const agentBenefits = [
   {
     icon: Database,
     title: "Structured Data",
-    description: "JSON responses with pricing, limits, regions, auth—everything an agent needs.",
+    description: "JSON responses with pricing, limits, regions, auth. Everything an agent needs.",
   },
   {
     icon: Shield,
@@ -137,12 +137,25 @@ const terminalLines = [
   { type: "accent", text: "→ Add to Claude Desktop: Settings → MCP → Add Server", delay: 0 },
 ];
 
+const directCallProviders = [
+  { name: "46elks", desc: "SMS (Sweden)" },
+  { name: "Twilio", desc: "SMS (Global)" },
+  { name: "Resend", desc: "Email" },
+  { name: "Brave Search", desc: "Web search" },
+  { name: "OpenRouter", desc: "100+ LLMs" },
+  { name: "ElevenLabs", desc: "Text-to-speech" },
+  { name: "Firecrawl", desc: "Web scraping" },
+  { name: "GitHub", desc: "Repos & Issues" },
+  { name: "Replicate", desc: "1000s of ML models" },
+];
+
 export default function Home() {
   const [isDark, setIsDark] = useState(true);
   const [terminalOutput, setTerminalOutput] = useState<typeof terminalLines>([]);
   const [isTyping, setIsTyping] = useState(true);
   const [currentLineIndex, setCurrentLineIndex] = useState(0);
   const [activeSection, setActiveSection] = useState<string>("");
+  const [showProvidersModal, setShowProvidersModal] = useState(false);
   const terminalRef = useRef<HTMLDivElement>(null);
 
   // Scroll-based active section detection using Intersection Observer
@@ -289,8 +302,16 @@ export default function Home() {
           <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 className="flex flex-wrap items-center justify-center lg:justify-start gap-3 mb-6">
+                <div className="badge badge-live 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>
+                <button 
+                  onClick={() => setShowProvidersModal(true)}
+                  className="badge inline-flex bg-accent/10 border-accent/30 text-accent hover:bg-accent/20 transition-colors cursor-pointer"
+                >
+                  <span className="flex items-center gap-2"><Zap className="w-3 h-3" />Direct Call: SMS, Email, Search, AI & more</span>
+                </button>
               </div>
               
               <h1 className="text-5xl md:text-6xl lg:text-7xl font-black mb-6 leading-[1.05] tracking-tighter">
@@ -321,15 +342,19 @@ export default function Home() {
                   <span className="text-xs opacity-70">copy</span>
                 </button>
                 <a
-                  href="https://github.com/nordsym/apiclaw"
-                  target="_blank"
-                  rel="noopener noreferrer"
+                  href="/docs"
                   className="btn-secondary"
                 >
-                  <Github className="w-5 h-5" />
-                  View on GitHub
+                  Get Started
+                  <ArrowRight className="w-5 h-5" />
                 </a>
               </div>
+              
+              {/* Social proof */}
+              <p className="text-sm text-text-muted mt-4 flex items-center gap-2">
+                <Users className="w-4 h-4" />
+                <span>The API layer agent builders are switching to</span>
+              </p>
 
                           </div>
 
@@ -340,7 +365,7 @@ export default function Home() {
                   <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>
+                  <span className="terminal-title">apiclaw</span>
                 </div>
                 <div className="terminal-body">
                   {terminalOutput.map((line, i) => (
@@ -392,6 +417,118 @@ export default function Home() {
         </div>
       </section>
 
+      {/* Before/After */}
+      <section className="py-12 px-6">
+        <div className="max-w-4xl mx-auto">
+          <div className="grid md:grid-cols-2 gap-8">
+            <div className="p-6 rounded-xl border border-red-500/20 bg-red-500/5">
+              <div className="flex items-center gap-2 text-red-400 font-medium mb-4">
+                <span className="text-xl">😤</span> Without APIClaw
+              </div>
+              <ul className="space-y-3 text-text-secondary">
+                <li className="flex items-start gap-2">
+                  <span className="text-red-400 mt-1">✗</span>
+                  <span>3+ hours searching for the right API</span>
+                </li>
+                <li className="flex items-start gap-2">
+                  <span className="text-red-400 mt-1">✗</span>
+                  <span>Create accounts, manage API keys</span>
+                </li>
+                <li className="flex items-start gap-2">
+                  <span className="text-red-400 mt-1">✗</span>
+                  <span>Read docs, figure out auth, test endpoints</span>
+                </li>
+                <li className="flex items-start gap-2">
+                  <span className="text-red-400 mt-1">✗</span>
+                  <span>Your agent waits... and waits...</span>
+                </li>
+              </ul>
+            </div>
+            <div className="p-6 rounded-xl border border-green-500/20 bg-green-500/5">
+              <div className="flex items-center gap-2 text-green-400 font-medium mb-4">
+                <span className="text-xl">🦞</span> With APIClaw
+              </div>
+              <ul className="space-y-3 text-text-secondary">
+                <li className="flex items-start gap-2">
+                  <span className="text-green-400 mt-1">✓</span>
+                  <span><strong>∞ hours saved</strong> per integration</span>
+                </li>
+                <li className="flex items-start gap-2">
+                  <span className="text-green-400 mt-1">✓</span>
+                  <span>No accounts, no API keys needed</span>
+                </li>
+                <li className="flex items-start gap-2">
+                  <span className="text-green-400 mt-1">✓</span>
+                  <span>Direct Call: SMS, Email, AI, and more</span>
+                </li>
+                <li className="flex items-start gap-2">
+                  <span className="text-green-400 mt-1">✓</span>
+                  <span>Your agent ships. Today.</span>
+                </li>
+              </ul>
+            </div>
+          </div>
+          <p className="text-center text-sm text-text-muted mt-8">
+            <Rocket className="w-4 h-4 inline mr-1" />
+            New Direct Call providers added weekly
+          </p>
+        </div>
+      </section>
+
+      {/* Quick Start */}
+      <section className="py-16 px-6 bg-surface/50">
+        <div className="max-w-3xl mx-auto">
+          <div className="text-center mb-8">
+            <h2 className="text-2xl md:text-3xl font-bold flex items-center justify-center gap-3">
+              <Zap className="w-6 h-6 text-accent" />
+              Quick Start
+            </h2>
+            <p className="text-text-secondary mt-2">Get running in 30 seconds</p>
+          </div>
+          
+          <div className="grid md:grid-cols-2 gap-6">
+            {/* Install */}
+            <div className="code-preview">
+              <div className="code-preview-header">
+                terminal
+              </div>
+              <div className="code-preview-body">
+                <pre className="text-sm whitespace-pre-wrap">
+                  <span className="text-gray-500"># Run directly with npx</span>{"\n"}
+                  <span className="text-green-400">$</span> <span className="text-blue-400">npx</span> @nordsym/apiclaw{"\n\n"}
+                  <span className="text-gray-500"># Or install globally</span>{"\n"}
+                  <span className="text-green-400">$</span> <span className="text-blue-400">npm</span> install -g @nordsym/apiclaw{"\n"}
+                  <span className="text-green-400">$</span> apiclaw
+                </pre>
+              </div>
+            </div>
+
+            {/* MCP Config */}
+            <div className="code-preview">
+              <div className="code-preview-header">
+                claude_desktop_config.json
+              </div>
+              <div className="code-preview-body">
+                <pre className="text-sm whitespace-pre-wrap">
+                  <span className="text-gray-500">{"{"}</span>{"\n"}
+                  {"  "}<span className="text-red-400">"mcpServers"</span>: <span className="text-gray-500">{"{"}</span>{"\n"}
+                  {"    "}<span className="text-red-400">"apiclaw"</span>: <span className="text-gray-500">{"{"}</span>{"\n"}
+                  {"      "}<span className="text-red-400">"command"</span>: <span className="text-green-400">"npx"</span>,{"\n"}
+                  {"      "}<span className="text-red-400">"args"</span>: [<span className="text-green-400">"@nordsym/apiclaw"</span>]{"\n"}
+                  {"    "}<span className="text-gray-500">{"}"}</span>{"\n"}
+                  {"  "}<span className="text-gray-500">{"}"}</span>{"\n"}
+                  <span className="text-gray-500">{"}"}</span>
+                </pre>
+              </div>
+            </div>
+          </div>
+          
+          <p className="text-center text-sm text-text-muted mt-6">
+            Works with Claude Desktop, Cursor, and any MCP-compatible client
+          </p>
+        </div>
+      </section>
+
       <div className="divider" />
 
       {/* How It Works */}
@@ -482,7 +619,7 @@ export default function Home() {
 
             <div className="code-preview">
               <div className="code-preview-header">
-                agent.ts — Claude Agent Example
+                agent.ts
               </div>
               <div className="code-preview-body">
                 <pre className="text-sm">
@@ -579,7 +716,7 @@ export default function Home() {
               </h2>
               
               <p className="text-text-secondary text-lg mb-8 leading-relaxed">
-                AI agents are the new developers. They don't browse landing pages—
+                AI agents are the new developers. They don't browse landing pages. 
                 they query capabilities. Get your API in front of them.
               </p>
 
@@ -661,9 +798,10 @@ export default function Home() {
               </div>
               <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 className="text-3xl font-bold mb-2 text-text-muted">
+                Free Beta
               </div>
+              <p className="text-sm text-text-muted mb-4">Early adopters get extended free access</p>
               <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" />
@@ -828,6 +966,61 @@ export default function Home() {
           <span className="text-text-primary font-medium">Talk to the Clawdbot building this</span>
         </div>
       </a>
+
+      {/* Direct Call Providers Modal */}
+      {showProvidersModal && (
+        <div 
+          className="fixed inset-0 z-[100] flex items-center justify-center p-4 bg-black/60 backdrop-blur-sm"
+          onClick={() => setShowProvidersModal(false)}
+        >
+          <div 
+            className="bg-background border border-border rounded-2xl shadow-2xl max-w-md w-full max-h-[80vh] overflow-hidden"
+            onClick={(e) => e.stopPropagation()}
+          >
+            <div className="p-6 border-b border-border">
+              <div className="flex items-center justify-between">
+                <h3 className="text-xl font-bold flex items-center gap-2">
+                  <Zap className="w-5 h-5 text-accent" />
+                  Direct Call Providers
+                </h3>
+                <button 
+                  onClick={() => setShowProvidersModal(false)}
+                  className="p-2 hover:bg-surface rounded-lg transition-colors"
+                >
+                  <span className="text-xl">×</span>
+                </button>
+              </div>
+              <p className="text-sm text-text-muted mt-1">No API keys needed. Call directly through APIClaw.</p>
+            </div>
+            
+            <div className="p-4 max-h-[40vh] overflow-y-auto">
+              <div className="grid grid-cols-2 gap-3">
+                {directCallProviders.map((provider, i) => (
+                  <div key={i} className="p-3 rounded-xl bg-surface border border-border">
+                    <div className="font-medium text-sm">{provider.name}</div>
+                    <div className="text-xs text-text-muted">{provider.desc}</div>
+                  </div>
+                ))}
+              </div>
+            </div>
+            
+            <div className="p-6 border-t border-border bg-surface/50">
+              <p className="text-sm text-text-secondary mb-4 text-center">
+                Want your API here? Get discovered by thousands of AI agents.
+              </p>
+              <a
+                href="https://nordsym.github.io/NordSym-Scheduler/"
+                target="_blank"
+                rel="noopener noreferrer"
+                className="btn-primary w-full justify-center"
+              >
+                <span>Book a Call</span>
+                <ArrowRight className="w-4 h-4" />
+              </a>
+            </div>
+          </div>
+        </div>
+      )}
     </main>
   );
 }