feat: World ID overview page

cspell.json

@@ -1,16 +1,8 @@
 {
   "version": "0.2",
   "language": "en",
-  "ignoreRegExpList": [
-    "/%2F\\w+/gi",
-    "/[a-zA-Z0-9_-]{20,}/g"
-  ],
-  "ignorePaths": [
-    "pnpm-lock.yaml",
-    "node_modules",
-    ".vscode",
-    "openapi"
-  ],
+  "ignoreRegExpList": ["/%2F\\w+/gi", "/[a-zA-Z0-9_-]{20,}/g"],
+  "ignorePaths": ["pnpm-lock.yaml", "node_modules", ".vscode", "openapi"],
   "words": [
     "AQAB",
     "blockchain",
@@ -170,6 +162,7 @@
     "UUPS",
     "uvwx",
     "wagmi",
-    "worldid"
+    "worldid",
+    "Shiki"
   ]
 }

docs.json

@@ -33,7 +33,9 @@
         "groups": [
           {
             "group": "Get Started",
-            "pages": ["index"]
+            "pages": [
+              "index"
+            ]
           }
         ]
       },
@@ -42,7 +44,9 @@
         "groups": [
           {
             "group": "Introduction",
-            "pages": ["mini-apps/index"]
+            "pages": [
+              "mini-apps/index"
+            ]
           },
           {
             "group": "Quick Start",
@@ -132,6 +136,12 @@
       {
         "tab": "World ID",
         "groups": [
+          {
+            "group": "Overview",
+            "pages": [
+              "world-id/overview"
+            ]
+          },
           {
             "group": "IDKit",
             "pages": [
@@ -157,12 +167,16 @@
           },
           {
             "group": "Migration",
-            "pages": ["world-id/4-0-migration"]
+            "pages": [
+              "world-id/4-0-migration"
+            ]
           },
           {
             "group": "Selfie Check (Beta)",
             "hidden": true,
-            "pages": ["world-id/selfie-check/overview"]
+            "pages": [
+              "world-id/selfie-check/overview"
+            ]
           },
           {
             "group": "Technical Reference",
@@ -197,7 +211,9 @@
                   },
                   {
                     "group": "Issuers",
-                    "pages": ["world-id/reference/poh-issuer"]
+                    "pages": [
+                      "world-id/reference/poh-issuer"
+                    ]
                   }
                 ]
               },
@@ -267,7 +283,9 @@
           },
           {
             "group": "Further Reading",
-            "pages": ["world-chain/resources"]
+            "pages": [
+              "world-chain/resources"
+            ]
           }
         ]
       },
