Refactor event date handling in EventsSection and PlayerStats components: Serialize event dates for consistent formatting and update date display to use localized string representation. Remove profile link from Navigation and integrate it into PlayerStats for improved user experience.

app/page.tsx

@@ -11,11 +11,17 @@ export default async function Home() {
     take: 3,
   });
 
+  // Convert Date objects to strings for serialization
+  const serializedEvents = events.map((event) => ({
+    ...event,
+    date: event.date.toISOString(),
+  }));
+
   return (
     <main className="min-h-screen bg-black relative">
       <NavigationWrapper />
       <HeroSection />
-      <EventsSection events={events} />
+      <EventsSection events={serializedEvents} />
     </main>
   );
 }

components/EventsSection.tsx

@@ -25,7 +25,11 @@ export default function EventsSection({ events }: EventsSectionProps) {
                 <div className="w-16 h-px bg-pixel-gold"></div>
               </div>
               <div className="text-white text-lg font-bold mb-2 uppercase tracking-wide">
-                {event.date}
+                {new Date(event.date).toLocaleDateString("fr-FR", {
+                  day: "numeric",
+                  month: "long",
+                  year: "numeric",
+                })}
               </div>
               <div className="text-white text-base text-center">
                 {event.name}

components/Navigation.tsx

@@ -80,12 +80,6 @@ export default function Navigation({
           {isAuthenticated ? (
             <>
               <PlayerStats initialUserData={initialUserData} />
-              <Link
-                href="/profile"
-                className="text-white hover:text-pixel-gold transition text-xs font-normal uppercase tracking-widest"
-              >
-                PROFIL
-              </Link>
               <button
                 onClick={() => signOut()}
                 className="text-gray-400 hover:text-pixel-gold transition text-xs font-normal uppercase tracking-widest"

components/PlayerStats.tsx

@@ -2,6 +2,7 @@
 
 import { useEffect, useState } from "react";
 import { useSession } from "next-auth/react";
+import Link from "next/link";
 
 interface UserData {
   username: string;
@@ -125,27 +126,31 @@ export default function PlayerStats({ initialUserData }: PlayerStatsProps) {
   return (
     <div className="flex items-center gap-3">
       {/* Avatar */}
-      <div className="w-10 h-10 rounded-full border border-pixel-gold/20 overflow-hidden bg-gray-900 flex items-center justify-center">
+      <Link href="/profile" className="cursor-pointer hover:opacity-80 transition-opacity">
-        {avatar ? (
+        <div className="w-10 h-10 rounded-full border border-pixel-gold/20 overflow-hidden bg-gray-900 flex items-center justify-center">
-          <img
+          {avatar ? (
-            src={avatar}
+            <img
-            alt={username}
+              src={avatar}
-            className="w-full h-full object-cover"
+              alt={username}
-          />
+              className="w-full h-full object-cover"
-        ) : (
+            />
-          <span className="text-pixel-gold text-xs font-bold">
+          ) : (
-            {username.charAt(0).toUpperCase()}
+            <span className="text-pixel-gold text-xs font-bold">
-          </span>
+              {username.charAt(0).toUpperCase()}
-        )}
+            </span>
-      </div>
+          )}
+        </div>
+      </Link>
 
       {/* Stats */}
       <div className="flex flex-col gap-1.5 min-w-[200px]">
         {/* Username & Level */}
         <div className="flex items-center gap-2">
-          <div className="text-pixel-gold font-gaming font-bold text-sm tracking-wider">
+          <Link href="/profile" className="cursor-pointer hover:text-pixel-gold/80 transition-colors">
-            {username}
+            <div className="text-pixel-gold font-gaming font-bold text-sm tracking-wider">
-          </div>
+              {username}
+            </div>
+          </Link>
           <div className="text-gray-400 font-pixel text-xs uppercase border border-pixel-gold/30 px-1.5 py-0.5 bg-black/40">
             Lv.{level}
           </div>