feat: add text and color props to GlitchText component and make children optional.

frontend/src/components/decorative/GlitchText.tsx

@@ -4,20 +4,26 @@ import React from "react";
 import { cn } from "@/lib/utils";
 
 interface GlitchTextProps {
-  children: string;
+  children?: string;
+  text?: string;
   as?: "h1" | "h2" | "h3" | "h4" | "span" | "p";
   className?: string;
   glitchClassName?: string;
   intensity?: "low" | "medium" | "high";
+  color?: string;
 }
 
 export function GlitchText({
   children,
+  text,
   as: Component = "span",
   className,
   glitchClassName,
   intensity = "medium",
+  color,
 }: GlitchTextProps) {
+  const content = text || children || "";
+
   const intensityStyles = {
     low: "hover:animate-glitch-text",
     medium: "animate-glitch-text",
@@ -31,9 +37,10 @@ export function GlitchText({
         intensityStyles[intensity],
         className
       )}
-      data-text={children}
+      style={color ? { color } : undefined}
+      data-text={content}
     >
-      {children}
+      {content}
       {/* Glitch layers */}
       <span
         className={cn(
@@ -49,7 +56,7 @@ export function GlitchText({
         }}
         aria-hidden
       >
-        {children}
+        {content}
       </span>
       <span
         className={cn(
@@ -65,7 +72,7 @@ export function GlitchText({
         }}
         aria-hidden
       >
-        {children}
+        {content}
       </span>
     </Component>
   );