@nordsym/apiclaw 1.0.0 → 1.1.1

package/landing/package.json

@@ -4,16 +4,19 @@
   "private": true,
   "scripts": {
     "dev": "next dev",
+    "prebuild": "node scripts/generate-stats.js",
     "build": "next build",
     "start": "next start",
     "lint": "next lint"
   },
   "dependencies": {
     "@vercel/analytics": "^1.6.1",
+    "@vercel/og": "^0.8.6",
     "lucide-react": "^0.350.0",
     "next": "^14.2.0",
     "react": "^18.2.0",
-    "react-dom": "^18.2.0"
+    "react-dom": "^18.2.0",
+    "recharts": "^3.7.0"
   },
   "devDependencies": {
     "@types/node": "^20",
@@ -21,6 +24,7 @@
     "@types/react-dom": "^18",
     "autoprefixer": "^10",
     "postcss": "^8",
+    "sharp": "^0.34.5",
     "tailwindcss": "^3.4.1",
     "typescript": "^5"
   }

package/landing/public/favicon.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
+  <text y=".9em" font-size="90">🦞</text>
+</svg>

package/landing/public/icon.svg

@@ -0,0 +1,47 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="512" height="512" viewBox="0 0 512 512" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <!-- APIClaw App Icon - with background -->
+  <defs>
+    <linearGradient id="icon-gradient" x1="0%" y1="0%" x2="100%" y2="100%">
+      <stop offset="0%" stop-color="#f87171"/>
+      <stop offset="100%" stop-color="#dc2626"/>
+    </linearGradient>
+    <linearGradient id="bg-gradient" x1="0%" y1="0%" x2="100%" y2="100%">
+      <stop offset="0%" stop-color="#171717"/>
+      <stop offset="100%" stop-color="#0a0a0a"/>
+    </linearGradient>
+  </defs>
+  
+  <!-- Background with subtle gradient -->
+  <rect width="512" height="512" rx="96" fill="url(#bg-gradient)"/>
+  
+  <!-- Claw centered and scaled -->
+  <g transform="translate(56, 56) scale(0.78)">
+    <g fill="url(#icon-gradient)">
+      <path d="M144 320 
+               C104 264 104 192 144 136
+               C184 80 256 56 328 80
+               C352 88 376 104 392 128
+               L344 176
+               C332 160 316 148 296 144
+               C248 132 200 152 176 192
+               C152 232 160 280 192 312
+               Z"/>
+      <path d="M192 312
+               C224 344 272 360 320 352
+               C368 344 408 312 424 264
+               L368 240
+               C360 268 336 292 304 300
+               C272 308 240 300 216 280
+               L192 312
+               Z"/>
+      <path d="M392 128
+               L424 184
+               C440 216 440 256 424 264
+               L368 240
+               C376 216 368 192 352 176
+               L344 176
+               Z"/>
+    </g>
+  </g>
+</svg>

package/landing/public/logo-mono.svg

@@ -0,0 +1,37 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="512" height="512" viewBox="0 0 512 512" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <!-- APIClaw Logo - Monochrome version -->
+  <!-- Uses currentColor for maximum flexibility -->
+  
+  <g fill="currentColor">
+    <!-- Upper pincer arm -->
+    <path d="M144 320 
+             C104 264 104 192 144 136
+             C184 80 256 56 328 80
+             C352 88 376 104 392 128
+             L344 176
+             C332 160 316 148 296 144
+             C248 132 200 152 176 192
+             C152 232 160 280 192 312
+             Z"/>
+    
+    <!-- Lower pincer arm -->
+    <path d="M192 312
+             C224 344 272 360 320 352
+             C368 344 408 312 424 264
+             L368 240
+             C360 268 336 292 304 300
+             C272 308 240 300 216 280
+             L192 312
+             Z"/>
+    
+    <!-- Sharp tip accent -->
+    <path d="M392 128
+             L424 184
+             C440 216 440 256 424 264
+             L368 240
+             C376 216 368 192 352 176
+             L344 176
+             Z"/>
+  </g>
+</svg>

package/landing/public/logo-simple.svg

