fix_string.js

const fs = require('fs');
const filePath = 'frontend/app/dashboard/components/page.tsx';
let content = fs.readFileSync(filePath, 'utf-8');

const code = `"use client"

import React, { useState, useRef, useEffect } from 'react';

export default function DigitalHoverButton({ label = "Digital Hover" }: { label?: string }) {
  const buttonRef = useRef<HTMLButtonElement>(null);
  const [mousePosition, setMousePosition] = useState({ x: 0, y: 0 });
  const [isHovered, setIsHovered] = useState(false);
  const [isPressed, setIsPressed] = useState(false);

  useEffect(() => {
    const handleMouseMove = (e: MouseEvent) => {
      if (buttonRef.current && isHovered) {
        const rect = buttonRef.current.getBoundingClientRect();
        setMousePosition({
          x: e.clientX - rect.left,
          y: e.clientY - rect.top,
        });
      }
    };

    window.addEventListener('mousemove', handleMouseMove);
    return () => window.removeEventListener('mousemove', handleMouseMove);
  }, [isHovered]);

  return (
    <div className="relative group">
      {/* Outer ambient glow that expands on hover */}
      <div 
        className={\`absolute -inset-1 bg-gradient-to-r from-zinc-200/80 via-slate-200/80 to-gray-200/80 dark:from-zinc-500/30 dark:via-slate-500/30 dark:to-gray-500/30 rounded-2xl blur-xl transition-all duration-1000 ease-out \${
          isHovered ? 'opacity-100 scale-105' : 'opacity-0 scale-90'
        }\`}
      />
      
      <button
        ref={buttonRef}
        onMouseEnter={() => setIsHovered(true)}
        onMouseLeave={() => {
          setIsHovered(false);
          setIsPressed(false);
        }}
        onMouseDown={() => setIsPressed(true)}
        onMouseUp={() => setIsPressed(false)}
        className={\`relative flex items-center justify-center gap-2 px-6 py-3 rounded-xl overflow-hidden outline-none bg-white dark:bg-[#0a0a0f] border border-zinc-200 dark:border-white/5 backdrop-blur-md transition-all duration-500 ease-[cubic-bezier(0.23,1,0.32,1)] \${
          isPressed 
            ? 'scale-[0.98] shadow-[inset_0_2px_10px_rgba(0,0,0,0.05)] dark:shadow-[inset_0_2px_10px_rgba(0,0,0,0.5)]' 
            : 'shadow-[0_2px_10px_rgba(0,0,0,0.06),inset_0_1px_0_rgba(255,255,255,1)] dark:shadow-[0_4px_24px_-8px_rgba(0,0,0,0.8),inset_0_1px_1px_rgba(255,255,255,0.05)]'
        }\`}
      >
        {/* Dynamic spotlight that follows cursor */}
        <div 
          className="absolute inset-0 opacity-0 group-hover:opacity-100 transition-opacity duration-500 pointer-events-none mix-blend-overlay dark:mix-blend-screen"
          style={{
            background: isHovered 
              ? \`radial-gradient(120px circle at \${mousePosition.x}px \${mousePosition.y}px, rgba(200,200,200,0.2), transparent 50%)\` 
              : 'transparent',
          }}
        />

        {/* Soft gradient background layer */}
        <div 
          className={\`absolute inset-0 bg-gradient-to-b from-black/[0.02] dark:from-white/[0.03] to-transparent pointer-events-none transition-opacity duration-500 \${
            isHovered ? 'opacity-100' : 'opacity-50'
          }\`}
        />

        {/* Top edge highlight for 3D effect */}
        <div className="absolute inset-x-4 top-0 h-px bg-gradient-to-r from-transparent via-white dark:via-white/20 to-transparent mix-blend-overlay" />
        {/* Bottom edge glow */}
        <div className={\`absolute inset-x-6 bottom-0 h-[2px] bg-gradient-to-r from-transparent via-zinc-400/40 dark:via-zinc-500/40 to-transparent blur-sm transition-opacity duration-500 \${isHovered ? 'opacity-100' : 'opacity-0'}\`} />
        <div className={\`absolute inset-x-10 bottom-0 h-px bg-gradient-to-r from-transparent via-zinc-300/50 dark:via-zinc-400/50 to-transparent transition-opacity duration-500 \${isHovered ? 'opacity-100' : 'opacity-0'}\`} />

        {/* Shine sweep effect */}
        <div 
          className="absolute top-0 bottom-0 w-32 bg-gradient-to-r from-transparent via-black/5 dark:via-white/10 to-transparent skew-x-[25deg] transition-transform duration-1000 ease-[cubic-bezier(0.16,1,0.3,1)] pointer-events-none"
          style={{
            transform: isHovered ? 'translateX(300%)' : 'translateX(-200%)'
          }}
        />

        {/* Content Container */}
        <div className="relative z-10 flex items-center justify-center">
          <span className={\`text-sm font-semibold tracking-wide transition-all duration-500 \${
            isHovered ? 'text-black dark:text-white drop-shadow-[0_0_12px_rgba(0,0,0,0.1)] dark:drop-shadow-[0_0_12px_rgba(255,255,255,0.4)]' : 'text-zinc-700 dark:text-zinc-400'
          }\`}>
           {label}
          </span>
        </div>
      </button>
    </div>
  );
}`;

const arr = code.split('\n').map(line => JSON.stringify(line));
const arrString = `const PREMIUM_CODE = [\n  ${arr.join(',\n  ')}\n].join('\\n');`;

// we need to replace from 'const PREMIUM_CODE =' until 'const INITIAL_COMPONENTS ='
content = content.replace(/const PREMIUM_CODE = [\s\S]*?(?=\nconst INITIAL_COMPONENTS)/, arrString + '\n');
fs.writeFileSync(filePath, content);