Move manager tabs above content canvas

app/components/users/GridCard.vue

@@ -0,0 +1,45 @@
+<script setup lang="ts">
+withDefaults(defineProps<{
+  to: string;
+  fullName: string;
+  avatarSrc?: string;
+  initials?: string;
+  metaLabel?: string;
+  metaValue?: string;
+}>(), {
+  avatarSrc: '',
+  initials: 'FR',
+  metaLabel: '',
+  metaValue: '',
+});
+</script>
+
+<template>
+  <NuxtLink
+    :to="to"
+    class="surface-card surface-card-interactive flex flex-col items-center rounded-[32px] p-6 text-center"
+  >
+    <img
+      v-if="avatarSrc"
+      :src="avatarSrc"
+      :alt="fullName"
+      class="h-24 w-24 rounded-[32px] object-cover shadow-[0_12px_30px_rgba(18,56,36,0.14)]"
+    >
+    <div
+      v-else
+      class="flex h-24 w-24 items-center justify-center rounded-[32px] bg-[linear-gradient(135deg,#dff7e9_0%,#c2ead3_100%)] text-3xl font-black text-[#123824] shadow-[inset_0_1px_0_rgba(255,255,255,0.65)]"
+    >
+      {{ initials }}
+    </div>
+
+    <h2 class="mt-8 text-lg font-bold leading-tight text-[#123824]">{{ fullName }}</h2>
+
+    <div
+      v-if="metaLabel && metaValue"
+      class="mt-4 inline-flex flex-wrap items-center justify-center gap-2 rounded-full border border-[#e1c15a] bg-[#fff8dc] px-4 py-2 text-sm text-[#7a5b00]"
+    >
+      <span class="font-semibold">{{ metaLabel }}</span>
+      <span class="font-bold text-[#123824]">{{ metaValue }}</span>
+    </div>
+  </NuxtLink>
+</template>