From 50753b58825a7ae386654a41aaf6ea11706b0806 Mon Sep 17 00:00:00 2001
From: Credence <hello@zerocredence.com>
Date: Fri, 13 Dec 2024 18:40:32 +0100
Subject: [PATCH] landing: update bridge section description

---
 landing/src/components/modules/bridge-in.tsx  | 49 ++++++++++++++---
 .../components/modules/bridge-out-step-1.tsx  | 53 ++++++++++++++++++-
 .../components/modules/bridge-out-step-2.tsx  | 36 ++++++++++++-
 3 files changed, 128 insertions(+), 10 deletions(-)

diff --git a/landing/src/components/modules/bridge-in.tsx b/landing/src/components/modules/bridge-in.tsx
index 1985126dd..fefbc173e 100644
--- a/landing/src/components/modules/bridge-in.tsx
+++ b/landing/src/components/modules/bridge-in.tsx
@@ -172,12 +172,49 @@ export const BridgeIn = () => {
     <>
       <div className="max-w-md flex flex-col bg-background gap-3 relative max-h-[calc(75vh-100px)] overflow-y-auto p-3">
         <TypeP>
-          Bridge resources and lords from your Starknet wallet into the Eternum game. You will have to complete the
-          claim on your Realm in the{" "}
-          <a href="https://eternum.realms.world/" target="_blank" className="text-gold underline">
-            game
-          </a>
-          .
+          <div className="space-y-4">
+            <h2 className="text-2xl font-bold mb-4 text-gold border-b border-gold/20 pb-2">
+              Bridge Resources Into Your Realm
+            </h2>
+
+            <div className="flex flex-col gap-4 bg-gold/5 p-4 rounded-lg border border-gold/10">
+              <div className="flex items-start space-x-3">
+                <div className="flex-shrink-0">
+                  <span className="inline-flex items-center justify-center w-7 h-7 rounded-full bg-gold/20 text-gold font-semibold text-sm">
+                    1
+                  </span>
+                </div>
+                <div className="space-y-1">
+                  <h3 className="font-semibold text-gold/90">Bridge Assets into the Game</h3>
+                  <p className="text-sm opacity-80">
+                    Bridge your ERC20 assets, resources and lords from your Starknet wallet into the Eternum game.
+                  </p>
+                </div>
+              </div>
+
+              <div className="flex items-start space-x-3">
+                <div className="flex-shrink-0">
+                  <span className="inline-flex items-center justify-center w-7 h-7 rounded-full bg-gold/20 text-gold font-semibold text-sm">
+                    2
+                  </span>
+                </div>
+                <div className="space-y-1">
+                  <h3 className="font-semibold text-gold/90">Complete Claim</h3>
+                  <p className="text-sm opacity-80">
+                    Complete the claim on your Realm in the{" "}
+                    <a
+                      href="https://eternum.realms.world/"
+                      target="_blank"
+                      className="text-gold underline hover:text-gold/80 transition-colors"
+                    >
+                      <span className="font-bold">game</span>
+                    </a>{" "}
+                    by checking the <span className="font-bold">Resource Arrivals (Donkeys)</span> tab in the game.
+                  </p>
+                </div>
+              </div>
+            </div>
+          </div>
         </TypeP>
         <hr />
         <div className="flex justify-between">
diff --git a/landing/src/components/modules/bridge-out-step-1.tsx b/landing/src/components/modules/bridge-out-step-1.tsx
index f6bfd6dfe..53e637f68 100644
--- a/landing/src/components/modules/bridge-out-step-1.tsx
+++ b/landing/src/components/modules/bridge-out-step-1.tsx
@@ -153,8 +153,57 @@ export const BridgeOutStep1 = () => {
     <>
       <div className="max-w-md bg-background flex flex-col gap-3 max-h-[calc(75vh-100px)] overflow-y-auto p-3">
         <TypeP>
-          Bridge resources from your Realms balance in game to tradeable ERC20 assets in your Starknet wallet. This will
-          require a second step to send the resources to your wallet once the donkeys have arrived at the bank.
+          <div className="space-y-4">
+            <h2 className="text-2xl font-bold mb-4 text-gold border-b border-gold/20 pb-2">
+              Bridge Resources to Wallet
+            </h2>
+
+            <div className="flex flex-col gap-4 bg-gold/5 p-4 rounded-lg border border-gold/10">
+              <div className="flex items-start space-x-3">
+                <div className="flex-shrink-0">
+                  <span className="inline-flex items-center justify-center w-7 h-7 rounded-full bg-gold/20 text-gold font-semibold text-sm">
+                    1
+                  </span>
+                </div>
+                <div className="space-y-1">
+                  <h3 className="font-semibold text-gold/90">Bridge Resources</h3>
+                  <p className="text-sm opacity-80">
+                    Bridge resources from your Realms balance in-game to tradeable ERC20 assets in your Starknet wallet.
+                    The first step is to send it to the bank.
+                  </p>
+                </div>
+              </div>
+
+              <div className="flex items-start space-x-3">
+                <div className="flex-shrink-0">
+                  <span className="inline-flex items-center justify-center w-7 h-7 rounded-full bg-gold/20 text-gold font-semibold text-sm">
+                    2
+                  </span>
+                </div>
+                <div className="space-y-1">
+                  <h3 className="font-semibold text-gold/90">Complete Transfer</h3>
+                  <p className="text-sm opacity-80">
+                    Once the donkeys arrive at the bank, complete the second step ( the next section ) to receive
+                    resources in your wallet.
+                  </p>
+                </div>
+              </div>
+
+              <div className="flex items-start space-x-3">
+                <div className="flex-shrink-0 mt-1">
+                  <span className="inline-flex items-center justify-center w-7 h-7 rounded-full bg-gold/20 text-gold font-semibold text-sm">
+                    ℹ️
+                  </span>
+                </div>
+                <div className="space-y-1">
+                  <h3 className="font-semibold text-gold/90">Important Note</h3>
+                  <p className="text-sm opacity-80">
+                    This bridge will only be available for withdrawals for up to 48 hours after the Season ends.
+                  </p>
+                </div>
+              </div>
+            </div>
+          </div>
         </TypeP>
         <hr />
         <div className="flex justify-between">
diff --git a/landing/src/components/modules/bridge-out-step-2.tsx b/landing/src/components/modules/bridge-out-step-2.tsx
index e8503138f..50c118374 100644
--- a/landing/src/components/modules/bridge-out-step-2.tsx
+++ b/landing/src/components/modules/bridge-out-step-2.tsx
@@ -136,8 +136,40 @@ export const BridgeOutStep2 = () => {
     <>
       <div className="max-w-md bg-background flex flex-col gap-3 max-h-[calc(75vh-100px)] overflow-y-auto p-3">
         <TypeP>
-          Finalise the withdrawal of resources from your Realm in Eternum to your Starknet wallet. The bridge will close
-          and you will be unable to withdraw 48 hours after the Season is won.
+          <div className="space-y-4">
+            <h2 className="text-2xl font-bold mb-4 text-gold border-b border-gold/20 pb-2">
+              Finalize Bridge Withdrawal
+            </h2>
+
+            <div className="flex flex-col gap-4 bg-gold/5 p-4 rounded-lg border border-gold/10">
+              <div className="flex items-start space-x-3">
+                <div className="flex-shrink-0">
+                  <span className="inline-flex items-center justify-center w-7 h-7 rounded-full bg-gold/20 text-gold">
+                    <svg
+                      xmlns="http://www.w3.org/2000/svg"
+                      width="16"
+                      height="16"
+                      viewBox="0 0 24 24"
+                      fill="none"
+                      stroke="currentColor"
+                      strokeWidth="2"
+                      strokeLinecap="round"
+                      strokeLinejoin="round"
+                    >
+                      <path d="M20 6L9 17l-5-5" />
+                    </svg>
+                  </span>
+                </div>
+                <div className="space-y-1">
+                  <h3 className="font-semibold text-gold/90">Complete Withdrawal</h3>
+                  <p className="text-sm opacity-80">
+                    Finalize the withdrawal of resources from your Realm in Eternum to your Starknet wallet. Select a
+                    donkey to withdraw resources from.
+                  </p>
+                </div>
+              </div>
+            </div>
+          </div>
         </TypeP>
         <hr />
         <div className="mb-2">