@@ -0,0 +1,45 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="512" height="512" viewBox="0 0 512 512" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <!-- APIClaw Logo - Ultra Minimalist Claw Mark -->
+  <!-- Single color, works everywhere -->
+  
+  <defs>
+    <linearGradient id="brand-gradient" x1="0%" y1="0%" x2="100%" y2="100%">
+      <stop offset="0%" stop-color="#f87171"/>
+      <stop offset="100%" stop-color="#dc2626"/>
+    </linearGradient>
+  </defs>
+  
+  <!-- Abstract claw pincer - clean, geometric, memorable -->
+  <g fill="url(#brand-gradient)">
+    <!-- Upper pincer arm -->
+    <path d="M144 320 
+             C104 264 104 192 144 136
+             C184 80 256 56 328 80
+             C352 88 376 104 392 128
+             L344 176
+             C332 160 316 148 296 144
+             C248 132 200 152 176 192
+             C152 232 160 280 192 312
+             Z"/>
+    
+    <!-- Lower pincer arm -->
+    <path d="M192 312
+             C224 344 272 360 320 352
+             C368 344 408 312 424 264
+             L368 240
+             C360 268 336 292 304 300
+             C272 308 240 300 216 280
+             L192 312
+             Z"/>
+    
+    <!-- Sharp tip accent -->
+    <path d="M392 128
+             L424 184
+             C440 216 440 256 424 264
+             L368 240
+             C376 216 368 192 352 176
+             L344 176
+             Z"/>
+  </g>
+</svg>

package/landing/public/logo.svg

@@ -0,0 +1,84 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="512" height="512" viewBox="0 0 512 512" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <!-- APIClaw Lobster Claw Logo - Minimalist -->
+  <!-- Works on both light and dark backgrounds via currentColor -->
+  
+  <defs>
+    <linearGradient id="claw-gradient" x1="0%" y1="0%" x2="100%" y2="100%">
+      <stop offset="0%" stop-color="#ef4444"/>
+      <stop offset="50%" stop-color="#dc2626"/>
+      <stop offset="100%" stop-color="#b91c1c"/>
+    </linearGradient>
+    
+    <linearGradient id="claw-gradient-dark" x1="0%" y1="0%" x2="100%" y2="100%">
+      <stop offset="0%" stop-color="#f87171"/>
+      <stop offset="50%" stop-color="#ef4444"/>
+      <stop offset="100%" stop-color="#dc2626"/>
+    </linearGradient>
+  </defs>
+  
+  <g id="claw">
+    <!-- Main claw body - curved organic shape -->
+    <path 
+      d="M128 384 
+         C96 352 80 288 96 224 
+         C112 160 160 112 224 96 
+         C256 88 288 96 320 112
+         L280 168
+         C256 156 232 156 208 168
+         C168 188 144 232 152 280
+         C156 312 176 344 200 360
+         Z"
+      fill="url(#claw-gradient)"
+    />
+    
+    <!-- Upper pincer -->
+    <path 
+      d="M320 112
+         C368 136 400 176 416 232
+         C432 288 424 352 392 400
+         L336 360
+         C356 328 364 288 352 248
+         C340 208 312 176 280 168
+         Z"
+      fill="url(#claw-gradient)"
+    />
+    
+    <!-- Lower pincer - pointing down and in -->
+    <path 
+      d="M200 360
+         C232 384 272 392 312 384
+         C352 376 384 352 392 400
+         L384 416
+         C344 440 296 448 248 432
+         C200 416 160 384 128 384
+         Z"
+      fill="url(#claw-gradient)"
+    />
+    
+    <!-- Inner claw detail - the gap between pincers -->
+    <path 
+      d="M280 200
+         C304 216 320 248 316 280
+         C312 312 292 340 264 352
+         L248 320
+         C264 312 276 292 276 272
+         C276 252 264 232 248 224
+         Z"
+      fill="#0a0a0a"
+      fill-opacity="0.3"
+    />
+    
+    <!-- Highlight on upper curve -->
+    <path 
+      d="M160 200
+         C176 152 216 120 264 112
+         C248 128 224 152 208 184
+         C192 216 184 248 176 264
+         C168 240 160 216 160 200
+         Z"
+      fill="white"
+      fill-opacity="0.2"
+    />
+  </g>
+</svg>

package/landing/public/og-template.html

