Merge pull request #3015 from pyth-network/add-express-relay

feat(express-relay): adding introduction page for express relay

Author: nidhi-singh02

apps/developer-hub/content/docs/express-relay/index.mdx

@@ -1,10 +1,69 @@
 ---
-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">
+  <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>
+    }
+  />
+
+  <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
+
+To learn more about Express Relay, refer to the following resources:
+
+<div className="mt-8">
+  <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>

apps/developer-hub/src/components/IntegrationCard/index.tsx

@@ -0,0 +1,56 @@
+type 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>
+  );
+};

apps/developer-hub/src/mdx-components.tsx

@@ -3,6 +3,8 @@ 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 {
     ...defaultMdxComponents,
@@ -12,5 +14,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,
   };
 }