feat: Landing page

cspell.json

@@ -181,6 +181,7 @@
     "XVCJ",
     "Zerion",
     "Zeth",
-    "zrok"
+    "zrok",
+    "MVPVF"
   ]
 }

docs.json

@@ -3,10 +3,24 @@
   "theme": "mint",
   "name": "World Documentation",
   "colors": {
-    "primary": "#1989FB",
+    "primary": "#007CFB",
     "light": "#4B5563",
     "dark": "#000000"
   },
+  "fonts": {
+    "heading": {
+      "family": "World Pro MVP",
+      "source": "/fonts/WorldProMVPVF-v2.woff2",
+      "format": "woff2",
+      "weight": 300
+    },
+    "body": {
+      "family": "World Pro MVP",
+      "source": "/fonts/WorldProMVPVF-v2.woff2",
+      "format": "woff2",
+      "weight": 300
+    }
+  },
   "favicon": "/favicon.ico",
   "seo": {
     "metatags": {
@@ -343,8 +357,8 @@
     }
   },
   "logo": {
-    "light": "/logo/world-logo.svg",
-    "dark": "/logo/world-logo-white.svg"
+    "light": "/logo/world-developers.svg",
+    "dark": "/logo/world-developers-white.svg"
   },
   "navbar": {
     "links": [

index.mdx

@@ -1,23 +1,118 @@
 ---
 title: "World Developer Docs"
 sidebarTitle: "Home"
+mode: "custom"
 description: "Build Mini Apps, integrate World ID, and deploy on World Chain with official developer documentation."
 "og:image": "https://raw.githubusercontent.com/worldcoin/developer-docs/main/images/docs/docs-meta.png"
 "og:description": "Build with World ID, Mini Apps, and World Chain."
 "twitter:image": "https://raw.githubusercontent.com/worldcoin/developer-docs/main/images/docs/docs-meta.png"
 ---
 
-<Columns cols={2}>
-  <Card title="Integrate World ID" horizontal={true} img="/images/docs/world-id-cover.png" href="/world-id/overview">
-    Anonymous proof of human for your website or app
-  </Card>
-  <Card title="Create a Mini App" horizontal={true} img="/images/docs/mini-apps-cover.png" href="/mini-apps">
-    Mini applications distributed in World App
-  </Card>
-  <Card title="AgentKit" horizontal={true} img="/images/docs/agents-cover.png" href="/agents/agent-kit/integrate">
-    Distinguish human-backed agents from bots and scripts
-  </Card>
-  <Card title="World Chain" horizontal={true} img="/images/docs/worldchain-cover.png" href="/world-chain">
-    Build directly on our blockchain infrastructure
-  </Card>
-</Columns>
+<div className="landing-container">
+
+<div
+  className="landing-hero"
+  style={{
+    fontSize: "40px",
+    lineHeight: 1.3,
+    letterSpacing: "-0.8px",
+    fontWeight: 300,
+    marginBottom: "48px",
+    maxWidth: "796px",
+  }}
+>
+  Build Mini Apps, integrate World ID, and deploy on World Chain with official developer documentation.
+</div>
+
+<div className="landing-card-grid" style={{ marginBottom: "64px" }}>
+
+  <a href="/world-id/overview" className="product-card" style={{ display: "flex", flexDirection: "column", justifyContent: "space-between", aspectRatio: "1 / 1", padding: "24px", borderRadius: "16px", textDecoration: "none", cursor: "pointer" }}>
+    <img src="/icons/landing/world-id.svg" alt="" className="product-card-icon" style={{ width: "32px", height: "32px", display: "block" }} />
+    <div>
+      <div className="product-card-title" style={{ fontSize: "24px", lineHeight: 1.3, letterSpacing: "-0.24px", fontWeight: 450 }}>Integrate World ID</div>
+      <div className="product-card-desc" style={{ fontSize: "16px", lineHeight: 1.4, fontWeight: 300, marginTop: "10px" }}>Anonymous proof of human for your website or app</div>
+    </div>
+  </a>
+
+  <a href="/mini-apps" className="product-card" style={{ display: "flex", flexDirection: "column", justifyContent: "space-between", aspectRatio: "1 / 1", padding: "24px", borderRadius: "16px", textDecoration: "none", cursor: "pointer" }}>
+    <img src="/icons/landing/mini-app.svg" alt="" className="product-card-icon" style={{ width: "32px", height: "32px", display: "block" }} />
+    <div>
+      <div className="product-card-title" style={{ fontSize: "24px", lineHeight: 1.3, letterSpacing: "-0.24px", fontWeight: 450 }}>Create a Mini App</div>
+      <div className="product-card-desc" style={{ fontSize: "16px", lineHeight: 1.4, fontWeight: 300, marginTop: "10px" }}>Mini applications distributed in World App</div>
+    </div>
+  </a>
+
+  <a href="/agents/agent-kit/integrate" className="product-card" style={{ display: "flex", flexDirection: "column", justifyContent: "space-between", aspectRatio: "1 / 1", padding: "24px", borderRadius: "16px", textDecoration: "none", cursor: "pointer" }}>
+    <img src="/icons/landing/agentkit.svg" alt="" className="product-card-icon" style={{ width: "32px", height: "32px", display: "block" }} />
+    <div>
+      <div className="product-card-title" style={{ fontSize: "24px", lineHeight: 1.3, letterSpacing: "-0.24px", fontWeight: 450 }}>AgentKit</div>
+      <div className="product-card-desc" style={{ fontSize: "16px", lineHeight: 1.4, fontWeight: 300, marginTop: "10px" }}>Distinguish human-backed agents from bots and scripts</div>
+    </div>
+  </a>
+
+  <a href="/world-chain" className="product-card" style={{ display: "flex", flexDirection: "column", justifyContent: "space-between", aspectRatio: "1 / 1", padding: "24px", borderRadius: "16px", textDecoration: "none", cursor: "pointer" }}>
+    <img src="/icons/landing/world-chain.svg" alt="" className="product-card-icon" style={{ width: "32px", height: "32px", display: "block" }} />
+    <div>
+      <div className="product-card-title" style={{ fontSize: "24px", lineHeight: 1.3, letterSpacing: "-0.24px", fontWeight: 450 }}>World Chain</div>
+      <div className="product-card-desc" style={{ fontSize: "16px", lineHeight: 1.4, fontWeight: 300, marginTop: "10px" }}>Build directly on our blockchain infrastructure</div>
+    </div>
+  </a>
+
+</div>
+
+<div style={{ display: "flex", flexDirection: "column", gap: "12px", marginBottom: "80px" }}>
+  <a href="https://t.me/worlddevelopersupport" className="landing-link" style={{ display: "inline-flex", alignItems: "center", gap: "10px", fontSize: "16px", textDecoration: "underline", textUnderlineOffset: "4px", width: "fit-content" }}>
+    <svg width="16" height="16" viewBox="0 0 24 24"><path d="M12 0C5.373 0 0 5.373 0 12s5.373 12 12 12 12-5.373 12-12S18.627 0 12 0zm5.894 8.221l-1.97 9.28c-.145.658-.537.818-1.084.508l-3-2.21-1.446 1.394c-.14.18-.357.295-.6.295l.213-3.054 5.56-5.022c.24-.213-.054-.334-.373-.121l-6.869 4.326-2.96-.924c-.64-.203-.658-.64.135-.954l11.566-4.458c.538-.196 1.006.128.828.94z"/></svg>
+    Telegram Support Channel
+  </a>
+  <a href="mailto:[email protected]" className="landing-link" style={{ display: "inline-flex", alignItems: "center", gap: "10px", fontSize: "16px", textDecoration: "underline", textUnderlineOffset: "4px", width: "fit-content" }}>
+    <svg width="16" height="16" viewBox="0 0 24 24"><path d="M20 4H4c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 4l-8 5-8-5V6l8 5 8-5v2z"/></svg>
+    Email Support
+  </a>
+  <a href="https://github.com/worldcoin" className="landing-link" style={{ display: "inline-flex", alignItems: "center", gap: "10px", fontSize: "16px", textDecoration: "underline", textUnderlineOffset: "4px", width: "fit-content" }}>
+    <svg width="16" height="16" viewBox="0 0 24 24"><path d="M12 0C5.37 0 0 5.37 0 12c0 5.31 3.435 9.795 8.205 11.385.6.105.825-.255.825-.57 0-.285-.015-1.23-.015-2.235-3.015.555-3.795-.735-4.035-1.41-.135-.345-.72-1.41-1.23-1.695-.42-.225-1.02-.78-.015-.795.945-.015 1.62.87 1.845 1.23 1.08 1.815 2.805 1.305 3.495.99.105-.78.42-1.305.765-1.605-2.67-.3-5.46-1.335-5.46-5.925 0-1.305.465-2.385 1.23-3.225-.12-.3-.54-1.53.12-3.18 0 0 1.005-.315 3.3 1.23.96-.27 1.98-.405 3-.405s2.04.135 3 .405c2.295-1.56 3.3-1.23 3.3-1.23.66 1.65.24 2.88.12 3.18.765.84 1.23 1.905 1.23 3.225 0 4.605-2.805 5.625-5.475 5.925.435.375.81 1.095.81 2.22 0 1.605-.015 2.895-.015 3.3 0 .315.225.69.825.57A12.02 12.02 0 0024 12c0-6.63-5.37-12-12-12z"/></svg>
+    GitHub
+  </a>
+</div>
+
+</div>
+
+{/* Footer — full-width, outside landing-container */}
+<div className="landing-footer">
+  <div className="landing-footer-inner">
+
+    {/* Newsletter — uncomment when provider is ready
+    <div className="landing-newsletter">
+      <div style={{ maxWidth: "756px", margin: "0 auto", textAlign: "center" }}>
+        <div className="landing-newsletter-title" style={{ fontSize: "32px", lineHeight: 1.3, letterSpacing: "-0.64px", fontWeight: 300, marginBottom: "32px" }}>
+          Subscribe to World Developers Newsletter
+        </div>
+        <form className="landing-email-field" style={{ display: "flex", alignItems: "center", maxWidth: "520px", margin: "0 auto", borderRadius: "30px", padding: "10px 10px 10px 24px", gap: "12px" }}>
+          <input type="email" placeholder="Your email" className="landing-email-input" style={{ flex: 1, border: "none", outline: "none", fontSize: "20px", fontWeight: 300, background: "transparent", fontFamily: "inherit" }} />
+          <button type="submit" style={{ width: "40px", height: "40px", borderRadius: "20px", backgroundColor: "#2D2C2C", border: "none", cursor: "pointer", display: "flex", alignItems: "center", justifyContent: "center", flexShrink: 0 }}>
+            <svg width="16" height="16" viewBox="0 0 16 16" fill="none"><path d="M8.5 2.8L13.2 7.5H2V8.5H13.2L8.5 13.2L9.2 13.9L15.1 8L9.2 2.1L8.5 2.8Z" fill="white"/></svg>
+          </button>
+        </form>
+        <div style={{ fontSize: "12px", lineHeight: 1.4, color: "#9D9B96", marginTop: "32px", maxWidth: "605px", margin: "32px auto 0" }}>
+          By entering your email address and clicking "Subscribe," you consent to receive newsletters, marketing communications and ecosystem updates. For details on how we process your personal data, including your rights and how to exercise them, please review our <a href="https://world.org/legal/privacy-notice" target="_blank" style={{ color: "#2D2C2C", textDecoration: "underline" }} className="landing-privacy-link">Privacy Notice</a>.
+        </div>
+      </div>
+    </div>
+    */}
+
+    {/* Footer links */}
+    <div className="landing-footer-links" style={{ display: "flex", gap: "160px", fontSize: "16px", lineHeight: 1.4, fontWeight: 300 }}>
+      <div style={{ display: "flex", flexDirection: "column", gap: "4px" }}>
+        <a href="https://world.org" className="landing-footer-link">About World</a>
+        <a href="https://world.org/developers" className="landing-footer-link">Developers</a>
+        <a href="https://whitepaper.world.org" className="landing-footer-link">Whitepaper</a>
+        <a href="https://github.com/worldcoin" className="landing-footer-link">Open Source</a>
+      </div>
+      <div style={{ display: "flex", flexDirection: "column", gap: "4px" }}>
+        <a href="https://world.org/ecosystem" className="landing-footer-link">Ecosystem</a>
+        <a href="https://world.org/careers" className="landing-footer-link">Careers</a>
+      </div>
+    </div>
+
+  </div>
+</div>