@@ -0,0 +1,184 @@
+
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="UTF-8">
+  <style>
+    @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;600;800&display=swap');
+    
+    * { margin: 0; padding: 0; box-sizing: border-box; }
+    
+    body {
+      width: 1200px;
+      height: 630px;
+      background: linear-gradient(135deg, #0a0a0a 0%, #171717 100%);
+      font-family: 'Inter', system-ui, sans-serif;
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
+      padding: 80px;
+      position: relative;
+      overflow: hidden;
+    }
+    
+    /* Background pattern */
+    .pattern {
+      position: absolute;
+      top: 0;
+      left: 0;
+      right: 0;
+      bottom: 0;
+      background-image: 
+        radial-gradient(circle at 20% 80%, rgba(239, 68, 68, 0.15) 0%, transparent 50%),
+        radial-gradient(circle at 80% 20%, rgba(239, 68, 68, 0.1) 0%, transparent 40%);
+      pointer-events: none;
+    }
+    
+    /* Grid lines */
+    .grid {
+      position: absolute;
+      top: 0;
+      left: 0;
+      right: 0;
+      bottom: 0;
+      background-image: 
+        linear-gradient(rgba(255,255,255,0.02) 1px, transparent 1px),
+        linear-gradient(90deg, rgba(255,255,255,0.02) 1px, transparent 1px);
+      background-size: 60px 60px;
+      pointer-events: none;
+    }
+    
+    .content {
+      position: relative;
+      z-index: 1;
+    }
+    
+    .logo-row {
+      display: flex;
+      align-items: center;
+      gap: 24px;
+      margin-bottom: 40px;
+    }
+    
+    .logo {
+      width: 80px;
+      height: 80px;
+      background: linear-gradient(135deg, #f87171 0%, #dc2626 100%);
+      border-radius: 20px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      font-size: 48px;
+    }
+    
+    .brand {
+      font-size: 48px;
+      font-weight: 800;
+      color: #fafafa;
+      letter-spacing: -0.02em;
+    }
+    
+    .tagline {
+      font-size: 56px;
+      font-weight: 800;
+      line-height: 1.2;
+      letter-spacing: -0.03em;
+      margin-bottom: 32px;
+    }
+    
+    .tagline .gradient {
+      background: linear-gradient(135deg, #f87171 0%, #ef4444 50%, #fca5a5 100%);
+      -webkit-background-clip: text;
+      -webkit-text-fill-color: transparent;
+      background-clip: text;
+    }
+    
+    .tagline .white {
+      color: #fafafa;
+    }
+    
+    .subtitle {
+      font-size: 24px;
+      color: #a3a3a3;
+      max-width: 700px;
+      line-height: 1.5;
+    }
+    
+    .footer {
+      position: absolute;
+      bottom: 60px;
+      left: 80px;
+      right: 80px;
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+    }
+    
+    .stats {
+      display: flex;
+      gap: 48px;
+    }
+    
+    .stat {
+      text-align: left;
+    }
+    
+    .stat-value {
+      font-size: 32px;
+      font-weight: 800;
+      color: #ef4444;
+    }
+    
+    .stat-label {
+      font-size: 14px;
+      color: #737373;
+      text-transform: uppercase;
+      letter-spacing: 0.1em;
+    }
+    
+    .url {
+      font-size: 20px;
+      color: #525252;
+      font-weight: 500;
+    }
+  </style>
+</head>
+<body>
+  <div class="pattern"></div>
+  <div class="grid"></div>
+  
+  <div class="content">
+    <div class="logo-row">
+      <div class="logo">🦞</div>
+      <div class="brand">APIClaw</div>
+    </div>
+    
+    <h1 class="tagline">
+      <span class="gradient">The API layer</span><br>
+      <span class="white">for AI agents</span>
+    </h1>
+    
+    <p class="subtitle">
+      Agents discover and evaluate APIs via MCP. Structured data. Ranked results. No more googling.
+    </p>
+  </div>
+  
+  <div class="footer">
+    <div class="stats">
+      <div class="stat">
+        <div class="stat-value">1,400+</div>
+        <div class="stat-label">APIs</div>
+      </div>
+      <div class="stat">
+        <div class="stat-value">52</div>
+        <div class="stat-label">Categories</div>
+      </div>
+      <div class="stat">
+        <div class="stat-value">MCP</div>
+        <div class="stat-label">Native</div>
+      </div>
+    </div>
+    <div class="url">apiclaw.com</div>
+  </div>
+</body>
+</html>

package/landing/public/site.webmanifest

@@ -0,0 +1,31 @@
+{
+  "name": "APIClaw",
+  "short_name": "APIClaw",
+  "description": "The API layer for AI agents",
+  "start_url": "/",
+  "display": "standalone",
+  "background_color": "#0a0a0a",
+  "theme_color": "#ef4444",
+  "icons": [
+    {
+      "src": "/favicon-16x16.png",
+      "sizes": "16x16",
+      "type": "image/png"
+    },
+    {
+      "src": "/favicon-32x32.png",
+      "sizes": "32x32",
+      "type": "image/png"
+    },
+    {
+      "src": "/android-chrome-192x192.png",
+      "sizes": "192x192",
+      "type": "image/png"
+    },
+    {
+      "src": "/android-chrome-512x512.png",
+      "sizes": "512x512",
+      "type": "image/png"
+    }
+  ]
+}