feat: enhance bridge documentation with bidirectional transfer details and update image references

Author: Le-Caignec

src/overview/tooling-and-explorers/bridge.md

@@ -31,8 +31,8 @@ networks:
 <CardGrid>
   <ProjectCard
     title="Bellecour Bridge"
-    description="Bridge RLC from Ethereum mainnet to Bellecour sidechain (xRLC)"
-    icon-image="/assets/icons/iexec-logo.png"
+    description="Bridge RLC tokens between Ethereum mainnet and Bellecour sidechain (xRLC) in both directions"
+    :icon-image="iexecLogoIcon"
     status="available"
     status-label="Live"
     button-label="Access Bridge"
@@ -44,8 +44,8 @@ networks:
 
   <ProjectCard
     title="Stargate Bridge"
-    description="Bridge RLC to Arbitrum mainnet using LayerZero's Stargate protocol"
-    icon-image="/assets/icons/arbitrum-logo.png"
+    description="Bridge RLC tokens between Ethereum and Arbitrum mainnet in both directions using LayerZero protocol"
+    :icon-image="arbitrumLogoIcon"
     status="available"
     status-label="Live"
     button-label="Access Bridge"
@@ -56,27 +56,37 @@ networks:
   />
 </CardGrid>
 
-## 🔄 How to Bridge to Bellecour
+## 🔄 Bellecour Bridge
 
