Redesign API directory experience

2026-08-03 21:15:24 +02:00 · 2026-07-22 00:00:40 -04:00
parent 64bbaaf6e4
commit 5575f2d84b
8 changed files with 1035 additions and 275 deletions
@@ -0,0 +1,97 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="1600" height="500" viewBox="0 0 1600 500" role="img" aria-labelledby="title desc">
+  <title id="title">CoreClaw API Directory</title>
+  <desc id="desc">A futuristic indigo and cyan banner for a directory of 118 public CoreClaw web data Workers.</desc>
+  <defs>
+    <linearGradient id="bg" x1="0" y1="0" x2="1" y2="1">
+      <stop offset="0" stop-color="#070B1D"/>
+      <stop offset="0.48" stop-color="#111B46"/>
+      <stop offset="1" stop-color="#0B3A4A"/>
+    </linearGradient>
+    <linearGradient id="accent" x1="0" y1="0" x2="1" y2="0">
+      <stop stop-color="#8B5CF6"/>
+      <stop offset="0.5" stop-color="#6366F1"/>
+      <stop offset="1" stop-color="#22D3EE"/>
+    </linearGradient>
+    <radialGradient id="orb" cx="50%" cy="50%" r="50%">
+      <stop offset="0" stop-color="#22D3EE" stop-opacity=".38"/>
+      <stop offset=".55" stop-color="#6366F1" stop-opacity=".16"/>
+      <stop offset="1" stop-color="#070B1D" stop-opacity="0"/>
+    </radialGradient>
+    <pattern id="grid" width="48" height="48" patternUnits="userSpaceOnUse">
+      <path d="M48 0H0V48" fill="none" stroke="#A5B4FC" stroke-opacity=".08"/>
+    </pattern>
+    <filter id="glow" x="-80%" y="-80%" width="260%" height="260%">
+      <feGaussianBlur stdDeviation="10" result="blur"/>
+      <feMerge><feMergeNode in="blur"/><feMergeNode in="SourceGraphic"/></feMerge>
+    </filter>
+    <filter id="soft" x="-50%" y="-50%" width="200%" height="200%">
+      <feGaussianBlur stdDeviation="30"/>
+    </filter>
+    <clipPath id="clip"><rect width="1600" height="500" rx="34"/></clipPath>
+  </defs>
+
+  <g clip-path="url(#clip)">
+    <rect width="1600" height="500" fill="url(#bg)"/>
+    <rect width="1600" height="500" fill="url(#grid)"/>
+    <circle cx="1280" cy="250" r="330" fill="url(#orb)"/>
+    <circle cx="220" cy="-80" r="260" fill="#8B5CF6" opacity=".12" filter="url(#soft)"/>
+    <path d="M0 410C320 300 525 520 820 392S1285 250 1600 360V500H0Z" fill="#22D3EE" opacity=".035"/>
+    <path d="M0 455C300 360 520 520 790 430S1290 330 1600 410V500H0Z" fill="#8B5CF6" opacity=".06"/>
+
+    <g font-family="Inter,Segoe UI,Arial,sans-serif">
+      <rect x="92" y="66" width="322" height="38" rx="19" fill="#FFFFFF" opacity=".08" stroke="#A5B4FC" stroke-opacity=".22"/>
+      <circle cx="117" cy="85" r="6" fill="#22D3EE" filter="url(#glow)"/>
+      <text x="138" y="92" fill="#C7D2FE" font-size="17" font-weight="700" letter-spacing="2.6">COMMUNITY DIRECTORY</text>
+
+      <text x="92" y="177" fill="#FFFFFF" font-size="58" font-weight="800" letter-spacing="-1.5">CoreClaw API Directory</text>
+      <rect x="92" y="198" width="585" height="7" rx="3.5" fill="url(#accent)"/>
+      <text x="92" y="262" fill="#E0E7FF" font-size="30" font-weight="600">The public web, ready to query.</text>
+      <text x="92" y="305" fill="#A5B4FC" font-size="20">A categorized collection of ready-to-run web data Workers.</text>
+
+      <g transform="translate(92 357)">
+        <g>
+          <rect width="178" height="54" rx="14" fill="#FFFFFF" opacity=".075" stroke="#818CF8" stroke-opacity=".3"/>
+          <text x="20" y="25" fill="#FFFFFF" font-size="18" font-weight="800">118</text>
+          <text x="20" y="43" fill="#A5B4FC" font-size="12" letter-spacing="1.2">WORKERS</text>
+        </g>
+        <g transform="translate(194)">
+          <rect width="178" height="54" rx="14" fill="#FFFFFF" opacity=".075" stroke="#818CF8" stroke-opacity=".3"/>
+          <text x="20" y="25" fill="#FFFFFF" font-size="18" font-weight="800">11</text>
+          <text x="20" y="43" fill="#A5B4FC" font-size="12" letter-spacing="1.2">CATEGORIES</text>
+        </g>
+        <g transform="translate(388)">
+          <rect width="178" height="54" rx="14" fill="#FFFFFF" opacity=".075" stroke="#22D3EE" stroke-opacity=".35"/>
+          <text x="20" y="25" fill="#FFFFFF" font-size="18" font-weight="800">29</text>
+          <text x="20" y="43" fill="#A5B4FC" font-size="12" letter-spacing="1.2">DATA SOURCES</text>
+        </g>
+      </g>
+    </g>
+
+    <g transform="translate(1260 250)">
+      <circle r="174" fill="none" stroke="#818CF8" stroke-opacity=".13" stroke-width="2"/>
+      <circle r="132" fill="none" stroke="#22D3EE" stroke-opacity=".2" stroke-width="2" stroke-dasharray="8 12"/>
+      <circle r="86" fill="#111B46" stroke="url(#accent)" stroke-width="3"/>
+      <circle r="70" fill="none" stroke="#FFFFFF" stroke-opacity=".09"/>
+      <path d="M-28-38C7-22 20 5 22 39M0-48C32-25 45 5 47 36M28-39C54-16 62 7 64 28" fill="none" stroke="url(#accent)" stroke-width="9" stroke-linecap="round" filter="url(#glow)"/>
+      <path d="M-43 48C-18 65 17 65 43 47" fill="none" stroke="#A5B4FC" stroke-opacity=".55" stroke-width="5" stroke-linecap="round"/>
+
+      <g fill="#22D3EE" filter="url(#glow)">
+        <circle cx="0" cy="-132" r="7"/><circle cx="132" cy="0" r="7"/><circle cx="0" cy="132" r="7"/><circle cx="-132" cy="0" r="7"/>
+      </g>
+      <g stroke="#818CF8" stroke-opacity=".45" stroke-width="2">
+        <path d="M0-86V-125"/><path d="M86 0H125"/><path d="M0 86V125"/><path d="M-86 0H-125"/>
+      </g>
+      <g font-family="Inter,Segoe UI,Arial,sans-serif" font-size="13" font-weight="800" letter-spacing="1.4" fill="#C7D2FE">
+        <text x="-18" y="-151">REST</text>
+        <text x="148" y="5">MCP</text>
+        <text x="-20" y="161">JSON</text>
+        <text x="-181" y="5">CSV</text>
+      </g>
+    </g>
+
+    <g fill="#C7D2FE">
+      <circle cx="1040" cy="96" r="3" opacity=".65"/><circle cx="1470" cy="92" r="3" opacity=".45"/>
+      <circle cx="1052" cy="405" r="3" opacity=".5"/><circle cx="1488" cy="390" r="3" opacity=".7"/>
+    </g>
+  </g>
+</svg>