feat: replace sandbox links with CardGrid and ProjectCard components for better UI

Author: ErwanDecoster

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

@@ -216,26 +216,36 @@ discontinuity.
 
 ## Sandbox
 
-### Core methods
 
-<a href="https://codesandbox.io/p/github/iExecBlockchainComputing/dataprotector-sandbox/main" target="_blank" rel="noreferrer" class="link-as-block" style="margin-top: 16px">
-  ⚡ &nbsp;Code Sandbox
-</a>
-
-Corresponding GitHub repository:
-
-<a href="https://github.com/iExecBlockchainComputing/dataprotector-sandbox" target="_blank" rel="noreferrer" class="link-as-block">
-  🔎 &nbsp;GitHub repository sandbox
-</a>
-
-### Sharing methods
-
-<a href="https://codesandbox.io/p/github/iExecBlockchainComputing/dataprotector-sharing-sandbox/main" target="_blank" rel="noreferrer" class="link-as-block" style="margin-top: 16px">
-  ⚡ &nbsp;Code Sandbox
-</a>
-
-Corresponding GitHub repository:
-
-<a href="https://github.com/iExecBlockchainComputing/dataprotector-sharing-sandbox" target="_blank" rel="noreferrer" class="link-as-block">
-  🔎 &nbsp;GitHub repository sandbox
-</a>
+<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>
+
+<script setup>
+import CardGrid from '../../components/CardGrid.vue';
+import ProjectCard from '../../components/ProjectCard.vue';
+</script>