feat: enhance Badge component props and improve layout in ProjectCard and UseCaseCard components

Author: ErwanDecoster

src/components/Badge.vue

@@ -11,7 +11,13 @@ import { computed } from 'vue';
 
 interface Props {
   label: string;
-  variant?: 'success' | 'warning' | 'danger' | 'important' | 'primary' | 'default';
+  variant?:
+    | 'success'
+    | 'warning'
+    | 'danger'
+    | 'important'
+    | 'primary'
+    | 'default';
   icon?: string;
   iconSize?: number;
   size?: 'sm' | 'md';
@@ -20,17 +26,18 @@ interface Props {
 const props = withDefaults(defineProps<Props>(), {
   variant: 'default',
   iconSize: 14,
-  size: 'sm'
+  size: 'sm',
 });
 
 const badgeClasses = computed(() => {
   const baseClasses = 'inline-flex items-center rounded-2xl font-medium border';
-  
+
   // Size classes
-  const sizeClasses = props.size === 'md' 
-    ? 'gap-2 px-4 py-1.5 text-sm' 
-    : 'gap-1.5 px-3 py-1 text-xs';
-  
+  const sizeClasses =
+    props.size === 'md'
+      ? 'gap-2 px-4 py-1.5 text-sm'
+      : 'gap-1.5 px-3 py-1 text-xs';
+
   // Variant classes
   let variantClasses = '';
   switch (props.variant) {
@@ -52,7 +59,7 @@ const badgeClasses = computed(() => {
     default:
       variantClasses = 'bg-soft-bg text-text2 border-border';
   }
-  
+
   return `${baseClasses} ${sizeClasses} ${variantClasses}`;
 });
 </script>

src/components/ProjectCard.vue

@@ -1,29 +1,27 @@
 <template>
   <div
-    class="relative flex h-full min-h-[220px] bg-soft-bg flex-col rounded-lg border border-border p-5 transition-all duration-300 hover:-translate-y-0.5 hover:border-primary hover:shadow-lg"
+    class="bg-soft-bg border-border hover:border-primary relative flex h-full min-h-[220px] flex-col rounded-lg border p-5 transition-all duration-300 hover:-translate-y-0.5 hover:shadow-lg"
   >
     <!-- Icon -->
-     <div class="flex gap-2 items-start">
-       <div
-       class="flex h-14 w-14 items-center justify-center rounded-xl border border-border bg-bg"
-       >
-       <Icon :icon="icon" height="24" />
+    <div class="flex items-start gap-2">
+      <div
+        class="border-border bg-bg flex h-14 w-14 items-center justify-center rounded-xl border"
+      >
+        <Icon :icon="icon" height="24" />
       </div>
       <div>
         <h3 class="mt-0! mb-1! text-lg font-semibold">{{ title }}</h3>
-        <Badge 
-          :label="statusLabel" 
-          :variant="badgeVariant" 
-          :icon="statusIcon" 
+        <Badge
+          :label="statusLabel"
+          :variant="badgeVariant"
+          :icon="statusIcon"
         />
       </div>
-     </div>
+    </div>
 
     <!-- Content -->
     <div class="flex-1">
-      <p
-        class="mb-3 h-14 overflow-hidden text-sm leading-relaxed text-text2"
-      >
+      <p class="text-text2 mb-3 h-14 overflow-hidden text-sm leading-relaxed">
         {{ description }}
       </p>
 

src/components/UseCaseCard.vue

@@ -1,47 +1,44 @@
 <template>
-  <div class="bg-soft-bg border group border-border rounded-xl overflow-hidden transition-all duration-300 hover:-translate-y-1 hover:shadow-xl hover:border-primary shadow-md">
+  <div
+    class="bg-soft-bg group border-border hover:border-primary overflow-hidden rounded-xl border shadow-md transition-all duration-300 hover:-translate-y-1 hover:shadow-xl"
+  >
     <!-- Image -->
-    <div class="relative overflow-hidden group">
+    <div class="group relative overflow-hidden">
       <a :href="demoUrl" target="_blank" rel="noreferrer">
-        <img 
-          :src="imageUrl" 
+        <img
+          :src="imageUrl"
           :alt="imageAlt"
-          class="w-full max-h-48 object-cover object-top transition-transform duration-300 group-hover:scale-105"
-        >
+          class="max-h-48 w-full object-cover object-top transition-transform duration-300 group-hover:scale-105"
+        />
       </a>
     </div>
-    
+
     <!-- Content -->
     <div class="p-6">
-      <h3 class="text-text1 text-2xl font-semibold mb-4 mt-0!">{{ title }}</h3>
-      <p class="text-text2 leading-relaxed mb-6 text-sm">{{ description }}</p>
-      
+      <h3 class="text-text1 mt-0! mb-4 text-2xl font-semibold">{{ title }}</h3>
+      <p class="text-text2 mb-6 text-sm leading-relaxed">{{ description }}</p>
+
       <!-- Feature Tags -->
-      <div class="flex flex-wrap gap-2 mb-6">
-        <Badge 
-          v-for="feature in features" 
-          :key="feature" 
-          :label="feature" 
+      <div class="mb-6 flex flex-wrap gap-2">
+        <Badge
+          v-for="feature in features"
+          :key="feature"
+          :label="feature"
           variant="primary"
         />
       </div>
-      
+
       <!-- Actions -->
-      <div class="flex gap-4 flex-wrap">
-        <Button 
-          as="a"
-          :href="demoUrl" 
-          target="_blank" 
-          rel="noreferrer"
-        >
+      <div class="flex flex-wrap gap-4">
+        <Button as="a" :href="demoUrl" target="_blank" rel="noreferrer">
           <Icon :icon="demoIcon" height="18" />
           Try Live Demo
         </Button>
-        <Button 
+        <Button
           as="a"
-          :href="githubUrl" 
-          target="_blank" 
-          rel="noreferrer" 
+          :href="githubUrl"
+          target="_blank"
+          rel="noreferrer"
           variant="secondary"
         >
           <Icon icon="mdi:github" height="18" />

src/components/ui/Button.vue

@@ -20,17 +20,18 @@ const props = defineProps({
   variant: {
     type: String,
     default: 'primary',
-    validator: (value) => ['primary', 'secondary'].includes(value)
-  }
+    validator: (value) => ['primary', 'secondary'].includes(value),
+  },
 });
 
 const buttonClasses = computed(() => {
-  const baseClasses = 'inline-flex h-11 cursor-pointer gap-1.5 items-center justify-center rounded-lg px-5! py-2 text-base font-medium no-underline! transition-all! duration-200 not-disabled:hover:-translate-y-0.5 not-disabled:hover:transform not-disabled:hover:shadow-md focus:outline-none disabled:cursor-not-allowed disabled:opacity-60';
-  
+  const baseClasses =
+    'inline-flex h-11 cursor-pointer gap-1.5 items-center justify-center rounded-lg px-5! py-2 text-base font-medium no-underline! transition-all! duration-200 not-disabled:hover:-translate-y-0.5 not-disabled:hover:transform not-disabled:hover:shadow-md focus:outline-none disabled:cursor-not-allowed disabled:opacity-60';
+
   if (props.variant === 'secondary') {
     return `${baseClasses} bg-soft-bg! text-text1! border border-primary! hover:!bg-primary/10 focus:shadow-[0_0_0_2px_rgba(252,209,90,0.3)]`;
   }
-  
+
   // Primary variant (default)
   return `${baseClasses} border-none bg-primary! text-[#1e1e1e]! focus:shadow-[0_0_0_2px_rgba(252,209,90,0.3)]`;
 });

src/manage-data/dataProtector/getting-started.md

@@ -216,7 +216,6 @@ discontinuity.
 
 ## Sandbox
 
-
 <CardGrid>
   <ProjectCard
     title="DataProtector Core"
@@ -231,7 +230,7 @@ discontinuity.
     githubLabel="GitHub repository sandbox"
   />
 
-  <ProjectCard
+<ProjectCard
     title="DataProtector Sharing"
     description="Advanced data sharing capabilities with granular permissions and monetization features."
     icon="mdi:share-variant"
@@ -242,8 +241,7 @@ discontinuity.
     buttonHref="https://codesandbox.io/p/github/iExecBlockchainComputing/dataprotector-sharing-sandbox/main"
     githubUrl="https://github.com/iExecBlockchainComputing/dataprotector-sharing-sandbox"
     githubLabel="GitHub repository sandbox"
-  />
-</CardGrid>
+  /> </CardGrid>
 
 <script setup>
 import CardGrid from '../../components/CardGrid.vue';

src/overview/quick-start.md

@@ -21,7 +21,7 @@ privacy-first applications.
     buttonHref="https://github.com/iExecBlockchainComputing/iexec-nextjs-starter"
   />
 
-  <ProjectCard
+<ProjectCard
     title="React Starter"
     description="React application template with hooks, components, and utilities for seamless iExec integration."
     icon="logos:react"
@@ -32,7 +32,7 @@ privacy-first applications.
     buttonDisabled
   />
 
-  <ProjectCard
+<ProjectCard
     title="Vue.js Starter"
     description="Vue 3 Composition API template with TypeScript and optimized build configuration for iExec apps."
     icon="logos:vue"
@@ -41,8 +41,7 @@ privacy-first applications.
     buttonLabel="Coming Soon"
     buttonIcon="mdi:github"
     buttonDisabled
-  />
-</CardGrid>
+  /> </CardGrid>
 
 ## Interactive Sandboxes
 
@@ -61,7 +60,7 @@ learning and prototyping.
     buttonHref="https://codesandbox.io/p/github/iExecBlockchainComputing/dataprotector-sandbox/main"
   />
 
-  <ProjectCard
+<ProjectCard
     title="DataProtector Sharing"
     description="Advanced data sharing capabilities with granular permissions and monetization features."
     icon="mdi:share-variant"
@@ -72,7 +71,7 @@ learning and prototyping.
     buttonHref="https://codesandbox.io/p/github/iExecBlockchainComputing/dataprotector-sharing-sandbox/main"
   />
 
-  <ProjectCard
+<ProjectCard
     title="Web3 Telegram"
     description="Privacy-preserving Telegram messaging integration with user consent management."
     icon="mdi:message-lock"
@@ -83,7 +82,7 @@ learning and prototyping.
     buttonHref="https://codesandbox.io/p/github/iExecBlockchainComputing/web3-telegram-sandbox/main"
   />
 
-  <ProjectCard
+<ProjectCard
     title="Web3 Mail"
     description="Secure email communication for Web3 users without revealing personal email addresses."
     icon="mdi:email-lock"
@@ -94,7 +93,7 @@ learning and prototyping.
     buttonHref="https://codesandbox.io/p/github/iExecBlockchainComputing/web3mail-sandbox/main"
   />
 
-  <ProjectCard
+<ProjectCard
     title="Oracle Factory"
     description="Create and deploy custom oracles for bringing off-chain data into your Web3 applications."
     icon="mdi:database-cog"
@@ -103,8 +102,7 @@ learning and prototyping.
     buttonLabel="Open Sandbox"
     buttonIcon="mdi:code-braces"
     buttonHref="https://codesandbox.io/p/github/iExecBlockchainComputing/oracle-factory-sandbox/"
-  />
-</CardGrid>
+  /> </CardGrid>
 
 ## Next Steps
 

src/overview/use-cases.md

@@ -16,7 +16,7 @@ computing and decentralized data protection.
     demoIcon="mdi:art"
   />
 
-  <UseCaseCard
+<UseCaseCard
     title="Web3Messaging"
     description="Secure communication platform for Web3 users enabling privacy-preserving messaging through Web3Mail and Web3Telegram. Users maintain control over their data while enabling targeted communication and monetizing their engagement."
     imageUrl="/assets/web3messaging-screenshot.png"
@@ -26,6 +26,7 @@ computing and decentralized data protection.
     githubUrl="https://github.com/iExecBlockchainComputing/web3-messaging-usecase-demo"
     demoIcon="mdi:message-processing"
   />
+
 </div>
 
 <script setup>