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

@@ -0,0 +1,47 @@
+"use client";
+
+import { ButtonHTMLAttributes, ReactNode, ElementType } from "react";
+
+interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+  variant?: "primary" | "secondary" | "success" | "danger" | "ghost";
+  size?: "sm" | "md" | "lg";
+  children: ReactNode;
+  as?: ElementType;
+}
+
+const variantClasses = {
+  primary:
+    "border-pixel-gold/50 bg-black/60 text-white hover:bg-pixel-gold/10 hover:border-pixel-gold",
+  secondary:
+    "border-gray-600/50 bg-gray-900/20 text-gray-400 hover:bg-gray-900/30 hover:border-gray-500",
+  success:
+    "border-green-500/50 bg-green-900/20 text-green-400 hover:bg-green-900/30",
+  danger: "border-red-500/50 bg-red-900/20 text-red-400 hover:bg-red-900/30",
+  ghost: "border-transparent bg-transparent text-white hover:text-pixel-gold",
+};
+
+const sizeClasses = {
+  sm: "px-2 sm:px-3 py-1 text-[10px] sm:text-xs",
+  md: "px-4 py-2 text-xs",
+  lg: "px-6 py-3 text-sm",
+};
+
+export default function Button({
+  variant = "primary",
+  size = "md",
+  className = "",
+  disabled,
+  children,
+  as: Component = "button",
+  ...props
+}: ButtonProps) {
+  return (
+    <Component
+      className={`border uppercase tracking-widest rounded transition disabled:opacity-50 disabled:cursor-not-allowed ${variantClasses[variant]} ${sizeClasses[size]} ${className}`}
+      disabled={disabled}
+      {...props}
+    >
+      {children}
+    </Component>
+  );
+}