feat(ui): abstract HoverShineOverlay and apply globally

Former-commit-id: 302718a9d517720d6fd5eb66a7728eff8f3ffe95

components/blocks/CompetenceBentoGrid.tsx

@@ -5,6 +5,7 @@ import Image from 'next/image';
 import { motion } from 'framer-motion';
 import { useState, useEffect } from 'react';
 import { Button } from '@/components/ui/Button';
+import { HoverShineOverlay } from '@/components/ui/HoverShineOverlay';
 
 interface CompetenceBentoGridProps {
   badge?: string;
@@ -110,6 +111,7 @@ export function CompetenceBentoGrid(props: CompetenceBentoGridProps) {
                   className={gridClasses}
                 >
                   <div className="absolute top-0 right-0 w-32 h-32 bg-primary/30 blur-3xl rounded-full -mr-10 -mt-10 group-hover:bg-primary/50 transition-colors duration-500" />
+                  <HoverShineOverlay shineColor="via-white/30" />
                   <h4 className="font-bold text-xl md:text-2xl relative z-10 leading-snug">{item.title}</h4>
                   {item.description && <p className="text-white/60 text-sm mt-3 relative z-10">{item.description}</p>}
                 </motion.div>
@@ -143,6 +145,8 @@ export function CompetenceBentoGrid(props: CompetenceBentoGridProps) {
                   </>
                 )}
                 
+                <HoverShineOverlay />
+                
                 <div className="relative z-10 p-8 flex flex-col justify-end h-full text-white">
                   {item.tag && (
                     <span className="inline-block px-3 py-1 bg-primary/20 backdrop-blur-md rounded-full text-xs font-bold uppercase tracking-wider text-primary-light mb-3 w-fit border border-primary/30">

components/blocks/ReferencesSlider.tsx

@@ -4,6 +4,7 @@ import * as React from 'react';
 import { motion } from 'framer-motion';
 import Link from 'next/link';
 import Image from 'next/image';
+import { HoverShineOverlay } from '@/components/ui/HoverShineOverlay';
 
 export interface Reference {
   id: string;
@@ -126,6 +127,8 @@ export function ReferencesSlider(props: ReferencesSliderProps) {
                   />
                   <div className="absolute inset-0 bg-gradient-to-t from-black/90 via-black/30 to-transparent opacity-80 group-hover:opacity-90 transition-opacity duration-300 pointer-events-none" />
                   
+                  <HoverShineOverlay />
+                  
                   <div className="absolute bottom-6 left-8 right-8 transform translate-y-4 group-hover:translate-y-0 transition-transform duration-500 pointer-events-none">
                     <span className="inline-block py-1.5 px-4 rounded-full bg-primary/30 backdrop-blur-md text-white text-xs font-bold uppercase tracking-widest mb-3 border border-primary/50">
                       {ref.category}

components/blocks/SubCompanyTiles.tsx

@@ -3,6 +3,7 @@
 import * as React from 'react';
 import { motion, Variants } from 'framer-motion';
 import Image from 'next/image';
+import { HoverShineOverlay } from '@/components/ui/HoverShineOverlay';
 
 interface SubCompanyTilesProps {
   badge?: string;
@@ -127,9 +128,7 @@ export function SubCompanyTiles(props: SubCompanyTilesProps) {
                   }`} />
                   
                   {/* Premium Shine Sweep Effect (Industrial Reflection) */}
-                  {!isCurrent && (
-                    <div className="absolute top-0 -left-[150%] h-[200%] w-[150%] bg-gradient-to-r from-transparent via-white/10 to-transparent skew-x-[-20deg] group-hover:left-[100%] transition-all duration-1000 ease-[cubic-bezier(0.16,1,0.3,1)] z-30 pointer-events-none" />
-                  )}
+                  {!isCurrent && <HoverShineOverlay />}
                   
                   {/* Current Site Indicator Badge */}
                   {isCurrent && (

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
+      )} 
+    />
+  );
+}