Redesign p1

frontend/src/components/ui/GlitchText.tsx

@@ -0,0 +1,116 @@
+import { type ReactNode, type HTMLAttributes } from 'react'
+import { clsx } from 'clsx'
+
+interface GlitchTextProps extends HTMLAttributes<HTMLSpanElement> {
+  children: ReactNode
+  as?: 'span' | 'h1' | 'h2' | 'h3' | 'h4' | 'p'
+  intensity?: 'low' | 'medium' | 'high'
+  color?: 'neon' | 'purple' | 'pink' | 'white'
+  hover?: boolean
+  className?: string
+}
+
+export function GlitchText({
+  children,
+  as: Component = 'span',
+  intensity = 'medium',
+  color = 'neon',
+  hover = false,
+  className,
+  ...props
+}: GlitchTextProps) {
+  const text = typeof children === 'string' ? children : ''
+
+  const colorClasses = {
+    neon: 'text-neon-500',
+    purple: 'text-accent-500',
+    pink: 'text-pink-500',
+    white: 'text-white',
+  }
+
+  const glowClasses = {
+    neon: 'neon-text',
+    purple: 'neon-text-purple',
+    pink: '[text-shadow:0_0_10px_#ec4899,0_0_20px_#ec4899,0_0_30px_#ec4899]',
+    white: '[text-shadow:0_0_10px_rgba(255,255,255,0.5),0_0_20px_rgba(255,255,255,0.3)]',
+  }
+
+  const intensityClasses = {
+    low: 'animate-[glitch-skew_2s_infinite_linear_alternate-reverse]',
+    medium: '',
+    high: 'animate-glitch',
+  }
+
+  if (hover) {
+    return (
+      <Component
+        className={clsx(
+          colorClasses[color],
+          'relative inline-block cursor-pointer transition-all duration-300',
+          'hover:' + glowClasses[color],
+          'glitch-hover',
+          className
+        )}
+        {...props}
+      >
+        {children}
+      </Component>
+    )
+  }
+
+  return (
+    <Component
+      className={clsx(
+        'glitch relative inline-block',
+        colorClasses[color],
+        glowClasses[color],
+        intensityClasses[intensity],
+        className
+      )}
+      data-text={text}
+      {...props}
+    >
+      {children}
+    </Component>
+  )
+}
+
+// Simpler glitch effect for headings
+interface GlitchHeadingProps {
+  children: ReactNode
+  level?: 1 | 2 | 3 | 4
+  className?: string
+  gradient?: boolean
+}
+
+export function GlitchHeading({
+  children,
+  level = 1,
+  className,
+  gradient = false,
+}: GlitchHeadingProps) {
+  const text = typeof children === 'string' ? children : ''
+
+  const sizeClasses = {
+    1: 'text-4xl md:text-5xl lg:text-6xl font-bold',
+    2: 'text-3xl md:text-4xl font-bold',
+    3: 'text-2xl md:text-3xl font-semibold',
+    4: 'text-xl md:text-2xl font-semibold',
+  }
+
+  const Component = `h${level}` as keyof JSX.IntrinsicElements
+
+  return (
+    <Component
+      className={clsx(
+        'glitch relative inline-block',
+        sizeClasses[level],
+        gradient ? 'gradient-neon-text' : 'text-white neon-text',
+        className
+      )}
+      data-text={text}
+    >
+      {children}
+    </Component>
+  )
+}