feat(ui): add AnimatedGlossyBorder and refine industrial interactions

components/ui/AnimatedGlossyBorder.tsx

@@ -0,0 +1,46 @@
+import React from 'react';
+import { cn } from './utils';
+
+interface AnimatedGlossyBorderProps {
+  className?: string;
+  borderWidth?: 1 | 2;
+  opacity?: number;
+  color?: 'white' | 'primary';
+}
+
+export function AnimatedGlossyBorder({ 
+  className, 
+  borderWidth = 1,
+  color = 'white'
+}: AnimatedGlossyBorderProps) {
+  const isWhite = color === 'white';
+  const glowColor = isWhite ? 'rgba(255,255,255,0.6)' : 'rgba(17,124,97,0.6)';
+  
+  const gradientColors = isWhite 
+    ? 'transparent 0%, rgba(255,255,255,0.1) 15%, rgba(255,255,255,0.85) 25%, rgba(255,255,255,0.1) 35%, transparent 50%, transparent 50%, rgba(255,255,255,0.1) 65%, rgba(255,255,255,0.85) 75%, rgba(255,255,255,0.1) 85%, transparent 100%'
+    : 'transparent 0%, rgba(17,124,97,0.1) 15%, rgba(17,124,97,0.85) 25%, rgba(17,124,97,0.1) 35%, transparent 50%, transparent 50%, rgba(17,124,97,0.1) 65%, rgba(17,124,97,0.85) 75%, rgba(17,124,97,0.1) 85%, transparent 100%';
+
+  return (
+    <div 
+      className={cn('absolute inset-0 pointer-events-none rounded-[inherit] z-20 mix-blend-overlay', className)}
+      style={{ filter: `drop-shadow(0 0 6px ${glowColor}) drop-shadow(0 0 2px ${glowColor})` }}
+    >
+      <div 
+        className="absolute inset-0 rounded-[inherit]"
+        style={{
+          border: `${borderWidth}px solid transparent`,
+          WebkitMask: 'linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0)',
+          WebkitMaskComposite: 'xor',
+          maskComposite: 'exclude'
+        }}
+      >
+        <div 
+          className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[250%] aspect-square animate-[spin_8s_linear_infinite]"
+          style={{
+            background: `conic-gradient(from 0deg, ${gradientColors})`
+          }}
+        />
+      </div>
+    </div>
+  );
+}