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

@@ -0,0 +1,64 @@
+"use client";
+
+import { HTMLAttributes, ReactNode } from "react";
+
+interface SectionTitleProps extends HTMLAttributes<HTMLHeadingElement> {
+  children: ReactNode;
+  variant?: "default" | "gradient" | "gold";
+  size?: "sm" | "md" | "lg" | "xl";
+  subtitle?: ReactNode;
+}
+
+const sizeClasses = {
+  sm: "text-2xl sm:text-3xl",
+  md: "text-3xl sm:text-4xl md:text-5xl",
+  lg: "text-4xl sm:text-5xl md:text-6xl lg:text-7xl",
+  xl: "text-5xl md:text-7xl",
+};
+
+export default function SectionTitle({
+  children,
+  variant = "default",
+  size = "md",
+  subtitle,
+  className = "",
+  ...props
+}: SectionTitleProps) {
+  const baseClasses = "font-gaming font-black tracking-tight mb-4";
+
+  let titleClasses = `${baseClasses} ${sizeClasses[size]} ${className}`;
+
+  if (variant === "gradient") {
+    titleClasses += " bg-gradient-to-r from-pixel-gold via-orange-400 to-pixel-gold bg-clip-text text-transparent";
+  } else if (variant === "gold") {
+    titleClasses += " text-pixel-gold";
+  } else {
+    titleClasses += " text-white";
+  }
+
+  return (
+    <div className="text-center">
+      <h1 className={titleClasses} {...props}>
+        {variant === "gradient" ? (
+          <span
+            style={{
+              textShadow: "0 0 30px rgba(218, 165, 32, 0.5)",
+            }}
+          >
+            {children}
+          </span>
+        ) : (
+          children
+        )}
+      </h1>
+      {subtitle && (
+        <div className="text-pixel-gold text-lg md:text-xl font-gaming-subtitle font-semibold flex items-center justify-center gap-2 tracking-wide">
+          <span>✦</span>
+          <span>{subtitle}</span>
+          <span>✦</span>
+        </div>
+      )}
+    </div>
+  );
+}
+