Enhance UI components and animations: Introduce a shimmer animation effect in globals.css, refactor FeedbackPageClient, LoginPage, RegisterPage, and AdminPanel components to utilize new UI components for improved consistency and maintainability. Update event and feedback handling in EventsPageSection and FeedbackModal, ensuring a cohesive user experience across the application.

components/ui/StarRating.tsx

@@ -0,0 +1,66 @@
+"use client";
+
+import { useState } from "react";
+
+interface StarRatingProps {
+  value: number;
+  onChange?: (rating: number) => void;
+  disabled?: boolean;
+  size?: "sm" | "md" | "lg";
+  showValue?: boolean;
+}
+
+const sizeClasses = {
+  sm: "text-lg sm:text-xl",
+  md: "text-2xl sm:text-3xl",
+  lg: "text-4xl",
+};
+
+export default function StarRating({
+  value,
+  onChange,
+  disabled = false,
+  size = "md",
+  showValue = false,
+}: StarRatingProps) {
+  const [hoverValue, setHoverValue] = useState(0);
+
+  const handleClick = (rating: number) => {
+    if (!disabled && onChange) {
+      onChange(rating);
+    }
+  };
+
+  const displayValue = hoverValue || value;
+
+  return (
+    <div className="flex flex-col items-center gap-2">
+      <div className="flex items-center justify-center gap-2">
+        {[1, 2, 3, 4, 5].map((star) => (
+          <button
+            key={star}
+            type="button"
+            onClick={() => handleClick(star)}
+            disabled={disabled}
+            onMouseEnter={() => !disabled && setHoverValue(star)}
+            onMouseLeave={() => !disabled && setHoverValue(0)}
+            className={`transition-transform hover:scale-110 disabled:hover:scale-100 disabled:cursor-not-allowed ${
+              star <= displayValue
+                ? "text-pixel-gold"
+                : "text-gray-600 hover:text-gray-500"
+            } ${sizeClasses[size]}`}
+            aria-label={`Noter ${star} étoile${star > 1 ? "s" : ""}`}
+          >
+            ★
+          </button>
+        ))}
+      </div>
+      {showValue && value > 0 && (
+        <p className="text-gray-500 text-xs text-center">
+          {value}/5
+        </p>
+      )}
+    </div>
+  );
+}
+