feat: replace DescriptionCard with FeatureCard in RLC token overview

Author: Le-Caignec

src/components/FeatureCard.vue

@@ -1,37 +1,72 @@
 <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="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="flex h-full flex-col rounded-lg border border-border bg-soft-bg p-6 transition-all duration-200 ease-in-out hover:-translate-y-0.5 hover:shadow-md">
+    <div class="flex items-center gap-2 mb-4">
+      <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="space-y-2 text-sm text-gray-700 dark:text-gray-300 flex-grow">
+      <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

@@ -65,42 +65,38 @@ demand for RLC increases, driving token value through network effects.
 You can acquire RLC tokens through several methods:
 
 <div class="grid grid-cols-1 md:grid-cols-2 gap-6 my-8">
-  <DescriptionCard
+  <FeatureCard
     title="Centralized Exchanges"
-    icon="🏪"
-    color="indigo"
+    icon="mdi:store"
     :features="[
       { text: 'View all available CEX on CoinMarketCap', link: 'https://coinmarketcap.com/fr/currencies/rlc/' },
       'High liquidity markets',
       'Fiat to RLC purchase options'
     ]"
   />
 
-  <DescriptionCard
+  <FeatureCard
     title="Decentralized Exchanges"
-    icon="🌊"
-    color="purple"
+    icon="mdi:waves"
     :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'
     ]"
   />
 
-  <DescriptionCard
+  <FeatureCard
     title="Cross-Chain Bridging"
-    icon="🌉"
-    color="teal"
+    icon="mdi:bridge"
     :features="[
       'Bellecour Bridge',
       'Stargate Bridge (Arbitrum)',
     ]"
   />
 
-  <DescriptionCard
+  <FeatureCard
     title="Earn RLC"
-    icon="💎"
-    color="pink"
+    icon="mdi:diamond"
     :features="[
       'Develop confidential apps',
       'Monetize protected datasets',
@@ -122,7 +118,7 @@ Ready to dive into the iExec ecosystem? Here are the next steps:
 
 <script setup>
 import ImageViewer from '../components/ImageViewer.vue';
-import DescriptionCard from '../components/DescriptionCard.vue';
+import FeatureCard from '../components/FeatureCard.vue';
 
 // Assets
 import rlcGif from '../assets/rlc/rlc.gif';