feat: add FeatureCard and ImageViewer components, refactor iExec Explorer documentation

Author: Le-Caignec

src/components/FeatureCard.vue

@@ -0,0 +1,22 @@
+<template>
+  <a :href="linkUrl" class="block h-full text-inherit no-underline!">
+    <div
+      class="bg-soft-bg border-border flex h-full cursor-pointer flex-col rounded-lg border p-6 transition-all duration-200 ease-in-out hover:-translate-y-0.5 hover:shadow-md"
+    >
+      <div class="mb-4 text-3xl">{{ icon }}</div>
+      <h3 class="text-text1 m-0 mb-2">{{ title }}</h3>
+      <p class="text-text2 m-0 flex-grow leading-relaxed">{{ description }}</p>
+    </div>
+  </a>
+</template>
+
+<script setup lang="ts">
+interface Props {
+  icon: string;
+  title: string;
+  description: string;
+  linkUrl: string;
+}
+
+defineProps<Props>();
+</script>

src/components/FeatureGrid.vue

@@ -0,0 +1,5 @@
+<template>
+  <div class="my-8 grid grid-cols-[repeat(auto-fit,minmax(280px,1fr))] gap-6">
+    <slot />
+  </div>
+</template>

src/components/ImageGrid.vue

@@ -0,0 +1,44 @@
+<template>
+  <div class="my-12 grid grid-cols-[repeat(auto-fit,minmax(500px,1fr))] gap-12">
+    <div v-for="(image, index) in images" :key="index" class="text-center">
+      <a :href="image.linkUrl" target="_blank" rel="noreferrer">
+        <img
+          :src="image.imageUrl"
+          :alt="image.imageAlt"
+          class="border-border w-full max-w-[700px] rounded-lg border shadow-lg transition-transform duration-200 ease-in-out hover:scale-[1.02]"
+        />
+      </a>
+      <p class="text-text2 mt-2 font-medium">{{ image.title }}</p>
+      <p v-if="image.caption" class="mt-2">
+        <a
+          :href="image.linkUrl"
+          target="_blank"
+          rel="noreferrer"
+          class="text-primary hover:text-primary2 inline-flex items-center gap-2 text-sm no-underline transition-colors duration-200"
+        >
+          <Icon :icon="image.linkIcon || 'mdi:external-link'" height="16" />
+          {{ image.caption }}
+        </a>
+      </p>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { Icon } from '@iconify/vue';
+
+interface ImageGridItem {
+  imageUrl: string;
+  imageAlt: string;
+  linkUrl: string;
+  title: string;
+  caption?: string;
+  linkIcon?: string;
+}
+
+interface Props {
+  images: ImageGridItem[];
+}
+
+defineProps<Props>();
+</script>

src/components/ImageViewer.vue

@@ -0,0 +1,51 @@
+<template>
+  <div :class="['my-8', { 'text-center': centered }]">
+    <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:scale-[1.02]"
+      />
+    </a>
+    <p v-if="caption" class="mt-4 font-medium">
+      <a
+        :href="linkUrl"
+        target="_blank"
+        rel="noreferrer"
+        class="text-primary hover:text-primary2 inline-flex items-center gap-2 no-underline transition-colors duration-200"
+      >
+        <Icon :icon="linkIcon" height="16" />
+        {{ caption }}
+      </a>
+    </p>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { Icon } from '@iconify/vue';
+
+interface Props {
+  imageUrl: string;
+  imageAlt: string;
+  linkUrl: string;
+  caption?: string;
+  linkIcon?: string;
+  centered?: boolean;
+  maxWidth?: string;
+  borderRadius?: string;
+}
+
+withDefaults(defineProps<Props>(), {
+  linkIcon: 'mdi:external-link',
+  centered: true,
+  maxWidth: '800px',
+  borderRadius: '8px',
+});
+</script>