Use cards for the main CTAs

Author: m30m

components/icons/ContractIcon.tsx

@@ -0,0 +1,20 @@
+const ContractIcon = ({ className }: { className: string }) => {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      fill="none"
+      viewBox="0 0 24 24"
+      strokeWidth={1.5}
+      stroke="currentColor"
+      className={className}
+    >
+      <path
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        d="M10.125 2.25h-4.5c-.621 0-1.125.504-1.125 1.125v17.25c0 .621.504 1.125 1.125 1.125h12.75c.621 0 1.125-.504 1.125-1.125v-9M10.125 2.25h.375a9 9 0 0 1 9 9v.375M10.125 2.25A3.375 3.375 0 0 1 13.5 5.625v1.5c0 .621.504 1.125 1.125 1.125h1.5a3.375 3.375 0 0 1 3.375 3.375M9 15l2.25 2.25L15 12"
+      />
+    </svg>
+  );
+};
+
+export default ContractIcon;

components/icons/SearchIcon.tsx

@@ -0,0 +1,20 @@
+const SearchIcon = ({ className }: { className: string }) => {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      fill="none"
+      viewBox="0 0 24 24"
+      strokeWidth={1.5}
+      stroke="currentColor"
+      className={className}
+    >
+      <path
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        d="m21 21-5.197-5.197m0 0A7.5 7.5 0 1 0 5.196 5.196a7.5 7.5 0 0 0 10.607 10.607Z"
+      />
+    </svg>
+  );
+};
+
+export default SearchIcon;

pages/express-relay/index.mdx

@@ -1,15 +1,30 @@
+import Link from "next/link";
+
+import { Cards, Card } from "nextra/components";
+import SearchIcon from "../../components/icons/SearchIcon";
+import ContractIcon from "../../components/icons/ContractIcon";
+
 # Introduction
 
 Express Relay is a priority auction that enables protocols to eliminate maximal extractable value (MEV).
 
 **For Protocol Developers:** Express Relay’s auction primitive allows your protocol to prioritize access to permissionless operations, eliminating the extractive role of miners in ordering transactions.
 A network of established searchers compete in the auctions, allowing you to avoid spending time and energy bootstrapping your own protocol-specific searcher network.
-Learn how to [Integrate with Express Relay as a protocol](/express-relay/integrate-as-protocol).
-
-FIXME: This link above and the ones below should be big buttons
 
 **For Searchers:** Express Relay aggregates liquidation and other MEV opportunities across integrated DeFi protocols, providing easy and unified access.
-Learn how to [Integrate with Express Relay as a searcher](/express-relay/integrate-as-searcher).
+
+<Cards>
+  <Card
+    icon={<ContractIcon />}
+    title="Integrate with Express Relay as a protocol"
+    href="./express-relay/integrate-as-protocol"
+  />
+  <Card
+    icon={<SearchIcon />}
+    title="Integrate with Express Relay as a searcher"
+    href="./express-relay/integrate-as-searcher"
+  />
+</Cards>
 
 To learn more about Express Relay's design and how it eliminates MEV, please see [How Express Relay Works](/express-relay/how-express-relay-works).