feat: enhance FeatureGridCard to support links in features and update RLC overview

Author: Le-Caignec

src/components/FeatureGridCard.vue

@@ -6,12 +6,22 @@
     </div>
     <ul class="space-y-2 text-sm text-gray-700 dark:text-gray-300">
       <li
-        v-for="feature in features"
-        :key="feature"
+        v-for="feature in processedFeatures"
+        :key="feature.key"
         class="flex items-start gap-2"
       >
         <span :class="bulletClasses">•</span>
-        <span>{{ feature }}</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>
@@ -20,10 +30,15 @@
 <script setup lang="ts">
 import { computed } from 'vue';
 
+interface FeatureItem {
+  text: string;
+  link?: string;
+}
+
 interface Props {
   title: string;
   icon: string;
-  features: string[];
+  features: (string | FeatureItem)[];
   color?:
     | 'blue'
     | 'purple'
@@ -42,6 +57,16 @@ const props = withDefaults(defineProps<Props>(), {
   size: 'md',
 });
 
+const processedFeatures = computed(() => {
+  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 };
+    }
+  });
+});
+
 const colorClasses = {
   blue: {
     card: 'bg-gradient-to-br from-blue-50 to-blue-100 dark:from-blue-900/20 dark:to-blue-800/20 border-blue-200 dark:border-blue-700',

src/overview/rlc.md

@@ -101,9 +101,9 @@ RLC is available on multiple blockchain networks to serve different use cases:
     color="blue"
     :features="[
       'Layer 2 scaling solution',
+      'DeFi integrations available',
       'Reduced transaction costs',
       'Ethereum ecosystem access',
-      'Growing DeFi opportunities'
     ]"
   />
 </div>
@@ -114,13 +114,27 @@ You can acquire RLC tokens through several methods:
 
 <div class="grid grid-cols-1 md:grid-cols-2 gap-6 my-8">
   <FeatureGridCard
-    title="Exchanges"
+    title="Centralized Exchanges"
     icon="🏪"
     color="indigo"
     :features="[
-      'Centralized exchanges (CEX)',
-      'Decentralized exchanges (DEX)',
-      'High liquidity markets'
+      { text: 'Binance: RLC/BTC, RLC/USDT', link: 'https://www.binance.com/en/trade/RLC_BTC' },
+      { text: 'Coinbase: RLC/USD', link: 'https://www.coinbase.com/price/rlc' },
+      { text: 'Kraken: RLC/USD', link: 'https://pro.kraken.com/app/trade/rlc-usd' },
+      { text: 'MEXC: RLC/USDT', link: 'https://www.mexc.com/exchange/RLC_USDT' },
+      { text: 'BitGet: RLC/USDT', link: 'https://www.bitget.com/spot/RLCUSDT' },
+      '...'
+    ]"
+  />
+  
+  <FeatureGridCard
+    title="Decentralized Exchanges"
+    icon="🌊"
+    color="purple"
+    :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'
     ]"
   />
 
@@ -146,6 +160,23 @@ You can acquire RLC tokens through several methods:
   />
 </div>
 
+### 🏪 Centralized Exchanges
+
+- **Binance**: [RLC/BTC](https://www.binance.com/en/trade/RLC_BTC),
+  [RLC/USDT](https://www.binance.com/en/trade/RLC_USDT)
+- **Coinbase**: [RLC/USD](https://www.coinbase.com/price/rlc)
+- **Kraken**: [RLC/USD](https://www.kraken.com/prices/rlc)
+- **MEXC**: [RLC/USDT](https://www.mexc.com/exchange/RLC_USDT)
+- **BitGet**: [RLC/USDT](https://www.bitget.com/spot/RLCUSDT)
+- And many others...
+
+### 🌊 Decentralized Exchanges
+
+- **Ethereum**:
+  [RLC/ETH on Uniswap](https://app.uniswap.org/explore/pools/ethereum/0x56Ea002B411FD5887E55329852D5777EcB170713)
+- **Arbitrum**: RLC/ETH (coming soon)
+- **Other DEX**: High liquidity trading available
+
 ## 🚀 Ready to get started?
 
 Ready to dive into the iExec ecosystem? Here are the next steps: