feat: add RLC Token page

.vitepress/sidebar.ts

@@ -38,6 +38,10 @@ export function getSidebar() {
             text: '📋 Use Cases',
             link: '/overview/use-cases',
           },
+          {
+            text: '🪙 RLC Token',
+            link: '/overview/rlc',
+          },
           {
             text: '🤖 Develop with AI',
             link: '/overview/develop-with-ai',

README.md

@@ -170,5 +170,7 @@ Fork this repository and ensure you're working on the `main` branch:
 - Add a Development workflow
 - Update context7 when doc will be deployed
 - Check theGraph Images with design Team
+- Update the Dune Dashboard to the final version
 - Add new section in `iexec-explorer.md` file to talk about: available chain on
   the UI + SRLC/RLC on account section feature of the protocol
+- Update or add design illustrations based on the new design system

src/components/FeatureCard.vue

@@ -1,37 +1,80 @@
 <template>
-  <a
-    :href="linkUrl"
-    class="block h-full min-h-40 text-inherit no-underline! visited:no-underline! hover:no-underline! active:no-underline!"
+  <div
+    class="border-border bg-soft-bg flex h-full flex-col rounded-lg border p-6 transition-all duration-200 ease-in-out hover:-translate-y-0.5 hover:shadow-md"
   >
-    <div
-      class="bg-soft-bg border-border flex h-full cursor-pointer flex-col rounded-lg border p-3 transition-all duration-200 ease-in-out hover:-translate-y-0.5 hover:shadow-md"
-    >
-      <div class="flex items-center gap-2">
-        <Icon :icon="icon" class="text-xl" :class="iconColor" />
-        <h3 class="text-text1 !mt-0 !mb-0 text-base font-semibold">
-          {{ title }}
-        </h3>
-      </div>
-      <p class="text-text2 !mt-2 flex-grow text-sm leading-relaxed">
-        {{ description }}
-      </p>
+    <div class="mb-4 flex items-center gap-2">
+      <Icon :icon="icon" class="text-xl" :class="iconColor" />
+      <h3 class="text-text1 !mt-0 !mb-0 text-base font-semibold">
+        {{ title }}
+      </h3>
     </div>
-  </a>
+
+    <!-- Description mode -->
+    <p
+      v-if="description && !features"
+      class="text-text2 !mt-2 flex-grow text-sm leading-relaxed"
+    >
+      {{ description }}
+    </p>
+
+    <!-- Features mode -->
+    <ul
+      v-if="features"
+      class="flex-grow space-y-2 text-sm text-gray-700 dark:text-gray-300"
+    >
+      <li
+        v-for="feature in processedFeatures"
+        :key="feature.key"
+        class="flex items-start gap-2"
+      >
+        <span class="text-gray-600">•</span>
+        <span v-if="feature.link">
+          <a
+            :href="feature.link"
+            target="_blank"
+            rel="noopener noreferrer"
+            class="text-blue-600 underline transition-colors hover:text-blue-800 hover:no-underline dark:text-blue-400 dark:hover:text-blue-300"
+          >
+            {{ feature.text }}
+          </a>
+        </span>
+        <span v-else>{{ feature.text }}</span>
+      </li>
+    </ul>
+  </div>
 </template>
 
 <script setup lang="ts">
+import { computed } from 'vue';
 import { Icon } from '@iconify/vue';
 
+interface FeatureItem {
+  text: string;
+  link?: string;
+}
+
 interface Props {
   icon: string;
   title: string;
-  description: string;
-  linkUrl: string;
+  description?: string;
+  features?: (string | FeatureItem)[];
+  linkUrl?: string;
   iconColor?: string;
 }
 
-withDefaults(defineProps<Props>(), {
+const props = withDefaults(defineProps<Props>(), {
   iconColor: 'text-blue-500',
   linkUrl: '',
 });
+
+const processedFeatures = computed(() => {
+  if (!props.features) return [];
+  return props.features.map((feature, index) => {
+    if (typeof feature === 'string') {
+      return { key: index, text: feature };
+    } else {
+      return { key: index, text: feature.text, link: feature.link };
+    }
+  });
+});
 </script>

src/overview/rlc.md

@@ -0,0 +1,134 @@
+---
+title: RLC Token
+description:
+  The RLC token is the cryptocurrency that powers the iExec decentralized
+  computing ecosystem
+---
+
+<div class="flex flex-col items-center mb-8">
+  <img :src="rlcGif" alt="RLC Token Animation" class="w-80 h-80 mb-0" />
+  <h1 class="text-3xl font-bold text-center mb-2">RLC Token</h1>
+  <p class="text-lg text-center text-gray-600 max-w-2xl">The native cryptocurrency that powers the entire iExec decentralized confidential computing ecosystem</p>
+</div>
+
+**RLC** (**R**un on **L**ots of **C**omputers) serves as the primary medium of
+exchange for all interactions within the protocol, enabling users to access
+confidential computing services, and rewarding providers for their
+contributions.
+
+## 🎯 What RLC Enables
+
+RLC is essential for interacting with the iExec protocol and accessing its
+decentralized confidential computing services.
+
+## 💰 Transparent Payment Flow
+
+When you pay for a task execution with RLC, your payment is automatically and
+transparently distributed to all iExec protocol participants:
+
+<div class="bg-gradient-to-r from-blue-50 to-blue-100 dark:from-blue-900/20 dark:to-blue-800/20 rounded-lg px-4 border border-blue-200 dark:border-blue-700 my-0">
+  <h4 class="text-lg font-semibold text-blue-800 dark:text-blue-200">🔍 How Your RLC Payment is Distributed</h4>
+
+  **1. App Provider** - Gets paid for providing the confidential application
+
+  **2. Protected Data Provider** - Gets paid for providing access to protected confidential datasets
+
+  **3. Worker** - Gets paid for running the confidential computation on their decentralized machine
+</div>
+
+**💡 Transparent:** Payments are distributed based on pricing and conditions
+defined by each provider (iApp, Protected Data, Worker) in their marketplace
+orders.
+
+**🔒 RLC Staking:** To run a task on the protocol (executing an application with
+protected data on a decentralized workerpool), you need to **lock RLC** in the
+protocol during the task period. In exchange, you receive **sRLC (staked RLC)**.
+Once the task is completed, you can recover the RLC that wasn't consumed for the
+task payment.
+
+## 💰 Tokenomics & Ecosystem Metrics
+
+RLC operates on a utility-driven economic model where demand for confidential
+computing services drives token value:
+
+**Fixed Supply**: RLC has a maximum supply of 87 million tokens, ensuring
+scarcity and value preservation.
+
+**Network Effects**: As more users and providers join the iExec ecosystem, the
+demand for RLC increases, driving token value through network effects.
+
+<ImageViewer
+    :image-url-dark="duneDashboard"
+    image-alt="RLC Token Economics Dashboard"
+    link-url="https://dune.com/datawarlock/arbitrum-economics"
+    caption="🔗 Access iExec Dune Dashboard"
+  />
+
+## 🔄 Getting RLC
+
+You can acquire RLC tokens through several methods:
+
+<div class="grid grid-cols-1 md:grid-cols-2 gap-6 my-8">
+  <FeatureCard
+    title="Centralized Exchanges"
+    icon="mdi:store"
+    icon-color="text-indigo-500"
+    :features="[
+      { text: 'View all available CEX on CoinMarketCap', link: 'https://coinmarketcap.com/fr/currencies/rlc/' },
+      'High liquidity markets',
+      'Fiat to RLC purchase options'
+    ]"
+  />
+
+  <FeatureCard
+    title="Decentralized Exchanges"
+    icon="mdi:waves"
+    icon-color="text-purple-500"
+    :features="[
+      { text: 'ETH: RLC/ETH on Uniswap', link: 'https://app.uniswap.org/explore/pools/ethereum/0x56Ea002B411FD5887E55329852D5777EcB170713' },
+      'ARB: RLC/ETH (coming soon)',
+      'High liquidity DEX trading'
+    ]"
+  />
+
+  <FeatureCard
+    title="Cross-Chain Bridging"
+    icon="mdi:bridge"
+    icon-color="text-teal-500"
+    :features="[
+      'Bellecour Bridge',
+      'Stargate Bridge (Arbitrum)',
+    ]"
+  />
+
+  <FeatureCard
+    title="Earn RLC"
+    icon="mdi:diamond"
+    icon-color="text-pink-500"
+    :features="[
+      'Develop confidential apps',
+      'Monetize protected datasets',
+      'Become a compute provider',
+    ]"
+  />
+</div>
+
+## 🚀 Ready to get started?
+
+Ready to dive into the iExec ecosystem? Here are the next steps:
+
+- **[Bridge RLC](./tooling-and-explorers/bridge.md)** - Transfer RLC between
+  networks
+- **[Start Using iExec](./quick-start.md)** - Begin your confidential computing
+  journey
+- **[Earn RLC](../manage-data/guides/create-and-share-access.md)** - Become a
+  provider and monetize your resources
+
+<script setup>
+import ImageViewer from '../components/ImageViewer.vue';
+import FeatureCard from '../components/FeatureCard.vue';
+
+// Assets
+import rlcGif from '../assets/rlc/rlc.gif';
+import duneDashboard from '../assets/rlc/dune-dashboard.png';
+</script>