From 414ff858e2d2e24245bf23bcd8a3ed96b62f3576 Mon Sep 17 00:00:00 2001
From: Mehmet <hi@productdevbook.com>
Date: Wed, 20 Nov 2024 14:45:22 +0300
Subject: [PATCH] feat: remove team

---
 .docs/.vitepress/components/Contributors.vue | 65 +++++++++++++++-----
 .docs/.vitepress/components/HomePage.vue     | 18 +-----
 2 files changed, 50 insertions(+), 33 deletions(-)

diff --git a/.docs/.vitepress/components/Contributors.vue b/.docs/.vitepress/components/Contributors.vue
index 2e1f98a..aedd419 100644
--- a/.docs/.vitepress/components/Contributors.vue
+++ b/.docs/.vitepress/components/Contributors.vue
@@ -1,25 +1,56 @@
 <script setup lang="ts">
 import { contributors } from '../contributors'
+import { AvatarFallback, AvatarImage, AvatarRoot, TooltipContent, TooltipProvider, TooltipRoot, TooltipTrigger } from '@oku-ui/primitives'
+
+function getInitials(name: string) {
+  return name.match(/\b[A-Z]/gi)?.join('') ?? name[0]
+}
 </script>
 
 <template>
-  <div class="flex flex-wrap gap-2 justify-center">
-    <a
-      v-for="{ name, avatar } of contributors"
-      :key="name"
-      :href="`https://github.com/${name}`"
-      class="m-0"
-      rel="noopener noreferrer"
-      :aria-label="`${name} on GitHub`"
-    >
-      <img
-        loading="lazy"
-        :src="avatar"
-        width="50"
-        height="50"
-        class="rounded-full h-12 w-12"
-        :alt="`${name}'s avatar`"
+  <div class="flex flex-wrap gap-4 justify-center my-8 not-prose">
+    <TooltipProvider>
+      <TooltipRoot
+        v-for="{ name, avatar } of contributors"
+        :key="name"
+        :delay-duration="0"
+        :disable-hoverable-content="true"
       >
-    </a>
+        <TooltipTrigger as="template">
+          <AvatarRoot as="template">
+            <a
+              :href="`https://github.com/${name}`"
+              class="group relative inline-flex items-center justify-center"
+              rel="noopener noreferrer"
+              :aria-label="`${name} on GitHub`"
+              target="_blank"
+            >
+              <div
+                class="h-14 w-14 rounded-full overflow-hidden bg-gradient-to-br from-green-400 via-blue-500 to-purple-600 flex items-center justify-center shadow-lg transform transition-all group-hover:scale-110"
+              >
+                <AvatarImage
+                  :src="avatar"
+                  :alt="`${name}'s avatar`"
+                  class="h-full w-full object-cover"
+                />
+                <AvatarFallback
+                  class="text-center uppercase text-sm font-semibold text-white"
+                  :delay-ms="1000"
+                >
+                  {{ getInitials(name) }}
+                </AvatarFallback>
+              </div>
+            </a>
+          </AvatarRoot>
+        </TooltipTrigger>
+
+        <TooltipContent
+          class="text-xs font-semibold text-white px-3 py-1 rounded bg-gray-800 border border-gray-600 shadow-md transform transition-opacity duration-200"
+          side="bottom"
+        >
+          {{ name }}
+        </TooltipContent>
+      </TooltipRoot>
+    </TooltipProvider>
   </div>
 </template>
diff --git a/.docs/.vitepress/components/HomePage.vue b/.docs/.vitepress/components/HomePage.vue
index d981b15..b01a4e2 100644
--- a/.docs/.vitepress/components/HomePage.vue
+++ b/.docs/.vitepress/components/HomePage.vue
@@ -1,6 +1,4 @@
 <script setup lang="ts">
-import { VPTeamMembers } from 'vitepress/theme-without-fonts'
-import { teamMembers } from '../contributors'
 import Contributors from './Contributors.vue'
 </script>
 
@@ -9,23 +7,11 @@ import Contributors from './Contributors.vue'
     <div class="mx-auto w-full container max-w-[1152px]">
       <main class="w-full">
         <div class="vp-doc flex flex-col items-center mt-10">
-          <h2
-            id="meet-the-team"
-            class="font-medium pt-10 pb-2"
-          >
-            Meet The Team
-          </h2>
-          <div class="w-full">
-            <VPTeamMembers
-              size="small"
-              :members="teamMembers"
-            />
-          </div>
           <h2
             id="the-team"
-            class="op50 font-medium pt-5 pb-2"
+            class="font-medium pt-5 pb-2"
           >
-            Contributors
+            Crafted with passion by Vue enthusiasts 💚
           </h2>
           <p class="text-lg max-w-200 text-center leading-7">
             <Contributors />