From 09bb7be27d0579e67d80a7d5de4505a3c9fe9d36 Mon Sep 17 00:00:00 2001
From: Soam Desai <soam.desai@toolsforhumanity.com>
Date: Wed, 9 Sep 2026 22:35:01 -0700
Subject: [PATCH] docs(home): align header and content to the 1728px/96px
 design frame

Docs 3.0 QA: the navbar container was max-w-8xl with 48px gutters while the
hero and content sit at 96px. Match the navbar (both rows) and the docs-page
body wrapper to the 1728px design frame with 96px gutters, and bring the
homepage layout to the design measurements: hero subtitle 487px, card icons
32px, card row gap 113px, story cards 756px/24px gap bleeding into the right
gutter, section rhythm 160/240/240.
---
 index.mdx    | 16 ++++++++--------
 tailwind.css | 39 +++++++++++++++++++++++++++++++++++----
 2 files changed, 43 insertions(+), 12 deletions(-)

diff --git a/index.mdx b/index.mdx
index 3d7b152..231fa4b 100644
--- a/index.mdx
+++ b/index.mdx
@@ -26,7 +26,7 @@ import { DeveloperStories } from "/snippets/developer-stories.jsx";
 <Visibility for="humans">
 <div className="landing-container">
 
-<div style={{ marginBottom: "128px" }}>
+<div style={{ marginBottom: "160px" }}>
   <h1 className="landing-hero-title" style={{ margin: 0 }}>World Developer Docs</h1>
   <div className="landing-hero-sub">
     Integrate World ID and deploy on World Chain with official developer documentation.
@@ -37,7 +37,7 @@ import { DeveloperStories } from "/snippets/developer-stories.jsx";
 
   <a href="/world-id/overview" className="product-card">
     <div className="product-card-tile">
-      <img src="/icons/landing/world-id.svg" alt="" className="product-card-icon" style={{ width: "40px", height: "40px", display: "block" }} />
+      <img src="/icons/landing/world-id.svg" alt="" className="product-card-icon" style={{ width: "32px", height: "32px", display: "block" }} />
     </div>
     <div>
       <div className="product-card-title" style={{ fontSize: "32px", lineHeight: 1.2, letterSpacing: "-0.32px", fontWeight: 300 }}>Integrate World ID</div>
@@ -47,7 +47,7 @@ import { DeveloperStories } from "/snippets/developer-stories.jsx";
 
   <a href="/mini-apps" className="product-card">
     <div className="product-card-tile">
-      <img src="/icons/landing/mini-app.svg" alt="" className="product-card-icon" style={{ width: "40px", height: "40px", display: "block" }} />
+      <img src="/icons/landing/mini-app.svg" alt="" className="product-card-icon" style={{ width: "32px", height: "32px", display: "block" }} />
     </div>
     <div>
       <div className="product-card-title" style={{ fontSize: "32px", lineHeight: 1.2, letterSpacing: "-0.32px", fontWeight: 300 }}>Create a Mini App</div>
@@ -57,7 +57,7 @@ import { DeveloperStories } from "/snippets/developer-stories.jsx";
 
   <a href="/agents/agent-kit/integrate" className="product-card">
     <div className="product-card-tile">
-      <img src="/icons/landing/agentkit.svg" alt="" className="product-card-icon" style={{ width: "40px", height: "40px", display: "block" }} />
+      <img src="/icons/landing/agentkit.svg" alt="" className="product-card-icon" style={{ width: "32px", height: "32px", display: "block" }} />
     </div>
     <div>
       <div className="product-card-title" style={{ fontSize: "32px", lineHeight: 1.2, letterSpacing: "-0.32px", fontWeight: 300 }}>AgentKit</div>
@@ -67,7 +67,7 @@ import { DeveloperStories } from "/snippets/developer-stories.jsx";
 
   <a href="/world-chain" className="product-card">
     <div className="product-card-tile">
