From fe21a0c605ce27dbf3f8a03fb90554aab08455f3 Mon Sep 17 00:00:00 2001
From: nidhi-singh02 <nidhi2894@gmail.com>
Date: Wed, 3 Sep 2025 18:55:58 +0400
Subject: [PATCH 1/3] adding introduction page for express relay

---
 .../content/docs/express-relay/index.mdx      | 64 +++++++++++++++++--
 1 file changed, 59 insertions(+), 5 deletions(-)

diff --git a/apps/developer-hub/content/docs/express-relay/index.mdx b/apps/developer-hub/content/docs/express-relay/index.mdx
index a466db4185..4c3b01e7bc 100644
--- a/apps/developer-hub/content/docs/express-relay/index.mdx
+++ b/apps/developer-hub/content/docs/express-relay/index.mdx
@@ -1,10 +1,64 @@
 ---
-title: Overview
-description: A placeholder landing page
-icon: CardsThree
+title: "Express Relay: Eliminate MEV with Priority Auctions"
+description: >-
+  Express Relay enables better orderflow mechanisms that eliminate MEV. Protocol developers can recapture MEV while searchers get unified access to opportunities.
+icon: Gavel
 full: true
 ---
 
-# Take Back Control with Express Relay
+# Introduction
 
-Integrate directly with searchers to recapture MEV. Go to market faster. Accelerate your protocol's growth.
+Express Relay is a priority auction which enables better orderflow mechanisms that eliminate [Maximal Extractable Value](https://www.ledger.com/academy/glossary/maximal-extractable-value-mev) (MEV).
+
+- **For Protocol Developers:** Express Relay allows protocols to recapture MEV and access a network of searchers for more competitive pricing than on-chain sources provide.
+  With Express Relay, protocols get access to plug-and-play liquidity.
+
+- **For Searchers:** Express Relay provides easy and unified access to a range of orderflow opportunities across integrated DeFi protocols.
+
+## Integration
+
+To integrate with Express Relay, you can integrate as a protocol (to power token swaps) or as a searcher.
+
+<div className="grid grid-cols-1 md:grid-cols-2 gap-6 mt-8">
+  <a href="./integrate-as-protocol" className="block group bg-white dark:bg-gray-900 border border-gray-200 dark:border-gray-700 rounded-lg p-6 hover:border-gray-300 dark:hover:border-gray-600 transition-colors">
+    <div className="flex items-center gap-3 mb-3">
+      <div className="w-8 h-8 rounded-lg bg-blue-100 dark:bg-blue-900 flex items-center justify-center">
+        <svg className="w-4 h-4 text-blue-600 dark:text-blue-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
+        </svg>
+      </div>
+      <h3 className="text-lg font-semibold text-gray-900 dark:text-white group-hover:text-blue-600 dark:group-hover:text-blue-400">Integrate as a Protocol</h3>
+    </div>
+    <p className="text-gray-600 dark:text-gray-400">Power token swaps and recapture MEV with Express Relay integration</p>
+  </a>
+
+  <a href="./integrate-as-searcher" className="block group bg-white dark:bg-gray-900 border border-gray-200 dark:border-gray-700 rounded-lg p-6 hover:border-gray-300 dark:hover:border-gray-600 transition-colors">
+    <div className="flex items-center gap-3 mb-3">
+      <div className="w-8 h-8 rounded-lg bg-green-100 dark:bg-green-900 flex items-center justify-center">
+        <svg className="w-4 h-4 text-green-600 dark:text-green-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
+        </svg>
+      </div>
+      <h3 className="text-lg font-semibold text-gray-900 dark:text-white group-hover:text-green-600 dark:group-hover:text-green-400">Integrate as a Searcher</h3>
+    </div>
+    <p className="text-gray-600 dark:text-gray-400">Access unified orderflow opportunities across DeFi protocols</p>
+  </a>
+</div>
+
+## Learn
+
+To learn more about Express Relay, refer to the following resources:
+
+<div className="mt-8">
+  <a href="./how-express-relay-works" className="block group bg-white dark:bg-gray-900 border border-gray-200 dark:border-gray-700 rounded-lg p-6 hover:border-gray-300 dark:hover:border-gray-600 transition-colors">
+    <div className="flex items-center gap-3 mb-3">
+      <div className="w-8 h-8 rounded-lg bg-purple-100 dark:bg-purple-900 flex items-center justify-center">
+        <svg className="w-4 h-4 text-purple-600 dark:text-purple-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M8.228 9c.549-1.165 2.03-2 3.772-2 2.21 0 4 1.343 4 3 0 1.4-1.278 2.575-3.006 2.907-.542.104-.994.54-.994 1.093m0 3h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
+        </svg>
+      </div>
+      <h3 className="text-lg font-semibold text-gray-900 dark:text-white group-hover:text-purple-600 dark:group-hover:text-purple-400">How Express Relay Works</h3>
+    </div>
+    <p className="text-gray-600 dark:text-gray-400">Understand the mechanics behind Express Relay's priority auction system</p>
+  </a>
+</div>

From 7c14cb66a2c733ccfa6131bc390b0fa857373895 Mon Sep 17 00:00:00 2001
From: nidhi-singh02 <nidhi2894@gmail.com>
Date: Wed, 3 Sep 2025 19:16:57 +0400
Subject: [PATCH 2/3] create integration card component and use it

---
 .../content/docs/express-relay/index.mdx      | 66 +++++++++----------
 .../src/components/IntegrationCard/index.tsx  | 54 +++++++++++++++
 apps/developer-hub/src/mdx-components.tsx     |  2 +
 3 files changed, 89 insertions(+), 33 deletions(-)
 create mode 100644 apps/developer-hub/src/components/IntegrationCard/index.tsx

diff --git a/apps/developer-hub/content/docs/express-relay/index.mdx b/apps/developer-hub/content/docs/express-relay/index.mdx
index 4c3b01e7bc..0f480502be 100644
--- a/apps/developer-hub/content/docs/express-relay/index.mdx
+++ b/apps/developer-hub/content/docs/express-relay/index.mdx
@@ -20,29 +20,29 @@ Express Relay is a priority auction which enables better orderflow mechanisms th
 To integrate with Express Relay, you can integrate as a protocol (to power token swaps) or as a searcher.
 
 <div className="grid grid-cols-1 md:grid-cols-2 gap-6 mt-8">
-  <a href="./integrate-as-protocol" className="block group bg-white dark:bg-gray-900 border border-gray-200 dark:border-gray-700 rounded-lg p-6 hover:border-gray-300 dark:hover:border-gray-600 transition-colors">
-    <div className="flex items-center gap-3 mb-3">
-      <div className="w-8 h-8 rounded-lg bg-blue-100 dark:bg-blue-900 flex items-center justify-center">
-        <svg className="w-4 h-4 text-blue-600 dark:text-blue-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
-        </svg>
-      </div>
-      <h3 className="text-lg font-semibold text-gray-900 dark:text-white group-hover:text-blue-600 dark:group-hover:text-blue-400">Integrate as a Protocol</h3>
-    </div>
-    <p className="text-gray-600 dark:text-gray-400">Power token swaps and recapture MEV with Express Relay integration</p>
-  </a>
+  <IntegrationCard
+    href="./integrate-as-protocol"
+    colorScheme="blue"
+    title="Integrate as a Protocol"
+    description="Power token swaps and recapture MEV with Express Relay integration"
+    icon={
+      <svg fill="none" stroke="currentColor" viewBox="0 0 24 24">
+        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
+      </svg>
+    }
+  />
 
-  <a href="./integrate-as-searcher" className="block group bg-white dark:bg-gray-900 border border-gray-200 dark:border-gray-700 rounded-lg p-6 hover:border-gray-300 dark:hover:border-gray-600 transition-colors">
-    <div className="flex items-center gap-3 mb-3">
-      <div className="w-8 h-8 rounded-lg bg-green-100 dark:bg-green-900 flex items-center justify-center">
-        <svg className="w-4 h-4 text-green-600 dark:text-green-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
-        </svg>
-      </div>
-      <h3 className="text-lg font-semibold text-gray-900 dark:text-white group-hover:text-green-600 dark:group-hover:text-green-400">Integrate as a Searcher</h3>
-    </div>
-    <p className="text-gray-600 dark:text-gray-400">Access unified orderflow opportunities across DeFi protocols</p>
-  </a>
+  <IntegrationCard
+    href="./integrate-as-searcher"
+    colorScheme="green"
+    title="Integrate as a Searcher"
+    description="Access unified orderflow opportunities across DeFi protocols"
+    icon={
+      <svg fill="none" stroke="currentColor" viewBox="0 0 24 24">
+        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
+      </svg>
+    }
+  />
 </div>
 
 ## Learn
@@ -50,15 +50,15 @@ To integrate with Express Relay, you can integrate as a protocol (to power token
 To learn more about Express Relay, refer to the following resources:
 
 <div className="mt-8">
-  <a href="./how-express-relay-works" className="block group bg-white dark:bg-gray-900 border border-gray-200 dark:border-gray-700 rounded-lg p-6 hover:border-gray-300 dark:hover:border-gray-600 transition-colors">
-    <div className="flex items-center gap-3 mb-3">
-      <div className="w-8 h-8 rounded-lg bg-purple-100 dark:bg-purple-900 flex items-center justify-center">
-        <svg className="w-4 h-4 text-purple-600 dark:text-purple-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M8.228 9c.549-1.165 2.03-2 3.772-2 2.21 0 4 1.343 4 3 0 1.4-1.278 2.575-3.006 2.907-.542.104-.994.54-.994 1.093m0 3h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
-        </svg>
-      </div>
-      <h3 className="text-lg font-semibold text-gray-900 dark:text-white group-hover:text-purple-600 dark:group-hover:text-purple-400">How Express Relay Works</h3>
-    </div>
-    <p className="text-gray-600 dark:text-gray-400">Understand the mechanics behind Express Relay's priority auction system</p>
-  </a>
+  <IntegrationCard
+    href="./how-express-relay-works"
+    colorScheme="purple"
+    title="How Express Relay Works"
+    description="Understand the mechanics behind Express Relay's priority auction system"
+    icon={
+      <svg fill="none" stroke="currentColor" viewBox="0 0 24 24">
+        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M8.228 9c.549-1.165 2.03-2 3.772-2 2.21 0 4 1.343 4 3 0 1.4-1.278 2.575-3.006 2.907-.542.104-.994.54-.994 1.093m0 3h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
+      </svg>
+    }
+  />
 </div>
diff --git a/apps/developer-hub/src/components/IntegrationCard/index.tsx b/apps/developer-hub/src/components/IntegrationCard/index.tsx
new file mode 100644
index 0000000000..7a03fe18ff
--- /dev/null
+++ b/apps/developer-hub/src/components/IntegrationCard/index.tsx
@@ -0,0 +1,54 @@
+interface IntegrationCardProps {
+  href: string;
+  icon: React.ReactNode;
+  title: string;
+  description: string;
+  colorScheme?: 'blue' | 'green' | 'purple';
+}
+
+export const IntegrationCard = ({ 
+  href, 
+  icon, 
+  title, 
+  description, 
+  colorScheme = 'blue' 
+}: IntegrationCardProps) => {
+  const colorClasses = {
+    blue: {
+      bg: 'bg-blue-100 dark:bg-blue-900',
+      text: 'text-blue-600 dark:text-blue-400',
+      hoverText: 'group-hover:text-blue-600 dark:group-hover:text-blue-400'
+    },
+    green: {
+      bg: 'bg-green-100 dark:bg-green-900',
+      text: 'text-green-600 dark:text-green-400',
+      hoverText: 'group-hover:text-green-600 dark:group-hover:text-green-400'
+    },
+    purple: {
+      bg: 'bg-purple-100 dark:bg-purple-900',
+      text: 'text-purple-600 dark:text-purple-400',
+      hoverText: 'group-hover:text-purple-600 dark:group-hover:text-purple-400'
+    }
+  };
+
+  const colors = colorClasses[colorScheme];
+
+  return (
+    <a 
+      href={href} 
+      className="block group bg-white dark:bg-gray-900 border border-gray-200 dark:border-gray-700 rounded-lg p-6 hover:border-gray-300 dark:hover:border-gray-600 transition-colors"
+    >
+      <div className="flex items-center gap-3 mb-3">
+        <div className={`w-8 h-8 rounded-lg ${colors.bg} flex items-center justify-center`}>
+          <div className={`w-4 h-4 ${colors.text}`}>
+            {icon}
+          </div>
+        </div>
+        <h3 className={`text-lg font-semibold text-gray-900 dark:text-white ${colors.hoverText}`}>
+          {title}
+        </h3>
+      </div>
+      <p className="text-gray-600 dark:text-gray-400">{description}</p>
+    </a>
+  );
+};
diff --git a/apps/developer-hub/src/mdx-components.tsx b/apps/developer-hub/src/mdx-components.tsx
index c6a3bb3106..91c00c2b34 100644
--- a/apps/developer-hub/src/mdx-components.tsx
+++ b/apps/developer-hub/src/mdx-components.tsx
@@ -2,6 +2,7 @@ import { InfoBox } from "@pythnetwork/component-library/InfoBox";
 import { Tab, Tabs } from "fumadocs-ui/components/tabs";
 import defaultMdxComponents from "fumadocs-ui/mdx";
 import type { MDXComponents } from "mdx/types";
+import { IntegrationCard } from "./components/IntegrationCard";
 
 export function getMDXComponents(components?: MDXComponents): MDXComponents {
   return {
@@ -12,5 +13,6 @@ export function getMDXComponents(components?: MDXComponents): MDXComponents {
     InfoBox: InfoBox,
     // Fuma has a Callout component in `defaultMdxComponents` which we still want to overwrite
     Callout: InfoBox,
+    IntegrationCard,
   };
 }

From e350c074d4391a1be62ebdb7dacd8e980d1a46ca Mon Sep 17 00:00:00 2001
From: nidhi-singh02 <nidhi2894@gmail.com>
Date: Wed, 3 Sep 2025 19:25:01 +0400
Subject: [PATCH 3/3] build fix

---
 .../content/docs/express-relay/index.mdx      |  7 ++-
 .../src/components/IntegrationCard/index.tsx  | 54 ++++++++++---------
 apps/developer-hub/src/mdx-components.tsx     |  1 +
 3 files changed, 35 insertions(+), 27 deletions(-)

diff --git a/apps/developer-hub/content/docs/express-relay/index.mdx b/apps/developer-hub/content/docs/express-relay/index.mdx
index 0f480502be..0f10295067 100644
--- a/apps/developer-hub/content/docs/express-relay/index.mdx
+++ b/apps/developer-hub/content/docs/express-relay/index.mdx
@@ -57,7 +57,12 @@ To learn more about Express Relay, refer to the following resources:
     description="Understand the mechanics behind Express Relay's priority auction system"
     icon={
       <svg fill="none" stroke="currentColor" viewBox="0 0 24 24">
-        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M8.228 9c.549-1.165 2.03-2 3.772-2 2.21 0 4 1.343 4 3 0 1.4-1.278 2.575-3.006 2.907-.542.104-.994.54-.994 1.093m0 3h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
+        <path
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          strokeWidth={2}
+          d="M8.228 9c.549-1.165 2.03-2 3.772-2 2.21 0 4 1.343 4 3 0 1.4-1.278 2.575-3.006 2.907-.542.104-.994.54-.994 1.093m0 3h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
+        />
       </svg>
     }
   />
diff --git a/apps/developer-hub/src/components/IntegrationCard/index.tsx b/apps/developer-hub/src/components/IntegrationCard/index.tsx
index 7a03fe18ff..80467970e0 100644
--- a/apps/developer-hub/src/components/IntegrationCard/index.tsx
+++ b/apps/developer-hub/src/components/IntegrationCard/index.tsx
@@ -1,50 +1,52 @@
-interface IntegrationCardProps {
+type IntegrationCardProps = {
   href: string;
   icon: React.ReactNode;
   title: string;
   description: string;
-  colorScheme?: 'blue' | 'green' | 'purple';
-}
+  colorScheme?: "blue" | "green" | "purple";
+};
 
-export const IntegrationCard = ({ 
-  href, 
-  icon, 
-  title, 
-  description, 
-  colorScheme = 'blue' 
+export const IntegrationCard = ({
+  href,
+  icon,
+  title,
+  description,
+  colorScheme = "blue",
 }: IntegrationCardProps) => {
   const colorClasses = {
     blue: {
-      bg: 'bg-blue-100 dark:bg-blue-900',
-      text: 'text-blue-600 dark:text-blue-400',
-      hoverText: 'group-hover:text-blue-600 dark:group-hover:text-blue-400'
+      bg: "bg-blue-100 dark:bg-blue-900",
+      text: "text-blue-600 dark:text-blue-400",
+      hoverText: "group-hover:text-blue-600 dark:group-hover:text-blue-400",
     },
     green: {
-      bg: 'bg-green-100 dark:bg-green-900',
-      text: 'text-green-600 dark:text-green-400',
-      hoverText: 'group-hover:text-green-600 dark:group-hover:text-green-400'
+      bg: "bg-green-100 dark:bg-green-900",
+      text: "text-green-600 dark:text-green-400",
+      hoverText: "group-hover:text-green-600 dark:group-hover:text-green-400",
     },
     purple: {
-      bg: 'bg-purple-100 dark:bg-purple-900',
-      text: 'text-purple-600 dark:text-purple-400',
-      hoverText: 'group-hover:text-purple-600 dark:group-hover:text-purple-400'
-    }
+      bg: "bg-purple-100 dark:bg-purple-900",
+      text: "text-purple-600 dark:text-purple-400",
+      hoverText: "group-hover:text-purple-600 dark:group-hover:text-purple-400",
+    },
   };
 
   const colors = colorClasses[colorScheme];
 
   return (
-    <a 
-      href={href} 
+    <a
+      href={href}
       className="block group bg-white dark:bg-gray-900 border border-gray-200 dark:border-gray-700 rounded-lg p-6 hover:border-gray-300 dark:hover:border-gray-600 transition-colors"
     >
       <div className="flex items-center gap-3 mb-3">
-        <div className={`w-8 h-8 rounded-lg ${colors.bg} flex items-center justify-center`}>
-          <div className={`w-4 h-4 ${colors.text}`}>
-            {icon}
-          </div>
+        <div
+          className={`w-8 h-8 rounded-lg ${colors.bg} flex items-center justify-center`}
+        >
+          <div className={`w-4 h-4 ${colors.text}`}>{icon}</div>
         </div>
-        <h3 className={`text-lg font-semibold text-gray-900 dark:text-white ${colors.hoverText}`}>
+        <h3
+          className={`text-lg font-semibold text-gray-900 dark:text-white ${colors.hoverText}`}
+        >
           {title}
         </h3>
       </div>
diff --git a/apps/developer-hub/src/mdx-components.tsx b/apps/developer-hub/src/mdx-components.tsx
index 91c00c2b34..d13fc7ba15 100644
--- a/apps/developer-hub/src/mdx-components.tsx
+++ b/apps/developer-hub/src/mdx-components.tsx
@@ -2,6 +2,7 @@ import { InfoBox } from "@pythnetwork/component-library/InfoBox";
 import { Tab, Tabs } from "fumadocs-ui/components/tabs";
 import defaultMdxComponents from "fumadocs-ui/mdx";
 import type { MDXComponents } from "mdx/types";
+
 import { IntegrationCard } from "./components/IntegrationCard";
 
 export function getMDXComponents(components?: MDXComponents): MDXComponents {