feat(ui): abstract HoverShineOverlay and apply globally

Former-commit-id: 302718a9d517720d6fd5eb66a7728eff8f3ffe95

components/ui/HoverShineOverlay.tsx

@@ -0,0 +1,28 @@
+import React from 'react';
+import { cn } from './utils';
+
+interface HoverShineOverlayProps {
+  /** Additional classes to merge */
+  className?: string;
+  /** Tailwind gradient via color, e.g. "via-white/10" */
+  shineColor?: string;
+  /** Hover trigger prefix, usually "group-hover:" */
+  hoverPrefix?: string;
+}
+
+export function HoverShineOverlay({ 
+  className, 
+  shineColor = 'via-white/10',
+  hoverPrefix = 'group-hover:'
+}: HoverShineOverlayProps) {
+  return (
+    <div 
+      className={cn(
+        "absolute top-0 -left-[150%] h-[200%] w-[150%] bg-gradient-to-r from-transparent to-transparent skew-x-[-20deg] transition-all duration-1000 ease-[cubic-bezier(0.16,1,0.3,1)] z-30 pointer-events-none",
+        `${hoverPrefix}left-[100%]`,
+        shineColor,
+        className
+      )} 
+    />
+  );
+}