Refactor page components to use NavigationWrapper and integrate Prisma for data fetching. Update EventsSection and LeaderboardSection to accept props for events and leaderboard data, enhancing performance and user experience. Implement user authentication in ProfilePage and AdminPage, ensuring secure access to user data.

components/EventsPageSection.tsx

@@ -1,8 +1,5 @@
 "use client";
 
-import { useEffect, useState } from "react";
-import { useBackgroundImage } from "@/hooks/usePreferences";
-
 interface Event {
   id: string;
   date: string;
@@ -12,6 +9,11 @@ interface Event {
   status: "UPCOMING" | "LIVE" | "PAST";
 }
 
+interface EventsPageSectionProps {
+  events: Event[];
+  backgroundImage: string;
+}
+
 const getEventTypeColor = (type: Event["type"]) => {
   switch (type) {
     case "SUMMIT":
@@ -65,31 +67,10 @@ const getStatusBadge = (status: Event["status"]) => {
   }
 };
 
-export default function EventsPageSection() {
-  const [events, setEvents] = useState<Event[]>([]);
-  const [loading, setLoading] = useState(true);
-  const backgroundImage = useBackgroundImage("events", "/got-2.jpg");
-
-  useEffect(() => {
-    fetch("/api/events")
-      .then((res) => res.json())
-      .then((data) => {
-        setEvents(data);
-        setLoading(false);
-      })
-      .catch((err) => {
-        console.error("Error fetching events:", err);
-        setLoading(false);
-      });
-  }, []);
-
-  if (loading) {
-    return (
-      <section className="relative w-full min-h-screen flex flex-col items-center justify-center overflow-hidden pt-24 pb-16">
-        <div className="text-pixel-gold text-xl">Chargement...</div>
-      </section>
-    );
-  }
+export default function EventsPageSection({
+  events,
+  backgroundImage,
+}: EventsPageSectionProps) {
   return (
     <section className="relative w-full min-h-screen flex flex-col items-center justify-center overflow-hidden pt-24 pb-16">
       {/* Background Image */}