@@ -350,6 +368,10 @@
     ]
   },
   "redirects": [
+    {
+      "source": "/world-id",
+      "destination": "/world-id/overview"
+    },
     {
       "source": "/apps",
       "destination": "https://world.org/apps"
@@ -368,11 +390,11 @@
     },
     {
       "source": "/id",
-      "destination": "/world-id"
+      "destination": "/world-id/overview"
     },
     {
       "source": "/id/sign-in",
-      "destination": "/world-id"
+      "destination": "/world-id/overview"
     },
     {
       "source": "/protocol",
@@ -552,7 +574,7 @@
     },
     {
       "source": "/sign-in",
-      "destination": "/world-id"
+      "destination": "/world-id/overview"
     },
     {
       "source": "/try",
@@ -604,11 +626,11 @@
     },
     {
       "source": "/world-id/id/sign-in",
-      "destination": "/world-id"
+      "destination": "/world-id/overview"
     },
     {
       "source": "/world-id/sign-in",
-      "destination": "/world-id"
+      "destination": "/world-id/overview"
     },
     {
       "source": "/world-id/sign-in/pitfalls",
@@ -716,7 +738,10 @@
       "display": "interactive"
     },
     "examples": {
-      "languages": ["curl", "javascript"],
+      "languages": [
+        "curl",
+        "javascript"
+      ],
       "defaults": "required",
       "prefill": true
     }

index.mdx

@@ -7,30 +7,10 @@ description: "Build Mini Apps, integrate World ID, and deploy on World Chain wit
 "twitter:image": "/images/docs/docs-meta.png"
 ---
 
-<div className="mb-6">
-  <a
-    href="https://world.org/blog/announcements/dev-rewards-pilot-increases-to-100k-per-week-as-the-world-ecosystem-surpasses-500-mini-apps"
-    target="_blank"
-    rel="noopener noreferrer"
-    className="block w-full rounded-lg border border-blue-200 bg-blue-50 px-4 py-3 text-blue-900 hover:bg-blue-100 hover:no-underline focus:outline-none focus:ring-2 focus:ring-blue-400 dark:border-blue-800 dark:bg-blue-950 dark:text-blue-100 dark:hover:bg-blue-900 dark:focus:ring-blue-600"
-    aria-label="Now live: $100K in developer rewards per week."
-  >
-    <div className="flex items-center gap-3">
-      <span>💰</span>
-      <span className="font-medium">
-        Now live: $100K in developer rewards per week.
-      </span>
-      <span className="ml-auto text-blue-700 underline dark:text-blue-300">
-        Learn more
-      </span>
-    </div>
-  </a>
-</div>
-
 Choose your integration path:
 
 - **Mini Apps** – Build mini applications that run inside World App. Leverage World ID and the wallet distribution.
-- **World ID** – Integrate World ID into your product on any platform.
+- **World ID** – Add anonymous proof of human to your product on any platform.
 - **World Chain** – Build directly on our blockchain infrastructure.
 
 <div className="grid grid-cols-1 sm:grid-cols-3 gap-8 mt-10">
@@ -50,20 +30,20 @@ Choose your integration path:
 
 <div className="group relative flex flex-col rounded-xl border overflow-hidden hover:shadow-md transition">
   <a
-    href="/world-id"
+    href="/world-id/overview"
     className="absolute inset-0 z-10 no-underline hover:no-underline border-0"
-    aria-label="IDKit"
+    aria-label="World ID"
   />
   <img
     src="/images/docs/world-id-cover.png"
-    alt="IDKit"
+    alt="World ID"
     className="w-full h-40 object-cover pointer-events-none select-none"
     draggable={false}
   />
   <div className="flex-1 p-3 flex flex-col">
-    <h3 className="font-semibold m-0">Use IDKit</h3>
+    <h3 className="font-semibold m-0">Integrate World ID</h3>
     <p className="text-sm text-gray-600 mt-auto">
-      World ID verification for your website or app
+      Anonymous proof of human for your website or app
     </p>
   </div>
 </div>

snippets/quickstart.jsx

@@ -0,0 +1,43 @@
+import React from "react";
+
+/**
+ * Mintlify-safe quickstart wrapper:
+ * - No hooks or client-side state.
+ * - Uses whatever code block you pass as children (CodeGroup / fenced code).
+ * - Mintlify handles syntax highlighting with Shiki.
+ */
+export const Quickstart = ({
+  title = "Developer quickstart",
+  description = "Make your first API request in minutes. Learn the basics of the platform.",
+  buttonHref = "/docs/get-started",
+  buttonLabel = "Get started",
+  children,
+}) => {
+  return (
+    <div className="not-prose rounded-3xl bg-zinc-100 p-6 md:p-8 dark:bg-zinc-900">
+      <div className="grid grid-cols-1 gap-8 md:grid-cols-[minmax(280px,1fr)_minmax(360px,1.45fr)] md:items-start">
+        <div>
+          <h3 className="m-0 text-2xl leading-tight font-semibold text-zinc-900 dark:text-zinc-100">
+            {title}
+          </h3>
+          <p className="mt-3 max-w-[560px] text-[16px] leading-7 text-zinc-600 dark:text-zinc-300">
+            {description}
+          </p>
+        </div>
+
+        <div className="quickstart-code min-w-0">{children}</div>
+      </div>
+
+      <div className="mt-6 md:mt-4">
+        <a
+          href={buttonHref}
+          className="inline-flex items-center justify-center rounded-full border border-transparent bg-zinc-950 px-6 py-3 text-[16px] font-medium !text-white no-underline transition-colors hover:bg-black dark:border-zinc-700 dark:bg-zinc-800 dark:!text-zinc-100 dark:hover:bg-zinc-700"
+        >
+          {buttonLabel}
+        </a>
+      </div>
+    </div>
+  );
+};
+
+export default Quickstart;

tailwind.css

@@ -52,4 +52,23 @@
     background-color: #0b1220; /* near slate-950 */
     color: #e5e7eb; /* gray-200 */
   }
