design

components/Button.tsx

@@ -1,6 +1,6 @@
 'use client';
 
-import React from 'react';
+import React, { useRef, useState } from 'react';
 import { motion } from 'framer-motion';
 import Link from 'next/link';
 import { ArrowRight } from 'lucide-react';
@@ -26,52 +26,68 @@ export const Button = ({
   type = 'button',
   disabled = false
 }: ButtonProps) => {
-  const baseStyles = "inline-flex items-center justify-center px-8 py-4 rounded-xl font-bold uppercase tracking-widest text-xs transition-all duration-300 relative overflow-hidden group disabled:opacity-50 disabled:cursor-not-allowed";
+  const [mousePosition, setMousePosition] = useState({ x: 0, y: 0 });
+  const [isHovered, setIsHovered] = useState(false);
+
+  const handleMouseMove = (e: React.MouseEvent) => {
+    const rect = e.currentTarget.getBoundingClientRect();
+    setMousePosition({
+      x: e.clientX - rect.left,
+      y: e.clientY - rect.top,
+    });
+  };
+
+  const baseStyles = "inline-flex items-center justify-center px-10 py-5 rounded-2xl font-bold uppercase tracking-[0.2em] text-[10px] transition-all duration-500 relative group disabled:opacity-50 disabled:cursor-not-allowed select-none overflow-hidden";
   
   const variants = {
-    primary: "bg-primary text-white hover:bg-primary-light hover:shadow-[0_0_20px_rgba(15,23,42,0.3)]",
-    accent: "bg-accent text-white hover:bg-accent-hover hover:shadow-[0_0_20px_rgba(16,185,129,0.3)]",
+    primary: "bg-primary text-white shadow-lg",
+    accent: "bg-accent text-white shadow-lg",
     outline: "border-2 border-primary text-primary hover:bg-primary hover:text-white",
     ghost: "bg-slate-100 text-primary hover:bg-slate-200"
   };
 
   const content = (
-    <>
-      <span className="relative z-10 flex items-center gap-2">
-        {children}
-        {showArrow && (
-          <motion.span
-            animate={{ x: [0, 4, 0] }}
-            transition={{ duration: 1.5, repeat: Infinity, ease: "easeInOut" }}
-          >
-            <ArrowRight size={16} strokeWidth={3} />
-          </motion.span>
-        )}
-      </span>
-      <motion.div 
-        initial={{ x: '-100%' }}
-        whileHover={{ x: '100%' }}
-        transition={{ duration: 0.6, ease: "easeInOut" }}
-        className="absolute inset-0 bg-gradient-to-r from-transparent via-white/20 to-transparent skew-x-12 pointer-events-none"
-      />
-    </>
+    <span className="relative z-10 flex items-center gap-3">
+      {children}
+      {showArrow && (
+        <ArrowRight 
+          size={14} 
+          strokeWidth={3} 
+          className="group-hover:translate-x-1 transition-transform duration-300" 
+        />
+      )}
+    </span>
   );
 
+  const spotlight = (
+    <motion.div
+      className="absolute inset-0 z-0 pointer-events-none transition-opacity duration-500"
+      style={{
+        opacity: isHovered ? 1 : 0,
+        background: `radial-gradient(600px circle at ${mousePosition.x}px ${mousePosition.y}px, rgba(255,255,255,0.15), transparent 40%)`,
+      }}
+    />
+  );
+
+  const buttonProps = {
+    onMouseMove: handleMouseMove,
+    onMouseEnter: () => setIsHovered(true),
+    onMouseLeave: () => setIsHovered(false),
+    className: `${baseStyles} ${variants[variant]} ${className}`,
+  };
+
   if (href) {
     return (
-      <Link href={href} className={`${baseStyles} ${variants[variant]} ${className}`}>
+      <Link href={href} {...buttonProps}>
+        {spotlight}
         {content}
       </Link>
     );
   }
 
   return (
-    <button 
-      type={type}
-      onClick={onClick} 
-      disabled={disabled}
-      className={`${baseStyles} ${variants[variant]} ${className}`}
-    >
+    <button type={type} onClick={onClick} disabled={disabled} {...buttonProps}>
+      {spotlight}
       {content}
     </button>
   );