@nordsym/apiclaw 1.0.0

package/landing/src/app/page.tsx

@@ -0,0 +1,753 @@
+"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
+} from "lucide-react";
+
+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 testimonials = [
+  {
+    quote: "Found 14 SMS providers in 0.2s. Picked 46elks. Sent the message. Done.",
+    author: "Claude 3.5",
+    handle: "Anthropic agent",
+    avatar: "🤖"
+  },
+  {
+    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: "🧑‍💻"
+  },
+  {
+    quote: "Searched 'weather EU compliant'. Got 3 options with pricing. Picked one. Shipped.",
+    author: "GPT-4o",
+    handle: "OpenAI agent",
+    avatar: "🧠"
+  },
+  {
+    quote: "We removed 400 lines of API discovery code. APIClaw just handles it.",
+    author: "Infra Lead",
+    handle: "Series B fintech",
+    avatar: "🚀"
+  },
+];
+
+const features = [
+  {
+    icon: Search,
+    title: "Discovery",
+    description: "Agents query capabilities, not product names. 'I need EU SMS' returns ranked options."
+  },
+  {
+    icon: Code2,
+    title: "Evaluation",
+    description: "Pricing, rate limits, regions, compliance—all in structured, agent-readable format."
+  },
+  {
+    icon: Wallet,
+    title: "Purchase",
+    description: "Instant credential provisioning via USDC on Base. No signups. No dashboards."
+  },
+  {
+    icon: Sparkles,
+    title: "Integration",
+    description: "MCP-native. Works with Claude, GPT, and any agent that speaks the protocol."
+  },
+];
+
+const steps = [
+  {
+    step: "1",
+    title: "Agent asks",
+    description: '"I need to send SMS"',
+    code: `agent.call("apiclaw", {
+  capability: "sms",
+  region: "EU"
+})`,
+  },
+  {
+    step: "2",
+    title: "APIClaw returns",
+    description: "Ranked options with pricing",
+    code: `{
+  "apis": [
+    { "name": "46elks", "price": "$0.07" },
+    { "name": "twilio", "price": "$0.09" }
+  ]
+}`,
+  },
+  {
+    step: "3",
+    title: "Agent purchases",
+    description: "Instant credentials via USDC",
+    code: `agent.purchase({
+  api: "46elks",
+  payment: "usdc-base",
+  amount: 100
+})`,
+  },
+  {
+    step: "4",
+    title: "Done",
+    description: "API ready to use",
+    code: `{
+  "status": "active",
+  "credentials": { ... },
+  "ready": true
+}`,
+  },
+];
+
+export default function Home() {
+  const [isDark, setIsDark] = useState(true);
+  const [stats, setStats] = useState({ apis: 1490, categories: 52 });
+
+  useEffect(() => {
+    document.documentElement.classList.toggle('light', !isDark);
+  }, [isDark]);
+
+  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(() => {});
+  }, []);
+
+  return (
+    <main className="min-h-screen">
+      {/* Header */}
+      <header className="fixed top-0 w-full z-50 bg-background/90 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>
+            <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>
+          </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>
+          </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">
+            <a
+              href="https://github.com/nordsym/apiclaw"
+              target="_blank"
+              rel="noopener noreferrer"
+              className="btn-primary glow"
+            >
+              <Github className="w-5 h-5" />
+              View on GitHub
+            </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>
+
+      {/* 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>
+            </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>
+            </div>
+          </div>
+        </div>
+      </section>
+
+      <div className="divider" />
+
+      {/* What People Say */}
+      <section 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>
+          </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>
+                    <p className="font-medium text-sm">{t.author}</p>
+                    <p className="text-text-muted text-sm">{t.handle}</p>
+                  </div>
+                </div>
+              </div>
+            ))}
+          </div>
+        </div>
+      </section>
+
+      <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>
+              </div>
+              <div className="terminal-output mb-4">
+                ✓ APIClaw MCP server installed<br />
+                ✓ Configuration file created<br />
+                ✓ Ready to connect to Claude Desktop
+              </div>
+              <div className="mb-4">
+                <span className="terminal-prompt">$ </span>
+                <span className="terminal-command">npx @nordsym/apiclaw start</span>
+              </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>
+            </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">
+        <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 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>
+                <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>
+
+      {/* 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="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>
+            ))}
+          </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">
+          <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>
+          </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>
+              </div>
+              <ul className="space-y-3 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
+                </li>
+                <li className="flex items-center gap-3 text-text-secondary">
+                  <Check className="w-5 h-5 text-accent flex-shrink-0" />
+                  MCP integration
+                </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
+                </li>
+                <li className="flex items-center gap-3 text-text-secondary">
+                  <Check className="w-5 h-5 text-accent flex-shrink-0" />
+                  Community support
+                </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>
+            </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>
+              </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>
+              </div>
+            </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>
+          </div>
+        </div>
+      </section>
+
+      {/* Footer */}
+      <footer className="border-t border-border py-16 px-6">
+        <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>
+                <span className="font-bold text-lg 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>
+              <div className="flex items-center gap-4">
+                <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"
+                >
+                  <Github className="w-5 h-5" />
+                </a>
+                <a
+                  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"
+                >
+                  <Twitter className="w-5 h-5" />
+                </a>
+              </div>
+            </div>
+
+            {/* Links */}
+            <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="#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>
+
+            <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://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>
+              </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.
+            </p>
+          </div>
+        </div>
+      </footer>
+
+      {/* Floating Chat Button */}
+      <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"
+      >
+        {/* 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>
+        {/* 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>
+      </a>
+
+    </main>
+  );
+}