From 101cf97cc2df23b1e9a26fc536f57054d0756422 Mon Sep 17 00:00:00 2001
From: "n.tolstov" <n.tolstov@ai-sale-force.ru>
Date: Sun, 30 Nov 2025 23:20:41 +0300
Subject: [PATCH] feat: add `text` and `color` props to `GlitchText` component
 and make `children` optional.

---
 .../src/components/decorative/GlitchText.tsx    | 17 ++++++++++++-----
 1 file changed, 12 insertions(+), 5 deletions(-)

diff --git a/frontend/src/components/decorative/GlitchText.tsx b/frontend/src/components/decorative/GlitchText.tsx
index d5e3149..7a379bd 100644
--- a/frontend/src/components/decorative/GlitchText.tsx
+++ b/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>
   );