+
+  /* Quickstart: tighten code block spacing within the card */
+  .quickstart-code .code-block {
+    margin-top: 0.5rem !important;
+    margin-bottom: 0.75rem !important;
+  }
+
+  /* Quickstart: remove code block background while keeping syntax colors */
+  .quickstart-code .code-block .code-block-background,
+  .quickstart-code .code-block .code-block-background pre.shiki {
+    background: transparent !important;
+    background-color: transparent !important;
+  }
+
+  /* Quickstart: hide code fade overlay to avoid white brush near copy button */
+  .quickstart-code .code-block [data-fade-overlay="true"] {
+    display: none !important;
+  }
+
 }

world-id/idkit/integrate.mdx

@@ -60,6 +60,9 @@ export async function POST(request: Request): Promise<Response> {
   });
 }
 ```
+<Note>
+  For RP signature generation, use `@worldcoin/idkit-server` in JavaScript/TypeScript backends. This is currently only available in JS. If you need support in another language, please reach out on [Telegram](https://t.me/worlddevelopersupport).
+</Note>
 <Warning>
   Never generate RP signatures on the client and never expose your RP signing
   key. If the key leaks, attackers can forge requests from your app.

world-id/overview.mdx

@@ -0,0 +1,86 @@
+---
+title: "World ID"
+sidebarTitle: "Overview"
+description: "Anonymous proof of human credential for the age of AI"
+---
+
+import { Quickstart } from "/snippets/quickstart.jsx";
+
+World ID is an anonymous proof of human credential that lets people prove they are a real and unique human online without sharing personal information.
+
+In the age of AI, it gives relying parties a high-assurance signal to stop bots, duplicate accounts, and abuse while keeping onboarding fast and privacy-preserving.
+
+World ID credentials extend that trust layer with additional proofs, like proof of age and document-backed signals, without exposing underlying user data.
+
+{/* cspell:ignore worldcoin idkit orblegacy rp_context app_id rp_id selfie-check sybil PoH CAPTCHAs NFC unlinkable nullifier */}
+
+<Quickstart
+  title="Developer Quickstart"
+  description="Add proof of human to your app with one React widget."
+  buttonHref="/world-id/idkit/integrate"
+  buttonLabel="Open integration guide"
+>
+  ```tsx lines
+  import { IDKitRequestWidget } from "@worldcoin/idkit";
+  const rpContext = await getRpContext("verify-account");
+  <IDKitRequestWidget
+    app_id="app_xxxxx"
+    action="verify-account"
+    rp_context={rpContext}
+    // verify proof + nullifier on your backend
+    handleVerify={verifyOnBackend}
+    onSuccess={unlockFeature}
+  />
+  ```
+</Quickstart>
+
+## Credentials
+
+<div className="not-prose mt-5">
+  <div className="grid gap-4 md:grid-cols-3">
+    <div className="overflow-hidden rounded-[12px] border border-zinc-200 bg-white shadow-[0_1px_0_rgba(0,0,0,0.03)] transition-all duration-200 hover:-translate-y-0.5 hover:shadow-[0_10px_26px_rgba(15,23,42,0.08)] dark:border-zinc-700 dark:bg-zinc-900 dark:shadow-none dark:hover:border-zinc-600 dark:hover:shadow-[0_10px_24px_rgba(2,6,23,0.32)]">
+      <div className="flex items-center justify-center bg-white dark:bg-zinc-900" style={{ height: 120 }}>
+        <img src="/images/docs/verification-badge.svg" alt="Proof of Human" style={{ height: 72, width: 72, objectFit: 'contain' }} />
+      </div>
+      <div className="p-4"><h3 className="m-0 text-base font-semibold text-zinc-900 dark:text-zinc-100">Proof of Human</h3><p className="mt-2 text-sm text-zinc-600 dark:text-zinc-300">Highest-assurance uniqueness signal from Orb verification. Best for one-person-one-action flows and strong Sybil resistance.</p></div>
+    </div>
+    <div className="overflow-hidden rounded-[12px] border border-zinc-200 bg-white shadow-[0_1px_0_rgba(0,0,0,0.03)] transition-all duration-200 hover:-translate-y-0.5 hover:shadow-[0_10px_26px_rgba(15,23,42,0.08)] dark:border-zinc-700 dark:bg-zinc-900 dark:shadow-none dark:hover:border-zinc-600 dark:hover:shadow-[0_10px_24px_rgba(2,6,23,0.32)]">
+      <div className="flex items-center justify-center bg-white dark:bg-zinc-900" style={{ height: 120 }}>
+        <img src="/images/docs/passport.png" alt="Document" style={{ width: 72, objectFit: 'contain' }} />
+      </div>
+      <div className="p-4"><h3 className="m-0 text-base font-semibold text-zinc-900 dark:text-zinc-100">Document</h3><p className="mt-2 text-sm text-zinc-600 dark:text-zinc-300">Proves possession of a unique government document through NFC checks. Useful for proof of age and document-backed access flows.</p></div>
+    </div>
+    <div className="overflow-hidden rounded-[12px] border border-zinc-200 bg-white shadow-[0_1px_0_rgba(0,0,0,0.03)] transition-all duration-200 hover:-translate-y-0.5 hover:shadow-[0_10px_26px_rgba(15,23,42,0.08)] dark:border-zinc-700 dark:bg-zinc-900 dark:shadow-none dark:hover:border-zinc-600 dark:hover:shadow-[0_10px_24px_rgba(2,6,23,0.32)]">
+      <div className="flex items-center justify-center bg-white dark:bg-zinc-900" style={{ height: 120 }}>
+        <img src="/images/docs/selfie-check.png" alt="Selfie Check" style={{ height: 72, width: 72, objectFit: 'contain' }} />
+      </div>
+      <div className="p-4"><h3 className="m-0 flex items-center gap-2 text-base font-semibold text-zinc-900 dark:text-zinc-100">Selfie Check <div className="method-pill rounded-lg bg-blue-400/20 px-1.5 py-0.5 text-sm leading-5 font-semibold text-blue-700 dark:bg-blue-400/20 dark:text-blue-300">Beta</div></h3><p className="mt-2 text-sm text-zinc-600 dark:text-zinc-300">Low-friction liveness and uniqueness signal from a selfie flow. Best for sign-up and bot defense where speed matters most.</p></div>
+    </div>
+  </div>
+</div>
+
+## Start building
+
+<CardGroup cols={1}>
+  <Card title="Stop bots and duplicate accounts">
+    Use proof of human to enforce one human per account and reduce Sybil abuse in rewards, referrals, governance, and account creation.
+  </Card>
+  <Card title="Protect conversion and user privacy">
+    Replace CAPTCHA-heavy or document-heavy gating with reusable proof flows. Relying parties receive proofs, not personal data.
+  </Card>
+</CardGroup>
+
+
+## Privacy by architecture
+
+<CardGroup cols={3}>
+  <Card title="Zero-knowledge proofs">
+    Users prove what is true without revealing personal information. Proofs are unlinkable across apps.
+  </Card>
+  <Card title="Multi-party computation">
+    Matching and uniqueness checks are split across independent nodes so no single party holds complete sensitive data.
+  </Card>
+  <Card title="Self-custodial">
+    Proof generation happens on the user’s device. Your app receives a proof, not raw personal data.
+  </Card>
+</CardGroup>