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/BackgroundSection.tsx

@@ -0,0 +1,43 @@
+"use client";
+
+import { HTMLAttributes, ReactNode } from "react";
+
+interface BackgroundSectionProps extends HTMLAttributes<HTMLElement> {
+  children: ReactNode;
+  backgroundImage: string;
+  overlay?: boolean;
+}
+
+export default function BackgroundSection({
+  children,
+  backgroundImage,
+  overlay = true,
+  className = "",
+  ...props
+}: BackgroundSectionProps) {
+  return (
+    <section
+      className={`relative w-full min-h-screen flex flex-col items-center justify-center overflow-hidden pt-24 pb-16 ${className}`}
+      {...props}
+    >
+      {/* Background Image */}
+      <div
+        className="absolute inset-0 bg-cover bg-center bg-no-repeat"
+        style={{
+          backgroundImage: `url('${backgroundImage}')`,
+        }}
+      >
+        {/* Dark overlay for readability */}
+        {overlay && (
+          <div className="absolute inset-0 bg-gradient-to-b from-black/70 via-black/60 to-black/80"></div>
+        )}
+      </div>
+
+      {/* Content */}
+      <div className="relative z-10 w-full max-w-6xl mx-auto px-4 sm:px-8 py-16">
+        {children}
+      </div>
+    </section>
+  );
+}
+