-      <img src="/icons/landing/world-chain.svg" alt="" className="product-card-icon" style={{ width: "40px", height: "40px", display: "block" }} />
+      <img src="/icons/landing/world-chain.svg" alt="" className="product-card-icon" style={{ width: "32px", height: "32px", display: "block" }} />
     </div>
     <div>
       <div className="product-card-title" style={{ fontSize: "32px", lineHeight: 1.2, letterSpacing: "-0.32px", fontWeight: 300 }}>World Chain</div>
@@ -77,7 +77,7 @@ import { DeveloperStories } from "/snippets/developer-stories.jsx";
 
 </div>
 
-<div style={{ marginBottom: "192px" }}>
+<div style={{ marginBottom: "240px" }}>
   <DeveloperStories
     title="Developer stories"
     subtitle="See how developers build trusted, human-centered apps with World."
@@ -107,8 +107,8 @@ import { DeveloperStories } from "/snippets/developer-stories.jsx";
   />
 </div>
 
-<div style={{ marginBottom: "128px" }}>
-  <div className="landing-section-title" style={{ marginBottom: "48px" }}>World Tech Updates</div>
+<div style={{ marginBottom: "240px" }}>
+  <div className="landing-section-title" style={{ marginBottom: "40px" }}>World Tech Updates</div>
   <div className="landing-updates">
     <a className="landing-update" href="https://world.org/blog/engineering/world-chain-full-block-access-lists" target="_blank" rel="noopener noreferrer">
       <div className="landing-update-title">World Chain launches full block access lists</div>
diff --git a/tailwind.css b/tailwind.css
index d3bd1ae..b13f912 100644
--- a/tailwind.css
+++ b/tailwind.css
@@ -156,9 +156,14 @@
      w-[min(760px,85%)] is silently dropped by Mintlify's Tailwind compiler
      (values with a comma + %), which renders the cards at zero size. */
   .landing-story-card {
-    width: calc(50% - 44px);
+    width: calc((100% - 96px) / 2 - 12px);
     aspect-ratio: 4 / 3;
   }
+  @media (min-width: 901px) {
+    .landing-stories-track {
+      margin-right: -96px;
+    }
+  }
   @media (max-width: 900px) {
     .landing-story-card {
       width: 85%;
@@ -354,8 +359,8 @@
     color: #F3F2F0;
   }
   .landing-hero-sub {
-    margin-top: 20px;
-    max-width: 640px;
+    margin-top: 24px;
+    max-width: 487px;
     font-size: 24px;
     line-height: 1.35;
     letter-spacing: -0.24px;
@@ -380,7 +385,7 @@
     display: grid;
     grid-template-columns: repeat(2, 1fr);
     column-gap: 80px;
-    row-gap: 104px;
+    row-gap: 113px;
   }
   @media (max-width: 900px) {
     .landing-card-grid {
@@ -413,4 +418,30 @@
     }
   }
 
+  /* ------------------------------------------------------------------ */
+  /* Header/content alignment (Docs 3.0 QA) — the navbar container and   */
+  /* the docs-page body use Mintlify's max-w-8xl (the body via a         */
+  /* peer-variant class); match both to the 1728px design frame with     */
+  /* 96px gutters so the logo, tabs, hero, and content share one edge.   */
+  /* ------------------------------------------------------------------ */
+  @media (min-width: 1024px) {
+    [class*="max-w-8xl"] {
+      max-width: 1728px !important;
+    }
+    /* Navbar top row (logo/search/CTA) and tab row: 48px → 96px gutters. */
+    #navbar .lg\:px-12,
+    #navbar .px-12 {
+      padding-left: 96px !important;
+      padding-right: 96px !important;
+    }
+    /* Docs pages: pull the sidebar/content wrapper out to the same frame
+       so the sidebar lines up under the logo (group headers and link text
+       both carry a 16px inset, so 80px padding lands them at 96px).
+       Scoped to non-custom pages; the homepage manages its own gutters. */
+    body:has(#navbar.is-not-custom) div[class*="is-not-custom]:px-4"] {
+      padding-left: 80px !important;
+      padding-right: 80px !important;
+    }
+  }
+
 }