Refactor event management and UI components: Update date handling in EventManagement to format dates for input, enhance EventsSection to display a message when no events are available, and improve styling in multiple components for better layout consistency.

app/page.tsx

@@ -20,7 +20,7 @@ export default async function Home() {
   }));
 
   return (
-    <main className="min-h-screen bg-black relative">
+    <main className="min-h-screen relative" style={{ backgroundColor: "var(--background)" }}>
       <NavigationWrapper />
       <HeroSection backgroundImage={backgroundImage} />
       <EventsSection events={serializedEvents} />

components/admin/EventManagement.tsx

@@ -151,8 +151,10 @@ export default function EventManagement() {
   const handleEdit = (event: Event) => {
     setEditingEvent(event);
     setIsCreating(false);
+    // Convertir la date ISO en format YYYY-MM-DD pour l'input date
+    const dateValue = event.date ? new Date(event.date).toISOString().split('T')[0] : "";
     setFormData({
-      date: event.date,
+      date: dateValue,
       name: event.name,
       description: event.description,
       type: event.type,

components/events/EventsSection.tsx

@@ -9,34 +9,61 @@ interface EventsSectionProps {
 }
 
 export default function EventsSection({ events }: EventsSectionProps) {
-  if (events.length === 0) {
-    return null;
-  }
   return (
-    <section className="w-full bg-gray-950 border-t border-pixel-gold/30 py-16">
+    <section
+      className="w-full py-16 border-t relative z-10"
+      style={{
+        backgroundColor: "var(--card-column)",
+        borderColor: "color-mix(in srgb, var(--pixel-gold) 50%, transparent)",
+        borderTopWidth: "2px",
+      }}
+    >
       <div className="max-w-7xl mx-auto px-8">
-        <div className="flex flex-col md:flex-row items-center justify-around gap-8">
-          {events.map((event, index) => (
-            <div key={index} className="flex flex-col items-center">
-              <div className="flex flex-col items-center mb-4">
-                <span className="text-pixel-gold text-xs uppercase tracking-widest mb-2">
-                  Événement
-                </span>
-                <div className="w-16 h-px bg-pixel-gold"></div>
+        {events.length === 0 ? (
+          <div className="text-center">
+            <p
+              className="text-base"
+              style={{ color: "var(--muted-foreground)" }}
+            >
+              Aucun événement à venir pour le moment
+            </p>
+          </div>
+        ) : (
+          <div className="flex flex-col md:flex-row items-center justify-around gap-8">
+            {events.map((event, index) => (
+              <div key={index} className="flex flex-col items-center">
+                <div className="flex flex-col items-center mb-4">
+                  <span
+                    className="text-xs uppercase tracking-widest mb-2"
+                    style={{ color: "var(--pixel-gold)" }}
+                  >
+                    Événement
+                  </span>
+                  <div
+                    className="w-16 h-px"
+                    style={{ backgroundColor: "var(--pixel-gold)" }}
+                  ></div>
+                </div>
+                <div
+                  className="text-lg font-bold mb-2 uppercase tracking-wide"
+                  style={{ color: "var(--foreground)" }}
+                >
+                  {new Date(event.date).toLocaleDateString("fr-FR", {
+                    day: "numeric",
+                    month: "long",
+                    year: "numeric",
+                  })}
+                </div>
+                <div
+                  className="text-base text-center"
+                  style={{ color: "var(--foreground)" }}
+                >
+                  {event.name}
+                </div>
               </div>
-              <div className="text-white text-lg font-bold mb-2 uppercase tracking-wide">
-                {new Date(event.date).toLocaleDateString("fr-FR", {
-                  day: "numeric",
-                  month: "long",
-                  year: "numeric",
-                })}
-              </div>
-              <div className="text-white text-base text-center">
-                {event.name}
-              </div>
-            </div>
-          ))}
-        </div>
+            ))}
+          </div>
+        )}
       </div>
     </section>
   );

components/layout/Footer.tsx

@@ -5,7 +5,7 @@ import Link from "next/link";
 export default function Footer() {
   return (
     <footer
-      className="w-full py-6 px-4 sm:px-8 border-t"
+      className="w-full py-6 px-4 sm:px-8 border-t relative z-10"
       style={{
         backgroundColor: "var(--background)",
         borderColor: "color-mix(in srgb, var(--gray-800) 30%, transparent)",

components/ui/BackgroundSection.tsx

@@ -22,7 +22,7 @@ export default function BackgroundSection({
     >
       {/* Background Image */}
       <div
-        className="fixed inset-0 bg-cover bg-center bg-no-repeat"
+        className="fixed inset-0 bg-cover bg-center bg-no-repeat z-0"
         style={{
           backgroundImage: `url('${backgroundImage}')`,
         }}