From 5ae6cde14ed05937bbb3ca1bf518a254edc5bc53 Mon Sep 17 00:00:00 2001
From: Julien Froidefond <julien.froidefond@cdbdx.biz>
Date: Tue, 9 Dec 2025 14:40:02 +0100
Subject: [PATCH] Enhance HeroSection component: Implement mouse-following
 gradient effect for the game title, improving visual interactivity. Update
 CSS for better font formatting and add a new title animation class for
 enhanced text styling.

---
 app/globals.css            | 15 ++++++---
 components/HeroSection.tsx | 62 ++++++++++++++++++++++++++++++++++++--
 2 files changed, 70 insertions(+), 7 deletions(-)

diff --git a/app/globals.css b/app/globals.css
index eb0523a..a9ba1f9 100644
--- a/app/globals.css
+++ b/app/globals.css
@@ -5,7 +5,9 @@
 @layer base {
   body {
     @apply bg-black text-white;
-    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
+    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto",
+      "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans",
+      "Helvetica Neue", sans-serif;
   }
 }
 
@@ -16,11 +18,16 @@
     image-rendering: -moz-crisp-edges;
     image-rendering: crisp-edges;
   }
-  
+
   .text-pixel {
-    font-family: 'Courier New', monospace;
+    font-family: "Courier New", monospace;
     text-shadow: 2px 2px 0px rgba(0, 0, 0, 0.8);
     letter-spacing: 1px;
   }
-}
 
+  .title-animated {
+    background-clip: text;
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+  }
+}
diff --git a/components/HeroSection.tsx b/components/HeroSection.tsx
index 2810408..8fa3a7e 100644
--- a/components/HeroSection.tsx
+++ b/components/HeroSection.tsx
@@ -2,9 +2,34 @@
 
 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">
@@ -23,15 +48,46 @@ export default function HeroSection() {
       <div className="relative z-10 w-full max-w-5xl xl:max-w-6xl mx-auto px-8 py-16 text-center flex flex-col items-center">
         {/* Game Title */}
         <div className="w-full flex justify-center mb-4">
-          <h1 className="text-6xl md:text-8xl lg:text-9xl xl:text-9xl font-gaming font-black tracking-tight">
+          <h1 className="text-6xl md:text-8xl lg:text-9xl xl:text-9xl font-gaming font-black tracking-tight relative">
             <span
-              className="bg-gradient-to-r from-pixel-gold via-orange-400 to-pixel-gold bg-clip-text text-transparent"
+              ref={titleRef}
+              className="title-animated inline-block relative z-10"
               style={{
-                textShadow: "0 0 30px rgba(218, 165, 32, 0.5)",
+                backgroundImage: `linear-gradient(90deg, #daa520 0%, #ffa500 ${Math.max(
+                  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 ${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>