fix: update ProjectCard usage for consistent structure and styling in documentation

Author: ErwanDecoster

src/components/ProjectCard.vue

@@ -38,6 +38,7 @@
       <div v-if="githubUrl" class="grid gap-3">
         <Button
           as="a"
+          variant="secondary"
           :href="buttonHref"
           :disabled="buttonDisabled"
           :target="buttonTarget"
@@ -46,6 +47,7 @@
         >
           <Icon :icon="buttonIcon" :height="16" />
           {{ buttonLabel }}
+          <Icon icon="lucide:arrow-up-right" :height="20" />
         </Button>
         <Button
           as="a"
@@ -57,11 +59,13 @@
         >
           <Icon icon="mdi:github" :height="16" />
           {{ githubLabel || 'View Code' }}
+          <Icon icon="lucide:arrow-up-right" :height="20" />
         </Button>
       </div>
       <Button
         v-else
         :as="buttonHref ? 'a' : 'button'"
+        variant="secondary"
         :href="buttonHref"
         :disabled="buttonDisabled"
         :target="buttonTarget"
@@ -70,6 +74,7 @@
       >
         <Icon :icon="buttonIcon" :height="16" />
         {{ buttonLabel }}
+        <Icon v-if="buttonHref" icon="lucide:arrow-up-right" :height="20" />
       </Button>
     </div>
   </div>

src/get-started/quick-start.md

@@ -56,49 +56,46 @@ Explore and experiment with iExec features directly in your browser. Perfect for
 learning and prototyping.
 
 <CardGrid>
-  <ProjectCard
-    title="DataProtector Core"
-    description="Essential data protection features including encryption, access control, and secure storage."
-    icon="mdi:shield-lock"
-    status="interactive"
-    statusLabel="Interactive"
-    buttonLabel="Open Sandbox"
-    buttonIcon="mdi:code-braces"
-    buttonHref="https://codesandbox.io/p/github/iExecBlockchainComputing/dataprotector-sandbox/main"
-  />
 
 <ProjectCard
-    title="DataProtector Sharing"
-    description="Advanced data sharing capabilities with granular permissions and monetization features."
-    icon="mdi:share-variant"
-    status="interactive"
-    statusLabel="Interactive"
-    buttonLabel="Open Sandbox"
-    buttonIcon="mdi:code-braces"
-    buttonHref="https://codesandbox.io/p/github/iExecBlockchainComputing/dataprotector-sharing-sandbox/main"
-  />
+  title="DataProtector Core"
+  description="Essential data protection features including encryption, access control, and secure storage."
+  icon="mdi:shield-lock"
+  status="interactive"
+  statusLabel="Interactive"
+  buttonLabel="Open Sandbox"
+  buttonHref="https://codesandbox.io/p/github/iExecBlockchainComputing/dataprotector-sandbox/main"
+/>
 
 <ProjectCard
-    title="Web3 Telegram"
-    description="Privacy-preserving Telegram messaging integration with user consent management."
-    icon="mdi:message-lock"
-    status="interactive"
-    statusLabel="Interactive"
-    buttonLabel="Open Sandbox"
-    buttonIcon="mdi:code-braces"
-    buttonHref="https://codesandbox.io/p/github/iExecBlockchainComputing/web3-telegram-sandbox/main"
-  />
+  title="DataProtector Sharing"
+  description="Advanced data sharing capabilities with granular permissions and monetization features."
+  icon="mdi:share-variant"
+  status="interactive"
+  statusLabel="Interactive"
+  buttonLabel="Open Sandbox"
+  buttonHref="https://codesandbox.io/p/github/iExecBlockchainComputing/dataprotector-sharing-sandbox/main"
+/>
 
 <ProjectCard
-    title="Web3 Mail"
-    description="Secure email communication for Web3 users without revealing personal email addresses."
-    icon="mdi:email-lock"
-    status="interactive"
-    statusLabel="Interactive"
-    buttonLabel="Open Sandbox"
-    buttonIcon="mdi:code-braces"
-    buttonHref="https://codesandbox.io/p/github/iExecBlockchainComputing/web3mail-sandbox/main"
-  />
+  title="Web3 Telegram"
+  description="Privacy-preserving Telegram messaging integration with user consent management."
+  icon="mdi:message-lock"
+  status="interactive"
+  statusLabel="Interactive"
+  buttonLabel="Open Sandbox"
+  buttonHref="https://codesandbox.io/p/github/iExecBlockchainComputing/web3-telegram-sandbox/main"
+/>
+
+<ProjectCard
+  title="Web3 Mail"
+  description="Secure email communication for Web3 users without revealing personal email addresses."
+  icon="mdi:email-lock"
+  status="interactive"
+  statusLabel="Interactive"
+  buttonLabel="Open Sandbox"
+  buttonHref="https://codesandbox.io/p/github/iExecBlockchainComputing/web3mail-sandbox/main"
+/>
 
 </CardGrid>
 

src/references/dataProtector/getting-started.md

@@ -220,31 +220,32 @@ discontinuity.
 ## Sandbox
 
 <CardGrid>
-  <ProjectCard
-    title="DataProtector Core"
-    description="Essential data protection features including encryption, access control, and secure storage."
-    icon="mdi:shield-lock"
-    status="interactive"
-    statusLabel="Interactive"
-    buttonLabel="Open Sandbox"
-    buttonIcon="mdi:code-braces"
-    buttonHref="https://codesandbox.io/p/github/iExecBlockchainComputing/dataprotector-sandbox/main"
-    githubUrl="https://github.com/iExecBlockchainComputing/dataprotector-sandbox"
-    githubLabel="GitHub repository sandbox"
-  />
 
 <ProjectCard
-    title="DataProtector Sharing"
-    description="Advanced data sharing capabilities with granular permissions and monetization features."
-    icon="mdi:share-variant"
-    status="interactive"
-    statusLabel="Interactive"
-    buttonLabel="Open Sandbox"
-    buttonIcon="mdi:code-braces"
-    buttonHref="https://codesandbox.io/p/github/iExecBlockchainComputing/dataprotector-sharing-sandbox/main"
-    githubUrl="https://github.com/iExecBlockchainComputing/dataprotector-sharing-sandbox"
-    githubLabel="GitHub repository sandbox"
-  /> </CardGrid>
+  title="DataProtector Core"
+  description="Essential data protection features including encryption, access control, and secure storage."
+  icon="mdi:shield-lock"
+  status="interactive"
+  statusLabel="Interactive"
+  buttonLabel="Open Sandbox"
+  buttonHref="https://codesandbox.io/p/github/iExecBlockchainComputing/dataprotector-sandbox/main"
+  githubUrl="https://github.com/iExecBlockchainComputing/dataprotector-sandbox"
+  githubLabel="GitHub repository sandbox"
+/>
+
+<ProjectCard
+  title="DataProtector Sharing"
+  description="Advanced data sharing capabilities with granular permissions and monetization features."
+  icon="mdi:share-variant"
+  status="interactive"
+  statusLabel="Interactive"
+  buttonLabel="Open Sandbox"
+  buttonHref="https://codesandbox.io/p/github/iExecBlockchainComputing/dataprotector-sharing-sandbox/main"
+  githubUrl="https://github.com/iExecBlockchainComputing/dataprotector-sharing-sandbox"
+  githubLabel="GitHub repository sandbox"
+/>
+
+</CardGrid>
 
 <script setup>
 import CardGrid from '@/components/CardGrid.vue';