Refactor HeroSection component: Remove mouse tracking functionality and simplify gradient background styling for improved performance and clarity.

components/HeroSection.tsx

@@ -2,34 +2,9 @@
 
 import { useBackgroundImage } from "@/hooks/usePreferences";
 import Link from "next/link";
-import { useState, useEffect, useRef } from "react";
 
 export default function HeroSection() {
   const backgroundImage = useBackgroundImage("home", "/got-2.jpg");
-  const titleRef = useRef<HTMLSpanElement>(null);
-  const [mousePosition, setMousePosition] = useState({ x: 50, y: 50 });
-
-  useEffect(() => {
-    const handleMouseMove = (e: MouseEvent) => {
-      if (titleRef.current) {
-        const rect = titleRef.current.getBoundingClientRect();
-        const x = ((e.clientX - rect.left) / rect.width) * 100;
-        const y = ((e.clientY - rect.top) / rect.height) * 100;
-        setMousePosition({
-          x: Math.max(0, Math.min(100, x)),
-          y: Math.max(0, Math.min(100, y)),
-        });
-      }
-    };
-
-    window.addEventListener("mousemove", handleMouseMove);
-    return () => window.removeEventListener("mousemove", handleMouseMove);
-  }, []);
-
-  // Calculer la position du gradient basée sur la souris avec plus d'amplitude
-  const gradientPosition = mousePosition.x;
-  const glowIntensity = 12 + mousePosition.x / 5;
-  const glowOpacity = 0.4 + mousePosition.y / 250;
 
   return (
     <section className="relative w-full min-h-screen flex flex-col items-center justify-center overflow-hidden pt-24">
@@ -50,44 +25,19 @@ export default function HeroSection() {
         <div className="w-full flex justify-center mb-4 overflow-hidden">
           <h1 className="text-4xl sm:text-5xl md:text-8xl lg:text-9xl xl:text-9xl font-gaming font-black tracking-tight relative break-words">
             <span
-              ref={titleRef}
               className="title-animated inline-block relative z-10"
               style={{
-                backgroundImage: `linear-gradient(90deg, #daa520 0%, #ffa500 ${Math.max(
+                backgroundImage: `linear-gradient(90deg, #daa520 0%, #ffa500 30%, #ff8c00 50%, #ffa500 70%, #daa520 100%)`,
-                  10,
-                  gradientPosition - 20
-                )}%, #ff8c00 ${gradientPosition}%, #ffa500 ${Math.min(
-                  90,
-                  gradientPosition + 20
-                )}%, #daa520 100%)`,
                 backgroundSize: "200% auto",
                 WebkitBackgroundClip: "text",
                 WebkitTextFillColor: "transparent",
                 backgroundClip: "text",
                 color: "transparent",
-                transition: "background-image 0.15s ease-out",
+                filter: `drop-shadow(0 0 12px rgba(255, 140, 0, 0.4))`,
-                filter: `drop-shadow(0 0 ${glowIntensity}px rgba(255, 140, 0, ${glowOpacity}))`,
               }}
             >
               GAME.OF.TECH
             </span>
-            {/* Glow effect qui suit la souris */}
-            <span
-              className="absolute inset-0 pointer-events-none"
-              style={{
-                backgroundImage: `linear-gradient(90deg, transparent 0%, rgba(255, 140, 0, 0.3) ${gradientPosition}%, transparent 100%)`,
-                WebkitBackgroundClip: "text",
-                WebkitTextFillColor: "transparent",
-                backgroundClip: "text",
-                filter: `blur(${10 + mousePosition.x / 20}px)`,
-                opacity: 0.5,
-                zIndex: 0,
-                transition: "all 0.15s ease-out",
-              }}
-              aria-hidden="true"
-            >
-              GAME.OF.TECH
-            </span>
           </h1>
         </div>