fix: simplify ImageViewer component props and update usage in documentation (#22)

Author: ErwanDecoster

src/components/ImageViewer.vue

@@ -1,46 +1,34 @@
 <template>
-  <div :class="['my-8', { 'text-center': centered }]">
+  <div class="my-8">
     <a :href="linkUrl" target="_blank" rel="noreferrer">
       <img
         :src="imageUrl"
         :alt="imageAlt"
-        :style="{
-          width: '100%',
-          maxWidth: maxWidth,
-          borderRadius: borderRadius,
-          border: '1px solid var(--vp-c-border)',
-          boxShadow: '0 4px 12px rgba(0, 0, 0, 0.1)',
-        }"
-        class="transition-transform duration-200 ease-in-out hover:-translate-y-1 hover:shadow-xl"
+        class="border-border w-full rounded-lg border shadow-lg transition-transform duration-200 ease-in-out hover:-translate-y-1 hover:shadow-xl"
       />
     </a>
     <p v-if="caption" class="mt-4 font-medium">
-      <a
+      <Button
         :href="linkUrl"
         target="_blank"
         rel="noreferrer"
-        class="text-primary hover:text-primary2 inline-flex items-center gap-2 no-underline transition-colors duration-200"
+        class="text-primary hover:text-primary2 inline-flex items-center gap-2 rounded-lg no-underline transition-colors duration-200"
       >
         {{ caption }}
-      </a>
+      </Button>
     </p>
   </div>
 </template>
 
 <script setup lang="ts">
+import Button from './ui/Button.vue';
+
 interface Props {
   imageUrl: string;
   imageAlt: string;
   linkUrl: string;
   caption?: string;
-  centered?: boolean;
-  maxWidth?: string;
-  borderRadius?: string;
 }
 
-withDefaults(defineProps<Props>(), {
-  centered: true,
-  maxWidth: '800px',
-  borderRadius: '8px',
-});
+defineProps<Props>();
 </script>

src/overview/tooling-and-explorers/iexec-explorer.md

@@ -110,17 +110,13 @@ Browse and analyze all tasks across the iExec network:
     image-alt="Result Decryption"
     link-url="https://explorer.iex.ec/bellecour/tasks"
     caption="🔗 Explore Tasks"
-    :centered="true"
-    max-width="700px"
 />
 
 <ImageViewer
     image-url="/assets/tooling-&-explorers/iexec-explorer/task-details-completed.png"
     image-alt="Task Completed"
     link-url="https://explorer.iex.ec/bellecour/tasks"
     caption="🔗 Explore Tasks"
-    :centered="true"
-    max-width="700px"
 />
 
 > **🔗 Task Assets**: Each task involves four key assets working together: the