-The **Bellecour Bridge** enables seamless transfer of RLC tokens from Ethereum
-mainnet to the Bellecour sidechain, where they become **xRLC** tokens.
+The **Bellecour Bridge** enables seamless transfer of RLC tokens between
+Ethereum mainnet and the Bellecour sidechain in both directions.
+
+### From Ethereum to Bellecour (RLC → xRLC)
 
 1. **Connect Wallet**: Visit
    [Bellecour Bridge](https://bridge-bellecour.iex.ec/) and connect your wallet
-2. **Select Amount**: Choose the amount of RLC you want to bridge
-3. **Confirm Transaction**: Approve the bridge transaction on Ethereum mainnet
-4. **Receive xRLC**: Your xRLC tokens will be available on Bellecour network
+2. **Select Direction**: Choose "Ethereum → Bellecour"
+3. **Select Amount**: Choose the amount of RLC you want to bridge
+4. **Confirm Transaction**: Approve the bridge transaction on Ethereum mainnet
+5. **Receive xRLC**: Your xRLC tokens will be available on Bellecour network
 
 <ImageViewer
-  image-url-dark="/assets/tooling-&-explorers/bridge/bellecour-bridge.png"
+  :image-url-dark="bellecourBridgeImage"
   image-alt="Bellecour Bridge Process"
   link-url="https://bridge-bellecour.iex.ec/"
 />
 
-## How to Bridge to Arbitrum
+<div class="bg-gradient-to-r from-purple-400/10 to-purple-400/5 rounded-[6px] p-6 border-l-4 border-fuchsia-700 my-6">
+  <h4 class="!mt-0 !mb-2">🔄 Bidirectional Bridge</h4>
+  <p class="!mb-0">The bridge interface automatically detects your wallet's network and available tokens. The process is similar in both directions - simply select the appropriate source and destination networks, and the bridge will handle the conversion between RLC and xRLC seamlessly.</p>
+</div>
+
+## ⚡ Stargate Bridge
 
 The **Stargate Bridge** powered by LayerZero enables cross-chain transfers of
-RLC tokens to Arbitrum mainnet.
+RLC tokens between Ethereum and Arbitrum mainnet in both directions.
+
+### From Ethereum to Arbitrum
 
 1. **Visit Stargate**: Go to [Stargate](https://stargate.finance/bridge)
 2. **Connect Wallet**: Connect your wallet to the Stargate interface
@@ -86,13 +96,24 @@ RLC tokens to Arbitrum mainnet.
 6. **Confirm Transaction**: Approve the bridge transaction
 
 <ImageViewer
-  image-url-dark="/assets/tooling-&-explorers/bridge/stargate-bridge.png"
+  :image-url-dark="stargateBridgeImage"
   image-alt="Stargate Bridge Interface"
   link-url="https://stargate.finance/bridge"
 />
 
+<div class="bg-gradient-to-r from-purple-400/10 to-purple-400/5 rounded-[6px] p-6 border-l-4 border-fuchsia-700 my-6">
+  <h4 class="!mt-0 !mb-2">🔄 Bidirectional Bridge</h4>
+  <p class="!mb-0">The Stargate bridge interface automatically detects your wallet's network and available RLC tokens. The process is similar in both directions - simply select the appropriate source and destination networks to transfer RLC between Ethereum and Arbitrum seamlessly.</p>
+</div>
+
 <script setup>
 import ImageViewer from '../../components/ImageViewer.vue';
 import CardGrid from '../../components/CardGrid.vue';
 import ProjectCard from '../../components/ProjectCard.vue';
+
+// Assets
+import iexecLogoIcon from '../../assets/icons/iexec-logo.png';
+import arbitrumLogoIcon from '../../assets/icons/arbitrum.svg';
+import bellecourBridgeImage from '../../assets/tooling-&-explorers/bridge/bellecour-bridge.png';
+import stargateBridgeImage from '../../assets/tooling-&-explorers/bridge/stargate-bridge.png';
 </script>

src/overview/tooling-and-explorers/iexec-explorer.md

@@ -12,7 +12,7 @@ decentralized computing protocol. Track deals, monitor task execution, and
 explore apps and protectedData—all in one powerful dashboard.
 
 <ImageViewer
-  image-url-dark="/assets/tooling-&-explorers/iexec-explorer/explorer-global.png"
+  :image-url-dark="explorerGlobalImage"
   image-alt="iExec Explorer"
   link-url="https://explorer.iex.ec/"
   caption="🔗 Explore the iExec Protocol"
@@ -70,7 +70,7 @@ explore apps and protectedData—all in one powerful dashboard.
 ## 💼 Deals & Tasks {#deals-tasks}
 
 <ImageViewer
-  image-url-dark="/assets/tooling-&-explorers/iexec-explorer/deal-view.png"
+  :image-url-dark="dealViewImage"
   image-alt="Deal View"
   link-url="https://explorer.iex.ec/bellecour/deals"
   caption="🔗 Explore Deals"
@@ -96,7 +96,7 @@ explore apps and protectedData—all in one powerful dashboard.
 ### Tasks Overview
 
 <ImageViewer
-  image-url-dark="/assets/tooling-&-explorers/iexec-explorer/task-view.png"
+  :image-url-dark="taskViewImage"
   image-alt="Task View"
   link-url="https://explorer.iex.ec/bellecour/tasks"
   caption="🔗 Explore Tasks"
@@ -112,14 +112,14 @@ Browse and analyze all tasks across the iExec network:
 ### Task Execution Monitoring
 
 <ImageViewer
-    image-url-dark="/assets/tooling-&-explorers/iexec-explorer/task-details-started.png"
+    :image-url-dark="taskDetailsStartedImage"
     image-alt="Result Decryption"
     link-url="https://explorer.iex.ec/bellecour/tasks"
     caption="🔗 Explore Tasks"
 />
 
 <ImageViewer
-    image-url-dark="/assets/tooling-&-explorers/iexec-explorer/task-details-completed.png"
+    :image-url-dark="taskDetailsCompletedImage"
     image-alt="Task Completed"
     link-url="https://explorer.iex.ec/bellecour/tasks"
     caption="🔗 Explore Tasks"
@@ -148,7 +148,7 @@ Browse and analyze all tasks across the iExec network:
 ## 📱 iApps Listing {#iapps-listing}
 
 <ImageViewer
-  image-url-dark="/assets/tooling-&-explorers/iexec-explorer/app-view.png"
+  :image-url-dark="appViewImage"
   image-alt="App View"
   link-url="https://explorer.iex.ec/bellecour/apps"
   caption="🔗 Explore iApps Marketplace"
@@ -163,7 +163,7 @@ Explore the iExec application marketplace:
 ## 🗄️ Protected Data Listing {#protected-data-listing}
 
 <ImageViewer
-  image-url-dark="/assets/tooling-&-explorers/iexec-explorer/dataset-view.png"
+  :image-url-dark="datasetViewImage"
   image-alt="Dataset View"
   link-url="https://explorer.iex.ec/bellecour/datasets"
   caption="🔗 Explore Protected Datasets"
@@ -198,4 +198,14 @@ Explore the decentralized computing infrastructure:
 import ImageViewer from '../../components/ImageViewer.vue';
 import FeatureCard from '../../components/FeatureCard.vue';
 import CardGrid from '../../components/CardGrid.vue';
+
+// Assets
+import explorerGlobalImage from '../../assets/tooling-&-explorers/iexec-explorer/explorer-global.png';
+import dealViewImage from '../../assets/tooling-&-explorers/iexec-explorer/deal-view.png';
+import taskViewImage from '../../assets/tooling-&-explorers/iexec-explorer/task-view.png';
+import taskDetailsStartedImage from '../../assets/tooling-&-explorers/iexec-explorer/task-details-started.png';
+import taskDetailsCompletedImage from '../../assets/tooling-&-explorers/iexec-explorer/task-details-completed.png';
+import appViewImage from '../../assets/tooling-&-explorers/iexec-explorer/app-view.png';
+import datasetViewImage from '../../assets/tooling-&-explorers/iexec-explorer/dataset-view.png';
+import workerpoolViewImage from '../../assets/tooling-&-explorers/iexec-explorer/workerpool-view.png';
 </script>