From dd218f734a7885ae78864a85e77a2b02cb12c1b9 Mon Sep 17 00:00:00 2001
From: Tomas R <tomas.rawski@reown.com>
Date: Mon, 13 Jul 2026 21:03:29 -0300
Subject: [PATCH 1/2] docs: restructure Payments sidebar and refresh homepage

Reorganize the Payments sidebar into persona-first groups (Get Started with
nested Coverage & Reference, For PSPs, For Merchants, For Wallets, For Checkout,
AI Agents), switch the theme to "mint", and remove the WalletConnect Pay / Blog
global anchors. Rework the homepage: add a "What's supported" coverage section,
tighten spacing and dividers, adjust product-card layout/copy, make Container
and Title configurable, and add a style.css override for homepage padding.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
---
 docs.json                       | 130 ++++++++++++++------------------
 index.mdx                       |  95 ++++++++++++-----------
 snippets/home/product-cards.mdx |   6 +-
 snippets/home/utility.mdx       |   6 +-
 style.css                       |   9 +++
 5 files changed, 125 insertions(+), 121 deletions(-)
 create mode 100644 style.css

diff --git a/docs.json b/docs.json
index 00bc2de..da7fee0 100644
--- a/docs.json
+++ b/docs.json
@@ -1,5 +1,5 @@
 {
-  "theme": "aspen",
+  "theme": "mint",
   "name": "WalletConnect Pay Docs",
   "description": "Documentation for WalletConnect Pay. Integrate secure crypto payments into your app with step-by-step guides, APIs, and best practices.",
   "colors": {
@@ -38,30 +38,45 @@
             "icon": "credit-card",
             "groups": [
               {
-                "group": "WalletConnect Pay",
+                "group": "Get Started",
                 "pages": [
                   "payments/overview",
                   "payments/for-users",
-                  "payments/token-and-chain-coverage",
-                  "payments/fiat-coverage",
-                  "payments/wallet-coverage",
-                  "payments/cex-coverage"
+                  {
+                    "group": "Coverage & Reference",
+                    "pages": [
+                      "payments/token-and-chain-coverage",
+                      "payments/fiat-coverage",
+                      "payments/wallet-coverage",
+                      "payments/cex-coverage"
+                    ]
+                  }
                 ]
               },
               {
-                "group": "WalletConnect Pay for Merchants",
+                "group": "For PSPs",
                 "pages": [
-                  "payments/merchant/quickstart"
+                  "payments/psps/overview",
+                  {
+                    "group": "Headless SDK",
+                    "pages": [
+                      "payments/psps/headless-sdk/overview",
+                      "payments/psps/headless-sdk/how-it-works",
+                      "payments/psps/headless-sdk/implementation",
+                      "payments/psps/headless-sdk/packages-reference"
+                    ]
+                  }
                 ]
               },
               {
-                "group": "Merchant API",
+                "group": "For Merchants",
                 "pages": [
+                  "payments/merchant/quickstart",
                   "payments/merchant-api/logo-specification"
                 ]
               },
               {
-                "group": "WalletConnect Pay for Wallets",
+                "group": "For Wallets",
                 "pages": [
                   "payments/wallets/overview",
                   {
@@ -75,7 +90,7 @@
                     ]
                   },
                   {
-                    "group": "Integrate using the Wallet SDK",
+                    "group": "Integrate Wallet SDK",
                     "pages": [
                       "payments/wallets/walletkit/kotlin",
                       "payments/wallets/walletkit/swift",
@@ -85,6 +100,7 @@
                     ]
                   },
                   "payments/wallets/api-first",
+                  "payments/wallets/tap-to-pay",
                   {
                     "group": "Token & Chain Support",
                     "pages": [
@@ -92,27 +108,11 @@
                       "payments/wallets/token-chain-support/usdt-support",
                       "payments/wallets/token-chain-support/solana-support"
                     ]
-                  },
-                  "payments/wallets/tap-to-pay"
-                ]
-              },
-              {
-                "group": "WalletConnect Pay for PSPs",
-                "pages": [
-                  "payments/psps/overview",
-                  {
-                    "group": "Headless SDK",
-                    "pages": [
-                      "payments/psps/headless-sdk/overview",
-                      "payments/psps/headless-sdk/how-it-works",
-                      "payments/psps/headless-sdk/implementation",
-                      "payments/psps/headless-sdk/packages-reference"
-                    ]
                   }
                 ]
               },
               {
-                "group": "Ecommerce and Online Checkout",
+                "group": "For Checkout",
                 "pages": [
                   "payments/ecommerce/overview",
                   "payments/ecommerce/integration",
@@ -120,7 +120,7 @@
                 ]
               },
               {
-                "group": "WalletConnect AI Agent SDK",
+                "group": "AI Agents",
                 "pages": [
                   "agents/overview"
                 ]
@@ -195,30 +195,45 @@
             "icon": "credit-card",
             "groups": [
               {
-                "group": "WalletConnect Pay",
+                "group": "Get Started",
                 "pages": [
                   "payments/overview",
                   "payments/for-users",
-                  "payments/token-and-chain-coverage",
-                  "payments/fiat-coverage",
-                  "payments/wallet-coverage",
-                  "payments/cex-coverage"
+                  {
+                    "group": "Coverage & Reference",
+                    "pages": [
+                      "payments/token-and-chain-coverage",
+                      "payments/fiat-coverage",
+                      "payments/wallet-coverage",
+                      "payments/cex-coverage"
+                    ]
+                  }
                 ]
               },
               {
-                "group": "WalletConnect Pay for Merchants",
+                "group": "For PSPs",
                 "pages": [
-                  "payments/merchant/quickstart"
+                  "payments/psps/overview",
+                  {
+                    "group": "Headless SDK",
+                    "pages": [
+                      "payments/psps/headless-sdk/overview",
+                      "payments/psps/headless-sdk/how-it-works",
+                      "payments/psps/headless-sdk/implementation",
+                      "payments/psps/headless-sdk/packages-reference"
+                    ]
+                  }
                 ]
               },
               {
-                "group": "Merchant API",
+                "group": "For Merchants",
                 "pages": [
+                  "payments/merchant/quickstart",
                   "payments/merchant-api/logo-specification"
                 ]
               },
               {
-                "group": "WalletConnect Pay for Wallets",
+                "group": "For Wallets",
                 "pages": [
                   "payments/wallets/overview",
                   {
@@ -232,7 +247,7 @@
                     ]
                   },
                   {
-                    "group": "Integrate using the Wallet SDK",
+                    "group": "Integrate Wallet SDK",
                     "pages": [
                       "payments/wallets/walletkit/kotlin",
                       "payments/wallets/walletkit/swift",
@@ -242,6 +257,7 @@
                     ]
                   },
                   "payments/wallets/api-first",
+                  "payments/wallets/tap-to-pay",
                   {
                     "group": "Token & Chain Support",
                     "pages": [
@@ -249,27 +265,11 @@
                       "payments/wallets/token-chain-support/usdt-support",
                       "payments/wallets/token-chain-support/solana-support"
                     ]
-                  },
-                  "payments/wallets/tap-to-pay"
-                ]
-              },
-              {
-                "group": "WalletConnect Pay for PSPs",
-                "pages": [
-                  "payments/psps/overview",
-                  {
-                    "group": "Headless SDK",
-                    "pages": [
-                      "payments/psps/headless-sdk/overview",
-                      "payments/psps/headless-sdk/how-it-works",
-                      "payments/psps/headless-sdk/implementation",
-                      "payments/psps/headless-sdk/packages-reference"
-                    ]
                   }
                 ]
               },
               {
-                "group": "Ecommerce and Online Checkout",
+                "group": "For Checkout",
                 "pages": [
                   "payments/ecommerce/overview",
                   "payments/ecommerce/integration",
@@ -277,7 +277,7 @@
                 ]
               },
               {
-                "group": "WalletConnect AI Agent SDK",
+                "group": "AI Agents",
                 "pages": [
                   "agents/overview"
                 ]
@@ -343,21 +343,7 @@
         ],
         "tag": "Preview"
       }
-    ],
-    "global": {
-      "anchors": [
-        {
-          "anchor": "WalletConnect Pay",
-          "href": "https://walletconnect.com",
-          "icon": "globe"
-        },
-        {
-          "anchor": "Blog",
-          "href": "https://walletconnect.network/blog",
-          "icon": "newspaper"
-        }
-      ]
-    }
+    ]
   },
   "logo": {
     "light": "/logo/light.svg",
diff --git a/index.mdx b/index.mdx
index bb687a5..a902251 100644
--- a/index.mdx
+++ b/index.mdx
@@ -10,53 +10,20 @@ import { ProductTiles } from '/snippets/home/product-tiles.mdx';
 import { appCategories } from '/snippets/home/data.mdx';
 import { ProductCard } from '/snippets/home/product-cards.mdx';
 
-<div className="px-5 divide-y divide-gray-100 dark:divide-white/10">
-  <Container>
-    <div className="w-full flex flex-col">
-      <div className="flex flex-col items-start justify-center w-full max-w-4xl text-left">
-        <div
+<div className="px-5">
+
+   <Container className="pt-0 pb-14">
+    <div className="flex flex-col w-full mb-8">
+      <div
           className="text-gray-900 dark:text-gray-200 text-4xl tracking-tight"
         >
           WalletConnect Pay
-        </div>
-        <p
-          className="text-md text-gray-600 dark:text-gray-400 text-left mt-3 mb-4"
-        >
-        The easiest way to enable crypto payments from any wallet, any asset, anywhere.
-        </p>
-        <div className="flex flex-row gap-4 mt-5">
-        <a href="/payments/overview">
-          <button
-            type="button"
-            className="px-5 flex items-center font-medium text-sm rounded-full py-2 shadow-sm text-white dark:text-gray-900 bg-primary-dark dark:bg-primary-light hover:opacity-[0.9] hover:bg-primary justify-center"
-          >
-            Get started
-            <svg
-              className="size-3 ml-2 bg-white dark:bg-gray-900"
-              style={{
-                maskImage: 'url("https://mintlify.b-cdn.net/solid/arrow-right-long.svg")',
-                maskRepeat: 'no-repeat',
-                maskPosition: 'center center'
-              }}
-            />
-          </button>
-          </a>
-        </div>
-      </div>
-    </div>
-
-  </Container>
-   <Container>
-    <div className="flex flex-col w-full mb-8">
-      <div className="flex items-center justify-between w-full">
-        <Title>
-          Introducing WalletConnect Pay
-        </Title>
+        
       </div>
       <p
         className="text-[#5B616E] dark:text-gray-300 text-md mb-1 mt-3"
       >
-      **[WalletConnect Pay](/payments/overview)** is a complete, end-to-end crypto payment solution that allows PSPs and merchants to enable crypto payments from any wallet and any asset through a single, familiar integration.
+      A complete, end-to-end crypto payment solution that allows PSPs and merchants to enable crypto payments from any wallet and any asset through a single, familiar integration.
       </p>
     </div>
     <div className="dark:hidden block">
@@ -71,7 +38,7 @@ import { ProductCard } from '/snippets/home/product-cards.mdx';
         />
         <ProductCard
           title="Wallet Integration"
-          description="Add built in support for WalletConnect Pay and allow your users to pay in real-world context, retaining custody and control of the UX."
+          description="Add built-in WalletConnect Pay support so users can pay in real-world context, keeping custody and UX control."
           href="/payments/wallets/overview"
           img="/images/wallet.png"
           model="For Wallets"
@@ -99,7 +66,7 @@ import { ProductCard } from '/snippets/home/product-cards.mdx';
         />
          <ProductCard
         title="Wallet Integration"
-        description="Add built in support for WalletConnect Pay and allow your users to pay in real-world context, retaining custody and control of the UX."
+        description="Add built-in WalletConnect Pay support so users can pay in real-world context, keeping custody and UX control."
         href="/payments/wallets/overview"
         img="/images/wallet.png"
         model="For Wallets"
@@ -115,7 +82,49 @@ import { ProductCard } from '/snippets/home/product-cards.mdx';
         />
     </CardGroup>
     </div>
-    <ul class="not-prose pb-[1px] h-1 min-w-full mt-3 overflow-auto" />
+  </Container>
+
+  <Container>
+    <div className="flex flex-col w-full mb-5">
+      <Title>
+        What's supported
+      </Title>
+      <p
+        className="text-[#5B616E] dark:text-gray-300 text-md mb-1 mt-3"
+      >
+      See the tokens, chains, fiat currencies, wallets, and exchanges available with WalletConnect Pay.
+      </p>
+    </div>
+    <Columns cols={2}>
+      <Card
+        title="Tokens & Chains"
+        icon="coins"
+        href="/payments/token-and-chain-coverage"
+      >
+      Supported tokens and blockchain networks.
+      </Card>
+      <Card
+        title="Fiat Currencies"
+        icon="money-bill"
+        href="/payments/fiat-coverage"
+      >
+      Fiat currencies available for settlement and pricing.
+      </Card>
+      <Card
+        title="Wallets"
+        icon="wallet"
+        href="/payments/wallet-coverage"
+      >
+      Wallets that support WalletConnect Pay.
+      </Card>
+      <Card
+        title="Exchanges (CEX)"
+        icon="building-columns"
+        href="/payments/cex-coverage"
+      >
+      Centralized exchanges supported for payments.
+      </Card>
+    </Columns>
   </Container>
 
   <Container>
diff --git a/snippets/home/product-cards.mdx b/snippets/home/product-cards.mdx
index 8456223..ef04523 100644
--- a/snippets/home/product-cards.mdx
+++ b/snippets/home/product-cards.mdx
@@ -1,6 +1,6 @@
 export const ProductCard = ({ img, href, title, description, model, type }) => {
   return (
-    <a href={href} rel="noopener noreferrer" className="group mb-5">
+    <a href={href} rel="noopener noreferrer" className="group no-underline" style={{ textDecoration: 'none', borderBottom: 'none', backgroundImage: 'none', marginBottom: '0.25rem' }}>
       <div className="flex flex-col rounded-xl md:p-1">
         <div className="w-full h-32 overflow-hidden rounded-xl bg-gray-100 dark:bg-gray-800">
           <img
@@ -11,8 +11,8 @@ export const ProductCard = ({ img, href, title, description, model, type }) => {
             noZoom
           />
         </div>
-        <div className="flex flex-col gap-3 pb-2">
-          <h2 className="text-md font-medium text-gray-900 dark:text-gray-200 group-hover:text-gray-600 dark:group-hover:text-gray-400 transition-colors mb-[-8px]">
+        <div className="flex flex-col gap-3 pb-2" style={{ marginTop: '1rem' }}>
+          <h2 className="text-md font-medium text-gray-900 dark:text-gray-200 group-hover:text-gray-600 dark:group-hover:text-gray-400 transition-colors mb-[-8px]" style={{ marginTop: 0 }}>
             {title}
           </h2>
           <p className="text-gray-500 dark:text-gray-400 text-sm font-medium">
diff --git a/snippets/home/utility.mdx b/snippets/home/utility.mdx
index 5c0fa13..78fc04e 100644
--- a/snippets/home/utility.mdx
+++ b/snippets/home/utility.mdx
@@ -1,6 +1,6 @@
-export const Container = ({ children }) => {
+export const Container = ({ children, className = "py-14" }) => {
   return (
-    <div className="px-4 lg:px-10 py-14">
+    <div className={`px-4 lg:px-10 ${className}`}>
       {children}
     </div>
   )
@@ -8,7 +8,7 @@ export const Container = ({ children }) => {
 
 export const Title = ({ children }) => {
   return (
-    <div className="text-gray-900 dark:text-gray-200 text-2xl tracking-tight">
+    <div className="text-gray-900 dark:text-gray-200 text-2xl tracking-tight" style={{ paddingTop: '2.5rem' }}>
       {children}
     </div>
   )
diff --git a/style.css b/style.css
new file mode 100644
index 0000000..75a8e93
--- /dev/null
+++ b/style.css
@@ -0,0 +1,9 @@
+/* Homepage: reduce the content wrapper's large-screen top padding (pt-10 -> pt-5).
+   `.lg\:pt-10` is applied by Mintlify's frame-mode layout, which only the homepage
+   (index.mdx, mode: "frame") uses, so this effectively scopes to the homepage.
+   Loaded after Mintlify's CSS, so this wins on equal specificity. */
+@media (min-width: 1024px) {
+  .lg\:pt-10 {
+    padding-top: calc(var(--spacing) * 5);
+  }
+}

From b197b3ff910f5704443e8daa6843be708dfb7652 Mon Sep 17 00:00:00 2001
From: Tom <rtomas@gmail.com>
Date: Tue, 14 Jul 2026 15:42:47 -0300
Subject: [PATCH 2/2] Update style.css

---
 style.css | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/style.css b/style.css
index 75a8e93..35f84f8 100644
--- a/style.css
+++ b/style.css
@@ -1,7 +1,7 @@
 /* Homepage: reduce the content wrapper's large-screen top padding (pt-10 -> pt-5).
    `.lg\:pt-10` is applied by Mintlify's frame-mode layout, which only the homepage
    (index.mdx, mode: "frame") uses, so this effectively scopes to the homepage.
-   Loaded after Mintlify's CSS, so this wins on equal specificity. */
+   Loaded after Mintlify's CSS, so this wins on equal specificity.  */
 @media (min-width: 1024px) {
   .lg\:pt-10 {
     padding-top: calc(var(--spacing) * 5);