From cd1db4a0de113b967ec062d70ce785351224e796 Mon Sep 17 00:00:00 2001
From: Kenk <kenghin_lim@hotmail.com>
Date: Fri, 11 Aug 2023 19:24:21 +0700
Subject: [PATCH] feat(website): use cards in guides (#14378)

Co-authored-by: Marcus Wentz <52706599+MarcusWentz@users.noreply.github.com>
Co-authored-by: d1onys1us <13951458+d1onys1us@users.noreply.github.com>
Co-authored-by: TABASCO <84655644+TABASCOatw@users.noreply.github.com>
Co-authored-by: Korbinian <KorbinianK@users.noreply.github.com>
Co-authored-by: Brecht Devos <Brechtp.Devos@gmail.com>
Co-authored-by: David <david@taiko.xyz>
Co-authored-by: Daniel Wang <99078276+dantaik@users.noreply.github.com>
Co-authored-by: Tacrew <t.murakami411@gmail.com>
Co-authored-by: TIGGERLAND <99783550+TIGGERLAND@users.noreply.github.com>
Co-authored-by: IchiCoin <94767458+IchiCoin@users.noreply.github.com>
---
 packages/website/pages/docs/guides.mdx        | 35 +++++++++++--------
 .../pages/docs/guides/run-a-node/_meta.json   |  4 +--
 2 files changed, 23 insertions(+), 16 deletions(-)

diff --git a/packages/website/pages/docs/guides.mdx b/packages/website/pages/docs/guides.mdx
index 5ecb86eb761..23ae18188f3 100644
--- a/packages/website/pages/docs/guides.mdx
+++ b/packages/website/pages/docs/guides.mdx
@@ -1,21 +1,28 @@
+import { Cards, Card } from "nextra/components";
+
 # Guides
 
 Check out our guides below. You can leave feedback [here](https://docs.google.com/forms/d/1Vn10tqZW0bPvNUItzeek9u8kh7YkQZOGorMb3LuJVVA) and ask any questions on the [Taiko Discord](https://discord.gg/taikoxyz)!
 
-# Build on Taiko
+## Build on Taiko
+
+<Cards>
+  <Card title="💰 Setup your wallet" href="/docs/guides/build-on-taiko/setup-your-wallet" />
+  <Card title="🎁 Receive tokens" href="/docs/guides/build-on-taiko/receive-tokens" />
+  <Card title="🌉 Bridge tokens" href="/docs/guides/build-on-taiko/bridge-tokens" />
+  <Card title="🔄 Swap tokens" href="/docs/guides/build-on-taiko/swap-tokens" />
+  <Card title="🚀 Deploy a contract" href="/docs/guides/build-on-taiko/deploy-a-contract" />
+  <Card title="📜 Verify a contract" href="/docs/guides/build-on-taiko/verify-a-contract" />
+  <Card title="🛠️ Build a dapp" href="/docs/guides/build-on-taiko/build-a-dapp" />    
+</Cards>
 
-- 💰 [Setup your wallet](/docs/guides/build-on-taiko/setup-your-wallet)
-- 🎁 [Receive tokens](/docs/guides/build-on-taiko/receive-tokens)
-- 🌉 [Bridge tokens](/docs/guides/build-on-taiko/bridge-tokens)
-- 🔄 [Swap tokens](/docs/guides/build-on-taiko/swap-tokens)
-- 🚀 [Deploy a contract](/docs/guides/build-on-taiko/deploy-a-contract)
-- 📜 [Verify a contract](/docs/guides/build-on-taiko/verify-a-contract)
-- 🛠️ [Build a dapp](/docs/guides/build-on-taiko/build-a-dapp)
+## Run a node
 
-# Run a node
+<Cards>
+  <Card title="🔷 Run a Sepolia node" href="/docs/guides/run-a-node/run-a-sepolia-node"/>
+  <Card title="🥁 Run a Taiko node" href="/docs/guides/run-a-node/run-a-taiko-node"/>
+  <Card title="📤 Enable a proposer" href="/docs/guides/run-a-node/enable-a-proposer"/>
+  <Card title="🔎 Enable a prover" href="/docs/guides/run-a-node/enable-a-prover"/>
+  <Card title="🛄 Claim prover rewards" href="/docs/guides/run-a-node/claim-prover-rewards"/>
+</Cards>
 
-- ♦️ [Run a Sepolia node](/docs/guides/run-a-node/run-a-sepolia-node)
-- 🥁 [Run a Taiko node](/docs/guides/run-a-node/run-a-taiko-node)
-- ✉️ [Enable a proposer](/docs/guides/run-a-node/enable-a-proposer)
-- 🔎 [Enable a prover](/docs/guides/run-a-node/enable-a-prover)
-- 🛄 [Claim prover rewards](/docs/guides/run-a-node/claim-prover-ttko)
\ No newline at end of file
diff --git a/packages/website/pages/docs/guides/run-a-node/_meta.json b/packages/website/pages/docs/guides/run-a-node/_meta.json
index 94841e7ed23..126e67beba1 100644
--- a/packages/website/pages/docs/guides/run-a-node/_meta.json
+++ b/packages/website/pages/docs/guides/run-a-node/_meta.json
@@ -1,12 +1,12 @@
 {
   "run-a-sepolia-node": {
-    "title": "♦️ Run a Sepolia node"
+    "title": "🔷 Run a Sepolia node"
   },
   "run-a-taiko-node": {
     "title": "🥁 Run a Taiko node"
   },
   "enable-a-proposer": {
-    "title": "✉️ Enable a proposer"
+    "title": "📤 Enable a proposer"
   },
   "enable-a-prover": {
     "title": "🔎 Enable a prover"