diff --git a/packages/docs/src/.vitepress/theme/components/recommend.vue b/packages/docs/src/.vitepress/theme/components/recommend.vue
index 8e6ccf0..51292df 100644
--- a/packages/docs/src/.vitepress/theme/components/recommend.vue
+++ b/packages/docs/src/.vitepress/theme/components/recommend.vue
@@ -7,14 +7,23 @@
     <div
       class="
         w-fit
-        flex flex-row justify-center items-center py-4
+        flex flex-row justify-center items-center p-4
         bg-gray-100/50 dark:bg-gray-800/50
-        rounded-lg shadow-lg mt-4
+        rounded-lg mt-4 gap-2
       "
     >
-      <div class="i-logos-vitejs text-3xl mx-4" />
-      <div class="i-logos-unocss text-3xl mx-4 light:brightness-9 dark:filter-invert-90" />
-      <div class="i-logos-visual-studio-code text-3xl mx-4" />
+      <div class="w-fit flex py2 relative group">
+        <div class="group-hover:(bg-gradient-to-tl from-[#bd34fe_50%] to-[#47caff_50%]) recommendation-bg" />
+        <a class="i-logos-vitejs text-3xl cursor-pointer z-2 mx4" href="https://vitejs.dev/" target="_blank" />
+      </div>
+      <div class="w-fit flex py2 relative group">
+        <div class="group-hover:bg-gray-500/50 recommendation-bg" />
+        <a class="i-logos-unocss text-3xl cursor-pointer z-2 mx4 light:brightness-9 dark:filter-invert-90" href="https://unocss.dev/" target="_blank" />
+      </div>
+      <div class="w-fit flex py2 relative group">
+        <div class="group-hover:(bg-gradient-to-tl to-[#4D9DE3_50%] from-[#69ACFF_50%]) recommendation-bg" />
+        <a class="i-logos-visual-studio-code text-3xl cursor-pointer z-2 mx4" href="https://code.visualstudio.com/" target="_blank" />
+      </div>
     </div>
   </div>
 </template>
diff --git a/packages/docs/uno.config.ts b/packages/docs/uno.config.ts
index c9ed770..f33fd4b 100644
--- a/packages/docs/uno.config.ts
+++ b/packages/docs/uno.config.ts
@@ -1,5 +1,5 @@
 // uno.config.ts
-import { defineConfig, presetIcons, presetUno } from 'unocss'
+import { defineConfig, presetIcons, presetUno, transformerVariantGroup } from 'unocss'
 
 export default defineConfig({
   presets: [
@@ -10,4 +10,10 @@ export default defineConfig({
       unit: 'em',
     }),
   ],
+  transformers: [
+    transformerVariantGroup(),
+  ],
+  shortcuts: {
+    'recommendation-bg': 'group-hover:(blur-md op100) op0 transition-opacity top-10% left-15% absolute rounded-50% w-75% h-75%',
+  },
 })