Add World ID overview page and navigation entry

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": [
@@ -160,12 +170,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",
@@ -200,7 +214,9 @@
                   },
                   {
                     "group": "Issuers",
-                    "pages": ["world-id/reference/poh-issuer"]
+                    "pages": [
+                      "world-id/reference/poh-issuer"
+                    ]
                   }
                 ]
               },
@@ -270,7 +286,9 @@
           },
           {
             "group": "Further Reading",
-            "pages": ["world-chain/resources"]
+            "pages": [
+              "world-chain/resources"
+            ]
           }
         ]
       },
@@ -353,6 +371,10 @@
     ]
   },
   "redirects": [
+    {
+      "source": "/world-id",
+      "destination": "/world-id/overview"
+    },
     {
       "source": "/apps",
       "destination": "https://world.org/apps"
@@ -371,11 +393,11 @@
     },
     {
       "source": "/id",
-      "destination": "/world-id"
+      "destination": "/world-id/overview"
     },
     {
       "source": "/id/sign-in",
-      "destination": "/world-id"
+      "destination": "/world-id/overview"
     },
     {
       "source": "/protocol",
@@ -555,7 +577,7 @@
     },
     {
       "source": "/sign-in",
-      "destination": "/world-id"
+      "destination": "/world-id/overview"
     },
     {
       "source": "/try",
@@ -607,11 +629,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",
@@ -715,7 +737,10 @@
       "display": "interactive"
     },
     "examples": {
-      "languages": ["curl", "javascript"],
+      "languages": [
+        "curl",
+        "javascript"
+      ],
       "defaults": "required",
       "prefill": true
     }

world-id/overview.mdx

@@ -0,0 +1,158 @@
+---
+title: "World ID"
+sidebarTitle: "Overview"
+description: "Privacy preserving proof of human protocol"
+---
+
+{/* cspell:ignore worldcoin idkit orblegacy rp_context app_id rp_id selfie-check sybil PoH CAPTCHAs NFC unlinkable nullifier */}
+
+<div className="not-prose space-y-12">
+  <div className="max-w-3xl space-y-5 text-[17px] leading-8 text-gray-600">
+    <p>
+      World ID is the highest-assurance way to prove you are a unique human online - without revealing who you are.
+    </p>
+    <p>
+      As AI agents, bots, and deepfakes make it increasingly difficult to distinguish real people online, World ID gives individuals a privacy-preserving way to verify their humanness and uniqueness.
+    </p>
+    <p>
+      At its core, World ID is built around credentials - proofs that verify something about a person (that they’re a unique human, that they’re over 18, that they hold a valid document etc.) without exposing any personal data. Different credentials offer different levels of assurance, and any application can use them as a trust signal through a simple integration.
+    </p>
+  </div>
+
+  <div className="rounded-[12px] border border-[#222] bg-[#111] p-7 text-white shadow-[0_12px_36px_rgba(0,0,0,0.22)]">
+    <div className="grid gap-8 md:grid-cols-[250px_1fr] md:items-center">
+      <div>
+        <h2 className="m-0 text-[22px] font-semibold text-white">Developer quickstart</h2>
+        <p className="mt-3 text-sm leading-6 text-gray-300/95">
+          Add World ID to your app in minutes. Install IDKit, choose a credential, and start verifying users.
+        </p>
+        <button type="button" className="mt-5 inline-flex items-center rounded-full bg-white px-4 py-2 text-sm font-medium text-black transition hover:bg-gray-100">
+          Get started
+        </button>
+      </div>
+
+      <div className="rounded-xl border border-[#2b2b2b] bg-[#151515] p-5">
+        <div className="mb-3 text-xs font-medium uppercase tracking-wide text-gray-400">react</div>
+        <div className="overflow-x-auto font-mono text-sm leading-6 text-gray-200">
+          <div><span style={{ color: '#c792ea' }}>import</span> {'{'} <span style={{ color: '#82aaff' }}>IDKitRequestWidget</span>, <span style={{ color: '#82aaff' }}>orbLegacy</span> {'}'} <span style={{ color: '#c792ea' }}>from</span> <span style={{ color: '#c3e88d' }}>'@worldcoin/idkit'</span></div>
+          <div>&nbsp;</div>
+          <div><span style={{ color: '#c792ea' }}>const</span> <span style={{ color: '#82aaff' }}>rp_context</span> = {'{'}</div>
+          <div>&nbsp;&nbsp;<span style={{ color: '#f78c6c' }}>rp_id</span>: <span style={{ color: '#c3e88d' }}>&quot;rp_your_rp_id&quot;</span>, ...</div>
+          <div>{'}'}</div>
+          <div>&nbsp;</div>
+          <div>&lt;<span style={{ color: '#82aaff' }}>IDKitRequestWidget</span></div>
+          <div>&nbsp;&nbsp;<span style={{ color: '#f78c6c' }}>app_id</span>=<span style={{ color: '#c3e88d' }}>&quot;app_your_app_id&quot;</span></div>
+          <div>&nbsp;&nbsp;<span style={{ color: '#f78c6c' }}>action</span>=<span style={{ color: '#c3e88d' }}>&quot;my-action&quot;</span></div>
+          <div>&nbsp;&nbsp;<span style={{ color: '#f78c6c' }}>rp_context</span>=<span>{'{'}</span><span style={{ color: '#82aaff' }}>rp_context</span><span>{'}'}</span></div>
+          <div>&nbsp;&nbsp;<span style={{ color: '#f78c6c' }}>preset</span>=<span>{'{'}</span><span style={{ color: '#82aaff' }}>orbLegacy</span>({'{'} <span style={{ color: '#f78c6c' }}>signal</span>: <span style={{ color: '#c3e88d' }}>&quot;user-123&quot;</span> {'}'})<span>{'}'}</span></div>
+          <div>&nbsp;&nbsp;<span style={{ color: '#f78c6c' }}>onSuccess</span>=<span>{'{'}</span><span style={{ color: '#82aaff' }}>handleProof</span><span>{'}'}</span></div>
+          <div>/&gt;</div>
+        </div>
+      </div>
+    </div>
+  </div>
+
+  <section>
+    <div className="mb-5 flex items-center justify-between">
+      <h2 className="m-0 text-[18px] font-semibold text-black">Credentials</h2>
+      <span className="text-sm text-gray-600">View all</span>
+    </div>
+    <div className="grid gap-4 md:grid-cols-3">
+      <div className="overflow-hidden rounded-[12px] border border-[#e7e7e7] 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)]">
+        <div className="flex h-[100px] items-center justify-center bg-gradient-to-r from-[#111827] to-[#1f2937] text-sm font-medium text-white">proof-of-human</div>
+        <div className="p-4"><h3 className="m-0 text-base font-semibold text-black">Proof of Human</h3><p className="mt-2 text-sm text-gray-600">Strongest uniqueness signal available. Iris biometrics verified through a trusted hardware - Orb - provide population-scale sybil resistance and liveness guarantees. Best for high-stakes actions where one-person-one-action matters most.</p></div>
+      </div>
+      <div className="overflow-hidden rounded-[12px] border border-[#e7e7e7] 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)]">
+        <div className="flex h-[100px] items-center justify-center bg-gradient-to-r from-[#047857] to-[#059669] text-sm font-medium text-white">document</div>
+        <div className="p-4"><h3 className="m-0 text-base font-semibold text-black">Document</h3><p className="mt-2 text-sm text-gray-600">Proves possession of a unique, government-issued identity document. NFC chip verification of passports and national IDs provides document-level uniqueness and 18+ proof.</p></div>
+      </div>
+      <div className="overflow-hidden rounded-[12px] border border-[#e7e7e7] 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)]">
+        <div className="flex h-[100px] items-center justify-center bg-gradient-to-r from-[#6d28d9] to-[#7c3aed] text-sm font-medium text-white">selfie-check</div>
+        <div className="p-4"><h3 className="m-0 flex items-center gap-2 text-base font-semibold text-black">Selfie Check <span className="rounded-full border border-[#d9d9d9] bg-[#f8f8f8] px-2 py-0.5 text-[11px] font-medium text-gray-600">Beta</span></h3><p className="mt-2 text-sm text-gray-600">Unique human signal with the lowest friction. Mobile selfie-based liveness and face uniqueness check. Best for bot prevention, sign-ups, and actions where fast verification matters more than maximum assurance.</p></div>
+      </div>
+    </div>
+  </section>
+
+  <section className="mt-10">
+    <h2 className="mb-4 mt-0 text-[18px] font-semibold text-black">Start building</h2>
+    <div className="overflow-hidden rounded-[12px] border border-[#e7e7e7] bg-white shadow-[0_1px_0_rgba(0,0,0,0.03)]">
+      <div className="grid md:grid-cols-1">
+        {[
+          [
+            "Sybil-resistant actions",
+            "One trial per person. Each verified user gets a unique nullifier per action, so duplicates are rejected at the protocol level. Use PoH credential for high-stakes actions, Face credential for moderate assurance.",
+            "#",
+          ],
+          [
+            "Bot prevention",
+            "Block bots and AI agents at sign-up or on any action. Request a liveness-verified credential - Face for low-friction flows, Orb for maximum assurance. No CAPTCHAs, no phone numbers needed.",
+            "#",
+          ],
+          [
+            "Age verification",
+            "Verify a user is 18+ without collecting date of birth or any personal data. Use Document credential - the user's NFC-verified passport or national ID is checked locally and only a yes/no proof is returned.",
+            "#",
+          ],
+        ].map(([title, description, href]) => (
+          <a
+            href={href}
+            key={title}
+            className="group border-b border-[#ebebeb] p-6 no-underline transition-colors last:border-b-0 hover:bg-[#fafafa] focus-visible:bg-[#fafafa]"
+          >
+            <div className="max-w-[980px]">
+              <h3 className="m-0 text-[22px] font-semibold leading-tight text-black">{title}</h3>
+              <p className="mt-4 text-[15px] leading-7 text-gray-600">{description}</p>
+            </div>
+          </a>
+        ))}
+      </div>
+    </div>
+  </section>
+
+  <section className="mt-10">
+    <h2 className="mb-4 mt-0 text-[18px] font-semibold text-black">Choosing a credential</h2>
+    <div className="overflow-hidden rounded-[12px] border border-[#e7e7e7] bg-white shadow-[0_1px_0_rgba(0,0,0,0.03)]">
+      <table className="w-full table-fixed border-collapse text-sm">
+        <colgroup>
+          <col className="w-1/4" />
+          <col className="w-1/4" />
+          <col className="w-1/4" />
+          <col className="w-1/4" />
+        </colgroup>
+        <thead>
+          <tr className="bg-[#f6f6f7] text-left text-gray-700">
+            <th className="px-5 py-4 font-medium"> </th>
+            <th className="px-5 py-4 font-medium">Proof of Human</th>
+            <th className="px-5 py-4 font-medium">Document</th>
+            <th className="px-5 py-4 font-medium">Selfie Check (Beta)</th>
+          </tr>
+        </thead>
+        <tbody>
+          {[
+            ["Verification method", "Orb (iris biometrics)", "NFC passport / national ID", "Selfie capture"],
+            ["Uniqueness guarantee", "Strong (population scale)", "Per document", "Unique face"],
+            ["Attestable attributes", "Unique human", "Possession of unique document", "Unique face"],
+            ["User friction", "Orb visit (one-time)", "Passport tap", "Selfie (lowest)"],
+          ].map((row) => (
+            <tr className="border-t border-[#ececec]" key={row[0]}>
+              <td className="px-5 py-4 font-medium text-gray-900">{row[0]}</td>
+              <td className="px-5 py-4 text-gray-700">{row[1]}</td>
+              <td className="px-5 py-4 text-gray-700">{row[2]}</td>
+              <td className="px-5 py-4 text-gray-700">{row[3]}</td>
+            </tr>
+          ))}
+        </tbody>
+      </table>
+    </div>
+  </section>
+
+  <section className="mt-10 rounded-[12px] border border-[#e7e7e7] bg-white p-6 shadow-[0_1px_0_rgba(0,0,0,0.03)]">
+    <h2 className="m-0 text-[18px] font-semibold text-black">Privacy by architecture</h2>
+    <div className="mt-6 grid gap-4 md:auto-rows-fr md:grid-cols-3">
+      <div className="h-full rounded-lg border border-[#efefef] p-4"><h3 className="m-0 text-sm font-semibold text-black">Zero-knowledge proofs</h3><p className="mt-3 text-sm leading-6 text-gray-600">Users prove things about themselves without sharing any personal information. Verifications are unlinkable across apps — no one can track a user's activity between services.</p></div>
+      <div className="h-full rounded-lg border border-[#efefef] p-4"><h3 className="m-0 text-sm font-semibold text-black">Multi-party computation</h3><p className="mt-3 text-sm leading-6 text-gray-600">Hashed embeddings are split into encrypted shares across independent nodes. No single party holds any data, even in encrypted form.</p></div>
+      <div className="h-full rounded-lg border border-[#efefef] p-4"><h3 className="m-0 text-sm font-semibold text-black">Self-custodial</h3><p className="mt-3 text-sm leading-6 text-gray-600">Capture and proof generation happen on the user's device. Your app never receives personal data — only a yes/no proof.</p></div>
+    </div>
+  </section>
+
+</div>